@mrpatronz/nexusflow 0.2.17 → 0.2.19

package/gui/src/pages/WorkspacesPage.tsx

@@ -0,0 +1,352 @@
+import { useMemo, useState, type ComponentProps } from 'react';
+import { RefreshCw, Play, MoreVertical, ExternalLink, Sparkles, Trash2, Search, FolderGit2 } from 'lucide-react';
+import type { Feature, WorkspaceStatus, RepoInfo } from '../types.js';
+import { Button, Card, EmptyState, Menu, PageHeader, StatusPill, Tabs, Input, Skeleton, cn } from '../components/ui/index.js';
+import type { TabItem } from '../components/ui/index.js';
+import { AddRepoPicker } from '../components/AddRepoPicker.js';
+import { syncMeta, repoName } from '../lib/status.js';
+import { SessionHistory } from '../features/sessions/SessionHistory.js';
+import { ServiceConsole } from '../features/services/ServiceConsole.js';
+import { ChangesViewer } from '../features/changes/ChangesViewer.js';
+import { KnowledgeBase } from '../features/knowledge/KnowledgeBase.js';
+import { ImplementationPlan } from '../features/plan/ImplementationPlan.js';
+
+type SubTab = 'overview' | 'sessions' | 'services' | 'changes' | 'knowledge' | 'plan';
+
+const TABS: TabItem[] = [
+  { value: 'overview', label: 'Overview' },
+  { value: 'changes', label: 'Changes' },
+  { value: 'services', label: 'Services' },
+  { value: 'sessions', label: 'Sessions' },
+  { value: 'knowledge', label: 'Knowledge' },
+  { value: 'plan', label: 'Plan' },
+];
+
+const FILTERS = ['all', 'changes', 'running'] as const;
+type Filter = (typeof FILTERS)[number];
+
+interface WorkspacesPageProps {
+  workspaces: Feature[];
+  workspaceStatuses: Record<string, WorkspaceStatus>;
+  statusesLoading: boolean;
+  workspacesLoading: boolean;
+  fetchWorkspaces: () => Promise<void>;
+  selectedId: string | null;
+  subTab: SubTab;
+  onSelect: (id: string) => void;
+  onSelectTab: (id: string, tab: SubTab) => void;
+  resumingWs: string | null;
+  handleResumeSession: (ws: Feature, sessionId?: string, assistant?: string) => Promise<void>;
+  handleCopyPrompt: (ws: Feature) => void;
+  handleOpenInEditor: (workspacePath: string) => Promise<void>;
+  handleDeleteWorkspace: (wsName: string) => Promise<void>;
+  deleteWsLoading: string | null;
+  repos: RepoInfo[];
+  addRepoLoading: boolean;
+  handleAddRepo: (wsName: string, repoPath: string) => Promise<void>;
+  sessionProps: Omit<ComponentProps<typeof SessionHistory>, 'ws'>;
+  serviceProps: Omit<ComponentProps<typeof ServiceConsole>, 'ws'>;
+  changesProps: Omit<ComponentProps<typeof ChangesViewer>, 'ws'>;
+  knowledgeProps: Omit<ComponentProps<typeof KnowledgeBase>, 'ws'>;
+  planProps: ComponentProps<typeof ImplementationPlan>;
+}
+
+export function WorkspacesPage(props: WorkspacesPageProps) {
+  const {
+    workspaces,
+    workspaceStatuses,
+    workspacesLoading,
+    fetchWorkspaces,
+    selectedId,
+    subTab,
+    onSelect,
+    onSelectTab,
+    resumingWs,
+    handleResumeSession,
+    handleCopyPrompt,
+    handleOpenInEditor,
+    handleDeleteWorkspace,
+    deleteWsLoading,
+    repos,
+    addRepoLoading,
+    handleAddRepo,
+    sessionProps,
+    serviceProps,
+    changesProps,
+    knowledgeProps,
+    planProps,
+  } = props;
+
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState<Filter>('all');
+
+  const selected = workspaces.find((w) => w.branchName === selectedId) ?? null;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return workspaces.filter((w) => {
+      const st = workspaceStatuses[w.branchName];
+      if (q && !`${w.branchName} ${w.description}`.toLowerCase().includes(q)) return false;
+      if (filter === 'changes' && !(st && st.changedFiles > 0)) return false;
+      if (filter === 'running' && !(st && st.runningServices > 0)) return false;
+      return true;
+    });
+  }, [workspaces, workspaceStatuses, query, filter]);
+
+  const repoRows = selected
+    ? selected.repos.map((rp) => {
+        const name = repoName(rp);
+        const change = changesProps.gitChanges?.find((c: { repoName: string; files?: unknown[] }) => c.repoName === name);
+        const changedCount: number | null = change ? change.files?.length ?? 0 : null;
+        const svcs = (serviceProps.services ?? []).filter((s) => (s.cwd ?? '').split(/[\\/]/).includes(name));
+        const ports = Array.from(new Set(svcs.map((s) => s.port).filter((p): p is number => typeof p === 'number')));
+        return { name, changedCount, ports, serviceCount: svcs.length };
+      })
+    : [];
+
+  const availableRepos = selected ? repos.filter((r) => !selected.repos.includes(r.path)) : [];
+
+  return (
+    <div className="mx-auto max-w-7xl animate-fade-in">
+      <PageHeader
+        title="Workspaces"
+        subtitle="Select a workspace to inspect its changes, services, sessions and context."
+        actions={
+          <Button
+            variant="secondary"
+            icon={<RefreshCw size={14} className={workspacesLoading ? 'animate-spin text-accent' : ''} />}
+            onClick={fetchWorkspaces}
+            disabled={workspacesLoading}
+          >
+            Refresh
+          </Button>
+        }
+      />
+
+      <div className="flex flex-col gap-5 lg:flex-row">
+        {/* ── List pane ─────────────────────────────────────────── */}
+        <div className="lg:w-80 lg:shrink-0">
+          <div className="relative mb-3">
+            <Search size={14} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+            <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search workspaces" className="pl-8" />
+          </div>
+          <div className="mb-3 flex items-center gap-1">
+            {FILTERS.map((f) => (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={cn(
+                  'rounded-md px-2.5 py-1 text-xs font-medium capitalize transition-colors cursor-pointer',
+                  filter === f ? 'bg-accent-soft text-accent' : 'text-content-faint hover:text-content',
+                )}
+              >
+                {f}
+              </button>
+            ))}
+          </div>
+
+          {workspacesLoading ? (
+            <div className="flex flex-col gap-1.5">
+              {[0, 1, 2, 3].map((i) => (
+                <Skeleton key={i} className="h-14" />
+              ))}
+            </div>
+          ) : filtered.length === 0 ? (
+            <Card className="p-6 text-center text-sm text-content-muted">No workspaces match.</Card>
+          ) : (
+            <div className="flex flex-col gap-1.5">
+              {filtered.map((w) => {
+                const st = workspaceStatuses[w.branchName];
+                const active = w.branchName === selectedId;
+                const sync = st ? syncMeta(st.syncStatus) : null;
+                return (
+                  <button
+                    key={w.id}
+                    onClick={() => onSelect(w.branchName)}
+                    className={cn(
+                      'rounded-lg border p-3 text-left transition-colors cursor-pointer',
+                      active ? 'border-accent/50 bg-accent-soft' : 'border-hairline bg-surface hover:border-hairline-strong hover:bg-raised',
+                    )}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="truncate font-mono text-sm font-semibold text-content">{w.branchName}</span>
+                      <span className="shrink-0 text-[11px] text-content-faint">{w.repos.length} repos</span>
+                    </div>
+                    <div className="mt-1.5 flex items-center gap-2">
+                      <span
+                        className={cn('h-1.5 w-1.5 rounded-full', st?.changedFiles ? 'bg-warning' : 'bg-success')}
+                        title={st?.changedFiles ? `${st.changedFiles} uncommitted` : 'Clean'}
+                      />
+                      {st?.runningServices ? <span className="h-1.5 w-1.5 rounded-full bg-running" title="Running services" /> : null}
+                      {sync && <span className="text-[11px] text-content-faint">{sync.label}</span>}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* ── Detail pane ───────────────────────────────────────── */}
+        <div className="min-w-0 flex-1">
+          {!selected ? (
+            <Card>
+              <EmptyState
+                icon={<FolderGit2 size={40} />}
+                title="No workspace selected"
+                description="Pick a workspace from the list to see its status, repositories, changes, services and sessions."
+              />
+            </Card>
+          ) : (
+            <div>
+              <Card className="mb-4 p-5">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="min-w-0">
+                    <h2 className="font-display text-xl font-bold text-content">{selected.branchName}</h2>
+                    <div className="mt-1 flex items-center gap-2 text-xs text-content-faint">
+                      <span>Created {new Date(selected.createdAt).toLocaleDateString()}</span>
+                      <span>·</span>
+                      <span>{selected.repos.length} repos</span>
+                    </div>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <Button
+                      variant="primary"
+                      icon={<Play size={13} className={resumingWs === selected.branchName ? 'animate-spin' : ''} />}
+                      disabled={resumingWs === selected.branchName}
+                      onClick={() => handleResumeSession(selected)}
+                    >
+                      {resumingWs === selected.branchName ? 'Resuming…' : 'Resume in Editor'}
+                    </Button>
+                    <Menu
+                      label="More actions"
+                      trigger={
+                        <span className="grid h-9 w-9 place-items-center rounded-md border border-hairline bg-surface text-content-muted hover:bg-raised hover:text-content">
+                          <MoreVertical size={16} />
+                        </span>
+                      }
+                      items={[
+                        { label: 'Open Folder', icon: <ExternalLink size={14} />, onClick: () => void handleOpenInEditor(selected.workspacePath) },
+                        { label: 'Copy AI Context', icon: <Sparkles size={14} className="text-accent" />, onClick: () => handleCopyPrompt(selected) },
+                        {
+                          label: deleteWsLoading === selected.branchName ? 'Deleting…' : 'Delete Workspace',
+                          icon: <Trash2 size={14} />,
+                          danger: true,
+                          disabled: deleteWsLoading === selected.branchName,
+                          onClick: () => void handleDeleteWorkspace(selected.branchName),
+                        },
+                      ]}
+                    />
+                  </div>
+                </div>
+
+                <div className="mt-3 flex flex-wrap items-center gap-2">
+                  {(() => {
+                    const st = workspaceStatuses[selected.branchName];
+                    if (!st) return null;
+                    const sync = syncMeta(st.syncStatus);
+                    return (
+                      <>
+                        {st.changedFiles > 0 ? (
+                          <StatusPill tone="warning" dot>
+                            {st.changedFiles} uncommitted
+                          </StatusPill>
+                        ) : (
+                          <StatusPill tone="idle" dot>
+                            Clean
+                          </StatusPill>
+                        )}
+                        {st.runningServices > 0 ? (
+                          <StatusPill tone="running" dot>
+                            {st.runningServices} running
+                          </StatusPill>
+                        ) : (
+                          <StatusPill tone="idle" dot>
+                            No services
+                          </StatusPill>
+                        )}
+                        <StatusPill tone={sync.tone}>
+                          <RefreshCw size={11} /> {sync.label}
+                        </StatusPill>
+                        {st.pendingValidation && <StatusPill tone="warning">Needs validation</StatusPill>}
+                      </>
+                    );
+                  })()}
+                </div>
+              </Card>
+
+              <Tabs items={TABS} value={subTab} onChange={(v) => onSelectTab(selected.branchName, v as SubTab)} className="mb-4" />
+
+              <div className="animate-fade-in">
+                {subTab === 'overview' && (
+                  <div className="flex flex-col gap-4">
+                    <Card className="p-5">
+                      <h3 className="mb-2 font-display text-sm font-semibold text-content">Description</h3>
+                      {selected.description ? (
+                        <p className="whitespace-pre-line text-sm leading-relaxed text-content-muted">{selected.description}</p>
+                      ) : (
+                        <p className="text-sm text-content-faint">No description provided.</p>
+                      )}
+                    </Card>
+                    <Card className="p-5">
+                      <div className="mb-4 flex items-center justify-between gap-3">
+                        <h3 className="font-display text-sm font-semibold text-content">
+                          Repositories <span className="text-content-faint">({selected.repos.length})</span>
+                        </h3>
+                        {availableRepos.length > 0 && (
+                          <AddRepoPicker
+                            repos={availableRepos}
+                            disabled={addRepoLoading}
+                            onAdd={(path) => {
+                              if (
+                                window.confirm(
+                                  `Add repository "${repoName(path)}" to this workspace?\nThis creates a new git worktree and re-runs analysis.`,
+                                )
+                              ) {
+                                void handleAddRepo(selected.branchName, path);
+                              }
+                            }}
+                          />
+                        )}
+                      </div>
+                      <div className="divide-y divide-hairline">
+                        {repoRows.map((r) => (
+                          <div key={r.name} className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0">
+                            <span
+                              className={cn(
+                                'h-2 w-2 shrink-0 rounded-full',
+                                r.changedCount === null ? 'bg-idle' : r.changedCount > 0 ? 'bg-warning' : 'bg-success',
+                              )}
+                              title={r.changedCount === null ? 'Status unknown' : r.changedCount > 0 ? 'Uncommitted changes' : 'Clean'}
+                            />
+                            <span className="min-w-0 flex-1 truncate font-mono text-sm text-content">{r.name}</span>
+                            <div className="flex shrink-0 items-center gap-2">
+                              {r.ports.map((p) => (
+                                <span key={p} className="rounded border border-hairline bg-base px-1.5 py-0.5 font-mono text-[11px] text-running">
+                                  :{p}
+                                </span>
+                              ))}
+                              <span className="w-24 text-right text-xs text-content-faint">
+                                {r.changedCount === null ? '—' : r.changedCount > 0 ? `${r.changedCount} changed` : 'clean'}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                      <p className="mt-3 text-[11px] text-content-faint">Per-repo git state and detected service ports.</p>
+                    </Card>
+                  </div>
+                )}
+                {subTab === 'sessions' && <SessionHistory ws={selected} {...sessionProps} />}
+                {subTab === 'services' && <ServiceConsole ws={selected} {...serviceProps} />}
+                {subTab === 'changes' && <ChangesViewer ws={selected} {...changesProps} />}
+                {subTab === 'knowledge' && <KnowledgeBase ws={selected} {...knowledgeProps} />}
+                {subTab === 'plan' && <ImplementationPlan {...planProps} />}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/gui/src/types.ts

@@ -1,62 +1,81 @@
-// Types matched with src/types.ts
-
-export interface NexusFlowConfig {
-  version: string;
-  devDir: string;
-  workspacesDir: string;
-  defaultAssistant: string | null;
-  defaultEditor?: string | null;
-  scanDepth: number;
-}
-
-export interface DetectedAI {
-  name: string;
-  displayName: string;
-  detected: boolean;
-  command?: string;
-}
-
-export interface DetectedEditor {
-  name: string;
-  command: string;
-  detected: boolean;
-}
-
-export interface RepoInfo {
-  name: string;
-  path: string;
-  defaultBranch: string;
-}
-
-export interface Feature {
-  id: string;
-  branchName: string;
-  description: string;
-  repos: string[];
-  assistants: string[];
-  workspacePath: string;
-  createdAt: string;
-}
-
-export interface ServiceConfig {
-  name: string;
-  cwd: string;
-  command: string;
-  args: string[];
-  port?: number;
-  source: string;
-}
-
-export interface OrchestrationDetection {
-  tool: string;
-  configPath: string;
-  startCommand: string;
-  stopCommand: string;
-}
-
-export interface RunningService {
-  name: string;
-  pid: number;
-  config: ServiceConfig;
-  startedAt: string;
-}
+// Types matched with src/types.ts
+
+export interface NexusFlowConfig {
+  version: string;
+  devDir: string;
+  workspacesDir: string;
+  defaultAssistant: string | null;
+  defaultEditor?: string | null;
+  scanDepth: number;
+}
+
+export interface DetectedAI {
+  name: string;
+  displayName: string;
+  detected: boolean;
+  command?: string;
+}
+
+export interface DetectedEditor {
+  name: string;
+  command: string;
+  detected: boolean;
+}
+
+export interface RepoInfo {
+  name: string;
+  path: string;
+  defaultBranch: string;
+}
+
+export interface Feature {
+  id: string;
+  branchName: string;
+  description: string;
+  repos: string[];
+  assistants: string[];
+  workspacePath: string;
+  createdAt: string;
+}
+
+/** Classified outcome of a sync/rebase attempt for a repo (mirrors src/types.ts). */
+export type SyncStatus = 'up-to-date' | 'rebased' | 'conflict' | 'stash-conflict' | 'error';
+
+/** At-a-glance status for one workspace, from GET /api/workspaces/status. */
+export interface WorkspaceStatus {
+  id: string;
+  branchName: string;
+  /** Total uncommitted files across all repo worktrees. */
+  changedFiles: number;
+  /** Number of repos with uncommitted changes. */
+  dirtyRepos: number;
+  /** Number of currently running orchestrated services. */
+  runningServices: number;
+  /** Worst-case sync classification across repos, or 'unknown' if never synced. */
+  syncStatus: SyncStatus | 'unknown';
+  /** True when any repo pulled in new commits and awaits re-validation. */
+  pendingValidation: boolean;
+}
+
+export interface ServiceConfig {
+  name: string;
+  cwd: string;
+  command: string;
+  args: string[];
+  port?: number;
+  source: string;
+}
+
+export interface OrchestrationDetection {
+  tool: string;
+  configPath: string;
+  startCommand: string;
+  stopCommand: string;
+}
+
+export interface RunningService {
+  name: string;
+  pid: number;
+  config: ServiceConfig;
+  startedAt: string;
+}

package/gui/tsconfig.app.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023", "DOM"],
-    "module": "esnext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/gui/tsconfig.json

@@ -1,7 +1,7 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/gui/tsconfig.node.json

@@ -1,24 +1,24 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023"],
-    "module": "esnext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/gui/vite.config.ts

@@ -1,12 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  build: {
-    outDir: '../dist/gui',
-    emptyOutDir: true,
-  },
-})
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: '../dist/gui',
+    emptyOutDir: true,
+  },
+})