@shepai/cli 1.179.1 → 1.180.0

package/dist/src/presentation/web/components/features/application-page/terminal-tab.js

@@ -0,0 +1,224 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Terminal Tab
+ *
+ * Renders an xterm.js-backed interactive terminal wired to a server-side
+ * PTY session rooted at an application's working directory. Input is sent
+ * via POST, output is streamed over SSE. The session is created lazily on
+ * first mount and reused across tab switches (the parent keeps this
+ * component mounted via CSS visibility so history persists).
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import '@xterm/xterm/css/xterm.css';
+// Matches xterm.js's default dark theme with a slightly softer background
+// that blends with the app's panel surfaces.
+const TERMINAL_THEME = {
+    background: '#0b0d10',
+    foreground: '#e5e7eb',
+    cursor: '#e5e7eb',
+    cursorAccent: '#0b0d10',
+    selectionBackground: '#3b82f680',
+    black: '#1f2937',
+    red: '#ef4444',
+    green: '#22c55e',
+    yellow: '#eab308',
+    blue: '#3b82f6',
+    magenta: '#a855f7',
+    cyan: '#06b6d4',
+    white: '#e5e7eb',
+    brightBlack: '#4b5563',
+    brightRed: '#f87171',
+    brightGreen: '#4ade80',
+    brightYellow: '#facc15',
+    brightBlue: '#60a5fa',
+    brightMagenta: '#c084fc',
+    brightCyan: '#22d3ee',
+    brightWhite: '#f9fafb',
+};
+export function TerminalTab({ cwd, className }) {
+    const containerRef = useRef(null);
+    const terminalRef = useRef(null);
+    const fitRef = useRef(null);
+    const sessionIdRef = useRef(null);
+    const eventSourceRef = useRef(null);
+    const [status, setStatus] = useState('initializing');
+    const [errorMessage, setErrorMessage] = useState(null);
+    // Mount once: create terminal, create session, open SSE, wire input.
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let cancelled = false;
+        const term = new Terminal({
+            cursorBlink: true,
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+            fontSize: 13,
+            lineHeight: 1.2,
+            theme: TERMINAL_THEME,
+            allowProposedApi: true,
+            scrollback: 5000,
+            convertEol: true,
+        });
+        const fit = new FitAddon();
+        term.loadAddon(fit);
+        term.loadAddon(new WebLinksAddon());
+        term.open(containerRef.current);
+        terminalRef.current = term;
+        fitRef.current = fit;
+        try {
+            fit.fit();
+        }
+        catch {
+            // container may not have layout yet; a ResizeObserver below will retry
+        }
+        // Create the session on the server.
+        void (async () => {
+            try {
+                const res = await fetch('/api/terminal', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        cwd,
+                        cols: term.cols,
+                        rows: term.rows,
+                    }),
+                });
+                if (!res.ok) {
+                    const body = (await res.json().catch(() => ({ error: res.statusText })));
+                    throw new Error(body.error ?? `HTTP ${res.status}`);
+                }
+                const data = (await res.json());
+                if (cancelled)
+                    return;
+                sessionIdRef.current = data.sessionId;
+                // Open SSE for output.
+                const es = new EventSource(`/api/terminal/${data.sessionId}/stream`);
+                eventSourceRef.current = es;
+                es.addEventListener('data', (ev) => {
+                    try {
+                        const payload = JSON.parse(ev.data);
+                        term.write(payload.data);
+                    }
+                    catch {
+                        // ignore malformed event
+                    }
+                });
+                es.addEventListener('exit', (ev) => {
+                    try {
+                        const payload = JSON.parse(ev.data);
+                        term.writeln('');
+                        term.writeln(`\x1b[90m[process exited with code ${payload.code ?? 'null'}]\x1b[0m`);
+                    }
+                    catch {
+                        term.writeln('\x1b[90m[process exited]\x1b[0m');
+                    }
+                    setStatus('exited');
+                    es.close();
+                    eventSourceRef.current = null;
+                });
+                es.onopen = () => {
+                    if (!cancelled)
+                        setStatus('connected');
+                };
+                es.onerror = () => {
+                    if (cancelled)
+                        return;
+                    // EventSource auto-reconnects; don't flip status unless we never
+                    // connected in the first place. Use functional setState to avoid
+                    // closing over a stale `status` from the render that created this
+                    // effect.
+                    setStatus((prev) => {
+                        if (prev === 'initializing') {
+                            setErrorMessage('Failed to connect to terminal stream');
+                            return 'error';
+                        }
+                        return prev;
+                    });
+                };
+                // Wire input: forward every keystroke to the server.
+                term.onData((chunk) => {
+                    const sid = sessionIdRef.current;
+                    if (!sid)
+                        return;
+                    void fetch(`/api/terminal/${sid}/input`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ data: chunk }),
+                    }).catch(() => {
+                        // swallow — the SSE error path will surface lost sessions
+                    });
+                });
+                // Wire resize: debounce resize requests to the server.
+                let resizeTimer = null;
+                term.onResize(({ cols, rows }) => {
+                    const sid = sessionIdRef.current;
+                    if (!sid)
+                        return;
+                    if (resizeTimer)
+                        clearTimeout(resizeTimer);
+                    resizeTimer = setTimeout(() => {
+                        void fetch(`/api/terminal/${sid}/resize`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ cols, rows }),
+                        }).catch(() => {
+                            // ignore
+                        });
+                    }, 50);
+                });
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setStatus('error');
+                setErrorMessage(err instanceof Error ? err.message : String(err));
+                term.writeln(`\x1b[31m[terminal error: ${err instanceof Error ? err.message : String(err)}]\x1b[0m`);
+            }
+        })();
+        // Observe container size changes and keep xterm fitted.
+        const ro = new ResizeObserver(() => {
+            try {
+                fit.fit();
+            }
+            catch {
+                // ignore — container may be hidden when tab is not active
+            }
+        });
+        ro.observe(containerRef.current);
+        return () => {
+            cancelled = true;
+            ro.disconnect();
+            // Close SSE first so pending output doesn't hit a disposed terminal.
+            const es = eventSourceRef.current;
+            if (es) {
+                es.close();
+                eventSourceRef.current = null;
+            }
+            // Tell the server to kill the PTY.
+            const sid = sessionIdRef.current;
+            if (sid) {
+                // Use keepalive so the request still fires as the page tears down.
+                void fetch(`/api/terminal/${sid}`, {
+                    method: 'DELETE',
+                    keepalive: true,
+                }).catch(() => {
+                    // ignore
+                });
+                sessionIdRef.current = null;
+            }
+            try {
+                term.dispose();
+            }
+            catch {
+                // ignore
+            }
+            terminalRef.current = null;
+            fitRef.current = null;
+        };
+        // Re-create the session whenever the cwd changes.
+    }, [cwd]);
+    return (_jsxs("div", { className: `relative flex min-h-0 flex-1 flex-col bg-[#0b0d10] ${className ?? ''}`, children: [status === 'error' && errorMessage !== null && (_jsx("div", { className: "absolute top-2 left-2 z-10 rounded border border-red-500/40 bg-red-950/80 px-2 py-1 text-[11px] text-red-200", role: "alert", children: errorMessage })), _jsx("div", { ref: containerRef, className: "min-h-0 flex-1 px-2 py-2" })] }));
+}

package/dist/src/presentation/web/components/features/application-page/web-preview-tab.d.ts

@@ -0,0 +1,6 @@
+import type { DeployActionState } from '../../../hooks/use-deploy-action.js';
+export interface WebPreviewTabProps {
+    deploy: DeployActionState;
+}
+export declare function WebPreviewTab({ deploy }: WebPreviewTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=web-preview-tab.d.ts.map

package/dist/src/presentation/web/components/features/application-page/web-preview-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-preview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/application-page/web-preview-tab.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE,kBAAkB,2CAiF3D"}

package/dist/src/presentation/web/components/features/application-page/web-preview-tab.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Web preview tab — embeds the running dev server as an iframe inside
+ * the application page's right pane. Wired to the same deploy state
+ * as the top-bar Run button so there's a single source of truth.
+ *
+ * States:
+ *   - Ready   → <iframe src={url}> with an "open in new tab" badge
+ *   - Booting → spinner + "Starting dev server…"
+ *   - Idle    → friendly empty state pointing at the Run button
+ *   - Error   → deploy error with a retry hint
+ *
+ * The iframe is always mounted once we have a URL so switching tabs
+ * (IDE → Terminal → Web) does NOT tear down the preview session. It
+ * is loaded without a `sandbox` attribute because Vite HMR needs
+ * websockets and script execution; this is safe because the target
+ * is always localhost on the user's machine.
+ */
+import { useCallback } from 'react';
+import { ExternalLink, Loader2, Play, TriangleAlert, Globe } from 'lucide-react';
+import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
+export function WebPreviewTab({ deploy }) {
+    const openInNewTab = useCallback(() => {
+        if (deploy.url)
+            window.open(deploy.url, '_blank', 'noopener,noreferrer');
+    }, [deploy.url]);
+    // Ready — live iframe
+    if (deploy.status === DeploymentState.Ready && deploy.url) {
+        return (
+        // Outer container is themed (not hard-coded bg-white) so the
+        // URL bar gets a proper dark-mode surface underneath; only the
+        // iframe itself is forced white so the rendered app has a
+        // neutral canvas.
+        _jsxs("div", { className: "bg-background flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "border-border bg-muted/70 text-foreground flex h-8 shrink-0 items-center gap-2 border-b px-2 text-[11px] dark:bg-neutral-900", children: [_jsxs("span", { className: "relative flex h-2 w-2 shrink-0", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" }), _jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })] }), _jsx("span", { className: "text-foreground/90 truncate font-mono", children: deploy.url }), _jsx("div", { className: "flex-1" }), _jsxs("button", { type: "button", onClick: openInNewTab, className: "text-muted-foreground hover:text-foreground hover:bg-background/60 inline-flex items-center gap-1 rounded px-1.5 py-0.5 transition-colors dark:hover:bg-neutral-800", title: "Open in a new browser tab", children: [_jsx(ExternalLink, { className: "h-3 w-3" }), _jsx("span", { children: "Open" })] })] }), _jsx("iframe", { src: deploy.url, className: "min-h-0 w-full flex-1 border-0 bg-white", title: "Application preview" }, deploy.url)] }));
+    }
+    // Booting — spinner
+    if (deploy.status === DeploymentState.Booting || deploy.deployLoading) {
+        return (_jsx(EmptyState, { icon: _jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" }), title: "Starting dev server\u2026", description: "Installing dependencies and booting the app. This can take a minute on the first run." }));
+    }
+    // Error
+    if (deploy.deployError) {
+        return (_jsx(EmptyState, { icon: _jsx(TriangleAlert, { className: "h-8 w-8 text-red-500" }), title: "Failed to start dev server", description: deploy.deployError, actionLabel: "Retry", onAction: deploy.deploy }));
+    }
+    // Idle — CTA directly kicks off the dev server. Previously this
+    // fell through to `onRunClicked` (which only switched the view to
+    // Web) so clicking it while already on the Web tab did nothing.
+    return (_jsx(EmptyState, { icon: _jsx(Globe, { className: "text-muted-foreground h-8 w-8" }), title: "No dev server running", description: "Click Preview to install dependencies and start the app. The preview will appear here.", actionLabel: "Preview", actionIcon: _jsx(Play, { className: "h-3.5 w-3.5 fill-current" }), onAction: deploy.deploy }));
+}
+function EmptyState({ icon, title, description, actionLabel, actionIcon, onAction, }) {
+    return (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [icon, _jsx("h3", { className: "text-foreground text-sm font-semibold", children: title }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: description }), actionLabel && onAction ? (_jsxs("button", { type: "button", onClick: onAction, 
+                    // AI-purple palette — identical to the top-bar Preview
+                    // button (run-dev-button.tsx idle state) so both entry
+                    // points feel like the same action, not two competing
+                    // affordances.
+                    className: "mt-2 inline-flex h-8 items-center gap-1.5 rounded-md border border-violet-500/50 bg-gradient-to-br from-indigo-500/15 to-violet-500/20 px-3 text-xs font-medium text-violet-700 transition-colors hover:from-indigo-500/25 hover:to-violet-500/30 dark:text-violet-300", children: [actionIcon, _jsx("span", { children: actionLabel })] })) : null] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSheet.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatSheet.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,eAAe,4CA4Y9B"}
+{"version":3,"file":"ChatSheet.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatSheet.tsx"],"names":[],"mappings":"AA4DA,wBAAgB,eAAe,4CA+Y9B"}

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

@@ -10,6 +10,7 @@ import { ChatDotIndicator } from './ChatDotIndicator.js';
 import { useTurnStatus } from '../../../hooks/turn-statuses-provider.js';
 import { useFabLayout } from '../../../hooks/fab-layout-context.js';
 import { useSidebar } from '../../ui/sidebar.js';
+import { useSidebarFeaturesContext } from '../../../hooks/sidebar-features-context.js';
 // ── Persistent global chat popup (draggable + resizable) ──────────────────
 const DEFAULT_W = 520;
 const DEFAULT_H_VH = 70; // percentage of viewport height
@@ -52,6 +53,7 @@ export function GlobalChatPopup() {
     const globalChatTurnStatus = useTurnStatus('global');
     const { swapPosition } = useFabLayout();
     const { state: sidebarState } = useSidebar();
+    const { hasRepositories } = useSidebarFeaturesContext();
     // Position/size — initialized from localStorage
     // eslint-disable-next-line react/hook-use-state -- wrapped setters below
     const [pos, setPosRaw] = useState(() => loadPersistedState().pos);
@@ -259,11 +261,11 @@ export function GlobalChatPopup() {
                             };
                             document.addEventListener('mousemove', onMove);
                             document.addEventListener('mouseup', onUp);
-                        }, className: "absolute end-0 bottom-0 z-10 h-4 w-4 cursor-se-resize" })) : null] })) : null, _jsxs(ChatFabWrapper, { swapPosition: swapPosition, sidebarState: sidebarState, isMaximized: isMaximized, children: [_jsxs(Button, { size: "icon", onClick: toggle, className: cn('relative h-14 w-14 rounded-full shadow-lg', 'transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95', isOpen
+                        }, className: "absolute end-0 bottom-0 z-10 h-4 w-4 cursor-se-resize" })) : null] })) : null, !hasRepositories ? null : (_jsxs(ChatFabWrapper, { swapPosition: swapPosition, sidebarState: sidebarState, isMaximized: isMaximized, children: [_jsxs(Button, { size: "icon", onClick: toggle, className: cn('relative h-14 w-14 rounded-full shadow-lg', 'transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95', isOpen
                             ? 'bg-violet-600 text-white hover:bg-violet-500'
                             : 'bg-violet-500 text-white hover:bg-violet-400 dark:bg-violet-500 dark:hover:bg-violet-400', 
                         // Animated states when chat is closed
-                        !isOpen && globalChatTurnStatus === 'processing' && 'chat-fab-spinning', !isOpen && globalChatTurnStatus === 'unread' && 'chat-fab-glow-unread', !isOpen && globalChatTurnStatus === 'awaiting_input' && 'chat-fab-glow-awaiting'), children: [_jsx(MessageSquare, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100') }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0') }), !isOpen && _jsx(ChatDotIndicator, { status: globalChatTurnStatus, className: "end-0 top-0" })] }), _jsx("div", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 opacity-0 transition-all duration-200 group-hover/fab:translate-y-0 group-hover/fab:opacity-100", children: _jsxs("div", { className: "bg-foreground rounded-lg px-3 py-1.5 text-center shadow-lg", children: [_jsx("p", { className: "text-background text-xs font-medium whitespace-nowrap", children: t('chat.shepChat') }), _jsxs("p", { className: "text-background/50 mt-0.5 flex items-center justify-center gap-1 text-[10px]", children: [_jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u2318" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u21E7" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "K" })] })] }) })] })] }));
+                        !isOpen && globalChatTurnStatus === 'processing' && 'chat-fab-spinning', !isOpen && globalChatTurnStatus === 'unread' && 'chat-fab-glow-unread', !isOpen && globalChatTurnStatus === 'awaiting_input' && 'chat-fab-glow-awaiting'), children: [_jsx(MessageSquare, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100') }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0') }), !isOpen && _jsx(ChatDotIndicator, { status: globalChatTurnStatus, className: "end-0 top-0" })] }), _jsx("div", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 opacity-0 transition-all duration-200 group-hover/fab:translate-y-0 group-hover/fab:opacity-100", children: _jsxs("div", { className: "bg-foreground rounded-lg px-3 py-1.5 text-center shadow-lg", children: [_jsx("p", { className: "text-background text-xs font-medium whitespace-nowrap", children: t('chat.shepChat') }), _jsxs("p", { className: "text-background/50 mt-0.5 flex items-center justify-center gap-1 text-[10px]", children: [_jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u2318" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u21E7" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "K" })] })] }) })] }))] }));
 }
 /** Wrapper for the Chat FAB that handles position swapping. */
 function ChatFabWrapper({ swapPosition, sidebarState, isMaximized, children, }) {

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

@@ -1,6 +1,43 @@
+import type { ChatState } from '../../../../../../packages/core/src/application/ports/output/services/interactive-session-service.interface.js';
+import type { PlaceholderStep } from './workflow-placeholder.js';
 export interface ChatTabProps {
     featureId: string;
     worktreePath?: string;
+    /** Seed the agent override (e.g. from an Application's agentType) */
+    initialAgent?: string;
+    /** Seed the model override (e.g. from an Application's modelOverride) */
+    initialModel?: string;
+    /**
+     * Optional SSR-loaded chat state — seeds the query cache so messages
+     * already persisted server-side render on first paint without a fetch.
+     */
+    initialChatState?: ChatState;
+    /**
+     * When true, skip rendering the internal session-info/clear toolbar.
+     * The hosting page is expected to surface this info elsewhere (e.g.
+     * the ApplicationPage top bar). Lets left/right panes start flush
+     * with the top bar — no mismatched inner toolbar heights.
+     */
+    hideHeader?: boolean;
+    /**
+     * Fires exactly once, the first time every step in the agent's
+     * declared SHEP plan reaches `done` status. The host page uses
+     * this to auto-run the dev-server preview once the workflow has
+     * fully finished scaffolding the app.
+     */
+    onAllStepsComplete?: () => void;
+    /**
+     * When provided, the chat renders a STEP TRACKER-ONLY view:
+     * the flat message thread is suppressed entirely and the
+     * tracker sits in its place, showing these placeholder cards
+     * until real `workflow_steps` rows arrive from the backend.
+     *
+     * ApplicationPage passes the 9 application-creation step titles
+     * here so the user sees the full progress skeleton the instant
+     * they land, instead of an empty area that pops in a beat
+     * later.
+     */
+    workflowPlaceholder?: PlaceholderStep[];
 }
-export declare function ChatTab({ featureId, worktreePath }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatTab.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAsHhE"}
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAUtH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;CACzC;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,YAAY,2CAiLd"}

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

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssistantRuntimeProvider } from '@assistant-ui/react';
-import { Trash2, Cpu } from 'lucide-react';
+import { Trash2, Cpu, User } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Thread } from '../../assistant-ui/thread.js';
 import { useAttachments } from '../../../hooks/use-attachments.js';
@@ -12,20 +12,34 @@ import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index
 import { useChatRuntime } from './useChatRuntime.js';
 import { ChatComposer } from './ChatComposer.js';
 import { InteractionBubble } from './InteractionBubble.js';
+import { StepTracker } from './StepTracker.js';
 const IS_DEV = process.env.NODE_ENV === 'development';
-export function ChatTab({ featureId, worktreePath }) {
-    const [overrideAgent, setOverrideAgent] = useState(undefined);
-    const [overrideModel, setOverrideModel] = useState(undefined);
+export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }) {
+    const [overrideAgent, setOverrideAgent] = useState(initialAgent);
+    const [overrideModel, setOverrideModel] = useState(initialModel);
     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, pendingInteraction, respondToInteraction, } = useChatRuntime(featureId, worktreePath, {
+    const { runtime, status, clearChat, sessionInfo, isChatLoading, pendingInteraction, respondToInteraction, stepProgress, initialRequestMessage, } = useChatRuntime(featureId, worktreePath, {
         contentTransform,
         onMessageSent: att.clearAttachments,
         model: overrideModel,
         agentType: overrideAgent,
         debugMode,
+        initialChatState,
     });
+    // Fire the all-steps-complete callback exactly once per mount.
+    // Using a ref (not a dependency) prevents re-firing if the parent
+    // passes a new callback identity on every render.
+    const allDoneFiredRef = useRef(false);
+    const onAllStepsCompleteRef = useRef(onAllStepsComplete);
+    onAllStepsCompleteRef.current = onAllStepsComplete;
+    useEffect(() => {
+        if (stepProgress.allDone && !allDoneFiredRef.current) {
+            allDoneFiredRef.current = true;
+            onAllStepsCompleteRef.current?.();
+        }
+    }, [stepProgress.allDone]);
     const handlePickFiles = useCallback(async () => {
         try {
             const res = await fetch('/api/dialog/pick-files');
@@ -51,11 +65,42 @@ export function ChatTab({ featureId, worktreePath }) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- att.addAttachment is a stable callback from useAttachments
     }, [featureId, att.addAttachment]);
+    // Compute the tracker's step list: real workflow rows when the
+    // orchestrator has written them, otherwise synthesised pending
+    // cards from `workflowPlaceholder` so the user sees the full
+    // progress skeleton from the first paint. Real rows replace the
+    // placeholder atomically the moment the first `workflow_step`
+    // SSE chunk lands.
+    const trackerSteps = stepProgress.hasPlan
+        ? stepProgress.steps
+        : (workflowPlaceholder ?? []).map((p) => ({
+            definition: {
+                id: `placeholder-${p.stepKey}`,
+                stepKey: p.stepKey,
+                title: p.title,
+                description: p.description,
+            },
+            status: 'pending',
+            metadata: null,
+            toolMessages: [],
+        }));
+    const showTracker = trackerSteps.length > 0;
     const composer = (_jsx(ChatComposer, { attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
                 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, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [hideHeader ? null : (_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, hideEmpty: showTracker, beforeMessages: showTracker ? (_jsxs(_Fragment, { children: [initialRequestMessage ? (_jsx(InitialRequestBubble, { text: initialRequestMessage.content })) : null, _jsx(StepTracker, { steps: trackerSteps, collapsedSummary: stepProgress.hasPlan === true && stepProgress.allDone === true, activeStepId: stepProgress.activeStepId, liveStatus: stepProgress.liveStatus })] })) : undefined, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
+}
+// ── Initial request bubble ──────────────────────────────────────────────────
+//
+// A lightweight user-message lookalike that the host pane renders
+// above the step tracker. We don't go through the full assistant-ui
+// `UserMessage` component because this bubble lives OUTSIDE the
+// Thread's message iteration — it's a purely presentational anchor
+// for the original ask that kicked off the workflow. Visuals match
+// the real user bubble in `thread.tsx` so the swap is invisible.
+function InitialRequestBubble({ text }) {
+    return (_jsxs("div", { className: "group animate-in fade-in-0 slide-in-from-top-1 flex w-full items-start gap-2.5 px-4 py-0.5 duration-300 ease-out", children: [_jsx("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-violet-500/15", children: _jsx(User, { className: "h-3.5 w-3.5 text-violet-500" }) }), _jsx("div", { className: "flex max-w-[85%] min-w-0 flex-col gap-0.5", children: _jsx("div", { className: "text-foreground mt-px overflow-hidden rounded-2xl rounded-tl-sm border border-violet-500/15 bg-violet-500/8 px-4 py-2 text-sm leading-relaxed break-words whitespace-pre-wrap shadow-sm backdrop-blur-md", children: text }) })] }));
 }
 // ── Loading skeleton ────────────────────────────────────────────────────────
 function ChatSkeleton() {

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

@@ -0,0 +1,36 @@
+import type { EnhancedStepState } from './useChatRuntime.js';
+export interface StepTrackerProps {
+    steps: EnhancedStepState[];
+    className?: string;
+    /**
+     * When true, the tracker renders as a single collapsed "Initial
+     * setup complete" summary card. Clicking it expands the full
+     * 8-card breakdown inline. Used once the whole workflow has
+     * finished — the user is now past setup and typically wants
+     * the chat thread to breathe, not a tall tracker block.
+     */
+    collapsedSummary?: boolean;
+    /**
+     * Id of the currently-running workflow step. Used to attach the
+     * `liveStatus` indicator to the right card so the agent's in-flight
+     * activity surfaces inline next to its spinner instead of as a
+     * floating bubble below the tracker.
+     */
+    activeStepId?: string | null;
+    /**
+     * Short live-status string ("Thinking…", "Reading file X", a
+     * truncated chunk of the streaming reply). Rendered inline inside
+     * the running step card.
+     */
+    liveStatus?: string | null;
+}
+/**
+ * Vertical list of workflow step cards with a status indicator,
+ * friendly title/description, and an expandable body. The expanded
+ * view shows the step's metadata summary and any tool-event
+ * messages (Bash, Read, Write, Edit, …) that the agent produced
+ * while this step was active — the same bubble component the
+ * regular thread would have used, just grouped by step.
+ */
+export declare function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }: StepTrackerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StepTracker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepTracker.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAiC1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,kDAwDlB"}