@mrpatronz/nexusflow 0.2.19 → 1.3.1

package/gui/src/features/sessions/SessionHistory.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import { MessageSquareCode, RefreshCw, MessageSquare, Play, X, Copy } from 'lucide-react';
-import type { Feature } from '../../types.js';
-
-interface SessionHistoryProps {
-  ws: Feature;
-  sessions: any[];
-  sessionsLoading: boolean;
-  activeSession: any | null;
-  transcript: any[];
-  transcriptLoading: boolean;
-  workspaces: Feature[];
-  setActiveSession: (val: any | null) => void;
-  setTranscript: (val: any[]) => void;
-  fetchSessionTranscript: (assistant: string, sessionId: string) => Promise<void>;
-  handleResumeSession: (ws: Feature, sessionId?: string, assistant?: string) => Promise<void>;
-}
-
-export const SessionHistory: React.FC<SessionHistoryProps> = ({
-  ws,
-  sessions,
-  sessionsLoading,
-  activeSession,
-  transcript,
-  transcriptLoading,
-  workspaces,
-  setActiveSession,
-  setTranscript,
-  fetchSessionTranscript,
-  handleResumeSession,
-}) => {
-  return (
-    <div>
-      {sessionsLoading ? (
-        <div className="flex justify-center py-10">
-          <RefreshCw className="animate-spin text-indigo-400" size={20} />
-        </div>
-      ) : sessions.length === 0 ? (
-        <div className="text-center py-10 bg-gray-950/20 border border-gray-800/60 rounded-xl p-6">
-          <MessageSquareCode size={36} className="text-gray-650 mx-auto mb-3" />
-          <h4 className="text-sm font-bold text-gray-400 mb-1">No Past AI Sessions Found</h4>
-          <p className="text-xs text-gray-505 max-w-md mx-auto leading-relaxed">
-            Start a conversation with your AI assistant (e.g. running <code>claude</code>, <code>agy</code>, <code>codex</code>, or <code>copilot</code> inside this directory) to track session history here.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-3 mb-6">
-          {sessions.map((sess) => (
-            <div key={sess.id} className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gray-950/20 border border-gray-800/60 rounded-xl p-4 hover:border-gray-700/80 transition-all">
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2.5 mb-1.5">
-                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
-                    sess.assistant === 'antigravity' ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' :
-                    sess.assistant === 'claude' ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' :
-                    sess.assistant === 'codex' ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30' :
-                    'bg-sky-500/20 text-sky-300 border border-sky-500/30'
-                  }`}>
-                    {sess.assistant === 'antigravity' ? 'Antigravity' :
-                     sess.assistant === 'claude' ? 'Claude Code' :
-                     sess.assistant === 'codex' ? 'OpenAI Codex' : 'GitHub Copilot'}
-                  </span>
-                  <span className="text-[10px] text-gray-500">
-                    Updated: {new Date(sess.updatedAt).toLocaleString()}
-                  </span>
-                  <span className="text-[10px] text-gray-500">•</span>
-                  <span className="text-[10px] text-gray-550 font-medium">
-                    {sess.messageCount} messages
-                  </span>
-                </div>
-                <h4 className="text-xs font-semibold text-white truncate pr-4" title={sess.title}>
-                  {sess.title}
-                </h4>
-              </div>
-              <div className="flex items-center gap-2 shrink-0">
-                <button
-                  className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-indigo-500/10 border border-indigo-500/20 hover:bg-indigo-500/20 text-indigo-300 rounded-lg text-xs font-bold transition-all cursor-pointer"
-                  onClick={() => {
-                    setActiveSession(sess);
-                    setTranscript([]);
-                    fetchSessionTranscript(sess.assistant, sess.id);
-                  }}
-                >
-                  <MessageSquare size={13} /> View Chat Log
-                </button>
-                <button
-                  className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all cursor-pointer"
-                  onClick={() => handleResumeSession(ws, sess.id, sess.assistant)}
-                >
-                  <Play size={11} /> Resume
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Transcript Modal Overlay */}
-      {activeSession && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-sm p-4">
-          <div className="bg-[#0b0f19] border border-gray-800 rounded-2xl w-full max-w-4xl h-[80vh] flex flex-col shadow-2xl overflow-hidden">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800 bg-gray-950/40">
-              <div>
-                <div className="flex items-center gap-2 mb-1">
-                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
-                    activeSession.assistant === 'antigravity' ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' :
-                    activeSession.assistant === 'claude' ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' :
-                    activeSession.assistant === 'codex' ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30' :
-                    'bg-sky-500/20 text-sky-300 border border-sky-500/30'
-                  }`}>
-                    {activeSession.assistant === 'antigravity' ? 'Antigravity' :
-                     activeSession.assistant === 'claude' ? 'Claude Code' :
-                     activeSession.assistant === 'codex' ? 'OpenAI Codex' : 'GitHub Copilot'}
-                  </span>
-                  <span className="text-[10px] text-gray-500">Session: {activeSession.id}</span>
-                </div>
-                <h3 className="text-sm font-bold text-white truncate max-w-xl" title={activeSession.title}>
-                  {activeSession.title}
-                </h3>
-              </div>
-              <button
-                className="text-gray-400 hover:text-white p-2 hover:bg-gray-800/80 rounded-lg transition-colors cursor-pointer"
-                onClick={() => setActiveSession(null)}
-              >
-                <X size={18} />
-              </button>
-            </div>
-
-            {/* Modal Body / Chat Messages */}
-            <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-950/10">
-              {transcriptLoading ? (
-                <div className="flex flex-col items-center justify-center h-full gap-2">
-                  <RefreshCw className="animate-spin text-indigo-400" size={24} />
-                  <span className="text-xs text-gray-505 font-medium">Loading conversation history...</span>
-                </div>
-              ) : transcript.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-xs text-gray-505">
-                  No messages found in this transcript.
-                </div>
-              ) : (
-                transcript.map((msg, idx) => (
-                  <div key={idx} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
-                    <div className="text-[10px] text-gray-500 mb-1 px-1">
-                      {msg.role === 'user' ? 'Developer' : activeSession.assistant === 'antigravity' ? 'Antigravity' : activeSession.assistant === 'claude' ? 'Claude' : activeSession.assistant === 'codex' ? 'Codex' : 'Copilot'}
-                      {msg.timestamp && ` • ${new Date(msg.timestamp).toLocaleTimeString()}`}
-                    </div>
-                    <div className={`max-w-[85%] rounded-2xl px-4 py-3 text-xs leading-relaxed whitespace-pre-wrap ${
-                      msg.role === 'user'
-                        ? 'bg-indigo-650 text-white rounded-tr-none shadow-md border border-indigo-500/10'
-                        : 'bg-gray-900 border border-gray-800 text-gray-200 rounded-tl-none shadow-sm font-sans'
-                    }`}>
-                      {msg.content}
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-
-            {/* Modal Footer */}
-            <div className="px-6 py-4 border-t border-gray-800 bg-gray-950/40 flex justify-between items-center">
-              <span className="text-[11px] text-gray-550">
-                Resuming will copy the shell command and open your code editor.
-              </span>
-              <div className="flex gap-2">
-                <button
-                  className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 rounded-lg text-xs font-bold text-white transition-all cursor-pointer"
-                  onClick={() => {
-                    const cmd = activeSession.assistant === 'antigravity' ? `agy --conversation ${activeSession.id}` :
-                                activeSession.assistant === 'claude' ? `claude --resume ${activeSession.id}` :
-                                activeSession.assistant === 'codex' ? `codex resume ${activeSession.id}` :
-                                `copilot --resume ${activeSession.id}`;
-                    navigator.clipboard.writeText(cmd);
-                    alert(`Copied run command to clipboard:\n\n${cmd}`);
-                  }}
-                >
-                  <Copy size={13} /> Copy Resume Command
-                </button>
-                <button
-                  className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all cursor-pointer"
-                  onClick={() => {
-                    const matchedWs = workspaces.find(w => w.branchName === activeSession.workspacePath.split(/[\\/]/).pop());
-                    handleResumeSession(matchedWs || workspaces[0], activeSession.id, activeSession.assistant);
-                    setActiveSession(null);
-                  }}
-                >
-                  <Play size={12} /> Resume Conversation
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/gui/src/index.css

@@ -1,167 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');
-@import "tailwindcss";
-
-/* ─── Design tokens ───────────────────────────────────────────────────────────
-   "Mission control for parallel feature branches": neutral dark surfaces, a single
-   restrained blue accent, and a strict semantic status palette. Sans-serif UI,
-   monospace only for code/paths/data. */
-@theme {
-  /* Surfaces */
-  --color-base: #0b0c0e;
-  --color-surface: #141619;
-  --color-raised: #1b1e22;
-  --color-hairline: #24272c;
-  --color-hairline-strong: #333840;
-
-  /* Foreground / text */
-  --color-content: #e7e9ec;
-  --color-content-muted: #9aa0a8;
-  --color-content-faint: #6a7078;
-
-  /* Interactive accent (nav active, primary actions, focus rings) */
-  --color-accent: #4f7cff;
-  --color-accent-hover: #6b8fff;
-  --color-accent-soft: #1b2540;
-
-  /* Semantic status language */
-  --color-success: #3fb950;
-  --color-warning: #d29922;
-  --color-danger: #f85149;
-  --color-running: #2db6c9;
-  --color-idle: #6a7078;
-
-  /* Typography */
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
-
-  /* Radii */
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-
-  /* ── Legacy palette remap ──────────────────────────────────────────────────
-     Maps the color names still used by not-yet-rewritten views (Create wizard,
-     Settings, Strategies) and the reused feature components onto the new tokens,
-     so every legacy element harmonizes with the modern theme without JSX edits.
-     Also defines the custom shades those views reference (which were previously
-     undefined and rendered with no color). */
-  --color-indigo-300: #8aa5ff;
-  --color-indigo-400: #6b8fff;
-  --color-indigo-500: #4f7cff;
-  --color-indigo-600: #3f68e0;
-  --color-indigo-650: #3f68e0;
-  --color-indigo-700: #3459c9;
-  --color-indigo-950: #182038;
-  --color-violet-500: #6b8fff;
-  --color-violet-600: #4f7cff;
-
-  --color-gray-300: #e7e9ec;
-  --color-gray-400: #9aa0a8;
-  --color-gray-500: #6a7078;
-  --color-gray-550: #6a7078;
-  --color-gray-555: #6a7078;
-  --color-gray-600: #565c64;
-  --color-gray-700: #333840;
-  --color-gray-800: #24272c;
-  --color-gray-850: #1b1e22;
-  --color-gray-900: #141619;
-  --color-gray-950: #0f1113;
-
-  --color-slate-300: #cfd3d8;
-  --color-slate-350: #b6bcc4;
-  --color-slate-400: #9aa0a8;
-  --color-slate-455: #8b929b;
-  --color-slate-500: #6a7078;
-  --color-slate-550: #6a7078;
-  --color-slate-700: #333840;
-  --color-slate-800: #24272c;
-  --color-slate-850: #1b1e22;
-  --color-slate-900: #141619;
-  --color-slate-905: #121417;
-  --color-slate-950: #0f1113;
-
-  --color-cyan-400: #2db6c9;
-  --color-cyan-455: #2db6c9;
-  --color-cyan-500: #2db6c9;
-  --color-cyan-650: #2596a6;
-  --color-emerald-650: #2f9e46;
-}
-
-/* ─── Base ─────────────────────────────────────────────────────────────────── */
-html {
-  color-scheme: dark;
-}
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-base);
-  color: var(--color-content);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-code, pre, kbd, samp {
-  font-family: var(--font-mono);
-}
-
-/* Consistent focus ring for keyboard users */
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-/* Sleek neutral scrollbars */
-::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb {
-  background: #2a2e34;
-  border-radius: 4px;
-  border: 2px solid var(--color-base);
-}
-::-webkit-scrollbar-thumb:hover { background: #3a3f47; }
-
-/* ─── Motion (respecting reduced-motion) ─────────────────────────────────────── */
-@utility animate-fade-in {
-  animation: fade-in 0.16s ease-out both;
-}
-@utility animate-rise {
-  animation: rise 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
-  }
-}
-
-/* ─── Compatibility utilities (used by not-yet-restyled feature components) ─────
-   Remapped to the new neutral tokens so reused components inherit the modern look.
-   CRT/neon/text-glow effects were intentionally dropped. */
-@utility glass-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-hairline);
-}
-@utility animate-slide-in {
-  animation: rise 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-@utility animate-spin-slow {
-  animation: spin 8s linear infinite;
-}
-@utility animate-pulse-glow-green {
-  animation: soft-pulse 2s infinite ease-in-out;
-}
-@utility animate-pulse-glow-cyan {
-  animation: soft-pulse 2.5s infinite ease-in-out;
-}
-@keyframes soft-pulse {
-  0%, 100% { opacity: 0.85; }
-  50% { opacity: 1; }
-}
-
-/* Terminal log themes for the service logs console */
-.term-matrix { color: #3fb950; background-color: #0b0c0e; }
-.term-dracula { color: #f8f8f2; background-color: #1b1e22; }
-.term-classic { color: var(--color-content); background-color: #0b0f14; }

package/gui/src/lib/status.ts

@@ -1,24 +0,0 @@
-import type { Tone } from '../components/ui/index.js';
-import type { WorkspaceStatus } from '../types.js';
-
-/** Maps a workspace sync status to a display label + status-language tone. */
-export function syncMeta(status: WorkspaceStatus['syncStatus']): { label: string; tone: Tone } {
-  switch (status) {
-    case 'up-to-date':
-      return { label: 'In sync', tone: 'success' };
-    case 'rebased':
-      return { label: 'Rebased', tone: 'accent' };
-    case 'conflict':
-    case 'stash-conflict':
-      return { label: 'Sync conflict', tone: 'danger' };
-    case 'error':
-      return { label: 'Sync error', tone: 'danger' };
-    default:
-      return { label: 'Not synced', tone: 'idle' };
-  }
-}
-
-/** Short repo basename from a full path. */
-export function repoName(repoPath: string): string {
-  return repoPath.split(/[\\/]/).pop() || repoPath;
-}

package/gui/src/main.tsx

@@ -1,94 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-declare global {
-  interface Window {
-    Neutralino?: any;
-    NL_PATH?: string;
-  }
-}
-
-async function waitForBackend(url: string, maxRetries = 25, delay = 200): Promise<boolean> {
-  for (let i = 0; i < maxRetries; i++) {
-    try {
-      const res = await fetch(url);
-      if (res.ok) {
-        console.log(`Backend connection established on attempt ${i + 1}`);
-        return true;
-      }
-    } catch {
-      // Ignored, retry
-    }
-    await new Promise((resolve) => setTimeout(resolve, delay));
-  }
-  console.warn(`Backend connection timed out after ${maxRetries} attempts`);
-  return false;
-}
-
-function renderApp() {
-  createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
-  );
-}
-
-if (typeof window !== 'undefined' && window.Neutralino) {
-  window.Neutralino.init();
-  window.Neutralino.events.on('windowClose', () => {
-    window.Neutralino.app.exit();
-  });
-
-  (async () => {
-    const backendUrl = 'http://localhost:3000/api/config';
-    try {
-      const res = await fetch(backendUrl);
-      if (res.ok) {
-        console.log('NexusFlow Hono backend is already running.');
-        renderApp();
-        return;
-      }
-    } catch {
-      console.log('NexusFlow Hono backend not detected. Launching...');
-      try {
-        const isWin = navigator.platform.includes('Win') || navigator.userAgent.includes('Windows');
-        const nlPath = window.NL_PATH || '.';
-        
-        // Construct paths for packaged mode
-        const nodeBinary = isWin ? `${nlPath}/node/node.exe` : `${nlPath}/node/bin/node`;
-        const serverScript = `${nlPath}/server/dist/index.js`;
-        
-        // Check if we are running in packaged mode by testing if the embedded node exists
-        let isPackaged = false;
-        try {
-          await window.Neutralino.filesystem.getStats(nodeBinary);
-          isPackaged = true;
-        } catch {
-          // File doesn't exist or filesystem API failed, meaning dev mode
-        }
-
-        let cmd: string;
-        if (isPackaged) {
-          console.log('Running in packaged mode, using embedded node and server...');
-          cmd = `"${nodeBinary}" "${serverScript}" ui --server-only --port 3000`;
-        } else {
-          console.log('Running in development mode, using global node and relative path...');
-          cmd = 'node ../NexusFlow/dist/index.js ui --server-only --port 3000';
-        }
-
-        console.log('Spawning backend command:', cmd);
-        await window.Neutralino.os.execCommand(cmd, { background: true });
-        console.log('Hono backend successfully spawned. Waiting for port 3000...');
-        await waitForBackend(backendUrl);
-      } catch (err) {
-        console.error('Failed to spawn Hono backend:', err);
-      } finally {
-        renderApp();
-      }
-    }
-  })();
-} else {
-  renderApp();
-}

package/gui/src/pages/DashboardPage.tsx

@@ -1,129 +0,0 @@
-import type { ReactNode } from 'react';
-import { FolderGit2, GitBranch, Play, AlertTriangle, Plus, ArrowRight, RefreshCw } from 'lucide-react';
-import type { Feature, WorkspaceStatus } from '../types.js';
-import { Button, Card, EmptyState, PageHeader, Skeleton, StatusPill } from '../components/ui/index.js';
-import { syncMeta } from '../lib/status.js';
-
-interface DashboardPageProps {
-  workspaces: Feature[];
-  workspaceStatuses: Record<string, WorkspaceStatus>;
-  workspacesLoading: boolean;
-  statusesLoading: boolean;
-  onOpenWorkspace: (id: string) => void;
-  onNewWorkspace: () => void;
-}
-
-function StatTile({ icon, label, value, tone }: { icon: ReactNode; label: string; value: ReactNode; tone: string }) {
-  return (
-    <Card className="flex items-center gap-3.5 p-4">
-      <div className={`grid h-9 w-9 shrink-0 place-items-center rounded-md ${tone}`}>{icon}</div>
-      <div className="min-w-0">
-        <div className="font-display text-xl font-bold leading-none text-content">{value}</div>
-        <div className="mt-1 text-xs text-content-muted">{label}</div>
-      </div>
-    </Card>
-  );
-}
-
-export function DashboardPage({
-  workspaces,
-  workspaceStatuses,
-  workspacesLoading,
-  statusesLoading,
-  onOpenWorkspace,
-  onNewWorkspace,
-}: DashboardPageProps) {
-  const statuses = Object.values(workspaceStatuses);
-  const withChanges = statuses.filter((s) => s.changedFiles > 0).length;
-  const running = statuses.reduce((n, s) => n + s.runningServices, 0);
-  const needsValidation = statuses.filter((s) => s.pendingValidation).length;
-
-  return (
-    <div className="mx-auto max-w-6xl animate-fade-in">
-      <PageHeader
-        title="Overview"
-        subtitle="Your multi-repo environment at a glance."
-        actions={<Button variant="primary" icon={<Plus size={16} />} onClick={onNewWorkspace}>New workspace</Button>}
-      />
-
-      <div className="mb-8 grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <StatTile icon={<FolderGit2 size={18} className="text-accent" />} tone="bg-accent-soft" label="Workspaces" value={workspaces.length} />
-        <StatTile icon={<GitBranch size={18} className="text-warning" />} tone="bg-warning/10" label="With uncommitted changes" value={withChanges} />
-        <StatTile icon={<Play size={18} className="text-running" />} tone="bg-running/10" label="Running services" value={running} />
-        <StatTile icon={<AlertTriangle size={18} className="text-warning" />} tone="bg-warning/10" label="Need validation" value={needsValidation} />
-      </div>
-
-      <div className="mb-3 flex items-center justify-between">
-        <h2 className="font-display text-sm font-semibold uppercase tracking-wider text-content-muted">Workspaces</h2>
-      </div>
-
-      {workspacesLoading ? (
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-20" />
-          <Skeleton className="h-20" />
-          <Skeleton className="h-20" />
-        </div>
-      ) : workspaces.length === 0 ? (
-        <Card>
-          <EmptyState
-            icon={<FolderGit2 size={40} />}
-            title="No workspaces yet"
-            description="Create a feature workspace to group repositories and give your AI assistants shared context."
-            action={<Button variant="primary" icon={<Plus size={16} />} onClick={onNewWorkspace}>New workspace</Button>}
-          />
-        </Card>
-      ) : (
-        <div className="flex flex-col gap-2">
-          {workspaces.map((ws) => {
-            const st = workspaceStatuses[ws.branchName];
-            const sync = st ? syncMeta(st.syncStatus) : null;
-            return (
-              <Card
-                key={ws.id}
-                className="group flex cursor-pointer items-center gap-4 p-4 transition-colors hover:border-hairline-strong hover:bg-raised"
-                onClick={() => onOpenWorkspace(ws.branchName)}
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="truncate font-mono text-sm font-semibold text-content">{ws.branchName}</span>
-                    <span className="shrink-0 text-xs text-content-faint">{ws.repos.length} repos</span>
-                  </div>
-                  {ws.description && <p className="mt-0.5 truncate text-xs text-content-muted">{ws.description}</p>}
-                </div>
-
-                <div className="flex shrink-0 items-center gap-1.5">
-                  {!st && statusesLoading ? (
-                    <Skeleton className="h-5 w-40" />
-                  ) : st ? (
-                    <>
-                      {st.changedFiles > 0 ? (
-                        <StatusPill tone="warning" dot>
-                          {st.changedFiles} changed
-                        </StatusPill>
-                      ) : (
-                        <StatusPill tone="idle" dot>
-                          Clean
-                        </StatusPill>
-                      )}
-                      {st.runningServices > 0 && (
-                        <StatusPill tone="running" dot>
-                          {st.runningServices} running
-                        </StatusPill>
-                      )}
-                      {sync && (
-                        <StatusPill tone={sync.tone}>
-                          <RefreshCw size={11} /> {sync.label}
-                        </StatusPill>
-                      )}
-                    </>
-                  ) : null}
-                  <ArrowRight size={16} className="text-content-faint transition-transform group-hover:translate-x-0.5 group-hover:text-content" />
-                </div>
-              </Card>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}