@shepai/cli 1.164.0 → 1.164.1-pr516.5c85bb4

package/dist/packages/core/src/infrastructure/services/interactive/interactive-session.service.js

@@ -44,6 +44,14 @@ export class InteractiveSessionService {
     sessions = new Map();
     /** Cached agentSessionIds from stopped sessions, keyed by featureId. */
     stoppedAgentSessionIds = new Map();
+    /**
+     * Feature-level subscribers that survive session restarts.
+     *
+     * Unlike session-level subscribers (in SessionState.subscribers), these
+     * persist when a session dies and a new one boots. SSE connections
+     * subscribe here so they continue receiving events from new sessions.
+     */
+    featureSubscribers = new Map();
     constructor(sessionRepo, messageRepo, executorFactory, featureRepo, contextBuilder) {
         this.sessionRepo = sessionRepo;
         this.messageRepo = messageRepo;
@@ -181,9 +189,10 @@ export class InteractiveSessionService {
             // Create the interactive executor and session
             const executor = this.executorFactory.createInteractiveExecutor(resolvedAgentType, authConfig);
             let handle;
-            if (state.agentSessionId) {
+            const previousAgentSessionId = state.agentSessionId;
+            if (previousAgentSessionId) {
                 // Resume existing SDK session
-                handle = await executor.resumeSession(state.agentSessionId, {
+                handle = await executor.resumeSession(previousAgentSessionId, {
                     cwd: worktreePath,
                     model: state.model,
                     systemPrompt: context,
@@ -218,7 +227,7 @@ export class InteractiveSessionService {
                             if (event.content) {
                                 greetingText += event.content;
                                 state.currentAssistantBuffer += event.content;
-                                state.subscribers.forEach((sub) => sub({ delta: event.content, done: false }));
+                                this.notify(state, { delta: event.content, done: false });
                             }
                             break;
                         case 'tool_use':
@@ -226,12 +235,12 @@ export class InteractiveSessionService {
                                 const toolLabel = event.label;
                                 const toolDetail = event.detail;
                                 void this.persistToolEvent(state, toolLabel, toolDetail);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Using tool: ${toolLabel}`,
                                     activity: { kind: 'tool_use', label: toolLabel, detail: toolDetail },
-                                }));
+                                });
                             }
                             break;
                         case 'tool_result':
@@ -239,18 +248,18 @@ export class InteractiveSessionService {
                                 const resultLabel = event.label;
                                 const resultDetail = event.detail;
                                 void this.persistToolEvent(state, resultLabel, resultDetail);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Completed: ${resultLabel}`,
                                     activity: { kind: 'tool_result', label: resultLabel, detail: resultDetail },
-                                }));
+                                });
                             }
                             break;
                         case 'status':
                             if (event.content) {
                                 const statusContent = event.content;
-                                state.subscribers.forEach((sub) => sub({ delta: '', done: false, log: statusContent }));
+                                this.notify(state, { delta: '', done: false, log: statusContent });
                             }
                             break;
                         case 'done': {
@@ -259,6 +268,15 @@ export class InteractiveSessionService {
                             // Capture the SDK session ID (available after first message exchange)
                             const sdkSessionId = handle.sessionId;
                             if (sdkSessionId) {
+                                // Detect CWD mismatch: if we tried to resume but got a different
+                                // session ID, the SDK silently created a fresh session (typically
+                                // because the cwd changed or session JSONL was lost).
+                                if (previousAgentSessionId && sdkSessionId !== previousAgentSessionId) {
+                                    // eslint-disable-next-line no-console
+                                    console.warn(`[InteractiveSession] Session resume mismatch for feature ${featureId}: ` +
+                                        `expected ${previousAgentSessionId}, got ${sdkSessionId}. ` +
+                                        `SDK created a fresh session (likely cwd changed or session expired).`);
+                                }
                                 state.agentSessionId = sdkSessionId;
                                 // Persist to DB so it survives service restarts
                                 void this.sessionRepo.updateAgentSessionId(state.sessionId, sdkSessionId);
@@ -283,7 +301,7 @@ export class InteractiveSessionService {
                             state.currentAssistantBuffer = '';
                             state.toolEventsLog = [];
                             // Notify subscribers of end-of-turn
-                            state.subscribers.forEach((sub) => sub({ delta: '', done: true }));
+                            this.notify(state, { delta: '', done: true });
                             // Start idle timer now that the session is live
                             this.resetTimer(state);
                             return; // Boot complete
@@ -434,7 +452,7 @@ export class InteractiveSessionService {
                             if (event.content) {
                                 responseText += event.content;
                                 state.currentAssistantBuffer += event.content;
-                                state.subscribers.forEach((sub) => sub({ delta: event.content, done: false }));
+                                this.notify(state, { delta: event.content, done: false });
                             }
                             break;
                         case 'tool_use':
@@ -442,12 +460,12 @@ export class InteractiveSessionService {
                                 const toolLabel = event.label;
                                 const toolDetail = event.detail;
                                 void this.persistToolEvent(state, toolLabel, toolDetail);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Using tool: ${toolLabel}`,
                                     activity: { kind: 'tool_use', label: toolLabel, detail: toolDetail },
-                                }));
+                                });
                             }
                             break;
                         case 'tool_result':
@@ -455,18 +473,18 @@ export class InteractiveSessionService {
                                 const resultLabel = event.label;
                                 const resultDetail = event.detail;
                                 void this.persistToolEvent(state, resultLabel, resultDetail);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Completed: ${resultLabel}`,
                                     activity: { kind: 'tool_result', label: resultLabel, detail: resultDetail },
-                                }));
+                                });
                             }
                             break;
                         case 'status':
                             if (event.content) {
                                 const statusContent = event.content;
-                                state.subscribers.forEach((sub) => sub({ delta: '', done: false, log: statusContent }));
+                                this.notify(state, { delta: '', done: false, log: statusContent });
                             }
                             break;
                         case 'done': {
@@ -486,17 +504,39 @@ export class InteractiveSessionService {
                             await this.messageRepo.create(msg);
                             state.currentAssistantBuffer = '';
                             state.toolEventsLog = [];
+                            // Accumulate usage from this turn
+                            if (event.usage) {
+                                void this.sessionRepo.accumulateUsage(state.sessionId, {
+                                    costUsd: event.usage.costUsd ?? 0,
+                                    inputTokens: event.usage.inputTokens ?? 0,
+                                    outputTokens: event.usage.outputTokens ?? 0,
+                                    turns: event.usage.numTurns ?? 1,
+                                });
+                            }
                             // Mark as unread — if user has the chat open, the frontend
                             // will immediately call markRead to clear it
                             void this.sessionRepo.updateTurnStatus(state.sessionId, 'unread');
                             // Notify subscribers of end-of-turn
-                            state.subscribers.forEach((sub) => sub({ delta: '', done: true }));
+                            this.notify(state, { delta: '', done: true });
                             return; // Turn complete
                         }
                         case 'error':
                             // eslint-disable-next-line no-console
                             console.error(`[InteractiveSession] agent error during turn for session ${state.sessionId}:`, event.content);
-                            state.subscribers.forEach((sub) => sub({ delta: '', done: true, log: `Error: ${event.content ?? 'unknown'}` }));
+                            // Accumulate usage even on errors — cost was still incurred
+                            if (event.usage) {
+                                void this.sessionRepo.accumulateUsage(state.sessionId, {
+                                    costUsd: event.usage.costUsd ?? 0,
+                                    inputTokens: event.usage.inputTokens ?? 0,
+                                    outputTokens: event.usage.outputTokens ?? 0,
+                                    turns: event.usage.numTurns ?? 1,
+                                });
+                            }
+                            this.notify(state, {
+                                delta: '',
+                                done: true,
+                                log: `Error: ${event.content ?? 'unknown'}`,
+                            });
                             break;
                         case 'init':
                             // The SDK emits init on every turn, but we only show "Session started"
@@ -504,32 +544,36 @@ export class InteractiveSessionService {
                             // spamming the chat with repeated session-started messages.
                             break;
                         case 'api_retry':
-                            state.subscribers.forEach((sub) => sub({ delta: '', done: false, log: event.content ?? 'Retrying API call...' }));
+                            this.notify(state, {
+                                delta: '',
+                                done: false,
+                                log: event.content ?? 'Retrying API call...',
+                            });
                             break;
                         case 'rate_limit':
-                            state.subscribers.forEach((sub) => sub({ delta: '', done: false, log: event.content ?? 'Rate limited' }));
+                            this.notify(state, { delta: '', done: false, log: event.content ?? 'Rate limited' });
                             break;
                         case 'task_started':
                             if (event.content) {
                                 void this.persistToolEvent(state, 'Subtask started', event.content);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Subtask: ${event.content}`,
                                     activity: { kind: 'system', label: 'Subtask started', detail: event.content },
-                                }));
+                                });
                             }
                             break;
                         case 'task_progress':
                             if (event.content) {
-                                state.subscribers.forEach((sub) => sub({ delta: '', done: false, log: `Subtask: ${event.content}` }));
+                                this.notify(state, { delta: '', done: false, log: `Subtask: ${event.content}` });
                             }
                             break;
                         case 'task_done':
                             if (event.content) {
                                 const taskStatus = event.detail ?? 'completed';
                                 void this.persistToolEvent(state, `Subtask ${taskStatus}`, event.content);
-                                state.subscribers.forEach((sub) => sub({
+                                this.notify(state, {
                                     delta: '',
                                     done: false,
                                     log: `Subtask ${taskStatus}: ${event.content}`,
@@ -538,7 +582,7 @@ export class InteractiveSessionService {
                                         label: `Subtask ${taskStatus}`,
                                         detail: event.content,
                                     },
-                                }));
+                                });
                             }
                             break;
                     }
@@ -563,14 +607,18 @@ export class InteractiveSessionService {
                 await this.messageRepo.create(msg);
                 state.currentAssistantBuffer = '';
                 state.toolEventsLog = [];
-                state.subscribers.forEach((sub) => sub({ delta: '', done: true }));
+                this.notify(state, { delta: '', done: true });
             }
             else if (!responseText) {
                 // Stream ended without any response — SDK session likely died.
                 // Mark as error so the next message triggers a fresh session.
                 // eslint-disable-next-line no-console
                 console.error(`[InteractiveSession] stream ended without response for session ${state.sessionId} — session may have died`);
-                state.subscribers.forEach((sub) => sub({ delta: '', done: true, log: 'Session disconnected — will restart on next message' }));
+                this.notify(state, {
+                    delta: '',
+                    done: true,
+                    log: 'Session disconnected — will restart on next message',
+                });
                 if (state.agentSessionId) {
                     this.stoppedAgentSessionIds.set(state.featureId, state.agentSessionId);
                 }
@@ -629,7 +677,7 @@ export class InteractiveSessionService {
     // ---------------------------------------------------------------------------
     // Feature-scoped API (frontend doesn't manage sessions)
     // ---------------------------------------------------------------------------
-    async sendUserMessage(featureId, content, worktreePath) {
+    async sendUserMessage(featureId, content, worktreePath, model, agentType) {
         // 1. Persist user message to DB immediately — this is the source of truth
         const now = new Date();
         const userMsg = {
@@ -642,7 +690,21 @@ export class InteractiveSessionService {
         };
         await this.messageRepo.create(userMsg);
         // 2. Find active session for this feature
-        const state = this.findActiveStateForFeature(featureId);
+        let state = this.findActiveStateForFeature(featureId);
+        // If the caller requested a different model/agent than the running session,
+        // silently stop the current session so a new one boots with the new config.
+        // Also clear the cached agentSessionId so we create a fresh SDK session
+        // instead of resuming the old one (which would keep the old model).
+        if (state && model && state.model !== model) {
+            await this.stopSession(state.sessionId);
+            this.stoppedAgentSessionIds.delete(featureId);
+            state = undefined;
+        }
+        else if (state && agentType && state.agentType !== agentType) {
+            await this.stopSession(state.sessionId);
+            this.stoppedAgentSessionIds.delete(featureId);
+            state = undefined;
+        }
         if (state) {
             const dbSession = await this.sessionRepo.findById(state.sessionId);
             if (dbSession?.status === InteractiveSessionStatus.ready) {
@@ -674,7 +736,7 @@ export class InteractiveSessionService {
                 await this.sessionRepo.updateStatus(dbSession.id, InteractiveSessionStatus.stopped, new Date());
             }
             // Boot a new session — startSession will find the agentSessionId from DB
-            const session = await this.startSession(featureId, worktreePath);
+            const session = await this.startSession(featureId, worktreePath, model, agentType);
             const newState = this.sessions.get(session.id);
             if (newState) {
                 newState.pendingUserContent = content;
@@ -698,6 +760,7 @@ export class InteractiveSessionService {
             }
             // Resolve model display: explicit override > default
             const displayModel = state.model ?? 'claude-sonnet-4-6';
+            const usage = await this.sessionRepo.getUsage(state.sessionId);
             sessionInfo = {
                 pid: null, // SDK manages process internally
                 sessionId: state.agentSessionId ?? state.sessionId,
@@ -709,6 +772,9 @@ export class InteractiveSessionService {
                 lastActivityAt: dbSession?.lastActivityAt
                     ? new Date(dbSession.lastActivityAt).toISOString()
                     : new Date().toISOString(),
+                totalCostUsd: usage?.totalCostUsd ?? null,
+                totalInputTokens: usage?.totalInputTokens ?? null,
+                totalOutputTokens: usage?.totalOutputTokens ?? null,
             };
         }
         else {
@@ -719,6 +785,7 @@ export class InteractiveSessionService {
                 // Show DB info even without live process (process was lost on restart)
                 if (latest.status !== InteractiveSessionStatus.stopped &&
                     latest.status !== InteractiveSessionStatus.error) {
+                    const latestUsage = await this.sessionRepo.getUsage(latest.id);
                     sessionInfo = {
                         pid: null,
                         sessionId: latest.id,
@@ -730,6 +797,9 @@ export class InteractiveSessionService {
                         lastActivityAt: latest.lastActivityAt
                             ? new Date(latest.lastActivityAt).toISOString()
                             : new Date().toISOString(),
+                        totalCostUsd: latestUsage?.totalCostUsd ?? null,
+                        totalInputTokens: latestUsage?.totalInputTokens ?? null,
+                        totalOutputTokens: latestUsage?.totalOutputTokens ?? null,
                     };
                 }
             }
@@ -752,29 +822,26 @@ export class InteractiveSessionService {
         return { messages, sessionStatus, streamingText, sessionInfo, turnStatus };
     }
     subscribeByFeature(featureId, onChunk) {
-        const state = this.findActiveStateForFeature(featureId);
-        if (!state) {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            return () => { };
-        }
-        state.subscribers.add(onChunk);
-        return () => state.subscribers.delete(onChunk);
+        // Subscribe at the feature level so the callback survives session restarts.
+        // When a session dies (idle timeout, error) and a new one boots, the SSE
+        // connection keeps receiving events from the new session automatically.
+        let subs = this.featureSubscribers.get(featureId);
+        if (!subs) {
+            subs = new Set();
+            this.featureSubscribers.set(featureId, subs);
+        }
+        subs.add(onChunk);
+        return () => {
+            subs.delete(onChunk);
+            if (subs.size === 0) {
+                this.featureSubscribers.delete(featureId);
+            }
+        };
     }
     async stopByFeature(featureId) {
         const state = this.findActiveStateForFeature(featureId);
         if (!state)
             return;
-        // Persist a system message before killing
-        const msg = {
-            id: crypto.randomUUID(),
-            featureId,
-            sessionId: state.sessionId,
-            role: InteractiveMessageRole.assistant,
-            content: '**Session stopped by user**',
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        };
-        await this.messageRepo.create(msg);
         await this.stopSession(state.sessionId);
     }
     async markRead(featureId) {
@@ -854,6 +921,23 @@ export class InteractiveSessionService {
         }
     }
     // ---------------------------------------------------------------------------
+    // Event dispatch
+    // ---------------------------------------------------------------------------
+    /**
+     * Dispatch a StreamChunk to all subscribers for a session.
+     *
+     * Sends to both session-level subscribers (legacy, for sessionId-based
+     * subscribe()) and feature-level subscribers (for SSE connections that
+     * must survive session restarts).
+     */
+    notify(state, chunk) {
+        state.subscribers.forEach((sub) => sub(chunk));
+        const featureSubs = this.featureSubscribers.get(state.featureId);
+        if (featureSubs) {
+            featureSubs.forEach((sub) => sub(chunk));
+        }
+    }
+    // ---------------------------------------------------------------------------
     // Timer helpers
     // ---------------------------------------------------------------------------
     /** Start or restart the idle timeout timer for a session. */

package/dist/src/presentation/web/app/api/interactive/chat/[featureId]/messages/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../../../../src/presentation/web/app/api/interactive/chat/[featureId]/messages/route.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAIvC,UAAU,WAAW;IACnB,MAAM,EAAE,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxC;AAED,wBAAsB,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAuC/F;AAED,wBAAsB,MAAM,CAC1B,QAAQ,EAAE,WAAW,EACrB,EAAE,MAAM,EAAE,EAAE,WAAW,GACtB,OAAO,CAAC,YAAY,CAAC,CAgBvB;AAED,wBAAsB,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAe/F"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../../../../src/presentation/web/app/api/interactive/chat/[featureId]/messages/route.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAIvC,UAAU,WAAW;IACnB,MAAM,EAAE,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxC;AAED,wBAAsB,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CA8C/F;AAED,wBAAsB,MAAM,CAC1B,QAAQ,EAAE,WAAW,EACrB,EAAE,MAAM,EAAE,EAAE,WAAW,GACtB,OAAO,CAAC,YAAY,CAAC,CAgBvB;AAED,wBAAsB,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAe/F"}

package/dist/src/presentation/web/app/api/interactive/chat/[featureId]/messages/route.js

@@ -18,7 +18,7 @@ export async function POST(request, { params }) {
     try {
         const { featureId } = await params;
         const body = (await request.json());
-        const { content, worktreePath } = body;
+        const { content, worktreePath, model, agentType } = body;
         if (!content || typeof content !== 'string' || content.trim().length === 0) {
             return NextResponse.json({ error: 'content must be a non-empty string' }, { status: 400 });
         }
@@ -35,6 +35,8 @@ export async function POST(request, { params }) {
             featureId,
             content,
             worktreePath: resolvedWorktreePath,
+            model: typeof model === 'string' ? model : undefined,
+            agentType: typeof agentType === 'string' ? agentType : undefined,
         });
         return NextResponse.json({ message }, { status: 201 });
     }

package/dist/src/presentation/web/components/assistant-ui/thread.js

@@ -152,6 +152,12 @@ function ThinkingIndicator({ booting }) {
 // ── Message metadata (timestamp + relative time) ────────────────────────────
 function MessageMeta() {
     const message = useMessage();
+    // Tick every 30s so relative timestamps stay fresh
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setTick((t) => t + 1), 30_000);
+        return () => clearInterval(id);
+    }, []);
     const meta = useMemo(() => {
         if (!message?.createdAt)
             return null;
@@ -162,7 +168,8 @@ function MessageMeta() {
             time: date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
             relative: formatRelativeTime(date),
         };
-    }, [message?.createdAt]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [message?.createdAt, tick]);
     if (!meta)
         return null;
     return (_jsx("span", { className: "text-muted-foreground/60 text-[10px]", title: meta.time, children: meta.relative }));

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