orbital-command 0.1.4 → 0.3.0

package/src/views/Settings.tsx

@@ -1,183 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,382 +0,0 @@
-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>
-  );
-}