@shepai/cli 1.122.2-pr392.a8f2b76 → 1.122.2-pr394.daae4c9

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

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { Loader2, AlertCircle, Clock, Zap, DollarSign, Play, RotateCcw, CheckCircle2, XCircle, Square, Ban, MessageSquare, Timer, ArrowDownToLine, ArrowUpFromLine, } from 'lucide-react';
+import { Loader2, AlertCircle, Clock, Zap, DollarSign } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { formatDuration } from '../../../lib/format-duration.js';
 /**
@@ -51,13 +51,6 @@ function formatTokens(count) {
         return `${(count / 1_000).toFixed(1)}K`;
     return String(count);
 }
-/** Format a timestamp to a short local time string (e.g. "10:05:30 AM"). */
-function formatTimestamp(value) {
-    const d = value instanceof Date ? value : new Date(String(value));
-    if (Number.isNaN(d.getTime()))
-        return '';
-    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-}
 /** Format a USD cost with appropriate precision. */
 function formatCost(usd) {
     if (usd >= 1)
@@ -75,48 +68,13 @@ const NODE_TO_PHASE = {
     merge: 'Merging',
 };
 const LIFECYCLE_EVENTS = {
-    'run:started': {
-        label: 'started',
-        colorClass: 'text-blue-600',
-        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
-        icon: Play,
-    },
-    'run:resumed': {
-        label: 'resumed',
-        colorClass: 'text-blue-600',
-        bgClass: 'bg-blue-50 dark:bg-blue-950/30',
-        icon: RotateCcw,
-    },
-    'run:completed': {
-        label: 'completed',
-        colorClass: 'text-emerald-600',
-        bgClass: 'bg-emerald-50 dark:bg-emerald-950/30',
-        icon: CheckCircle2,
-    },
-    'run:failed': {
-        label: 'failed',
-        colorClass: 'text-red-600',
-        bgClass: 'bg-red-50 dark:bg-red-950/30',
-        icon: XCircle,
-    },
-    'run:stopped': {
-        label: 'stopped',
-        colorClass: 'text-amber-600',
-        bgClass: 'bg-amber-50 dark:bg-amber-950/30',
-        icon: Square,
-    },
-    'run:crashed': {
-        label: 'crashed',
-        colorClass: 'text-red-600',
-        bgClass: 'bg-red-50 dark:bg-red-950/30',
-        icon: XCircle,
-    },
-    'run:rejected': {
-        label: 'rejected',
-        colorClass: 'text-orange-600',
-        bgClass: 'bg-orange-50 dark:bg-orange-950/30',
-        icon: Ban,
-    },
+    'run:started': { label: 'started', colorClass: 'text-blue-600' },
+    'run:resumed': { label: 'resumed', colorClass: 'text-blue-600' },
+    'run:completed': { label: 'completed', colorClass: 'text-emerald-600' },
+    'run:failed': { label: 'failed', colorClass: 'text-red-600' },
+    'run:stopped': { label: 'stopped', colorClass: 'text-amber-600' },
+    'run:crashed': { label: 'crashed', colorClass: 'text-red-600' },
+    'run:rejected': { label: 'rejected', colorClass: 'text-orange-600' },
 };
 function isLifecycleEvent(phase) {
     return phase.startsWith('run:');
@@ -188,26 +146,6 @@ export function buildLifecycleTimeline(timings, feedback) {
     }
     return iterations;
 }
-/** Determine the outcome status of an iteration */
-function getIterationOutcome(iteration) {
-    const lastLifecycle = [...iteration.timings].reverse().find((t) => isLifecycleEvent(t.phase));
-    if (!lastLifecycle)
-        return null;
-    switch (lastLifecycle.phase) {
-        case 'run:rejected':
-            return { label: 'Rejected', colorClass: 'text-orange-600', dotClass: 'bg-orange-500' };
-        case 'run:completed':
-            return { label: 'Completed', colorClass: 'text-emerald-600', dotClass: 'bg-emerald-500' };
-        case 'run:failed':
-            return { label: 'Failed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
-        case 'run:crashed':
-            return { label: 'Crashed', colorClass: 'text-red-600', dotClass: 'bg-red-500' };
-        case 'run:stopped':
-            return { label: 'Stopped', colorClass: 'text-amber-600', dotClass: 'bg-amber-500' };
-        default:
-            return null;
-    }
-}
 /* ---------------------------------------------------------------------------
  * Component
  * ------------------------------------------------------------------------- */
@@ -217,10 +155,10 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
         return (_jsx("div", { "data-testid": "activity-tab-loading", className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
     }
     if (error) {
-        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-base text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
+        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
     }
     if (!timings || timings.length === 0) {
-        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-base", children: "No activity recorded yet" })] }));
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No activity recorded yet" })] }));
     }
     const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
     const maxDurationMs = Math.max(...nodeTimings.map((t) => getEffectiveDuration(t, now)), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
@@ -231,70 +169,44 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
     const totalInputTokens = nodeTimings.reduce((sum, t) => sum + (t.inputTokens ?? 0), 0);
     const totalOutputTokens = nodeTimings.reduce((sum, t) => sum + (t.outputTokens ?? 0), 0);
     const totalCostUsd = nodeTimings.reduce((sum, t) => sum + (t.costUsd ?? 0), 0);
-    return (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens, totalCostUsd: totalCostUsd })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs, totalInputTokens: totalInputTokens, totalOutputTokens: totalOutputTokens, totalCostUsd: totalCostUsd })) : null] }));
 }
 /* ---------------------------------------------------------------------------
  * Iteration group — one cycle of work
  * ------------------------------------------------------------------------- */
 function IterationGroup({ iteration, showHeader, maxDurationMs, now, }) {
-    const outcome = getIterationOutcome(iteration);
-    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "border-border/50 bg-card/50 flex flex-col overflow-hidden rounded-lg border", children: [showHeader ? (_jsxs("div", { className: "bg-muted/30 border-border/50 flex items-center justify-between border-b px-3 py-1.5", children: [_jsxs("span", { className: "text-muted-foreground text-sm font-semibold tracking-wide", children: ["Iteration ", iteration.number] }), outcome ? (_jsxs("span", { className: `flex items-center gap-1 text-xs font-medium ${outcome.colorClass}`, children: [_jsx("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${outcome.dotClass}` }), outcome.label] })) : null] })) : null, _jsxs("div", { className: "relative flex flex-col", children: [_jsx("div", { className: "bg-border/60 absolute top-4 bottom-4 left-[21.5px] w-px" }), iteration.timings.map((t, idx) => {
-                        if (isLifecycleEvent(t.phase)) {
-                            const isRejection = t.phase === 'run:rejected';
-                            const isFailure = t.phase === 'run:failed' || t.phase === 'run:crashed' || t.phase === 'run:stopped';
-                            // For failures, find the last phase with an error message in this iteration
-                            let message;
-                            if (isRejection) {
-                                message = iteration.rejectionMessage;
-                            }
-                            else if (isFailure) {
-                                const lastErrorPhase = [...iteration.timings]
-                                    .reverse()
-                                    .find((p) => !isLifecycleEvent(p.phase) && p.errorMessage);
-                                message = lastErrorPhase?.errorMessage ?? t.errorMessage;
-                            }
-                            return (_jsx(LifecycleEventRow, { timing: t, message: message, attachments: isRejection ? iteration.rejectionAttachments : undefined, isFirst: idx === 0, isLast: idx === iteration.timings.length - 1 }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-                        }
-                        return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
-                    })] })] }));
+    return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "flex flex-col gap-1.5", children: [showHeader ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Iteration ", iteration.number] })) : null, iteration.timings.map((t) => {
+                if (isLifecycleEvent(t.phase)) {
+                    // For run:rejected, the message comes from the iteration, not a separate map
+                    const isRejection = t.phase === 'run:rejected';
+                    return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                }
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+            })] }));
 }
 /* ---------------------------------------------------------------------------
  * Row components
  * ------------------------------------------------------------------------- */
-function LifecycleEventRow({ timing, message, attachments, isFirst, isLast, }) {
+function LifecycleEventRow({ timing, message, attachments, }) {
     const event = LIFECYCLE_EVENTS[timing.phase];
     if (!event)
         return null;
     const hasAttachments = attachments && attachments.length > 0;
-    const Icon = event.icon;
-    return (_jsxs("div", { className: `relative flex flex-col gap-1 px-3 ${isFirst ? 'pt-2' : 'pt-1'} ${isLast ? 'pb-2' : 'pb-1'}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `relative z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${event.bgClass}`, children: _jsx(Icon, { className: `h-3 w-3 ${event.colorClass}` }) }), _jsx("span", { className: `text-sm font-medium ${event.colorClass}`, children: event.label }), timing.startedAt &&
-                        !(typeof timing.startedAt === 'string' && timing.startedAt.startsWith('synthetic')) ? (_jsx("span", { className: "text-muted-foreground/60 ml-auto text-xs tabular-nums", children: formatTimestamp(String(timing.startedAt)) })) : null] }), message
-                ? (() => {
-                    const isError = timing.phase === 'run:failed' ||
-                        timing.phase === 'run:crashed' ||
-                        timing.phase === 'run:stopped';
-                    return (_jsxs("div", { className: `ml-[26px] flex items-start gap-1.5 rounded-md px-2 py-1.5 ${isError
-                            ? 'bg-red-50/50 dark:bg-red-950/20'
-                            : 'bg-orange-50/50 dark:bg-orange-950/20'}`, children: [isError ? (_jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-red-400" })) : (_jsx(MessageSquare, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-orange-400" })), _jsxs("span", { "data-testid": isError ? 'error-message-text' : 'rejection-feedback-text', className: "text-muted-foreground text-xs leading-relaxed italic", children: ["\u2014 ", message] })] }));
-                })()
-                : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "ml-[26px]", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
+    return (_jsxs("div", { className: `text-xs ${event.colorClass}`, children: [_jsx("span", { children: event.label }), message ? (_jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground ml-2 font-normal italic", children: ["\u2014 ", message] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "mt-1.5 ml-2", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
 }
 function NodeTimingRow({ timing, maxDurationMs, now, }) {
-    const base = timing.phase.includes(':') ? timing.phase.split(':')[0] : timing.phase;
     const suffix = timing.phase.includes(':') ? timing.phase.split(':')[1] : null;
     const isSubPhase = suffix !== null;
+    // Distinguish implementation sub-phases (phase-1, phase-2) from rejection retries (2, 3)
     const isImplPhase = suffix?.startsWith('phase-') ?? false;
-    const baseName = NODE_TO_PHASE[base] ?? base;
     const label = isImplPhase
         ? `Phase ${suffix.replace('phase-', '')}`
         : suffix !== null
-            ? `${baseName} #${suffix}`
-            : baseName;
+            ? `retry #${suffix}`
+            : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
     const durationMs = getEffectiveDuration(timing, now);
+    const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
     const isRunning = !timing.completedAt && !!timing.startedAt;
-    // Running phases get a minimum 15% bar so they're always visually prominent
-    const minPercent = isRunning ? 15 : 2;
-    const barPercent = maxDurationMs > 0 ? Math.max(minPercent, (durationMs / maxDurationMs) * 100) : minPercent;
     const barColorClass = timing.completedAt
         ? isImplPhase
             ? 'bg-emerald-400'
@@ -305,28 +217,17 @@ function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const totalTokens = timing.inputTokens != null || timing.outputTokens != null
         ? (timing.inputTokens ?? 0) + (timing.outputTokens ?? 0)
         : null;
-    return (_jsxs("div", { className: `relative flex flex-col gap-0.5 px-3 py-1.5 ${isSubPhase ? 'ml-4' : ''}`, children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("div", { className: "relative z-10 flex h-5 w-5 shrink-0 items-center justify-center", children: _jsx("div", { className: `rounded-full ${isRunning ? 'h-3 w-3 animate-pulse' : 'h-2.5 w-2.5'} ${isRunning
-                                ? 'bg-blue-500'
-                                : timing.completedAt
-                                    ? 'bg-emerald-500'
-                                    : 'bg-muted-foreground/30'}` }) }), _jsx("span", { className: `w-28 shrink-0 truncate text-sm font-medium ${isSubPhase ? 'text-muted-foreground' : 'text-foreground/80'}`, children: label }), _jsx("div", { className: `bg-muted relative min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-1.5' : 'h-2'}`, children: isRunning ? (_jsx("div", { className: "absolute inset-0 rounded-full bg-blue-500/30", style: {
-                                backgroundImage: 'linear-gradient(90deg, transparent 0%, rgb(59 130 246) 50%, transparent 100%)',
-                                backgroundSize: '200% 100%',
-                                animation: 'shimmer 1.5s ease-in-out infinite',
-                            } })) : (_jsx("div", { className: `h-full rounded-full transition-all duration-300 ${barColorClass}`, style: { width: `${Math.min(barPercent, 100)}%` } })) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-sm font-medium tabular-nums", children: formatDuration(durationMs) })] }), _jsxs("div", { className: "ml-[28px] flex items-center gap-3 text-xs", children: [timing.startedAt ? (_jsx("span", { className: "text-muted-foreground/60 tabular-nums", children: formatTimestamp(timing.startedAt) })) : null, totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-3 w-3 opacity-50" }), formatTokens(totalTokens)] })) : null, timing.costUsd != null && timing.costUsd > 0 ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5", children: [_jsx(DollarSign, { className: "h-3 w-3 opacity-50" }), formatCost(timing.costUsd)] })) : null] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
+    return (_jsxs("div", { className: isSubPhase ? 'flex flex-col gap-1 pl-6' : 'flex flex-col gap-1', children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-2", children: [_jsx("span", { className: `text-muted-foreground shrink-0 text-xs ${isSubPhase ? 'w-18' : 'w-24'}`, children: label }), _jsx("div", { className: `bg-muted min-w-0 flex-1 overflow-hidden rounded-full ${isSubPhase ? 'h-2.5' : 'h-3'}`, children: _jsx("div", { className: `h-full rounded-full ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(durationMs) }), _jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-right text-[10px] tabular-nums", children: totalTokens != null && totalTokens > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(Zap, { className: "h-2 w-2 opacity-50" }), formatTokens(totalTokens)] })) : null }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-[10px] tabular-nums", children: timing.costUsd != null && timing.costUsd > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx(DollarSign, { className: "h-2 w-2 opacity-50" }), formatCost(timing.costUsd)] })) : null })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
 }
 function ApprovalWaitRow({ timing, maxDurationMs, }) {
     const waitMs = timing.approvalWaitMs ?? 0;
     const barPercent = maxDurationMs > 0 ? Math.max(2, (waitMs / maxDurationMs) * 100) : 2;
-    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "ml-[26px] flex items-center gap-2 rounded-md bg-amber-50/50 px-1.5 py-1 dark:bg-amber-950/20", children: [_jsx(Timer, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }), _jsx("span", { className: "text-muted-foreground w-16 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) })] }));
+    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "flex items-center gap-2 pl-4", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-2.5 min-w-0 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-10 shrink-0 text-right text-xs tabular-nums", children: formatDuration(waitMs) }), _jsx("span", { className: "w-12 shrink-0" }), _jsx("span", { className: "w-14 shrink-0" })] }));
 }
 function SummaryTotals({ totalExecMs, totalWaitMs, totalInputTokens, totalOutputTokens, totalCostUsd, }) {
     const totalTokens = totalInputTokens + totalOutputTokens;
-    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border bg-card/30 flex flex-col gap-2 rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase", children: "Summary" }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-3", children: [_jsx(SummaryCell, { icon: Clock, label: "Execution", value: formatDuration(totalExecMs) }), _jsx(SummaryCell, { icon: Timer, label: "Wait", value: totalWaitMs > 0 ? formatDuration(totalWaitMs) : 'n/a' }), _jsx(SummaryCell, { icon: Clock, label: "Wall-clock", value: totalWaitMs > 0
-                            ? formatDuration(totalExecMs + totalWaitMs)
-                            : formatDuration(totalExecMs) }), _jsx(SummaryCell, { icon: DollarSign, label: "Cost", value: totalCostUsd > 0 ? formatCost(totalCostUsd) : 'n/a' }), _jsxs("div", { className: "col-span-2 flex flex-col gap-0.5", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [_jsx(Zap, { className: "h-3 w-3 opacity-40" }), "Tokens"] }), totalTokens > 0 ? (_jsxs("span", { className: "flex items-center gap-2.5 text-sm tabular-nums", children: [_jsx("span", { children: formatTokens(totalTokens) }), _jsxs("span", { className: "text-muted-foreground flex items-center gap-3 text-xs", title: "Input tokens / Output tokens", children: [_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(ArrowDownToLine, { className: "h-3 w-3 text-blue-500 opacity-60" }), formatTokens(totalInputTokens)] }), _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(ArrowUpFromLine, { className: "h-3 w-3 text-emerald-500 opacity-60" }), formatTokens(totalOutputTokens)] })] })] })) : (_jsx("span", { className: "text-muted-foreground/40 text-sm italic tabular-nums", children: "n/a" }))] })] })] }));
+    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border flex flex-col gap-1.5 border-t pt-3", children: [_jsx(SummaryRow, { label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryRow, { label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryRow, { label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs) })] })) : null, totalTokens > 0 ? (_jsx(SummaryRow, { label: "Total tokens", value: `${formatTokens(totalTokens)} (${formatTokens(totalInputTokens)} in · ${formatTokens(totalOutputTokens)} out)` })) : null, totalCostUsd > 0 ? _jsx(SummaryRow, { label: "Total cost", value: formatCost(totalCostUsd) }) : null] }));
 }
-function SummaryCell({ icon: Icon, label, value, className = '', }) {
-    const isNA = value === 'n/a';
-    return (_jsxs("div", { className: `flex flex-col gap-0.5 ${className}`, children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [_jsx(Icon, { className: "h-3 w-3 opacity-40" }), label] }), _jsx("span", { className: `text-sm tabular-nums ${isNA ? 'text-muted-foreground/40 italic' : ''}`, children: value })] }));
+function SummaryRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-xs font-medium", children: value })] }));
 }

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":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAS9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AA8C3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,2CA8UxB"}
+{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAS9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AA8C3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,2CAiUxB"}

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

@@ -220,19 +220,6 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
             refreshTab(current);
         }
     }, [sseEvents, featureId, refreshTab]);
-    // Poll activity data while the feature is actively running.
-    // SSE events only fire on state transitions (phase completed, lifecycle changed),
-    // so during a long-running phase there are no events and the data goes stale.
-    // Poll every 5s when the feature is in a working state to keep data fresh.
-    const isFeatureActive = featureNode.state === 'running' || featureNode.state === 'creating';
-    useEffect(() => {
-        if (!isFeatureActive)
-            return;
-        const interval = setInterval(() => {
-            refreshTab('activity');
-        }, 5000);
-        return () => clearInterval(interval);
-    }, [isFeatureActive, refreshTab]);
     const handleTabChange = useCallback((value) => {
         const tab = value;
         isUserInteraction.current = true;

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

@@ -1 +1 @@
-{"version":3,"file":"use-tab-data-fetch.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/use-tab-data-fetch.ts"],"names":[],"mappings":"AAIA,yDAAyD;AACzD,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,OAAO;IACnC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,iEAAiE;AACjE,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;AAExE,kDAAkD;AAClD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElE,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM;IACrD,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,iDAAiD;IACjD,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAMD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,qBAAqB,CAAC,CAAC,CAAC,CA2G1B"}
+{"version":3,"file":"use-tab-data-fetch.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/use-tab-data-fetch.ts"],"names":[],"mappings":"AAIA,yDAAyD;AACzD,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,OAAO;IACnC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,iEAAiE;AACjE,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;AAExE,kDAAkD;AAClD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElE,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM;IACrD,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,iDAAiD;IACjD,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAMD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,qBAAqB,CAAC,CAAC,CAAC,CAmG1B"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/use-tab-data-fetch.js

@@ -54,16 +54,11 @@ export function useTabDataFetch(featureId, fetchers) {
         const currentFeatureId = featureIdRef.current;
         if (!fetcher)
             return;
-        // Only show loading spinner when there's no existing data.
-        // On refresh (data already present), keep showing stale data while fetching
-        // to avoid flickering the entire tab on every poll cycle.
         if (mountedRef.current) {
-            setTabStates((prev) => {
-                const hasData = prev[tab]?.data !== null;
-                if (hasData)
-                    return prev; // Keep stale data visible — no loading flash
-                return { ...prev, [tab]: { ...prev[tab], loading: true, error: null } };
-            });
+            setTabStates((prev) => ({
+                ...prev,
+                [tab]: { ...prev[tab], loading: true, error: null },
+            }));
         }
         try {
             const data = await fetcher(currentFeatureId);
@@ -76,15 +71,11 @@ export function useTabDataFetch(featureId, fetchers) {
         }
         catch (error) {
             if (mountedRef.current) {
-                setTabStates((prev) => {
-                    const message = error instanceof Error ? error.message : 'Failed to fetch tab data';
-                    // On refresh failure, keep existing data instead of clearing it
-                    const existingData = prev[tab]?.data ?? null;
-                    return {
-                        ...prev,
-                        [tab]: { data: existingData, loading: false, error: existingData ? null : message },
-                    };
-                });
+                const message = error instanceof Error ? error.message : 'Failed to fetch tab data';
+                setTabStates((prev) => ({
+                    ...prev,
+                    [tab]: { data: null, loading: false, error: message },
+                }));
             }
         }
     }, []);

package/dist/src/presentation/web/components/features/control-center/control-center-empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDA8J9B"}
+{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDA+I9B"}

package/dist/src/presentation/web/components/features/control-center/control-center-empty-state.js

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from 'react';
-import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, } from 'lucide-react';
+import { Github, Plus, TerminalSquare, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
@@ -13,12 +13,12 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [loading, setLoading] = useState(false);
     const [agentReady, setAgentReady] = useState(null);
     const [authStatus, setAuthStatus] = useState(null);
-    const [cliExpanded, setCliExpanded] = useState(false);
     useEffect(() => {
         isAgentSetupComplete().then((done) => {
             setAgentReady(done);
         });
     }, []);
+    // Background auth check — runs after agent setup is complete
     useEffect(() => {
         if (!agentReady)
             return;
@@ -52,28 +52,28 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     }, []);
     if (agentReady === null)
         return null;
-    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative flex h-full w-full flex-col items-center justify-center px-8', className), children: [!agentReady ? (
-            /* Agent setup wizard — owns its own hero */
-            _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete })) : (
-            /* Repository step — fade in to match wizard transitions */
-            _jsxs("div", { className: "animate-in fade-in flex w-full max-w-md flex-col items-center duration-300", children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: "Add a project" }), _jsxs("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: ["Add your project folder to unlock feature creation.", _jsx("br", {}), "Describe what you need \u2014 Shep handles the rest."] }), _jsx("div", { className: "mt-8", children: _jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }) }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "bg-foreground text-background hover:bg-foreground/90 mt-10 flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl px-6 py-4 text-base font-medium shadow-lg transition-all duration-200 hover:shadow-xl active:scale-[0.98] disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(FolderOpen, { className: "h-5 w-5" })), loading ? 'Opening…' : 'Choose a Folder'] }), _jsx("p", { className: "text-muted-foreground/60 mt-3 text-center text-sm", children: "Any folder works \u2014 git will be initialized automatically if needed." })] })), agentReady ? (_jsxs("div", { className: "absolute bottom-8 flex flex-col items-center", style: {
-                    animationDelay: '400ms',
-                    animationDuration: '600ms',
-                    animationFillMode: 'both',
-                }, children: [_jsxs("button", { type: "button", onClick: () => setCliExpanded(!cliExpanded), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 transition-colors duration-200", children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-sm", children: "or use the CLI" }), _jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform duration-200', cliExpanded ? '' : 'rotate-180') })] }), cliExpanded ? (_jsx("div", { className: "animate-in fade-in slide-in-from-top-1 mt-3 w-80 duration-200", children: _jsxs("div", { "data-testid": "cli-code-block", className: "relative rounded-xl bg-zinc-900 px-5 py-4 font-mono text-[13px] leading-relaxed text-zinc-400", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded-md p-1.5 text-zinc-600 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-600 select-none", children: "$ " }), _jsx("span", { className: "text-zinc-300", children: cmd })] }, cmd))) })] }) })) : null] })) : null] }));
+    return (_jsx("div", { "data-testid": "control-center-empty-state", className: cn('flex flex-col items-center justify-center', className), children: _jsx("div", { className: "animate-in fade-in slide-in-from-bottom-2 w-96 rounded-2xl border border-white/30 bg-white/50 px-8 py-8 shadow-lg backdrop-blur-xl duration-300 dark:border-white/10 dark:bg-white/5", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsxs("div", { className: "mb-2 text-center", children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: "Features" }), _jsx("p", { className: "text-muted-foreground text-sm font-light", children: "Control Center" })] }), !agentReady ? (
+                    /* Step 1: Agent setup */
+                    _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete, className: "w-full" })) : (
+                    /* Step 2: Add repository (shown immediately after agent is configured) */
+                    _jsxs(_Fragment, { children: [_jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Github, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Repositories" })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 transition-colors disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "text-muted-foreground h-4 w-4" })), _jsx("span", { className: "text-xs font-medium", children: loading ? 'Opening…' : 'Add Repository' })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx("div", { className: "bg-border h-px w-10" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TerminalSquare, { className: "h-3 w-3" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Or via CLI" })] }), _jsx("div", { className: "bg-border h-px w-10" })] }), _jsxs("div", { "data-testid": "cli-code-block", className: "relative w-full rounded-md bg-zinc-900 px-3 py-2 font-mono text-[11px] text-zinc-300", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-2 right-2 cursor-pointer rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(Copy, { className: "h-3 w-3" }) }), _jsx("div", { className: "space-y-0.5", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), _jsx("span", { children: cmd })] }, cmd))) })] }), _jsx("p", { className: "text-muted-foreground text-[10px]", children: "Feature will appear on canvas once created" })] }))] }) }) }));
 }
-/** Inline status pill — minimal, no background box */
+/** Compact auth status banner — shows checking/success/error states */
 function AgentAuthBanner({ status, onRetry, }) {
+    // Still checking — show subtle spinner
     if (!status) {
-        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "text-muted-foreground/50 h-3.5 w-3.5 animate-spin" }), _jsx("span", { className: "text-muted-foreground/50 text-sm", children: "Checking setup\u2026" })] }));
+        return (_jsxs("div", { className: "bg-muted/50 flex w-full items-center gap-2 rounded-md px-3 py-1.5", children: [_jsx(Loader2, { className: "text-muted-foreground h-3 w-3 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: "Checking agent setup\u2026" })] }));
     }
+    // All good — compact success, auto-fades
     if (status.installed && status.authenticated) {
-        return (_jsxs("div", { className: "animate-in fade-in flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), _jsxs("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: [status.label, " ready"] })] }));
+        return (_jsxs("div", { className: "animate-in fade-in flex w-full items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-1.5", children: [_jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" }), _jsxs("span", { className: "text-[10px] text-emerald-700 dark:text-emerald-300", children: [status.label, " ready"] })] }));
     }
+    // Not installed
     if (!status.installed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), _jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " not installed"] })] }), status.binaryName ? (_jsxs("code", { className: "rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400", children: ["npm install -g ", status.binaryName] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] }));
+        return (_jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md bg-amber-500/10 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-3 w-3 text-amber-600 dark:text-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium text-amber-700 dark:text-amber-300", children: [status.label, " not installed"] })] }), status.binaryName ? (_jsxs("div", { className: "rounded bg-zinc-900 px-2 py-1 font-mono text-[10px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), "npm install -g ", status.binaryName] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "self-start text-[10px] font-medium text-amber-700 underline underline-offset-2 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100", children: "Re-check" })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), _jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " needs authentication"] })] }), status.authCommand ? (_jsx("code", { className: "rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400", children: status.authCommand })) : null, _jsxs("div", { className: "flex items-center gap-3", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
+    // Installed but not authenticated
+    return (_jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md bg-amber-500/10 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-3 w-3 text-amber-600 dark:text-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium text-amber-700 dark:text-amber-300", children: [status.label, " needs authentication"] })] }), status.authCommand ? (_jsxs("div", { className: "rounded bg-zinc-900 px-2 py-1 font-mono text-[10px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), status.authCommand] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
                             try {
                                 const toolId = status.agentType === 'claude-code' ? 'claude-code' : status.agentType;
                                 await fetch(`/api/tools/${toolId}/launch`, { method: 'POST' });
@@ -81,5 +81,5 @@ function AgentAuthBanner({ status, onRetry, }) {
                             catch {
                                 // best effort
                             }
-                        }, className: "flex items-center gap-1.5 text-xs font-medium text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: [_jsx(Terminal, { className: "h-3 w-3" }), "Open ", status.label] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] })] }));
+                        }, className: "flex items-center gap-1 rounded border border-amber-600/30 px-2 py-0.5 text-[10px] font-medium text-amber-700 transition-colors hover:bg-amber-500/10 dark:text-amber-300", children: [_jsx(Terminal, { className: "h-2.5 w-2.5" }), "Open ", status.label] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-[10px] font-medium text-amber-700 underline underline-offset-2 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100", children: "Re-check" })] })] }));
 }

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAkWzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA2UzF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -27,8 +27,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const drawerTimerRef = useRef(null);
     const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
-    // Publish sidebar features + repo state to context
-    const { setFeatures: setSidebarFeatures, setHasRepositories: setSidebarHasRepos } = useSidebarFeaturesContext();
+    // Publish sidebar features to context whenever feature node data changes
+    const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
     const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
     const sidebarKey = useMemo(() => {
         return featureNodes
@@ -119,29 +119,21 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             guardedNavigate(() => router.push('/'));
         }
     }, [router, pathname, guardedNavigate]);
-    // Shared: after adding first repo, center canvas and open create drawer
-    const focusAndOpenDrawer = useCallback((repoPath) => {
-        // Wait for next render so the repo node exists in the DOM
-        setTimeout(() => {
-            fitView(AUTO_FOCUS_OPTIONS);
-            // Open the create-feature drawer after the fitView animation completes
-            drawerTimerRef.current = setTimeout(() => {
-                guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
-            }, AUTO_FOCUS_DRAWER_DELAY_MS);
-        }, 0);
-    }, [fitView, guardedNavigate, router]);
-    // Wrapper: add repo + auto-focus if canvas was empty
-    const addRepoAndFocus = useCallback((path) => {
-        const { wasEmpty, repoPath } = handleAddRepository(path);
-        if (wasEmpty) {
-            focusAndOpenDrawer(repoPath);
-        }
-    }, [handleAddRepository, focusAndOpenDrawer]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {
             const path = e.detail.path;
-            addRepoAndFocus(path);
+            const { wasEmpty, repoPath } = handleAddRepository(path);
+            if (wasEmpty) {
+                // Wait for next render so the repo node exists in the DOM, then auto-focus
+                setTimeout(() => {
+                    fitView(AUTO_FOCUS_OPTIONS);
+                    // Open the create-feature drawer after the fitView animation completes
+                    drawerTimerRef.current = setTimeout(() => {
+                        guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
+                    }, AUTO_FOCUS_DRAWER_DELAY_MS);
+                }, 0);
+            }
         };
         window.addEventListener('shep:add-repository', handler);
         return () => {
@@ -150,7 +142,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 clearTimeout(drawerTimerRef.current);
             }
         };
-    }, [addRepoAndFocus]);
+    }, [handleAddRepository, fitView, guardedNavigate, router]);
     // Listen for create events from the create drawer (with real feature ID from server)
     useEffect(() => {
         const handler = (e) => {
@@ -220,10 +212,6 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleViewportChange(viewport);
     }, [handleViewportChange]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
-    // Publish repo state to sidebar context so AppShell can hide FAB during onboarding
-    useEffect(() => {
-        setSidebarHasRepos(hasRepositories);
-    }, [hasRepositories, setSidebarHasRepos]);
     // Debounced latch: prevent empty-state flicker during brief reconcile gaps
     // (e.g. stale poll momentarily drops repos), but allow the empty state to
     // return after a real delete once repos stay gone past the debounce window.
@@ -239,9 +227,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             setShowCanvas(true);
         }
         else if (showCanvas) {
-            // Repos gone — clear saved viewport so next add starts centered,
-            // then wait before showing empty state (debounce stale polls)
-            resetViewport();
+            // Repos gone — wait before showing empty state (debounce stale polls)
             latchTimerRef.current = setTimeout(() => {
                 setShowCanvas(false);
                 latchTimerRef.current = null;
@@ -251,7 +237,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             if (latchTimerRef.current)
                 clearTimeout(latchTimerRef.current);
         };
-    }, [hasRepositories, showCanvas, resetViewport]);
+    }, [hasRepositories, showCanvas]);
     // Pulse the "+" button when there's a single repo with no features and the
     // create-feature drawer is not open — draws attention to the next action.
     const isCreateDrawerOpen = pathname.startsWith('/create');
@@ -263,5 +249,5 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             return nodes;
         return nodes.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
     }, [nodes, isCreateDrawerOpen]);
-    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }));
+    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
 }

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcome-agent-setup.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CA4NlF"}
+{"version":3,"file":"welcome-agent-setup.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAuNlF"}