@shepai/cli 1.167.0-pr505.5cf8222 → 1.168.0-pr505.7d2bb14

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

@@ -11,6 +11,7 @@ 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';
+import { InteractionBubble } from './InteractionBubble.js';
 const IS_DEV = process.env.NODE_ENV === 'development';
 export function ChatTab({ featureId, worktreePath }) {
     const [overrideAgent, setOverrideAgent] = useState(undefined);
@@ -18,7 +19,7 @@ export function ChatTab({ featureId, worktreePath }) {
     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, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, {
+    const { runtime, status, clearChat, sessionInfo, isChatLoading, pendingInteraction, respondToInteraction, } = useChatRuntime(featureId, worktreePath, {
         contentTransform,
         onMessageSent: att.clearAttachments,
         model: overrideModel,
@@ -54,7 +55,7 @@ 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, 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 }) })) })] }));
+    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, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
 }
 // ── Loading skeleton ────────────────────────────────────────────────────────
 function ChatSkeleton() {

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

@@ -0,0 +1,33 @@
+/** Shape matching UserQuestion from the agent executor interface. */
+interface QuestionOption {
+    label: string;
+    description: string;
+    preview?: string;
+}
+interface Question {
+    question: string;
+    header: string;
+    options: QuestionOption[];
+    multiSelect: boolean;
+}
+export interface InteractionData {
+    toolCallId: string;
+    questions: Question[];
+}
+export interface InteractionBubbleProps {
+    interaction: InteractionData;
+    onSubmit: (answers: Record<string, string>) => void;
+    className?: string;
+}
+/**
+ * Renders an agent's AskUserQuestion interaction inline in the chat thread.
+ *
+ * - Single question: renders options directly
+ * - Multiple questions: tabbed interface with header chips as tabs
+ *
+ * After submission, the bubble disappears and a green summary message
+ * is persisted in the conversation history (rendered by InteractionResponseMessage in thread.tsx).
+ */
+export declare function InteractionBubble({ interaction, onSubmit, className }: InteractionBubbleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InteractionBubble.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionBubble.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/InteractionBubble.tsx"],"names":[],"mappings":"AAMA,qEAAqE;AACrE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAsB7F"}

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

@@ -0,0 +1,155 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Check, MessageCircleQuestion } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * Renders an agent's AskUserQuestion interaction inline in the chat thread.
+ *
+ * - Single question: renders options directly
+ * - Multiple questions: tabbed interface with header chips as tabs
+ *
+ * After submission, the bubble disappears and a green summary message
+ * is persisted in the conversation history (rendered by InteractionResponseMessage in thread.tsx).
+ */
+export function InteractionBubble({ interaction, onSubmit, className }) {
+    const isMultiQuestion = interaction.questions.length > 1;
+    return (_jsxs("div", { className: cn('group flex w-full items-start gap-2.5 px-4 py-0.5', className), children: [_jsx("div", { className: "bg-muted flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx(MessageCircleQuestion, { className: "h-3.5 w-3.5 text-violet-600 dark:text-violet-400" }) }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: _jsx("div", { className: "text-foreground mt-px overflow-hidden rounded-2xl rounded-tl-sm border border-violet-200 bg-violet-50/50 text-sm leading-relaxed shadow-sm dark:border-violet-500/20 dark:bg-violet-950/20", children: isMultiQuestion ? (_jsx(TabbedQuestions, { questions: interaction.questions, onSubmit: onSubmit })) : (_jsx("div", { className: "px-4 py-3", children: _jsx(SingleQuestion, { question: interaction.questions[0], onSubmit: onSubmit }) })) }) })] }));
+}
+function TabbedQuestions({ questions, onSubmit, }) {
+    const [activeTab, setActiveTab] = useState(0);
+    // All per-question state lives here — indexed by question text
+    const [selections, setSelections] = useState(() => {
+        const init = {};
+        for (const q of questions) {
+            init[q.question] = { selectedOptions: new Set(), otherText: '', isOtherSelected: false };
+        }
+        return init;
+    });
+    const updateSelection = useCallback((questionText, updater) => {
+        setSelections((prev) => ({
+            ...prev,
+            [questionText]: updater(prev[questionText]),
+        }));
+    }, []);
+    // Derive answers from selections
+    const answers = {};
+    for (const q of questions) {
+        const s = selections[q.question];
+        if (!s)
+            continue;
+        const parts = [...s.selectedOptions];
+        if (s.isOtherSelected && s.otherText.trim())
+            parts.push(s.otherText.trim());
+        if (parts.length > 0)
+            answers[q.question] = parts.join(', ');
+    }
+    const allAnswered = questions.every((q) => answers[q.question]);
+    const handleSubmit = useCallback(() => {
+        if (!allAnswered)
+            return;
+        onSubmit(answers);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- answers is derived, stable enough
+    }, [allAnswered, onSubmit, selections]);
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex border-b border-violet-200 dark:border-violet-500/20", children: questions.map((q, i) => {
+                    const isActive = i === activeTab;
+                    const hasAnswer = !!answers[q.question];
+                    return (_jsxs("button", { type: "button", onClick: () => setActiveTab(i), className: cn('relative flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors', isActive
+                            ? 'text-violet-700 dark:text-violet-300'
+                            : 'text-muted-foreground hover:text-foreground'), children: [hasAnswer ? (_jsx(Check, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" })) : (_jsxs("span", { className: "text-muted-foreground/50 text-[10px]", children: [i + 1, "."] })), q.header, isActive ? (_jsx("span", { className: "absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-violet-600 dark:bg-violet-400" })) : null] }, q.question));
+                }) }), questions.map((q, i) => (_jsx("div", { className: "px-4 py-3", style: { display: i === activeTab ? undefined : 'none' }, children: _jsx(QuestionPanel, { question: q, selection: selections[q.question], onSelectionChange: (updater) => updateSelection(q.question, updater) }) }, q.question))), _jsxs("div", { className: "flex items-center gap-3 border-t border-violet-200 px-4 py-2.5 dark:border-violet-500/20", children: [_jsxs("button", { type: "button", onClick: handleSubmit, disabled: !allAnswered, className: cn('inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all', allAnswered
+                            ? 'bg-violet-600 text-white shadow-sm hover:bg-violet-700 active:scale-[0.98] dark:bg-violet-600 dark:hover:bg-violet-500'
+                            : 'bg-muted text-muted-foreground cursor-not-allowed opacity-50'), children: [_jsx(Check, { className: "h-3 w-3" }), "Submit all"] }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [Object.keys(answers).length, "/", questions.length, " answered"] })] })] }));
+}
+// ── Question panel (used inside tabs) ───────────────────────────────────
+function QuestionPanel({ question, selection, onSelectionChange, }) {
+    const handleOptionToggle = useCallback((label) => {
+        onSelectionChange((prev) => {
+            const next = new Set(prev.selectedOptions);
+            if (question.multiSelect) {
+                if (next.has(label))
+                    next.delete(label);
+                else
+                    next.add(label);
+            }
+            else {
+                next.clear();
+                next.add(label);
+                return { ...prev, selectedOptions: next, isOtherSelected: false };
+            }
+            return { ...prev, selectedOptions: next };
+        });
+    }, [question.multiSelect, onSelectionChange]);
+    const handleOtherToggle = useCallback(() => {
+        onSelectionChange((prev) => {
+            if (question.multiSelect) {
+                return { ...prev, isOtherSelected: !prev.isOtherSelected };
+            }
+            return { selectedOptions: new Set(), otherText: prev.otherText, isOtherSelected: true };
+        });
+    }, [question.multiSelect, onSelectionChange]);
+    const handleOtherTextChange = useCallback((text) => {
+        onSelectionChange((prev) => ({ ...prev, otherText: text }));
+    }, [onSelectionChange]);
+    return (_jsxs("div", { children: [_jsxs("p", { className: "text-foreground mb-2 text-xs font-medium", children: [question.question, question.multiSelect ? (_jsx("span", { className: "text-muted-foreground ml-1 font-normal", children: "(select multiple)" })) : null] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [question.options.map((opt) => (_jsx(OptionRow, { option: opt, isSelected: selection.selectedOptions.has(opt.label), isMulti: question.multiSelect, onToggle: () => handleOptionToggle(opt.label) }, opt.label))), _jsx(OtherRow, { isSelected: selection.isOtherSelected, isMulti: question.multiSelect, text: selection.otherText, onToggle: handleOtherToggle, onTextChange: handleOtherTextChange })] })] }));
+}
+// ── Single question (no tabs) ───────────────────────────────────────────
+function SingleQuestion({ question, onSubmit, }) {
+    const [selectedOptions, setSelectedOptions] = useState(new Set());
+    const [otherText, setOtherText] = useState('');
+    const [isOtherSelected, setIsOtherSelected] = useState(false);
+    const handleOptionToggle = useCallback((label) => {
+        setSelectedOptions((prev) => {
+            const next = new Set(prev);
+            if (question.multiSelect) {
+                if (next.has(label))
+                    next.delete(label);
+                else
+                    next.add(label);
+            }
+            else {
+                next.clear();
+                next.add(label);
+                setIsOtherSelected(false);
+            }
+            return next;
+        });
+        if (!question.multiSelect)
+            setIsOtherSelected(false);
+    }, [question.multiSelect]);
+    const handleOtherToggle = useCallback(() => {
+        if (question.multiSelect) {
+            setIsOtherSelected((prev) => !prev);
+        }
+        else {
+            setSelectedOptions(new Set());
+            setIsOtherSelected(true);
+        }
+    }, [question.multiSelect]);
+    const handleSubmit = useCallback(() => {
+        const parts = [...selectedOptions];
+        if (isOtherSelected && otherText.trim())
+            parts.push(otherText.trim());
+        if (parts.length === 0)
+            return;
+        onSubmit({ [question.question]: parts.join(', ') });
+    }, [selectedOptions, isOtherSelected, otherText, onSubmit, question.question]);
+    const hasSelection = selectedOptions.size > 0 || (isOtherSelected && otherText.trim());
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-start gap-2", children: [_jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-semibold tracking-wider text-violet-700 uppercase dark:bg-violet-900/50 dark:text-violet-300", children: question.header }), _jsx("span", { className: "font-medium", children: question.question })] }), _jsxs("div", { className: "ml-0.5 flex flex-col gap-1.5", children: [question.options.map((opt) => (_jsx(OptionRow, { option: opt, isSelected: selectedOptions.has(opt.label), isMulti: question.multiSelect, onToggle: () => handleOptionToggle(opt.label) }, opt.label))), _jsx(OtherRow, { isSelected: isOtherSelected, isMulti: question.multiSelect, text: otherText, onToggle: handleOtherToggle, onTextChange: setOtherText })] }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleSubmit, disabled: !hasSelection, className: cn('inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all', hasSelection
+                            ? 'bg-violet-600 text-white shadow-sm hover:bg-violet-700 active:scale-[0.98] dark:bg-violet-600 dark:hover:bg-violet-500'
+                            : 'bg-muted text-muted-foreground cursor-not-allowed opacity-50'), children: [_jsx(Check, { className: "h-3 w-3" }), "Submit"] }), question.multiSelect ? (_jsx("span", { className: "text-muted-foreground text-[10px]", children: "Select one or more" })) : null] })] }));
+}
+function OptionRow({ option, isSelected, isMulti, onToggle }) {
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: cn('flex items-start gap-2.5 rounded-lg border px-3 py-2 text-left text-xs transition-all', isSelected
+            ? 'border-violet-300 bg-violet-100/60 shadow-sm dark:border-violet-500/40 dark:bg-violet-900/30'
+            : 'border-border/50 hover:border-violet-300 hover:bg-violet-50 dark:hover:border-violet-500/30 dark:hover:bg-violet-900/10'), children: [_jsx("span", { className: cn('mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center border transition-colors', isMulti ? 'rounded' : 'rounded-full', isSelected
+                    ? 'border-violet-600 bg-violet-600 dark:border-violet-500 dark:bg-violet-500'
+                    : 'border-muted-foreground/30'), children: isSelected ? _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) : null }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('font-medium', isSelected && 'text-violet-700 dark:text-violet-300'), children: option.label }), _jsx("span", { className: "text-muted-foreground text-[11px] leading-snug", children: option.description })] })] }));
+}
+function OtherRow({ isSelected, isMulti, text, onToggle, onTextChange }) {
+    return (_jsxs("div", { className: cn('flex items-start gap-2.5 rounded-lg border px-3 py-2 text-xs transition-all', isSelected
+            ? 'border-violet-300 bg-violet-100/60 shadow-sm dark:border-violet-500/40 dark:bg-violet-900/30'
+            : 'border-border/50 hover:border-violet-300 dark:hover:border-violet-500/30'), children: [_jsx("button", { type: "button", onClick: onToggle, className: "mt-0.5 shrink-0", children: _jsx("span", { className: cn('flex h-4 w-4 items-center justify-center border transition-colors', isMulti ? 'rounded' : 'rounded-full', isSelected
+                        ? 'border-violet-600 bg-violet-600 dark:border-violet-500 dark:bg-violet-500'
+                        : 'border-muted-foreground/30'), children: isSelected ? _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) : null }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: cn('font-medium', isSelected && 'text-violet-700 dark:text-violet-300'), children: "Other" }), isSelected ? (_jsx("input", { type: "text", value: text, onChange: (e) => onTextChange(e.target.value), placeholder: "Type your answer...", className: "w-full rounded-md border border-violet-200 bg-white/80 px-2 py-1 text-xs outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-300/30 dark:border-violet-500/30 dark:bg-violet-950/30 dark:focus:border-violet-500/50 dark:focus:ring-violet-500/20", autoFocus: true })) : null] })] }));
+}

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react';
+import { InteractionBubble } from './InteractionBubble.js';
+import type { InteractionData } from './InteractionBubble.js';
+declare const meta: {
+    title: string;
+    component: typeof InteractionBubble;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        interaction: InteractionData;
+        onSubmit: (answers: Record<string, string>) => void;
+        className?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleSelect: Story;
+export declare const MultiSelect: Story;
+export declare const TabbedMultiQuestion: Story;
+export declare const Submitted: Story;
+//# sourceMappingURL=InteractionBubble.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionBubble.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/InteractionBubble.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,QAAA,MAAM,IAAI;;;;;;;;;;;CAWgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsFnC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAGjC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC"}

package/dist/src/presentation/web/components/features/chat/InteractionBubble.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { InteractionBubble } from './InteractionBubble.js';
+const meta = {
+    title: 'Features/Chat/InteractionBubble',
+    component: InteractionBubble,
+    parameters: { layout: 'padded' },
+    decorators: [
+        (Story) => (_jsx("div", { className: "bg-background mx-auto max-w-xl rounded-lg border p-4", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const colorInteraction = {
+    toolCallId: 'toolu_color_1',
+    questions: [
+        {
+            question: 'What is your favorite color?',
+            header: 'Color',
+            multiSelect: false,
+            options: [
+                { label: 'Red', description: 'The color red' },
+                { label: 'Blue', description: 'The color blue' },
+                { label: 'Green', description: 'The color green' },
+                { label: 'Yellow', description: 'The color yellow' },
+            ],
+        },
+    ],
+};
+const multiSelectInteraction = {
+    toolCallId: 'toolu_features_1',
+    questions: [
+        {
+            question: 'Which features do you want to enable?',
+            header: 'Features',
+            multiSelect: true,
+            options: [
+                { label: 'Dark mode', description: 'Enable dark theme support' },
+                { label: 'Notifications', description: 'Push notifications for updates' },
+                { label: 'Analytics', description: 'Usage analytics and reporting' },
+            ],
+        },
+    ],
+};
+const multiQuestionInteraction = {
+    toolCallId: 'toolu_setup_1',
+    questions: [
+        {
+            question: "What's your preferred coding environment?",
+            header: 'IDE',
+            multiSelect: false,
+            options: [
+                {
+                    label: 'VS Code',
+                    description: "Microsoft's popular editor with rich extension ecosystem.",
+                },
+                { label: 'Neovim', description: 'Terminal-based, highly customizable.' },
+                { label: 'JetBrains', description: 'Full-featured IDEs with deep language intelligence.' },
+                { label: 'Cursor', description: 'AI-first fork of VS Code.' },
+            ],
+        },
+        {
+            question: 'Which of these technologies do you actively use? (pick all that apply)',
+            header: 'Tech Stack',
+            multiSelect: true,
+            options: [
+                { label: 'TypeScript', description: 'Statically typed JavaScript.' },
+                { label: 'Python', description: 'Scripting, data science, ML, or backend.' },
+                { label: 'Go', description: 'Fast, compiled, cloud-native tooling.' },
+                { label: 'Rust', description: 'Systems programming with memory safety.' },
+            ],
+        },
+        {
+            question: 'How would you describe your experience level?',
+            header: 'Level',
+            multiSelect: false,
+            options: [
+                { label: 'Junior', description: 'Less than 2 years of experience.' },
+                { label: 'Mid-level', description: '2-5 years of experience.' },
+                { label: 'Senior', description: '5+ years of experience.' },
+            ],
+        },
+    ],
+};
+// ── Interactive wrapper ─────────────────────────────────────────────────
+function InteractiveBubble({ interaction }) {
+    const [submitted, setSubmitted] = useState(false);
+    if (submitted)
+        return _jsx("p", { className: "text-muted-foreground px-4 text-xs", children: "Submitted!" });
+    return _jsx(InteractionBubble, { interaction: interaction, onSubmit: () => setSubmitted(true) });
+}
+const noop = () => undefined;
+export const SingleSelect = {
+    args: { interaction: colorInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: colorInteraction }),
+};
+export const MultiSelect = {
+    args: { interaction: multiSelectInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: multiSelectInteraction }),
+};
+export const TabbedMultiQuestion = {
+    args: { interaction: multiQuestionInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: multiQuestionInteraction }),
+};
+export const Submitted = {
+    args: { interaction: colorInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: colorInteraction }),
+};

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

@@ -1,3 +1,17 @@
+/** Shape matching UserInteractionData from the agent executor interface. */
+export interface InteractionData {
+    toolCallId: string;
+    questions: {
+        question: string;
+        header: string;
+        options: {
+            label: string;
+            description: string;
+            preview?: string;
+        }[];
+        multiSelect: boolean;
+    }[];
+}
 interface SessionInfo {
     pid: number | null;
     sessionId: string | null;
@@ -45,6 +59,8 @@ export declare function useChatRuntime(featureId: string, worktreePath?: string,
     stopAgent: () => Promise<void>;
     sessionInfo: SessionInfo | null;
     isChatLoading: boolean;
+    pendingInteraction: InteractionData | null;
+    respondToInteraction: (answers: Record<string, string>) => Promise<void>;
 };
 export {};
 //# sourceMappingURL=useChatRuntime.d.ts.map

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;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"}
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AASA,4EAA4E;AAC5E,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE;QACT,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACpE,WAAW,EAAE,OAAO,CAAC;KACtB,EAAE,CAAC;CACL;AAYD,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;;;;;;;;oCAgXV,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;EAmDzC"}

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

@@ -100,6 +100,19 @@ export function useChatRuntime(featureId, worktreePath, options) {
     const [awaitingResponse, setAwaitingResponse] = useState(false);
     const awaitingTimerRef = useRef(null);
     const eventSourceRef = useRef(null);
+    // ── Interaction state (AskUserQuestion) ─────────────────────────────
+    const [pendingInteraction, setPendingInteraction] = useState(null);
+    // Sync pending interaction from backend polling (fallback for missed SSE)
+    useEffect(() => {
+        const backendInteraction = chatState?.pendingInteraction ?? null;
+        if (backendInteraction) {
+            setPendingInteraction(backendInteraction);
+        }
+        else if (!backendInteraction && pendingInteraction) {
+            // Backend cleared it (e.g. agent continued) — clear local state
+            setPendingInteraction(null);
+        }
+    }, [chatState?.pendingInteraction, pendingInteraction]);
     // Delayed awaiting — only show Thinking bubble after 600ms to avoid flash
     const startAwaiting = useCallback(() => {
         if (awaitingTimerRef.current)
@@ -163,10 +176,24 @@ export function useChatRuntime(featureId, worktreePath, options) {
                 // Ignore
             }
         });
+        es.addEventListener('interaction', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.interaction) {
+                    cancelAwaiting();
+                    setPendingInteraction(data.interaction);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
         es.addEventListener('done', () => {
             setStatusLog(null);
             cancelAwaiting();
             pushDebug('turn_done');
+            // Agent turn completed — clear any lingering interaction state
+            setPendingInteraction(null);
             // Refetch first, THEN clear local streaming state so there's no gap
             void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) }).then(() => {
                 setStreamingText('');
@@ -335,6 +362,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
         setDebugEvents([]);
         setStatusLog(null);
         cancelAwaiting();
+        setPendingInteraction(null);
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
     }, [featureId, queryClient, cancelAwaiting]);
     // ── Stop agent ────────────────────────────────────────────────────────
@@ -347,6 +375,30 @@ export function useChatRuntime(featureId, worktreePath, options) {
         cancelAwaiting();
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
     }, [featureId, queryClient, cancelAwaiting]);
+    // ── Respond to interaction (AskUserQuestion) ───────────────────────────
+    const respondToInteraction = useCallback(async (answers) => {
+        // Clear the bubble and status log immediately — answers are persisted as
+        // a user message by the backend, shown in conversation history on refetch.
+        setPendingInteraction(null);
+        setStatusLog(null);
+        try {
+            const res = await fetch(`/api/interactive/chat/${featureId}/respond`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ answers }),
+            });
+            if (!res.ok) {
+                // eslint-disable-next-line no-console
+                console.error(`[respondToInteraction] failed: ${res.status}`);
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('[respondToInteraction] error:', err);
+        }
+        // Refetch to show the persisted user message with answers
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient]);
     // ── Build assistant-ui runtime ──────────────────────────────────────────
     const runtime = useExternalStoreRuntime({
         messages: threadMessages,
@@ -359,5 +411,14 @@ export function useChatRuntime(featureId, worktreePath, options) {
             cancelAwaiting();
         }, [cancelAwaiting]),
     });
-    return { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading };
+    return {
+        runtime,
+        status,
+        clearChat,
+        stopAgent,
+        sessionInfo,
+        isChatLoading,
+        pendingInteraction,
+        respondToInteraction,
+    };
 }

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

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

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

@@ -143,13 +143,28 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             }, AUTO_FOCUS_DRAWER_DELAY_MS);
         }, 0);
     }, [fitView, guardedNavigate, router]);
-    // Wrapper: add repo + auto-focus if canvas was empty
+    // Smoothly pan/zoom to a specific node after it appears on canvas
+    const focusOnNode = useCallback((nodeId) => {
+        // Wait for next render so the node exists in the DOM
+        setTimeout(() => {
+            fitView({
+                nodes: [{ id: nodeId }],
+                maxZoom: 1.0,
+                padding: 0.4,
+                duration: 600,
+            });
+        }, 0);
+    }, [fitView]);
+    // Wrapper: add repo + auto-focus on the new node
     const addRepoAndFocus = useCallback((path) => {
-        const { wasEmpty, repoPath } = handleAddRepository(path);
+        const { wasEmpty, repoPath, tempNodeId } = handleAddRepository(path);
         if (wasEmpty) {
             focusAndOpenDrawer(repoPath);
         }
-    }, [handleAddRepository, focusAndOpenDrawer]);
+        else {
+            focusOnNode(tempNodeId);
+        }
+    }, [handleAddRepository, focusAndOpenDrawer, focusOnNode]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {

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

@@ -12,6 +12,7 @@ export interface ControlCenterState {
     handleAddRepository: (path: string) => {
         wasEmpty: boolean;
         repoPath: string;
+        tempNodeId: string;
     };
     handleLayout: (direction: LayoutDirection) => void;
     handleArchiveFeature: (featureId: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAilBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QACrC,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAilBpB"}

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

@@ -486,7 +486,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
             toast.error('Failed to add repository');
         })
             .finally(() => endMutation());
-        return { wasEmpty, repoPath: path };
+        return { wasEmpty, repoPath: path, tempNodeId: tempId };
     }, [
         addRepositoryToMap,
         removeRepository,

package/dist/src/presentation/web/hooks/use-graph-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AA8BF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,EACpB,YAAY,UAAQ,GACnB,mBAAmB,CAgbrB"}
+{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AA8BF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,EACpB,YAAY,UAAQ,GACnB,mBAAmB,CAicrB"}

package/dist/src/presentation/web/hooks/use-graph-state.js

@@ -82,6 +82,9 @@ export function useGraphState(initialNodes, initialEdges, showArchived = false)
     // Retained for one extra reconcile cycle so the user sees the deleting state
     // before the node disappears from the canvas.
     const deletingRetainedRef = useRef(new Set());
+    // Track deleted repo IDs so reconcile doesn't resurrect them from stale server data.
+    // Cleared once reconcile sees the repo is gone from server data.
+    const deletedRepoIdsRef = useRef(new Set());
     // Callbacks stored in a ref so changing them doesn't trigger re-render.
     // The stable wrapper object reads from the ref so node closures always use latest callbacks.
     const callbacksRef = useRef({});
@@ -254,6 +257,17 @@ export function useGraphState(initialNodes, initialEdges, showArchived = false)
         setRepoMap((currentRepoMap) => {
             // Start with everything the server returned
             const merged = new Map(newRepoMap);
+            // Remove repos that were deleted client-side but the server still returns
+            // (stale data). Once the server stops returning the repo, clear the tombstone.
+            for (const deletedId of deletedRepoIdsRef.current) {
+                if (merged.has(deletedId)) {
+                    merged.delete(deletedId);
+                }
+                else {
+                    // Server confirmed deletion — no longer need the tombstone
+                    deletedRepoIdsRef.current.delete(deletedId);
+                }
+            }
             // Build a set of repositoryPaths present in server data for dedup
             const serverPaths = new Set([...newRepoMap.values()].map((e) => e.data.repositoryPath));
             for (const [id, entry] of currentRepoMap) {
@@ -343,6 +357,7 @@ export function useGraphState(initialNodes, initialEdges, showArchived = false)
     }, []);
     const addRepository = useCallback((nodeId, data) => {
         protectedRepoIdsRef.current.add(nodeId);
+        deletedRepoIdsRef.current.delete(nodeId);
         setRepoMap((prev) => {
             const next = new Map(prev);
             next.set(nodeId, { nodeId, data });
@@ -351,6 +366,7 @@ export function useGraphState(initialNodes, initialEdges, showArchived = false)
     }, []);
     const removeRepository = useCallback((nodeId) => {
         protectedRepoIdsRef.current.delete(nodeId);
+        deletedRepoIdsRef.current.add(nodeId);
         setRepoMap((prev) => {
             if (!prev.has(nodeId))
                 return prev;

package/dist/src/presentation/web/hooks/use-turn-statuses.d.ts

@@ -1,4 +1,4 @@
-export type TurnStatus = 'idle' | 'processing' | 'unread';
+export type TurnStatus = 'idle' | 'processing' | 'unread' | 'awaiting_input';
 /**
  * Polls ALL active turn statuses from the backend.
  * No IDs needed — the backend returns every non-idle session status.

package/dist/src/presentation/web/hooks/use-turn-statuses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-turn-statuses.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-turn-statuses.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE1D;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAY/D;AAED;;GAEG;AACH,wBAAsB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEnE"}
+{"version":3,"file":"use-turn-statuses.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-turn-statuses.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB,CAAC;AAE7E;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAY/D;AAED;;GAEG;AACH,wBAAsB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEnE"}