fix: render namespace table as HTML instead of raw markdown in pre block

Author: ericallam

docs/src/app/home.css

@@ -120,6 +120,12 @@
 .hp-skills h2 { font-family: var(--hp-title); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
 .hp-skills-install { background: var(--hp-bg-code); border: 1px solid var(--hp-border); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
 .hp-skills-pre { padding: 20px; overflow-x: auto; font-family: var(--hp-mono); font-size: 12.5px; line-height: 1.7; color: var(--hp-text-dim); margin: 0; background: transparent !important; }
+.hp-skills-config { padding: 20px; font-family: var(--hp-mono); font-size: 13px; }
+.hp-skills-config-heading { color: var(--hp-text); font-weight: 600; margin-bottom: 12px; }
+.hp-skills-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
+.hp-skills-table th { text-align: left; color: var(--hp-text-dim); font-weight: 500; padding: 6px 16px 6px 0; border-bottom: 1px solid var(--hp-border); }
+.hp-skills-table td { color: var(--hp-text-dim); padding: 6px 16px 6px 0; border-bottom: 1px solid var(--hp-border); }
+.hp-skills-config-note { color: var(--hp-text-muted); font-size: 12px; }
 .hp-skills-detail { display: flex; gap: 32px; }
 .hp-skills-detail p { color: var(--hp-text-dim); font-size: 14px; line-height: 1.6; flex: 1; }
 .hp-skills-detail a { color: var(--hp-accent); }

docs/src/app/page.tsx

@@ -232,18 +232,22 @@ export default function HomePage() {
             <div className="hp-code-pane-header" style={{ borderRadius: '8px 8px 0 0' }}>
               <div className="hp-code-pane-label">what init writes to your agent config</div>
             </div>
-            <pre className="hp-skills-pre"><code dangerouslySetInnerHTML={{ __html: `<span class="trail-msg">## agentcrumbs</span>
-
-<span class="trail-msg">### Namespaces</span>
-
-<span class="cc-dim">| Namespace        | Description                      | Path              |</span>
-<span class="cc-dim">| ---              | ---                              | ---               |</span>
-| <span class="trail-name">api-gateway</span>    | <span class="cc-dim">HTTP API and routing</span>             | <span class="cc-dim">apps/gateway</span>      |
-| <span class="trail-name-b">auth-service</span>   | <span class="cc-dim">Authentication and token handling</span> | <span class="cc-dim">apps/auth</span>         |
-| <span class="trail-name-c">billing</span>        | <span class="cc-dim">Stripe integration and charges</span>   | <span class="cc-dim">apps/billing</span>      |
-| <span class="trail-name">task-runner</span>    | <span class="cc-dim">Background job execution</span>         | <span class="cc-dim">apps/worker</span>       |
-
-<span class="cc-dim">Do not invent new namespaces. Pick from this table or ask first.</span>` }} /></pre>
+            <div className="hp-skills-config">
+              <div className="hp-skills-config-heading">## agentcrumbs</div>
+              <div className="hp-skills-config-heading">### Namespaces</div>
+              <table className="hp-skills-table">
+                <thead>
+                  <tr><th>Namespace</th><th>Description</th><th>Path</th></tr>
+                </thead>
+                <tbody>
+                  <tr><td className="trail-name">api-gateway</td><td>HTTP API and routing</td><td>apps/gateway</td></tr>
+                  <tr><td className="trail-name-b">auth-service</td><td>Authentication and token handling</td><td>apps/auth</td></tr>
+                  <tr><td className="trail-name-c">billing</td><td>Stripe integration and charges</td><td>apps/billing</td></tr>
+                  <tr><td className="trail-name">task-runner</td><td>Background job execution</td><td>apps/worker</td></tr>
+                </tbody>
+              </table>
+              <div className="hp-skills-config-note">Do not invent new namespaces. Pick from this table or ask first.</div>
+            </div>
           </div>
 
           <div className="hp-skills-detail">