@shepai/cli 1.164.0 → 1.164.1

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;