@shepai/cli 1.162.0 → 1.163.0-pr499.0ce2086

package/dist/src/presentation/web/components/common/control-center-drawer/repository-drawer-client.js

@@ -1,24 +1,28 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { Code2, Terminal, FolderOpen, RefreshCw, Play, Square } from 'lucide-react';
+import { Code2, Terminal, FolderOpen, RefreshCw, Play, Square, Copy, Check, Loader2, LayoutDashboard, MessageSquare, GitBranch, GitCommitHorizontal, AlertTriangle, Globe, Tag, Archive, FileEdit, FilePlus, FileCheck2, } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
 import { BaseDrawer } from '../../common/base-drawer/index.js';
-import { ActionButton } from '../../common/action-button/index.js';
 import { DeploymentStatusBadge } from '../../common/deployment-status-badge/index.js';
-import { Separator } from '../../ui/separator.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs.js';
 import { useRepositoryActions } from '../../common/repository-node/use-repository-actions.js';
 import { useDeployAction } from '../../../hooks/use-deploy-action.js';
 import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { ChatTab } from '../../features/chat/ChatTab.js';
+import { getGitRepoInfo } from '../../../app/actions/get-git-log.js';
+const COPY_FEEDBACK_DELAY = 2000;
+const tbBtn = 'text-muted-foreground hover:bg-foreground/8 hover:text-foreground inline-flex size-8 items-center justify-center rounded-[3px] disabled:opacity-40';
+const tbSep = 'bg-border/60 mx-1.5 h-5 w-px shrink-0';
 export function RepositoryDrawerClient({ data, initialTab }) {
     const featureFlags = useFeatureFlags();
     const router = useRouter();
     const pathname = usePathname();
     const isOpen = pathname.startsWith('/repository/');
     const [activeTab, setActiveTab] = useState(initialTab ?? 'overview');
+    const [pathCopied, setPathCopied] = useState(false);
     const repoActions = useRepositoryActions(data.repositoryPath ? { repositoryId: data.id, repositoryPath: data.repositoryPath } : null);
     const onClose = useCallback(() => {
         router.push('/');
@@ -31,7 +35,75 @@ export function RepositoryDrawerClient({ data, initialTab }) {
         }
         : null);
     const isDeployActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
+    const handleCopyPath = useCallback(() => {
+        if (!data.repositoryPath)
+            return;
+        void navigator.clipboard.writeText(data.repositoryPath);
+        setPathCopied(true);
+        setTimeout(() => setPathCopied(false), COPY_FEEDBACK_DELAY);
+    }, [data.repositoryPath]);
     // Session ID for repo chat — deterministic per repo
     const repoSessionId = data.id ? `repo-${data.id}` : `repo-${data.name}`;
-    return (_jsx(BaseDrawer, { open: isOpen, onClose: onClose, size: "lg", modal: false, "data-testid": "repository-drawer", children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "shrink-0 px-4 pt-4 pb-3", "data-testid": "repository-drawer-header", children: [_jsxs("div", { className: "flex items-baseline gap-4 pe-6", children: [_jsx("h2", { className: "text-foreground min-w-0 shrink truncate text-base font-semibold tracking-tight", children: data.name }), _jsxs(TabsList, { className: "h-auto shrink-0 gap-0.5 rounded-none border-0 bg-transparent p-0", children: [_jsx(TabsTrigger, { value: "overview", className: "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary h-auto rounded-none border-b-2 border-transparent bg-transparent px-2 py-0.5 text-[12px] font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: "Overview" }), _jsx(TabsTrigger, { value: "chat", className: "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary h-auto rounded-none border-b-2 border-transparent bg-transparent px-2 py-0.5 text-[12px] font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: "Chat" })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [data.repositoryPath ? (_jsx("p", { className: "text-muted-foreground min-w-0 truncate font-mono text-xs", children: data.repositoryPath })) : null, featureFlags.envDeploy && data.repositoryPath ? (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsx(ActionButton, { label: isDeployActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isDeployActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isDeployActive ? Square : Play, iconOnly: true, variant: "outline", size: "icon-sm" }) }) }), _jsx(TooltipContent, { children: isDeployActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isDeployActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: data.repositoryPath })) : null] })) : null] })] }), _jsx(Separator, {}), _jsx(TabsContent, { value: "overview", className: "mt-0 flex-1 overflow-y-auto", children: data.repositoryPath ? (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "OPEN WITH" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ActionButton, { label: "Open in IDE", onClick: repoActions.openInIde, loading: repoActions.ideLoading, error: !!repoActions.ideError, icon: Code2, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open in Shell", onClick: repoActions.openInShell, loading: repoActions.shellLoading, error: !!repoActions.shellError, icon: Terminal, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open Folder", onClick: repoActions.openFolder, loading: repoActions.folderLoading, error: !!repoActions.folderError, icon: FolderOpen, variant: "outline", size: "sm" })] })] }), data.id && featureFlags.gitRebaseSync ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT OPERATIONS" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ActionButton, { label: "Sync Main", onClick: repoActions.syncMain, loading: repoActions.syncLoading, error: !!repoActions.syncError, icon: RefreshCw, variant: "outline", size: "sm" }), repoActions.syncError ? (_jsx("p", { className: "text-destructive text-xs", children: repoActions.syncError })) : null] })] })] })) : null] })) : null }), _jsx(TabsContent, { value: "chat", className: "mt-0 flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: repoSessionId, worktreePath: data.repositoryPath }) })] }) }));
+    return (_jsx(BaseDrawer, { open: isOpen, onClose: onClose, size: "lg", modal: false, "data-testid": "repository-drawer", children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "flex min-h-0 flex-1 flex-col", children: [_jsxs(TabsList, { className: "bg-muted/50 h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b p-0", children: [_jsxs(TabsTrigger, { value: "overview", className: "text-muted-foreground hover:bg-muted hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-t-primary [&:not([data-state=active])]:border-r-border relative h-auto rounded-none border-t-2 border-r border-t-transparent border-r-transparent bg-transparent px-3.5 py-2.5 text-[13px] font-normal shadow-none transition-none last:border-r-transparent data-[state=active]:shadow-none", children: [_jsx(LayoutDashboard, { className: "mr-1.5 size-4" }), "Overview"] }), _jsxs(TabsTrigger, { value: "chat", className: "text-muted-foreground hover:bg-muted hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-t-primary [&:not([data-state=active])]:border-r-border relative h-auto rounded-none border-t-2 border-r border-t-transparent border-r-transparent bg-transparent px-3.5 py-2.5 text-[13px] font-normal shadow-none transition-none last:border-r-transparent data-[state=active]:shadow-none", children: [_jsx(MessageSquare, { className: "mr-1.5 size-4" }), "Chat"] })] }), _jsxs("div", { className: "bg-muted/40 shrink-0 border-b", children: [_jsxs("div", { className: "flex items-center gap-2 px-4 pe-10 pt-2.5 pb-2", "data-testid": "repository-drawer-header", children: [_jsx("h2", { className: "text-foreground min-w-0 truncate text-base font-semibold tracking-tight", children: data.name }), data.repositoryPath ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/40 text-xs", children: "/" }), _jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono text-[11px]", children: data.repositoryPath })] })) : null] }), data.repositoryPath ? (_jsx("div", { "data-testid": "repository-drawer-toolbar", children: _jsxs("div", { className: "flex h-9 items-center px-1.5", children: [_jsxs(TooltipProvider, { delayDuration: 300, children: [_jsxs("div", { className: "flex items-center", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: repoActions.openInIde, disabled: repoActions.ideLoading, "aria-label": "Open in IDE", children: repoActions.ideLoading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(Code2, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Open in IDE" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: repoActions.openInShell, disabled: repoActions.shellLoading, "aria-label": "Open terminal", children: repoActions.shellLoading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(Terminal, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Open terminal" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: repoActions.openFolder, disabled: repoActions.folderLoading, "aria-label": "Open folder", children: repoActions.folderLoading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(FolderOpen, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Open folder" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: handleCopyPath, "aria-label": "Copy path", children: pathCopied ? (_jsx(Check, { className: "size-3.5 text-green-500" })) : (_jsx(Copy, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: pathCopied ? 'Copied!' : 'Copy path' })] })] }), data.id && featureFlags.gitRebaseSync ? (_jsxs(_Fragment, { children: [_jsx("div", { className: tbSep }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: repoActions.syncMain, disabled: repoActions.syncLoading, "aria-label": "Sync main", children: repoActions.syncLoading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(RefreshCw, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Sync main" })] })] })) : null, featureFlags.envDeploy ? (_jsxs(_Fragment, { children: [_jsx("div", { className: tbSep }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", disabled: deployAction.deployLoading || deployAction.stopLoading, onClick: isDeployActive ? deployAction.stop : deployAction.deploy, className: cn('inline-flex size-7 items-center justify-center rounded-[3px] disabled:opacity-40', isDeployActive
+                                                                        ? 'text-red-500 hover:bg-red-500/10 hover:text-red-400'
+                                                                        : 'text-green-500 hover:bg-green-500/10 hover:text-green-400'), "aria-label": isDeployActive ? 'Stop dev server' : 'Start dev server', children: deployAction.deployLoading || deployAction.stopLoading ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : isDeployActive ? (_jsx(Square, { className: "size-4" })) : (_jsx(Play, { className: "size-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: isDeployActive ? 'Stop dev server' : 'Start dev server' })] }), isDeployActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: data.repositoryPath })) : null] })) : null] }), _jsx("div", { className: "flex-1" })] }) })) : null] }), _jsx(TabsContent, { value: "overview", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(RepoOverview, { data: data, syncError: repoActions.syncError }) }), _jsx(TabsContent, { value: "chat", className: "mt-0 flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: repoSessionId, worktreePath: data.repositoryPath }) })] }) }));
+}
+// ── Repo Overview ───────────────────────────────────────────────────
+function Section({ icon: Icon, title, children, }) {
+    return (_jsxs("div", { className: "px-3 pt-4 pb-1", children: [_jsxs("div", { className: "text-foreground mb-2 flex items-center gap-1.5 text-sm font-semibold tracking-wider uppercase", children: [_jsx(Icon, { className: "size-4 opacity-50" }), title] }), children] }));
+}
+function Card({ children, className }) {
+    return (_jsx("div", { className: cn('bg-muted/60 rounded-md border border-transparent p-3', className), children: children }));
+}
+function KV({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground/40 text-[11px] font-medium tracking-wider uppercase", children: label }), _jsx("span", { className: "text-sm leading-snug", children: children })] }));
+}
+function RepoOverview({ data, syncError, }) {
+    const [repoInfo, setRepoInfo] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!data.repositoryPath)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        getGitRepoInfo(data.repositoryPath, 8)
+            .then((result) => {
+            if (!cancelled)
+                setRepoInfo(result);
+        })
+            .catch(() => {
+            // Silently handle — repo info is non-critical
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [data.repositoryPath]);
+    if (!data.repositoryPath)
+        return null;
+    const wt = repoInfo?.workingTree;
+    const isDirty = wt && (wt.staged > 0 || wt.modified > 0 || wt.untracked > 0);
+    const ds = repoInfo?.diffStats;
+    return (_jsxs("div", { className: "pb-4", children: [loading ? (_jsxs("div", { className: "text-foreground/40 flex items-center gap-2 px-4 py-8 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), " Loading repository info..."] })) : null, repoInfo ? (_jsxs("div", { className: "grid grid-cols-2 gap-2 px-3 pt-3", children: [_jsx(Card, { children: _jsxs(KV, { label: "Branch", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(GitBranch, { className: "text-foreground/30 size-3.5 shrink-0" }), _jsx("code", { className: "font-mono text-sm", children: repoInfo.currentBranch ?? data.branch ?? '—' })] }), data.behindCount != null && data.behindCount > 0 ? (_jsxs("span", { className: "mt-0.5 block text-xs text-orange-600 dark:text-orange-400", children: [data.behindCount, " behind default"] })) : null] }) }), _jsx(Card, { children: _jsx(KV, { label: "Working Tree", children: isDirty ? (_jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5", children: [wt.staged > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-green-600 dark:text-green-400", children: [_jsx(FileCheck2, { className: "size-3.5" }), " ", wt.staged, " staged"] })) : null, wt.modified > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-amber-600 dark:text-amber-400", children: [_jsx(FileEdit, { className: "size-3.5" }), " ", wt.modified, " modified"] })) : null, wt.untracked > 0 ? (_jsxs("span", { className: "text-foreground/50 inline-flex items-center gap-1 text-sm", children: [_jsx(FilePlus, { className: "size-3.5" }), " ", wt.untracked, " untracked"] })) : null] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400", children: [_jsx(Check, { className: "size-3.5" }), " Clean"] })) }) }), ds ? (_jsx(Card, { children: _jsx(KV, { label: "Uncommitted Changes", children: _jsxs("div", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { children: [ds.filesChanged, " file", ds.filesChanged !== 1 ? 's' : ''] }), _jsxs("span", { className: "text-green-600 dark:text-green-400", children: ["+", ds.insertions] }), _jsxs("span", { className: "text-red-500 dark:text-red-400", children: ["-", ds.deletions] })] }) }) })) : null, repoInfo.remotes.length > 0 ? (_jsx(Card, { children: _jsx(KV, { label: "Remote", children: repoInfo.remotes.map((r) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm", children: [_jsx(Globe, { className: "text-foreground/30 size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: r.url
+                                            .replace(/\.git$/, '')
+                                            .replace(/^https?:\/\/([^@]+@)?/, '')
+                                            .replace(/x-access-token:[^@]+@/, '') })] }, r.name))) }) })) : null, repoInfo.stashCount > 0 ? (_jsx(Card, { children: _jsx(KV, { label: "Stashes", children: _jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm", children: [_jsx(Archive, { className: "text-foreground/30 size-3.5 shrink-0" }), repoInfo.stashCount, " stash", repoInfo.stashCount !== 1 ? 'es' : ''] }) }) })) : null, repoInfo.tags.length > 0 ? (_jsx(Card, { children: _jsx(KV, { label: "Tags", children: _jsx("div", { className: "flex flex-wrap gap-1.5", children: repoInfo.tags.map((t) => (_jsxs("span", { className: "bg-foreground/[0.04] inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-xs", children: [_jsx(Tag, { className: "text-foreground/30 size-2.5" }), t] }, t))) }) }) })) : null] })) : null, repoInfo && repoInfo.commits.length > 0 ? (_jsx(Section, { icon: GitCommitHorizontal, title: "Recent Commits", children: _jsxs("div", { className: "relative ml-3", children: [_jsx("div", { className: "bg-border absolute top-2 bottom-2 left-[5px] w-px" }), repoInfo.commits.map((c, i) => (_jsxs("div", { className: "group relative flex gap-3 py-1.5", children: [_jsx("div", { className: cn('relative z-10 mt-1.5 size-[11px] shrink-0 rounded-full border-2', i === 0
+                                        ? 'border-primary bg-primary'
+                                        : 'border-border bg-background group-hover:border-foreground/30') }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "min-w-0 truncate text-sm leading-snug", children: c.subject }), _jsx("code", { className: "text-foreground/30 shrink-0 font-mono text-[11px]", children: c.shortHash })] }), _jsxs("div", { className: "text-foreground/40 mt-0.5 flex items-center gap-2 text-xs", children: [_jsx("span", { children: c.author }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: c.relativeDate }), c.branch ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(GitBranch, { className: "size-3" }), c.branch] })] })) : null] })] })] }, c.hash)))] }) })) : null, repoInfo && repoInfo.branches.length > 1 ? (_jsx(Section, { icon: GitBranch, title: "Branches", children: _jsx("div", { className: "flex flex-col", children: [...repoInfo.branches]
+                        .sort((a, b) => {
+                        const isDefault = (n) => /^(main|master)$/.test(n);
+                        if (a.isCurrent && !b.isCurrent)
+                            return -1;
+                        if (!a.isCurrent && b.isCurrent)
+                            return 1;
+                        if (isDefault(a.name) && !isDefault(b.name))
+                            return -1;
+                        if (!isDefault(a.name) && isDefault(b.name))
+                            return 1;
+                        return 0;
+                    })
+                        .map((b) => (_jsxs("div", { className: cn('flex items-center justify-between rounded px-2 py-1.5', b.isCurrent && 'bg-muted/60'), children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm", children: [b.isCurrent ? (_jsx("span", { className: "size-2 shrink-0 rounded-full bg-green-500" })) : /^(main|master)$/.test(b.name) ? (_jsx("span", { className: "size-2 shrink-0 rounded-full bg-blue-500" })) : (_jsx("span", { className: "bg-foreground/10 size-2 shrink-0 rounded-full" })), _jsx("code", { className: "font-mono text-[13px]", children: b.name }), b.isCurrent ? (_jsx("span", { className: "text-foreground/40 text-[10px]", children: "current" })) : null] }), _jsx("span", { className: "text-foreground/40 text-xs", children: b.lastCommitDate })] }, b.name))) }) })) : null, syncError ? (_jsx(Section, { icon: AlertTriangle, title: "Issues", children: _jsx(Card, { className: "bg-destructive/5 border-transparent", children: _jsx("p", { className: "text-destructive text-sm", children: syncError }) }) })) : null] }));
 }

package/dist/src/presentation/web/components/common/control-center-drawer/use-drawer-sync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawer-sync.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/use-drawer-sync.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKhD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,GACxD,IAAI,CAwCN"}
+{"version":3,"file":"use-drawer-sync.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/use-drawer-sync.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKhD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,GACxD,IAAI,CAkDN"}

package/dist/src/presentation/web/components/common/control-center-drawer/use-drawer-sync.js

@@ -16,14 +16,21 @@ const BACKGROUND_SYNC_INTERVAL_MS = 15_000;
 export function useDrawerSync(isOpen, featureId, setView) {
     const wasOpenRef = useRef(isOpen);
     const isFetchingRef = useRef(false);
+    // Incremented on every open transition — stale fetches from a previous
+    // open/close cycle are discarded so they can't overwrite fresh data.
+    const generationRef = useRef(0);
     const syncFromServer = useCallback(async () => {
         if (!featureId || isFetchingRef.current)
             return;
         isFetchingRef.current = true;
+        const gen = generationRef.current;
         try {
             const data = await getFeatureDrawerData(featureId);
             if (!data)
                 return;
+            // Discard result if the drawer was closed and reopened while fetching
+            if (gen !== generationRef.current)
+                return;
             setView((prev) => mergeFeatureData(prev, data));
         }
         catch {
@@ -40,6 +47,10 @@ export function useDrawerSync(isOpen, featureId, setView) {
     useEffect(() => {
         if (isOpen && (!wasOpenRef.current || !hasFetchedOnMountRef.current)) {
             hasFetchedOnMountRef.current = true;
+            // New open transition — bump generation to invalidate any in-flight fetch
+            // from a previous cycle and reset the fetching guard.
+            generationRef.current += 1;
+            isFetchingRef.current = false;
             void syncFromServer();
         }
         wasOpenRef.current = isOpen;

package/dist/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deployment-status-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAIvE,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,0BAA0B,kDAgF1F"}
+{"version":3,"file":"deployment-status-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAIvE,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,0BAA0B,kDAkG1F"}

package/dist/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.js

@@ -3,22 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Loader2, ExternalLink, Terminal } from 'lucide-react';
 import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
-import { Badge } from '../../ui/badge.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { ServerLogViewer } from '../../common/server-log-viewer/index.js';
+const tbBtn = 'text-muted-foreground hover:bg-foreground/8 hover:text-foreground inline-flex size-7 items-center justify-center rounded-[3px]';
 export function DeploymentStatusBadge({ status, url, targetId }) {
     const [logViewerOpen, setLogViewerOpen] = useState(false);
     const showLogButton = targetId && (status === DeploymentState.Booting || status === DeploymentState.Ready);
     switch (status) {
         case DeploymentState.Booting:
-            return (_jsxs(_Fragment, { children: [_jsxs(Badge, { className: "border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50", children: [_jsx(Loader2, { className: "me-1 h-3.5 w-3.5 animate-spin" }), "Starting...", showLogButton ? (_jsx("button", { type: "button", "aria-label": "View server logs", className: "ms-1.5 inline-flex items-center rounded-sm p-0.5 hover:bg-blue-100", onClick: (e) => {
-                                    e.stopPropagation();
-                                    setLogViewerOpen(true);
-                                }, children: _jsx(Terminal, { className: "h-3 w-3" }) })) : null] }), showLogButton ? (_jsx(ServerLogViewer, { open: logViewerOpen, onOpenChange: setLogViewerOpen, targetId: targetId })) : null] }));
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1 pl-1", children: [_jsx(Loader2, { className: "size-3 animate-spin text-blue-500" }), _jsx("span", { className: "text-muted-foreground text-[11px]", children: "Starting..." }), showLogButton ? (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "View server logs", className: tbBtn, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    setLogViewerOpen(true);
+                                                }, children: _jsx(Terminal, { className: "size-3.5" }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Server logs" })] }) })) : null] }), showLogButton ? (_jsx(ServerLogViewer, { open: logViewerOpen, onOpenChange: setLogViewerOpen, targetId: targetId })) : null] }));
         case DeploymentState.Ready:
-            return (_jsxs(_Fragment, { children: [_jsxs(Badge, { className: "border-transparent bg-green-50 text-green-700 hover:bg-green-50", children: [_jsx("span", { className: "me-1 inline-block h-2 w-2 rounded-full bg-green-500" }), url ? (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 hover:underline", onClick: (e) => e.stopPropagation(), children: [url, _jsx(ExternalLink, { className: "h-3 w-3" })] })) : ('Ready'), showLogButton ? (_jsx("button", { type: "button", "aria-label": "View server logs", className: "ms-1.5 inline-flex items-center rounded-sm p-0.5 hover:bg-green-100", onClick: (e) => {
-                                    e.stopPropagation();
-                                    setLogViewerOpen(true);
-                                }, children: _jsx(Terminal, { className: "h-3 w-3" }) })) : null] }), showLogButton ? (_jsx(ServerLogViewer, { open: logViewerOpen, onOpenChange: setLogViewerOpen, targetId: targetId })) : null] }));
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex translate-y-px items-center gap-1 pl-1", children: [_jsx("span", { className: "inline-block size-1.5 rounded-full bg-green-500" }), url ? (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-0.5 text-[11px] text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300", onClick: (e) => e.stopPropagation(), children: [url, _jsx(ExternalLink, { className: "size-2.5 shrink-0" })] })) : (_jsx("span", { className: "text-[11px] text-green-600 dark:text-green-400", children: "Ready" })), showLogButton ? (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "View server logs", className: tbBtn, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    setLogViewerOpen(true);
+                                                }, children: _jsx(Terminal, { className: "size-3.5" }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Server logs" })] }) })) : null] }), showLogButton ? (_jsx(ServerLogViewer, { open: logViewerOpen, onOpenChange: setLogViewerOpen, targetId: targetId })) : null] }));
         default:
             return null;
     }

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.d.ts

@@ -14,6 +14,10 @@ export interface FeatureDrawerTabsProps {
     headerContent?: React.ReactNode;
     featureNode: FeatureNodeData;
     featureId: string;
+    /** Action handlers for the status chip in the title row. */
+    onRetry?: (featureId: string) => void;
+    onStop?: (featureId: string) => void;
+    onStart?: (featureId: string) => void;
     initialTab?: FeatureTabKey;
     /** Tab key from URL path segment (e.g. /feature/[id]/activity → 'activity'). */
     urlTab?: FeatureTabKey;
@@ -47,5 +51,5 @@ export interface FeatureDrawerTabsProps {
     /** When false, the Chat tab is hidden from the tab bar (FR-17). Defaults to true. */
     interactiveAgentEnabled?: boolean;
 }
-export declare function FeatureDrawerTabs({ featureName, headerContent, featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, isRejecting, chatInput, onChatInputChange, sseEvents, interactiveAgentEnabled, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeatureDrawerTabs({ featureName, headerContent, featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, isRejecting, chatInput, onChatInputChange, sseEvents, interactiveAgentEnabled, onRetry, onStop, onStart, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=feature-drawer-tabs.d.ts.map

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"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"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.js

@@ -3,11 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePathname } from 'next/navigation';
-import { Loader2, AlertCircle } from 'lucide-react';
+import { Loader2, AlertCircle, LayoutDashboard, Activity, ScrollText, Map, FileCheck, Cpu, Package, GitMerge, MessageSquare, Play, Square, RotateCcw, Zap, Layers, } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs.js';
-import { Separator } from '../../ui/separator.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { getFeaturePhaseTimings } from '../../../app/actions/get-feature-phase-timings.js';
 import { getFeaturePlan } from '../../../app/actions/get-feature-plan.js';
+import { cn } from '../../../lib/utils.js';
+import { featureNodeStateConfig } from '../../common/feature-node/index.js';
+import { CometSpinner } from '../../ui/comet-spinner.js';
 import { PrdQuestionnaire } from '../../common/prd-questionnaire/index.js';
 import { TechDecisionsContent } from '../../common/tech-decisions-review/index.js';
 import { ProductDecisionsSummary } from '../../common/product-decisions-summary/index.js';
@@ -22,15 +25,15 @@ import { useFeatureLogs } from '../../../hooks/use-feature-logs.js';
 import { useTabDataFetch } from './use-tab-data-fetch.js';
 /** All possible tabs in display order. */
 const ALL_TABS = [
-    { key: 'overview', label: 'Overview' },
-    { key: 'activity', label: 'Activity' },
-    { key: 'log', label: 'Log' },
-    { key: 'plan', label: 'Plan' },
-    { key: 'prd-review', label: 'PRD Review' },
-    { key: 'tech-decisions', label: 'Tech Decisions' },
-    { key: 'product-decisions', label: 'Product' },
-    { key: 'merge-review', label: 'Merge Review' },
-    { key: 'chat', label: 'Chat' },
+    { key: 'overview', label: 'Overview', icon: LayoutDashboard },
+    { key: 'activity', label: 'Activity', icon: Activity },
+    { key: 'log', label: 'Log', icon: ScrollText },
+    { key: 'plan', label: 'Plan', icon: Map },
+    { key: 'prd-review', label: 'PRD Review', icon: FileCheck },
+    { key: 'tech-decisions', label: 'Tech Decisions', icon: Cpu },
+    { key: 'product-decisions', label: 'Product', icon: Package },
+    { key: 'merge-review', label: 'Merge Review', icon: GitMerge },
+    { key: 'chat', label: 'Chat', icon: MessageSquare },
 ];
 /** Compute which tabs are visible based on feature lifecycle + state. */
 function computeVisibleTabs(node, interactiveAgentEnabled = true) {
@@ -75,7 +78,7 @@ const TAB_FETCHERS = {
     activity: fetchActivity,
     plan: fetchPlan,
 };
-export function FeatureDrawerTabs({ featureName, headerContent, featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, isRejecting, chatInput, onChatInputChange, sseEvents, interactiveAgentEnabled = true, }) {
+export function FeatureDrawerTabs({ featureName, headerContent, featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, isRejecting, chatInput, onChatInputChange, sseEvents, interactiveAgentEnabled = true, onRetry, onStop, onStart, }) {
     const pathname = usePathname();
     const visibleTabs = useMemo(() => computeVisibleTabs(featureNode, interactiveAgentEnabled), [featureNode, interactiveAgentEnabled]);
     const visibleTabDefs = useMemo(() => ALL_TABS.filter((t) => visibleTabs.includes(t.key)).map((t) => t.key === 'merge-review' && featureNode.lifecycle === 'maintain'
@@ -252,7 +255,15 @@ export function FeatureDrawerTabs({ featureName, headerContent, featureNode, fea
             fetchTab(tab);
         }
     }, [fetchTab]);
-    return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsxs(Tabs, { value: activeTab, onValueChange: handleTabChange, className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "shrink-0 px-4 pt-4 pb-3", "data-testid": "feature-drawer-header", children: [_jsxs("div", { className: "flex items-baseline gap-4 pe-6", children: [featureName ? (_jsx("h2", { className: "text-foreground min-w-0 shrink truncate text-base font-semibold tracking-tight", children: featureName })) : null, _jsx(TabsList, { className: "h-auto shrink-0 gap-0.5 rounded-none border-0 bg-transparent p-0", children: visibleTabDefs.map((tab) => (_jsx(TabsTrigger, { value: tab.key, className: "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary h-auto rounded-none border-b-2 border-transparent bg-transparent px-2 py-0.5 text-[12px] font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.key))) })] }), headerContent] }), _jsx(Separator, {}), _jsx(TabsContent, { value: "overview", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(OverviewTab, { data: featureNode, syncStatus: syncStatus, syncLoading: syncLoading, syncError: syncError, onRefreshSync: onRefreshSync, onRebaseOnMain: onRebaseOnMain, rebaseLoading: rebaseLoading, rebaseError: rebaseError }) }), _jsx(TabsContent, { value: "activity", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(ActivityTab, { timings: tabs.activity.data?.timings ?? null, loading: tabs.activity.loading, error: tabs.activity.error, rejectionFeedback: tabs.activity.data?.rejectionFeedback }) }), _jsx(TabsContent, { value: "log", className: "mt-0 flex-1 overflow-hidden", children: _jsx(LogTab, { content: featureLogs.content, isConnected: featureLogs.isConnected, error: featureLogs.error }) }), _jsx(TabsContent, { value: "plan", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(PlanTab, { plan: tabs.plan.data, loading: tabs.plan.loading, error: tabs.plan.error }) }), visibleTabs.includes('prd-review') ? (_jsx(TabsContent, { value: "prd-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections ?? {}, onSelect: onPrdSelect ?? (() => undefined), onApprove: onPrdApprove ?? (() => undefined), onReject: onPrdReject, isProcessing: isPrdLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('tech-decisions') ? (_jsx(TabsContent, { value: "tech-decisions", className: "mt-0 flex min-h-0 flex-1 flex-col", children: techData ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(TechDecisionsContent, { data: techData }) }), _jsx(DrawerActionBarForTech, { onApprove: onTechApprove ?? (() => undefined), onReject: onTechReject, isProcessing: isTechLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })] })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('product-decisions') ? (_jsx(TabsContent, { value: "product-decisions", className: "mt-0 flex-1 overflow-y-auto", children: productData === null ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) : productData ? (_jsx(ProductDecisionsSummary, { data: productData })) : (_jsx("p", { className: "text-muted-foreground p-4 text-center text-sm", children: "No product decisions available." })) })) : null, visibleTabs.includes('merge-review') ? (_jsx(TabsContent, { value: "merge-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: mergeData ? (_jsx(MergeReview, { data: mergeData, readOnly: featureNode.lifecycle === 'maintain', onApprove: onMergeApprove ?? (() => undefined), onReject: onMergeReject, isProcessing: isMergeLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: isMergeLoading ? (_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" })) : (_jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-2 text-sm", children: [_jsx(AlertCircle, { className: "h-6 w-6" }), _jsx("span", { children: "Merge review data unavailable" })] })) })) })) : null, visibleTabs.includes('chat') ? (_jsx(TabsContent, { value: "chat", className: "mt-0 flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: featureId, worktreePath: featureNode.worktreePath }) })) : null] }) }));
+    return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsxs(Tabs, { value: activeTab, onValueChange: handleTabChange, className: "flex min-h-0 flex-1 flex-col", children: [_jsx(TabsList, { className: "bg-muted/50 h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b p-0", children: visibleTabDefs.map((tab) => {
+                        const Icon = tab.icon;
+                        return (_jsxs(TabsTrigger, { value: tab.key, className: "text-muted-foreground hover:bg-muted hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-t-primary [&:not([data-state=active])]:border-r-border relative h-auto rounded-none border-t-2 border-r border-t-transparent border-r-transparent bg-transparent px-3.5 py-2.5 text-[13px] font-normal shadow-none transition-none last:border-r-transparent data-[state=active]:shadow-none", children: [_jsx(Icon, { className: "mr-1.5 size-4" }), tab.label] }, tab.key));
+                    }) }), _jsxs("div", { className: "bg-muted/40 shrink-0 border-b", children: [featureName ? (_jsxs("div", { className: "flex h-12 items-stretch gap-2 pr-0 pl-4", "data-testid": "feature-drawer-header", children: [_jsx("div", { className: "flex items-center", children: featureNode.fastMode ? (_jsx(Zap, { className: "size-4 shrink-0 text-amber-500" })) : (_jsx(Layers, { className: "text-muted-foreground/50 size-4 shrink-0" })) }), _jsx("h2", { className: "text-foreground flex min-w-0 items-center truncate text-base font-semibold tracking-tight", children: featureName }), featureNode.repositoryName ? (_jsxs("span", { className: "animate-in fade-in flex shrink-0 items-center gap-1.5 self-center duration-200", children: [_jsx("span", { className: "text-muted-foreground/30 text-sm", children: "/" }), featureNode.remoteUrl ? (_jsx("a", { href: featureNode.remoteUrl, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-foreground text-sm", children: featureNode.repositoryName })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: featureNode.repositoryName }))] })) : (_jsxs("span", { className: "flex items-center gap-1.5 self-center", children: [_jsx("span", { className: "text-muted-foreground/30 text-sm", children: "/" }), _jsx("span", { className: "bg-muted h-4 w-16 animate-pulse rounded" })] })), _jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "ml-auto flex shrink-0 cursor-default items-center self-stretch text-xs font-medium", children: [_jsxs("div", { className: cn('flex items-center gap-1.5 self-stretch px-3', featureNodeStateConfig[featureNode.state].labelClass), children: [featureNode.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : ((() => {
+                                                                    const I = featureNodeStateConfig[featureNode.state].icon;
+                                                                    return _jsx(I, { className: "size-3.5 shrink-0" });
+                                                                })()), featureNodeStateConfig[featureNode.state].label] }), featureNode.state === 'pending' && onStart ? (_jsxs("button", { type: "button", onClick: () => onStart(featureNode.featureId), className: "text-muted-foreground flex items-center gap-1 self-stretch px-3 hover:bg-green-500/10 hover:text-green-600 dark:hover:text-green-400", "data-testid": "feature-drawer-start-button", children: [_jsx(Play, { className: "size-3.5" }), " Start"] })) : featureNode.state === 'error' && onRetry ? (_jsxs("button", { type: "button", onClick: () => onRetry(featureNode.featureId), className: "text-muted-foreground flex items-center gap-1 self-stretch px-3 hover:bg-red-500/10 hover:text-red-500 dark:hover:text-red-400", "data-testid": "feature-drawer-retry-button", children: [_jsx(RotateCcw, { className: "size-3.5" }), " Retry"] })) : featureNode.state === 'running' && onStop ? (_jsxs("button", { type: "button", onClick: () => onStop(featureNode.featureId), className: "text-muted-foreground flex items-center gap-1 self-stretch px-3 hover:bg-red-500/10 hover:text-red-500 dark:hover:text-red-400", "data-testid": "feature-drawer-stop-button", children: [_jsx(Square, { className: "size-3.5" }), " Stop"] })) : null] }) }), featureNode.errorMessage ? (_jsxs(TooltipContent, { side: "bottom", align: "end", sideOffset: 4, className: "z-[100] max-w-xs cursor-pointer text-xs leading-relaxed select-text", onClick: () => {
+                                                    void navigator.clipboard.writeText(featureNode.errorMessage);
+                                                }, children: [featureNode.errorMessage, _jsx("span", { className: "text-muted-foreground ml-1 text-[10px] italic", children: "(click to copy)" })] })) : null] }) })] })) : null, headerContent] }), _jsx(TabsContent, { value: "overview", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(OverviewTab, { data: featureNode, syncStatus: syncStatus, syncLoading: syncLoading, syncError: syncError, onRefreshSync: onRefreshSync, onRebaseOnMain: onRebaseOnMain, rebaseLoading: rebaseLoading, rebaseError: rebaseError }) }), _jsx(TabsContent, { value: "activity", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(ActivityTab, { timings: tabs.activity.data?.timings ?? null, loading: tabs.activity.loading, error: tabs.activity.error, rejectionFeedback: tabs.activity.data?.rejectionFeedback }) }), _jsx(TabsContent, { value: "log", className: "mt-0 flex-1 overflow-hidden", children: _jsx(LogTab, { content: featureLogs.content, isConnected: featureLogs.isConnected, error: featureLogs.error }) }), _jsx(TabsContent, { value: "plan", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(PlanTab, { plan: tabs.plan.data, loading: tabs.plan.loading, error: tabs.plan.error }) }), visibleTabs.includes('prd-review') ? (_jsx(TabsContent, { value: "prd-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections ?? {}, onSelect: onPrdSelect ?? (() => undefined), onApprove: onPrdApprove ?? (() => undefined), onReject: onPrdReject, isProcessing: isPrdLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('tech-decisions') ? (_jsx(TabsContent, { value: "tech-decisions", className: "mt-0 flex min-h-0 flex-1 flex-col", children: techData ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(TechDecisionsContent, { data: techData }) }), _jsx(DrawerActionBarForTech, { onApprove: onTechApprove ?? (() => undefined), onReject: onTechReject, isProcessing: isTechLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })] })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('product-decisions') ? (_jsx(TabsContent, { value: "product-decisions", className: "mt-0 flex-1 overflow-y-auto", children: productData === null ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) : productData ? (_jsx(ProductDecisionsSummary, { data: productData })) : (_jsx("p", { className: "text-muted-foreground p-4 text-center text-sm", children: "No product decisions available." })) })) : null, visibleTabs.includes('merge-review') ? (_jsx(TabsContent, { value: "merge-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: mergeData ? (_jsx(MergeReview, { data: mergeData, readOnly: featureNode.lifecycle === 'maintain', onApprove: onMergeApprove ?? (() => undefined), onReject: onMergeReject, isProcessing: isMergeLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: isMergeLoading ? (_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" })) : (_jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-2 text-sm", children: [_jsx(AlertCircle, { className: "h-6 w-6" }), _jsx("span", { children: "Merge review data unavailable" })] })) })) })) : null, visibleTabs.includes('chat') ? (_jsx(TabsContent, { value: "chat", className: "mt-0 flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: featureId, worktreePath: featureNode.worktreePath }) })) : null] }) }));
 }
 // ── Private helper ──────────────────────────────────────────────────────
 function DrawerActionBarForTech({ onApprove, onReject, isProcessing, isRejecting, chatInput, onChatInputChange, }) {

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAQxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,GACZ,EAAE,gBAAgB,2CA4ElB"}
+{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAOxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2GrE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,GACZ,EAAE,gBAAgB,2CAuLlB"}