@shepai/cli 1.151.2 → 1.152.0-pr476.5b101f5

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

@@ -0,0 +1,272 @@
+'use client';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useExternalStoreRuntime } from '@assistant-ui/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+// ── API helpers ─────────────────────────────────────────────────────────────
+async function fetchChatState(featureId) {
+    const res = await fetch(`/api/interactive/chat/${featureId}/messages`);
+    if (!res.ok) {
+        // eslint-disable-next-line no-console
+        console.error(`[ChatState] fetch failed: ${res.status}`, await res.text().catch(() => ''));
+        throw new Error(`Failed to fetch chat state: ${res.status}`);
+    }
+    return res.json();
+}
+async function postMessage(featureId, content, worktreePath) {
+    const res = await fetch(`/api/interactive/chat/${featureId}/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content, worktreePath }),
+    });
+    if (!res.ok)
+        throw new Error(`Failed to send message: ${res.status}`);
+    const data = (await res.json());
+    return data.message;
+}
+// ── Convert domain message to assistant-ui format ───────────────────────────
+function toThreadMessage(msg) {
+    return {
+        id: msg.id,
+        role: msg.role === InteractiveMessageRole.user ? 'user' : 'assistant',
+        content: [{ type: 'text', text: msg.content }],
+        createdAt: msg.createdAt ? new Date(msg.createdAt) : undefined,
+    };
+}
+// ── Query key ───────────────────────────────────────────────────────────────
+function chatQueryKey(featureId) {
+    return ['chat-messages', featureId];
+}
+/**
+ * `featureId` is a polymorphic scope key: a feature UUID, "repo-<id>", or "global".
+ * All API calls and SSE subscriptions are scoped to this key.
+ */
+export function useChatRuntime(featureId, worktreePath, options) {
+    const queryClient = useQueryClient();
+    // ── TanStack Query: fetch messages from backend ─────────────────────────
+    const { data: chatState, isLoading: isChatLoading } = useQuery({
+        queryKey: chatQueryKey(featureId),
+        queryFn: () => fetchChatState(featureId),
+        refetchInterval: 3000, // Fallback polling every 3s
+    });
+    // Auto-mark as read when chat tab is open and turn status is 'unread'
+    useEffect(() => {
+        if (chatState?.turnStatus === 'unread') {
+            void fetch(`/api/interactive/chat/${featureId}/mark-read`, { method: 'POST' });
+        }
+    }, [chatState?.turnStatus, featureId]);
+    const messages = useMemo(() => chatState?.messages ?? [], [chatState?.messages]);
+    const sessionStatus = chatState?.sessionStatus ?? null;
+    const backendStreamingText = chatState?.streamingText ?? null;
+    // Cache last known sessionInfo so PID stays visible after process exits
+    const lastSessionInfoRef = useRef(null);
+    if (chatState?.sessionInfo) {
+        lastSessionInfoRef.current = chatState.sessionInfo;
+    }
+    const sessionInfo = chatState?.sessionInfo ?? lastSessionInfoRef.current;
+    // ── SSE: real-time streaming deltas ─────────────────────────────────────
+    const [streamingText, setStreamingText] = useState('');
+    const [statusLog, setStatusLog] = useState(null);
+    const [awaitingResponse, setAwaitingResponse] = useState(false);
+    const awaitingTimerRef = useRef(null);
+    const eventSourceRef = useRef(null);
+    // Delayed awaiting — only show Thinking bubble after 600ms to avoid flash
+    const startAwaiting = useCallback(() => {
+        if (awaitingTimerRef.current)
+            clearTimeout(awaitingTimerRef.current);
+        awaitingTimerRef.current = setTimeout(() => setAwaitingResponse(true), 600);
+    }, []);
+    const cancelAwaiting = useCallback(() => {
+        if (awaitingTimerRef.current) {
+            clearTimeout(awaitingTimerRef.current);
+            awaitingTimerRef.current = null;
+        }
+        setAwaitingResponse(false);
+    }, []);
+    // Clear awaitingResponse when backend delivers a new assistant message
+    const lastMsgRole = messages.length > 0 ? messages[messages.length - 1].role : null;
+    useEffect(() => {
+        if (lastMsgRole === InteractiveMessageRole.assistant) {
+            cancelAwaiting();
+        }
+    }, [lastMsgRole, messages.length, cancelAwaiting]);
+    useEffect(() => {
+        const es = new EventSource(`/api/interactive/chat/${featureId}/stream`);
+        eventSourceRef.current = es;
+        es.addEventListener('delta', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.delta) {
+                    cancelAwaiting();
+                    setStreamingText((prev) => prev + data.delta);
+                    setStatusLog(null);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('activity', () => {
+            cancelAwaiting();
+            // Tool events are already persisted to DB — just refetch to show them
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+        });
+        es.addEventListener('log', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.log) {
+                    cancelAwaiting();
+                    setStatusLog(data.log);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('done', () => {
+            setStatusLog(null);
+            cancelAwaiting();
+            // Refetch first, THEN clear local streaming state so there's no gap
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) }).then(() => {
+                setStreamingText('');
+            });
+        });
+        es.onerror = () => {
+            // SSE dropped — the 3s polling handles reliability
+        };
+        return () => {
+            es.close();
+            eventSourceRef.current = null;
+        };
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Mutation: send user message ─────────────────────────────────────────
+    const sendMutation = useMutation({
+        mutationFn: (content) => postMessage(featureId, content, worktreePath ?? ''),
+        onMutate: async (content) => {
+            startAwaiting();
+            // Cancel in-flight refetches so our optimistic update isn't overwritten
+            await queryClient.cancelQueries({ queryKey: chatQueryKey(featureId) });
+            const previous = queryClient.getQueryData(chatQueryKey(featureId));
+            // Optimistically add user message
+            queryClient.setQueryData(chatQueryKey(featureId), (old) => ({
+                messages: [
+                    ...(old?.messages ?? []),
+                    {
+                        id: `optimistic-${Date.now()}`,
+                        featureId,
+                        role: InteractiveMessageRole.user,
+                        content,
+                        createdAt: new Date(),
+                        updatedAt: new Date(),
+                    },
+                ],
+                sessionStatus: old?.sessionStatus ?? 'booting',
+                streamingText: null,
+                sessionInfo: old?.sessionInfo ?? null,
+            }));
+            return { previous };
+        },
+        onError: (_err, _content, context) => {
+            // Rollback on error
+            if (context?.previous) {
+                queryClient.setQueryData(chatQueryKey(featureId), context.previous);
+            }
+        },
+        onSettled: () => {
+            // Refetch to reconcile optimistic data with server
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+        },
+    });
+    // ── Derive running state ────────────────────────────────────────────────
+    // Note: sendMutation.isPending is excluded — the 600ms awaitingResponse
+    // timer provides a smooth transition without flicker.
+    const isRunning = awaitingResponse || !!streamingText || !!statusLog || sessionStatus === 'booting';
+    // ── Build thread messages for assistant-ui ─────────────────────────────
+    const activeStreamText = streamingText ?? backendStreamingText ?? '';
+    const threadMessages = useMemo(() => {
+        const result = messages.map(toThreadMessage);
+        // Streaming text as the last message — may include a live activity suffix
+        if (activeStreamText.trim()) {
+            const parts = [{ type: 'text', text: activeStreamText }];
+            // Append live activity indicator when agent is doing tool work
+            if (statusLog) {
+                parts.push({ type: 'text', text: `*⏳ ${statusLog}*` });
+            }
+            result.push({ id: 'streaming', role: 'assistant', content: parts });
+        }
+        else if (statusLog) {
+            // No streaming text yet but agent is actively working (tool calls, etc.)
+            result.push({
+                id: 'streaming',
+                role: 'assistant',
+                content: [{ type: 'text', text: `*⏳ ${statusLog}*` }],
+            });
+        }
+        else if (awaitingResponse || sessionStatus === 'booting') {
+            // Note: sendMutation.isPending is NOT included here — the 600ms
+            // delay via startAwaiting() prevents flash on fast responses.
+            result.push({
+                id: 'streaming',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: sessionStatus === 'booting' ? '*Agent is waking up...*' : '*Thinking...*',
+                    },
+                ],
+            });
+        }
+        return result;
+    }, [messages, activeStreamText, awaitingResponse, sessionStatus, statusLog]);
+    // ── Status info for typing indicator ──────────────────────────────────
+    const status = useMemo(() => {
+        if (!isRunning)
+            return { isRunning: false, statusText: null };
+        return { isRunning: true, statusText: statusLog };
+    }, [isRunning, statusLog]);
+    // ── onNew: called by assistant-ui when user submits ─────────────────────
+    const onNew = useCallback(async (message) => {
+        const textPart = message.content.find((c) => c.type === 'text');
+        if (textPart?.type !== 'text' || !textPart.text.trim())
+            return;
+        const content = options?.contentTransform
+            ? options.contentTransform(textPart.text)
+            : textPart.text;
+        sendMutation.mutate(content, {
+            onSuccess: () => options?.onMessageSent?.(),
+        });
+    }, [sendMutation, options]);
+    // ── Clear chat ─────────────────────────────────────────────────────────
+    const clearChat = useCallback(async () => {
+        const res = await fetch(`/api/interactive/chat/${featureId}/messages`, { method: 'DELETE' });
+        if (!res.ok)
+            throw new Error(`Failed to clear chat: ${res.status}`);
+        setStreamingText('');
+        setStatusLog(null);
+        cancelAwaiting();
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Stop agent ────────────────────────────────────────────────────────
+    const stopAgent = useCallback(async () => {
+        const res = await fetch(`/api/interactive/chat/${featureId}/stop`, { method: 'POST' });
+        if (!res.ok)
+            throw new Error(`Failed to stop agent: ${res.status}`);
+        setStreamingText('');
+        setStatusLog(null);
+        cancelAwaiting();
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Build assistant-ui runtime ──────────────────────────────────────────
+    const runtime = useExternalStoreRuntime({
+        messages: threadMessages,
+        convertMessage: useCallback((msg) => msg, []),
+        isRunning,
+        onNew,
+        onCancel: useCallback(async () => {
+            setStreamingText('');
+            setStatusLog(null);
+            cancelAwaiting();
+        }, [cancelAwaiting]),
+    });
+    return { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading };
+}

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":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAKpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAwB5E,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,2CA0ZzF"}
+{"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;AA8B5E,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,2CAwczF"}

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

@@ -1,17 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { Panel, useReactFlow } from '@xyflow/react';
-import { Eye, EyeOff } from 'lucide-react';
-import { cn } from '../../../lib/utils.js';
+import { Sparkles, FolderPlus, Github, GitBranch } from 'lucide-react';
+import { useReactFlow } from '@xyflow/react';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
+import { CanvasToolbar } from '../../features/features-canvas/canvas-toolbar.js';
+import { FloatingActionButton, } from '../../common/floating-action-button/index.js';
 import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../../hooks/sidebar-features-context.js';
+import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { useSelectedFeatureId } from '../../../hooks/use-selected-feature-id.js';
 import { useSelectedRepository } from '../../../hooks/use-selected-repository.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { useDrawerCloseGuard } from '../../../hooks/drawer-close-guard.js';
 import { useViewportPersistence } from '../../../hooks/use-viewport-persistence.js';
+import { useSidebar } from '../../ui/sidebar.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 const AUTO_FOCUS_OPTIONS = {
@@ -289,8 +292,68 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             return nodes;
         return nodes.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
     }, [nodes, isCreateDrawerOpen]);
-    const archiveToggle = (_jsx(Panel, { position: "top-right", children: _jsxs("button", { type: "button", "aria-label": showArchived ? 'Hide archived features' : 'Show archived features', "data-testid": "archive-toggle-button", onClick: () => setShowArchived(!showArchived), className: cn('bg-card flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors', showArchived
-                ? 'border-primary/30 text-primary'
-                : 'text-muted-foreground hover:text-foreground'), children: [showArchived ? _jsx(Eye, { className: "h-3.5 w-3.5" }) : _jsx(EyeOff, { className: "h-3.5 w-3.5" }), showArchived ? 'Archived visible' : 'Show archived'] }) }));
-    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, toolbar: archiveToggle, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }));
+    const handlePickFolder = useCallback(() => {
+        window.dispatchEvent(new CustomEvent('shep:pick-folder'));
+    }, []);
+    const featureFlags = useFeatureFlags();
+    // (+) FAB actions — only visible on control center
+    const fabActions = useMemo(() => {
+        const actions = [
+            {
+                id: 'new-feature',
+                label: 'New Feature',
+                icon: _jsx(Sparkles, { className: "h-4 w-4" }),
+                onClick: () => {
+                    clickSound.play();
+                    guardedNavigate(() => router.push('/create'));
+                },
+            },
+            {
+                id: 'add-local-repo',
+                label: 'Local Folder',
+                icon: _jsx(FolderPlus, { className: "h-4 w-4" }),
+                onClick: handlePickFolder,
+            },
+        ];
+        if (featureFlags.adoptBranch) {
+            actions.push({
+                id: 'adopt-branch',
+                label: 'Adopt Branch',
+                icon: _jsx(GitBranch, { className: "h-4 w-4" }),
+                onClick: () => {
+                    guardedNavigate(() => router.push('/adopt'));
+                },
+            });
+        }
+        if (featureFlags.githubImport) {
+            actions.push({
+                id: 'add-github-repo',
+                label: 'From GitHub',
+                icon: _jsx(Github, { className: "h-4 w-4" }),
+                onClick: () => {
+                    window.dispatchEvent(new CustomEvent('shep:open-github-import'));
+                },
+            });
+        }
+        return actions;
+    }, [
+        clickSound,
+        guardedNavigate,
+        router,
+        handlePickFolder,
+        featureFlags.adoptBranch,
+        featureFlags.githubImport,
+    ]);
+    const canvasToolbar = (_jsx(CanvasToolbar, { showArchived: showArchived, onToggleArchived: () => setShowArchived(!showArchived), onResetViewport: resetViewport }));
+    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, toolbar: canvasToolbar, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null] }));
+}
+/** (+) FAB that tracks sidebar width via CSS var + transition. */
+function CreateFab({ actions }) {
+    const { state } = useSidebar();
+    // Sidebar expanded = var(--sidebar-width) = 16rem, collapsed = var(--sidebar-width-icon) = 3rem
+    // Position just outside the sidebar edge with 16px gap
+    const left = state === 'expanded'
+        ? 'calc(var(--sidebar-width) + 32px)'
+        : 'calc(var(--sidebar-width-icon) + 32px)';
+    return (_jsx(FloatingActionButton, { actions: actions, className: "!fixed bottom-6", style: { left, transition: 'left 200ms ease-in-out' } }));
 }

package/dist/src/presentation/web/components/features/features-canvas/canvas-toolbar.d.ts

@@ -0,0 +1,8 @@
+import type { Viewport } from '@xyflow/react';
+export interface CanvasToolbarProps {
+    showArchived: boolean;
+    onToggleArchived: () => void;
+    onResetViewport?: () => Viewport;
+}
+export declare function CanvasToolbar({ showArchived, onToggleArchived, onResetViewport, }: CanvasToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=canvas-toolbar.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/canvas-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/canvas-toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,QAAQ,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,eAAe,GAChB,EAAE,kBAAkB,2CAqDpB"}

package/dist/src/presentation/web/components/features/features-canvas/canvas-toolbar.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useReactFlow } from '@xyflow/react';
+import { Eye, EyeOff, ZoomIn, ZoomOut, Maximize, RotateCcw } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function CanvasToolbar({ showArchived, onToggleArchived, onResetViewport, }) {
+    const { zoomIn, zoomOut, fitView, setViewport } = useReactFlow();
+    const handleZoomIn = useCallback(() => {
+        zoomIn({ duration: 200 });
+    }, [zoomIn]);
+    const handleZoomOut = useCallback(() => {
+        zoomOut({ duration: 200 });
+    }, [zoomOut]);
+    const handleFitView = useCallback(() => {
+        fitView({ duration: 400, padding: 0.3 });
+    }, [fitView]);
+    const handleReset = useCallback(() => {
+        if (onResetViewport) {
+            const viewport = onResetViewport();
+            setViewport(viewport, { duration: 400 });
+        }
+    }, [onResetViewport, setViewport]);
+    return (_jsxs("div", { className: "bg-background flex items-center gap-1 rounded-xl border px-2 py-1.5 shadow-md dark:bg-neutral-900", children: [_jsx(ToolbarButton, { onClick: onToggleArchived, title: showArchived ? 'Hide archived' : 'Show archived', active: showArchived, label: showArchived ? 'Hide Archived' : 'Show Archived', children: showArchived ? _jsx(Eye, { className: "h-4 w-4" }) : _jsx(EyeOff, { className: "h-4 w-4" }) }), _jsx("div", { className: "bg-border mx-1 h-5 w-px" }), _jsx(ToolbarButton, { onClick: handleZoomOut, title: "Zoom out", children: _jsx(ZoomOut, { className: "h-4 w-4" }) }), _jsx(ToolbarButton, { onClick: handleZoomIn, title: "Zoom in", children: _jsx(ZoomIn, { className: "h-4 w-4" }) }), _jsx(ToolbarButton, { onClick: handleFitView, title: "Fit view", children: _jsx(Maximize, { className: "h-4 w-4" }) }), onResetViewport ? (_jsx(ToolbarButton, { onClick: handleReset, title: "Reset view", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })) : null] }));
+}
+// ── Internal button ──────────────────────────────────────────────────────
+function ToolbarButton({ children, onClick, title, label, active, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, title: title, className: cn('inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium transition-colors', 'hover:bg-accent hover:text-accent-foreground', active ? 'text-primary bg-primary/10' : 'text-muted-foreground'), children: [children, label ? _jsx("span", { children: label }) : null] }));
+}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts

@@ -18,9 +18,8 @@ export interface FeaturesCanvasProps {
     onConnect?: (connection: Connection) => void;
     onCanvasDrag?: () => void;
     onMoveEnd?: OnMoveEnd;
-    onResetViewport?: () => Viewport;
     toolbar?: React.ReactNode;
     emptyState?: React.ReactNode;
 }
-export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, onResetViewport, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=features-canvas.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,qCAAqC,CAAC;AAGlG,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,QAAQ,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA0IrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,qCAAqC,CAAC;AAGlG,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAyIrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ReactFlow, Background, BackgroundVariant, Controls, ControlButton, useReactFlow, } from '@xyflow/react';
-import { Plus, RotateCcw } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ReactFlow, Background, BackgroundVariant, Panel } from '@xyflow/react';
+import { Plus } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Button } from '../../ui/button.js';
 import { EmptyState } from '../../common/empty-state/index.js';
@@ -10,15 +10,7 @@ import { FeatureNode } from '../../common/feature-node/index.js';
 import { RepositoryNode } from '../../common/repository-node/index.js';
 import { DependencyEdge } from './dependency-edge.js';
 const FALLBACK_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
-function ResetButton({ onResetViewport }) {
-    const { setViewport } = useReactFlow();
-    const handleReset = useCallback(() => {
-        const viewport = onResetViewport();
-        setViewport(viewport, { duration: 400 });
-    }, [onResetViewport, setViewport]);
-    return (_jsx(ControlButton, { onClick: handleReset, title: "Reset view", "aria-label": "Reset view", children: _jsx(RotateCcw, { style: { fill: 'none' } }) }));
-}
-export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, onResetViewport, toolbar, emptyState, }) {
+export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
@@ -77,5 +69,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedReposi
     }, [isEmpty]);
     const fallbackEmptyState = isEmpty && !emptyState ? (_jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) })) : null;
     const overlayContent = emptyState ?? fallbackEmptyState;
-    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, className: "[&_.react-flow__pane]:!cursor-default", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && (_jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null })), toolbar] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null] }));
+    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, className: "[&_.react-flow__pane]:!cursor-default", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && toolbar ? (_jsx(Panel, { position: "top-right", className: "!mt-3 !mr-3", children: toolbar })) : null] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null] }));
 }

package/dist/src/presentation/web/components/features/settings/settings-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA2B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA6QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CA6pCzB"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EACV,QAAQ,EAIT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA4B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA6QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CAwwCzB"}

package/dist/src/presentation/web/components/features/settings/settings-page-client.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
-import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Minus, Plus, ExternalLink, Settings2, Timer, } from 'lucide-react';
+import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Minus, Plus, ExternalLink, Settings2, Timer, MessageSquare, } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '../../../lib/utils.js';
 import { Label } from '../../ui/label.js';
@@ -32,6 +32,7 @@ const SECTIONS = [
     { id: 'stage-timeouts', label: 'Timeouts', icon: Timer },
     { id: 'notifications', label: 'Notifications', icon: Bell },
     { id: 'feature-flags', label: 'Flags', icon: Flag },
+    { id: 'interactive-agent', label: 'Chat', icon: MessageSquare },
     { id: 'database', label: 'Database', icon: Database },
 ];
 function useSaveIndicator() {
@@ -164,6 +165,15 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
     // Analyze-repo agent timeout state
     const analyzeRepoConfig = settings.workflow.analyzeRepoTimeouts;
     const [analyzeRepoTimeout, setAnalyzeRepoTimeout] = useState(String(Math.round((analyzeRepoConfig?.analyzeMs ?? 600_000) / 1000)));
+    // Interactive agent state
+    const interactiveAgentConfig = settings.interactiveAgent ?? {
+        enabled: true,
+        autoTimeoutMinutes: 15,
+        maxConcurrentSessions: 3,
+    };
+    const [interactiveEnabled, setInteractiveEnabled] = useState(interactiveAgentConfig.enabled);
+    const [interactiveTimeout, setInteractiveTimeout] = useState(String(interactiveAgentConfig.autoTimeoutMinutes));
+    const [interactiveSessions, setInteractiveSessions] = useState(String(interactiveAgentConfig.maxConcurrentSessions));
     // Notification state
     const [inApp, setInApp] = useState(settings.notifications.inApp.enabled);
     const [events, setEvents] = useState({ ...settings.notifications.events });
@@ -506,7 +516,40 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                             const newFlags = { ...flags, reactFileManager: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } })] }), _jsx(SectionHint, { children: "Experimental features that are still under development. Enable at your own risk \u2014 they may change or be removed in future versions. Debug mode adds verbose logging useful for troubleshooting." })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: "Database", description: "Local storage information", testId: "database-settings-section", children: [_jsx(SettingsRow, { label: "Location", description: "Path to the local SQLite database", children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: "Size", children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
+                                        } })] }), _jsx(SectionHint, { children: "Experimental features that are still under development. Enable at your own risk \u2014 they may change or be removed in future versions. Debug mode adds verbose logging useful for troubleshooting." })] }), _jsxs("div", { id: "section-interactive-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: MessageSquare, title: "Interactive Agent", description: "Chat tab settings for per-feature interactive agent sessions", testId: "interactive-agent-settings-section", children: [_jsx(SwitchRow, { label: "Enable Chat tab", description: "Show the Chat tab on all feature detail pages", id: "interactive-agent-enabled", testId: "switch-interactive-agent-enabled", checked: interactiveEnabled, onChange: (v) => {
+                                            setInteractiveEnabled(v);
+                                            save({
+                                                interactiveAgent: {
+                                                    enabled: v,
+                                                    autoTimeoutMinutes: parseInt(interactiveTimeout, 10) || 15,
+                                                    maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
+                                                },
+                                            });
+                                        } }), _jsx(SettingsRow, { label: "Auto-timeout", description: "Minutes of inactivity before the agent is stopped automatically (1\u2013120)", htmlFor: "interactive-agent-timeout", children: _jsx(NumberStepper, { id: "interactive-agent-timeout", testId: "input-interactive-agent-timeout", value: interactiveTimeout, placeholder: "15", min: 1, max: 120, suffix: "min", onChange: setInteractiveTimeout, onBlur: () => {
+                                                const n = parseInt(interactiveTimeout, 10);
+                                                const clamped = Number.isNaN(n) ? 15 : Math.min(120, Math.max(1, n));
+                                                const clamped_str = String(clamped);
+                                                setInteractiveTimeout(clamped_str);
+                                                save({
+                                                    interactiveAgent: {
+                                                        enabled: interactiveEnabled,
+                                                        autoTimeoutMinutes: clamped,
+                                                        maxConcurrentSessions: parseInt(interactiveSessions, 10) || 3,
+                                                    },
+                                                });
+                                            } }) }), _jsx(SettingsRow, { label: "Max concurrent sessions", description: "Maximum number of active interactive agent sessions at once (1\u201310)", htmlFor: "interactive-agent-sessions", children: _jsx(NumberStepper, { id: "interactive-agent-sessions", testId: "input-interactive-agent-sessions", value: interactiveSessions, placeholder: "3", min: 1, max: 10, onChange: setInteractiveSessions, onBlur: () => {
+                                                const n = parseInt(interactiveSessions, 10);
+                                                const clamped = Number.isNaN(n) ? 3 : Math.min(10, Math.max(1, n));
+                                                const clamped_str = String(clamped);
+                                                setInteractiveSessions(clamped_str);
+                                                save({
+                                                    interactiveAgent: {
+                                                        enabled: interactiveEnabled,
+                                                        autoTimeoutMinutes: parseInt(interactiveTimeout, 10) || 15,
+                                                        maxConcurrentSessions: clamped,
+                                                    },
+                                                });
+                                            } }) })] }), _jsx(SectionHint, { children: "The Chat tab spawns a persistent agent process per feature. Auto-timeout stops idle sessions automatically to conserve resources. The concurrent session cap prevents runaway resource usage on developer machines." })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: "Database", description: "Local storage information", testId: "database-settings-section", children: [_jsx(SettingsRow, { label: "Location", description: "Path to the local SQLite database", children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: "Size", children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
                                     {
                                         label: 'Settings service',
                                         href: 'https://github.com/shep-ai/cli/blob/main/docs/architecture/settings-service.md',

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+JD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,2CAUhE"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiHD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,2CAYhE"}