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

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/components/features/feature-tree-table/feature-tree-table.d.ts

@@ -0,0 +1,36 @@
+import type { FeatureStatus } from '../../common/feature-status-config.js';
+import './feature-tree-table.css';
+export interface FeatureTreeRow {
+    id: string;
+    name: string;
+    status: FeatureStatus;
+    lifecycle: string;
+    branch: string;
+    repositoryName: string;
+    remoteUrl?: string;
+    parentId?: string;
+    /** Child rows for tree hierarchy */
+    _children?: FeatureTreeRow[];
+    /** Whether this row is a repository group header */
+    _isRepoGroup?: boolean;
+    /** Number of features in this repo group */
+    _featureCount?: number;
+}
+export interface InventoryRepo {
+    name: string;
+    remoteUrl?: string;
+}
+export interface FeatureTreeTableProps {
+    data: FeatureTreeRow[];
+    repos?: InventoryRepo[];
+    className?: string;
+    onFeatureClick?: (featureId: string) => void;
+}
+/**
+ * Build tree-structured data grouped by repository.
+ * Each repository becomes a parent node with its features as children.
+ * Repos without features are included as empty groups.
+ */
+export declare function buildTreeData(flatData: FeatureTreeRow[], repos?: InventoryRepo[]): FeatureTreeRow[];
+export declare function FeatureTreeTable({ data, repos, className, onFeatureClick, }: FeatureTreeTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-tree-table.d.ts.map

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-tree-table.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/feature-tree-table.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,oDAAoD;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+FD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,cAAc,EAAE,EAC1B,KAAK,CAAC,EAAE,aAAa,EAAE,GACtB,cAAc,EAAE,CAmElB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,2CAgDvB"}

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.js

@@ -0,0 +1,196 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { cn } from '../../../lib/utils.js';
+import './feature-tree-table.css';
+const STATUS_LABELS = {
+    'action-needed': 'Action Needed',
+    'in-progress': 'In Progress',
+    pending: 'Pending',
+    blocked: 'Blocked',
+    error: 'Error',
+    done: 'Done',
+};
+/** SVG repo icon — lucide FolderGit2 */
+const REPO_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><circle cx="12" cy="13" r="2"/><path d="M14 13h3"/><path d="M7 13h3"/></svg>`;
+function statusFormatter(cell) {
+    const row = cell.getRow().getData();
+    if (row._isRepoGroup)
+        return '';
+    const value = cell.getValue();
+    const label = STATUS_LABELS[value] ?? value;
+    return `<span class="status-pill status-pill--${value}"><span class="status-dot"></span>${label}</span>`;
+}
+function nameFormatter(cell) {
+    const row = cell.getRow().getData();
+    if (row._isRepoGroup) {
+        const count = row._featureCount ?? 0;
+        const countLabel = count === 0 ? 'No features' : count === 1 ? '1 Feature' : `${count} Features`;
+        const remoteLabel = row.remoteUrl
+            ? `<span class="repo-remote-url">${escapeHtml(row.remoteUrl)}</span>`
+            : '';
+        return `<span class="repo-name-cell">${REPO_ICON_SVG}<span class="repo-name-text"><span class="repo-name-primary"><span class="repo-name-title">${escapeHtml(row.name)}</span><span class="repo-feature-count">${countLabel}</span></span>${remoteLabel}</span></span>`;
+    }
+    return escapeHtml(cell.getValue());
+}
+function escapeHtml(text) {
+    const div = typeof document !== 'undefined' ? document.createElement('div') : null;
+    if (div) {
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function buildColumns(onFeatureClick) {
+    return [
+        {
+            title: 'Name',
+            field: 'name',
+            widthGrow: 3,
+            formatter: nameFormatter,
+            ...(onFeatureClick && {
+                cellClick: (_e, cell) => {
+                    const data = cell.getRow().getData();
+                    if (data._isRepoGroup)
+                        return;
+                    onFeatureClick(data.id);
+                },
+                cssClass: 'cursor-pointer',
+            }),
+        },
+        {
+            title: 'Status',
+            field: 'status',
+            widthGrow: 1.5,
+            formatter: statusFormatter,
+        },
+        {
+            title: 'Lifecycle',
+            field: 'lifecycle',
+            widthGrow: 1.5,
+            formatter: (cell) => {
+                const row = cell.getRow().getData();
+                if (row._isRepoGroup)
+                    return '';
+                return cell.getValue();
+            },
+        },
+        {
+            title: 'Branch',
+            field: 'branch',
+            widthGrow: 2,
+            formatter: (cell) => {
+                const row = cell.getRow().getData();
+                if (row._isRepoGroup)
+                    return '';
+                const val = cell.getValue();
+                if (!val)
+                    return '';
+                return `<code style="font-size:12px;color:var(--color-muted-foreground,#64748b);font-family:var(--font-mono)">${escapeHtml(val)}</code>`;
+            },
+        },
+    ];
+}
+/**
+ * Build tree-structured data grouped by repository.
+ * Each repository becomes a parent node with its features as children.
+ * Repos without features are included as empty groups.
+ */
+export function buildTreeData(flatData, repos) {
+    // Group features by repository
+    const byRepo = new Map();
+    for (const item of flatData) {
+        const repoName = item.repositoryName || 'Unknown';
+        if (!byRepo.has(repoName)) {
+            byRepo.set(repoName, []);
+        }
+        byRepo.get(repoName).push(item);
+    }
+    // Ensure all known repos are represented (even without features)
+    const repoMeta = new Map();
+    if (repos) {
+        for (const repo of repos) {
+            repoMeta.set(repo.name, { remoteUrl: repo.remoteUrl });
+            if (!byRepo.has(repo.name)) {
+                byRepo.set(repo.name, []);
+            }
+        }
+    }
+    const roots = [];
+    for (const [repoName, features] of byRepo) {
+        // Build parent-child relationships within this repo group
+        const lookup = new Map();
+        const repoChildren = [];
+        for (const item of features) {
+            lookup.set(item.id, { ...item, _children: [] });
+        }
+        for (const item of features) {
+            const node = lookup.get(item.id);
+            if (item.parentId && lookup.has(item.parentId)) {
+                lookup.get(item.parentId)._children.push(node);
+            }
+            else {
+                repoChildren.push(node);
+            }
+        }
+        // Clean up empty _children arrays
+        for (const node of lookup.values()) {
+            if (node._children?.length === 0) {
+                delete node._children;
+            }
+        }
+        const remoteUrl = repoMeta.get(repoName)?.remoteUrl ?? features[0]?.remoteUrl;
+        const repoGroup = {
+            id: `repo-${repoName}`,
+            name: repoName,
+            status: 'pending',
+            lifecycle: '',
+            branch: '',
+            repositoryName: repoName,
+            remoteUrl,
+            _isRepoGroup: true,
+            _featureCount: features.length,
+            ...(repoChildren.length > 0 ? { _children: repoChildren } : {}),
+        };
+        roots.push(repoGroup);
+    }
+    return roots;
+}
+export function FeatureTreeTable({ data, repos, className, onFeatureClick, }) {
+    const containerRef = useRef(null);
+    const tabulatorRef = useRef(null);
+    const onFeatureClickRef = useRef(onFeatureClick);
+    onFeatureClickRef.current = onFeatureClick;
+    const stableOnFeatureClick = useCallback((featureId) => {
+        onFeatureClickRef.current?.(featureId);
+    }, []);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const treeData = buildTreeData(data, repos);
+        const columns = buildColumns(stableOnFeatureClick);
+        const table = new Tabulator(containerRef.current, {
+            data: treeData,
+            columns,
+            dataTree: true,
+            dataTreeStartExpanded: true,
+            layout: 'fitColumns',
+            height: '100%',
+            placeholder: 'No repositories found',
+            headerSortClickElement: 'icon',
+            rowFormatter: (row) => {
+                const rowData = row.getData();
+                if (rowData._isRepoGroup) {
+                    row.getElement().classList.add('tabulator-row-repo-group');
+                }
+            },
+        });
+        tabulatorRef.current = table;
+        return () => {
+            table.destroy();
+            tabulatorRef.current = null;
+        };
+    }, [data, repos, stableOnFeatureClick]);
+    return (_jsx("div", { "data-testid": "feature-tree-table", className: cn('h-full w-full', className), ref: containerRef }));
+}

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureTreeTable } from './feature-tree-table.js';
+declare const meta: Meta<typeof FeatureTreeTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleRepository: Story;
+export declare const Empty: Story;
+export declare const WithClickHandler: Story;
+export declare const DeeplyNested: Story;
+export declare const NoRemoteUrl: Story;
+//# sourceMappingURL=feature-tree-table.stories.d.ts.map

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-tree-table.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAcvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0EnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AA4CF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAaF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}