orbital-command 0.1.0

package/src/views/Settings.tsx

@@ -0,0 +1,183 @@
+import { useEffect } from 'react';
+import { Settings as SettingsIcon, Minus, Plus } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { ToggleSwitch } from '@/components/ui/toggle-switch';
+import { useSettings, FONT_CATALOG, preloadFontPreviews, type FontCategory } from '@/hooks/useSettings';
+import { cn } from '@/lib/utils';
+
+const CATEGORY_LABELS: Record<FontCategory, string> = {
+  'monospace': 'Monospace',
+  'sans-serif': 'Sans-Serif',
+  'display': 'Display',
+};
+
+const CATEGORY_ORDER: FontCategory[] = ['monospace', 'sans-serif', 'display'];
+
+export function Settings() {
+  const { settings, updateSetting } = useSettings();
+
+  useEffect(() => { preloadFontPreviews(); }, []);
+
+  const decrementScale = () => {
+    const next = Math.max(0.8, Math.round((settings.fontScale - 0.05) * 100) / 100);
+    updateSetting('fontScale', next);
+  };
+
+  const incrementScale = () => {
+    const next = Math.min(1.3, Math.round((settings.fontScale + 0.05) * 100) / 100);
+    updateSetting('fontScale', next);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-2 pb-4">
+        <SettingsIcon className="h-5 w-5 text-muted-foreground" />
+        <h1 className="text-lg font-medium tracking-wide">Settings</h1>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="flex flex-col gap-6 pr-4 pb-8">
+
+          {/* ── Appearance ── */}
+          <section className="card-glass rounded-xl p-5">
+            <h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-5">
+              Appearance
+            </h2>
+
+            {/* Font Family */}
+            <div className="mb-5">
+              <label className="text-xs text-muted-foreground mb-3 block">Font Family</label>
+              {CATEGORY_ORDER.map(category => {
+                const fonts = FONT_CATALOG.filter(f => f.category === category);
+                return (
+                  <div key={category} className="mb-4 last:mb-0">
+                    <span className="text-xxs uppercase tracking-widest text-muted-foreground/60 mb-2 block">
+                      {CATEGORY_LABELS[category]}
+                    </span>
+                    <div className="grid grid-cols-2 gap-2 xl:grid-cols-3">
+                      {fonts.map(font => (
+                        <button
+                          key={font.family}
+                          onClick={() => updateSetting('fontFamily', font.family)}
+                          className={cn(
+                            'group relative flex flex-col items-start rounded-lg border px-3 py-2.5 text-left transition-all duration-200',
+                            settings.fontFamily === font.family
+                              ? 'border-[rgba(0,188,212,0.5)] bg-[rgba(0,188,212,0.08)] shadow-[0_0_12px_rgba(0,188,212,0.15)]'
+                              : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.02)] hover:border-[rgba(255,255,255,0.12)] hover:bg-[rgba(255,255,255,0.04)]'
+                          )}
+                        >
+                          <span
+                            className="text-sm text-foreground truncate w-full"
+                            style={{ fontFamily: `'${font.family}', ${category === 'monospace' ? 'monospace' : 'sans-serif'}` }}
+                          >
+                            {font.label}
+                          </span>
+                          <span
+                            className="text-xs text-muted-foreground/50 mt-0.5"
+                            style={{ fontFamily: `'${font.family}', ${category === 'monospace' ? 'monospace' : 'sans-serif'}` }}
+                          >
+                            Aa Bb 0123
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <Separator className="my-4" />
+
+            {/* Font Size Scale */}
+            <SettingRow label="Font Size" description="Scale text across the dashboard">
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={decrementScale}
+                  disabled={settings.fontScale <= 0.8}
+                  className="flex h-7 w-7 items-center justify-center rounded-md border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.03)] text-muted-foreground transition-colors hover:border-[rgba(0,188,212,0.3)] hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  <Minus className="h-3.5 w-3.5" />
+                </button>
+                <span className="w-12 text-center text-sm tabular-nums">
+                  {Math.round(settings.fontScale * 100)}%
+                </span>
+                <button
+                  onClick={incrementScale}
+                  disabled={settings.fontScale >= 1.3}
+                  className="flex h-7 w-7 items-center justify-center rounded-md border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.03)] text-muted-foreground transition-colors hover:border-[rgba(0,188,212,0.3)] hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </SettingRow>
+
+            <Separator className="my-4" />
+
+            {/* Reduce Motion */}
+            <SettingRow label="Reduce Motion" description="Disable animations and transitions">
+              <ToggleSwitch
+                checked={settings.reduceMotion}
+                onCheckedChange={v => updateSetting('reduceMotion', v)}
+              />
+            </SettingRow>
+
+            <Separator className="my-4" />
+
+            {/* Background Effects */}
+            <SettingRow label="Background Effects" description="Animated orbs and grid overlay">
+              <ToggleSwitch
+                checked={settings.showBackgroundEffects}
+                onCheckedChange={v => updateSetting('showBackgroundEffects', v)}
+              />
+            </SettingRow>
+          </section>
+
+          {/* ── Display ── */}
+          <section className="card-glass rounded-xl p-5">
+            <h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-5">
+              Display
+            </h2>
+
+            <SettingRow label="Status Bar" description="Scope progress bar at bottom">
+              <ToggleSwitch
+                checked={settings.showStatusBar}
+                onCheckedChange={v => updateSetting('showStatusBar', v)}
+              />
+            </SettingRow>
+
+            <Separator className="my-4" />
+
+            <SettingRow label="Compact Mode" description="Reduce spacing for denser layout">
+              <ToggleSwitch
+                checked={settings.compactMode}
+                onCheckedChange={v => updateSetting('compactMode', v)}
+              />
+            </SettingRow>
+          </section>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function SettingRow({
+  label,
+  description,
+  children,
+}: {
+  label: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="text-sm text-foreground">{label}</div>
+        <div className="text-xs text-muted-foreground/60">{description}</div>
+      </div>
+      <div className="flex-shrink-0">{children}</div>
+    </div>
+  );
+}

package/src/views/SourceControl.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { GitFork, ChevronDown, ChevronRight, Rocket } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardHeader, CardTitle } from '@/components/ui/card';
+import { useSourceControl } from '@/hooks/useSourceControl';
+import { usePipeline } from '@/hooks/usePipeline';
+import { GitOverviewBar } from '@/components/source-control/GitOverviewBar';
+import { CommitLog } from '@/components/source-control/CommitLog';
+import { BranchPanel } from '@/components/source-control/BranchPanel';
+import { GitHubPanel } from '@/components/source-control/GitHubPanel';
+import { DeployHistory } from '@/components/DeployHistory';
+
+export function SourceControl() {
+  const { overview, commits, branches, worktrees, github, drift, loading, loadMoreCommits, hasMoreCommits } = useSourceControl();
+  const { deployments } = usePipeline();
+  const [deployExpanded, setDeployExpanded] = useState(true);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <GitFork className="h-4 w-4 text-primary" />
+        <h1 className="text-xl font-light">Repo</h1>
+        {overview && (
+          <Badge variant="secondary">
+            {overview.currentBranch}
+          </Badge>
+        )}
+      </div>
+
+      {/* Section A: Git Overview Bar */}
+      {overview && <GitOverviewBar overview={overview} github={github} />}
+
+      {/* Section B + C: Commit Log + Branch Panel */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        <CommitLog
+          commits={commits}
+          branches={branches}
+          hasMore={hasMoreCommits}
+          onLoadMore={loadMoreCommits}
+        />
+        <BranchPanel
+          branches={branches}
+          worktrees={worktrees}
+          drift={drift}
+          branchingMode={overview?.branchingMode ?? 'trunk'}
+        />
+      </div>
+
+      {/* Section D: GitHub Panel (collapsible) */}
+      <GitHubPanel github={github} />
+
+      {/* Section E: Deploy History (collapsible) */}
+      {deployments.length > 0 && (
+        <div className="mt-6">
+          {!deployExpanded ? (
+            <Card
+              className="cursor-pointer select-none"
+              onClick={() => setDeployExpanded(true)}
+            >
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  <Rocket className="h-4 w-4 text-primary" />
+                  Deploy History
+                  <Badge variant="secondary">{deployments.length}</Badge>
+                </CardTitle>
+              </CardHeader>
+            </Card>
+          ) : (
+            <div>
+              <button
+                onClick={() => setDeployExpanded(false)}
+                className="mb-2 flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ChevronDown className="h-4 w-4" />
+                <Rocket className="h-4 w-4" />
+                Deploy History
+              </button>
+              <DeployHistory deployments={deployments} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/WorkflowVisualizer.tsx

@@ -0,0 +1,382 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  BackgroundVariant,
+} from '@xyflow/react';
+import type { NodeMouseHandler, EdgeMouseHandler } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { Workflow, Zap, Pencil, LayoutGrid } from 'lucide-react';
+import type { WorkflowHook, UnifiedHook } from '../../shared/workflow-config';
+import { useWorkflow } from '@/hooks/useWorkflow';
+import { useScopes } from '@/hooks/useScopes';
+import { useCcHooks } from '@/hooks/useCcHooks';
+import { WorkflowNode } from '@/components/workflow/WorkflowNode';
+import type { WorkflowNodeType } from '@/components/workflow/WorkflowNode';
+import { WorkflowEdgeComponent } from '@/components/workflow/WorkflowEdgeComponent';
+import type { WorkflowEdgeType } from '@/components/workflow/WorkflowEdgeComponent';
+import { NodeDetailPanel } from '@/components/workflow/NodeDetailPanel';
+import { EdgeDetailPanel } from '@/components/workflow/EdgeDetailPanel';
+import { PresetSelector } from '@/components/workflow/PresetSelector';
+import { HookSourceModal } from '@/components/workflow/HookSourceModal';
+import { HooksDashboard } from '@/components/workflow/HooksDashboard';
+import { HookDetailPanel } from '@/components/workflow/HookDetailPanel';
+import { ListPropertyEditor } from '@/components/workflow/ListPropertyEditor';
+import { EdgePropertyEditor } from '@/components/workflow/EdgePropertyEditor';
+import { EditToolbar } from '@/components/workflow/EditToolbar';
+import { AddListDialog } from '@/components/workflow/AddListDialog';
+import { AddEdgeDialog } from '@/components/workflow/AddEdgeDialog';
+import { MigrationPreviewDialog } from '@/components/workflow/MigrationPreviewDialog';
+import { ConfigSettingsPanel } from '@/components/workflow/ConfigSettingsPanel';
+import { useWorkflowEditor } from '@/components/workflow/useWorkflowEditor';
+import { computeLayout, computeEdges, computeActiveHandles } from '@/components/workflow/graphLayout';
+import { mergeHooks } from '@/components/workflow/mergeHooks';
+
+// ─── Constants ──────────────────────────────────────────
+
+const NODE_TYPES = { workflow: WorkflowNode } as const;
+const EDGE_TYPES = { workflow: WorkflowEdgeComponent } as const;
+
+// ─── Detail Panel State ─────────────────────────────────
+
+type DetailState =
+  | { type: 'none' }
+  | { type: 'node'; listId: string }
+  | { type: 'edge'; from: string; to: string };
+
+type ActiveTab = 'graph' | 'hooks';
+
+// ─── Component ──────────────────────────────────────────
+
+export default function WorkflowVisualizer() {
+  const { engine } = useWorkflow();
+  const { scopes } = useScopes();
+  const { ccHooks } = useCcHooks();
+  const config = engine.getConfig();
+  const editor = useWorkflowEditor(config);
+
+  // The config to display: either the edit draft or the live config
+  const displayConfig = editor.editMode ? editor.editConfig : config;
+  const displayLists = useMemo(() => [...displayConfig.lists].sort((a, b) => a.order - b.order), [displayConfig.lists]);
+  const displayEdges = displayConfig.edges;
+  const displayHooks = displayConfig.hooks ?? [];
+
+  // Unified hooks: workflow + CC merged
+  const unifiedHooks = useMemo(() => mergeHooks(displayHooks, ccHooks), [displayHooks, ccHooks]);
+
+  // Tab state
+  const [activeTab, setActiveTab] = useState<ActiveTab>('graph');
+
+  // Source modal (shared across tabs)
+  const [sourceModalHook, setSourceModalHook] = useState<UnifiedHook | null>(null);
+
+  // Hooks tab: selected hook for detail panel
+  const [selectedHookForDetail, setSelectedHookForDetail] = useState<UnifiedHook | null>(null);
+
+  // Adapter: convert WorkflowHook click from Edge/NodeDetailPanel to source modal
+  const handleWorkflowHookClick = useCallback((wfHook: WorkflowHook) => {
+    const unified = unifiedHooks.find((u) => u.id === wfHook.id);
+    if (unified) setSourceModalHook(unified);
+  }, [unifiedHooks]);
+
+  // Cross-tab: navigate from HookDetailPanel edge click to Graph tab
+  const handleNavigateToEdge = useCallback((from: string, to: string) => {
+    setSelectedHookForDetail(null);
+    setActiveTab('graph');
+    setDetail({ type: 'edge', from, to });
+  }, []);
+
+  // Scope counts
+  const scopeCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const scope of scopes) {
+      counts.set(scope.status, (counts.get(scope.status) ?? 0) + 1);
+    }
+    return counts;
+  }, [scopes]);
+
+  // Build graph data from display config
+  const activeHandles = useMemo(
+    () => computeActiveHandles(displayEdges, displayLists),
+    [displayEdges, displayLists],
+  );
+  const graphNodes = useMemo(
+    () => computeLayout(displayLists, displayConfig.groups ?? [], scopeCounts, displayEdges).map((node) => ({
+      ...node,
+      data: { ...node.data, activeHandles: activeHandles.get(node.id) },
+    })),
+    [displayLists, displayConfig.groups, scopeCounts, displayEdges, activeHandles],
+  );
+  const graphEdges = useMemo(
+    () => computeEdges(displayEdges, displayLists, displayHooks, false),
+    [displayEdges, displayLists, displayHooks],
+  );
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(graphNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(graphEdges);
+
+  // Sync React Flow state when the computed graph data changes (e.g. preset switch)
+  useEffect(() => { setNodes(graphNodes); }, [graphNodes, setNodes]);
+  useEffect(() => { setEdges(graphEdges); }, [graphEdges, setEdges]);
+
+  // Detail panel (graph tab)
+  const [detail, setDetail] = useState<DetailState>({ type: 'none' });
+
+  const onNodeClick: NodeMouseHandler<WorkflowNodeType> = useCallback((_event, node) => {
+    setDetail({ type: 'node', listId: node.id });
+  }, []);
+
+  const onEdgeClick: EdgeMouseHandler<WorkflowEdgeType> = useCallback((_event, edge) => {
+    const [from, to] = edge.id.split(':');
+    setDetail({ type: 'edge', from, to });
+  }, []);
+
+  const onPaneClick = useCallback(() => setDetail({ type: 'none' }), []);
+
+  // Resolve selected items from display config
+  const selectedList = detail.type === 'node'
+    ? displayConfig.lists.find((l) => l.id === detail.listId) ?? null
+    : null;
+  const selectedEdge = detail.type === 'edge'
+    ? displayEdges.find((e) => e.from === detail.from && e.to === detail.to) ?? null
+    : null;
+
+  const nodeHooks = useMemo(() => {
+    if (!selectedList) return [];
+    const relevant = displayEdges.filter((e) => e.from === selectedList.id || e.to === selectedList.id);
+    const hookIds = new Set(relevant.flatMap((e) => e.hooks ?? []));
+    return displayHooks.filter((h) => hookIds.has(h.id));
+  }, [selectedList, displayEdges, displayHooks]);
+
+  const nodeConnectedEdges = useMemo(() => {
+    if (!selectedList) return [];
+    return displayEdges.filter((e) => e.from === selectedList.id || e.to === selectedList.id);
+  }, [selectedList, displayEdges]);
+
+  const edgeHooks = useMemo(() => {
+    if (!selectedEdge) return [];
+    return (selectedEdge.hooks ?? [])
+      .map((id) => displayHooks.find((h) => h.id === id))
+      .filter((h): h is NonNullable<typeof h> => h !== undefined);
+  }, [selectedEdge, displayHooks]);
+
+  return (
+    <div className="flex flex-1 min-h-0 flex-col">
+      {/* Header */}
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Workflow className="h-4 w-4 text-primary" />
+          <h1 className="text-xl font-light">Workflow</h1>
+          {editor.editMode && (
+            <span className="rounded bg-cyan-500/20 px-2 py-0.5 text-[10px] font-semibold text-cyan-400">
+              EDIT MODE
+            </span>
+          )}
+
+          {/* Tab navigation */}
+          {!editor.editMode && (
+            <div className="ml-4 flex rounded-lg border border-zinc-800 bg-zinc-900/50 p-0.5">
+              <TabButton
+                active={activeTab === 'graph'}
+                onClick={() => setActiveTab('graph')}
+                icon={<LayoutGrid className="h-3 w-3" />}
+                label="Graph"
+              />
+              <TabButton
+                active={activeTab === 'hooks'}
+                onClick={() => setActiveTab('hooks')}
+                icon={<Zap className="h-3 w-3" />}
+                label="Hooks"
+                count={unifiedHooks.length}
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {!editor.editMode && (
+            <button
+              onClick={editor.enterEditMode}
+              className="flex items-center gap-1.5 rounded border border-zinc-800 px-3 py-1.5 text-xs text-zinc-400 transition-colors hover:border-cyan-500/40 hover:text-cyan-400"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+              Edit
+            </button>
+          )}
+          {!editor.editMode && <PresetSelector activeConfigName={config.name} />}
+        </div>
+      </div>
+
+      {/* Edit Toolbar */}
+      {editor.editMode && (
+        <div className="mb-3">
+          <EditToolbar
+            canUndo={editor.canUndo}
+            canRedo={editor.canRedo}
+            changeCount={editor.changeCount}
+            validation={editor.validation}
+            saving={editor.saving}
+            onAddList={() => editor.setShowAddList(true)}
+            onAddEdge={() => editor.setShowAddEdge(true)}
+            onConfigSettings={() => { editor.setShowConfigSettings(true); setDetail({ type: 'none' }); }}
+            onUndo={editor.undo}
+            onRedo={editor.redo}
+            onSave={editor.save}
+            onDiscard={editor.discard}
+            onPreview={editor.preview}
+          />
+        </div>
+      )}
+
+      {/* ─── Graph Tab ────────────────────────────────── */}
+      {(activeTab === 'graph' || editor.editMode) && (
+        <div className="flex min-h-0 flex-1 gap-3">
+          {/* React Flow Canvas */}
+          <div
+            className="min-h-0 flex-1 rounded-lg border bg-transparent"
+            style={{ borderColor: editor.editMode ? '#3b82f640' : '#27272a' }}
+          >
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              nodeTypes={NODE_TYPES}
+              edgeTypes={EDGE_TYPES}
+              onNodeClick={onNodeClick}
+              onEdgeClick={onEdgeClick}
+              onPaneClick={onPaneClick}
+              fitView
+              fitViewOptions={{ padding: 0.08 }}
+              minZoom={0.3}
+              maxZoom={2}
+              proOptions={{ hideAttribution: true }}
+            >
+              <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#27272a" />
+              <Controls className="!border-zinc-800 !bg-zinc-900 [&>button]:!border-zinc-800 [&>button]:!bg-zinc-900 [&>button]:!fill-zinc-400 [&>button:hover]:!bg-zinc-800" />
+            </ReactFlow>
+          </div>
+
+          {/* Edit mode panels */}
+          {editor.editMode && detail.type === 'node' && selectedList && (
+            <ListPropertyEditor
+              key={selectedList.id}
+              list={selectedList}
+              config={editor.editConfig}
+              onSave={(updated) => { editor.updateList(selectedList, updated); setDetail({ type: 'none' }); }}
+              onDelete={() => { editor.deleteList(selectedList.id); setDetail({ type: 'none' }); }}
+              onClose={() => setDetail({ type: 'none' })}
+            />
+          )}
+          {editor.editMode && detail.type === 'edge' && selectedEdge && (
+            <EdgePropertyEditor
+              key={`${selectedEdge.from}:${selectedEdge.to}`}
+              edge={selectedEdge}
+              config={editor.editConfig}
+              onSave={(updated) => { editor.updateEdge(selectedEdge, updated); setDetail({ type: 'none' }); }}
+              onDelete={() => { editor.deleteEdge(selectedEdge.from, selectedEdge.to); setDetail({ type: 'none' }); }}
+              onClose={() => setDetail({ type: 'none' })}
+            />
+          )}
+          {editor.editMode && editor.showConfigSettings && detail.type === 'none' && (
+            <ConfigSettingsPanel
+              config={editor.editConfig}
+              onUpdate={editor.updateConfig}
+              onClose={() => editor.setShowConfigSettings(false)}
+            />
+          )}
+
+          {/* Read-only panels (graph tab only, not edit mode) */}
+          {!editor.editMode && detail.type === 'node' && (
+            <NodeDetailPanel list={selectedList} hooks={nodeHooks} connectedEdges={nodeConnectedEdges} onClose={() => setDetail({ type: 'none' })} onHookClick={handleWorkflowHookClick} />
+          )}
+          {!editor.editMode && detail.type === 'edge' && (
+            <EdgeDetailPanel edge={selectedEdge} hooks={edgeHooks} onClose={() => setDetail({ type: 'none' })} onHookClick={handleWorkflowHookClick} />
+          )}
+        </div>
+      )}
+
+      {/* ─── Hooks Tab ────────────────────────────────── */}
+      {activeTab === 'hooks' && !editor.editMode && (
+        <div className="flex min-h-0 flex-1 gap-3">
+          <HooksDashboard
+            hooks={unifiedHooks}
+            edges={displayEdges}
+            onHookClick={setSelectedHookForDetail}
+          />
+          {selectedHookForDetail && (
+            <HookDetailPanel
+              hook={selectedHookForDetail}
+              edges={displayEdges}
+              onClose={() => setSelectedHookForDetail(null)}
+              onViewSource={setSourceModalHook}
+              onNavigateToEdge={handleNavigateToEdge}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Dialogs */}
+      <AddListDialog
+        open={editor.showAddList}
+        onOpenChange={editor.setShowAddList}
+        config={editor.editConfig}
+        onAdd={editor.addList}
+      />
+      <AddEdgeDialog
+        open={editor.showAddEdge}
+        onOpenChange={editor.setShowAddEdge}
+        config={editor.editConfig}
+        onAdd={editor.addEdge}
+      />
+      <MigrationPreviewDialog
+        open={editor.showPreview}
+        onOpenChange={editor.setShowPreview}
+        config={editor.editConfig}
+        plan={editor.previewPlan}
+        loading={editor.previewLoading}
+        error={editor.previewError}
+        onApply={editor.applyMigration}
+      />
+      <HookSourceModal
+        hook={sourceModalHook}
+        open={sourceModalHook !== null}
+        onClose={() => setSourceModalHook(null)}
+      />
+    </div>
+  );
+}
+
+// ─── Sub-components ─────────────────────────────────────
+
+function TabButton({ active, onClick, icon, label, count }: {
+  active: boolean; onClick: () => void; icon: React.ReactNode; label: string; count?: number;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors"
+      style={{
+        backgroundColor: active ? '#27272a' : 'transparent',
+        color: active ? '#e4e4e7' : '#71717a',
+      }}
+    >
+      {icon}
+      {label}
+      {count !== undefined && count > 0 && (
+        <span
+          className="rounded-full px-1.5 py-0.5 text-[9px] font-semibold leading-none"
+          style={{
+            backgroundColor: active ? '#f9731630' : '#27272a',
+            color: active ? '#f97316' : '#71717a',
+          }}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}