@shepai/cli 1.163.0 → 1.164.0

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"}

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

@@ -2,75 +2,54 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AlertTriangle, Check, ExternalLink, FileSearch, GitBranch, GitCommitHorizontal, RotateCcw, ShieldCheck, Square, X, Zap, } from 'lucide-react';
+import { AlertTriangle, Check, CheckCircle2, Clock, ExternalLink, FileSearch, GitBranch, GitCommitHorizontal, GitMerge, Info, RefreshCw, Settings, ShieldCheck, X, Zap, } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { cn } from '../../../lib/utils.js';
-import { Badge } from '../../ui/badge.js';
-import { Separator } from '../../ui/separator.js';
 import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
 import { CometSpinner } from '../../ui/comet-spinner.js';
-import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
+import { ActionButton } from '../../common/action-button/index.js';
+import { featureNodeStateConfig } from '../../common/feature-node/index.js';
 import { getAgentTypeIcon, agentTypeLabels, } from '../../common/feature-node/agent-type-icons.js';
 import { getModelMeta } from '../../../lib/model-metadata.js';
 import { formatDuration } from '../../../lib/format-duration.js';
-import { BranchSyncStatus } from './branch-sync-status.js';
-export function OverviewTab({ data, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, }) {
-    const isCompleted = data.lifecycle === 'maintain';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[data.lifecycle] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FeatureStateBadge, { data: data }), data.state === 'error' && data.onRetry ? (_jsxs("button", { "data-testid": "feature-drawer-retry-button", onClick: () => data.onRetry(data.featureId), className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), "Retry"] })) : null, (data.state === 'running' || data.state === 'action-required') && data.onStop ? (_jsxs("button", { "data-testid": "feature-drawer-stop-button", onClick: () => data.onStop(data.featureId), className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100", children: [_jsx(Square, { className: "h-3.5 w-3.5" }), "Stop"] })) : null] }), !isCompleted && data.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [data.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[data.state].progressClass), style: { width: `${data.progress}%` } }) })] })) : null, isCompleted && data.pr ? (_jsx(FeaturePrInfo, { pr: data.pr, hideCiStatus: data.hideCiStatus })) : null] }), _jsx(FeatureInfo, { data: data }), !isCompleted && data.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { className: "p-4", children: _jsx(FeaturePrInfo, { pr: data.pr, hideCiStatus: data.hideCiStatus }) })] })) : null, _jsx(FeatureDetails, { data: data }), onRebaseOnMain && data.branch && onRefreshSync ? (_jsx(BranchSyncStatus, { syncStatus: syncStatus ?? null, syncLoading: syncLoading ?? false, syncError: syncError ?? null, onRefreshSync: onRefreshSync, onRebaseOnMain: onRebaseOnMain, rebaseLoading: rebaseLoading ?? false, rebaseError: rebaseError ?? null })) : null, _jsx(FeatureSettings, { data: data })] }));
+// ── Primitives ──────────────────────────────────────────────────────
+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 FeatureStateBadge({ data }) {
-    const config = featureNodeStateConfig[data.state];
-    const Icon = config.icon;
-    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
+function Card({ children, className }) {
+    return (_jsx("div", { className: cn('bg-muted/60 rounded-md border border-transparent p-3', className), children: children }));
 }
-// ── Feature Info section ─────────────────────────────────────────────
+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 Flag({ on, label }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium', on
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'bg-foreground/[0.04] text-foreground/25'), children: [on ? _jsx(Check, { className: "size-3" }) : _jsx(X, { className: "size-3" }), label] }));
+}
+// ── Helpers ──────────────────────────────────────────────────────────
 function formatRelativeTime(timestamp) {
     const now = Date.now();
     const time = typeof timestamp === 'string' ? new Date(timestamp).getTime() : timestamp;
     const diffMs = now - time;
-    const diffSec = Math.floor(diffMs / 1000);
-    const diffMin = Math.floor(diffSec / 60);
+    const diffMin = Math.floor(diffMs / 60000);
     const diffHr = Math.floor(diffMin / 60);
     const diffDay = Math.floor(diffHr / 24);
-    if (diffDay > 30) {
+    if (diffDay > 30)
         return new Date(time).toLocaleDateString(undefined, {
             year: 'numeric',
             month: 'short',
             day: 'numeric',
         });
-    }
     if (diffDay > 0)
-        return `${diffDay} day${diffDay === 1 ? '' : 's'} ago`;
+        return `${diffDay}d ago`;
     if (diffHr > 0)
-        return `${diffHr} hour${diffHr === 1 ? '' : 's'} ago`;
+        return `${diffHr}h ago`;
     if (diffMin > 0)
-        return `${diffMin} minute${diffMin === 1 ? '' : 's'} ago`;
+        return `${diffMin}m ago`;
     return 'just now';
 }
-function FeatureInfo({ data }) {
-    const { t } = useTranslation('web');
-    const showSummary = Boolean(data.summary) && !(data.userQuery && data.summary?.trim() === data.userQuery.trim());
-    const hasInfo = Boolean(data.branch) ||
-        Boolean(data.oneLiner) ||
-        showSummary ||
-        Boolean(data.userQuery) ||
-        Boolean(data.createdAt);
-    if (!hasInfo)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-info", className: "flex flex-col gap-3 p-4", children: [data.branch ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Branch" }), _jsxs("span", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: data.branch }), data.baseBranch ? (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["from ", data.baseBranch] })) : null] })] })) : null, data.oneLiner ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "One-Liner" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.oneLiner })] })) : null, data.userQuery ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "User Query" }), _jsx(InlineAttachments, { text: data.userQuery })] })) : null, showSummary ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Summary" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.summary })] })) : null, data.createdAt ? (_jsx(DetailRow, { label: t('overviewTab.created'), value: formatRelativeTime(data.createdAt) })) : null] })] }));
-}
-// ── PR Info section ──────────────────────────────────────────────────
-const prStatusStyles = {
-    [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
-    [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
-    [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
-};
-function FeaturePrInfo({ pr, hideCiStatus, }) {
-    return (_jsx("div", { "data-testid": "feature-drawer-pr", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus && hideCiStatus !== true ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.mergeable === false ? (_jsxs("div", { "data-testid": "pr-merge-conflict", className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Merge Status" }), _jsxs(Badge, { className: "border-transparent bg-orange-50 text-orange-700 hover:bg-orange-50", children: [_jsx(AlertTriangle, { className: "me-1 h-3.5 w-3.5" }), "Conflicts"] })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
-}
-// ── Details section ──────────────────────────────────────────────────
-/** Hook that returns a live-updating elapsed time string for running features. */
 function useElapsedTime(startedAt) {
     const [elapsed, setElapsed] = useState(null);
     const intervalRef = useRef(null);
@@ -79,62 +58,58 @@ function useElapsedTime(startedAt) {
             setElapsed(null);
             return;
         }
-        // Compute immediately
         setElapsed(formatDuration(Math.max(0, Date.now() - startedAt)));
-        // Tick every second
         intervalRef.current = setInterval(() => {
             setElapsed(formatDuration(Math.max(0, Date.now() - startedAt)));
         }, 1000);
         return () => {
-            if (intervalRef.current) {
+            if (intervalRef.current)
                 clearInterval(intervalRef.current);
-                intervalRef.current = null;
-            }
         };
     }, [startedAt]);
     return elapsed;
 }
-function FeatureDetails({ data }) {
-    const { t } = useTranslation('web');
+const prColor = {
+    [PrStatus.Open]: 'text-blue-600 dark:text-blue-400',
+    [PrStatus.Merged]: 'text-purple-600 dark:text-purple-400',
+    [PrStatus.Closed]: 'text-red-600 dark:text-red-400',
+};
+export function OverviewTab({ data, syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, }) {
+    const isCompleted = data.lifecycle === 'maintain';
     const isRunning = data.state === 'running' || data.state === 'action-required';
     const elapsedTime = useElapsedTime(isRunning ? data.startedAt : undefined);
-    const hasAnyDetail = data.fastMode ??
-        data.agentType ??
-        data.runtime ??
-        elapsedTime ??
-        data.blockedBy ??
-        data.errorMessage;
-    if (!hasAnyDetail)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.fastMode ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Mode" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Zap, { className: "h-4 w-4 shrink-0 text-amber-500" }), "Fast Mode"] })] })) : null, data.agentType ? _jsx(AgentDetailRow, { agentType: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: t('overviewTab.runtime'), value: data.runtime }) : null, !data.runtime && elapsedTime ? (_jsx(DetailRow, { label: t('overviewTab.runningFor'), value: elapsedTime })) : null, data.blockedBy ? (_jsx(DetailRow, { label: t('overviewTab.blockedBy'), value: data.blockedBy })) : null, data.errorMessage ? (_jsx(DetailRow, { label: t('overviewTab.error'), value: data.errorMessage })) : null] })] }));
-}
-function AgentDetailRow({ agentType }) {
-    const Icon = getAgentTypeIcon(agentType);
-    const label = agentTypeLabels[agentType] ?? agentType;
-    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Agent" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), label] })] }));
-}
-// ── Settings section ─────────────────────────────────────────────────
-function SettingBadge({ enabled, label }) {
-    return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', enabled ? 'bg-emerald-50 text-emerald-700' : 'bg-muted text-muted-foreground'), children: [enabled ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(X, { className: "h-3 w-3" }), label] }));
+    const config = featureNodeStateConfig[data.state];
+    const showSummary = Boolean(data.summary) && !(data.userQuery && data.summary?.trim() === data.userQuery.trim());
+    return (_jsxs("div", { "data-testid": "feature-drawer-status", className: "pb-4", children: [!isCompleted && data.progress > 0 ? (_jsx("div", { "data-testid": "feature-drawer-progress", className: "px-3 pb-2", children: _jsx("div", { className: "bg-foreground/[0.06] h-1.5 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) }) })) : null, data.oneLiner || data.userQuery || showSummary ? (_jsx(Section, { icon: Info, title: "Description", children: _jsxs(Card, { className: "flex flex-col gap-2", children: [data.oneLiner ? _jsx(KV, { label: "One-Liner", children: data.oneLiner }) : null, data.userQuery ? (_jsx(KV, { label: "Query", children: _jsx(InlineAttachments, { text: data.userQuery }) })) : null, showSummary ? (_jsx(KV, { label: "Summary", children: _jsx("span", { className: "leading-snug", children: data.summary }) })) : null] }) })) : null, data.pr ? (_jsx(Section, { icon: GitCommitHorizontal, title: "Pull Request", children: _jsx(Card, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("a", { href: data.pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary inline-flex items-center gap-1 text-sm font-semibold hover:underline", children: ["#", data.pr.number, " ", _jsx(ExternalLink, { className: "size-3" })] }), _jsx("span", { className: cn('text-xs font-semibold', prColor[data.pr.status]), children: data.pr.status }), data.pr.mergeable === false ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-orange-600 dark:text-orange-400", children: [_jsx(AlertTriangle, { className: "size-3 shrink-0" }), " Conflicts"] })) : null, data.pr.ciStatus && data.hideCiStatus !== true ? (_jsx(CiStatusBadge, { status: data.pr.ciStatus })) : null, data.pr.commitHash ? (_jsx("code", { className: "text-foreground/40 ml-auto font-mono text-[11px]", children: data.pr.commitHash.slice(0, 7) })) : null] }) }) })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-2 px-3 pb-1", children: [data.branch ? (_jsx(Card, { children: _jsxs(KV, { label: "Branch", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(GitBranch, { className: "text-foreground/30 size-3 shrink-0" }), _jsx("code", { className: "font-mono text-[11px]", children: data.branch })] }), data.baseBranch ? (_jsxs("span", { className: "text-foreground/30 block text-[10px]", children: ["from ", data.baseBranch] })) : null] }) })) : null, data.agentType || data.modelId ? (_jsx(Card, { children: _jsx(KV, { label: "Agent", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [data.agentType
+                                        ? (() => {
+                                            const I = getAgentTypeIcon(data.agentType);
+                                            return _jsx(I, { className: "size-3.5 shrink-0 opacity-50" });
+                                        })()
+                                        : null, data.agentType ? (_jsx("span", { children: agentTypeLabels[data.agentType] ??
+                                            data.agentType })) : null, data.agentType && data.modelId ? (_jsx("span", { className: "text-foreground/20", children: "/" })) : null, data.modelId ? (_jsx("span", { className: "text-foreground/50 text-[12px]", children: getModelMeta(data.modelId).displayName || data.modelId })) : null] }) }) })) : null, data.createdAt ? (_jsx(Card, { children: _jsx(KV, { label: "Created", children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Clock, { className: "text-foreground/30 size-3 shrink-0" }), formatRelativeTime(data.createdAt)] }) }) })) : null, data.fastMode ? (_jsx(Card, { children: _jsx(KV, { label: "Mode", children: _jsxs("span", { className: "inline-flex items-center gap-1 text-amber-600 dark:text-amber-400", children: [_jsx(Zap, { className: "size-3.5" }), " Fast"] }) }) })) : null, data.runtime || elapsedTime ? (_jsx(Card, { children: _jsx(KV, { label: data.runtime ? 'Runtime' : 'Elapsed', children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Clock, { className: "text-foreground/30 size-3 shrink-0" }), data.runtime ?? elapsedTime] }) }) })) : null] }), data.blockedBy || data.errorMessage ? (_jsx(Section, { icon: AlertTriangle, title: "Issues", children: _jsxs(Card, { className: "border-destructive/20 bg-destructive/5", children: [data.blockedBy ? _jsx(KV, { label: "Blocked By", children: data.blockedBy }) : null, data.errorMessage ? (_jsx(KV, { label: "Error", children: _jsx("span", { className: "text-destructive", children: data.errorMessage }) })) : null] }) })) : null, onRebaseOnMain && data.branch && onRefreshSync ? (_jsx(Section, { icon: RefreshCw, title: "Branch Sync", children: _jsx(SyncCard, { syncStatus: syncStatus ?? null, syncLoading: syncLoading ?? false, syncError: syncError ?? null, onRefreshSync: onRefreshSync, onRebaseOnMain: onRebaseOnMain, rebaseLoading: rebaseLoading ?? false, rebaseError: rebaseError ?? null }) })) : null, _jsx(SettingsBlock, { data: data })] }));
 }
-function FeatureSettings({ data }) {
+// ── Sync card ───────────────────────────────────────────────────────
+function SyncCard({ syncStatus, syncLoading, syncError, onRefreshSync, onRebaseOnMain, rebaseLoading, rebaseError, }) {
     const { t } = useTranslation('web');
-    const hasSettings = data.approvalGates != null ||
+    const isBehind = syncStatus != null && syncStatus.behind > 0;
+    const isUpToDate = syncStatus?.behind === 0;
+    const base = syncStatus?.baseBranch ?? 'main';
+    return (_jsxs(Card, { children: [_jsxs("div", { "data-testid": "branch-sync-status", className: "flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-1.5 text-[13px]", children: syncLoading && !syncStatus ? (_jsxs(_Fragment, { children: [_jsx(CometSpinner, { size: "sm" }), _jsx("span", { className: "text-foreground/40", children: "Checking..." })] })) : syncError ? (_jsxs(_Fragment, { children: [_jsx(AlertTriangle, { className: "size-3.5 text-red-500" }), _jsx("span", { className: "text-destructive text-xs", children: syncError })] })) : rebaseLoading ? (_jsxs(_Fragment, { children: [_jsx(CometSpinner, { size: "sm" }), _jsxs("span", { children: ["Rebasing on ", _jsx("code", { className: "font-mono text-[11px]", children: base }), "..."] })] })) : isBehind ? (_jsxs(_Fragment, { children: [_jsx(AlertTriangle, { className: "size-3.5 text-orange-500" }), _jsxs("span", { children: [syncStatus.behind, " behind ", _jsx("code", { className: "font-mono text-[11px]", children: base }), syncStatus.ahead > 0 ? (_jsxs("span", { className: "text-foreground/30 ml-1 text-[11px]", children: ["\u00B7 ", syncStatus.ahead, " ahead"] })) : null] })] })) : isUpToDate ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "size-3.5 text-green-500" }), _jsxs("span", { children: ["Up to date \u00B7 ", _jsx("code", { className: "font-mono text-[11px]", children: base }), syncStatus.ahead > 0 ? (_jsxs("span", { className: "text-foreground/30 ml-1 text-[11px]", children: ["\u00B7 ", syncStatus.ahead, " ahead"] })) : null] })] })) : null }), (syncStatus || syncError) && !rebaseLoading ? (_jsx("button", { onClick: onRefreshSync, disabled: syncLoading, className: "text-foreground/30 hover:text-foreground/60 hover:bg-foreground/5 inline-flex size-6 items-center justify-center rounded-sm disabled:opacity-50", "aria-label": t('branchSyncStatus.refreshSyncStatus'), children: _jsx(RefreshCw, { className: cn('size-3', syncLoading && 'animate-spin') }) })) : null] }), isBehind && !rebaseLoading ? (_jsx("div", { className: "pt-2", children: _jsx(ActionButton, { label: t('branchSyncStatus.rebaseOnMain'), onClick: onRebaseOnMain, loading: false, error: !!rebaseError, icon: GitMerge, variant: "outline", size: "sm" }) })) : null, rebaseError ? _jsx("p", { className: "text-destructive pt-1 text-[11px]", children: rebaseError }) : null] }));
+}
+// ── Settings ────────────────────────────────────────────────────────
+function SettingsBlock({ data }) {
+    const has = data.approvalGates != null ||
         data.push != null ||
         data.openPr != null ||
         data.ciWatchEnabled != null ||
         data.enableEvidence != null ||
         data.forkAndPr != null ||
-        data.commitSpecs != null ||
-        data.modelId;
-    if (!hasSettings)
+        data.commitSpecs != null;
+    if (!has)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-settings", className: "flex flex-col gap-3 p-4", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "SETTINGS" }), data.modelId ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Model" }), _jsx("span", { className: "text-sm", children: getModelMeta(data.modelId).displayName || data.modelId })] })) : null, data.approvalGates ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(ShieldCheck, { className: "h-3 w-3" }), "Auto-Approve"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.approvalGates.allowPrd, label: t('overviewTab.prd') }), _jsx(SettingBadge, { enabled: data.approvalGates.allowPlan, label: t('overviewTab.plan') }), _jsx(SettingBadge, { enabled: data.approvalGates.allowMerge, label: t('overviewTab.merge') })] })] })) : null, data.enableEvidence != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(FileSearch, { className: "h-3 w-3" }), "Evidence"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.enableEvidence, label: t('overviewTab.collect') }), data.commitEvidence != null ? (_jsx(SettingBadge, { enabled: data.commitEvidence, label: t('overviewTab.addToPr') })) : null] })] })) : null, data.push != null ||
-                        data.openPr != null ||
-                        data.ciWatchEnabled != null ||
-                        data.commitSpecs != null ||
-                        data.forkAndPr != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(GitBranch, { className: "h-3 w-3" }), "Git"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [data.push != null ? (_jsx(SettingBadge, { enabled: data.push, label: t('overviewTab.push') })) : null, data.openPr != null ? (_jsx(SettingBadge, { enabled: data.openPr, label: t('overviewTab.pr') })) : null, data.ciWatchEnabled != null ? (_jsx(SettingBadge, { enabled: data.ciWatchEnabled, label: t('overviewTab.watch') })) : null, data.commitSpecs != null ? (_jsx(SettingBadge, { enabled: data.commitSpecs, label: t('overviewTab.commitSpecs') })) : null, data.forkAndPr != null ? (_jsx(SettingBadge, { enabled: data.forkAndPr, label: t('overviewTab.forkAndPr') })) : null] })] })) : null] })] }));
-}
-function DetailRow({ label, value }) {
-    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
+    return (_jsx(Section, { icon: Settings, title: "Settings", children: _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [data.approvalGates ? (_jsxs(Card, { children: [_jsxs("div", { className: "text-foreground/40 mb-1.5 flex items-center gap-1 text-[10px] font-medium tracking-wider uppercase", children: [_jsx(ShieldCheck, { className: "size-3" }), " Approve"] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Flag, { on: data.approvalGates.allowPrd, label: "PRD" }), _jsx(Flag, { on: data.approvalGates.allowPlan, label: "Plan" }), _jsx(Flag, { on: data.approvalGates.allowMerge, label: "Merge" })] })] })) : null, data.enableEvidence != null ? (_jsxs(Card, { children: [_jsxs("div", { className: "text-foreground/40 mb-1.5 flex items-center gap-1 text-[10px] font-medium tracking-wider uppercase", children: [_jsx(FileSearch, { className: "size-3" }), " Evidence"] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Flag, { on: data.enableEvidence, label: "Collect" }), data.commitEvidence != null ? (_jsx(Flag, { on: data.commitEvidence, label: "Add to PR" })) : null] })] })) : null, data.push != null ||
+                    data.openPr != null ||
+                    data.ciWatchEnabled != null ||
+                    data.commitSpecs != null ||
+                    data.forkAndPr != null ? (_jsxs(Card, { children: [_jsxs("div", { className: "text-foreground/40 mb-1.5 flex items-center gap-1 text-[10px] font-medium tracking-wider uppercase", children: [_jsx(GitBranch, { className: "size-3" }), " Git"] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [data.push != null ? _jsx(Flag, { on: data.push, label: "Push" }) : null, data.openPr != null ? _jsx(Flag, { on: data.openPr, label: "PR" }) : null, data.ciWatchEnabled != null ? _jsx(Flag, { on: data.ciWatchEnabled, label: "Watch" }) : null, data.commitSpecs != null ? _jsx(Flag, { on: data.commitSpecs, label: "Specs" }) : null, data.forkAndPr != null ? _jsx(Flag, { on: data.forkAndPr, label: "Fork" }) : null] })] })) : null] }) }));
 }

package/dist/src/presentation/web/components/common/open-action-menu/open-action-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-action-menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/open-action-menu/open-action-menu.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,YAAY,EACZ,SAAS,GACV,EAAE,mBAAmB,2CAqGrB"}
+{"version":3,"file":"open-action-menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/open-action-menu/open-action-menu.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAqBpD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,YAAY,EACZ,SAAS,GACV,EAAE,mBAAmB,2CAmGrB"}

package/dist/src/presentation/web/components/common/open-action-menu/open-action-menu.js

@@ -1,10 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Code2, Terminal, FolderOpen, ChevronDown, Copy, Check, Loader2, CircleAlert, } from 'lucide-react';
-import { Button } from '../../ui/button.js';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../ui/dropdown-menu.js';
+import { Code2, Terminal, FolderOpen, FileText, Copy, Check, Loader2, CircleAlert, } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.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';
+function TbIcon({ loading, error, icon: Icon, }) {
+    if (loading)
+        return _jsx(Loader2, { className: "size-3.5 animate-spin" });
+    if (error)
+        return _jsx(CircleAlert, { className: "text-destructive size-3.5" });
+    return _jsx(Icon, { className: "size-4" });
+}
 export function OpenActionMenu({ actions, repositoryPath, worktreePath, showSpecs, }) {
     const [copied, setCopied] = useState(false);
     const handleCopyPath = () => {
@@ -12,7 +19,5 @@ export function OpenActionMenu({ actions, repositoryPath, worktreePath, showSpec
         setCopied(true);
         setTimeout(() => setCopied(false), COPY_FEEDBACK_DELAY);
     };
-    const anyLoading = actions.ideLoading || actions.shellLoading || actions.folderLoading || actions.specsLoading;
-    const anyError = actions.ideError ?? actions.shellError ?? actions.folderError ?? actions.specsError;
-    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", disabled: anyLoading, children: [anyLoading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : anyError ? (_jsx(CircleAlert, { className: "text-destructive size-4" })) : (_jsx(FolderOpen, { className: "size-4" })), "Open", _jsx(ChevronDown, { className: "size-3 opacity-60" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-48", children: [_jsx(DropdownMenuLabel, { children: "Open in" }), _jsxs(DropdownMenuItem, { onClick: actions.openInIde, disabled: actions.ideLoading, className: "gap-2", children: [actions.ideLoading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : actions.ideError ? (_jsx(CircleAlert, { className: "text-destructive size-4" })) : (_jsx(Code2, { className: "size-4" })), "IDE"] }), _jsxs(DropdownMenuItem, { onClick: actions.openInShell, disabled: actions.shellLoading, className: "gap-2", children: [actions.shellLoading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : actions.shellError ? (_jsx(CircleAlert, { className: "text-destructive size-4" })) : (_jsx(Terminal, { className: "size-4" })), "Terminal"] }), _jsxs(DropdownMenuItem, { onClick: actions.openFolder, disabled: actions.folderLoading, className: "gap-2", children: [actions.folderLoading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : actions.folderError ? (_jsx(CircleAlert, { className: "text-destructive size-4" })) : (_jsx(FolderOpen, { className: "size-4" })), "Folder"] }), _jsxs(DropdownMenuItem, { onClick: actions.openSpecsFolder, disabled: actions.specsLoading || !showSpecs, className: "gap-2", children: [actions.specsLoading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : actions.specsError ? (_jsx(CircleAlert, { className: "text-destructive size-4" })) : (_jsx(FolderOpen, { className: "size-4" })), "Specs Folder"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleCopyPath, className: "gap-2", children: [copied ? _jsx(Check, { className: "size-4 text-green-600" }) : _jsx(Copy, { className: "size-4" }), copied ? 'Copied!' : 'Copy path'] })] })] }));
+    return (_jsx(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: actions.openInIde, disabled: actions.ideLoading, "aria-label": "Open in IDE", children: _jsx(TbIcon, { loading: actions.ideLoading, error: actions.ideError, icon: Code2 }) }) }), _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: actions.openInShell, disabled: actions.shellLoading, "aria-label": "Open terminal", children: _jsx(TbIcon, { loading: actions.shellLoading, error: actions.shellError, icon: Terminal }) }) }), _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: actions.openFolder, disabled: actions.folderLoading, "aria-label": "Open folder", children: _jsx(TbIcon, { loading: actions.folderLoading, error: actions.folderError, icon: FolderOpen }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Open folder" })] }), showSpecs ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: actions.openSpecsFolder, disabled: actions.specsLoading, "aria-label": "Open specs", children: _jsx(TbIcon, { loading: actions.specsLoading, error: actions.specsError, icon: FileText }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: "Open specs" })] })) : null, _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: tbBtn, onClick: handleCopyPath, "aria-label": "Copy path", children: copied ? _jsx(Check, { className: "size-3.5 text-green-500" }) : _jsx(Copy, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: copied ? 'Copied!' : 'Copy path' })] })] }) }));
 }

package/dist/src/presentation/web/components/common/repository-node/repository-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AASnE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAwcA"}
+{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AASnE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CA2cA"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CA6OjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAqQjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import { Home, Moon, Sun, Volume2, VolumeOff, Wrench, Puzzle, Settings } from 'lucide-react';
+import { Home, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Settings, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
@@ -12,6 +12,7 @@ import { ShepLogo } from '../../common/shep-logo/index.js';
 import { VersionBadge } from '../../common/version-badge/index.js';
 import { FeatureListItem } from '../../common/feature-list-item/index.js';
 import { useSoundEnabled } from '../../../hooks/use-sound-enabled.js';
+import { useAnimationsEnabled } from '../../../hooks/use-animations-enabled.js';
 import { useTheme } from '../../../hooks/useTheme.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { FeatureStatusGroup } from '../../common/feature-status-group/index.js';
@@ -29,6 +30,7 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
     const { mounted: showExpanded, visible: expandedVisible } = useDeferredMount(collapsed, 200);
     const versionData = useVersion();
     const { enabled: soundEnabled, toggle: toggleSound } = useSoundEnabled();
+    const { enabled: animationsEnabled, toggle: toggleAnimations } = useAnimationsEnabled();
     const { resolvedTheme, theme, setTheme } = useTheme();
     const toggleOnSound = useSoundAction('toggle-on');
     const toggleOffSound = useSoundAction('toggle-off');
@@ -100,5 +102,8 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                                                     : t('sidebar.switchToDark') })] }), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
                                                         clickSound.play();
                                                         toggleSound();
-                                                    }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
+                                                    }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] })), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
+                                                        clickSound.play();
+                                                        toggleAnimations();
+                                                    }, "aria-label": animationsEnabled ? 'Disable animations' : 'Enable animations', children: animationsEnabled ? (_jsx(Zap, { className: "h-4 w-4" })) : (_jsx(ZapOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: animationsEnabled ? 'Disable animations' : 'Enable animations' })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
 }

package/dist/src/presentation/web/hooks/use-animations-enabled.d.ts

@@ -0,0 +1,6 @@
+export interface UseAnimationsEnabledResult {
+    enabled: boolean;
+    toggle: () => void;
+}
+export declare function useAnimationsEnabled(): UseAnimationsEnabledResult;
+//# sourceMappingURL=use-animations-enabled.d.ts.map

package/dist/src/presentation/web/hooks/use-animations-enabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-animations-enabled.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-animations-enabled.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,oBAAoB,IAAI,0BAA0B,CA4BjE"}

package/dist/src/presentation/web/hooks/use-animations-enabled.js

@@ -0,0 +1,30 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+const STORAGE_KEY = 'shep-animations-enabled';
+const SYNC_EVENT = 'shep:animations-toggle';
+const BODY_CLASS = 'no-animations';
+export function useAnimationsEnabled() {
+    const [enabled, setEnabled] = useState(true);
+    useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'false') {
+            setEnabled(false);
+            document.body.classList.add(BODY_CLASS);
+        }
+        const onSync = (e) => {
+            const next = e.detail;
+            setEnabled(next);
+            document.body.classList.toggle(BODY_CLASS, !next);
+        };
+        window.addEventListener(SYNC_EVENT, onSync);
+        return () => window.removeEventListener(SYNC_EVENT, onSync);
+    }, []);
+    const toggle = useCallback(() => {
+        const next = !enabled;
+        localStorage.setItem(STORAGE_KEY, String(next));
+        setEnabled(next);
+        document.body.classList.toggle(BODY_CLASS, !next);
+        window.dispatchEvent(new CustomEvent(SYNC_EVENT, { detail: next }));
+    }, [enabled]);
+    return { enabled, toggle };
+}