npm - total-recall-brain - Versions diffs - 3.32.3 → 3.33.0 - Mend

total-recall-brain 3.32.3 → 3.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/README.md +3 -1
package/bin/total-recall.mjs +3 -0
package/docs/ARCHITECTURE.md +21 -4
package/docs/SSSS.md +230 -0
package/docs/reference/CLI_INVENTORY.md +77 -0
package/docs/reference/cli-reference.md +610 -0
package/frontend/dist/assets/{index-DGMNZi_1.js → index-BPrkIYkZ.js} +174 -130
package/frontend/dist/index.html +1 -1
package/frontend/src/App.tsx +8 -4
package/frontend/src/api/plugins.ts +80 -0
package/frontend/src/components/brand/AnimatedBrandMark.tsx +163 -0
package/frontend/src/components/brand/BrandMark.spec.tsx +4 -4
package/frontend/src/components/brand/BrandMark.tsx +12 -3
package/frontend/src/components/plugins/previews/CodeQualityPreview.tsx +130 -0
package/frontend/src/components/plugins/previews/ComposableCliPreview.tsx +131 -0
package/frontend/src/components/plugins/previews/DecisionPreview.tsx +156 -0
package/frontend/src/components/plugins/previews/DesignPreview.tsx +118 -0
package/frontend/src/components/plugins/previews/DomainsPreview.tsx +139 -0
package/frontend/src/components/plugins/previews/PhonePreview.tsx +86 -0
package/frontend/src/components/plugins/previews/SigningPreview.tsx +109 -0
package/frontend/src/components/plugins/previews/TextPreview.tsx +144 -0
package/frontend/src/components/plugins/previews/index.tsx +83 -0
package/package.json +4 -1
package/plugins/creative-search/README.md +26 -0
package/plugins/creative-search/cli.mjs +421 -0
package/plugins/creative-search/config.mjs +103 -0
package/plugins/creative-search/generator.mjs +44 -0
package/plugins/creative-search/plugin.json +59 -0
package/plugins/creative-search/ui/DESIGN.md +50 -0
package/plugins/creative-search/ui/csearch-main.js +311 -0
package/plugins/creative-search/ui/csearch-settings.js +392 -0
package/plugins/creative-search/ui/index.js +2 -0
package/plugins/creative-search/ui/tokens.css +34 -0
package/plugins/dsh/README.md +20 -0
package/plugins/dsh/cli.mjs +232 -0
package/plugins/dsh/generator.mjs +65 -0
package/plugins/dsh/plugin.json +57 -0
package/plugins/dsh/ui/DESIGN.md +48 -0
package/plugins/dsh/ui/dsh-main.js +226 -0
package/plugins/dsh/ui/dsh-status.js +265 -0
package/plugins/dsh/ui/index.js +2 -0
package/plugins/dsh/ui/tokens.css +32 -0
package/plugins/git-sentinel/README.md +2 -0
package/plugins/operator-alerts/README.md +9 -4
package/plugins/operator-alerts/notify-core.mjs +26 -3
package/plugins/system-monitor/README.md +2 -0
package/scaffold/.agent/skills/start/SKILL.md +75 -0
package/scaffold/.agent/skills/start/evals/evals.json +25 -0
package/scaffold/.agent/skills/start/evals/resolve-startup-entry.test.mjs +17 -0
package/scaffold/.agent/skills/start/references/runtime-contract.md +9 -0
package/scaffold/.agent/skills/start/references/startup-check-registration.mjs +14 -0
package/scaffold/.agent/skills/start/scripts/resolve-startup-entry.mjs +39 -0
package/scaffold/.agent/skills/start/scripts/start-session.mjs +28 -0
package/scaffold/.agent/skills/start/subagents/runtime-review.md +3 -0
package/scaffold/.agent/skills/total-recall/SKILL.md +31 -664
package/scaffold/.agent/skills/total-recall/references/operations.md +671 -0
package/src/cli/brief.mjs +5 -1
package/src/cli/command.mjs +44 -2
package/src/cli/context.mjs +35 -0
package/src/cli/doctor.mjs +24 -1
package/src/cli/help.mjs +2 -1
package/src/cli/mesh.mjs +15 -1
package/src/cli/plugin/install.mjs +6 -1
package/src/cli/plugin/remove.mjs +5 -1
package/src/cli/recall.mjs +22 -4
package/src/cli/repo-expert-generate.mjs +35 -2
package/src/cli/skill.mjs +6 -0
package/src/cli/startup.mjs +41 -0
package/src/cli/status.mjs +2 -1
package/src/core/command-surface.mjs +13 -1
package/src/core/context-compiler.mjs +42 -311
package/src/core/context-policy.mjs +59 -0
package/src/core/env-import.mjs +4 -7
package/src/core/fast-recall.mjs +130 -70
package/src/core/memory-layers.mjs +2 -0
package/src/core/mesh.mjs +34 -7
package/src/core/skills-registry.mjs +113 -21
package/src/core/startup-health.mjs +174 -0
package/src/core/surface.mjs +40 -227
package/src/server/route-manifest.json +12 -0
package/src/server/routes/_shared.mjs +5 -2
package/src/server/routes/context.mjs +17 -3
package/src/server/routes/instructions.mjs +5 -4
package/src/server/routes/plugins.mjs +137 -1
package/frontend/dist/assets/index-BUEZPLim.js +0 -5742
package/frontend/dist/assets/index-FOJG4jQh.js +0 -5742

package/frontend/dist/index.html CHANGED Viewed

@@ -17,7 +17,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
     <title>Total Recall — Portable Memory</title>
-    <script type="module" crossorigin src="/assets/index-FOJG4jQh.js"></script>
+    <script type="module" crossorigin src="/assets/index-BPrkIYkZ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C7_Xpk27.css">
   </head>
   <body>

package/frontend/src/App.tsx CHANGED Viewed

@@ -95,11 +95,15 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
   return (
     <aside className="sidebar">
-      <div className="sidebar-brand">
-        <div className="sidebar-brand-lockup" title="Total Recall">
-          <BrandMark variant="lockup" height={48} alt="Total Recall" />
+      <div className="sidebar-brand" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 14px' }}>
+        <BrandMark animated height={44} alt="Total Recall" />
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.02em', color: '#f8fafc' }}>Total Recall</span>
+            <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 5px', borderRadius: 4, background: 'rgba(59,130,246,0.15)', color: '#60a5fa', border: '1px solid rgba(59,130,246,0.3)' }}>v3.32</span>
+          </div>
+          <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.01em' }}>Portable memory · any IDE</span>
         </div>
-        <span style={{ paddingLeft: 2 }}>Portable memory · any IDE</span>
       </div>
       <nav className="sidebar-nav">
         <div className="nav-section-label">Memory</div>

package/frontend/src/api/plugins.ts CHANGED Viewed

@@ -197,3 +197,83 @@ export async function fetchPluginReadme(id: string): Promise<string> {
     return ""
   }
 }
+// ── Reviews ─────────────────────────────────────────────────────────────────
+export interface PluginReview {
+  type: string
+  plugin_id: string
+  rating: number
+  reviewer_node: string
+  verified_conformance: boolean
+  timestamp: string
+  content: string
+  _file: string
+  portability?: string
+  tags?: string[]
+}
+export interface ReviewsResponse {
+  success: boolean
+  pluginId: string
+  count: number
+  averageRating: number | null
+  reviews: PluginReview[]
+}
+export async function fetchPluginReviews(id: string, minRating?: number): Promise<ReviewsResponse> {
+  try {
+    let url = `${API_BASE}/api/plugins/${encodeURIComponent(id)}/reviews`
+    if (minRating !== undefined && minRating > 0) {
+      url += `?min_rating=${minRating}`
+    }
+    const res = await apiFetch(url)
+    if (!res.ok) return { success: false, pluginId: id, count: 0, averageRating: null, reviews: [] }
+    const data = await readJson(res)
+    return {
+      success: true,
+      pluginId: data.pluginId,
+      count: data.count,
+      averageRating: data.averageRating,
+      reviews: Array.isArray(data.reviews) ? data.reviews : [],
+    }
+  } catch {
+    return { success: false, pluginId: id, count: 0, averageRating: null, reviews: [] }
+  }
+}
+export function submitPluginReview(id: string, options: {
+  rating: number
+  text: string
+  reviewer_node?: string
+  verified_conformance?: boolean
+}): Promise<Result> {
+  return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/reviews`, options)
+}
+// ── Conformance ──────────────────────────────────────────────────────────────
+export interface ConformanceResponse {
+  success: boolean
+  pluginId: string
+  ssss_version: string
+  ssss_conformant: boolean
+  white_label_verified: boolean
+  tested: boolean
+  test_count: number
+  test_pass_count: number
+  test_pass_rate: number | null
+  capabilities: string[]
+  portability: string
+}
+export async function fetchPluginConformance(id: string): Promise<ConformanceResponse | null> {
+  try {
+    const res = await apiFetch(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/conformance`)
+    if (!res.ok) return null
+    const data = await readJson(res)
+    return data.success ? data : null
+  } catch {
+    return null
+  }
+}

package/frontend/src/components/brand/AnimatedBrandMark.tsx ADDED Viewed

@@ -0,0 +1,163 @@
+import type { CSSProperties } from 'react'
+interface AnimatedBrandMarkProps {
+  size?: number
+  className?: string
+  alt?: string
+}
+export default function AnimatedBrandMark({
+  size = 42,
+  className = '',
+  alt = 'Total Recall Animated Mark',
+}: AnimatedBrandMarkProps) {
+  const containerStyle: CSSProperties = {
+    width: size,
+    height: size,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    perspective: 800,
+  }
+  return (
+    <div className={`animated-brand-mark ${className}`} style={containerStyle} title={alt}>
+      <svg
+        viewBox="0 0 100 100"
+        width={size}
+        height={size}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ overflow: 'visible' }}
+      >
+        <defs>
+          {/* Radial glow filter for high-end glass look */}
+          <filter id="tr-glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feComposite in="SourceGraphic" in2="blur" operator="over" />
+          </filter>
+          <linearGradient id="tr-top-facet" x1="50" y1="20" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#60a5fa" stopOpacity="0.95" />
+            <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.8" />
+          </linearGradient>
+          <linearGradient id="tr-left-facet" x1="20" y1="38" x2="50" y2="80" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#2563eb" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="#1e3a8a" stopOpacity="0.85" />
+          </linearGradient>
+          <linearGradient id="tr-right-facet" x1="80" y1="38" x2="50" y2="80" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#1d4ed8" stopOpacity="0.95" />
+          </linearGradient>
+          <linearGradient id="tr-orbit-ring" x1="10" y1="50" x2="90" y2="50" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#38bdf8" stopOpacity="0.1" />
+            <stop offset="50%" stopColor="#60a5fa" stopOpacity="0.7" />
+            <stop offset="100%" stopColor="#818cf8" stopOpacity="0.1" />
+          </linearGradient>
+        </defs>
+        <style>{`
+          @keyframes tr-float {
+            0%, 100% {
+              transform: translateY(0px) rotate(0deg);
+            }
+            50% {
+              transform: translateY(-3px) rotate(1deg);
+            }
+          }
+          @keyframes tr-orbit {
+            0% {
+              transform: rotateX(68deg) rotateZ(0deg);
+            }
+            100% {
+              transform: rotateX(68deg) rotateZ(360deg);
+            }
+          }
+          @keyframes tr-pulse {
+            0%, 100% {
+              opacity: 0.6;
+              transform: scale(0.96);
+            }
+            50% {
+              opacity: 1;
+              transform: scale(1.04);
+            }
+          }
+          .tr-cube-group {
+            transform-origin: 50px 50px;
+            animation: tr-float 4.5s ease-in-out infinite;
+          }
+          .tr-orbit-plane {
+            transform-origin: 50px 50px;
+            animation: tr-orbit 7s linear infinite;
+          }
+          .tr-inner-core {
+            transform-origin: 50px 50px;
+            animation: tr-pulse 3s ease-in-out infinite;
+          }
+        `}</style>
+        {/* Orbit ring rotating in 3D perspective */}
+        <g className="tr-orbit-plane">
+          <ellipse
+            cx="50"
+            cy="50"
+            rx="42"
+            ry="42"
+            stroke="url(#tr-orbit-ring)"
+            strokeWidth="1.5"
+            strokeDasharray="16 8"
+          />
+          {/* Orbiting glowing memory node */}
+          <circle cx="92" cy="50" r="3.5" fill="#38bdf8" filter="url(#tr-glow)" />
+          <circle cx="92" cy="50" r="1.8" fill="#ffffff" />
+        </g>
+        {/* Floating isometric memory cube */}
+        <g className="tr-cube-group">
+          {/* Top Facet */}
+          <polygon
+            points="50,22 80,38 50,54 20,38"
+            fill="url(#tr-top-facet)"
+            stroke="rgba(255,255,255,0.25)"
+            strokeWidth="0.8"
+          />
+          {/* Left Facet */}
+          <polygon
+            points="20,38 50,54 50,86 20,70"
+            fill="url(#tr-left-facet)"
+            stroke="rgba(255,255,255,0.15)"
+            strokeWidth="0.8"
+          />
+          {/* Right Facet */}
+          <polygon
+            points="50,54 80,38 80,70 50,86"
+            fill="url(#tr-right-facet)"
+            stroke="rgba(255,255,255,0.15)"
+            strokeWidth="0.8"
+          />
+          {/* Glowing central core node */}
+          <g className="tr-inner-core">
+            <polygon
+              points="50,42 62,49 50,56 38,49"
+              fill="rgba(147, 197, 253, 0.4)"
+            />
+            <circle cx="50" cy="49" r="2.5" fill="#ffffff" filter="url(#tr-glow)" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  )
+}

package/frontend/src/components/brand/BrandMark.spec.tsx CHANGED Viewed

@@ -47,10 +47,10 @@ describe('BrandMark', () => {
     expect(screen.getByAltText('Custom Alt')).toBeInTheDocument();
   });
-  it('accepts custom className', () => {
-    render(<BrandMark className="test-class" />);
-    const img = screen.getByAltText('Total Recall');
-    expect(img.className).toContain('test-class');
+  it('renders animated variant when animated=true', () => {
+    render(<BrandMark animated height={44} />);
+    const animatedEl = document.querySelector('.animated-brand-mark');
+    expect(animatedEl).toBeInTheDocument();
   });
 });

package/frontend/src/components/brand/BrandMark.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
-/** Official Total Recall brand marks. */
+import AnimatedBrandMark from './AnimatedBrandMark'
-export type BrandVariant = 'lockup' | 'icon' | 'badge' | 'mark'
+export type BrandVariant = 'lockup' | 'icon' | 'badge' | 'mark' | 'animated'
 interface BrandMarkProps {
   variant?: BrandVariant
@@ -10,22 +10,31 @@ interface BrandMarkProps {
   alt?: string
   /** Light plate behind lockup for dark surfaces (PNG has white bg). */
   plate?: boolean
+  /** Render dynamic looping 3D vector animation mark. */
+  animated?: boolean
 }
-const SRC: Record<BrandVariant, string> = {
+const SRC: Record<Exclude<BrandVariant, 'animated'>, string> = {
   lockup: '/brand/total-recall-lockup.png',
   icon: '/brand/total-recall-icon.svg',
   badge: '/brand/total-recall-badge.jpg',
   mark: '/brand/total-recall-mark.svg',
 }
+export { AnimatedBrandMark }
 export default function BrandMark({
   variant = 'lockup',
   height = 40,
   className = '',
   alt = 'Total Recall',
   plate = false,
+  animated = false,
 }: BrandMarkProps) {
+  if (animated || variant === 'animated') {
+    return <AnimatedBrandMark size={height} className={className} alt={alt} />
+  }
   const isSquare = variant === 'icon' || variant === 'badge' || variant === 'mark'
   const img = (
     <img

package/frontend/src/components/plugins/previews/CodeQualityPreview.tsx ADDED Viewed

@@ -0,0 +1,130 @@
+import { type CSSProperties } from "react"
+const styles: Record<string, CSSProperties> = {
+  container: {
+    background: "linear-gradient(135deg, #0a1628, #1a1a2e)",
+    borderRadius: "12px",
+    padding: "24px",
+    fontFamily: "var(--font-mono, 'SF Mono', monospace)",
+    color: "#e0e0e0",
+    maxWidth: "580px",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: "16px",
+  },
+  label: {
+    color: "#888",
+    fontSize: "11px",
+    textTransform: "uppercase" as const,
+    letterSpacing: "1px",
+  },
+  badge: {
+    background: "#1a2a1a",
+    color: "#4caf50",
+    padding: "4px 10px",
+    borderRadius: "20px",
+    fontSize: "11px",
+  },
+  summary: {
+    display: "flex",
+    gap: "16px",
+    marginBottom: "16px",
+  },
+  statCard: {
+    background: "#0d1117",
+    border: "1px solid #2a2a4a",
+    borderRadius: "8px",
+    padding: "12px 16px",
+    flex: 1,
+  },
+  statValue: {
+    fontSize: "20px",
+    fontWeight: 700,
+  },
+  statLabel: {
+    fontSize: "10px",
+    color: "#888",
+    textTransform: "uppercase" as const,
+    letterSpacing: "1px",
+    marginTop: "4px",
+  },
+  gateTable: {
+    width: "100%",
+    borderCollapse: "collapse" as const,
+  },
+  th: {
+    color: "#888",
+    fontSize: "11px",
+    textTransform: "uppercase" as const,
+    padding: "8px 12px",
+    textAlign: "left" as const,
+    borderBottom: "1px solid #2a2a4a",
+  },
+  td: {
+    padding: "10px 12px",
+    fontSize: "12px",
+    borderBottom: "1px solid #1a1a2e",
+  },
+  pass: {
+    color: "#4caf50",
+  },
+  fail: {
+    color: "#ff5252",
+  },
+}
+const gates = [
+  { name: "TypeScript", status: "pass", detail: "0 errors" },
+  { name: "ESLint", status: "pass", detail: "0 warnings" },
+  { name: "Vitest", status: "pass", detail: "42/42 tests" },
+  { name: "Bundle Size", status: "pass", detail: "12.4 kB" },
+  { name: "SSSS Schema", status: "fail", detail: "1 warning" },
+  { name: "Mesh Sync", status: "pass", detail: "2 peers synced" },
+]
+export function CodeQualityPreview() {
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.label}>Gate Report</span>
+        <span style={styles.badge}>5/6 passing</span>
+      </div>
+      <div style={styles.summary}>
+        <div style={{ ...styles.statCard, borderColor: "#1a3a1a" }}>
+          <div style={{ ...styles.statValue, color: "#4caf50" }}>5</div>
+          <div style={styles.statLabel}>Passing</div>
+        </div>
+        <div style={styles.statCard}>
+          <div style={{ ...styles.statValue, color: "#ff5252" }}>1</div>
+          <div style={styles.statLabel}>Failing</div>
+        </div>
+        <div style={styles.statCard}>
+          <div style={{ ...styles.statValue, color: "#64b5f6" }}>6</div>
+          <div style={styles.statLabel}>Total Gates</div>
+        </div>
+      </div>
+      <table style={styles.gateTable}>
+        <thead>
+          <tr>
+            <th style={styles.th}>Gate</th>
+            <th style={styles.th}>Status</th>
+            <th style={styles.th}>Detail</th>
+          </tr>
+        </thead>
+        <tbody>
+          {gates.map((g, i) => (
+            <tr key={i}>
+              <td style={styles.td}>{g.name}</td>
+              <td style={{ ...styles.td, ...(g.status === "pass" ? styles.pass : styles.fail) }}>
+                {g.status === "pass" ? "✓" : "✗"}
+              </td>
+              <td style={styles.td}>{g.detail}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/frontend/src/components/plugins/previews/ComposableCliPreview.tsx ADDED Viewed

@@ -0,0 +1,131 @@
+import { useState, type CSSProperties } from "react"
+const styles: Record<string, CSSProperties> = {
+  container: {
+    background: "linear-gradient(135deg, #0d1117, #1a1a2e)",
+    borderRadius: "12px",
+    padding: "24px",
+    fontFamily: "var(--font-mono, 'SF Mono', 'Fira Code', monospace)",
+    color: "#e0e0e0",
+    maxWidth: "520px",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: "16px",
+  },
+  label: {
+    color: "#888",
+    fontSize: "11px",
+    textTransform: "uppercase" as const,
+    letterSpacing: "1px",
+  },
+  badge: {
+    background: "#1a2a3a",
+    color: "#64b5f6",
+    padding: "4px 10px",
+    borderRadius: "20px",
+    fontSize: "11px",
+  },
+  terminal: {
+    background: "#0a0a1a",
+    border: "1px solid #2a2a4a",
+    borderRadius: "8px",
+    padding: "12px",
+    marginBottom: "12px",
+    minHeight: "100px",
+    overflow: "auto" as const,
+  },
+  line: {
+    fontSize: "12px",
+    lineHeight: 1.6,
+    whiteSpace: "pre-wrap" as const,
+  },
+  prompt: {
+    color: "#4caf50",
+  },
+  cmd: {
+    color: "#e0e0e0",
+  },
+  output: {
+    color: "#888",
+  },
+  inputRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    background: "#0a0a1a",
+    border: "1px solid #2a2a4a",
+    borderRadius: "8px",
+    padding: "8px 12px",
+  },
+  input: {
+    flex: 1,
+    background: "transparent",
+    border: "none",
+    color: "#4caf50",
+    fontFamily: "var(--font-mono, 'SF Mono', monospace)",
+    fontSize: "12px",
+    outline: "none",
+  },
+  commands: {
+    display: "flex",
+    flexWrap: "wrap" as const,
+    gap: "6px",
+    marginTop: "12px",
+  },
+  cmdChip: {
+    background: "#1e1e3a",
+    border: "1px solid #2a2a4a",
+    borderRadius: "6px",
+    padding: "4px 10px",
+    fontSize: "11px",
+    color: "#aaa",
+    cursor: "pointer",
+  },
+}
+const initialLines = [
+  { kind: "prompt", text: "total-recall@mesh:~$ " },
+  { kind: "cmd", text: "total-recall --help" },
+  { kind: "output", text: "\nTotal Recall Composable CLI v2.1.0" },
+  { kind: "output", text: "\nCommands:" },
+  { kind: "output", text: "\n  recall      <query>        Search memory" },
+  { kind: "output", text: "\n  remember    <category>     Write memory" },
+  { kind: "output", text: "\n  compile                     Rebuild surfaces" },
+  { kind: "output", text: "\n  mesh        nodes           List mesh peers" },
+  { kind: "output", text: "\n  plugin      list            Show installed plugins" },
+  { kind: "output", text: "\n  vercel-rotate               Rotate API token" },
+  { kind: "prompt", text: "\ntotal-recall@mesh:~$ " },
+]
+export function ComposableCliPreview() {
+  const [cmdHistory, _setCmdHistory] = useState(initialLines)
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.label}>Composable CLI</span>
+        <span style={styles.badge}>Active</span>
+      </div>
+      <div style={styles.terminal}>
+        {cmdHistory.map((l, i) => (
+          <div key={i} style={styles.line}>
+            {l.kind === "prompt" && <span style={styles.prompt}>{l.text}</span>}
+            {l.kind === "cmd" && <span style={styles.cmd}>{l.text}</span>}
+            {l.kind === "output" && <span style={styles.output}>{l.text}</span>}
+          </div>
+        ))}
+      </div>
+      <div style={styles.inputRow}>
+        <span style={{ ...styles.prompt, fontSize: "12px" }}>$</span>
+        <input style={styles.input} placeholder="Type a command..." readOnly />
+      </div>
+      <div style={styles.commands}>
+        {["help", "recall", "remember", "compile", "mesh", "plugins"].map((c) => (
+          <span key={c} style={styles.cmdChip}>{c}</span>
+        ))}
+      </div>
+    </div>
+  )
+}