@shepai/cli 1.163.0 → 1.164.0-pr514.db33061

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/features/chat/ChatTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAgGhE"}
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAwGhE"}

package/dist/src/presentation/web/components/features/chat/ChatTab.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssistantRuntimeProvider } from '@assistant-ui/react';
-import { Trash2, Square, Cpu } from 'lucide-react';
+import { Trash2, Cpu } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Thread } from '../../assistant-ui/thread.js';
 import { useAttachments } from '../../../hooks/use-attachments.js';
@@ -11,12 +11,20 @@ import { composeUserInput } from '../../../app/actions/compose-user-input.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
 import { useChatRuntime } from './useChatRuntime.js';
 import { ChatComposer } from './ChatComposer.js';
+const IS_DEV = process.env.NODE_ENV === 'development';
 export function ChatTab({ featureId, worktreePath }) {
     const [overrideAgent, setOverrideAgent] = useState(undefined);
     const [overrideModel, setOverrideModel] = useState(undefined);
+    const [debugMode, setDebugMode] = useState(false);
     const att = useAttachments();
     const contentTransform = useCallback((content) => composeUserInput(content, att.completedAttachments.map((a) => ({ path: a.path, name: a.name, notes: a.notes }))), [att.completedAttachments]);
-    const { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, { contentTransform, onMessageSent: att.clearAttachments });
+    const { runtime, status, clearChat, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, {
+        contentTransform,
+        onMessageSent: att.clearAttachments,
+        model: overrideModel,
+        agentType: overrideAgent,
+        debugMode,
+    });
     const handlePickFiles = useCallback(async () => {
         try {
             const res = await fetch('/api/dialog/pick-files');
@@ -46,18 +54,16 @@ export function ChatTab({ featureId, worktreePath }) {
                 setOverrideAgent(agent);
                 setOverrideModel(model);
             }, className: "w-55" }) }));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, onStop: stopAgent }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer }) })) })] }));
 }
 // ── Loading skeleton ────────────────────────────────────────────────────────
 function ChatSkeleton() {
     return (_jsxs("div", { className: "flex flex-1 flex-col gap-3 p-4 pt-6", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-48 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-72 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-36 animate-pulse rounded-lg" })] })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsx("div", { className: "bg-muted h-4 w-32 animate-pulse rounded-lg" })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-56 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-64 animate-pulse rounded-lg" })] })] })] }));
 }
 // ── Chat header — compact session info + actions ─────────────────────────────
-function ChatHeader({ sessionInfo, isAgentActive, onClear, onStop, }) {
+function ChatHeader({ sessionInfo, isAgentActive, onClear, debugMode, onDebugToggle, }) {
     const { t } = useTranslation('web');
-    return (_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b px-3", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: sessionInfo ? (_jsxs(_Fragment, { children: [isAgentActive ? (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-emerald-500" })) : (_jsx(Cpu, { className: "text-muted-foreground/40 h-3 w-3 shrink-0" })), _jsxs("span", { className: "text-muted-foreground font-mono text-[10px]", children: [sessionInfo.model ?? 'agent', sessionInfo.sessionId ? ` · ${sessionInfo.sessionId.slice(0, 8)}` : ''] })] })) : (_jsx("span", { className: "text-muted-foreground/40 text-[11px]", children: t('chat.noSession') })) }), _jsxs("div", { className: "flex items-center gap-1 ps-2", children: [sessionInfo ? (_jsxs(_Fragment, { children: [_jsxs(ToolbarButton, { onClick: () => {
-                                    void onStop();
-                                }, title: t('chat.forceStopAgent'), variant: "danger", children: [_jsx(Square, { className: "h-2.5 w-2.5 fill-current" }), _jsx("span", { children: t('chat.stop') })] }), _jsx("span", { className: "text-border mx-0.5", children: "|" })] })) : null, _jsxs(ToolbarButton, { onClick: () => {
+    return (_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b px-3", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: sessionInfo ? (_jsxs(_Fragment, { children: [isAgentActive ? (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-emerald-500" })) : (_jsx(Cpu, { className: "text-muted-foreground/40 h-3 w-3 shrink-0" })), _jsxs("span", { className: "text-muted-foreground font-mono text-[10px]", children: [sessionInfo.model ?? 'agent', sessionInfo.sessionId ? ` · ${sessionInfo.sessionId.slice(0, 8)}` : ''] })] })) : (_jsx("span", { className: "text-muted-foreground/40 text-[11px]", children: t('chat.noSession') })) }), _jsxs("div", { className: "flex items-center gap-1 ps-2", children: [onDebugToggle ? (_jsxs("label", { className: "text-muted-foreground/60 flex cursor-pointer items-center gap-1 text-[10px]", children: [_jsx("input", { type: "checkbox", checked: debugMode, onChange: (e) => onDebugToggle(e.target.checked), className: "h-3 w-3 cursor-pointer rounded" }), "Debug"] })) : null, _jsxs(ToolbarButton, { onClick: () => {
                             void onClear();
                         }, title: t('chat.clearChatHistory'), children: [_jsx(Trash2, { className: "h-2.5 w-2.5" }), _jsx("span", { children: t('chat.clear') })] })] })] }));
 }

package/dist/src/presentation/web/components/features/chat/useChatRuntime.d.ts

@@ -5,6 +5,9 @@ interface SessionInfo {
     startedAt: string;
     idleTimeoutMinutes: number;
     lastActivityAt: string;
+    totalCostUsd: number | null;
+    totalInputTokens: number | null;
+    totalOutputTokens: number | null;
 }
 export interface ChatStatus {
     /** Whether the agent is actively working (booting, thinking, streaming). */
@@ -17,6 +20,19 @@ export interface ChatRuntimeOptions {
     contentTransform?: (content: string) => string;
     /** Called after a message is successfully sent (e.g. clear attachments). */
     onMessageSent?: () => void;
+    /** Override model for new sessions (e.g. 'claude-sonnet-4-6'). */
+    model?: string;
+    /** Override agent type for new sessions (e.g. 'claude-code'). */
+    agentType?: string;
+    /** When true, inject debug bubbles showing SSE events, session info, etc. */
+    debugMode?: boolean;
+}
+/** A debug event captured from SSE for display in debug mode. */
+export interface DebugEvent {
+    id: string;
+    timestamp: Date;
+    label: string;
+    detail?: string;
 }
 /**
  * `featureId` is a polymorphic scope key: a feature UUID, "repo-<id>", or "global".

package/dist/src/presentation/web/components/features/chat/useChatRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AAkBA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;CACxB;AAgDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;EAiQ7B"}
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AAkBA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAkDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;EAgW7B"}

package/dist/src/presentation/web/components/features/chat/useChatRuntime.js

@@ -13,11 +13,11 @@ async function fetchChatState(featureId) {
     }
     return res.json();
 }
-async function postMessage(featureId, content, worktreePath) {
+async function postMessage(featureId, content, worktreePath, model, agentType) {
     const res = await fetch(`/api/interactive/chat/${featureId}/messages`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content, worktreePath }),
+        body: JSON.stringify({ content, worktreePath, model, agentType }),
     });
     if (!res.ok)
         throw new Error(`Failed to send message: ${res.status}`);
@@ -43,6 +43,24 @@ function chatQueryKey(featureId) {
  */
 export function useChatRuntime(featureId, worktreePath, options) {
     const queryClient = useQueryClient();
+    // Keep a ref to the latest model/agent so the mutation closure always
+    // reads the current value without depending on stale captures.
+    const modelRef = useRef(options?.model);
+    const agentTypeRef = useRef(options?.agentType);
+    modelRef.current = options?.model;
+    agentTypeRef.current = options?.agentType;
+    // ── Debug events (dev mode only) ────────────────────────────────────────
+    const debugModeRef = useRef(options?.debugMode ?? false);
+    debugModeRef.current = options?.debugMode ?? false;
+    const [debugEvents, setDebugEvents] = useState([]);
+    const pushDebug = useCallback((label, detail) => {
+        if (!debugModeRef.current)
+            return;
+        setDebugEvents((prev) => [
+            ...prev,
+            { id: `dbg-${Date.now()}-${Math.random()}`, timestamp: new Date(), label, detail },
+        ]);
+    }, []);
     // ── TanStack Query: fetch messages from backend ─────────────────────────
     const { data: chatState, isLoading: isChatLoading } = useQuery({
         queryKey: chatQueryKey(featureId),
@@ -57,6 +75,18 @@ export function useChatRuntime(featureId, worktreePath, options) {
     }, [chatState?.turnStatus, featureId]);
     const messages = useMemo(() => chatState?.messages ?? [], [chatState?.messages]);
     const sessionStatus = chatState?.sessionStatus ?? null;
+    // Track session status changes for debug
+    const prevSessionStatusRef = useRef(null);
+    useEffect(() => {
+        if (sessionStatus && sessionStatus !== prevSessionStatusRef.current) {
+            const info = chatState?.sessionInfo;
+            const detail = info
+                ? `model=${info.model ?? '?'}, sid=${info.sessionId?.slice(0, 8) ?? '?'}`
+                : undefined;
+            pushDebug(`session_${sessionStatus}`, detail);
+        }
+        prevSessionStatusRef.current = sessionStatus;
+    }, [sessionStatus, chatState?.sessionInfo, pushDebug]);
     const backendStreamingText = chatState?.streamingText ?? null;
     // Cache last known sessionInfo so PID stays visible after process exits
     const lastSessionInfoRef = useRef(null);
@@ -106,8 +136,17 @@ export function useChatRuntime(featureId, worktreePath, options) {
                 // Ignore
             }
         });
-        es.addEventListener('activity', () => {
+        es.addEventListener('activity', (event) => {
             cancelAwaiting();
+            try {
+                const data = JSON.parse(event.data);
+                if (data.activity) {
+                    pushDebug(`[${data.activity.kind}] ${data.activity.label}`, data.activity.detail);
+                }
+            }
+            catch {
+                // Ignore
+            }
             // Tool events are already persisted to DB — just refetch to show them
             void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
         });
@@ -117,6 +156,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
                 if (data.log) {
                     cancelAwaiting();
                     setStatusLog(data.log);
+                    pushDebug('log', data.log);
                 }
             }
             catch {
@@ -126,6 +166,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
         es.addEventListener('done', () => {
             setStatusLog(null);
             cancelAwaiting();
+            pushDebug('turn_done');
             // Refetch first, THEN clear local streaming state so there's no gap
             void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) }).then(() => {
                 setStreamingText('');
@@ -138,11 +179,12 @@ export function useChatRuntime(featureId, worktreePath, options) {
             es.close();
             eventSourceRef.current = null;
         };
-    }, [featureId, queryClient, cancelAwaiting]);
+    }, [featureId, queryClient, cancelAwaiting, pushDebug]);
     // ── Mutation: send user message ─────────────────────────────────────────
     const sendMutation = useMutation({
-        mutationFn: (content) => postMessage(featureId, content, worktreePath ?? ''),
+        mutationFn: (content) => postMessage(featureId, content, worktreePath ?? '', modelRef.current, agentTypeRef.current),
         onMutate: async (content) => {
+            pushDebug('send_message', `model=${modelRef.current ?? 'default'}, agent=${agentTypeRef.current ?? 'default'}, len=${content.length}`);
             startAwaiting();
             // Cancel in-flight refetches so our optimistic update isn't overwritten
             await queryClient.cancelQueries({ queryKey: chatQueryKey(featureId) });
@@ -184,7 +226,47 @@ export function useChatRuntime(featureId, worktreePath, options) {
     // ── Build thread messages for assistant-ui ─────────────────────────────
     const activeStreamText = streamingText ?? backendStreamingText ?? '';
     const threadMessages = useMemo(() => {
-        const result = messages.map(toThreadMessage);
+        const chatMessages = messages.map(toThreadMessage);
+        // Merge debug bubbles into the timeline by timestamp
+        let result;
+        if (options?.debugMode && debugEvents.length > 0) {
+            const debugMessages = debugEvents.map((evt) => ({
+                id: evt.id,
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: evt.detail ? `🔧 **${evt.label}** — ${evt.detail}` : `🔧 **${evt.label}**`,
+                    },
+                ],
+                createdAt: evt.timestamp,
+            }));
+            // Merge both arrays (both already sorted by time) into one sorted list
+            result = [];
+            let ci = 0;
+            let di = 0;
+            while (ci < chatMessages.length && di < debugMessages.length) {
+                const chatTime = chatMessages[ci].createdAt
+                    ? new Date(chatMessages[ci].createdAt).getTime()
+                    : 0;
+                const dbgTime = debugMessages[di].createdAt
+                    ? new Date(debugMessages[di].createdAt).getTime()
+                    : 0;
+                if (chatTime <= dbgTime) {
+                    result.push(chatMessages[ci++]);
+                }
+                else {
+                    result.push(debugMessages[di++]);
+                }
+            }
+            while (ci < chatMessages.length)
+                result.push(chatMessages[ci++]);
+            while (di < debugMessages.length)
+                result.push(debugMessages[di++]);
+        }
+        else {
+            result = chatMessages;
+        }
         // Streaming text as the last message — may include a live activity suffix
         if (activeStreamText.trim()) {
             const parts = [{ type: 'text', text: activeStreamText }];
@@ -217,7 +299,15 @@ export function useChatRuntime(featureId, worktreePath, options) {
             });
         }
         return result;
-    }, [messages, activeStreamText, awaitingResponse, sessionStatus, statusLog]);
+    }, [
+        messages,
+        activeStreamText,
+        awaitingResponse,
+        sessionStatus,
+        statusLog,
+        options?.debugMode,
+        debugEvents,
+    ]);
     // ── Status info for typing indicator ──────────────────────────────────
     const status = useMemo(() => {
         if (!isRunning)
@@ -242,6 +332,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
         if (!res.ok)
             throw new Error(`Failed to clear chat: ${res.status}`);
         setStreamingText('');
+        setDebugEvents([]);
         setStatusLog(null);
         cancelAwaiting();
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/AgentModelPicker/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE,qBAAqB,2CAoNvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/AgentModelPicker/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE,qBAAqB,2CAqNvB"}

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/index.js

@@ -84,7 +84,7 @@ export function AgentModelPicker({ initialAgentType, initialModel, onAgentModelC
     const agentLabel = groups.find((g) => g.agentType === agentType)?.label ?? agentType;
     const modelName = model ? getModelMeta(model).displayName || model : null;
     const activeGroup = drillAgent ? groups.find((g) => g.agentType === drillAgent) : null;
-    return (_jsxs("div", { className: cn('flex flex-col gap-1', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", role: "combobox", "aria-expanded": open, disabled: isDisabled, className: "w-auto cursor-pointer justify-start font-normal hover:border-violet-300 hover:bg-violet-50/50 dark:hover:border-violet-700 dark:hover:bg-violet-950/30", children: _jsxs("span", { className: "flex items-center gap-2 truncate", children: [_jsx(AgentIcon, { className: "h-4 w-4 shrink-0" }), loading ? ('Loading…') : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: agentLabel }), modelName ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50 text-xs", children: "\u00B7" }), _jsx("span", { className: "text-xs font-medium", children: modelName })] })) : null] }))] }) }) }), _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", align: "start", children: _jsxs("div", { className: "flex transition-transform duration-200 ease-in-out", style: { transform: `translateX(${level === 1 ? '-50%' : '0%'})`, width: '200%' }, children: [_jsxs("div", { className: "w-1/2 shrink-0", children: [_jsx("div", { className: "text-muted-foreground border-b px-3 py-2 text-xs font-medium", children: "Select agent" }), groups.map((group) => {
+    return (_jsxs("div", { className: cn('flex flex-col gap-1', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, disabled: isDisabled, className: "w-auto cursor-pointer justify-start font-normal hover:border-violet-300 hover:bg-violet-50/50 dark:hover:border-violet-700 dark:hover:bg-violet-950/30", children: _jsxs("span", { className: "flex items-center gap-2 truncate", children: [_jsx(AgentIcon, { className: "h-4 w-4 shrink-0" }), loading ? ('Loading…') : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: agentLabel }), modelName ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/50 text-xs", children: "\u00B7" }), _jsx("span", { className: "text-xs font-medium", children: modelName })] })) : null] }))] }) }) }), _jsx(PopoverContent, { className: "z-[70] w-(--radix-popover-trigger-width) overflow-hidden p-0", align: "start", children: _jsxs("div", { className: "flex transition-transform duration-200 ease-in-out", style: { transform: `translateX(${level === 1 ? '-50%' : '0%'})`, width: '200%' }, children: [_jsxs("div", { className: "w-1/2 shrink-0", children: [_jsx("div", { className: "text-muted-foreground border-b px-3 py-2 text-xs font-medium", children: "Select agent" }), groups.map((group) => {
                                             const GroupIcon = getAgentTypeIcon(group.agentType);
                                             const isActive = agentType === group.agentType;
                                             const hasModels = group.models.length > 0;

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