@mrpatronz/nexusflow 0.2.17 → 0.2.19

package/gui/src/app/AppSidebar.tsx

@@ -0,0 +1,69 @@
+import { LayoutDashboard, FolderGit2, Workflow, Settings as SettingsIcon, BookOpen, Plus, type LucideIcon } from 'lucide-react';
+import { cn } from '../components/ui/index.js';
+
+interface NavItem {
+  label: string;
+  to: string;
+  icon: LucideIcon;
+  match: (p: string) => boolean;
+}
+
+const ITEMS: NavItem[] = [
+  { label: 'Overview', to: '/', icon: LayoutDashboard, match: (p) => p === '/' },
+  { label: 'Workspaces', to: '/workspaces', icon: FolderGit2, match: (p) => p.startsWith('/workspaces') },
+  { label: 'Strategies', to: '/strategies', icon: Workflow, match: (p) => p.startsWith('/strategies') },
+  { label: 'Settings', to: '/settings', icon: SettingsIcon, match: (p) => p.startsWith('/settings') },
+];
+
+export function AppSidebar({
+  pathname,
+  appVersion,
+  onNavigate,
+  onNewWorkspace,
+}: {
+  pathname: string;
+  appVersion: string;
+  onNavigate: (to: string) => void;
+  onNewWorkspace: () => void;
+}) {
+  const linkClass = (active: boolean) =>
+    cn(
+      'flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+      active ? 'bg-accent-soft text-accent' : 'text-content-muted hover:bg-raised hover:text-content',
+    );
+
+  return (
+    <aside className="flex w-60 shrink-0 flex-col border-r border-hairline bg-surface/40 p-4">
+      <div className="mb-5 flex items-center gap-2.5 px-2 py-1">
+        <div className="grid h-8 w-8 place-items-center rounded-md bg-accent font-display text-sm font-bold text-white">NF</div>
+        <span className="font-display text-sm font-semibold text-content">NexusFlow</span>
+      </div>
+
+      <button
+        onClick={onNewWorkspace}
+        className="mb-5 inline-flex items-center justify-center gap-2 rounded-md bg-accent px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-hover cursor-pointer"
+      >
+        <Plus size={16} /> New workspace
+      </button>
+
+      <nav className="flex flex-1 flex-col gap-1">
+        {ITEMS.map((it) => {
+          const Icon = it.icon;
+          return (
+            <button key={it.to} onClick={() => onNavigate(it.to)} className={linkClass(it.match(pathname))}>
+              <Icon size={16} /> {it.label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <button onClick={() => onNavigate('/guide')} className={linkClass(pathname.startsWith('/guide'))}>
+        <BookOpen size={16} /> Getting started
+      </button>
+
+      <div className="mt-3 border-t border-hairline pt-3 text-center text-[10px] font-medium uppercase tracking-wider text-content-faint">
+        NexusFlow v{appVersion}
+      </div>
+    </aside>
+  );
+}

package/gui/src/assets/vite.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/gui/src/components/AddRepoPicker.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react';
+import { Plus, Search } from 'lucide-react';
+import type { RepoInfo } from '../types.js';
+import { Input } from './ui/index.js';
+
+/** A searchable popover for attaching another repository to a workspace. */
+export function AddRepoPicker({
+  repos,
+  disabled,
+  onAdd,
+}: {
+  repos: RepoInfo[];
+  disabled?: boolean;
+  onAdd: (repoPath: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return repos;
+    return repos.filter((r) => r.name.toLowerCase().includes(q) || r.path.toLowerCase().includes(q));
+  }, [repos, query]);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => {
+          setQuery('');
+          setOpen((o) => !o);
+        }}
+        className="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-xs font-medium text-content-muted transition-colors hover:bg-raised hover:text-content disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+      >
+        <Plus size={14} /> Add repository
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" aria-hidden="true" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 z-50 mt-1.5 w-72 overflow-hidden rounded-lg border border-hairline bg-raised shadow-xl animate-fade-in">
+            <div className="relative border-b border-hairline p-2">
+              <Search size={14} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-content-faint" />
+              <Input
+                autoFocus
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search repositories"
+                className="pl-8"
+              />
+            </div>
+            <div role="listbox" className="max-h-64 overflow-y-auto py-1">
+              {filtered.length === 0 ? (
+                <div className="px-3 py-4 text-center text-xs text-content-faint">No repositories found.</div>
+              ) : (
+                filtered.map((r) => (
+                  <button
+                    key={r.path}
+                    role="option"
+                    aria-selected={false}
+                    onClick={() => {
+                      setOpen(false);
+                      onAdd(r.path);
+                    }}
+                    className="flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left transition-colors hover:bg-surface cursor-pointer"
+                  >
+                    <span className="font-mono text-xs font-semibold text-content">{r.name}</span>
+                    <span className="w-full truncate text-[10px] text-content-faint">{r.path}</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/gui/src/components/ui/Button.tsx

@@ -0,0 +1,40 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from './cn.js';
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type Size = 'sm' | 'md';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  icon?: ReactNode;
+}
+
+const VARIANTS: Record<Variant, string> = {
+  primary: 'bg-accent text-white hover:bg-accent-hover border border-transparent',
+  secondary: 'bg-surface text-content border border-hairline hover:bg-raised hover:border-hairline-strong',
+  ghost: 'bg-transparent text-content-muted hover:text-content hover:bg-raised border border-transparent',
+  danger: 'bg-transparent text-danger border border-danger/40 hover:bg-danger/10',
+};
+
+const SIZES: Record<Size, string> = {
+  sm: 'text-xs px-2.5 py-1.5 gap-1.5 rounded-md',
+  md: 'text-sm px-3.5 py-2 gap-2 rounded-md',
+};
+
+export function Button({ variant = 'secondary', size = 'md', icon, className, children, ...rest }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed',
+        VARIANTS[variant],
+        SIZES[size],
+        className,
+      )}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}

package/gui/src/components/ui/Card.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from './cn.js';
+
+export function Card({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('bg-surface border border-hairline rounded-lg', className)} {...rest} />;
+}

package/gui/src/components/ui/EmptyState.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+      {icon && <div className="mb-3 text-content-faint">{icon}</div>}
+      <h3 className="font-display text-lg font-semibold text-content">{title}</h3>
+      {description && <p className="mt-1 max-w-sm text-sm text-content-muted">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/gui/src/components/ui/Input.tsx

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { cn } from './cn.js';
+
+const base =
+  'w-full bg-base border border-hairline rounded-md px-3 py-2 text-sm text-content placeholder:text-content-faint outline-none focus:border-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+
+export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn(base, className)} {...rest} />;
+}
+
+export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={cn(base, 'resize-y leading-relaxed', className)} {...rest} />;
+}
+
+export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select className={cn(base, 'cursor-pointer', className)} {...rest}>
+      {children}
+    </select>
+  );
+}

package/gui/src/components/ui/Menu.tsx

@@ -0,0 +1,71 @@
+import { useState, type ReactNode } from 'react';
+import { cn } from './cn.js';
+
+export interface MenuItem {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export function Menu({
+  trigger,
+  items,
+  align = 'right',
+  label,
+}: {
+  trigger: ReactNode;
+  items: MenuItem[];
+  align?: 'left' | 'right';
+  label?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center justify-center cursor-pointer"
+      >
+        {trigger}
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" aria-hidden="true" onClick={() => setOpen(false)} />
+          <div
+            role="menu"
+            className={cn(
+              'absolute z-50 mt-1.5 min-w-48 rounded-lg border border-hairline bg-raised py-1 shadow-xl animate-fade-in',
+              align === 'right' ? 'right-0' : 'left-0',
+            )}
+          >
+            {items.map((it, i) => (
+              <div key={i}>
+                {it.danger && <div className="my-1 h-px bg-hairline" />}
+                <button
+                  role="menuitem"
+                  disabled={it.disabled}
+                  onClick={() => {
+                    setOpen(false);
+                    it.onClick();
+                  }}
+                  className={cn(
+                    'flex w-full items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed',
+                    it.danger ? 'text-danger hover:bg-danger/10' : 'text-content-muted hover:bg-surface hover:text-content',
+                  )}
+                >
+                  {it.icon}
+                  {it.label}
+                </button>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/gui/src/components/ui/Modal.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { cn } from './cn.js';
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  className,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/70" onClick={onClose} aria-hidden="true" />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn('relative z-10 w-full max-w-lg rounded-lg border border-hairline bg-surface shadow-2xl animate-rise', className)}
+      >
+        {title && (
+          <div className="flex items-center justify-between border-b border-hairline px-5 py-3.5">
+            <h3 className="font-display font-semibold text-content">{title}</h3>
+            <button onClick={onClose} className="cursor-pointer text-content-faint hover:text-content" aria-label="Close">
+              <X size={16} />
+            </button>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

package/gui/src/components/ui/PageHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="mb-6 flex items-start justify-between gap-4">
+      <div className="min-w-0">
+        <h1 className="font-display text-2xl font-bold tracking-tight text-content">{title}</h1>
+        {subtitle && <p className="mt-1 text-sm text-content-muted">{subtitle}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/gui/src/components/ui/RepoStatusStrip.tsx

@@ -0,0 +1,33 @@
+import { cn } from './cn.js';
+
+export type RepoState = 'clean' | 'changes' | 'conflict' | 'unknown';
+
+const STATE_DOT: Record<RepoState, string> = {
+  clean: 'bg-success',
+  changes: 'bg-warning',
+  conflict: 'bg-danger',
+  unknown: 'bg-idle',
+};
+
+export interface RepoDot {
+  name: string;
+  state?: RepoState;
+}
+
+/** Signature element: a row of per-repo status dots, reused across dashboard, list and detail. */
+export function RepoStatusStrip({ repos, className }: { repos: RepoDot[]; className?: string }) {
+  return (
+    <div className={cn('flex flex-wrap items-center gap-1.5', className)}>
+      {repos.map((r) => (
+        <span
+          key={r.name}
+          title={`${r.name}${r.state ? ` · ${r.state}` : ''}`}
+          className="inline-flex items-center gap-1.5 rounded border border-hairline bg-base px-2 py-0.5 font-mono text-[11px] font-medium text-content-muted"
+        >
+          <span className={cn('h-1.5 w-1.5 rounded-full', STATE_DOT[r.state ?? 'unknown'])} />
+          {r.name}
+        </span>
+      ))}
+    </div>
+  );
+}

package/gui/src/components/ui/Skeleton.tsx

@@ -0,0 +1,5 @@
+import { cn } from './cn.js';
+
+export function Skeleton({ className }: { className?: string }) {
+  return <div className={cn('animate-pulse rounded-md bg-raised', className)} />;
+}

package/gui/src/components/ui/StatusPill.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { cn } from './cn.js';
+
+export type Tone = 'success' | 'warning' | 'danger' | 'running' | 'idle' | 'accent' | 'neutral';
+
+const TONES: Record<Tone, string> = {
+  success: 'text-success border-success/30 bg-success/10',
+  warning: 'text-warning border-warning/30 bg-warning/10',
+  danger: 'text-danger border-danger/30 bg-danger/10',
+  running: 'text-running border-running/30 bg-running/10',
+  idle: 'text-content-faint border-hairline bg-surface',
+  accent: 'text-accent border-accent/30 bg-accent-soft',
+  neutral: 'text-content-muted border-hairline bg-raised',
+};
+
+export function StatusPill({
+  tone = 'neutral',
+  dot,
+  title,
+  children,
+}: {
+  tone?: Tone;
+  dot?: boolean;
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span
+      title={title}
+      className={cn('inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-0.5 rounded-md border whitespace-nowrap', TONES[tone])}
+    >
+      {dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
+      {children}
+    </span>
+  );
+}

package/gui/src/components/ui/Tabs.tsx

@@ -0,0 +1,40 @@
+import { cn } from './cn.js';
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+export function Tabs({
+  items,
+  value,
+  onChange,
+  className,
+}: {
+  items: TabItem[];
+  value: string;
+  onChange: (v: string) => void;
+  className?: string;
+}) {
+  return (
+    <div role="tablist" className={cn('flex items-center gap-1 border-b border-hairline overflow-x-auto', className)}>
+      {items.map((it) => {
+        const active = it.value === value;
+        return (
+          <button
+            key={it.value}
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(it.value)}
+            className={cn(
+              '-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+              active ? 'text-content border-accent' : 'text-content-faint border-transparent hover:text-content',
+            )}
+          >
+            {it.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/gui/src/components/ui/cn.ts

@@ -0,0 +1,4 @@
+/** Join truthy class-name parts into a single string. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}

package/gui/src/components/ui/index.ts

@@ -0,0 +1,16 @@
+export { cn } from './cn.js';
+export { Button } from './Button.js';
+export { Card } from './Card.js';
+export { StatusPill } from './StatusPill.js';
+export type { Tone } from './StatusPill.js';
+export { Tabs } from './Tabs.js';
+export type { TabItem } from './Tabs.js';
+export { Input, Textarea, Select } from './Input.js';
+export { Menu } from './Menu.js';
+export type { MenuItem } from './Menu.js';
+export { Modal } from './Modal.js';
+export { Skeleton } from './Skeleton.js';
+export { EmptyState } from './EmptyState.js';
+export { PageHeader } from './PageHeader.js';
+export { RepoStatusStrip } from './RepoStatusStrip.js';
+export type { RepoDot, RepoState } from './RepoStatusStrip.js';