docs(screenshot): add screenshot capture section to user guide and docs page

docs/USER_GUIDE.md

@@ -243,7 +243,28 @@ Right-click on files/folders in the explorer:
 
 ---
 
-## 10. Privacy & Data
+## 10. Screenshot Capture
+
+You can attach screenshots to your chat messages to give the AI visual context. Access capture options from the **Feature Menu** (grid icon) in the Command Center.
+
+### Capture Modes
+
+*   **Capture Window**: Select a window from the picker and attach a full screenshot of it.
+*   **Capture Region**: Select a window, then drag to crop a specific region from it.
+
+### Platform Notes (Linux / X11)
+
+On X11-based desktops (e.g., Openbox, i3, Fluxbox), window capture has the following limitations:
+
+*   **Current workspace only**: The window picker only shows windows on your active workspace. Windows on other virtual desktops cannot be captured because X11 does not render off-screen windows.
+*   **Window must be visible**: The target window must be visible and not fully obscured by another window. If a window is covered, the capture may return a black image. **Click the window to bring it to the front before capturing.**
+*   **Compositors help**: If you run a compositor such as `picom` or `compton`, these limitations are largely eliminated — compositors maintain off-screen buffers for all windows, enabling capture of obscured or unfocused windows.
+
+These limitations do not apply to **Wayland** desktops (GNOME, KDE Plasma 6) or **macOS**, which use compositing by default.
+
+---
+
+## 11. Privacy & Data
 
 *   **No Telemetry**: Zaguán Blade does not collect usage telemetry.
 *   **Local Storage Mode**: When using local storage, your code and conversations never leave your machine.
@@ -251,7 +272,7 @@ Right-click on files/folders in the explorer:
 
 ---
 
-## 11. Support & Feedback
+## 12. Support & Feedback
 
 This is an **Alpha Release**. We define "Alpha" as "Feature incomplete, but good enough to be useful."
 

src/pages/docs.astro

@@ -365,10 +365,43 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </div>
     </section>
 
-    <!-- Privacy Section -->
+    <!-- Screenshot Capture Section -->
-    <section id="privacy" class="docs-section section-alt">
+    <section id="screenshot" class="docs-section section-alt">
       <div class="container">
-        <div class="section-label">[010] PRIVACY_&_DATA</div>
+        <div class="section-label">[010] SCREENSHOT_CAPTURE</div>
+        <h2 class="section-title">Screenshot Capture</h2>
+        <p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
+        
+        <div class="screenshot-grid">
+          <div class="screenshot-card">
+            <div class="screenshot-icon">🖼</div>
+            <h3>Capture Window</h3>
+            <p>Select a window from the picker and attach a full screenshot of it.</p>
+          </div>
+          <div class="screenshot-card">
+            <div class="screenshot-icon">✂</div>
+            <h3>Capture Region</h3>
+            <p>Select a window, then drag to crop a specific region from it.</p>
+          </div>
+        </div>
+        
+        <div class="screenshot-notes">
+          <h3>Platform Notes (Linux / X11)</h3>
+          <p>On X11-based desktops (e.g., Openbox, i3, Fluxbox), window capture has the following limitations:</p>
+          <ul>
+            <li><strong>Current workspace only</strong> — The window picker only shows windows on your active workspace. Windows on other virtual desktops cannot be captured because X11 does not render off-screen windows.</li>
+            <li><strong>Window must be visible</strong> — The target window must be visible and not fully obscured by another window. If a window is covered, the capture may return a black image. <strong>Click the window to bring it to the front before capturing.</strong></li>
+            <li><strong>Compositors help</strong> — If you run a compositor such as <code class="inline-code">picom</code> or <code class="inline-code">compton</code>, these limitations are largely eliminated — compositors maintain off-screen buffers for all windows, enabling capture of obscured or unfocused windows.</li>
+          </ul>
+          <p class="screenshot-note-wayland">These limitations do not apply to <strong>Wayland</strong> desktops (GNOME, KDE Plasma 6) or <strong>macOS</strong>, which use compositing by default.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Privacy Section -->
+    <section id="privacy" class="docs-section">
+      <div class="container">
+        <div class="section-label">[011] PRIVACY_&_DATA</div>
         <h2 class="section-title">Your Data, Your Control</h2>
         
         <div class="privacy-grid">
@@ -394,7 +427,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     <!-- Local AI System Prompts Section -->
     <section id="local-ai-prompts" class="docs-section">
       <div class="container">
-        <div class="section-label">[011] LOCAL_AI_SYSTEM_PROMPTS</div>
+        <div class="section-label">[012] LOCAL_AI_SYSTEM_PROMPTS</div>
         <h2 class="section-title">Custom System Prompts</h2>
         
         <div class="instructions-content">
@@ -461,7 +494,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     <!-- Tool Calls Reference Section -->
     <section id="tool-calls" class="docs-section section-alt">
       <div class="container">
-        <div class="section-label">[012] TOOL_CALLS_REFERENCE</div>
+        <div class="section-label">[013] TOOL_CALLS_REFERENCE</div>
         <h2 class="section-title">Tool Calls Reference</h2>
         
         <div class="instructions-content">
@@ -486,7 +519,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     <!-- Known Bugs Section -->
     <section id="known-bugs" class="docs-section section-alt">
       <div class="container">
-        <div class="section-label">[012] KNOWN_BUGS</div>
+        <div class="section-label">[014] KNOWN_BUGS</div>
         <h2 class="section-title">Known Issues</h2>
         <p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
         
@@ -525,7 +558,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     <!-- Support Section -->
     <section id="support" class="docs-section">
       <div class="container">
-        <div class="section-label">[013] SUPPORT_&_FEEDBACK</div>
+        <div class="section-label">[015] SUPPORT_&_FEEDBACK</div>
         <div class="support-card">
           <div class="support-header">
             <h2>Alpha Release</h2>
@@ -1296,6 +1329,92 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     border-color: var(--color-accent);
   }
   
+  /* Screenshot Capture */
+  .screenshot-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+  }
+  
+  .screenshot-card {
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    padding: var(--space-xl);
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+  
+  .screenshot-card:hover {
+    border-color: var(--color-accent);
+    transform: translateY(-4px);
+  }
+  
+  .screenshot-icon {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+  }
+  
+  .screenshot-card h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: var(--space-sm);
+    text-transform: uppercase;
+  }
+  
+  .screenshot-card p {
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.6;
+  }
+  
+  .screenshot-notes {
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-left: 4px solid var(--color-accent-alt);
+    padding: var(--space-xl);
+  }
+  
+  .screenshot-notes h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: var(--space-md);
+    text-transform: uppercase;
+  }
+  
+  .screenshot-notes p {
+    color: var(--color-text-secondary);
+    line-height: 1.7;
+    margin-bottom: var(--space-md);
+  }
+  
+  .screenshot-notes ul {
+    list-style: none;
+    margin: var(--space-md) 0;
+  }
+  
+  .screenshot-notes li {
+    padding: var(--space-sm) 0;
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.6;
+  }
+  
+  .screenshot-notes li:last-child {
+    border-bottom: none;
+  }
+  
+  .screenshot-notes strong {
+    color: var(--color-text);
+  }
+  
+  .screenshot-note-wayland {
+    font-style: italic;
+    color: var(--color-text-tertiary) !important;
+    margin-bottom: 0 !important;
+  }
+  
   /* Privacy */
   .privacy-grid {
     display: grid;