@shepai/cli 1.179.1 → 1.180.0

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

@@ -1,3 +1,4 @@
+import type { InteractiveMessage, WorkflowStep } from '../../../../../../packages/core/src/domain/generated/output.js';
 /** Shape matching UserInteractionData from the agent executor interface. */
 export interface InteractionData {
     toolCallId: string;
@@ -12,12 +13,54 @@ export interface InteractionData {
         multiSelect: boolean;
     }[];
 }
+/** Chat state returned by the backend — matches ChatState from service interface */
+interface ChatState {
+    messages: InteractiveMessage[];
+    sessionStatus: string | null;
+    streamingText: string | null;
+    sessionInfo: SessionInfo | null;
+    turnStatus?: string;
+    pendingInteraction?: InteractionData | null;
+    workflow?: WorkflowView | null;
+}
+/** Workflow view shape — mirrors the core port. */
+export interface WorkflowView {
+    workflowId: string;
+    steps: WorkflowStep[];
+    currentStepId: string | null;
+}
+/** Step view consumed by `StepTracker`. */
+export interface EnhancedStepState {
+    definition: {
+        id: string;
+        stepKey: string;
+        title: string;
+        description: string;
+    };
+    status: 'pending' | 'running' | 'done' | 'failed' | 'interrupted';
+    metadata: Record<string, unknown> | null;
+    toolMessages: InteractiveMessage[];
+}
+/** Enhanced progress consumed by `StepTracker` + `ChatTab`. */
+export interface EnhancedStepProgress {
+    hasPlan: boolean;
+    steps: EnhancedStepState[];
+    activeStepId: string | null;
+    allDone: boolean;
+    /**
+     * Short live-status string ("Thinking…", "Reading file X", a chunk
+     * of the agent's streaming reply) that the running step card shows
+     * inline next to its spinner. NEVER rendered as a flat bubble — the
+     * step tracker is the only allowed surface for in-progress activity
+     * while a workflow is active.
+     */
+    liveStatus: string | null;
+}
 interface SessionInfo {
     pid: number | null;
     sessionId: string | null;
     model: string | null;
     startedAt: string;
-    idleTimeoutMinutes: number;
     lastActivityAt: string;
     totalCostUsd: number | null;
     totalInputTokens: number | null;
@@ -40,6 +83,12 @@ export interface ChatRuntimeOptions {
     agentType?: string;
     /** When true, inject debug bubbles showing SSE events, session info, etc. */
     debugMode?: boolean;
+    /**
+     * Optional SSR-loaded chat state used as the TanStack Query `initialData`.
+     * When provided the hook renders immediately with those messages and the
+     * background refetch only confirms / updates them.
+     */
+    initialChatState?: ChatState;
 }
 /** A debug event captured from SSE for display in debug mode. */
 export interface DebugEvent {
@@ -61,6 +110,8 @@ export declare function useChatRuntime(featureId: string, worktreePath?: string,
     isChatLoading: boolean;
     pendingInteraction: InteractionData | null;
     respondToInteraction: (answers: Record<string, string>) => Promise<void>;
+    stepProgress: EnhancedStepProgress;
+    initialRequestMessage: InteractiveMessage | null;
 };
 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":"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"}
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"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"}

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

@@ -3,16 +3,36 @@ 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}`);
+function mapStatus(s) {
+    switch (s) {
+        case 'pending':
+        case 'running':
+        case 'done':
+        case 'failed':
+        case 'interrupted':
+            return s;
+        default:
+            return 'pending';
+    }
+}
+function parseMetadata(raw) {
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : null;
+    }
+    catch {
+        return null;
     }
-    return res.json();
 }
+// ── API helpers ─────────────────────────────────────────────────────────────
+// Shared query key + fetcher live in chat-state-query so the top bar
+// can subscribe to the SAME cached entry as this hook. Single source
+// of truth, one SSE stream updates every consumer.
+import { chatQueryKey, fetchChatState } from './chat-state-query.js';
 async function postMessage(featureId, content, worktreePath, model, agentType) {
     const res = await fetch(`/api/interactive/chat/${featureId}/messages`, {
         method: 'POST',
@@ -33,10 +53,6 @@ function toThreadMessage(msg) {
         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.
@@ -61,11 +77,27 @@ export function useChatRuntime(featureId, worktreePath, options) {
             { id: `dbg-${Date.now()}-${Math.random()}`, timestamp: new Date(), label, detail },
         ]);
     }, []);
-    // ── TanStack Query: fetch messages from backend ─────────────────────────
+    // ── TanStack Query: initial fetch only ─────────────────────────────────
+    //
+    // NO periodic polling. The chat state is event-driven:
+    //   - Initial state comes from `initialData` (SSR) or the one-shot
+    //     queryFn call on mount.
+    //   - All subsequent updates are pushed via the SSE stream effect
+    //     below, which mutates the cache directly (message / session_status
+    //     / turn_status events).
+    //   - On SSE reconnect, the `open` listener invalidates this query
+    //     once, forcing a fresh fetch to catch any missed events.
+    //
+    // This replaces the old 3s `refetchInterval` — no more bandwidth
+    // burning and no more stale-UI windows. Robustness comes from
+    // reconnect-fetch + idempotent cache merges by message id.
     const { data: chatState, isLoading: isChatLoading } = useQuery({
         queryKey: chatQueryKey(featureId),
         queryFn: () => fetchChatState(featureId),
-        refetchInterval: 3000, // Fallback polling every 3s
+        initialData: options?.initialChatState,
+        staleTime: Infinity,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
     });
     // Auto-mark as read when chat tab is open and turn status is 'unread'
     useEffect(() => {
@@ -136,6 +168,45 @@ export function useChatRuntime(featureId, worktreePath, options) {
     useEffect(() => {
         const es = new EventSource(`/api/interactive/chat/${featureId}/stream`);
         eventSourceRef.current = es;
+        /**
+         * Idempotent cache mutation helpers — called from SSE handlers.
+         * These must never throw on missing state because the cache may be
+         * mid-hydration when the first event lands. All updates are
+         * position/id-based so duplicate events across reconnects are
+         * harmless.
+         */
+        const mergeMessage = (msg) => {
+            queryClient.setQueryData(chatQueryKey(featureId), (old) => {
+                const base = old ?? {
+                    messages: [],
+                    sessionStatus: null,
+                    streamingText: null,
+                    sessionInfo: null,
+                };
+                // Skip if we already have this message (dedupe by id). Also drop
+                // any optimistic entry with the same content — the server copy
+                // replaces it.
+                const existing = base.messages.find((m) => m.id === msg.id);
+                if (existing)
+                    return base;
+                const withoutOptimistic = base.messages.filter((m) => !(m.id.startsWith('optimistic-') && m.role === msg.role && m.content === msg.content));
+                return { ...base, messages: [...withoutOptimistic, msg] };
+            });
+        };
+        const mergeSessionStatus = (status) => {
+            queryClient.setQueryData(chatQueryKey(featureId), (old) => {
+                if (!old)
+                    return old;
+                return { ...old, sessionStatus: status };
+            });
+        };
+        const mergeTurnStatus = (turnStatus) => {
+            queryClient.setQueryData(chatQueryKey(featureId), (old) => {
+                if (!old)
+                    return old;
+                return { ...old, turnStatus };
+            });
+        };
         es.addEventListener('delta', (event) => {
             try {
                 const data = JSON.parse(event.data);
@@ -160,8 +231,9 @@ export function useChatRuntime(featureId, worktreePath, options) {
             catch {
                 // Ignore
             }
-            // Tool events are already persisted to DB — just refetch to show them
-            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+            // The matching `message` event (emitted by the service alongside
+            // the activity when a tool message is persisted) handles the
+            // cache update — no refetch needed here.
         });
         es.addEventListener('log', (event) => {
             try {
@@ -188,19 +260,97 @@ export function useChatRuntime(featureId, worktreePath, options) {
                 // Ignore
             }
         });
+        es.addEventListener('message', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.message) {
+                    mergeMessage(data.message);
+                    // When an assistant message arrives, the "Thinking…" bubble
+                    // should fall away.
+                    if (data.message.role === InteractiveMessageRole.assistant) {
+                        cancelAwaiting();
+                    }
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('session_status', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.sessionStatus)
+                    mergeSessionStatus(data.sessionStatus);
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('turn_status', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.turnStatus)
+                    mergeTurnStatus(data.turnStatus);
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('workflow_step', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (!data.step)
+                    return;
+                queryClient.setQueryData(chatQueryKey(featureId), (old) => {
+                    if (!old)
+                        return old;
+                    const existing = old.workflow;
+                    const idx = existing?.steps.findIndex((s) => s.id === data.step.id) ?? -1;
+                    let nextSteps;
+                    if (!existing || idx === -1) {
+                        // New step row — append and re-sort by stepIndex.
+                        nextSteps = [...(existing?.steps ?? []), data.step].sort((a, b) => a.stepIndex - b.stepIndex);
+                    }
+                    else {
+                        nextSteps = existing.steps.slice();
+                        nextSteps[idx] = data.step;
+                    }
+                    const running = nextSteps.find((s) => s.status === 'running');
+                    return {
+                        ...old,
+                        workflow: {
+                            workflowId: data.step.workflowId,
+                            steps: nextSteps,
+                            currentStepId: running?.id ?? null,
+                        },
+                    };
+                });
+            }
+            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('');
-            });
+            // Streaming text is superseded by the persisted assistant `message`
+            // event that fires alongside `done`. Clear our local buffer.
+            setStreamingText('');
+        });
+        // Robustness: after any successful (re)connect, refetch the chat
+        // state ONCE to catch any events that may have been missed while
+        // the connection was down. The browser's EventSource auto-reconnects
+        // on drops; this handler fires on every successful open including
+        // post-error re-opens.
+        es.addEventListener('open', () => {
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
         });
         es.onerror = () => {
-            // SSE dropped — the 3s polling handles reliability
+            // Browser auto-reconnects. The `open` listener above will refetch
+            // state on recovery. Nothing to do here.
         };
         return () => {
             es.close();
@@ -216,8 +366,17 @@ export function useChatRuntime(featureId, worktreePath, options) {
             // 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
+            // Optimistically add user message. CRITICAL: spread `old` first
+            // and only override `messages` (and clear `streamingText`). The
+            // earlier version rebuilt the object field-by-field and silently
+            // dropped `workflow` + `turnStatus`, which made `hasPlan` flip
+            // to false for one render, briefly expanding the workflow step
+            // tracker (it lost its `collapsedSummary` flag when allDone
+            // turned undefined) before the next refetch reinstated it. The
+            // user saw a flicker of the full step list every time they typed
+            // a follow-up message after the workflow finished.
             queryClient.setQueryData(chatQueryKey(featureId), (old) => ({
+                ...(old ?? { sessionStatus: 'booting', sessionInfo: null }),
                 messages: [
                     ...(old?.messages ?? []),
                     {
@@ -229,9 +388,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
                         updatedAt: new Date(),
                     },
                 ],
-                sessionStatus: old?.sessionStatus ?? 'booting',
                 streamingText: null,
-                sessionInfo: old?.sessionInfo ?? null,
             }));
             return { previous };
         },
@@ -249,11 +406,161 @@ export function useChatRuntime(featureId, worktreePath, options) {
     // ── 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';
+    //
+    // `turnStatus === 'processing'` is critical for surfaces that post the
+    // first user message server-side (e.g. Application chat, where
+    // createApplication sends the kickoff via SendInteractiveMessageUseCase
+    // before the user ever lands on the page). In those flows the client
+    // never calls sendMutation, so `awaitingResponse` is never set and
+    // `sessionStatus` might already be 'ready' by the time the UI hydrates,
+    // leaving a dead zone with no indicator while the agent is actively
+    // working. Reading turnStatus from the backend closes that gap.
+    const backendTurnStatus = chatState?.turnStatus;
+    const isRunning = awaitingResponse ||
+        !!streamingText ||
+        !!statusLog ||
+        sessionStatus === 'booting' ||
+        backendTurnStatus === 'processing';
     // ── Build thread messages for assistant-ui ─────────────────────────────
     const activeStreamText = streamingText ?? backendStreamingText ?? '';
+    // ── Step-tracker state — driven ENTIRELY by server-side workflow
+    //    rows. No text parsing. On a refresh, `chatState.workflow` is
+    //    re-read from SQLite by the backend so status is always the
+    //    truth. Messages are grouped by `stepId` (also server-written).
+    const stepProgress = useMemo(() => {
+        const workflow = chatState?.workflow ?? null;
+        if (!workflow || workflow.steps.length === 0) {
+            return {
+                hasPlan: false,
+                steps: [],
+                activeStepId: null,
+                allDone: false,
+                liveStatus: null,
+            };
+        }
+        // Group messages by their persisted stepId. Only assistant messages
+        // are surfaced in the tracker — the orchestrator persists each step's
+        // prompt as a `user`-role row with the step's id (RunWorkflowUseCase
+        // step 2+) and that row is an internal orchestration detail, not
+        // something the user typed or the agent produced. Including it would
+        // inflate every step's badge count by 1 and dump the raw prompt into
+        // the expanded body.
+        const byStep = new Map();
+        for (const m of messages) {
+            const sid = m.stepId;
+            if (!sid)
+                continue;
+            if (m.role !== InteractiveMessageRole.assistant)
+                continue;
+            const list = byStep.get(sid) ?? [];
+            list.push(m);
+            byStep.set(sid, list);
+        }
+        const steps = workflow.steps.map((s) => ({
+            definition: {
+                id: s.id,
+                stepKey: s.stepKey,
+                title: s.title,
+                description: s.description,
+            },
+            status: mapStatus(s.status),
+            metadata: parseMetadata(s.metadata),
+            toolMessages: byStep.get(s.id) ?? [],
+        }));
+        const allDone = steps.length > 0 && steps.every((s) => s.status === 'done');
+        // Live status string for the running step card. Order of fallback
+        // mirrors the old flat-thread streaming bubble: tool / status log
+        // first (most informative — "Reading file X"), then a short prefix
+        // of the streaming reply text, then the generic "Thinking…" while
+        // we wait for the first chunk. Truncated to one line so it fits
+        // inline next to the spinner.
+        const trimmedStream = backendStreamingText?.trim() ?? '';
+        const trimmedLocal = streamingText?.trim() ?? '';
+        const streamPreview = (trimmedLocal || trimmedStream).split('\n')[0]?.slice(0, 80) ?? '';
+        let liveStatus = null;
+        if (allDone) {
+            liveStatus = null;
+        }
+        else if (statusLog) {
+            liveStatus = statusLog;
+        }
+        else if (streamPreview) {
+            liveStatus = streamPreview;
+        }
+        else if (backendTurnStatus === 'processing' ||
+            awaitingResponse ||
+            sessionStatus === 'booting') {
+            liveStatus = sessionStatus === 'booting' ? 'Waking up…' : 'Thinking…';
+        }
+        return {
+            hasPlan: true,
+            steps,
+            activeStepId: workflow.currentStepId,
+            allDone,
+            liveStatus,
+        };
+    }, [
+        chatState?.workflow,
+        messages,
+        statusLog,
+        streamingText,
+        backendStreamingText,
+        backendTurnStatus,
+        awaitingResponse,
+        sessionStatus,
+    ]);
+    // ── Initial request — the VERY first stepless user message.
+    //    The application-creation flow persists it via the
+    //    orchestrator's first `sendMessage.execute` BEFORE
+    //    `setActiveStep` is called, so it has no `stepId`. We pull
+    //    it out of the flat thread and hand it to the host page, so
+    //    the layout can render it ABOVE the step tracker — matching
+    //    the mental model "user asked X, Shep built it, then we
+    //    kept chatting".
+    const initialRequestMessage = useMemo(() => {
+        if (!stepProgress.hasPlan)
+            return null;
+        const first = messages.find((m) => m.role === InteractiveMessageRole.user && !m.stepId);
+        return first ?? null;
+    }, [stepProgress.hasPlan, messages]);
     const threadMessages = useMemo(() => {
-        const chatMessages = messages.map(toThreadMessage);
+        const hasPlan = stepProgress.hasPlan;
+        // When a workflow is active and STILL RUNNING: hide stepless
+        // assistant messages from the flat thread. These exist because of
+        // a small race window in the orchestrator — the agent can start
+        // streaming and persist a chunk before `setActiveStep` is called,
+        // leaving an assistant row with no stepId that would otherwise
+        // render as a stray bubble below the tracker. While the workflow
+        // is running, the running step's own card is the only legal
+        // surface for in-progress agent output.
+        //
+        // Once the workflow is DONE (`allDone`), the orchestrator has
+        // called its final `clearActiveStep`. From this point on, every
+        // new assistant message is a legitimate follow-up reply to a
+        // user-typed prompt, and MUST be visible in the flat thread —
+        // otherwise the chat appears to ignore the user. The previous
+        // version of this filter dropped them too and that's what looked
+        // like "agent is ignoring me" after the build completed.
+        //
+        // The user's very first message (`initialRequestMessage`) is
+        // always filtered out — the host page pins it above the tracker
+        // via `<InitialRequestBubble>` so leaving it in the flat thread
+        // would duplicate it.
+        const workflowRunning = hasPlan && !stepProgress.allDone;
+        const sourceMessages = hasPlan
+            ? messages.filter((m) => {
+                if (m.id === initialRequestMessage?.id)
+                    return false;
+                if (m.stepId)
+                    return false; // step-tagged messages live inside their card
+                if (workflowRunning && m.role === InteractiveMessageRole.assistant) {
+                    // Race-window leftover — see comment above.
+                    return false;
+                }
+                return true;
+            })
+            : messages;
+        const chatMessages = sourceMessages.map(toThreadMessage);
         // Merge debug bubbles into the timeline by timestamp
         let result;
         if (options?.debugMode && debugEvents.length > 0) {
@@ -294,7 +601,14 @@ export function useChatRuntime(featureId, worktreePath, options) {
         else {
             result = chatMessages;
         }
-        // Streaming text as the last message — may include a live activity suffix
+        // When the step-tracker is active we hide ALL assistant
+        // placeholders (streaming text, status log, thinking). The
+        // tracker itself conveys progress; stacking bubbles on top of it
+        // is noise.
+        if (hasPlan) {
+            return result;
+        }
+        // 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
@@ -328,12 +642,15 @@ export function useChatRuntime(featureId, worktreePath, options) {
         return result;
     }, [
         messages,
+        initialRequestMessage?.id,
         activeStreamText,
         awaitingResponse,
         sessionStatus,
         statusLog,
         options?.debugMode,
         debugEvents,
+        stepProgress.hasPlan,
+        stepProgress.allDone,
     ]);
     // ── Status info for typing indicator ──────────────────────────────────
     const status = useMemo(() => {
@@ -400,10 +717,23 @@ export function useChatRuntime(featureId, worktreePath, options) {
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
     }, [featureId, queryClient]);
     // ── Build assistant-ui runtime ──────────────────────────────────────────
+    // While a workflow is RUNNING, assistant-ui's `isRunning=true` would
+    // auto-inject an empty assistant placeholder bubble at the bottom of
+    // the thread (its built-in "thinking" indicator). The step tracker
+    // already conveys progress via the running step's spinner + live
+    // status, so that placeholder would just float as a hollow bubble.
+    // Force `isRunning=false` for the duration of the workflow so
+    // assistant-ui keeps its hands off the viewport.
+    //
+    // Once the workflow is DONE, hand control back to assistant-ui so
+    // its thinking indicator works normally for follow-up replies the
+    // user types into the composer after the build is finished.
+    const workflowInFlight = stepProgress.hasPlan && !stepProgress.allDone;
+    const runtimeIsRunning = workflowInFlight ? false : isRunning;
     const runtime = useExternalStoreRuntime({
         messages: threadMessages,
         convertMessage: useCallback((msg) => msg, []),
-        isRunning,
+        isRunning: runtimeIsRunning,
         onNew,
         onCancel: useCallback(async () => {
             setStreamingText('');
@@ -420,5 +750,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
         isChatLoading,
         pendingInteraction,
         respondToInteraction,
+        stepProgress,
+        initialRequestMessage,
     };
 }

package/dist/src/presentation/web/components/features/chat/workflow-placeholder.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Client-side mirror of the application-creation workflow's
+ * user-facing step titles + descriptions. Used to render a
+ * placeholder tracker BEFORE the backend orchestrator has written
+ * the real `workflow_steps` rows — the user sees all 8 pending
+ * cards the instant they land on the application page, instead
+ * of a blank area that suddenly pops into existence a few
+ * hundred milliseconds later.
+ *
+ * Keep this in sync with
+ * `packages/core/src/application/workflows/application-creation.workflow.ts`.
+ * The real steps replace the placeholder as soon as the first
+ * `workflow_step` SSE chunk arrives.
+ */
+export interface PlaceholderStep {
+    stepKey: string;
+    title: string;
+    description: string;
+}
+export declare const APPLICATION_CREATION_PLACEHOLDER_STEPS: PlaceholderStep[];
+//# sourceMappingURL=workflow-placeholder.d.ts.map

package/dist/src/presentation/web/components/features/chat/workflow-placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-placeholder.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/workflow-placeholder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,sCAAsC,EAAE,eAAe,EAyBnE,CAAC"}

package/dist/src/presentation/web/components/features/chat/workflow-placeholder.js

@@ -0,0 +1,40 @@
+/**
+ * Client-side mirror of the application-creation workflow's
+ * user-facing step titles + descriptions. Used to render a
+ * placeholder tracker BEFORE the backend orchestrator has written
+ * the real `workflow_steps` rows — the user sees all 8 pending
+ * cards the instant they land on the application page, instead
+ * of a blank area that suddenly pops into existence a few
+ * hundred milliseconds later.
+ *
+ * Keep this in sync with
+ * `packages/core/src/application/workflows/application-creation.workflow.ts`.
+ * The real steps replace the placeholder as soon as the first
+ * `workflow_step` SSE chunk arrives.
+ */
+export const APPLICATION_CREATION_PLACEHOLDER_STEPS = [
+    {
+        stepKey: 'scaffold',
+        title: 'Setting up your project',
+        description: 'Creating the foundation files',
+    },
+    {
+        stepKey: 'deps',
+        title: 'Installing design tools',
+        description: 'Adding Tailwind and essentials',
+    },
+    {
+        stepKey: 'components',
+        title: 'Building the pieces',
+        description: 'Designing and creating reusable parts',
+    },
+    { stepKey: 'wire', title: 'Connecting everything', description: 'Wiring navigation and forms' },
+    {
+        stepKey: 'style',
+        title: 'Polishing the look',
+        description: 'Applying colors, spacing, and motion',
+    },
+    { stepKey: 'verify', title: 'Double-checking', description: 'Making sure it runs cleanly' },
+    { stepKey: 'commit', title: 'Saving a snapshot', description: 'Committing the initial build' },
+    { stepKey: 'report', title: 'Your app is ready', description: 'Summary of what was built' },
+];