Style guide v3 + documentation fixes

src/apps/documentation/public/page.css

@@ -142,6 +142,15 @@
   text-transform: uppercase;
 }
 
+.page-documentation .dc-hero-screenshot {
+  width: 100%;
+  max-width: 800px;
+  margin: var(--df-space-6) auto 0;
+  display: block;
+  border: 1px solid var(--df-color-border-subtle);
+  clip-path: var(--df-clip-md);
+}
+
 /* ── Sections (Home view) ──────────────────────────────────────── */
 .page-documentation .dc-section {
   padding: var(--df-space-8) 0;
@@ -311,6 +320,15 @@
   margin-left: auto;
 }
 
+/* ── Module screenshots ───────────────────────────────────────── */
+.page-documentation .dc-module-screenshot {
+  width: 100%;
+  max-width: 100%;
+  margin: var(--df-space-3) 0 var(--df-space-2);
+  border: 1px solid var(--df-color-border-subtle);
+  clip-path: var(--df-clip-sm);
+}
+
 /* ── Lists ─────────────────────────────────────────────────────── */
 .page-documentation .dc-list {
   list-style: none;

src/apps/documentation/public/page.js

@@ -79,6 +79,7 @@ const HOME_HTML = `
       <div class="dc-stat"><span class="dc-stat-value">51</span><span class="dc-stat-label">MCP Tools</span></div>
       <div class="dc-stat"><span class="dc-stat-value">8</span><span class="dc-stat-label">MCP Servers</span></div>
     </div>
+    <img class="dc-hero-screenshot" src="/assets/screenshots/dashboard.png" alt="DevGlide Dashboard" loading="lazy" />
   </section>
 
   <!-- What is devglide -->
@@ -185,7 +186,7 @@ const GETTING_STARTED_HTML = `
       <h2>Starting the Server</h2>
       <p>Launch devglide from your project directory:</p>
       <div class="dc-codeblock"><code>devglide start</code></div>
-      <p>This starts the HTTP server on port 3000 and opens the dashboard in your browser.</p>
+      <p>This starts the HTTP server on port 7000 (configurable via <code>DEVGLIDE_PORT</code>) and opens the dashboard in your browser.</p>
     </div>
 
     <div class="dc-card">
@@ -207,7 +208,7 @@ const GETTING_STARTED_HTML = `
     <div class="dc-card">
       <h2>Creating Your First Project</h2>
       <div class="dc-numbered-steps">
-        <div class="dc-ns"><span class="dc-ns-num">1</span><p>Open the dashboard at <code>http://localhost:3000</code></p></div>
+        <div class="dc-ns"><span class="dc-ns-num">1</span><p>Open the dashboard at <code>http://localhost:7000</code></p></div>
         <div class="dc-ns"><span class="dc-ns-num">2</span><p>Click the <strong>project selector</strong> in the sidebar header</p></div>
         <div class="dc-ns"><span class="dc-ns-num">3</span><p>Select <strong>New Project</strong> and give it a name</p></div>
         <div class="dc-ns"><span class="dc-ns-num">4</span><p>The sidebar now shows project-scoped apps (Kanban, Log, Test, etc.)</p></div>
@@ -246,6 +247,7 @@ const MODULES_HTML = `
     <div class="dc-card" id="mod-kanban">
       <div class="dc-card-header"><span class="dc-card-icon">\u25A6</span><h2>Kanban</h2><span class="dc-tool-count">14 tools</span></div>
       <p>Full project management with features, columns, tasks, bugs, work logs, and review feedback.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/kanban.png" alt="Kanban board with task cards across columns" loading="lazy" />
       <h3>Key Concepts</h3>
       <ul class="dc-list">
         <li><strong>Features</strong> &mdash; Top-level containers representing product initiatives. Each gets its own board.</li>
@@ -261,6 +263,7 @@ const MODULES_HTML = `
     <div class="dc-card" id="mod-test">
       <div class="dc-card-header"><span class="dc-card-icon">\u2713</span><h2>Test</h2><span class="dc-tool-count">7 tools</span></div>
       <p>AI-driven browser test automation. Describe what to test in natural language and Claude generates scenarios automatically.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/test.png" alt="Test runner with saved scenarios and run history" loading="lazy" />
       <h3>How to Use</h3>
       <ul class="dc-list">
         <li><strong>Ask Claude</strong> &mdash; "Write a test that creates a kanban task and verifies it appears in the Todo column"</li>
@@ -281,6 +284,7 @@ const MODULES_HTML = `
     <div class="dc-card" id="mod-workflow">
       <div class="dc-card-header"><span class="dc-card-icon">\u2942</span><h2>Workflow</h2><span class="dc-tool-count">6 tools</span></div>
       <p>Visual DAG workflow builder for multi-step automations with decisions, loops, and integrations.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/workflow.png" alt="Visual workflow editor with connected nodes" loading="lazy" />
       <h3>Node Types</h3>
       <div class="dc-tag-grid">
         <span class="dc-tag">trigger</span><span class="dc-tag">action:shell</span><span class="dc-tag">action:kanban</span>
@@ -297,6 +301,7 @@ const MODULES_HTML = `
     <div class="dc-card" id="mod-shell">
       <div class="dc-card-header"><span class="dc-card-icon">\u276F</span><h2>Shell</h2><span class="dc-tool-count">5 tools</span></div>
       <p>Terminal multiplexer with named panes, scrollback capture, and MCP command execution.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/shell.png" alt="Four terminal panes with an embedded browser view" loading="lazy" />
       <h3>Key Concepts</h3>
       <ul class="dc-list">
         <li><strong>Panes</strong> &mdash; Independent terminal sessions, each running a shell process.</li>
@@ -352,11 +357,13 @@ const MODULES_HTML = `
     <div class="dc-card" id="mod-coder">
       <div class="dc-card-header"><span class="dc-card-icon">\u2039\u203A</span><h2>Coder</h2></div>
       <p>In-browser code editor with a file tree, tabbed editing, and live preview. Useful for quick manual edits, reviewing generated code, and previewing HTML output.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/coder.png" alt="File tree with package.json open in the editor" loading="lazy" />
     </div>
 
     <div class="dc-card" id="mod-voice">
       <div class="dc-card-header"><span class="dc-card-icon">\u25C9</span><h2>Voice</h2><span class="dc-tool-count">2 tools</span></div>
       <p>Speech-to-text transcription for hands-free interaction and dictation. Click the microphone widget in the sidebar to record. Audio is sent to the configured STT provider for transcription.</p>
+      <img class="dc-module-screenshot" src="/assets/screenshots/voice.png" alt="Voice configuration with transcription statistics" loading="lazy" />
       <h3>MCP Tools</h3>
       <p class="dc-tools-list">voice_transcribe, voice_status</p>
     </div>

src/server.ts

@@ -117,6 +117,7 @@ app.use((req, res, next) => {
 // ---------------------------------------------------------------------------
 
 app.use('/shared-assets', express.static(path.join(ROOT, 'src/packages/shared-assets')));
+app.use('/assets', express.static(path.join(ROOT, 'assets')));
 app.use('/df', express.static(path.join(ROOT, 'src/packages/design-tokens/dist')));
 app.use('/design-tokens', express.static(path.join(ROOT, 'src/packages/design-tokens/dist')));