From bd87b8087f6ffc60d937e032d6a9130dc03353f7 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 03:12:52 +0300
Subject: [PATCH 1/7] fix(web): silence monaco unresolved import squiggles in
 ide editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disables monaco typescript semantic validation on beforeMount so
files opened in the ide tab no longer render every import as a red
"cannot find module" squiggle — the in-browser tsserver has no
project graph so its semantic diagnostics were pure noise. Syntax
errors are still surfaced; only unresolved-symbol noise is hidden.

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../application-page/ide-tab/editor-pane.tsx  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/presentation/web/components/features/application-page/ide-tab/editor-pane.tsx b/src/presentation/web/components/features/application-page/ide-tab/editor-pane.tsx
index f8ee0c6cc..04a3573fb 100644
--- a/src/presentation/web/components/features/application-page/ide-tab/editor-pane.tsx
+++ b/src/presentation/web/components/features/application-page/ide-tab/editor-pane.tsx
@@ -11,6 +11,7 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import dynamic from 'next/dynamic';
+import type { Monaco } from '@monaco-editor/react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Eye, FileCode, File as FileIcon, PanelRight, X } from 'lucide-react';
@@ -130,6 +131,36 @@ export function EditorPane({
     [active, onChange]
   );
 
+  // Monaco's in-browser TS language service has no project graph (no
+  // tsconfig, no node_modules), so every `import` in a .ts/.tsx file would
+  // otherwise render as a red "Cannot find module" squiggle. Disable
+  // semantic validation — we still surface real syntax errors — so the
+  // preview matches what the file actually looks like on disk.
+  const handleBeforeMount = useCallback((monaco: Monaco) => {
+    const ts = monaco.languages.typescript;
+    const compilerOptions = {
+      target: ts.ScriptTarget.Latest,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      jsx: ts.JsxEmit.Preserve,
+      allowJs: true,
+      allowNonTsExtensions: true,
+      esModuleInterop: true,
+      isolatedModules: true,
+      noEmit: true,
+      skipLibCheck: true,
+    };
+    ts.typescriptDefaults.setCompilerOptions(compilerOptions);
+    ts.javascriptDefaults.setCompilerOptions(compilerOptions);
+
+    const diagnostics = {
+      noSemanticValidation: true,
+      noSyntaxValidation: false,
+    };
+    ts.typescriptDefaults.setDiagnosticsOptions(diagnostics);
+    ts.javascriptDefaults.setDiagnosticsOptions(diagnostics);
+  }, []);
+
   return (
     <div className="flex h-full min-h-0 flex-col">
       {/* Tab strip */}
@@ -244,6 +275,7 @@ export function EditorPane({
               language={languageForPath(active.path)}
               value={active.content}
               onChange={handleChange}
+              beforeMount={handleBeforeMount}
               options={{
                 fontSize: 13,
                 minimap: { enabled: true },

From bafdcc8ed5004f1ee6a314b48de59926f953a304 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 03:14:08 +0300
Subject: [PATCH 2/7] feat(web): group chat turns and surface operation
 activity bubbles

Adds server-derived user-turn grouping to the application chat plus
static publish/deploy activity bubbles, so the thread stays compact
and every long-running operation has a visible home in the
conversation.

- new GetChatTurnGroupsUseCase walks persisted messages server-side,
  returns completed turn groups (collapsed by default) and the
  latest in-flight turn as currentTurn (expanded by default), with
  hiddenMessageIds so the flat thread skips anything the cards own
- unit tests cover empty feed, step-tagged skipping, live turn
  promotion, chronological ordering, long-message truncation, and
  orphan assistant messages
- new /api/interactive/chat/:featureId/turn-groups thin route
  delegates to the use case
- TurnGroupCard renders completed cards with an emerald check and
  an in-progress card with a fuchsia gradient spinner, pinned
  "working on your request..." title, non-collapsible while live
- TurnGroupList hydrates cards from the main chat cache and renders
  the streaming indicator inline inside the in-progress card
- useChatRuntime accepts hiddenMessageIds and suppressStreamingIndicator
  options, exposes rawMessages and streamingState for the host
- ChatTab wires everything through a new applicationId prop so
  application chats get the full experience while repo and global
  chats are untouched
- OperationBubble polls existing operation_log_entries endpoints
  and renders a static chronological card per publish or deploy,
  shown after the thread so users see the full history in place

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../get-chat-turn-groups.use-case.ts          | 196 +++++++++++++++
 .../di/modules/register-interactive.ts        |   5 +
 .../chat/[featureId]/turn-groups/route.ts     |  45 ++++
 .../application-page/application-page.tsx     |   1 +
 .../web/components/features/chat/ChatTab.tsx  |  94 ++++++--
 .../features/chat/operation-bubble.tsx        | 223 ++++++++++++++++++
 .../features/chat/turn-group-card.tsx         | 129 ++++++++++
 .../features/chat/turn-group-list.tsx         | 215 +++++++++++++++++
 .../features/chat/useChatRuntime.ts           | 108 ++++++---
 .../get-chat-turn-groups.use-case.test.ts     | 181 ++++++++++++++
 10 files changed, 1148 insertions(+), 49 deletions(-)
 create mode 100644 packages/core/src/application/use-cases/interactive/get-chat-turn-groups.use-case.ts
 create mode 100644 src/presentation/web/app/api/interactive/chat/[featureId]/turn-groups/route.ts
 create mode 100644 src/presentation/web/components/features/chat/operation-bubble.tsx
 create mode 100644 src/presentation/web/components/features/chat/turn-group-card.tsx
 create mode 100644 src/presentation/web/components/features/chat/turn-group-list.tsx
 create mode 100644 tests/unit/application/use-cases/interactive/get-chat-turn-groups.use-case.test.ts

diff --git a/packages/core/src/application/use-cases/interactive/get-chat-turn-groups.use-case.ts b/packages/core/src/application/use-cases/interactive/get-chat-turn-groups.use-case.ts
new file mode 100644
index 000000000..d7ad0a607
--- /dev/null
+++ b/packages/core/src/application/use-cases/interactive/get-chat-turn-groups.use-case.ts
@@ -0,0 +1,196 @@
+/**
+ * GetChatTurnGroupsUseCase
+ *
+ * Server-side derivation of "user turn groups" for the chat thread.
+ *
+ * The raw interactive_messages table is a flat, append-only log of
+ * user/assistant pairs. The chat UI wants to collapse every COMPLETED
+ * user turn into a single named card ("Working on: …") so the thread
+ * doesn't become an endless scroll of raw bubbles — but the MOST
+ * RECENT turn must stay live so the user keeps seeing the reply that
+ * is actively streaming in response to what they just typed.
+ *
+ * Grouping rules:
+ *   1. Ignore messages that carry a `stepId` — those are setup-workflow
+ *      messages and live inside the StepTracker, not the flat thread.
+ *   2. Walk the remaining messages in chronological order. Every user
+ *      message opens a new turn; every subsequent assistant message is
+ *      attached to the open turn until the next user message.
+ *   3. The LAST turn is never grouped (it is the live turn).
+ *   4. `hiddenMessageIds` lists every message id that a client should
+ *      FILTER OUT of the flat thread render — the client then draws
+ *      a collapsible group card in its place.
+ *
+ * This use case is read-only. It speaks exclusively to the
+ * IInteractiveMessageRepository port, so presentation layers can ask
+ * for groups without any coupling to the underlying SQLite schema.
+ *
+ * Feature: application-chat turn grouping (see spec in CLAUDE memo).
+ */
+
+import { inject, injectable } from 'tsyringe';
+import type { IInteractiveMessageRepository } from '../../ports/output/repositories/interactive-message-repository.interface.js';
+import type { InteractiveMessage } from '../../../domain/generated/output.js';
+import { InteractiveMessageRole } from '../../../domain/generated/output.js';
+
+/** One user-turn group, ready for the client to render as a card. */
+export interface ChatTurnGroup {
+  /** Stable id derived from the first (user) message id in the turn. */
+  id: string;
+  /** User-facing title, e.g. "Working on: Fix login bug". */
+  title: string;
+  /** Trimmed preview of the user message text, capped to PREVIEW_MAX. */
+  userMessagePreview: string;
+  /** Message ids that belong to this turn, in order. */
+  messageIds: string[];
+  /** Number of assistant replies collected inside the turn. */
+  assistantMessageCount: number;
+  /** When the user message was written (epoch ms). */
+  startedAt: number;
+  /** When the last message in the turn was written (epoch ms). */
+  endedAt: number;
+  /**
+   * `completed` for everything the client should collapse by default.
+   * `in-progress` is reserved for `currentTurn` — the most recent
+   * user turn, which the client renders as an expanded "Working on
+   * your request…" card with the live streaming indicator inside it.
+   */
+  status: 'completed' | 'in-progress';
+}
+
+export interface GetChatTurnGroupsInput {
+  featureId: string;
+}
+
+export interface GetChatTurnGroupsResult {
+  /** Completed turn groups in chronological order. */
+  groups: ChatTurnGroup[];
+  /**
+   * The most recent user-initiated turn, always `status: 'in-progress'`
+   * when present. The client renders this as an expanded card with
+   * the streaming indicator pinned inside it, so a new "Working on
+   * your request…" surface appears the instant the user sends a
+   * message — no flat "Thinking…" bubble in the thread. Null when
+   * the feature has no user-initiated turns yet (e.g. only setup
+   * messages exist).
+   */
+  currentTurn: ChatTurnGroup | null;
+  /**
+   * Every message id that belongs to a returned group — completed
+   * groups AND the current turn. The UI filters these out of the raw
+   * thread so nothing renders twice.
+   */
+  hiddenMessageIds: string[];
+}
+
+const PREVIEW_MAX = 120;
+const TITLE_MAX = 140;
+const FALLBACK_TITLE = 'Working on your request';
+
+function toEpochMs(raw: unknown): number {
+  if (raw instanceof Date) return raw.getTime();
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
+  if (typeof raw === 'string') {
+    const asNum = Number(raw);
+    if (Number.isFinite(asNum)) return asNum;
+    const parsed = new Date(raw).getTime();
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+}
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, Math.max(0, max - 1)).trimEnd()}…`;
+}
+
+function buildTitle(userText: string): string {
+  const cleaned = userText.trim().replace(/\s+/g, ' ');
+  if (cleaned.length === 0) return FALLBACK_TITLE;
+  const preview = truncate(cleaned, PREVIEW_MAX);
+  return truncate(`Working on: ${preview}`, TITLE_MAX);
+}
+
+@injectable()
+export class GetChatTurnGroupsUseCase {
+  constructor(
+    @inject('IInteractiveMessageRepository')
+    private readonly messages: IInteractiveMessageRepository
+  ) {}
+
+  async execute(input: GetChatTurnGroupsInput): Promise<GetChatTurnGroupsResult> {
+    const all = await this.messages.findByFeatureId(input.featureId);
+
+    // Setup-workflow messages live inside the StepTracker — never
+    // part of the flat-thread turn grouping.
+    const flat = all.filter((m) => !m.stepId);
+    if (flat.length === 0) {
+      return { groups: [], currentTurn: null, hiddenMessageIds: [] };
+    }
+
+    // Walk in chronological order and bucket into turns. A turn opens
+    // on every user message; the assistant replies that immediately
+    // follow get attached to it until the next user message opens a
+    // new turn.
+    interface Turn {
+      user: InteractiveMessage;
+      items: InteractiveMessage[];
+    }
+    const turns: Turn[] = [];
+    let current: Turn | null = null;
+    for (const m of flat) {
+      if (m.role === InteractiveMessageRole.user) {
+        current = { user: m, items: [m] };
+        turns.push(current);
+      } else if (current) {
+        current.items.push(m);
+      }
+      // If we see an assistant message with NO open turn, it is an
+      // orphan (very rare — only possible from out-of-order writes).
+      // Drop it silently: it would not belong to any grouped card and
+      // forcing it into one would be misleading.
+    }
+
+    if (turns.length === 0) {
+      return { groups: [], currentTurn: null, hiddenMessageIds: [] };
+    }
+
+    // The final turn is the "current" one — the user's most recent
+    // ask, which the client renders as an expanded in-progress card
+    // with the live streaming indicator pinned inside it. Everything
+    // before it is a completed group the client collapses by default.
+    const completed = turns.slice(0, -1);
+    const latest = turns[turns.length - 1];
+
+    const completedGroups: ChatTurnGroup[] = completed.map((t) => buildGroup(t, 'completed'));
+    const currentTurn: ChatTurnGroup = buildGroup(latest, 'in-progress');
+
+    const hiddenMessageIds = [
+      ...completedGroups.flatMap((g) => g.messageIds),
+      ...currentTurn.messageIds,
+    ];
+    return { groups: completedGroups, currentTurn, hiddenMessageIds };
+  }
+}
+
+function buildGroup(
+  t: { user: InteractiveMessage; items: InteractiveMessage[] },
+  status: 'completed' | 'in-progress'
+): ChatTurnGroup {
+  const first = t.items[0];
+  const last = t.items[t.items.length - 1];
+  const userText = t.user.content ?? '';
+  const assistantMessageCount = t.items.filter(
+    (m) => m.role === InteractiveMessageRole.assistant
+  ).length;
+  return {
+    id: `turn-${t.user.id}`,
+    title: buildTitle(userText),
+    userMessagePreview: truncate(userText.trim().replace(/\s+/g, ' '), PREVIEW_MAX),
+    messageIds: t.items.map((m) => m.id),
+    assistantMessageCount,
+    startedAt: toEpochMs(first.createdAt),
+    endedAt: toEpochMs(last.createdAt),
+    status,
+  };
+}
diff --git a/packages/core/src/infrastructure/di/modules/register-interactive.ts b/packages/core/src/infrastructure/di/modules/register-interactive.ts
index 7d32f7fd3..bdaa92de1 100644
--- a/packages/core/src/infrastructure/di/modules/register-interactive.ts
+++ b/packages/core/src/infrastructure/di/modules/register-interactive.ts
@@ -4,6 +4,7 @@ import { StartInteractiveSessionUseCase } from '../../../application/use-cases/i
 import { SendInteractiveMessageUseCase } from '../../../application/use-cases/interactive/send-interactive-message.use-case.js';
 import { StopInteractiveSessionUseCase } from '../../../application/use-cases/interactive/stop-interactive-session.use-case.js';
 import { GetInteractiveChatStateUseCase } from '../../../application/use-cases/interactive/get-interactive-chat-state.use-case.js';
+import { GetChatTurnGroupsUseCase } from '../../../application/use-cases/interactive/get-chat-turn-groups.use-case.js';
 import { RespondToInteractionUseCase } from '../../../application/use-cases/interactive/respond-to-interaction.use-case.js';
 import { RunWorkflowUseCase } from '../../../application/use-cases/workflows/run-workflow.use-case.js';
 import { ForceStopWorkflowStepUseCase } from '../../../application/use-cases/workflows/force-stop-workflow-step.use-case.js';
@@ -20,6 +21,7 @@ export function registerInteractive(container: DependencyContainer): void {
   container.registerSingleton(SendInteractiveMessageUseCase);
   container.registerSingleton(StopInteractiveSessionUseCase);
   container.registerSingleton(GetInteractiveChatStateUseCase);
+  container.registerSingleton(GetChatTurnGroupsUseCase);
   container.registerSingleton(RespondToInteractionUseCase);
 
   // String-token aliases for web routes (Turbopack can't resolve .js→.ts
@@ -36,6 +38,9 @@ export function registerInteractive(container: DependencyContainer): void {
   container.register('GetInteractiveChatStateUseCase', {
     useFactory: (c) => c.resolve(GetInteractiveChatStateUseCase),
   });
+  container.register('GetChatTurnGroupsUseCase', {
+    useFactory: (c) => c.resolve(GetChatTurnGroupsUseCase),
+  });
   container.register('RespondToInteractionUseCase', {
     useFactory: (c) => c.resolve(RespondToInteractionUseCase),
   });
diff --git a/src/presentation/web/app/api/interactive/chat/[featureId]/turn-groups/route.ts b/src/presentation/web/app/api/interactive/chat/[featureId]/turn-groups/route.ts
new file mode 100644
index 000000000..f9b07165b
--- /dev/null
+++ b/src/presentation/web/app/api/interactive/chat/[featureId]/turn-groups/route.ts
@@ -0,0 +1,45 @@
+/**
+ * GET /api/interactive/chat/[featureId]/turn-groups
+ *
+ * Returns server-derived user turn groups for a feature's chat history.
+ *
+ * Every COMPLETED user turn (a user message plus the assistant replies
+ * that followed it) is collapsed into a named card so the thread
+ * stays short. The MOST RECENT turn is left out so the user keeps
+ * seeing their live reply stream in place.
+ *
+ * Thin route — delegates to `GetChatTurnGroupsUseCase` and serialises
+ * the DTO. No grouping logic lives here; it all happens inside the
+ * use case so the CLI / TUI could expose the same data tomorrow.
+ */
+
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { resolve } from '@/lib/server-container';
+import type { GetChatTurnGroupsUseCase } from '@shepai/core/application/use-cases/interactive/get-chat-turn-groups.use-case';
+
+export const dynamic = 'force-dynamic';
+
+interface RouteParams {
+  params: Promise<{ featureId: string }>;
+}
+
+export async function GET(_request: NextRequest, { params }: RouteParams): Promise<NextResponse> {
+  try {
+    const { featureId } = await params;
+    if (!featureId || featureId.trim().length === 0) {
+      return NextResponse.json({ error: 'Missing featureId' }, { status: 400 });
+    }
+
+    const useCase = resolve<GetChatTurnGroupsUseCase>('GetChatTurnGroupsUseCase');
+    const result = await useCase.execute({ featureId });
+    return NextResponse.json(result);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('[GET /api/interactive/chat/:featureId/turn-groups]', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/presentation/web/components/features/application-page/application-page.tsx b/src/presentation/web/components/features/application-page/application-page.tsx
index 655f74d50..4f86c2ee6 100644
--- a/src/presentation/web/components/features/application-page/application-page.tsx
+++ b/src/presentation/web/components/features/application-page/application-page.tsx
@@ -118,6 +118,7 @@ export function ApplicationPage({ application, initialChatState }: ApplicationPa
         left={
           <ChatTab
             featureId={featureIdForApplication(application.id)}
+            applicationId={application.id}
             worktreePath={application.repositoryPath}
             initialAgent={application.agentType}
             initialModel={application.modelOverride}
diff --git a/src/presentation/web/components/features/chat/ChatTab.tsx b/src/presentation/web/components/features/chat/ChatTab.tsx
index 8bed0a183..818a2cf5b 100644
--- a/src/presentation/web/components/features/chat/ChatTab.tsx
+++ b/src/presentation/web/components/features/chat/ChatTab.tsx
@@ -14,12 +14,27 @@ import { useChatRuntime } from './useChatRuntime';
 import { ChatComposer } from './ChatComposer';
 import { InteractionBubble } from './InteractionBubble';
 import { StepTracker } from './StepTracker';
+import { TurnGroupList, useTurnGroups } from './turn-group-list';
+import { OperationBubble } from './operation-bubble';
 import type { PlaceholderStep } from './workflow-placeholder';
 import { SCAFFOLD_STEP_KEY } from './workflow-placeholder';
 import type { EnhancedStepState } from './useChatRuntime';
 
 export interface ChatTabProps {
   featureId: string;
+  /**
+   * When rendered inside an application page, passing the application
+   * id lights up two application-scoped extras in the thread:
+   *   1. Server-derived "user turn groups" — completed user turns
+   *      collapse into named cards above the live messages so the
+   *      thread stays compact.
+   *   2. Publish / Deploy operation bubbles — chronological static
+   *      info cards sourced from `operation_log_entries` and
+   *      rendered after the live messages.
+   * Omitting this prop keeps the old behaviour for non-application
+   * chats (repo, global, etc.).
+   */
+  applicationId?: string;
   worktreePath?: string;
   /** Seed the agent override (e.g. from an Application's agentType) */
   initialAgent?: string;
@@ -113,6 +128,7 @@ export function isWorkflowInFlight(stepProgress: {
 
 export function ChatTab({
   featureId,
+  applicationId,
   worktreePath,
   initialAgent,
   initialModel,
@@ -128,6 +144,14 @@ export function ChatTab({
   const [debugMode, setDebugMode] = useState(false);
   const att = useAttachments();
 
+  // Server-derived turn grouping (Feature B). Only applicable to
+  // application-scoped chats — repo / global threads keep the flat
+  // layout. `hiddenMessageIds` is handed to useChatRuntime so the
+  // raw bubbles that now live inside a collapsed group card are
+  // removed from the thread.
+  const turnGroupsEnabled = Boolean(applicationId);
+  const { hiddenMessageIds } = useTurnGroups(turnGroupsEnabled ? featureId : '');
+
   const contentTransform = useCallback(
     (content: string) =>
       composeUserInput(
@@ -147,6 +171,8 @@ export function ChatTab({
     respondToInteraction,
     stepProgress,
     initialRequestMessage,
+    rawMessages,
+    streamingState,
   } = useChatRuntime(featureId, worktreePath, {
     contentTransform,
     onMessageSent: att.clearAttachments,
@@ -160,6 +186,13 @@ export function ChatTab({
     // real workflow-step row arrives. Without this, the bubble would
     // fall through to the flat thread and render below the tracker.
     pinInitialRequest: (workflowPlaceholder?.length ?? 0) > 0,
+    // Server-derived completed turns get pulled out of the flat
+    // thread and rendered as collapsed cards above the messages.
+    hiddenMessageIds,
+    // When grouping is on, the in-progress turn card owns the
+    // streaming indicator — suppress the flat-thread version so it
+    // doesn't appear twice.
+    suppressStreamingIndicator: turnGroupsEnabled,
   });
 
   // Fire the all-steps-complete callback exactly once per mount.
@@ -340,31 +373,48 @@ export function ChatTab({
               composer={composer}
               hideEmpty={showTracker}
               beforeMessages={
-                showTracker ? (
-                  <>
-                    {initialRequestMessage ? (
-                      <InitialRequestBubble text={initialRequestMessage.content} />
-                    ) : null}
-                    <StepTracker
-                      steps={trackerSteps}
-                      collapsedSummary={
-                        stepProgress.hasPlan === true && stepProgress.allDone === true
-                      }
-                      activeStepId={stepProgress.activeStepId}
-                      liveStatus={stepProgress.liveStatus}
-                      onRetry={onResumeWorkflow}
-                      onForceStop={handleForceStopStep}
+                <>
+                  {showTracker ? (
+                    <>
+                      {initialRequestMessage ? (
+                        <InitialRequestBubble text={initialRequestMessage.content} />
+                      ) : null}
+                      <StepTracker
+                        steps={trackerSteps}
+                        collapsedSummary={
+                          stepProgress.hasPlan === true && stepProgress.allDone === true
+                        }
+                        activeStepId={stepProgress.activeStepId}
+                        liveStatus={stepProgress.liveStatus}
+                        onRetry={onResumeWorkflow}
+                        onForceStop={handleForceStopStep}
+                      />
+                    </>
+                  ) : null}
+                  {turnGroupsEnabled ? (
+                    <TurnGroupList
+                      featureId={featureId}
+                      allMessages={rawMessages}
+                      streaming={streamingState}
                     />
-                  </>
-                ) : undefined
+                  ) : null}
+                </>
               }
               afterMessages={
-                pendingInteraction ? (
-                  <InteractionBubble
-                    interaction={pendingInteraction}
-                    onSubmit={respondToInteraction}
-                  />
-                ) : undefined
+                <>
+                  {pendingInteraction ? (
+                    <InteractionBubble
+                      interaction={pendingInteraction}
+                      onSubmit={respondToInteraction}
+                    />
+                  ) : null}
+                  {applicationId ? (
+                    <>
+                      <OperationBubble applicationId={applicationId} kind="publish" />
+                      <OperationBubble applicationId={applicationId} kind="deploy" />
+                    </>
+                  ) : null}
+                </>
               }
             />
           </AssistantRuntimeProvider>
diff --git a/src/presentation/web/components/features/chat/operation-bubble.tsx b/src/presentation/web/components/features/chat/operation-bubble.tsx
new file mode 100644
index 000000000..99f8d8db2
--- /dev/null
+++ b/src/presentation/web/components/features/chat/operation-bubble.tsx
@@ -0,0 +1,223 @@
+'use client';
+
+/**
+ * OperationBubble
+ *
+ * Static, chronological info card rendered in the chat thread for a
+ * completed long-running operation on the application — currently
+ * either "Publish to GitHub" (GitRemoteCreate) or "Deploy to cloud"
+ * (CloudDeploy).
+ *
+ * Source of truth: the existing `/api/operations/:kind/:id/logs`
+ * endpoint which is backed by the `operation_log_entries` table.
+ * This component is a THIN presentation layer — it polls the logs
+ * while the operation is still writing entries and renders them in
+ * order. No grouping or summarization logic lives here; any derived
+ * state (e.g. "success" vs "failed") is computed from the last log
+ * level of the raw entries returned by the server.
+ */
+
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Github, Rocket, CheckCircle2, XCircle, Loader2, AlertTriangle } from 'lucide-react';
+import { OperationLogKind } from '@shepai/core/domain/generated/output';
+import { cn } from '@/lib/utils';
+
+interface OperationLogEntryDto {
+  id: string;
+  operationKind: string;
+  operationId: string;
+  level: string;
+  message: string;
+  detail?: string;
+  createdAt: string;
+}
+
+interface OperationBubbleProps {
+  applicationId: string;
+  kind: 'publish' | 'deploy';
+}
+
+const KIND_TO_OP: Record<OperationBubbleProps['kind'], string> = {
+  publish: OperationLogKind.GitRemoteCreate,
+  deploy: OperationLogKind.CloudDeploy,
+};
+
+const KIND_META = {
+  publish: {
+    title: 'Published to GitHub',
+    inProgressTitle: 'Publishing to GitHub…',
+    icon: Github,
+    accent: 'text-sky-500 bg-sky-500/15',
+  },
+  deploy: {
+    title: 'Deployed to cloud',
+    inProgressTitle: 'Deploying to cloud…',
+    icon: Rocket,
+    accent: 'text-fuchsia-500 bg-fuchsia-500/15',
+  },
+} as const;
+
+async function fetchLogs(applicationId: string, kind: OperationBubbleProps['kind']) {
+  const opKind = KIND_TO_OP[kind];
+  const res = await fetch(
+    `/api/operations/${encodeURIComponent(opKind)}/${encodeURIComponent(applicationId)}/logs`
+  );
+  if (!res.ok) return { entries: [] as OperationLogEntryDto[] };
+  return (await res.json()) as { entries: OperationLogEntryDto[] };
+}
+
+/**
+ * Derive a human status from the raw entries. An operation is
+ * "in-progress" while entries are still being appended (we can't
+ * tell from logs alone so we treat the last 10 seconds of activity
+ * as live). Otherwise "success" if the last entry is Info/Debug,
+ * "failed" if the last entry is Error, "warn" if Warn.
+ */
+type BubbleStatus = 'in-progress' | 'success' | 'failed' | 'warn' | 'empty';
+
+function deriveStatus(entries: OperationLogEntryDto[]): BubbleStatus {
+  if (entries.length === 0) return 'empty';
+  const last = entries[entries.length - 1];
+  const lastAtMs = new Date(last.createdAt).getTime();
+  const ageMs = Date.now() - lastAtMs;
+  if (ageMs < 10_000) return 'in-progress';
+  switch (last.level) {
+    case 'Error':
+      return 'failed';
+    case 'Warn':
+      return 'warn';
+    default:
+      return 'success';
+  }
+}
+
+function formatTime(iso: string): string {
+  try {
+    return new Date(iso).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+export function OperationBubble({ applicationId, kind }: OperationBubbleProps) {
+  const { data } = useQuery({
+    queryKey: ['operation-logs', applicationId, kind] as const,
+    queryFn: () => fetchLogs(applicationId, kind),
+    refetchInterval: (q) => {
+      // While still live, poll fast so new entries appear as they
+      // land. Once the operation has settled the auto-refresh
+      // relaxes — a mount is enough to hydrate the final state.
+      const entries = q.state.data?.entries ?? [];
+      if (entries.length === 0) return false;
+      const status = deriveStatus(entries);
+      return status === 'in-progress' ? 1500 : false;
+    },
+    staleTime: 0,
+  });
+
+  const entries = useMemo(() => data?.entries ?? [], [data]);
+  if (entries.length === 0) return null;
+
+  const status = deriveStatus(entries);
+  const meta = KIND_META[kind];
+  const Icon = meta.icon;
+  const isInFlight = status === 'in-progress';
+
+  return (
+    <div
+      className={cn(
+        'border-border/60 bg-card/50 mx-3 my-2 overflow-hidden rounded-lg border shadow-sm',
+        'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out'
+      )}
+      data-testid={`operation-bubble-${kind}`}
+    >
+      <div className="flex items-center gap-2.5 px-3 py-2">
+        <span
+          className={cn(
+            'flex h-6 w-6 shrink-0 items-center justify-center rounded-full',
+            meta.accent
+          )}
+        >
+          <Icon className="h-3.5 w-3.5" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="text-foreground truncate text-[12px] font-semibold">
+            {isInFlight ? meta.inProgressTitle : meta.title}
+          </div>
+          <div className="text-muted-foreground text-[10px]">
+            {entries.length} event{entries.length === 1 ? '' : 's'} · started{' '}
+            {formatTime(entries[0].createdAt)}
+          </div>
+        </div>
+        <StatusBadge status={status} />
+      </div>
+      <ol className="border-border/60 bg-background/40 flex flex-col gap-1 border-t px-3 py-2">
+        {entries.map((e) => (
+          <li key={e.id} className="flex items-start gap-2 text-[11px] leading-relaxed">
+            <span className="text-muted-foreground/80 shrink-0 font-mono text-[10px]">
+              {formatTime(e.createdAt)}
+            </span>
+            <LevelDot level={e.level} />
+            <span className="text-foreground/90 min-w-0 flex-1 break-words whitespace-pre-wrap">
+              {e.message}
+              {e.detail ? (
+                <span className="text-muted-foreground/70 mt-0.5 block font-mono text-[10px] whitespace-pre-wrap">
+                  {e.detail}
+                </span>
+              ) : null}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: BubbleStatus }) {
+  if (status === 'in-progress') {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] text-sky-500">
+        <Loader2 className="h-3 w-3 animate-spin" /> in progress
+      </span>
+    );
+  }
+  if (status === 'success') {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] text-emerald-500">
+        <CheckCircle2 className="h-3 w-3" /> done
+      </span>
+    );
+  }
+  if (status === 'warn') {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] text-amber-500">
+        <AlertTriangle className="h-3 w-3" /> warnings
+      </span>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] text-rose-500">
+        <XCircle className="h-3 w-3" /> failed
+      </span>
+    );
+  }
+  return null;
+}
+
+function LevelDot({ level }: { level: string }) {
+  const color =
+    level === 'Error'
+      ? 'bg-rose-500'
+      : level === 'Warn'
+        ? 'bg-amber-500'
+        : level === 'Debug'
+          ? 'bg-muted-foreground/50'
+          : 'bg-emerald-500';
+  return <span className={cn('mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full', color)} />;
+}
diff --git a/src/presentation/web/components/features/chat/turn-group-card.tsx b/src/presentation/web/components/features/chat/turn-group-card.tsx
new file mode 100644
index 000000000..117e2b2a8
--- /dev/null
+++ b/src/presentation/web/components/features/chat/turn-group-card.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * TurnGroupCard
+ *
+ * One user-turn card in the chat thread. Two modes:
+ *
+ * - `completed`: collapsed by default, emerald check icon, click to
+ *   reveal the persisted messages inside the turn. Matches the
+ *   StepTracker visual language so "completed setup" and "completed
+ *   user turn" read as siblings in the timeline.
+ *
+ * - `in-progress`: EXPANDED by default, non-collapsible, a spinning
+ *   fuchsia indicator, title reads "Working on your request…". The
+ *   parent renders the turn's persisted messages AND the live
+ *   streaming indicator inside `children`, so the moment the user
+ *   sends a message they see a new card pop in with the reply
+ *   building up inside it — no stray "Thinking…" bubble in the
+ *   flat thread.
+ */
+
+import { useState, type ReactNode } from 'react';
+import { ChevronDown, CheckCircle2, MessageSquare, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface TurnGroupCardProps {
+  /** Stable id for React keys / aria-controls. */
+  id: string;
+  /** Human-readable title, e.g. "Working on: Fix login bug". */
+  title: string;
+  /** Number of assistant replies collected inside the turn. */
+  assistantMessageCount: number;
+  /** Render mode — see file header. */
+  status: 'completed' | 'in-progress';
+  /** Children rendered when the card is expanded (raw messages +
+   *  the live streaming indicator for in-progress turns). */
+  children?: ReactNode;
+}
+
+export function TurnGroupCard({
+  id,
+  title,
+  assistantMessageCount,
+  status,
+  children,
+}: TurnGroupCardProps) {
+  const isInProgress = status === 'in-progress';
+  // In-progress cards are always expanded; completed cards collapse
+  // by default and only open on explicit click.
+  const [userExpanded, setUserExpanded] = useState(false);
+  const expanded = isInProgress || userExpanded;
+  const contentId = `${id}-content`;
+
+  return (
+    <div
+      className={cn(
+        'mx-3 my-2 overflow-hidden rounded-lg border shadow-sm',
+        'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out',
+        isInProgress
+          ? 'border-fuchsia-500/40 bg-gradient-to-br from-fuchsia-500/5 via-purple-500/5 to-sky-500/5'
+          : 'border-border/60 bg-card/40'
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => {
+          if (!isInProgress) setUserExpanded((v) => !v);
+        }}
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        disabled={isInProgress}
+        className={cn(
+          'group flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors',
+          !isInProgress && 'hover:bg-muted/50 cursor-pointer'
+        )}
+      >
+        <span
+          className={cn(
+            'flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
+            isInProgress
+              ? 'bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-500 text-white shadow-sm'
+              : 'bg-emerald-500/15'
+          )}
+        >
+          {isInProgress ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : (
+            <CheckCircle2 className="h-3 w-3 text-emerald-500" />
+          )}
+        </span>
+        <span
+          className={cn(
+            'min-w-0 flex-1 truncate text-[12px] font-medium',
+            isInProgress ? 'text-fuchsia-700 dark:text-fuchsia-300' : 'text-foreground'
+          )}
+        >
+          {isInProgress ? 'Working on your request…' : title}
+        </span>
+        {!isInProgress && assistantMessageCount > 0 ? (
+          <span className="text-muted-foreground inline-flex shrink-0 items-center gap-1 text-[10px]">
+            <MessageSquare className="h-3 w-3" />
+            {assistantMessageCount}
+          </span>
+        ) : null}
+        {!isInProgress ? (
+          <ChevronDown
+            className={cn(
+              'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+              expanded && 'rotate-180'
+            )}
+          />
+        ) : null}
+      </button>
+      {expanded ? (
+        <div
+          id={contentId}
+          className={cn(
+            'border-t px-3 py-2',
+            isInProgress
+              ? 'bg-background/60 border-fuchsia-500/20'
+              : 'border-border/60 bg-background/40'
+          )}
+        >
+          {children ?? <div className="text-muted-foreground text-[11px] italic">No content.</div>}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/presentation/web/components/features/chat/turn-group-list.tsx b/src/presentation/web/components/features/chat/turn-group-list.tsx
new file mode 100644
index 000000000..7cd34023e
--- /dev/null
+++ b/src/presentation/web/components/features/chat/turn-group-list.tsx
@@ -0,0 +1,215 @@
+'use client';
+
+/**
+ * TurnGroupList
+ *
+ * Fetches the server-derived list of user turns for a feature and
+ * renders a `TurnGroupCard` per completed group PLUS an in-progress
+ * card for the currently-live turn. The in-progress card is expanded
+ * by default and receives the live streaming indicator inline, so
+ * the moment the user sends a message they see a single "Working
+ * on your request…" surface with the reply building up inside it.
+ *
+ * All grouping logic lives in `GetChatTurnGroupsUseCase` — this
+ * component is a thin renderer.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import type { InteractiveMessage } from '@shepai/core/domain/generated/output';
+import { InteractiveMessageRole } from '@shepai/core/domain/generated/output';
+import { TurnGroupCard } from './turn-group-card';
+
+interface TurnGroupDto {
+  id: string;
+  title: string;
+  userMessagePreview: string;
+  messageIds: string[];
+  assistantMessageCount: number;
+  startedAt: number;
+  endedAt: number;
+  status: 'completed' | 'in-progress';
+}
+
+export interface TurnGroupsResponse {
+  groups: TurnGroupDto[];
+  currentTurn: TurnGroupDto | null;
+  hiddenMessageIds: string[];
+}
+
+export function turnGroupsQueryKey(featureId: string): readonly unknown[] {
+  return ['chat', featureId, 'turn-groups'] as const;
+}
+
+export async function fetchTurnGroups(featureId: string): Promise<TurnGroupsResponse> {
+  const res = await fetch(`/api/interactive/chat/${encodeURIComponent(featureId)}/turn-groups`);
+  if (!res.ok) {
+    return { groups: [], currentTurn: null, hiddenMessageIds: [] };
+  }
+  return (await res.json()) as TurnGroupsResponse;
+}
+
+/** Live streaming state the in-progress card pins at its bottom edge. */
+export interface TurnStreamingState {
+  /** Persisted streaming text or the live SSE delta, whichever is longer. */
+  text: string;
+  /** Short "Reading file X" style indicator from tool events. */
+  statusLog: string | null;
+  /** True while we're between send and first delta. */
+  awaiting: boolean;
+  /** "booting" / "idle" / etc. */
+  sessionStatus: string | null;
+}
+
+/**
+ * Hook returning both the raw groups data (for filtering the thread
+ * upstream) and the list of hidden message ids. Kept here alongside
+ * the component so the single query is shared — ChatTab calls this
+ * hook too and TanStack dedupes on the shared query key.
+ */
+export function useTurnGroups(featureId: string): TurnGroupsResponse {
+  const enabled = featureId.trim().length > 0;
+  const { data } = useQuery({
+    queryKey: turnGroupsQueryKey(featureId),
+    queryFn: () => fetchTurnGroups(featureId),
+    // Short stale window so the card appears fast when the user
+    // sends a message — the chat-state refetch triggered by the
+    // mutation will bump this in practice, but the low staleTime
+    // is a belt-and-braces fallback.
+    staleTime: 1_000,
+    refetchOnWindowFocus: false,
+    enabled,
+  });
+  return data ?? { groups: [], currentTurn: null, hiddenMessageIds: [] };
+}
+
+export interface TurnGroupListProps {
+  featureId: string;
+  /** Raw messages from the main chat query — used to hydrate cards. */
+  allMessages: readonly InteractiveMessage[];
+  /** Live streaming state for the in-progress card. */
+  streaming: TurnStreamingState;
+}
+
+export function TurnGroupList({ featureId, allMessages, streaming }: TurnGroupListProps) {
+  const { groups, currentTurn } = useTurnGroups(featureId);
+  if (groups.length === 0 && !currentTurn) return null;
+
+  // Index messages by id once so every card's children are O(1) lookups.
+  const byId = new Map<string, InteractiveMessage>();
+  for (const m of allMessages) byId.set(m.id, m);
+
+  return (
+    <div className="flex flex-col">
+      {groups.map((g) => (
+        <TurnGroupCard
+          key={g.id}
+          id={g.id}
+          title={g.title}
+          status="completed"
+          assistantMessageCount={g.assistantMessageCount}
+        >
+          <TurnChildMessages messageIds={g.messageIds} byId={byId} />
+        </TurnGroupCard>
+      ))}
+      {currentTurn ? (
+        <TurnGroupCard
+          key={currentTurn.id}
+          id={currentTurn.id}
+          title={currentTurn.title}
+          status="in-progress"
+          assistantMessageCount={currentTurn.assistantMessageCount}
+        >
+          <div className="flex flex-col gap-2">
+            <TurnChildMessages messageIds={currentTurn.messageIds} byId={byId} />
+            <StreamingIndicator streaming={streaming} />
+          </div>
+        </TurnGroupCard>
+      ) : null}
+    </div>
+  );
+}
+
+function TurnChildMessages({
+  messageIds,
+  byId,
+}: {
+  messageIds: readonly string[];
+  byId: Map<string, InteractiveMessage>;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {messageIds.map((mid) => {
+        const msg = byId.get(mid);
+        if (!msg) {
+          // Happens briefly after a send: the turn-groups query
+          // returned before the chat-state query refetched.
+          return (
+            <div key={mid} className="text-muted-foreground/50 text-[11px] italic">
+              …
+            </div>
+          );
+        }
+        const isUser = msg.role === InteractiveMessageRole.user;
+        return (
+          <div
+            key={mid}
+            className={
+              isUser
+                ? 'text-foreground border-l-2 border-violet-500/50 pl-2 text-[12px] whitespace-pre-wrap'
+                : 'text-foreground/90 pl-2 text-[12px] whitespace-pre-wrap'
+            }
+          >
+            <div className="text-muted-foreground/70 mb-0.5 text-[10px] font-medium tracking-wide uppercase">
+              {isUser ? 'You' : 'Assistant'}
+            </div>
+            {msg.content}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function StreamingIndicator({ streaming }: { streaming: TurnStreamingState }) {
+  const hasText = streaming.text.trim().length > 0;
+  const hasStatus = (streaming.statusLog ?? '').trim().length > 0;
+  const isBooting = streaming.sessionStatus === 'booting';
+
+  if (hasText) {
+    return (
+      <div className="text-foreground/90 pl-2 text-[12px] whitespace-pre-wrap">
+        <div className="text-muted-foreground/70 mb-0.5 text-[10px] font-medium tracking-wide uppercase">
+          Assistant
+        </div>
+        {streaming.text}
+        {hasStatus ? (
+          <div className="text-muted-foreground mt-1 inline-flex items-center gap-1 text-[10px] italic">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            {streaming.statusLog}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (hasStatus) {
+    return (
+      <div className="text-muted-foreground inline-flex items-center gap-1.5 pl-2 text-[11px] italic">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        {streaming.statusLog}
+      </div>
+    );
+  }
+
+  if (streaming.awaiting || isBooting) {
+    return (
+      <div className="text-muted-foreground inline-flex items-center gap-1.5 pl-2 text-[11px] italic">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        {isBooting ? 'Agent is waking up…' : 'Thinking…'}
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/src/presentation/web/components/features/chat/useChatRuntime.ts b/src/presentation/web/components/features/chat/useChatRuntime.ts
index df557f0d9..64f7bb0f4 100644
--- a/src/presentation/web/components/features/chat/useChatRuntime.ts
+++ b/src/presentation/web/components/features/chat/useChatRuntime.ts
@@ -204,6 +204,24 @@ export interface ChatRuntimeOptions {
    * kicked in once `hasPlan` became true.
    */
   pinInitialRequest?: boolean;
+  /**
+   * Message ids to filter out of the flat thread. These belong to
+   * server-derived "turn groups" that the host page renders as
+   * collapsible cards above the thread — the raw bubbles must not
+   * also appear in the flat message list, or the user would see the
+   * same content twice (once inside the card, once flat below).
+   * See `GetChatTurnGroupsUseCase` for the server-side derivation.
+   */
+  hiddenMessageIds?: readonly string[];
+  /**
+   * When true, the hook stops injecting its synthetic `streaming`
+   * message (the one that carries the live delta + "Thinking…" /
+   * "Agent is waking up…" placeholders) into `threadMessages`. The
+   * same streaming data is exposed separately on the return value
+   * (`streamingState`) so the host can render it wherever it wants —
+   * typically inside an in-progress turn card owned by the server.
+   */
+  suppressStreamingIndicator?: boolean;
 }
 
 /** A debug event captured from SSE for display in debug mode. */
@@ -719,6 +737,16 @@ export function useChatRuntime(
     return first ?? null;
   }, [stepProgress.hasPlan, pinInitialRequest, messages]);
 
+  // Server-derived turn-group filter. The set is rebuilt whenever the
+  // host passes a new array of hidden ids (typically from
+  // `useTurnGroups()` keyed off the same featureId). Kept outside the
+  // threadMessages memo so the expensive memo only re-runs when the
+  // underlying message list actually changes.
+  const hiddenMessageIdSet = useMemo(
+    () => new Set(options?.hiddenMessageIds ?? []),
+    [options?.hiddenMessageIds]
+  );
+
   const threadMessages: ThreadMessageLike[] = useMemo(() => {
     const hasPlan = stepProgress.hasPlan;
 
@@ -750,11 +778,12 @@ export function useChatRuntime(
     // placeholder-only case we still want the first user message pulled
     // out of the flat thread so the host's `<InitialRequestBubble>`
     // isn't duplicated below the tracker.
-    const shouldFilter = hasPlan || pinInitialRequest;
+    const shouldFilter = hasPlan || pinInitialRequest || hiddenMessageIdSet.size > 0;
     const sourceMessages = shouldFilter
       ? messages.filter((m) => {
           if (m.id === initialRequestMessage?.id) return false;
           if (m.stepId) return false; // step-tagged messages live inside their card
+          if (hiddenMessageIdSet.has(m.id)) return false; // hidden inside a completed turn-group card
           if (workflowRunning && m.role === InteractiveMessageRole.assistant) {
             // Race-window leftover — see comment above.
             return false;
@@ -817,33 +846,41 @@ export function useChatRuntime(
     }
 
     // Streaming text as the last message — may include a live activity suffix.
-    if (activeStreamText.trim()) {
-      const parts: { type: 'text'; text: string }[] = [{ type: 'text', text: activeStreamText }];
-      // Append live activity indicator when agent is doing tool work
-      if (statusLog) {
-        parts.push({ type: 'text', text: `*⏳ ${statusLog}*` });
+    //
+    // Skipped entirely when the host has asked us to suppress the
+    // indicator because the server-derived in-progress turn card is
+    // rendering it inline instead (see `streamingState` below).
+    const suppressStreaming = options?.suppressStreamingIndicator === true;
+
+    if (!suppressStreaming) {
+      if (activeStreamText.trim()) {
+        const parts: { type: 'text'; text: string }[] = [{ 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...*',
+            },
+          ],
+        });
       }
-      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;
@@ -855,10 +892,12 @@ export function useChatRuntime(
     sessionStatus,
     statusLog,
     options?.debugMode,
+    options?.suppressStreamingIndicator,
     debugEvents,
     stepProgress.hasPlan,
     stepProgress.allDone,
     pinInitialRequest,
+    hiddenMessageIdSet,
   ]);
 
   // ── Status info for typing indicator ──────────────────────────────────
@@ -972,5 +1011,20 @@ export function useChatRuntime(
     respondToInteraction,
     stepProgress,
     initialRequestMessage,
+    /** Raw persisted messages — exposed so the host can hydrate
+     *  collapsed server-derived turn-group cards by id lookup. */
+    rawMessages: messages,
+    /**
+     * Live streaming state for external renderers (in-progress turn
+     * card). Always populated whether or not the synthetic streaming
+     * thread message is injected — `suppressStreamingIndicator`
+     * only controls the flat-thread injection, not the data exposure.
+     */
+    streamingState: {
+      text: activeStreamText,
+      statusLog,
+      awaiting: awaitingResponse,
+      sessionStatus,
+    },
   };
 }
diff --git a/tests/unit/application/use-cases/interactive/get-chat-turn-groups.use-case.test.ts b/tests/unit/application/use-cases/interactive/get-chat-turn-groups.use-case.test.ts
new file mode 100644
index 000000000..e8bcf6504
--- /dev/null
+++ b/tests/unit/application/use-cases/interactive/get-chat-turn-groups.use-case.test.ts
@@ -0,0 +1,181 @@
+/**
+ * GetChatTurnGroupsUseCase unit tests.
+ *
+ * The use case derives "turn groups" from the raw interactive_messages
+ * history for a feature. A turn group is a user message plus every
+ * consecutive assistant reply until the next user message. The
+ * MOST RECENT turn stays live (not grouped) so the user always sees
+ * the current reply streaming; completed turns get collapsed into a
+ * single named card on the client.
+ *
+ * Messages that already carry a `stepId` belong to the setup workflow
+ * and are ignored here — those live inside the StepTracker, not the
+ * flat thread.
+ */
+
+import 'reflect-metadata';
+import { describe, it, expect, beforeEach } from 'vitest';
+import type { IInteractiveMessageRepository } from '@/application/ports/output/repositories/interactive-message-repository.interface.js';
+import type { InteractiveMessage } from '@/domain/generated/output.js';
+import { InteractiveMessageRole } from '@/domain/generated/output.js';
+import { GetChatTurnGroupsUseCase } from '@/application/use-cases/interactive/get-chat-turn-groups.use-case.js';
+
+function msg(
+  id: string,
+  role: InteractiveMessageRole,
+  content: string,
+  createdAtMs: number,
+  stepId?: string
+): InteractiveMessage {
+  return {
+    id,
+    featureId: 'feat-1',
+    role,
+    content,
+    createdAt: new Date(createdAtMs) as unknown as InteractiveMessage['createdAt'],
+    updatedAt: new Date(createdAtMs) as unknown as InteractiveMessage['updatedAt'],
+    stepId,
+  };
+}
+
+class FakeRepo implements IInteractiveMessageRepository {
+  messages: InteractiveMessage[] = [];
+  async create(): Promise<void> {
+    // The use case under test is read-only; writes never fire.
+    return;
+  }
+  async findByFeatureId(): Promise<InteractiveMessage[]> {
+    return [...this.messages];
+  }
+  async findBySessionId(): Promise<InteractiveMessage[]> {
+    return [];
+  }
+  async deleteByFeatureId(): Promise<void> {
+    // The use case under test is read-only; deletes never fire.
+    return;
+  }
+}
+
+describe('GetChatTurnGroupsUseCase', () => {
+  let repo: FakeRepo;
+  let useCase: GetChatTurnGroupsUseCase;
+
+  beforeEach(() => {
+    repo = new FakeRepo();
+    useCase = new GetChatTurnGroupsUseCase(repo);
+  });
+
+  it('returns empty when the feature has no messages', async () => {
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    expect(result.groups).toEqual([]);
+    expect(result.currentTurn).toBeNull();
+    expect(result.hiddenMessageIds).toEqual([]);
+  });
+
+  it('ignores messages that carry a stepId (those belong to setup)', async () => {
+    repo.messages = [
+      msg('m1', InteractiveMessageRole.user, 'Build it', 1000, 'step-1'),
+      msg('m2', InteractiveMessageRole.assistant, 'done', 2000, 'step-1'),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    expect(result.groups).toEqual([]);
+    expect(result.currentTurn).toBeNull();
+    expect(result.hiddenMessageIds).toEqual([]);
+  });
+
+  it('emits the only live turn as currentTurn (in-progress) and hides its messages', async () => {
+    repo.messages = [
+      msg('m1', InteractiveMessageRole.user, 'Fix bug X', 1000),
+      msg('m2', InteractiveMessageRole.assistant, 'Working…', 2000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    expect(result.groups).toEqual([]);
+    expect(result.currentTurn).not.toBeNull();
+    expect(result.currentTurn?.status).toBe('in-progress');
+    expect(result.currentTurn?.messageIds).toEqual(['m1', 'm2']);
+    expect(result.hiddenMessageIds).toEqual(['m1', 'm2']);
+  });
+
+  it('groups every completed turn and promotes the latest to currentTurn', async () => {
+    repo.messages = [
+      // completed turn
+      msg('u1', InteractiveMessageRole.user, 'Fix bug X', 1000),
+      msg('a1', InteractiveMessageRole.assistant, 'fixed', 2000),
+      msg('a2', InteractiveMessageRole.assistant, 'also cleaned up', 2500),
+      // live turn
+      msg('u2', InteractiveMessageRole.user, 'Add feature Y', 3000),
+      msg('a3', InteractiveMessageRole.assistant, 'adding…', 4000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+
+    expect(result.groups).toHaveLength(1);
+    const [g] = result.groups;
+    expect(g.id).toBe('turn-u1');
+    expect(g.status).toBe('completed');
+    expect(g.messageIds).toEqual(['u1', 'a1', 'a2']);
+
+    expect(result.currentTurn).not.toBeNull();
+    expect(result.currentTurn?.id).toBe('turn-u2');
+    expect(result.currentTurn?.status).toBe('in-progress');
+    expect(result.currentTurn?.messageIds).toEqual(['u2', 'a3']);
+
+    // BOTH completed and current turn ids are hidden from the flat
+    // thread — the in-progress card now owns the live bubbles.
+    expect(result.hiddenMessageIds).toEqual(['u1', 'a1', 'a2', 'u2', 'a3']);
+  });
+
+  it('produces one group per completed user turn in chronological order', async () => {
+    repo.messages = [
+      msg('u1', InteractiveMessageRole.user, 'First ask', 1000),
+      msg('a1', InteractiveMessageRole.assistant, 'first reply', 1500),
+      msg('u2', InteractiveMessageRole.user, 'Second ask', 2000),
+      msg('a2', InteractiveMessageRole.assistant, 'second reply', 2500),
+      msg('u3', InteractiveMessageRole.user, 'Third ask — the live one', 3000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+
+    expect(result.groups.map((g) => g.id)).toEqual(['turn-u1', 'turn-u2']);
+    expect(result.groups[0].messageIds).toEqual(['u1', 'a1']);
+    expect(result.groups[1].messageIds).toEqual(['u2', 'a2']);
+    expect(result.currentTurn?.id).toBe('turn-u3');
+    expect(result.currentTurn?.messageIds).toEqual(['u3']);
+    expect(result.hiddenMessageIds).toEqual(['u1', 'a1', 'u2', 'a2', 'u3']);
+  });
+
+  it('truncates long user messages in the preview and title', async () => {
+    const longAsk = 'a'.repeat(500);
+    repo.messages = [
+      msg('u1', InteractiveMessageRole.user, longAsk, 1000),
+      msg('a1', InteractiveMessageRole.assistant, 'ok', 2000),
+      msg('u2', InteractiveMessageRole.user, 'live', 3000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    const [g] = result.groups;
+    expect(g.userMessagePreview.length).toBeLessThanOrEqual(120);
+    expect(g.title.length).toBeLessThanOrEqual(140);
+    expect(g.title.startsWith('Working on')).toBe(true);
+  });
+
+  it('assigns a descriptive fallback title when the user message is empty', async () => {
+    repo.messages = [
+      msg('u1', InteractiveMessageRole.user, '   ', 1000),
+      msg('a1', InteractiveMessageRole.assistant, 'ok', 2000),
+      msg('u2', InteractiveMessageRole.user, 'live', 3000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    expect(result.groups[0].title).toBe('Working on your request');
+  });
+
+  it('leaves a trailing assistant orphan (no preceding user message) alone', async () => {
+    repo.messages = [
+      msg('a0', InteractiveMessageRole.assistant, 'hi', 500),
+      msg('u1', InteractiveMessageRole.user, 'Fix bug', 1000),
+      msg('a1', InteractiveMessageRole.assistant, 'done', 1500),
+      msg('u2', InteractiveMessageRole.user, 'live', 2000),
+    ];
+    const result = await useCase.execute({ featureId: 'feat-1' });
+    expect(result.groups.map((g) => g.id)).toEqual(['turn-u1']);
+    expect(result.currentTurn?.id).toBe('turn-u2');
+    expect(result.hiddenMessageIds).toEqual(['u1', 'a1', 'u2']);
+  });
+});

From 865608e9c741385e2aaf7d00f6210f2e14269ca6 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 03:16:11 +0300
Subject: [PATCH 3/7] feat(web): one-click get online with unified smart deploy
 activity log

Turns the "Get online" state into a fully autonomous pipeline and
ships a single chronological log surface for every long-running
operation the button can trigger.

- new SmartDeployLogsDrawer merges GitRemoteCreate, CloudDeploy,
  and RepoSync log entries into one timeline sorted by createdAt,
  each row tagged with a coloured kind chip (github sky, cloud
  fuchsia, sync emerald) so the source of every line stays obvious
- SmartDeployButton gets a persistent scroll-icon segment after the
  chevron that opens the unified drawer, always visible so users
  never have to hunt for a per-op log affordance
- handleGetOnline in SmartDeployCluster runs the full best-effort
  pipeline on a single click: ensure owners, create github remote
  with the default owner plus slugified name, refresh git status,
  auto-select the first connected cloud provider, initiate deploy
- the drawer auto-opens the moment any primary action fires and
  polls every 1.5s while running so the pipeline is never silent;
  toasts surface the exact reason when no github owner or no
  connected provider is available instead of reverting the button
- rocket tone plus gradient icon chip on the "Get online" button
  so it pops as the primary call to action; workingSource gains a
  getOnline variant that pins the label on "Getting online..."
  through the entire pipeline to kill intermediate state flicker
- oneClickRunning flag in useSmartDeployState dominates every other
  branch so the button cannot flash through deploy or save while
  the github create and cloud deploy trade batons
- top-bar buttons and tabs switch from h-9 inside an h-12 bar to an
  explicit h-12 so the row sits flush top-to-bottom with no outer
  padding band; explicit height avoids h-full-in-flex-items-center
  resolution quirks

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../application-page/app-overflow-menu.tsx    |   2 +-
 .../application-page/app-view-tabs.tsx        |   4 +-
 .../application-page/smart-deploy-button.tsx  |  91 ++++-
 .../application-page/smart-deploy-cluster.tsx | 211 ++++++++---
 .../smart-deploy-logs-drawer.tsx              | 327 ++++++++++++++++++
 .../web/hooks/use-smart-deploy-state.ts       |  37 +-
 6 files changed, 608 insertions(+), 64 deletions(-)
 create mode 100644 src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx

diff --git a/src/presentation/web/components/features/application-page/app-overflow-menu.tsx b/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
index e2530feb6..be04c8286 100644
--- a/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
+++ b/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
@@ -43,7 +43,7 @@ export function AppOverflowMenu({ children, className }: AppOverflowMenuProps) {
             'text-muted-foreground hover:bg-muted hover:text-foreground',
             'data-[state=open]:bg-background data-[state=open]:text-foreground',
             'data-[state=open]:border-t-primary',
-            'relative inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-none border-t-2 border-t-transparent bg-transparent shadow-none transition-none',
+            'relative inline-flex h-12 w-9 cursor-pointer items-center justify-center rounded-none border-t-2 border-t-transparent bg-transparent shadow-none transition-none',
             className
           )}
         >
diff --git a/src/presentation/web/components/features/application-page/app-view-tabs.tsx b/src/presentation/web/components/features/application-page/app-view-tabs.tsx
index e8fe73917..314a6b328 100644
--- a/src/presentation/web/components/features/application-page/app-view-tabs.tsx
+++ b/src/presentation/web/components/features/application-page/app-view-tabs.tsx
@@ -98,7 +98,7 @@ export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: App
   return (
     <TooltipProvider delayDuration={400}>
       <Tabs value={active} onValueChange={handleTabChange} className="contents">
-        <TabsList className="bg-muted/40 h-9 shrink-0 justify-start gap-0 rounded-none border-0 p-0">
+        <TabsList className="bg-muted/40 h-12 shrink-0 justify-start gap-0 rounded-none border-0 p-0">
           {VIEW_TABS.map((view, idx) => {
             const Icon = VIEW_ICONS[view];
             const disabled = disabledTabs.includes(view);
@@ -114,7 +114,7 @@ export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: App
                   'data-[state=active]:bg-background data-[state=active]:text-foreground',
                   'data-[state=active]:font-semibold',
                   '[&:not([data-state=active])]:border-r-border',
-                  'relative h-9 rounded-none border-r border-r-transparent',
+                  'relative h-12 rounded-none border-r border-r-transparent',
                   'bg-transparent px-3 text-[12px] font-medium shadow-none transition-none',
                   'cursor-pointer data-[state=active]:shadow-none',
                   isLast && 'last:border-r-transparent',
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
index 665ab5c26..1cc3fc3ff 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
@@ -17,11 +17,11 @@ import {
   AlertTriangle,
   Check,
   ChevronDown,
-  Cloud,
   Loader2,
   RefreshCw,
   Rocket,
   Save,
+  ScrollText,
   Sparkles,
 } from 'lucide-react';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -40,6 +40,10 @@ export interface SmartDeployButtonProps {
    *  path instead of committing to a specific action. */
   panelOpen?: boolean;
   onPanelOpenChange?(open: boolean): void;
+  /** Opens the unified Smart Deploy activity log drawer. When omitted
+   *  the log button segment is hidden — kept optional so the
+   *  component still works in storybook without the drawer wired up. */
+  onOpenLogs?(): void;
   className?: string;
 }
 
@@ -53,8 +57,12 @@ interface LabelSpec {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   sub?: string;
-  tone: 'primary' | 'emerald' | 'amber' | 'destructive' | 'muted';
+  tone: 'primary' | 'emerald' | 'amber' | 'destructive' | 'muted' | 'rocket';
   spinning?: boolean;
+  /** When true, the icon is rendered inside a vibrant gradient chip
+   *  instead of inheriting the tone color — reserved for the
+   *  one-click "Get online" surface that should visually pop. */
+  iconChip?: boolean;
 }
 
 function labelFor(state: SmartDeployState): LabelSpec {
@@ -64,8 +72,20 @@ function labelFor(state: SmartDeployState): LabelSpec {
     case 'working': {
       // Specific-per-source label instead of the generic "Working…".
       // Sync: we're doing the git commit+push pipeline. Deploy: the
-      // cloud provider is shipping the build. Fallback stays as
-      // "Working…" for any edge case where source isn't set.
+      // cloud provider is shipping the build. GetOnline: the
+      // one-click create-repo + auto-deploy pipeline (single label
+      // covering the whole sequence so the button can't flicker
+      // between intermediate states). Fallback stays as "Working…"
+      // for any edge case where source isn't set.
+      if (state.workingSource === 'getOnline') {
+        return {
+          icon: Loader2,
+          label: 'Getting online…',
+          tone: 'rocket',
+          spinning: true,
+          iconChip: true,
+        };
+      }
       if (state.workingSource === 'sync') {
         return { icon: Loader2, label: 'Syncing code', tone: 'primary', spinning: true };
       }
@@ -119,9 +139,9 @@ function labelFor(state: SmartDeployState): LabelSpec {
         tone: 'emerald',
       };
     case 'getOnline':
-      return { icon: Cloud, label: 'Get online', tone: 'primary' };
+      return { icon: Rocket, label: 'Get online', tone: 'rocket', iconChip: true };
     default:
-      return { icon: Cloud, label: 'Get online', tone: 'primary' };
+      return { icon: Rocket, label: 'Get online', tone: 'rocket', iconChip: true };
   }
 }
 
@@ -158,6 +178,15 @@ const TONE_CLASSES: Record<LabelSpec['tone'], string> = {
     'border-border border-b-2 border-b-destructive bg-destructive/5 text-destructive hover:bg-destructive/10 dark:bg-destructive/10 dark:hover:bg-destructive/15',
   muted:
     'border-border border-b-2 border-b-transparent bg-background text-muted-foreground hover:bg-accent',
+  // One-click "Get online" call to action. Mirrors the structure of
+  // the `primary` tone (solid subtle tint, no body gradient) so the
+  // Tailwind build can't mis-render a multi-stop gradient with
+  // opacity modifiers as a full-saturation fuchsia block. The
+  // "cool colored" accent lives entirely in the icon chip — see
+  // `iconChip` rendering below — so the button reads as a pop of
+  // colour without drowning the label in magenta.
+  rocket:
+    'border-border border-b-2 border-b-fuchsia-500 bg-fuchsia-500/5 text-fuchsia-700 hover:bg-fuchsia-500/10 dark:text-fuchsia-300 dark:bg-fuchsia-500/10 dark:hover:bg-fuchsia-500/15',
 };
 
 export function SmartDeployButton({
@@ -166,6 +195,7 @@ export function SmartDeployButton({
   panel,
   panelOpen: controlledPanelOpen,
   onPanelOpenChange,
+  onOpenLogs,
   className,
 }: SmartDeployButtonProps) {
   const spec = labelFor(state);
@@ -194,17 +224,31 @@ export function SmartDeployButton({
         onClick={onPrimaryClick}
         disabled={!isInteractive}
         className={cn(
-          // Square, flat, VS-Code-tab language. The 2px top accent
-          // comes from the tone class; the rest of the frame stays
-          // neutral so "green everywhere" can't happen anymore.
-          'inline-flex h-9 items-center gap-2 rounded-none border border-r-0 px-3 text-xs font-medium transition-colors',
+          // Square, flat, VS-Code-tab language. Fixed h-12 matches
+          // the top bar (TOP_BAR_HEIGHT_CLASS = 'h-12') so the
+          // button sits flush top-to-bottom with no outer padding
+          // band. Using h-full here is unreliable inside a flex
+          // items-center parent — the explicit height always wins.
+          'inline-flex h-12 items-center gap-2 rounded-none border border-r-0 px-3 text-xs font-medium transition-colors',
           TONE_CLASSES[spec.tone],
           isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-70'
         )}
         title={spec.label}
       >
-        <span className="relative inline-flex">
-          <Icon className={cn('size-3.5 shrink-0', spec.spinning && 'animate-spin')} />
+        <span
+          className={cn(
+            'relative inline-flex',
+            spec.iconChip &&
+              'h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-500 text-white shadow-sm'
+          )}
+        >
+          <Icon
+            className={cn(
+              'shrink-0',
+              spec.iconChip ? 'size-3' : 'size-3.5',
+              spec.spinning && 'animate-spin'
+            )}
+          />
           {/* Tiny dirty-dot overlay on the icon when there are pending changes
               and we're NOT already showing them in the label. Hidden for
               states whose label already communicates the state so we don't
@@ -239,7 +283,7 @@ export function SmartDeployButton({
               // Square chevron half, same top accent as the main
               // button so the split reads as one rectangle with a
               // single vertical divider between the two halves.
-              'inline-flex h-9 items-center justify-center rounded-none border px-1.5 transition-colors',
+              'inline-flex h-12 items-center justify-center rounded-none border px-1.5 transition-colors',
               TONE_CLASSES[spec.tone],
               'cursor-pointer'
             )}
@@ -251,6 +295,27 @@ export function SmartDeployButton({
           {panel}
         </PopoverContent>
       </Popover>
+
+      {/* ── Right-most: unified activity log trigger ──────────────
+          Persistent, always visible next to the Smart Deploy surface
+          so the user can read the full cross-operation timeline
+          (GitHub + Cloud + Sync) in one place without hunting for a
+          context-specific button inside the panel. */}
+      {onOpenLogs ? (
+        <button
+          type="button"
+          aria-label="Open activity log"
+          title="Activity log — all Smart Deploy operations"
+          onClick={onOpenLogs}
+          className={cn(
+            'inline-flex h-12 items-center justify-center rounded-none border border-l-0 px-2 transition-colors',
+            TONE_CLASSES[spec.tone],
+            'cursor-pointer'
+          )}
+        >
+          <ScrollText className="size-3.5" />
+        </button>
+      ) : null}
     </div>
   );
 }
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
index 0ba98c0b1..8ca4507c4 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
@@ -10,18 +10,15 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import {
-  CloudDeploymentProvider,
-  CloudDeploymentStatus,
-  type Application,
-} from '@shepai/core/domain/generated/output';
+import { toast } from 'sonner';
+import { CloudDeploymentProvider, type Application } from '@shepai/core/domain/generated/output';
 import type { useCloudDeployAction } from '@/hooks/use-cloud-deploy-action';
 import { useGitStatus } from '@/hooks/use-git-status';
 import { useSyncAction } from '@/hooks/use-sync-action';
 import { useSmartDeployState } from '@/hooks/use-smart-deploy-state';
 import { SmartDeployButton } from './smart-deploy-button';
 import { DeployPanel } from './deploy-panel';
-import { OperationLogsDrawer } from './operation-logs-drawer';
+import { SmartDeployLogsDrawer } from './smart-deploy-logs-drawer';
 import { ConnectProviderModal } from './connect-provider-modal';
 import { PublishToGitHubModal, type PublishOwner } from './publish-to-github-modal';
 
@@ -49,8 +46,6 @@ export interface SmartDeployClusterProps {
   agentRunning: boolean;
 }
 
-type LogsTarget = { kind: 'CloudDeploy' | 'GitRemoteCreate' | 'RepoSync'; title: string } | null;
-
 export function SmartDeployCluster({
   application,
   cloudDeploy,
@@ -109,8 +104,13 @@ export function SmartDeployCluster({
   );
   const [connectMode, setConnectMode] = useState<'connect' | 'update'>('connect');
 
-  // Operation logs drawer — opens on the right side, scoped per op kind.
-  const [logsTarget, setLogsTarget] = useState<LogsTarget>(null);
+  // Unified Smart Deploy activity log drawer. Replaces the per-op-kind
+  // drawer — now a single timeline that merges GitRemoteCreate,
+  // CloudDeploy, and RepoSync entries sorted by createdAt so the user
+  // reads the whole story in one place. The log button on the right
+  // edge of the SmartDeployButton toggles this, and every primary
+  // action auto-opens it so the pipeline is never invisible.
+  const [logsOpen, setLogsOpen] = useState<boolean>(false);
 
   // Popover panel open state — lifted here (instead of inside
   // SmartDeployButton) so the primary-click handler for the `getOnline`
@@ -119,6 +119,13 @@ export function SmartDeployCluster({
   // rather than forcing them through the GitHub modal.
   const [panelOpen, setPanelOpen] = useState<boolean>(false);
 
+  // One-click "Get online" pipeline guard. Set to true for the entire
+  // duration of the create-repo + auto-deploy sequence so
+  // `useSmartDeployState` can lock the label on "Getting online…" from
+  // click to success — no flickering through intermediate `deploy` /
+  // `save` states between API calls.
+  const [oneClickRunning, setOneClickRunning] = useState<boolean>(false);
+
   // Friendly cloud-provider display name. Computed up here (rather than
   // near the render) so `useSmartDeployState` can use it to produce a
   // specific "Deploying to Cloudflare Pages" label instead of a generic
@@ -143,6 +150,7 @@ export function SmartDeployCluster({
     syncAction: sync.state,
     hasConnectedCloudProvider,
     cloudProviderName,
+    oneClickRunning,
   });
 
   // ── Action dispatch ────────────────────────────────────────────────
@@ -155,35 +163,28 @@ export function SmartDeployCluster({
   // still click "Activity log" inside the panel to read the entries
   // post-hoc.
 
+  // Every primary action opens the unified activity drawer so the
+  // pipeline is never invisible — the user sees the same timeline
+  // regardless of which action kicked it off.
   const handleSaveChanges = useCallback(async () => {
+    setLogsOpen(true);
     await sync.sync();
     await refreshGitStatus();
-    if (sync.state.kind === 'failed') {
-      setLogsTarget({ kind: 'RepoSync', title: 'Save & backup' });
-    }
   }, [sync, refreshGitStatus]);
 
   const handlePublishToWeb = useCallback(async () => {
+    setLogsOpen(true);
     await cloudDeploy.initiate();
-    if (cloudDeploy.state.status === CloudDeploymentStatus.Failed) {
-      setLogsTarget({ kind: 'CloudDeploy', title: 'Publish to web' });
-    }
   }, [cloudDeploy]);
 
   const handleRedeploy = handlePublishToWeb;
 
   const handleSaveAndPublish = useCallback(async () => {
+    setLogsOpen(true);
     await sync.sync();
     await refreshGitStatus();
-    if (sync.state.kind === 'failed') {
-      // Sync side blew up — open the drawer and stop here.
-      setLogsTarget({ kind: 'RepoSync', title: 'Save & publish everything' });
-      return;
-    }
+    if (sync.state.kind === 'failed') return;
     await cloudDeploy.initiate();
-    if (cloudDeploy.state.status === CloudDeploymentStatus.Failed) {
-      setLogsTarget({ kind: 'CloudDeploy', title: 'Save & publish everything' });
-    }
   }, [sync, refreshGitStatus, cloudDeploy]);
 
   const handleSetUpCodeStorage = useCallback(async () => {
@@ -198,11 +199,9 @@ export function SmartDeployCluster({
   // user doesn't have to click Publish to web as a separate step.
   const handleSelectProvider = useCallback(
     async (provider: CloudDeploymentProvider) => {
+      setLogsOpen(true);
       await cloudDeploy.selectProvider(provider);
       await cloudDeploy.initiate();
-      if (cloudDeploy.state.status === CloudDeploymentStatus.Failed) {
-        setLogsTarget({ kind: 'CloudDeploy', title: 'Publish to web' });
-      }
     },
     [cloudDeploy]
   );
@@ -223,7 +222,7 @@ export function SmartDeployCluster({
   }, []);
 
   const handleOpenLogs = useCallback(() => {
-    setLogsTarget({ kind: 'CloudDeploy', title: 'Activity log' });
+    setLogsOpen(true);
   }, []);
 
   const handleOpenInGitHub = useCallback(() => {
@@ -235,6 +234,125 @@ export function SmartDeployCluster({
     }
   }, [gitStatus]);
 
+  // One-click "Get online" pipeline. Best-effort end-to-end:
+  //   1. If GitHub owners haven't been loaded yet, fetch them.
+  //   2. If the repo has no git remote yet, create one against the
+  //      user's default owner using the slugified application name.
+  //      Any failure here (HTTP 409 on name collision, network blip)
+  //      is surfaced via the logs drawer but does NOT abort the
+  //      pipeline — the cloud deploy can still run off a local-only
+  //      repo in some provider configurations.
+  //   3. If at least one cloud provider is connected, pick the first
+  //      one (or the already-selected one) and fire a deploy.
+  //   4. If NO cloud provider is connected, we've done half the work
+  //      (the remote now exists) — open the panel so the user can
+  //      connect a provider in one more click.
+  //
+  // Throughout, `oneClickRunning` stays true so the button label is
+  // pinned on "Getting online…" and the transition to `live` is a
+  // single, clean flip at the end.
+  const handleGetOnline = useCallback(async () => {
+    if (oneClickRunning || agentRunning) return;
+    setOneClickRunning(true);
+    // Open the unified activity drawer IMMEDIATELY so the user
+    // never stares at a silently-reverting button. Every server-side
+    // log entry that the pipeline writes streams into the drawer
+    // live via its 1.5s poll.
+    setLogsOpen(true);
+    let didAnyWork = false;
+    try {
+      // 1. Ensure owners loaded — needed to pick a default owner
+      //    for the create-remote call below.
+      await ensureOwners();
+
+      // 2. Create the GitHub remote if we don't have one yet. We
+      //    re-read `gitStatus` defensively in case it loaded between
+      //    user intent and click.
+      const hasRemoteNow = gitStatus?.hasRemote === true || Boolean(application.gitRemoteUrl);
+      if (!hasRemoteNow) {
+        const ownersSnapshot = owners;
+        const firstOwner = ownersSnapshot && ownersSnapshot.length > 0 ? ownersSnapshot[0] : null;
+        if (!firstOwner) {
+          // No GitHub connection at all — we cannot create a remote
+          // automatically. Surface the gap with a toast so the user
+          // knows WHY nothing happened, and open the panel so they
+          // can hit "Connect GitHub" in one click.
+          toast.error('Connect GitHub first', {
+            description:
+              'One-click Get online needs a GitHub connection to create the remote. Open the panel and connect GitHub.',
+          });
+          setPanelOpen(true);
+        } else {
+          const defaultRepoName = application.name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+          try {
+            const res = await fetch(`/api/applications/${application.id}/git/create-remote`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                ownerLogin: firstOwner.login,
+                repoName: defaultRepoName,
+                visibility: 'private',
+              }),
+            });
+            didAnyWork = true;
+            if (!res.ok) {
+              const body = (await res.json().catch(() => ({}))) as { error?: string };
+              toast.error('GitHub publish failed', {
+                description: body.error ?? `HTTP ${res.status}`,
+              });
+            }
+          } catch (err) {
+            toast.error('GitHub publish failed', {
+              description: err instanceof Error ? err.message : 'Network error',
+            });
+          }
+          await refreshGitStatus();
+        }
+      }
+
+      // 3. Auto-deploy to the first connected cloud provider.
+      const connected = providers.find((p) => p.enabled && p.connected);
+      if (connected) {
+        if (!cloudDeploy.state.provider || cloudDeploy.state.provider !== connected.id) {
+          await cloudDeploy.selectProvider(connected.id);
+        }
+        await cloudDeploy.initiate();
+        didAnyWork = true;
+      } else {
+        // No cloud provider connected — surface the gap with a toast
+        // and open the panel. The repo half may have already run.
+        toast.error('Connect a hosting provider', {
+          description:
+            'One-click Get online needs a connected cloud provider to deploy. Pick one from the panel.',
+        });
+        setPanelOpen(true);
+      }
+
+      if (!didAnyWork) {
+        // Nothing actually ran — close the drawer again so the user
+        // isn't staring at an empty "No activity yet" state.
+        setLogsOpen(false);
+      }
+    } finally {
+      setOneClickRunning(false);
+    }
+  }, [
+    oneClickRunning,
+    agentRunning,
+    ensureOwners,
+    gitStatus,
+    owners,
+    application.id,
+    application.name,
+    application.gitRemoteUrl,
+    refreshGitStatus,
+    providers,
+    cloudDeploy,
+  ]);
+
   // Primary-click dispatch table — drives the left-half of the split button.
   const handlePrimaryClick = useCallback(() => {
     if (agentRunning) return;
@@ -260,12 +378,13 @@ export function SmartDeployCluster({
         }
         return;
       case 'getOnline':
-        // Don't force the user through the GitHub flow — opening the
-        // panel lets them pick Save & backup OR Publish to web (or
-        // Connect hosting) independently. Deploying doesn't actually
-        // require a git remote; the old "Get online → GitHub modal"
-        // shortcut was biased toward one path and blocked the other.
-        setPanelOpen(true);
+        // One-click "Get online" — create repo + auto-deploy as a
+        // single pipeline, best effort. The button label is pinned
+        // on "Getting online…" throughout via `oneClickRunning` so
+        // the user sees a single smooth transition from click to
+        // live, not a sequence of intermediate state flashes. The
+        // chevron still opens the full panel for advanced control.
+        void handleGetOnline();
         return;
       case 'failed':
         // Retry whichever side failed.
@@ -283,6 +402,7 @@ export function SmartDeployCluster({
     handleSaveAndPublish,
     handleSaveChanges,
     handlePublishToWeb,
+    handleGetOnline,
   ]);
 
   // First-time publish flow — wraps the existing PublishToGitHubModal.
@@ -299,7 +419,7 @@ export function SmartDeployCluster({
       }
       setPublishModalOpen(false);
       await refreshGitStatus();
-      setLogsTarget({ kind: 'GitRemoteCreate', title: 'Set up code backup' });
+      setLogsOpen(true);
     },
     [application.id, refreshGitStatus]
   );
@@ -324,6 +444,7 @@ export function SmartDeployCluster({
         onPrimaryClick={handlePrimaryClick}
         panelOpen={panelOpen}
         onPanelOpenChange={setPanelOpen}
+        onOpenLogs={handleOpenLogs}
         panel={
           <DeployPanel
             state={smartState}
@@ -353,18 +474,16 @@ export function SmartDeployCluster({
         }
       />
 
-      {/* Logs drawer — single instance, opened with the right scope by
-          whichever action fired last. */}
-      <OperationLogsDrawer
-        open={logsTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setLogsTarget(null);
-        }}
-        kind={(logsTarget?.kind ?? 'CloudDeploy') as 'CloudDeploy' | 'GitRemoteCreate'}
-        operationId={application.id}
-        title={logsTarget?.title ?? 'Activity log'}
+      {/* Unified Smart Deploy activity drawer — a single chronological
+          timeline merging GitRemoteCreate + CloudDeploy + RepoSync
+          logs. Replaces the old per-kind drawer so the user never
+          has to guess which scope the currently-open log belongs to. */}
+      <SmartDeployLogsDrawer
+        open={logsOpen}
+        onOpenChange={setLogsOpen}
+        applicationId={application.id}
+        isRunning={smartState.kind === 'working' || oneClickRunning}
         subtitle={cloudProviderName ?? undefined}
-        isRunning={smartState.kind === 'working'}
       />
 
       {/* First-time publish modal */}
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
new file mode 100644
index 000000000..4c5850552
--- /dev/null
+++ b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
@@ -0,0 +1,327 @@
+'use client';
+
+/**
+ * SmartDeployLogsDrawer — unified activity log for the Smart Deploy
+ * cluster. Every long-running operation that the button can trigger
+ * writes to its own `operation_log_entries` scope on the server:
+ *
+ *   - GitRemoteCreate  — "Publish to GitHub" / "Get online" repo half
+ *   - CloudDeploy      — "Publish to web" / "Get online" deploy half
+ *   - RepoSync         — "Save & backup" commit+push pipeline
+ *
+ * This drawer fetches all three in parallel, merges them by
+ * `createdAt`, and renders one chronologically-sorted stream so the
+ * user sees a single unified timeline for the whole Smart Deploy
+ * surface — no more guessing which operation the visible log drawer
+ * is scoped to.
+ *
+ * Each row is tagged with a small colored "kind" chip so the source
+ * of every entry stays obvious. A "Show debug" toggle hides Debug-level
+ * entries by default; "Copy all" produces a plaintext dump suitable
+ * for pasting into a bug report.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AlertTriangle,
+  Bug,
+  CircleCheck,
+  Cloud,
+  Copy,
+  GitBranch,
+  Github,
+  Info,
+  Loader2,
+  TriangleAlert,
+} from 'lucide-react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { cn } from '@/lib/utils';
+
+export type SmartOpKind = 'CloudDeploy' | 'GitRemoteCreate' | 'RepoSync';
+type LogLevel = 'Debug' | 'Info' | 'Warn' | 'Error';
+
+interface OperationLogEntryDto {
+  id: string;
+  operationKind: SmartOpKind;
+  operationId: string;
+  level: LogLevel;
+  message: string;
+  detail?: string;
+  createdAt: string;
+}
+
+const OP_KINDS: readonly SmartOpKind[] = ['GitRemoteCreate', 'CloudDeploy', 'RepoSync'];
+
+const KIND_META: Record<
+  SmartOpKind,
+  { label: string; icon: typeof Info; chipClass: string; iconClass: string }
+> = {
+  GitRemoteCreate: {
+    label: 'GitHub',
+    icon: Github,
+    chipClass: 'bg-sky-500/15 text-sky-700 dark:text-sky-300',
+    iconClass: 'text-sky-500',
+  },
+  CloudDeploy: {
+    label: 'Cloud',
+    icon: Cloud,
+    chipClass: 'bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300',
+    iconClass: 'text-fuchsia-500',
+  },
+  RepoSync: {
+    label: 'Sync',
+    icon: GitBranch,
+    chipClass: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
+    iconClass: 'text-emerald-500',
+  },
+};
+
+const LEVEL_ICON: Record<LogLevel, { icon: typeof Info; className: string }> = {
+  Debug: { icon: Bug, className: 'text-muted-foreground' },
+  Info: { icon: Info, className: 'text-sky-500' },
+  Warn: { icon: TriangleAlert, className: 'text-amber-500' },
+  Error: { icon: AlertTriangle, className: 'text-destructive' },
+};
+
+function formatTime(iso: string): string {
+  try {
+    return new Date(iso).toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+export interface SmartDeployLogsDrawerProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  applicationId: string;
+  /** When true, the drawer polls for new entries every 1.5s. */
+  isRunning: boolean;
+  /** Friendly subtitle, e.g. cloud provider name. */
+  subtitle?: string;
+}
+
+export function SmartDeployLogsDrawer({
+  open,
+  onOpenChange,
+  applicationId,
+  isRunning,
+  subtitle,
+}: SmartDeployLogsDrawerProps) {
+  const [entries, setEntries] = useState<OperationLogEntryDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showDebug, setShowDebug] = useState(false);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Fetch all three scopes in parallel, then merge. Any single
+      // request failing doesn't poison the drawer — we still show
+      // what we have and surface a soft error banner.
+      const responses = await Promise.all(
+        OP_KINDS.map(async (kind) => {
+          try {
+            const res = await fetch(
+              `/api/operations/${encodeURIComponent(kind)}/${encodeURIComponent(applicationId)}/logs`
+            );
+            if (!res.ok) return { kind, entries: [] as OperationLogEntryDto[] };
+            const body = (await res.json()) as { entries?: OperationLogEntryDto[] };
+            return { kind, entries: body.entries ?? [] };
+          } catch {
+            return { kind, entries: [] as OperationLogEntryDto[] };
+          }
+        })
+      );
+      const merged = responses
+        .flatMap((r) => r.entries)
+        .sort((a, b) => {
+          const ta = new Date(a.createdAt).getTime();
+          const tb = new Date(b.createdAt).getTime();
+          return ta - tb;
+        });
+      setEntries(merged);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load logs');
+    } finally {
+      setLoading(false);
+    }
+  }, [applicationId]);
+
+  // Fetch on open + poll while running.
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    if (!isRunning) return;
+    const timer = setInterval(() => {
+      void refresh();
+    }, 1500);
+    return () => clearInterval(timer);
+  }, [open, isRunning, refresh]);
+
+  // Auto-scroll to bottom while running so new entries are visible
+  // without the user chasing them. Paused otherwise so historical
+  // browsing isn't yanked.
+  useEffect(() => {
+    if (!isRunning || !open) return;
+    const el = bodyRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [entries, isRunning, open]);
+
+  const visible = useMemo(
+    () => (showDebug ? entries : entries.filter((e) => e.level !== 'Debug')),
+    [entries, showDebug]
+  );
+
+  const copyAll = useCallback(async () => {
+    const text = entries
+      .map((e) => {
+        const base = `[${formatTime(e.createdAt)}] ${KIND_META[e.operationKind].label} · ${e.level.toUpperCase()} — ${e.message}`;
+        return e.detail ? `${base}\n${e.detail}` : base;
+      })
+      .join('\n');
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Ignore — secure context may be unavailable in some dev envs.
+    }
+  }, [entries]);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="flex w-full flex-col gap-0 p-0 sm:max-w-lg lg:max-w-2xl"
+      >
+        <SheetHeader className="border-b">
+          <SheetTitle className="flex items-center gap-2">
+            <HeaderStatusIcon isRunning={isRunning} entries={entries} />
+            Smart Deploy · Activity
+          </SheetTitle>
+          {subtitle ? <SheetDescription>{subtitle}</SheetDescription> : null}
+          <div className="text-muted-foreground flex items-center gap-3 text-[11px]">
+            <span>
+              {entries.length} {entries.length === 1 ? 'entry' : 'entries'}
+            </span>
+            <button
+              type="button"
+              className={cn(
+                'cursor-pointer rounded px-1.5 py-0.5 text-[11px]',
+                showDebug ? 'bg-muted text-foreground' : 'hover:bg-muted hover:text-foreground'
+              )}
+              onClick={() => setShowDebug((v) => !v)}
+            >
+              {showDebug ? 'Hide debug' : 'Show debug'}
+            </button>
+            <button
+              type="button"
+              className="hover:bg-muted hover:text-foreground inline-flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[11px]"
+              onClick={() => void copyAll()}
+              disabled={entries.length === 0}
+            >
+              <Copy className="size-3" />
+              Copy all
+            </button>
+          </div>
+        </SheetHeader>
+
+        <div ref={bodyRef} className="flex-1 overflow-y-auto p-4">
+          {loading && entries.length === 0 ? (
+            <div className="text-muted-foreground flex items-center gap-2 text-xs">
+              <Loader2 className="size-3 animate-spin" /> Loading logs…
+            </div>
+          ) : null}
+          {error ? (
+            <div className="text-destructive bg-destructive/10 mb-3 rounded-md border p-2 text-xs">
+              {error}
+            </div>
+          ) : null}
+          {visible.length === 0 && !loading && !error ? (
+            <div className="text-muted-foreground text-xs">
+              No activity yet.
+              {isRunning ? ' The operation just started — entries will appear here.' : ''}
+            </div>
+          ) : null}
+
+          <ol className="flex flex-col gap-2">
+            {visible.map((entry) => {
+              const { icon: LevelIcon, className: levelClass } = LEVEL_ICON[entry.level];
+              const meta = KIND_META[entry.operationKind];
+              return (
+                <li
+                  key={entry.id}
+                  className="border-border/60 hover:bg-muted/30 group rounded-md border p-2 transition-colors"
+                >
+                  <div className="flex items-start gap-2">
+                    <LevelIcon className={cn('mt-0.5 size-3.5 shrink-0', levelClass)} />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-baseline gap-2">
+                        <span className="text-muted-foreground shrink-0 font-mono text-[10px]">
+                          {formatTime(entry.createdAt)}
+                        </span>
+                        <span
+                          className={cn(
+                            'inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0 text-[9px] font-medium tracking-wide uppercase',
+                            meta.chipClass
+                          )}
+                        >
+                          <meta.icon className={cn('size-2.5', meta.iconClass)} />
+                          {meta.label}
+                        </span>
+                        <span className="min-w-0 flex-1 text-xs leading-snug break-words">
+                          {entry.message}
+                        </span>
+                      </div>
+                      {entry.detail ? (
+                        <details className="mt-1">
+                          <summary className="text-muted-foreground hover:text-foreground cursor-pointer text-[10px]">
+                            Details
+                          </summary>
+                          <pre className="bg-muted/50 mt-1 overflow-x-auto rounded px-2 py-1 font-mono text-[10px] whitespace-pre-wrap">
+                            {entry.detail}
+                          </pre>
+                        </details>
+                      ) : null}
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function HeaderStatusIcon({
+  isRunning,
+  entries,
+}: {
+  isRunning: boolean;
+  entries: readonly OperationLogEntryDto[];
+}) {
+  if (isRunning) {
+    return <Loader2 className="text-primary size-4 animate-spin" />;
+  }
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const level = entries[i].level;
+    if (level === 'Debug') continue;
+    if (level === 'Error') return <AlertTriangle className="text-destructive size-4" />;
+    if (level === 'Warn') return <AlertTriangle className="size-4 text-amber-500" />;
+    return <CircleCheck className="size-4 text-emerald-500" />;
+  }
+  return <CircleCheck className="text-muted-foreground size-4" />;
+}
diff --git a/src/presentation/web/hooks/use-smart-deploy-state.ts b/src/presentation/web/hooks/use-smart-deploy-state.ts
index 9b8a04af5..d6901f700 100644
--- a/src/presentation/web/hooks/use-smart-deploy-state.ts
+++ b/src/presentation/web/hooks/use-smart-deploy-state.ts
@@ -75,8 +75,10 @@ export interface SmartDeployState {
   failedSource: 'sync' | 'deploy' | null;
   /** Which side is actively running when `kind === 'working'`. Used by
    *  the top-bar button to swap the generic "Working…" label for a
-   *  specific one: "Syncing code" or "Deploying to Cloudflare Pages". */
-  workingSource: 'sync' | 'deploy' | null;
+   *  specific one: "Syncing code", "Deploying to Cloudflare Pages", or
+   *  the one-click "Getting online…" umbrella that covers the whole
+   *  create-repo + auto-deploy pipeline. */
+  workingSource: 'sync' | 'deploy' | 'getOnline' | null;
   /** Friendly display name of the cloud provider the deploy targets,
    *  e.g. "Cloudflare Pages". Threaded in from the parent so the
    *  hook doesn't have to own the enum→name mapping. */
@@ -104,6 +106,15 @@ export interface UseSmartDeployStateInput {
    *  enum→string mapping. Falls through to null when no provider is
    *  picked yet (`Working…` fallback). */
   cloudProviderName: string | null;
+  /** True while the one-click "Get online" pipeline is running
+   *  (create GitHub remote → refresh git status → auto-deploy to the
+   *  connected cloud provider). Forces the state machine to `working`
+   *  with `workingSource: 'getOnline'` for the ENTIRE pipeline so the
+   *  button label can't flicker between intermediate truths — without
+   *  it, the brief window between create-remote completing and
+   *  cloudDeploy.initiate() being called would bounce the label
+   *  through `deploy`/`save` before landing on `working` again. */
+  oneClickRunning?: boolean;
 }
 
 export function useSmartDeployState({
@@ -114,6 +125,7 @@ export function useSmartDeployState({
   syncAction,
   hasConnectedCloudProvider,
   cloudProviderName,
+  oneClickRunning,
 }: UseSmartDeployStateInput): SmartDeployState {
   return useMemo(() => {
     // Effective git status — merge live read with persisted remote URL.
@@ -138,6 +150,26 @@ export function useSmartDeployState({
             remoteUrl: null,
           });
 
+    // One-click "Get online" pipeline override. The caller lifts this
+    // flag for the full duration of the create-repo → deploy pipeline
+    // so the label stays on "Getting online…" end-to-end. Without this
+    // dominance, the moment create-remote completes and git status
+    // refreshes we'd fall through to (e.g.) `deploy` until the cloud
+    // call fires a beat later, producing a visible flicker on the
+    // user's primary call-to-action.
+    if (oneClickRunning) {
+      const cloudUrl = cloudDeploy.state.url;
+      return baseState({
+        kind: 'working',
+        hasCloud: hasConnectedCloudProvider,
+        hasRemote: gitStatus?.hasRemote ?? persistedRemoteUrl !== null,
+        changeCount: (gitStatus?.uncommittedCount ?? 0) + (gitStatus?.unpushedCount ?? 0),
+        workingSource: 'getOnline',
+        cloudProviderName,
+        liveUrl: cloudUrl ?? null,
+      });
+    }
+
     // Loading is ONLY the brief window before the first /git/status fetch
     // completes, AND only when we have nothing else to show. Once the
     // first attempt finishes (success OR fail) the button transitions to
@@ -275,6 +307,7 @@ export function useSmartDeployState({
     syncAction,
     hasConnectedCloudProvider,
     cloudProviderName,
+    oneClickRunning,
   ]);
 }
 

From 210ca2e854f08eac0fa1511720dfe142553c46f8 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 03:16:39 +0300
Subject: [PATCH 4/7] feat(web): sharpen application card corners

Drops the cards from rounded-2xl (16px) and rounded-xl (14px) to
rounded-sm (2px) on both the live ApplicationCard and the new
application placeholder so every tile on the dashboard has the
same sharp vs-code-tab edge. Fixes a visual mismatch where the
placeholder stayed rounded after the main card was tightened.

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../components/features/applications/application-card.tsx   | 6 ++++--
 .../features/applications/applications-page-client.tsx      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/presentation/web/components/features/applications/application-card.tsx b/src/presentation/web/components/features/applications/application-card.tsx
index 291d87cca..00a6e00ed 100644
--- a/src/presentation/web/components/features/applications/application-card.tsx
+++ b/src/presentation/web/components/features/applications/application-card.tsx
@@ -239,8 +239,10 @@ export function ApplicationCard({ application, className }: ApplicationCardProps
           // has no contrast against the page. Lift the dark-mode surface
           // one step (`neutral-900` = `#171717`) and soften the border so
           // the card reads as an elevated tile instead of a hole in the
-          // page. Light mode is unchanged.
-          'group relative flex cursor-pointer flex-col overflow-hidden rounded-2xl',
+          // page. Light mode is unchanged. Corners are deliberately sharp
+          // (`rounded-sm`) per the dashboard tile family — the placeholder
+          // and new-application tiles both match.
+          'group relative flex cursor-pointer flex-col overflow-hidden rounded-sm',
           'bg-card dark:bg-neutral-900',
           'border-border/60 border shadow-sm dark:border-white/10',
           'hover:border-border transition-all duration-200 hover:shadow-lg dark:hover:border-white/20 dark:hover:shadow-black/40',
diff --git a/src/presentation/web/components/features/applications/applications-page-client.tsx b/src/presentation/web/components/features/applications/applications-page-client.tsx
index 18e9e15e3..8c2b90e4f 100644
--- a/src/presentation/web/components/features/applications/applications-page-client.tsx
+++ b/src/presentation/web/components/features/applications/applications-page-client.tsx
@@ -166,7 +166,7 @@ function NewApplicationCard({
   return (
     <div
       className={cn(
-        'group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-2',
+        'group relative flex cursor-pointer flex-col overflow-hidden rounded-sm border-2',
         'border-dashed border-indigo-200 bg-transparent transition-all duration-200',
         'hover:border-indigo-400 hover:bg-indigo-500/[0.03]',
         'dark:border-indigo-900 dark:hover:border-indigo-700',

From b788f52412ab221a82198538626f50d185f7c5ed Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 18:10:20 +0300
Subject: [PATCH 5/7] feat(web): three-layer chat timeline overlay with no raw
 bubbles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unifies the application chat around a single chronological
timeline driven by the three-layer model documented in
features/chat/CLAUDE.md: raw events (Layer 1) flow through a pure
synchronous grouping layer (Layer 2) that produces high-level
friendly cards (Layer 3). Default view shows only the user
request plus a high-level activity indicator — every raw tool
event is hidden behind a progressive-disclosure chevron.

- new CLAUDE.md in features/chat/ codifies the three-layer rules
  with explicit do/don't guidance, file responsibilities, and
  anti-patterns so future edits cannot break the flow
- client-side computeTurnGroupsFromMessages replaces the stale
  server query for the web view, runs synchronously on every
  render via useTurnGroupsView so the overlay updates in the
  same tick as SSE deltas arrive
- in-progress card is demoted to completed when status.isRunning
  goes false, so finished conversations never leave a permanent
  "Working on your request..." card pretending work is still in
  flight
- useChatRuntime gains hideAllMessages option — when true the
  flat assistant-ui thread returns an empty message list and the
  overlay owns the entire visible surface, closing the last gap
  where raw bubbles could leak
- TurnGroupCard splits into a condensed slot (user request plus
  friendly streaming indicator, default visible) and a details
  slot (raw thinking / read / output bubbles, revealed on
  chevron click); the user message never renders twice
- new CondensedStreamingIndicator shows only a spinner plus a
  high-level activity line (tool status, "Thinking...", "Working
  ...") — never the raw assistant stream text, so the layer rule
  holds through the whole pipeline
- ErrorRecoveryBanner surfaces effectiveStatus failures at the
  top of the chat pane with a prominent Try again button wired
  to onResumeWorkflow, replacing the silent red pill dead end
- old InitialRequestBubble removed; the CurrentTurnCard is now
  the single anchor for every user request, pinned in its
  chronological position rather than at the top
- chronological ordering enforced: error banner -> StepTracker
  -> completed turn cards (oldest first) -> in-progress turn
  -> operation bubbles -> pending interaction

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../application-page/application-page.tsx     |  24 +-
 .../web/components/features/chat/CLAUDE.md    | 174 ++++++++++
 .../web/components/features/chat/ChatTab.tsx  | 230 +++++++++----
 .../features/chat/turn-group-card.tsx         |  86 +++--
 .../features/chat/turn-group-list.tsx         | 307 ++++++++++++++----
 .../features/chat/useChatRuntime.ts           |  22 ++
 6 files changed, 679 insertions(+), 164 deletions(-)
 create mode 100644 src/presentation/web/components/features/chat/CLAUDE.md

diff --git a/src/presentation/web/components/features/application-page/application-page.tsx b/src/presentation/web/components/features/application-page/application-page.tsx
index 4f86c2ee6..cb66ad054 100644
--- a/src/presentation/web/components/features/application-page/application-page.tsx
+++ b/src/presentation/web/components/features/application-page/application-page.tsx
@@ -6,7 +6,10 @@ import type { ChatState } from '@shepai/core/application/ports/output/services/i
 import { featureIdForApplication } from '@shepai/core/domain/shared/feature-id';
 
 import { ChatTab } from '@/components/features/chat/ChatTab';
-import type { ScaffoldingState } from '@/components/features/chat/ChatTab';
+import type {
+  ApplicationErrorState,
+  ScaffoldingState,
+} from '@/components/features/chat/ChatTab';
 import { APPLICATION_CREATION_PLACEHOLDER_STEPS } from '@/components/features/chat/workflow-placeholder';
 import { useCloudDeployAction } from '@/hooks/use-cloud-deploy-action';
 import { useDeployAction } from '@/hooks/use-deploy-action';
@@ -103,6 +106,24 @@ export function ApplicationPage({ application, initialChatState }: ApplicationPa
           startedAt: new Date(application.createdAt).getTime(),
         };
 
+  // Derive a recovery-banner payload for ChatTab when the application
+  // is in a broken state. The server-side
+  // `application.status === Error` flag is the authoritative signal:
+  // the setup / build pipeline crashed, was logged, and the row was
+  // stamped. Without a visible banner the user would otherwise only
+  // see a red "ERROR" pill in the top bar with no explanation. The
+  // `/resume` endpoint re-runs the last failed step, so the banner
+  // is always retryable when we render it.
+  const applicationError: ApplicationErrorState | null =
+    application.status === ApplicationStatus.Error
+      ? {
+          kind: 'Setup failed',
+          message:
+            'The last setup run errored out before it could finish. Click Try again to re-run the failed step, or open the Smart Deploy activity log from the top bar to see what went wrong.',
+          retryable: true,
+        }
+      : null;
+
   return (
     <div className="bg-background flex h-dvh flex-col">
       <AppTopBar
@@ -129,6 +150,7 @@ export function ApplicationPage({ application, initialChatState }: ApplicationPa
             onResumeWorkflow={() => {
               void fetch(`/api/applications/${application.id}/resume`, { method: 'POST' });
             }}
+            applicationError={applicationError}
             onAllStepsComplete={() => {
               // CRITICAL: only auto-deploy on the VERY FIRST completion
               // of the setup workflow. `application.setupComplete` is
diff --git a/src/presentation/web/components/features/chat/CLAUDE.md b/src/presentation/web/components/features/chat/CLAUDE.md
new file mode 100644
index 000000000..35d6ffce0
--- /dev/null
+++ b/src/presentation/web/components/features/chat/CLAUDE.md
@@ -0,0 +1,174 @@
+# Chat Component Architecture (STRICT)
+
+These rules govern the `features/chat/` directory. They exist because
+the chat UI previously devolved into a chaotic mix of flat bubbles,
+competing rendering layers, and stale-query races. Do not break them
+without explicit user sign-off.
+
+## The Three Layers
+
+The chat ALWAYS flows through three strictly-ordered layers. Each
+layer has one responsibility and does not leak into the others.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  LAYER 1 — RAW EVENTS (single chronological stream)             │
+│                                                                 │
+│  The source of truth. Every persisted chat message, tool call,  │
+│  system event, and debug event lives here in chronological      │
+│  order. Think "operation log" — a single append-only feed.      │
+│                                                                 │
+│  Primary feed: `rawMessages` exposed by `useChatRuntime` from   │
+│  the `interactive_messages` table via the chat-state cache.     │
+│  Secondary feeds may extend this: system events, debug bubbles, │
+│  tool-call traces. All are tagged and remain chronological.     │
+└─────────────────────────────────────────────────────────────────┘
+                            │
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  LAYER 2 — OVERLAY GROUPING LAYER (pure, derivable)             │
+│                                                                 │
+│  A pure function over the raw event stream that produces a      │
+│  list of named groups. Groups are chronological. Each group     │
+│  has: id, title, status ('completed' | 'in-progress'), the     │
+│  list of raw event ids it owns, and a friendly high-level       │
+│  summary.                                                       │
+│                                                                 │
+│  Primary implementation: `computeTurnGroupsFromMessages()` in   │
+│  `turn-group-list.tsx`. Must run SYNCHRONOUSLY on every render  │
+│  (via `useTurnGroupsView`) — no async queries, no stale         │
+│  windows, no server round-trips for the view. The server-side  │
+│  `GetChatTurnGroupsUseCase` mirrors this logic for external    │
+│  API consumers (CLI, TUI) but the web MUST compute locally.    │
+│                                                                 │
+│  Other grouping families (setup workflow, operation bubbles,   │
+│  interactions) each have their own pure derivation. They are   │
+│  siblings of turn groups in Layer 2, not alternatives.          │
+└─────────────────────────────────────────────────────────────────┘
+                            │
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│  LAYER 3 — HIGH-LEVEL UI (default view, collapsed, friendly)    │
+│                                                                 │
+│  Groups render as collapsible cards in a single chronological   │
+│  column. DEFAULT state is the friendly high-level summary with  │
+│  raw events HIDDEN. The user-facing label is non-technical     │
+│  ("Working on: Fix login bug", "Initial setup complete").      │
+│                                                                 │
+│  Expanding a card reveals its owned raw events inline, in the   │
+│  same chronological order the raw stream had them. Nothing      │
+│  else changes position — expansion is purely local to the card. │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Mandatory Rules
+
+### 1. Single Chronological Timeline
+- The chat is ONE vertical column. No pinned-at-top, no pinned-at-bottom
+  sections, no split between `beforeMessages` and `afterMessages` for
+  chat content. Groups render in strict chronological order of their
+  `startedAt` timestamp, top to bottom.
+- The composer is the only exception — it lives outside the timeline
+  because it's an input, not a historical event.
+
+### 2. Layer 1 is Never Rendered Directly
+- The flat thread (assistant-ui `Thread` message list) is DEAD when
+  turn groups are enabled. `useChatRuntime` is called with
+  `hideAllMessages: true` and returns `threadMessages: []`.
+- Raw bubbles only appear as children of a Layer 3 card.
+- Never render a raw message via `<UserMessage>` / `<AssistantMessage>`
+  directly in the chat pane.
+
+### 3. Layer 2 is Pure and Synchronous
+- Grouping must be a pure function over `rawMessages`. No fetch, no
+  `useQuery`, no setTimeout, no event listeners. Use `useMemo`.
+- Stale-query races are forbidden. If you feel tempted to add a
+  server query to drive the view, you are breaking this rule.
+- The server-side grouping use case stays for CLI/API consumers but
+  the web UI computes locally — always.
+
+### 4. Default is Collapsed High-Level, Raw Events are Progressive Disclosure
+- Completed groups render with an emerald check icon and a friendly
+  title. Children (the raw events) are hidden behind a click.
+- In-progress groups render expanded with the live streaming
+  indicator inside them — the user sees progress as it happens but
+  the outer frame is still the high-level card, not a flat list.
+- Titles must be non-technical. "Working on: <first line of user
+  ask>" is good. "Assistant generating response to message id X" is
+  not.
+
+### 5. Optimistic Rendering
+- Sending a message must produce a visible in-progress group in the
+  same render tick. That means the grouping layer reads from the
+  chat-state cache which is mutated optimistically by the send
+  mutation — no await, no round-trip.
+- The current-turn card updates IN PLACE as new raw events arrive;
+  it does not unmount and remount per-event.
+
+### 6. Raw Events May Be Extended (System / Debug / Tool)
+- Layer 1 is not restricted to `interactive_messages` rows. System
+  announcements, debug events, tool-call metadata, and workflow-step
+  events all belong to the same chronological stream.
+- When adding a new event source, plumb it into the raw feed in a
+  way that preserves chronological order (merge-by-timestamp). Do
+  NOT render it as a flat bubble — it must flow through a Layer 2
+  grouping and appear inside a Layer 3 card like everything else.
+
+### 7. No Competing Rendering Paths
+- One chat pane, one timeline, one composer. If you find yourself
+  adding a second rendering surface for chat content (another
+  drawer, a secondary list, a parallel component), STOP — it is a
+  Layer 3 card that belongs inside the existing timeline.
+- `OperationBubble`, `InteractionBubble`, `StepTracker`, and
+  `TurnGroupCard` are all Layer 3 card types. Their order in the
+  column is chronological.
+
+### 8. File Responsibilities
+- `useChatRuntime.ts` — Layer 1 facade. Exposes `rawMessages` and
+  `streamingState`. Returns `threadMessages: []` when the host
+  enables `hideAllMessages`. Never grows UI concerns.
+- `turn-group-list.tsx` — Layer 2 grouping logic + Layer 3 renderers
+  for user-turn cards. Pure `computeTurnGroupsFromMessages` is the
+  single source of truth for turn derivation.
+- `turn-group-card.tsx` — Layer 3 card primitive. Knows nothing
+  about messages; takes pre-baked props (`title`, `status`, children).
+- `StepTracker.tsx` — Layer 3 card for the setup workflow.
+- `operation-bubble.tsx` — Layer 3 card for publish/deploy operations.
+- `ChatTab.tsx` — Composes the timeline. Calls `useChatRuntime` once
+  with `hideAllMessages: turnGroupsEnabled`, calls `useTurnGroupsView`
+  over `rawMessages`, and renders all Layer 3 cards in chronological
+  order inside `beforeMessages`. `afterMessages` is only used by
+  non-grouping (repo / global) chats.
+
+## What Breaks These Rules (Anti-Patterns)
+
+- Rendering a raw message directly in the chat pane "just for this
+  one case"
+- Adding a `useQuery` for grouping view data in the web UI
+- Pinning a group at the top or bottom regardless of its timestamp
+- Letting the flat thread coexist with the grouping overlay — they
+  must not both be visible
+- Hiding only SOME raw messages from the flat thread (half-open
+  overlay) — it's all-or-nothing via `hideAllMessages`
+- Introducing a parallel "chat timeline" component that bypasses
+  the three-layer flow
+- Surfacing technical jargon ("tool call", "step_id", "token count")
+  in the default collapsed card title. Raw events may contain it;
+  high-level labels must not.
+
+## Extending the Chat
+
+When adding a new feature that touches the chat surface, walk the
+layers in order:
+
+1. **Does it add a new kind of raw event?** Plumb it into Layer 1
+   via the chat-state cache or a sibling event stream. Ensure
+   chronological merging.
+2. **Does it need grouping?** Add a pure derivation in Layer 2. No
+   async, no query, no stale-prone fetching.
+3. **Does it need a new UI card type?** Add a Layer 3 card and
+   render it in the `ChatTab` timeline at its chronological
+   position.
+
+Never skip a layer. Never render Layer 1 directly. Never let Layer 2
+escape into a query. Never let Layer 3 own derivation logic.
diff --git a/src/presentation/web/components/features/chat/ChatTab.tsx b/src/presentation/web/components/features/chat/ChatTab.tsx
index 818a2cf5b..4cd0e111d 100644
--- a/src/presentation/web/components/features/chat/ChatTab.tsx
+++ b/src/presentation/web/components/features/chat/ChatTab.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssistantRuntimeProvider } from '@assistant-ui/react';
-import { Trash2, Cpu, User } from 'lucide-react';
+import { Trash2, Cpu, AlertTriangle, RefreshCw } from 'lucide-react';
 import type { ChatState } from '@shepai/core/application/ports/output/services/interactive-session-service.interface';
 import { cn } from '@/lib/utils';
 import { Thread } from '@/components/assistant-ui/thread';
@@ -14,7 +14,7 @@ import { useChatRuntime } from './useChatRuntime';
 import { ChatComposer } from './ChatComposer';
 import { InteractionBubble } from './InteractionBubble';
 import { StepTracker } from './StepTracker';
-import { TurnGroupList, useTurnGroups } from './turn-group-list';
+import { CurrentTurnCard, CompletedTurnGroupsList, useTurnGroupsView } from './turn-group-list';
 import { OperationBubble } from './operation-bubble';
 import type { PlaceholderStep } from './workflow-placeholder';
 import { SCAFFOLD_STEP_KEY } from './workflow-placeholder';
@@ -82,6 +82,14 @@ export interface ChatTabProps {
    * broader context.
    */
   scaffoldingState?: ScaffoldingState;
+  /**
+   * When truthy, renders a prominent error recovery banner above the
+   * turn card + step tracker. Used to surface `effectiveStatus`
+   * failures that would otherwise leave the user staring at a chat
+   * with a red status pill and no explanation. The `onRetry` prop
+   * wires a "Try again" button — typically `onResumeWorkflow`.
+   */
+  applicationError?: ApplicationErrorState | null;
 }
 
 /**
@@ -101,6 +109,15 @@ export interface ScaffoldingState {
   error?: string;
 }
 
+export interface ApplicationErrorState {
+  /** Short, human-readable kind: "Setup failed", "Interrupted", etc. */
+  kind: string;
+  /** Longer explanation shown below the headline. */
+  message: string;
+  /** True if the backend can re-run the failed pipeline. */
+  retryable: boolean;
+}
+
 const IS_DEV = process.env.NODE_ENV === 'development';
 
 /**
@@ -138,19 +155,19 @@ export function ChatTab({
   workflowPlaceholder,
   onResumeWorkflow,
   scaffoldingState,
+  applicationError,
 }: ChatTabProps) {
   const [overrideAgent, setOverrideAgent] = useState<string | undefined>(initialAgent);
   const [overrideModel, setOverrideModel] = useState<string | undefined>(initialModel);
   const [debugMode, setDebugMode] = useState(false);
   const att = useAttachments();
 
-  // Server-derived turn grouping (Feature B). Only applicable to
-  // application-scoped chats — repo / global threads keep the flat
-  // layout. `hiddenMessageIds` is handed to useChatRuntime so the
-  // raw bubbles that now live inside a collapsed group card are
-  // removed from the thread.
+  // Turn-group overlay is enabled for application-scoped chats.
+  // Groups are computed CLIENT-SIDE from `rawMessages` (see the
+  // `useTurnGroupsView` call below) so the view is always
+  // optimistic against the chat-state cache — no stale-query race
+  // window where the flat thread would briefly leak raw bubbles.
   const turnGroupsEnabled = Boolean(applicationId);
-  const { hiddenMessageIds } = useTurnGroups(turnGroupsEnabled ? featureId : '');
 
   const contentTransform = useCallback(
     (content: string) =>
@@ -170,7 +187,6 @@ export function ChatTab({
     pendingInteraction,
     respondToInteraction,
     stepProgress,
-    initialRequestMessage,
     rawMessages,
     streamingState,
   } = useChatRuntime(featureId, worktreePath, {
@@ -180,21 +196,27 @@ export function ChatTab({
     agentType: overrideAgent,
     debugMode,
     initialChatState,
-    // When the host provides a workflow placeholder we KNOW the tracker
-    // will be the primary surface and the first user message must be
-    // pinned ABOVE it — even during the early window before the first
-    // real workflow-step row arrives. Without this, the bubble would
-    // fall through to the flat thread and render below the tracker.
+    // Legacy pinInitialRequest flag is only relevant for the
+    // non-grouping path (repo/global chats with a workflow
+    // placeholder). When turn groups are on we take the full
+    // overlay path via `hideAllMessages` instead.
     pinInitialRequest: (workflowPlaceholder?.length ?? 0) > 0,
-    // Server-derived completed turns get pulled out of the flat
-    // thread and rendered as collapsed cards above the messages.
-    hiddenMessageIds,
-    // When grouping is on, the in-progress turn card owns the
-    // streaming indicator — suppress the flat-thread version so it
-    // doesn't appear twice.
+    // Full overlay path: hide ALL persisted bubbles from the flat
+    // thread and let the grouping layer own the entire visible
+    // conversation. The streaming indicator is pinned inside the
+    // in-progress turn card so we also suppress its flat version.
+    hideAllMessages: turnGroupsEnabled,
     suppressStreamingIndicator: turnGroupsEnabled,
   });
 
+  // Client-side turn grouping — re-runs synchronously on every
+  // `rawMessages` change, so a new user bubble or assistant reply
+  // is reflected in the overlay in the same render tick.
+  // Only mark the latest turn as in-progress while the agent is
+  // actually running — otherwise a finished conversation would
+  // leave a permanent "Working on your request…" fuchsia card.
+  const turnGroupsView = useTurnGroupsView(rawMessages, status.isRunning);
+
   // 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.
@@ -374,47 +396,69 @@ export function ChatTab({
               hideEmpty={showTracker}
               beforeMessages={
                 <>
+                  {/* Chronological timeline — top to bottom:
+                        1. Error recovery banner (when broken)
+                        2. Setup workflow (StepTracker)
+                        3. Completed user turns, oldest first
+                        4. In-progress turn (always chronologically last)
+                        5. Operation bubbles (publish / deploy)
+                        6. Pending interaction (awaiting user input)
+                      All rendered in `beforeMessages` because the flat
+                      thread below is dead — `hideAllMessages` zeroes
+                      the persisted bubble list when turn groups are on,
+                      so the overlay owns the entire visible surface
+                      and there's no split between before/after. */}
+                  {applicationError ? (
+                    <ErrorRecoveryBanner state={applicationError} onRetry={onResumeWorkflow} />
+                  ) : null}
                   {showTracker ? (
+                    <StepTracker
+                      steps={trackerSteps}
+                      collapsedSummary={
+                        stepProgress.hasPlan === true && stepProgress.allDone === true
+                      }
+                      activeStepId={stepProgress.activeStepId}
+                      liveStatus={stepProgress.liveStatus}
+                      onRetry={onResumeWorkflow}
+                      onForceStop={handleForceStopStep}
+                    />
+                  ) : null}
+                  {turnGroupsEnabled ? (
                     <>
-                      {initialRequestMessage ? (
-                        <InitialRequestBubble text={initialRequestMessage.content} />
-                      ) : null}
-                      <StepTracker
-                        steps={trackerSteps}
-                        collapsedSummary={
-                          stepProgress.hasPlan === true && stepProgress.allDone === true
-                        }
-                        activeStepId={stepProgress.activeStepId}
-                        liveStatus={stepProgress.liveStatus}
-                        onRetry={onResumeWorkflow}
-                        onForceStop={handleForceStopStep}
+                      <CompletedTurnGroupsList view={turnGroupsView} allMessages={rawMessages} />
+                      <CurrentTurnCard
+                        view={turnGroupsView}
+                        allMessages={rawMessages}
+                        streaming={streamingState}
                       />
+                      {applicationId ? (
+                        <>
+                          <OperationBubble applicationId={applicationId} kind="publish" />
+                          <OperationBubble applicationId={applicationId} kind="deploy" />
+                        </>
+                      ) : null}
+                      {pendingInteraction ? (
+                        <InteractionBubble
+                          interaction={pendingInteraction}
+                          onSubmit={respondToInteraction}
+                        />
+                      ) : null}
                     </>
                   ) : null}
-                  {turnGroupsEnabled ? (
-                    <TurnGroupList
-                      featureId={featureId}
-                      allMessages={rawMessages}
-                      streaming={streamingState}
-                    />
-                  ) : null}
                 </>
               }
               afterMessages={
-                <>
-                  {pendingInteraction ? (
-                    <InteractionBubble
-                      interaction={pendingInteraction}
-                      onSubmit={respondToInteraction}
-                    />
-                  ) : null}
-                  {applicationId ? (
-                    <>
-                      <OperationBubble applicationId={applicationId} kind="publish" />
-                      <OperationBubble applicationId={applicationId} kind="deploy" />
-                    </>
-                  ) : null}
-                </>
+                // Non-grouping chats (repo/global) keep the legacy
+                // InteractionBubble surface in `afterMessages`.
+                // When turn groups are on, everything moved into
+                // the unified `beforeMessages` timeline above and
+                // this slot stays empty.
+                !turnGroupsEnabled && pendingInteraction ? (
+                  <InteractionBubble
+                    interaction={pendingInteraction}
+                    onSubmit={respondToInteraction}
+                  />
+                ) : null
               }
             />
           </AssistantRuntimeProvider>
@@ -424,23 +468,73 @@ export function ChatTab({
   );
 }
 
-// ── Initial request bubble ──────────────────────────────────────────────────
+// ── Error recovery banner ───────────────────────────────────────────────────
 //
-// 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 }: { text: string }) {
+// Rendered at the very top of the chat pane when the application is
+// in a broken state (setup failed, interrupted, etc.). Replaces
+// silent failure where the only signal was a red "ERROR" pill in the
+// top bar. Gives the user a clear headline, an explanation, and — if
+// the backend says the operation is retryable — a prominent
+// "Try again" button wired to `onResumeWorkflow`.
+function ErrorRecoveryBanner({
+  state,
+  onRetry,
+}: {
+  state: ApplicationErrorState;
+  onRetry?: () => void;
+}) {
+  const [retrying, setRetrying] = useState(false);
+  const handleRetry = useCallback(() => {
+    if (!onRetry || retrying) return;
+    setRetrying(true);
+    try {
+      onRetry();
+    } finally {
+      // `onRetry` is fire-and-forget (POSTs the resume endpoint).
+      // Clear the local spinner after a short window so the button
+      // doesn't stay locked if the parent forgot to refresh state.
+      setTimeout(() => setRetrying(false), 4000);
+    }
+  }, [onRetry, retrying]);
+
   return (
-    <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">
-      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-violet-500/15">
-        <User className="h-3.5 w-3.5 text-violet-500" />
-      </div>
-      <div className="flex max-w-[85%] min-w-0 flex-col gap-0.5">
-        <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">
-          {text}
+    <div
+      className={cn(
+        'animate-in fade-in-0 slide-in-from-top-1 mx-3 my-3 overflow-hidden rounded-lg border shadow-sm duration-200 ease-out',
+        'border-red-500/40 bg-red-500/5 dark:bg-red-500/10'
+      )}
+      role="alert"
+    >
+      <div className="flex items-start gap-3 px-3 py-3">
+        <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/15">
+          <AlertTriangle className="h-3.5 w-3.5 text-red-500" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="text-[13px] font-semibold text-red-700 dark:text-red-300">
+            {state.kind}
+          </div>
+          <div className="text-foreground/80 mt-0.5 text-[12px] leading-relaxed">
+            {state.message}
+          </div>
+          {state.retryable && onRetry ? (
+            <div className="mt-2.5 flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleRetry}
+                disabled={retrying}
+                className={cn(
+                  'inline-flex h-7 items-center gap-1.5 rounded-md bg-red-500 px-3 text-[11px] font-semibold text-white transition-opacity',
+                  retrying ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:opacity-90'
+                )}
+              >
+                <RefreshCw className={cn('h-3 w-3', retrying && 'animate-spin')} />
+                {retrying ? 'Retrying…' : 'Try again'}
+              </button>
+              <span className="text-muted-foreground text-[10px]">
+                Re-runs the last failed step
+              </span>
+            </div>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/src/presentation/web/components/features/chat/turn-group-card.tsx b/src/presentation/web/components/features/chat/turn-group-card.tsx
index 117e2b2a8..7d42324ea 100644
--- a/src/presentation/web/components/features/chat/turn-group-card.tsx
+++ b/src/presentation/web/components/features/chat/turn-group-card.tsx
@@ -3,20 +3,21 @@
 /**
  * TurnGroupCard
  *
- * One user-turn card in the chat thread. Two modes:
+ * One user-turn card in the chat timeline. Two modes:
  *
- * - `completed`: collapsed by default, emerald check icon, click to
- *   reveal the persisted messages inside the turn. Matches the
- *   StepTracker visual language so "completed setup" and "completed
- *   user turn" read as siblings in the timeline.
+ * - `completed`: collapsed by default, emerald check icon, click
+ *   the chevron to reveal raw bubbles.
  *
- * - `in-progress`: EXPANDED by default, non-collapsible, a spinning
- *   fuchsia indicator, title reads "Working on your request…". The
- *   parent renders the turn's persisted messages AND the live
- *   streaming indicator inside `children`, so the moment the user
- *   sends a message they see a new card pop in with the reply
- *   building up inside it — no stray "Thinking…" bubble in the
- *   flat thread.
+ * - `in-progress`: the card's DEFAULT surface is the `condensed`
+ *   slot — typically the user's request plus a friendly streaming
+ *   indicator ("Working on…"), never raw tool events. The chevron
+ *   progressively discloses the `details` slot containing every
+ *   raw bubble (thinking / read / output / assistant text).
+ *
+ * This preserves the layered rule from `CLAUDE.md` in this
+ * directory: by default the chat shows a high-level friendly
+ * surface with the user request visible and nothing else raw.
+ * Raw events are hidden behind a single click.
  */
 
 import { useState, type ReactNode } from 'react';
@@ -32,8 +33,14 @@ export interface TurnGroupCardProps {
   assistantMessageCount: number;
   /** Render mode — see file header. */
   status: 'completed' | 'in-progress';
-  /** Children rendered when the card is expanded (raw messages +
-   *  the live streaming indicator for in-progress turns). */
+  /** Default visible content for in-progress cards (user message
+   *  + friendly streaming indicator). Ignored for completed cards. */
+  condensed?: ReactNode;
+  /** Progressive-disclosure body revealed when the chevron is
+   *  toggled — raw bubbles, tool events, full history. Falls back
+   *  to `children` if not provided. */
+  details?: ReactNode;
+  /** Legacy slot used by completed cards — equivalent to `details`. */
   children?: ReactNode;
 }
 
@@ -42,14 +49,14 @@ export function TurnGroupCard({
   title,
   assistantMessageCount,
   status,
+  condensed,
+  details,
   children,
 }: TurnGroupCardProps) {
   const isInProgress = status === 'in-progress';
-  // In-progress cards are always expanded; completed cards collapse
-  // by default and only open on explicit click.
   const [userExpanded, setUserExpanded] = useState(false);
-  const expanded = isInProgress || userExpanded;
   const contentId = `${id}-content`;
+  const disclosureBody = details ?? children ?? null;
 
   return (
     <div
@@ -63,15 +70,12 @@ export function TurnGroupCard({
     >
       <button
         type="button"
-        onClick={() => {
-          if (!isInProgress) setUserExpanded((v) => !v);
-        }}
-        aria-expanded={expanded}
+        onClick={() => setUserExpanded((v) => !v)}
+        aria-expanded={userExpanded}
         aria-controls={contentId}
-        disabled={isInProgress}
         className={cn(
-          'group flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors',
-          !isInProgress && 'hover:bg-muted/50 cursor-pointer'
+          'group flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left transition-colors',
+          'hover:bg-muted/50'
         )}
       >
         <span
@@ -96,22 +100,32 @@ export function TurnGroupCard({
         >
           {isInProgress ? 'Working on your request…' : title}
         </span>
-        {!isInProgress && assistantMessageCount > 0 ? (
+        {assistantMessageCount > 0 ? (
           <span className="text-muted-foreground inline-flex shrink-0 items-center gap-1 text-[10px]">
             <MessageSquare className="h-3 w-3" />
             {assistantMessageCount}
           </span>
         ) : null}
-        {!isInProgress ? (
-          <ChevronDown
-            className={cn(
-              'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
-              expanded && 'rotate-180'
-            )}
-          />
-        ) : null}
+        <ChevronDown
+          className={cn(
+            'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+            userExpanded && 'rotate-180'
+          )}
+        />
       </button>
-      {expanded ? (
+
+      {/* Default surface for in-progress cards — user request +
+          friendly streaming indicator. Never raw tool events.
+          Hidden while the chevron is expanded so the `details`
+          body below becomes the single source of content and the
+          user message doesn't render twice. */}
+      {isInProgress && condensed && !userExpanded ? (
+        <div className="border-border/60 bg-background/40 border-t px-3 py-2">{condensed}</div>
+      ) : null}
+
+      {/* Progressive disclosure: raw bubbles hidden until the
+          chevron is clicked. */}
+      {userExpanded ? (
         <div
           id={contentId}
           className={cn(
@@ -121,7 +135,9 @@ export function TurnGroupCard({
               : 'border-border/60 bg-background/40'
           )}
         >
-          {children ?? <div className="text-muted-foreground text-[11px] italic">No content.</div>}
+          {disclosureBody ?? (
+            <div className="text-muted-foreground text-[11px] italic">No content.</div>
+          )}
         </div>
       ) : null}
     </div>
diff --git a/src/presentation/web/components/features/chat/turn-group-list.tsx b/src/presentation/web/components/features/chat/turn-group-list.tsx
index 7cd34023e..1a33ac46b 100644
--- a/src/presentation/web/components/features/chat/turn-group-list.tsx
+++ b/src/presentation/web/components/features/chat/turn-group-list.tsx
@@ -3,24 +3,26 @@
 /**
  * TurnGroupList
  *
- * Fetches the server-derived list of user turns for a feature and
- * renders a `TurnGroupCard` per completed group PLUS an in-progress
- * card for the currently-live turn. The in-progress card is expanded
- * by default and receives the live streaming indicator inline, so
- * the moment the user sends a message they see a single "Working
- * on your request…" surface with the reply building up inside it.
+ * Renders user-turn groups as collapsible cards in chronological
+ * order. Grouping is computed CLIENT-SIDE from the raw messages
+ * exposed by `useChatRuntime` so the view is always optimistic:
+ * the moment a new message hits the chat-state cache via SSE, the
+ * useMemo re-runs and the card appears — no stale-query race
+ * window where the flat thread briefly shows raw bubbles.
  *
- * All grouping logic lives in `GetChatTurnGroupsUseCase` — this
- * component is a thin renderer.
+ * The server-side `GetChatTurnGroupsUseCase` still owns the
+ * canonical grouping shape and is used by other clients (CLI, TUI,
+ * external API consumers); the web keeps a second implementation
+ * here only to avoid the network round-trip for its own render.
  */
 
-import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { Loader2 } from 'lucide-react';
 import type { InteractiveMessage } from '@shepai/core/domain/generated/output';
 import { InteractiveMessageRole } from '@shepai/core/domain/generated/output';
 import { TurnGroupCard } from './turn-group-card';
 
-interface TurnGroupDto {
+interface TurnGroupView {
   id: string;
   title: string;
   userMessagePreview: string;
@@ -31,22 +33,115 @@ interface TurnGroupDto {
   status: 'completed' | 'in-progress';
 }
 
-export interface TurnGroupsResponse {
-  groups: TurnGroupDto[];
-  currentTurn: TurnGroupDto | null;
+export interface TurnGroupsView {
+  groups: TurnGroupView[];
+  currentTurn: TurnGroupView | null;
   hiddenMessageIds: string[];
 }
 
-export function turnGroupsQueryKey(featureId: string): readonly unknown[] {
-  return ['chat', featureId, 'turn-groups'] as const;
+const PREVIEW_MAX = 120;
+const TITLE_MAX = 140;
+const FALLBACK_TITLE = 'Working on your request';
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, Math.max(0, max - 1)).trimEnd()}…`;
+}
+
+function buildTitle(userText: string): string {
+  const cleaned = userText.trim().replace(/\s+/g, ' ');
+  if (cleaned.length === 0) return FALLBACK_TITLE;
+  const preview = truncate(cleaned, PREVIEW_MAX);
+  return truncate(`Working on: ${preview}`, TITLE_MAX);
 }
 
-export async function fetchTurnGroups(featureId: string): Promise<TurnGroupsResponse> {
-  const res = await fetch(`/api/interactive/chat/${encodeURIComponent(featureId)}/turn-groups`);
-  if (!res.ok) {
+function toEpochMs(raw: unknown): number {
+  if (raw instanceof Date) return raw.getTime();
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
+  if (typeof raw === 'string') {
+    const asNum = Number(raw);
+    if (Number.isFinite(asNum)) return asNum;
+    const parsed = new Date(raw).getTime();
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+}
+
+/**
+ * Client-side turn grouping — mirrors
+ * `GetChatTurnGroupsUseCase` so the web view has no stale-query
+ * window. Step-tagged messages are ignored (they live inside the
+ * StepTracker). Every non-step-tagged user message opens a new
+ * turn; the subsequent non-step assistant messages attach to it
+ * until the next user message.
+ *
+ * The LATEST turn becomes `currentTurn` (status `in-progress`)
+ * ONLY when `isAgentBusy` is true — i.e. the chat runtime reports
+ * live streaming, tool activity, or a pending-response awaiting
+ * state. Otherwise the latest turn is demoted to `completed` so a
+ * finished conversation doesn't leave a permanent "Working on
+ * your request…" card pretending work is still happening.
+ */
+export function computeTurnGroupsFromMessages(
+  messages: readonly InteractiveMessage[],
+  isAgentBusy = true
+): TurnGroupsView {
+  const flat = messages.filter((m) => !m.stepId);
+  if (flat.length === 0) {
     return { groups: [], currentTurn: null, hiddenMessageIds: [] };
   }
-  return (await res.json()) as TurnGroupsResponse;
+
+  interface Turn {
+    user: InteractiveMessage;
+    items: InteractiveMessage[];
+  }
+  const turns: Turn[] = [];
+  let current: Turn | null = null;
+  for (const m of flat) {
+    if (m.role === InteractiveMessageRole.user) {
+      current = { user: m, items: [m] };
+      turns.push(current);
+    } else if (current) {
+      current.items.push(m);
+    }
+  }
+  if (turns.length === 0) {
+    return { groups: [], currentTurn: null, hiddenMessageIds: [] };
+  }
+
+  const toView = (t: Turn, status: 'completed' | 'in-progress'): TurnGroupView => {
+    const first = t.items[0];
+    const last = t.items[t.items.length - 1];
+    const userText = t.user.content ?? '';
+    return {
+      id: `turn-${t.user.id}`,
+      title: buildTitle(userText),
+      userMessagePreview: truncate(userText.trim().replace(/\s+/g, ' '), PREVIEW_MAX),
+      messageIds: t.items.map((m) => m.id),
+      assistantMessageCount: t.items.filter((m) => m.role === InteractiveMessageRole.assistant)
+        .length,
+      startedAt: toEpochMs(first.createdAt),
+      endedAt: toEpochMs(last.createdAt),
+      status,
+    };
+  };
+
+  const latest = turns[turns.length - 1];
+  if (isAgentBusy) {
+    // Agent is actively working — the latest turn is the live one
+    // and owns the in-progress fuchsia card.
+    const completed = turns.slice(0, -1).map((t) => toView(t, 'completed'));
+    const currentTurn = toView(latest, 'in-progress');
+    const hiddenMessageIds = [...completed.flatMap((g) => g.messageIds), ...currentTurn.messageIds];
+    return { groups: completed, currentTurn, hiddenMessageIds };
+  }
+
+  // Agent is idle — every turn (including the most recent) is
+  // completed. No in-progress card; the timeline stays chronological
+  // with the latest turn at the tail as a collapsible emerald card.
+  const completed = turns.map((t) => toView(t, 'completed'));
+  const hiddenMessageIds = completed.flatMap((g) => g.messageIds);
+  return { groups: completed, currentTurn: null, hiddenMessageIds };
 }
 
 /** Live streaming state the in-progress card pins at its bottom edge. */
@@ -62,46 +157,117 @@ export interface TurnStreamingState {
 }
 
 /**
- * Hook returning both the raw groups data (for filtering the thread
- * upstream) and the list of hidden message ids. Kept here alongside
- * the component so the single query is shared — ChatTab calls this
- * hook too and TanStack dedupes on the shared query key.
+ * useTurnGroupsView — the client-side grouping hook consumed by
+ * `CurrentTurnCard` and `CompletedTurnGroupsList`. It folds the raw
+ * message stream into the same shape the server use case returns,
+ * but runs on every render so the UI is always optimistic against
+ * the chat-state cache (no stale-query window).
+ *
+ * `isAgentBusy` controls whether the latest turn gets promoted to
+ * `currentTurn` (in-progress fuchsia card) or stays as the last
+ * `completed` card in the chronological list. Pass the chat
+ * runtime's `status.isRunning` flag so finished conversations
+ * never leave a stale "Working on your request…" surface pinned.
  */
-export function useTurnGroups(featureId: string): TurnGroupsResponse {
-  const enabled = featureId.trim().length > 0;
-  const { data } = useQuery({
-    queryKey: turnGroupsQueryKey(featureId),
-    queryFn: () => fetchTurnGroups(featureId),
-    // Short stale window so the card appears fast when the user
-    // sends a message — the chat-state refetch triggered by the
-    // mutation will bump this in practice, but the low staleTime
-    // is a belt-and-braces fallback.
-    staleTime: 1_000,
-    refetchOnWindowFocus: false,
-    enabled,
-  });
-  return data ?? { groups: [], currentTurn: null, hiddenMessageIds: [] };
+export function useTurnGroupsView(
+  messages: readonly InteractiveMessage[],
+  isAgentBusy: boolean
+): TurnGroupsView {
+  return useMemo(
+    () => computeTurnGroupsFromMessages(messages, isAgentBusy),
+    [messages, isAgentBusy]
+  );
 }
 
-export interface TurnGroupListProps {
-  featureId: string;
-  /** Raw messages from the main chat query — used to hydrate cards. */
+export interface CurrentTurnCardProps {
+  /** Pre-computed groups view (from `useTurnGroupsView`). */
+  view: TurnGroupsView;
+  /** Raw messages, used to hydrate the card children. */
   allMessages: readonly InteractiveMessage[];
-  /** Live streaming state for the in-progress card. */
+  /** Live streaming state pinned at the bottom of the card. */
   streaming: TurnStreamingState;
 }
 
-export function TurnGroupList({ featureId, allMessages, streaming }: TurnGroupListProps) {
-  const { groups, currentTurn } = useTurnGroups(featureId);
-  if (groups.length === 0 && !currentTurn) return null;
+/**
+ * The in-progress "Working on your request…" card for the latest
+ * user turn. Always renders at the chronological tail of the
+ * timeline — never pinned at the top — so the conversation reads
+ * top-to-bottom: setup → completed turns → current turn.
+ */
+export function CurrentTurnCard({ view, allMessages, streaming }: CurrentTurnCardProps) {
+  if (!view.currentTurn) return null;
+  const byId = new Map<string, InteractiveMessage>();
+  for (const m of allMessages) byId.set(m.id, m);
+
+  // Default surface: ONLY the user message + a high-level friendly
+  // streaming indicator. Raw assistant / tool bubbles never appear
+  // here — that's the rule in features/chat/CLAUDE.md. They live
+  // behind the chevron inside `details`.
+  const userMessageId = view.currentTurn.messageIds.find((mid) => {
+    const m = byId.get(mid);
+    return m?.role === InteractiveMessageRole.user;
+  });
+  const userMessage = userMessageId ? byId.get(userMessageId) : null;
+
+  const condensed = (
+    <div className="flex flex-col gap-2">
+      {userMessage ? (
+        <div className="text-foreground border-l-2 border-violet-500/50 pl-2 text-[12px] whitespace-pre-wrap">
+          <div className="text-muted-foreground/70 mb-0.5 text-[10px] font-medium tracking-wide uppercase">
+            You
+          </div>
+          {userMessage.content}
+        </div>
+      ) : null}
+      {/* Condensed indicator — never the raw assistant stream. Only
+          a high-level activity line (tool status, "Thinking…", or
+          "Agent is waking up…") so the card obeys the layer rule:
+          by default the card shows only the user request and a
+          friendly live-activity line. Expand the chevron to see the
+          raw assistant content. */}
+      <CondensedStreamingIndicator streaming={streaming} />
+    </div>
+  );
+
+  const details = (
+    <div className="flex flex-col gap-2">
+      <TurnChildMessages messageIds={view.currentTurn.messageIds} byId={byId} />
+      <StreamingIndicator streaming={streaming} />
+    </div>
+  );
+
+  return (
+    <TurnGroupCard
+      id={view.currentTurn.id}
+      title={view.currentTurn.title}
+      status="in-progress"
+      assistantMessageCount={view.currentTurn.assistantMessageCount}
+      condensed={condensed}
+      details={details}
+    />
+  );
+}
+
+export interface CompletedTurnGroupsListProps {
+  /** Pre-computed groups view (from `useTurnGroupsView`). */
+  view: TurnGroupsView;
+  /** Raw messages, used to hydrate card children. */
+  allMessages: readonly InteractiveMessage[];
+}
 
-  // Index messages by id once so every card's children are O(1) lookups.
+/**
+ * The list of COMPLETED, collapsed-by-default turn group cards.
+ * Rendered chronologically between the StepTracker and the
+ * in-progress card so the whole conversation reads top-to-bottom.
+ */
+export function CompletedTurnGroupsList({ view, allMessages }: CompletedTurnGroupsListProps) {
+  if (view.groups.length === 0) return null;
   const byId = new Map<string, InteractiveMessage>();
   for (const m of allMessages) byId.set(m.id, m);
 
   return (
     <div className="flex flex-col">
-      {groups.map((g) => (
+      {view.groups.map((g) => (
         <TurnGroupCard
           key={g.id}
           id={g.id}
@@ -112,20 +278,6 @@ export function TurnGroupList({ featureId, allMessages, streaming }: TurnGroupLi
           <TurnChildMessages messageIds={g.messageIds} byId={byId} />
         </TurnGroupCard>
       ))}
-      {currentTurn ? (
-        <TurnGroupCard
-          key={currentTurn.id}
-          id={currentTurn.id}
-          title={currentTurn.title}
-          status="in-progress"
-          assistantMessageCount={currentTurn.assistantMessageCount}
-        >
-          <div className="flex flex-col gap-2">
-            <TurnChildMessages messageIds={currentTurn.messageIds} byId={byId} />
-            <StreamingIndicator streaming={streaming} />
-          </div>
-        </TurnGroupCard>
-      ) : null}
     </div>
   );
 }
@@ -213,3 +365,38 @@ function StreamingIndicator({ streaming }: { streaming: TurnStreamingState }) {
 
   return null;
 }
+
+/**
+ * High-level activity line rendered inside the in-progress turn
+ * card's DEFAULT (collapsed) surface. Strict rule: never show the
+ * raw assistant stream — only a spinner plus a friendly status
+ * (tool activity, "Thinking…", or "Working…"). Raw assistant
+ * content lives behind the chevron. See `CLAUDE.md` in this
+ * directory for the layered contract.
+ */
+function CondensedStreamingIndicator({ streaming }: { streaming: TurnStreamingState }) {
+  const hasStatus = (streaming.statusLog ?? '').trim().length > 0;
+  const hasText = streaming.text.trim().length > 0;
+  const isBooting = streaming.sessionStatus === 'booting';
+
+  // Fallback label priority: tool status → "Thinking…" while
+  // awaiting the first delta / booting → "Working…" whenever raw
+  // text is streaming but we refuse to show it here.
+  let label: string;
+  if (hasStatus) {
+    label = streaming.statusLog ?? 'Working…';
+  } else if (streaming.awaiting || isBooting) {
+    label = isBooting ? 'Agent is waking up…' : 'Thinking…';
+  } else if (hasText) {
+    label = 'Working…';
+  } else {
+    return null;
+  }
+
+  return (
+    <div className="text-muted-foreground inline-flex items-center gap-1.5 pl-2 text-[11px] italic">
+      <Loader2 className="h-3 w-3 animate-spin" />
+      {label}
+    </div>
+  );
+}
diff --git a/src/presentation/web/components/features/chat/useChatRuntime.ts b/src/presentation/web/components/features/chat/useChatRuntime.ts
index 64f7bb0f4..919eeba29 100644
--- a/src/presentation/web/components/features/chat/useChatRuntime.ts
+++ b/src/presentation/web/components/features/chat/useChatRuntime.ts
@@ -222,6 +222,16 @@ export interface ChatRuntimeOptions {
    * typically inside an in-progress turn card owned by the server.
    */
   suppressStreamingIndicator?: boolean;
+  /**
+   * When true, `threadMessages` is returned as an empty list — the
+   * flat thread renders no persisted bubbles at all. The host is
+   * expected to render the full conversation via its own grouping
+   * layer (e.g. `CurrentTurnCard` + `CompletedTurnGroupsList`) using
+   * `rawMessages`. Stable contract used by the web UI when turn-group
+   * rendering is on: the flat thread is dead, the overlay is the
+   * only visible surface.
+   */
+  hideAllMessages?: boolean;
 }
 
 /** A debug event captured from SSE for display in debug mode. */
@@ -748,6 +758,17 @@ export function useChatRuntime(
   );
 
   const threadMessages: ThreadMessageLike[] = useMemo(() => {
+    // Short-circuit: the host is rendering a full grouping overlay
+    // (turn group cards + step tracker + operation bubbles) and
+    // does NOT want any raw persisted bubbles to appear in the
+    // flat thread. Return an empty list so no message from the
+    // chat-state cache leaks into the Thread body; the composer
+    // and pending-interaction surfaces continue to work because
+    // they live OUTSIDE `threadMessages`.
+    if (options?.hideAllMessages === true) {
+      return [];
+    }
+
     const hasPlan = stepProgress.hasPlan;
 
     // When a workflow is active and STILL RUNNING: hide stepless
@@ -893,6 +914,7 @@ export function useChatRuntime(
     statusLog,
     options?.debugMode,
     options?.suppressStreamingIndicator,
+    options?.hideAllMessages,
     debugEvents,
     stepProgress.hasPlan,
     stepProgress.allDone,

From aa61257b2c3dbddfe2c4dc486ed648b516dc4706 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Wed, 15 Apr 2026 18:10:59 +0300
Subject: [PATCH 6/7] feat(web): zero-brain get online with unified logs and
 detached icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Finalises the one-click "Get online" pipeline, detaches the
activity log button from the split, and hardens the unified logs
drawer against hung requests.

- handleGetOnline is fully zero-brain: ensure owners, create the
  github remote with the default owner plus slugified name, pick
  the first connected cloud provider, fire deploy. The ONLY stop
  conditions are missing tokens — github connect goes to the
  PublishToGitHub modal, missing cloud provider opens the
  ConnectProviderModal on the first enabled provider. No toasts,
  no panel side-trips, one click equals one specific next action
- activity log icon button is detached from the SmartDeployButton
  split, rendered as a standalone 28x28 muted icon next to the
  primary action so it reads as a neighbour, not a welded third
  segment
- SmartDeployLogsDrawer gains AbortController per-request timeouts
  (6s), splits hasLoadedOnce from background polling so the
  "Loading logs..." spinner only appears on first fetch, adds a
  manual Refresh button, and surfaces per-scope errors as a soft
  banner while still rendering the entries that did come back —
  no more stuck-on-loading drawer
- Drawer empty state distinguishes "could not load" from "no
  activity yet" so the user knows whether to retry or just wait
- configure state kind removed from use-smart-deploy-state — the
  button stays "Get online" in every pre-live state, the
  pipeline itself handles the token gates inline

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../application-page/smart-deploy-button.tsx  |  27 ---
 .../application-page/smart-deploy-cluster.tsx | 154 ++++++++++--------
 .../smart-deploy-logs-drawer.tsx              |  91 ++++++++---
 .../web/hooks/use-smart-deploy-state.ts       |   7 +-
 4 files changed, 159 insertions(+), 120 deletions(-)

diff --git a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
index 1cc3fc3ff..f541bf6fc 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
@@ -21,7 +21,6 @@ import {
   RefreshCw,
   Rocket,
   Save,
-  ScrollText,
   Sparkles,
 } from 'lucide-react';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -40,10 +39,6 @@ export interface SmartDeployButtonProps {
    *  path instead of committing to a specific action. */
   panelOpen?: boolean;
   onPanelOpenChange?(open: boolean): void;
-  /** Opens the unified Smart Deploy activity log drawer. When omitted
-   *  the log button segment is hidden — kept optional so the
-   *  component still works in storybook without the drawer wired up. */
-  onOpenLogs?(): void;
   className?: string;
 }
 
@@ -195,7 +190,6 @@ export function SmartDeployButton({
   panel,
   panelOpen: controlledPanelOpen,
   onPanelOpenChange,
-  onOpenLogs,
   className,
 }: SmartDeployButtonProps) {
   const spec = labelFor(state);
@@ -295,27 +289,6 @@ export function SmartDeployButton({
           {panel}
         </PopoverContent>
       </Popover>
-
-      {/* ── Right-most: unified activity log trigger ──────────────
-          Persistent, always visible next to the Smart Deploy surface
-          so the user can read the full cross-operation timeline
-          (GitHub + Cloud + Sync) in one place without hunting for a
-          context-specific button inside the panel. */}
-      {onOpenLogs ? (
-        <button
-          type="button"
-          aria-label="Open activity log"
-          title="Activity log — all Smart Deploy operations"
-          onClick={onOpenLogs}
-          className={cn(
-            'inline-flex h-12 items-center justify-center rounded-none border border-l-0 px-2 transition-colors',
-            TONE_CLASSES[spec.tone],
-            'cursor-pointer'
-          )}
-        >
-          <ScrollText className="size-3.5" />
-        </button>
-      ) : null}
     </div>
   );
 }
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
index 8ca4507c4..b3ee0b993 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
@@ -10,6 +10,7 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
+import { ScrollText } from 'lucide-react';
 import { toast } from 'sonner';
 import { CloudDeploymentProvider, type Application } from '@shepai/core/domain/generated/output';
 import type { useCloudDeployAction } from '@/hooks/use-cloud-deploy-action';
@@ -254,88 +255,89 @@ export function SmartDeployCluster({
   const handleGetOnline = useCallback(async () => {
     if (oneClickRunning || agentRunning) return;
     setOneClickRunning(true);
-    // Open the unified activity drawer IMMEDIATELY so the user
-    // never stares at a silently-reverting button. Every server-side
-    // log entry that the pipeline writes streams into the drawer
-    // live via its 1.5s poll.
-    setLogsOpen(true);
-    let didAnyWork = false;
+
+    // Zero-brain policy: the pipeline defaults everything and only
+    // stops if a TOKEN is genuinely required. In both "no GitHub"
+    // and "no cloud provider" cases we open the appropriate inline
+    // connect modal — NOT the panel, NOT a toast — so the user's
+    // next click is literally "paste token and hit Connect". On
+    // token submission the state recomputes and the next click runs
+    // the pipeline end-to-end.
+    //
+    // The activity drawer opens only when real work is about to
+    // run, so token-prompt paths don't flash an empty "No activity
+    // yet" drawer on the user's screen.
     try {
-      // 1. Ensure owners loaded — needed to pick a default owner
-      //    for the create-remote call below.
       await ensureOwners();
 
-      // 2. Create the GitHub remote if we don't have one yet. We
-      //    re-read `gitStatus` defensively in case it loaded between
-      //    user intent and click.
+      // 1. GitHub token gate. Empty owners ⇒ no token on file.
+      //    The publish modal owns the GitHub connect + owner-picker
+      //    flow so we defer to it here; once the user submits,
+      //    owners repopulate and the next Get Online click runs.
+      const ownersSnapshot = owners;
+      if (!ownersSnapshot || ownersSnapshot.length === 0) {
+        setPublishModalOpen(true);
+        return;
+      }
+
+      // 2. Cloud provider token gate. Pick the first enabled
+      //    provider; if none of them are connected we need a token.
+      //    Default target = first enabled provider (typically
+      //    Cloudflare Pages). The panel chevron still lets the
+      //    user pick a different one if they prefer.
+      const connectedProvider = providers.find((p) => p.enabled && p.connected);
+      if (!connectedProvider) {
+        const defaultProvider = providers.find((p) => p.enabled) ?? null;
+        if (defaultProvider) {
+          setConnectMode('connect');
+          setConnectingProvider(defaultProvider.id);
+          return;
+        }
+        // Provider catalog is empty — edge case, fall back to the
+        // panel so the user can see SOMETHING actionable.
+        setPanelOpen(true);
+        return;
+      }
+
+      // 3. Both tokens are on file → open the activity drawer and
+      //    run the full pipeline end-to-end with defaults.
+      setLogsOpen(true);
+
       const hasRemoteNow = gitStatus?.hasRemote === true || Boolean(application.gitRemoteUrl);
       if (!hasRemoteNow) {
-        const ownersSnapshot = owners;
-        const firstOwner = ownersSnapshot && ownersSnapshot.length > 0 ? ownersSnapshot[0] : null;
-        if (!firstOwner) {
-          // No GitHub connection at all — we cannot create a remote
-          // automatically. Surface the gap with a toast so the user
-          // knows WHY nothing happened, and open the panel so they
-          // can hit "Connect GitHub" in one click.
-          toast.error('Connect GitHub first', {
-            description:
-              'One-click Get online needs a GitHub connection to create the remote. Open the panel and connect GitHub.',
+        const firstOwner = ownersSnapshot[0];
+        const defaultRepoName = application.name
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-+|-+$/g, '');
+        try {
+          const res = await fetch(`/api/applications/${application.id}/git/create-remote`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              ownerLogin: firstOwner.login,
+              repoName: defaultRepoName,
+              visibility: 'private',
+            }),
           });
-          setPanelOpen(true);
-        } else {
-          const defaultRepoName = application.name
-            .toLowerCase()
-            .replace(/[^a-z0-9]+/g, '-')
-            .replace(/^-+|-+$/g, '');
-          try {
-            const res = await fetch(`/api/applications/${application.id}/git/create-remote`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                ownerLogin: firstOwner.login,
-                repoName: defaultRepoName,
-                visibility: 'private',
-              }),
-            });
-            didAnyWork = true;
-            if (!res.ok) {
-              const body = (await res.json().catch(() => ({}))) as { error?: string };
-              toast.error('GitHub publish failed', {
-                description: body.error ?? `HTTP ${res.status}`,
-              });
-            }
-          } catch (err) {
+          if (!res.ok) {
+            const body = (await res.json().catch(() => ({}))) as { error?: string };
             toast.error('GitHub publish failed', {
-              description: err instanceof Error ? err.message : 'Network error',
+              description: body.error ?? `HTTP ${res.status}`,
             });
           }
-          await refreshGitStatus();
-        }
-      }
-
-      // 3. Auto-deploy to the first connected cloud provider.
-      const connected = providers.find((p) => p.enabled && p.connected);
-      if (connected) {
-        if (!cloudDeploy.state.provider || cloudDeploy.state.provider !== connected.id) {
-          await cloudDeploy.selectProvider(connected.id);
+        } catch (err) {
+          toast.error('GitHub publish failed', {
+            description: err instanceof Error ? err.message : 'Network error',
+          });
         }
-        await cloudDeploy.initiate();
-        didAnyWork = true;
-      } else {
-        // No cloud provider connected — surface the gap with a toast
-        // and open the panel. The repo half may have already run.
-        toast.error('Connect a hosting provider', {
-          description:
-            'One-click Get online needs a connected cloud provider to deploy. Pick one from the panel.',
-        });
-        setPanelOpen(true);
+        await refreshGitStatus();
       }
 
-      if (!didAnyWork) {
-        // Nothing actually ran — close the drawer again so the user
-        // isn't staring at an empty "No activity yet" state.
-        setLogsOpen(false);
+      if (!cloudDeploy.state.provider || cloudDeploy.state.provider !== connectedProvider.id) {
+        await cloudDeploy.selectProvider(connectedProvider.id);
       }
+      await cloudDeploy.initiate();
     } finally {
       setOneClickRunning(false);
     }
@@ -439,12 +441,24 @@ export function SmartDeployCluster({
 
   return (
     <>
+      {/* Standalone icon-only activity-log button, detached from the
+          Smart Deploy split. Small, borderless, sits next to the main
+          surface so the user can always read the unified log without
+          the log affordance feeling welded to the deploy action. */}
+      <button
+        type="button"
+        aria-label="Open activity log"
+        title="Smart Deploy activity log"
+        onClick={handleOpenLogs}
+        className="text-muted-foreground hover:bg-muted hover:text-foreground mr-1 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors"
+      >
+        <ScrollText className="size-3.5" />
+      </button>
       <SmartDeployButton
         state={smartState}
         onPrimaryClick={handlePrimaryClick}
         panelOpen={panelOpen}
         onPanelOpenChange={setPanelOpen}
-        onOpenLogs={handleOpenLogs}
         panel={
           <DeployPanel
             state={smartState}
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
index 4c5850552..f00eaa14c 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
@@ -32,6 +32,7 @@ import {
   Github,
   Info,
   Loader2,
+  RefreshCw,
   TriangleAlert,
 } from 'lucide-react';
 import {
@@ -111,6 +112,18 @@ export interface SmartDeployLogsDrawerProps {
   subtitle?: string;
 }
 
+const FETCH_TIMEOUT_MS = 6000;
+
+async function fetchWithTimeout(url: string): Promise<Response> {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  try {
+    return await fetch(url, { signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
 export function SmartDeployLogsDrawer({
   open,
   onOpenChange,
@@ -119,33 +132,52 @@ export function SmartDeployLogsDrawer({
   subtitle,
 }: SmartDeployLogsDrawerProps) {
   const [entries, setEntries] = useState<OperationLogEntryDto[]>([]);
-  const [loading, setLoading] = useState(false);
+  // `hasLoadedOnce` splits "first load" from "background poll": the
+  // "Loading logs…" spinner only shows while we've never completed a
+  // fetch, so subsequent 1.5s polls don't flash the user back to a
+  // loading state each tick when entries legitimately stay empty.
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const [backgroundFetching, setBackgroundFetching] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showDebug, setShowDebug] = useState(false);
   const bodyRef = useRef<HTMLDivElement | null>(null);
 
   const refresh = useCallback(async () => {
-    setLoading(true);
+    setBackgroundFetching(true);
     setError(null);
     try {
-      // Fetch all three scopes in parallel, then merge. Any single
-      // request failing doesn't poison the drawer — we still show
-      // what we have and surface a soft error banner.
-      const responses = await Promise.all(
+      // Fetch all three scopes in parallel with per-request timeouts.
+      // Any single request failing (HTTP error, abort, network drop)
+      // doesn't poison the drawer — we still merge what came back and
+      // surface a soft error banner so the user knows something went
+      // wrong without staring at a blank drawer forever.
+      const results = await Promise.all(
         OP_KINDS.map(async (kind) => {
           try {
-            const res = await fetch(
+            const res = await fetchWithTimeout(
               `/api/operations/${encodeURIComponent(kind)}/${encodeURIComponent(applicationId)}/logs`
             );
-            if (!res.ok) return { kind, entries: [] as OperationLogEntryDto[] };
+            if (!res.ok) {
+              return {
+                kind,
+                entries: [] as OperationLogEntryDto[],
+                error: `${kind}: HTTP ${res.status}`,
+              };
+            }
             const body = (await res.json()) as { entries?: OperationLogEntryDto[] };
-            return { kind, entries: body.entries ?? [] };
-          } catch {
-            return { kind, entries: [] as OperationLogEntryDto[] };
+            return { kind, entries: body.entries ?? [], error: null as string | null };
+          } catch (err) {
+            const msg =
+              err instanceof Error
+                ? err.name === 'AbortError'
+                  ? `${kind}: timed out after ${FETCH_TIMEOUT_MS / 1000}s`
+                  : `${kind}: ${err.message}`
+                : `${kind}: unknown error`;
+            return { kind, entries: [] as OperationLogEntryDto[], error: msg };
           }
         })
       );
-      const merged = responses
+      const merged = results
         .flatMap((r) => r.entries)
         .sort((a, b) => {
           const ta = new Date(a.createdAt).getTime();
@@ -153,16 +185,23 @@ export function SmartDeployLogsDrawer({
           return ta - tb;
         });
       setEntries(merged);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load logs');
+      const errors = results.map((r) => r.error).filter((e): e is string => e !== null);
+      setError(errors.length > 0 ? errors.join(' · ') : null);
     } finally {
-      setLoading(false);
+      setBackgroundFetching(false);
+      setHasLoadedOnce(true);
     }
   }, [applicationId]);
 
-  // Fetch on open + poll while running.
+  // Fetch on open + poll while running. Reset the one-shot spinner
+  // flag when the drawer is closed OR the applicationId switches so
+  // the user sees "Loading logs…" on the next fresh open, not a stale
+  // "No activity yet" while the first new fetch is still in flight.
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      setHasLoadedOnce(false);
+      return;
+    }
     void refresh();
     if (!isRunning) return;
     const timer = setInterval(() => {
@@ -234,11 +273,21 @@ export function SmartDeployLogsDrawer({
               <Copy className="size-3" />
               Copy all
             </button>
+            <button
+              type="button"
+              className="hover:bg-muted hover:text-foreground inline-flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[11px] disabled:opacity-50"
+              onClick={() => void refresh()}
+              disabled={backgroundFetching}
+              title="Refresh now"
+            >
+              <RefreshCw className={cn('size-3', backgroundFetching && 'animate-spin')} />
+              Refresh
+            </button>
           </div>
         </SheetHeader>
 
         <div ref={bodyRef} className="flex-1 overflow-y-auto p-4">
-          {loading && entries.length === 0 ? (
+          {!hasLoadedOnce ? (
             <div className="text-muted-foreground flex items-center gap-2 text-xs">
               <Loader2 className="size-3 animate-spin" /> Loading logs…
             </div>
@@ -248,10 +297,10 @@ export function SmartDeployLogsDrawer({
               {error}
             </div>
           ) : null}
-          {visible.length === 0 && !loading && !error ? (
+          {visible.length === 0 && hasLoadedOnce ? (
             <div className="text-muted-foreground text-xs">
-              No activity yet.
-              {isRunning ? ' The operation just started — entries will appear here.' : ''}
+              {error ? 'Could not load activity. Use Refresh to try again.' : 'No activity yet.'}
+              {isRunning && !error ? ' The operation just started — entries will appear here.' : ''}
             </div>
           ) : null}
 
diff --git a/src/presentation/web/hooks/use-smart-deploy-state.ts b/src/presentation/web/hooks/use-smart-deploy-state.ts
index d6901f700..b3aea7e79 100644
--- a/src/presentation/web/hooks/use-smart-deploy-state.ts
+++ b/src/presentation/web/hooks/use-smart-deploy-state.ts
@@ -50,7 +50,7 @@ import type { SyncActionState } from './use-sync-action';
 
 export type SmartDeployStateKind =
   | 'loading'
-  | 'getOnline' // no remote yet
+  | 'getOnline' // no remote yet — one click runs the full zero-brain pipeline
   | 'deploy' // clean + has remote, no deployment yet
   | 'save' // dirty + has remote, no cloud connected
   | 'pushAndDeploy' // dirty + has remote + cloud connected (not yet live)
@@ -262,7 +262,10 @@ export function useSmartDeployState({
       });
     }
 
-    // 4. No remote at all — first-time setup
+    // 4. No remote at all — first-time setup. The button is always
+    //    "Get online" regardless of cloud provider connectivity;
+    //    the one-click handler walks the whole zero-brain pipeline
+    //    and only stops to prompt when a token is actually required.
     if (!hasRemote) {
       return baseState({
         kind: 'getOnline',

From d70fec46a5b0768b66cb87242bf0b5dd51634459 Mon Sep 17 00:00:00 2001
From: "shep-ai[bot]" <bot@shep.bot>
Date: Mon, 20 Apr 2026 15:20:56 +0300
Subject: [PATCH 7/7] feat(web): real-time sse deltas for application setup and
 operation logs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eliminates the last two client-side polling paths in the application
page (refetchInterval on the loader query, setInterval in the activity
drawer) and replaces them with typed, backend-owned SSE deltas. The
server remains the sole poller; the client patches state in-place as
typed events arrive.

Backend:
- New NotificationEventType values ApplicationUpdated + OperationLogAppended
  with scoped payload models, plumbed through TypeSpec codegen.
- New IOperationLogEventBus port + in-memory adapter. The SQLite
  operation-log repo publishes after each successful INSERT so clients
  see every appended log line within a tick, not on a 2s poll.
- StreamAgentEventsUseCase diffs applications rows per poll and
  re-emits bus publishes as notifications. Per-connection cache seeds
  silently on reconnect.

Client:
- useApplicationUpdate + useOperationLogAppend selector hooks on the
  shared agent-events context.
- ApplicationPageLoader patches the React Query cache in-place on
  event, zero HTTP refetch. Removes the prior invalidate-on-any-event
  hack.
- SmartDeployLogsDrawer appends new entries with dedup by id. Initial
  hydration fetch on open is preserved; setInterval is gone.

Also bundles prior chat-timeline / smart-deploy polish on the branch:
scaffold stdout streaming to operation logs (enables the ApplicationSetup
kind to populate the drawer), bubbled chat-timeline groupings, and
AppTopBar / SmartDeployButton / SmartDeployCluster layout polish.

Spec: specs/090-application-sse-deltas/
Invariants: DB is source of truth; SSE is a hint. Missing an event is
never fatal — next read rehydrates from the row. No client timers.

Tests: 20 new spec-scoped unit tests. Full suite green
(6604 unit + 763 integration). typecheck + lint + tsp + storybook
clean.

Co-Authored-By: Shep Bot <shep-agent@users.noreply.github.com>
---
 .../json-schema/ApplicationUpdatePayload.yaml |  24 ++
 apis/json-schema/NotificationEvent.yaml       |   6 +
 apis/json-schema/NotificationEventConfig.yaml |   8 +
 apis/json-schema/NotificationEventType.yaml   |   2 +
 .../OperationLogAppendPayload.yaml            |  10 +
 apis/json-schema/OperationLogKind.yaml        |   1 +
 package.json                                  |   2 +-
 .../application-scaffolder.interface.ts       |  36 ++
 .../operation-log-event-bus.interface.ts      |  25 ++
 .../agents/stream-agent-events.use-case.ts    |  90 ++++-
 .../compute-application-deltas.ts             |  68 ++++
 .../stream-agent-events.types.ts              |  14 +-
 .../create-application.use-case.ts            |  46 ++-
 packages/core/src/domain/generated/output.ts  | 197 ++++++----
 .../di/modules/register-repositories.ts       |   4 +-
 .../di/modules/register-services.ts           |   9 +
 .../sqlite-operation-log.repository.ts        |  10 +-
 .../in-memory-operation-log-event-bus.ts      |  51 +++
 .../notifications/notification.service.ts     |   2 +
 .../bun-shadcn-scaffolder.service.ts          | 160 +++++++-
 .../contracts/.gitkeep                        |   0
 .../090-application-sse-deltas/data-model.md  |  64 ++++
 specs/090-application-sse-deltas/feature.yaml |  48 +++
 specs/090-application-sse-deltas/plan.yaml    | 269 ++++++++++++++
 .../090-application-sse-deltas/research.yaml  | 200 ++++++++++
 specs/090-application-sse-deltas/spec.yaml    | 142 +++++++
 specs/090-application-sse-deltas/tasks.yaml   | 308 +++++++++++++++
 .../web/components/assistant-ui/thread.tsx    |  27 +-
 .../feature-node/derive-feature-state.ts      |   9 +-
 .../application-page/app-overflow-menu.tsx    |  15 +-
 .../features/application-page/app-top-bar.tsx |   6 +-
 .../application-page/app-view-tabs.tsx        |  64 ++--
 .../application-page-loader.tsx               |  23 +-
 .../application-page/application-page.tsx     |   5 +-
 .../application-page/smart-deploy-button.tsx  | 105 ++----
 .../application-page/smart-deploy-cluster.tsx |  51 ++-
 .../smart-deploy-logs-drawer.tsx              | 202 +++++++---
 .../web/components/features/chat/ChatTab.tsx  | 190 +++++++---
 .../features/chat/operation-bubble.tsx        | 351 ++++++++++++++----
 .../features/chat/turn-group-card.tsx         |  78 ++--
 .../features/chat/turn-group-list.tsx         |  84 ++++-
 .../web/hooks/agent-events-provider.tsx       |  50 ++-
 .../sqlite-operation-log.repository.test.ts   |   3 +-
 .../agents/compute-application-deltas.test.ts | 169 +++++++++
 .../stream-agent-events-application.test.ts   | 203 ++++++++++
 ...eam-agent-events-operation-log-bus.test.ts | 248 +++++++++++++
 .../stream-agent-events.use-case.test.ts      |  52 +++
 .../create-application.use-case.test.ts       |  22 +-
 ...e-operation-log-repository-publish.test.ts | 107 ++++++
 .../in-memory-operation-log-event-bus.test.ts | 125 +++++++
 .../application-page-loader-patch.test.ts     | 225 +++++++++++
 .../smart-deploy-logs-drawer-append.test.tsx  | 255 +++++++++++++
 tsconfig.json                                 |   1 +
 tsp/common/enums/notification.tsp             |   6 +
 tsp/common/enums/operation-log.tsp            |   3 +
 tsp/domain/entities/notification-event.tsp    |  47 +++
 tsp/domain/entities/settings.tsp              |   6 +
 vitest.config.ts                              |   4 +
 58 files changed, 4065 insertions(+), 467 deletions(-)
 create mode 100644 apis/json-schema/ApplicationUpdatePayload.yaml
 create mode 100644 apis/json-schema/OperationLogAppendPayload.yaml
 create mode 100644 packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts
 create mode 100644 packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts
 create mode 100644 packages/core/src/infrastructure/services/events/in-memory-operation-log-event-bus.ts
 create mode 100644 specs/090-application-sse-deltas/contracts/.gitkeep
 create mode 100644 specs/090-application-sse-deltas/data-model.md
 create mode 100644 specs/090-application-sse-deltas/feature.yaml
 create mode 100644 specs/090-application-sse-deltas/plan.yaml
 create mode 100644 specs/090-application-sse-deltas/research.yaml
 create mode 100644 specs/090-application-sse-deltas/spec.yaml
 create mode 100644 specs/090-application-sse-deltas/tasks.yaml
 create mode 100644 tests/unit/application/use-cases/agents/compute-application-deltas.test.ts
 create mode 100644 tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts
 create mode 100644 tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts
 create mode 100644 tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts
 create mode 100644 tests/unit/infrastructure/services/events/in-memory-operation-log-event-bus.test.ts
 create mode 100644 tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts
 create mode 100644 tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.tsx

diff --git a/apis/json-schema/ApplicationUpdatePayload.yaml b/apis/json-schema/ApplicationUpdatePayload.yaml
new file mode 100644
index 000000000..748d10e68
--- /dev/null
+++ b/apis/json-schema/ApplicationUpdatePayload.yaml
@@ -0,0 +1,24 @@
+$schema: https://json-schema.org/draft/2020-12/schema
+$id: ApplicationUpdatePayload.yaml
+type: object
+properties:
+  applicationId:
+    type: string
+    description: The application whose row changed
+  setupComplete:
+    type: boolean
+    description: Current setup_complete flag (after the transition)
+  status:
+    $ref: ApplicationStatus.yaml
+    description: Current application status (after the transition)
+  gitRemoteUrl:
+    type: string
+    description: Current git remote URL, if one is set
+  cloudDeploymentProvider:
+    $ref: CloudDeploymentProvider.yaml
+    description: Selected cloud deployment provider, if one is set
+required:
+  - applicationId
+  - setupComplete
+  - status
+description: Scoped payload for an ApplicationUpdated notification — carries only the fields the client patches in-place. Deltas for unchanged fields are omitted.
diff --git a/apis/json-schema/NotificationEvent.yaml b/apis/json-schema/NotificationEvent.yaml
index 07a06e141..d2872312c 100644
--- a/apis/json-schema/NotificationEvent.yaml
+++ b/apis/json-schema/NotificationEvent.yaml
@@ -27,6 +27,12 @@ properties:
     type: string
     format: date-time
     description: When the event occurred
+  applicationUpdate:
+    $ref: ApplicationUpdatePayload.yaml
+    description: Scoped payload for ApplicationUpdated events — present iff eventType === ApplicationUpdated
+  operationLogAppend:
+    $ref: OperationLogAppendPayload.yaml
+    description: Scoped payload for OperationLogAppended events — present iff eventType === OperationLogAppended
 required:
   - eventType
   - agentRunId
diff --git a/apis/json-schema/NotificationEventConfig.yaml b/apis/json-schema/NotificationEventConfig.yaml
index a44ff4285..3aa566897 100644
--- a/apis/json-schema/NotificationEventConfig.yaml
+++ b/apis/json-schema/NotificationEventConfig.yaml
@@ -50,6 +50,14 @@ properties:
     type: boolean
     default: true
     description: Notify when cloud deployment status changes (spec 089)
+  applicationUpdated:
+    type: boolean
+    default: true
+    description: Notify when application row changes (setupComplete, status, gitRemoteUrl, cloudDeploymentProvider — spec 090)
+  operationLogAppended:
+    type: boolean
+    default: true
+    description: Notify when a new operation log entry is appended (spec 090)
 required:
   - agentStarted
   - phaseCompleted
diff --git a/apis/json-schema/NotificationEventType.yaml b/apis/json-schema/NotificationEventType.yaml
index ac18240c8..960d126ac 100644
--- a/apis/json-schema/NotificationEventType.yaml
+++ b/apis/json-schema/NotificationEventType.yaml
@@ -14,4 +14,6 @@ enum:
   - pr_blocked
   - merge_review_ready
   - cloud_deployment_updated
+  - application_updated
+  - operation_log_appended
 description: Types of agent lifecycle notification events
diff --git a/apis/json-schema/OperationLogAppendPayload.yaml b/apis/json-schema/OperationLogAppendPayload.yaml
new file mode 100644
index 000000000..432668699
--- /dev/null
+++ b/apis/json-schema/OperationLogAppendPayload.yaml
@@ -0,0 +1,10 @@
+$schema: https://json-schema.org/draft/2020-12/schema
+$id: OperationLogAppendPayload.yaml
+type: object
+properties:
+  entry:
+    $ref: OperationLogEntry.yaml
+    description: The newly-appended operation log entry
+required:
+  - entry
+description: Scoped payload for an OperationLogAppended notification — carries the newly-appended entry so clients can patch their log list in-place without a refetch.
diff --git a/apis/json-schema/OperationLogKind.yaml b/apis/json-schema/OperationLogKind.yaml
index 213654be9..670cd9bd3 100644
--- a/apis/json-schema/OperationLogKind.yaml
+++ b/apis/json-schema/OperationLogKind.yaml
@@ -5,4 +5,5 @@ enum:
   - CloudDeploy
   - GitRemoteCreate
   - RepoSync
+  - ApplicationSetup
 description: Kind of long-running operation an OperationLogEntry belongs to
diff --git a/package.json b/package.json
index 70e5e97be..a250593bc 100644
--- a/package.json
+++ b/package.json
@@ -182,7 +182,7 @@
       "minimatch": "^7.x"
     }
   },
-  "packageManager": "pnpm@10.30.0",
+  "packageManager": "pnpm@10.33.0",
   "dependencies": {
     "@ai-sdk/openai-compatible": "^2.0.0",
     "@ai-sdk/provider": "^3.0.8",
diff --git a/packages/core/src/application/ports/output/services/application-scaffolder.interface.ts b/packages/core/src/application/ports/output/services/application-scaffolder.interface.ts
index d97ed52ef..cd9feb4fd 100644
--- a/packages/core/src/application/ports/output/services/application-scaffolder.interface.ts
+++ b/packages/core/src/application/ports/output/services/application-scaffolder.interface.ts
@@ -32,8 +32,44 @@ export interface ScaffoldOptions {
    * `package.json#name`, folder naming during intermediate steps, etc.
    */
   readonly projectName: string;
+
+  /**
+   * ID of the Application this scaffold belongs to. Used as the
+   * `operationId` when the adapter appends progress/error entries to
+   * the shared operation log so the UI can stream the scaffold's
+   * stdout/stderr into the same drawer that shows deploy / publish /
+   * sync activity.
+   */
+  readonly applicationId: string;
+
+  /**
+   * Progress callback. The adapter emits high-level phase events
+   * (`Starting shadcn init`, `bun add extras done`) and deduped CLI
+   * output lines from child processes as they arrive. Must never
+   * throw — errors inside the callback are swallowed by the adapter
+   * so a failing sink cannot abort a successful scaffold.
+   *
+   * Level mapping:
+   *   - `Info` — phase boundaries + stdout from child processes
+   *   - `Warn` — stderr from child processes (surfaced as warnings so
+   *     the user can see progress chatter without the whole log
+   *     turning red; real failures are emitted as `Error` by the
+   *     adapter itself on non-zero exit)
+   *   - `Error` — phase failure with the exception message
+   *   - `Debug` — low-priority bookkeeping (reserved)
+   */
+  readonly onLog?: ScaffoldLogCallback;
 }
 
+export type ScaffoldLogLevel = 'Debug' | 'Info' | 'Warn' | 'Error';
+
+export type ScaffoldLogCallback = (entry: {
+  level: ScaffoldLogLevel;
+  message: string;
+  /** Optional multi-line block — typically captured stdout/stderr. */
+  detail?: string;
+}) => void;
+
 export interface ScaffoldResult {
   /**
    * Absolute path to the finished project root. Always equal to
diff --git a/packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts b/packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts
new file mode 100644
index 000000000..fc7978a57
--- /dev/null
+++ b/packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts
@@ -0,0 +1,25 @@
+import type { OperationLogEntry } from '../../../../domain/generated/output.js';
+
+/**
+ * OperationLog Event Bus (port)
+ *
+ * In-process pub/sub for newly-appended operation_log_entries. The SSE
+ * route (StreamAgentEventsUseCase in spec 090) subscribes and re-emits
+ * each publish as a notification so the web client can render log
+ * lines in real time without polling.
+ *
+ * DB is source of truth — publishers MUST publish only after a
+ * successful INSERT. Subscribers MUST NOT assume they see every event
+ * (SW restart / reconnect may drop a window); the client should
+ * rehydrate from the DB on first open.
+ */
+export interface OperationLogEvent {
+  entry: OperationLogEntry;
+}
+
+export type OperationLogEventListener = (event: OperationLogEvent) => void;
+
+export interface IOperationLogEventBus {
+  publish(event: OperationLogEvent): void;
+  subscribe(listener: OperationLogEventListener): () => void;
+}
diff --git a/packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts b/packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
index 026a4aca7..63886709b 100644
--- a/packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
+++ b/packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
@@ -27,22 +27,30 @@ import { inject, injectable } from 'tsyringe';
 
 import type { IAgentRunRepository } from '../../ports/output/agents/agent-run-repository.interface.js';
 import type { IPhaseTimingRepository } from '../../ports/output/agents/phase-timing-repository.interface.js';
+import type { IApplicationRepository } from '../../ports/output/repositories/application-repository.interface.js';
 import type { IInteractiveSessionRepository } from '../../ports/output/repositories/interactive-session-repository.interface.js';
 import type { ICloudDeploymentEventBus } from '../../ports/output/services/cloud-deployment-event-bus.interface.js';
 import type { ILogger } from '../../ports/output/services/logger.interface.js';
+import type { IOperationLogEventBus } from '../../ports/output/services/operation-log-event-bus.interface.js';
 import type { IProcessLivenessProbe } from '../../ports/output/services/process-liveness.interface.js';
 
 import { ListFeaturesUseCase } from '../features/list-features.use-case.js';
 
 import type { AgentRun, Feature } from '../../../domain/generated/output.js';
-import { NotificationEventType, NotificationSeverity } from '../../../domain/generated/output.js';
+import {
+  NotificationEventType,
+  NotificationSeverity,
+  OperationLogLevel,
+} from '../../../domain/generated/output.js';
 
+import { computeApplicationDeltas } from './stream-agent-events/compute-application-deltas.js';
 import { computeFeatureDeltas } from './stream-agent-events/compute-feature-deltas.js';
 import { computePhaseCompletionDeltas } from './stream-agent-events/compute-phase-completion-deltas.js';
 import { computePrDeltas } from './stream-agent-events/compute-pr-deltas.js';
 import { computeSessionDeltas } from './stream-agent-events/compute-session-deltas.js';
 import { computeStatusDeltas } from './stream-agent-events/compute-status-deltas.js';
 import type {
+  CachedApplicationState,
   CachedFeatureState,
   CachedSessionState,
   StreamedAgentEvent,
@@ -83,6 +91,10 @@ export class StreamAgentEventsUseCase {
     private readonly processLiveness: IProcessLivenessProbe,
     @inject('ICloudDeploymentEventBus')
     private readonly cloudEventBus: ICloudDeploymentEventBus,
+    @inject('IApplicationRepository')
+    private readonly applicationRepo: IApplicationRepository,
+    @inject('IOperationLogEventBus')
+    private readonly operationLogEventBus: IOperationLogEventBus,
     @inject('ILogger')
     private readonly logger: ILogger
   ) {}
@@ -102,6 +114,7 @@ export class StreamAgentEventsUseCase {
 
     const featureCache = new Map<string, CachedFeatureState>();
     const sessionCache = new Map<string, CachedSessionState>();
+    const applicationCache = new Map<string, CachedApplicationState>();
 
     const queue: StreamedAgentEvent[] = [];
     let notify: (() => void) | null = null;
@@ -115,13 +128,20 @@ export class StreamAgentEventsUseCase {
     };
 
     const unsubscribeCloudDeploy = this.subscribeCloudDeploy(enqueue);
+    const unsubscribeOperationLog = this.subscribeOperationLog(enqueue);
 
     let pollErrorCount = 0;
 
     try {
       while (!signal?.aborted) {
         try {
-          await this.pollOnce({ runIdFilter, featureCache, sessionCache, enqueue });
+          await this.pollOnce({
+            runIdFilter,
+            featureCache,
+            sessionCache,
+            applicationCache,
+            enqueue,
+          });
           pollErrorCount = 0;
         } catch (error) {
           pollErrorCount++;
@@ -178,6 +198,11 @@ export class StreamAgentEventsUseCase {
       } catch {
         // Listener may already be detached.
       }
+      try {
+        unsubscribeOperationLog();
+      } catch {
+        // Listener may already be detached.
+      }
     }
   }
 
@@ -218,6 +243,43 @@ export class StreamAgentEventsUseCase {
     });
   }
 
+  /**
+   * Subscribe to the in-process operation-log event bus and re-emit each
+   * publish as a `NotificationEventType.OperationLogAppended` notification.
+   * Returns the unsubscribe handle.
+   */
+  private subscribeOperationLog(enqueue: (event: StreamedAgentEvent) => void): () => void {
+    return this.operationLogEventBus.subscribe(({ entry }) => {
+      const severity =
+        entry.level === OperationLogLevel.Error
+          ? NotificationSeverity.Error
+          : entry.level === OperationLogLevel.Warn
+            ? NotificationSeverity.Warning
+            : NotificationSeverity.Info;
+
+      const timestamp =
+        entry.createdAt instanceof Date
+          ? entry.createdAt.toISOString()
+          : typeof entry.createdAt === 'string'
+            ? entry.createdAt
+            : String(entry.createdAt);
+
+      enqueue({
+        kind: 'notification',
+        event: {
+          eventType: NotificationEventType.OperationLogAppended,
+          agentRunId: entry.operationId,
+          featureId: entry.operationId,
+          featureName: entry.operationKind,
+          message: entry.message,
+          severity,
+          timestamp,
+          operationLogAppend: { entry },
+        },
+      });
+    });
+  }
+
   /**
    * Single poll cycle: walk every feature's latest agent run, diff against
    * the connection cache, and enqueue notification events for any observed
@@ -227,9 +289,10 @@ export class StreamAgentEventsUseCase {
     runIdFilter?: string;
     featureCache: Map<string, CachedFeatureState>;
     sessionCache: Map<string, CachedSessionState>;
+    applicationCache: Map<string, CachedApplicationState>;
     enqueue: (event: StreamedAgentEvent) => void;
   }): Promise<void> {
-    const { runIdFilter, featureCache, sessionCache, enqueue } = args;
+    const { runIdFilter, featureCache, sessionCache, applicationCache, enqueue } = args;
 
     const features = await this.listFeatures.execute();
 
@@ -294,6 +357,27 @@ export class StreamAgentEventsUseCase {
     } catch {
       // Ignore interactive session poll errors to not affect main polling.
     }
+
+    // Application row polling — diff against per-connection cache and emit
+    // `ApplicationUpdated` on any watched-field change. Seed is silent.
+    try {
+      const applications = await this.applicationRepo.list();
+      for (const app of applications) {
+        if (runIdFilter && app.id !== runIdFilter) continue;
+        const prev = applicationCache.get(app.id);
+        for (const event of computeApplicationDeltas({ application: app, prev })) {
+          enqueue(event);
+        }
+        applicationCache.set(app.id, {
+          setupComplete: app.setupComplete,
+          status: app.status,
+          gitRemoteUrl: app.gitRemoteUrl,
+          cloudDeploymentProvider: app.cloudDeploymentProvider,
+        });
+      }
+    } catch {
+      // Ignore application-poll failures; same posture as session polling.
+    }
   }
 
   /**
diff --git a/packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts b/packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts
new file mode 100644
index 000000000..08c207a74
--- /dev/null
+++ b/packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts
@@ -0,0 +1,68 @@
+/**
+ * Pure helper: compute ApplicationUpdated delta for a single application row.
+ *
+ * Diffs the current `Application` against the cached snapshot of a watched
+ * field set. Emits at most ONE notification event carrying the full updated
+ * payload. Seed case (no prev) returns zero events — the caller is expected
+ * to populate the cache on first sight.
+ *
+ * Pure: no I/O, no timers, no side effects. `prev` is NOT mutated here — the
+ * use-case owns cache lifecycle so the helper stays trivially testable.
+ */
+
+import type { Application } from '../../../../domain/generated/output.js';
+import {
+  NotificationEventType,
+  NotificationSeverity,
+} from '../../../../domain/generated/output.js';
+
+import type { CachedApplicationState, StreamedAgentEvent } from './stream-agent-events.types.js';
+
+const WATCHED_FIELDS = [
+  'setupComplete',
+  'status',
+  'gitRemoteUrl',
+  'cloudDeploymentProvider',
+] as const;
+
+export interface ComputeApplicationDeltasArgs {
+  application: Application;
+  prev: CachedApplicationState | undefined;
+}
+
+export function computeApplicationDeltas(args: ComputeApplicationDeltasArgs): StreamedAgentEvent[] {
+  const { application, prev } = args;
+
+  if (prev === undefined) return [];
+
+  let changed = false;
+  for (const field of WATCHED_FIELDS) {
+    if (prev[field] !== application[field]) {
+      changed = true;
+      break;
+    }
+  }
+  if (!changed) return [];
+
+  return [
+    {
+      kind: 'notification',
+      event: {
+        eventType: NotificationEventType.ApplicationUpdated,
+        agentRunId: '',
+        featureId: application.id,
+        featureName: application.name,
+        message: `Application "${application.name}" updated`,
+        severity: NotificationSeverity.Info,
+        timestamp: new Date().toISOString(),
+        applicationUpdate: {
+          applicationId: application.id,
+          setupComplete: application.setupComplete,
+          status: application.status,
+          gitRemoteUrl: application.gitRemoteUrl,
+          cloudDeploymentProvider: application.cloudDeploymentProvider,
+        },
+      },
+    },
+  ];
+}
diff --git a/packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts b/packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts
index 35a807642..e7c26da1b 100644
--- a/packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts
+++ b/packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts
@@ -7,7 +7,11 @@
  * next to it.
  */
 
-import type { NotificationEvent } from '../../../../domain/generated/output.js';
+import type {
+  ApplicationStatus,
+  CloudDeploymentProvider,
+  NotificationEvent,
+} from '../../../../domain/generated/output.js';
 import { AgentRunStatus, InteractiveSessionStatus } from '../../../../domain/generated/output.js';
 import {
   InteractiveSessionEventType,
@@ -65,6 +69,14 @@ export interface CachedSessionState {
   status: InteractiveSessionStatus;
 }
 
+/** Per-connection cached state for an application row. */
+export interface CachedApplicationState {
+  setupComplete: boolean;
+  status: ApplicationStatus;
+  gitRemoteUrl: string | undefined;
+  cloudDeploymentProvider: CloudDeploymentProvider | undefined;
+}
+
 /**
  * Mapping table from terminal-ish `AgentRunStatus` values to the notification
  * they should produce. Exported so helper modules can share one source of
diff --git a/packages/core/src/application/use-cases/applications/create-application.use-case.ts b/packages/core/src/application/use-cases/applications/create-application.use-case.ts
index 2fd6db7fe..2a3f2ea56 100644
--- a/packages/core/src/application/use-cases/applications/create-application.use-case.ts
+++ b/packages/core/src/application/use-cases/applications/create-application.use-case.ts
@@ -14,8 +14,14 @@
 import { injectable, inject } from 'tsyringe';
 import { randomUUID, randomBytes } from 'node:crypto';
 import type { Application, InteractiveMessage } from '../../../domain/generated/output.js';
-import { ApplicationStatus, InteractiveMessageRole } from '../../../domain/generated/output.js';
+import {
+  ApplicationStatus,
+  InteractiveMessageRole,
+  OperationLogKind,
+  OperationLogLevel,
+} from '../../../domain/generated/output.js';
 import type { IApplicationRepository } from '../../ports/output/repositories/application-repository.interface.js';
+import type { IOperationLogRepository } from '../../ports/output/repositories/operation-log.repository.interface.js';
 import type { IApplicationCreationPromptBuilder } from '../../ports/output/services/application-creation-prompt-builder.interface.js';
 import type { IApplicationBriefStore } from '../../ports/output/services/application-brief-store.interface.js';
 import type { IApplicationScaffolder } from '../../ports/output/services/application-scaffolder.interface.js';
@@ -163,6 +169,8 @@ export class CreateApplicationUseCase {
     private readonly scaffolder: IApplicationScaffolder,
     @inject('IInteractiveMessageRepository')
     private readonly messageRepo: IInteractiveMessageRepository,
+    @inject('IOperationLogRepository')
+    private readonly operationLogRepo: IOperationLogRepository,
     @inject('ILogger')
     private readonly logger: ILogger
   ) {}
@@ -299,14 +307,46 @@ export class CreateApplicationUseCase {
     modelOverride: string | undefined;
   }): Promise<void> {
     // Phase A — scaffold the project tree.
+    //
+    // Wire an `onLog` sink that forwards every scaffolder event into
+    // the shared operation_log_entries table under the ApplicationSetup
+    // kind so the Smart Deploy Activity drawer can stream CLI output
+    // (create-vite, bun install, bun add, template overlay) in real
+    // time. Append failures are intentionally swallowed — a broken
+    // log sink must never abort a successful scaffold.
+    const appId = args.application.id;
+    const onScaffoldLog = (entry: {
+      level: 'Debug' | 'Info' | 'Warn' | 'Error';
+      message: string;
+      detail?: string;
+    }): void => {
+      void this.operationLogRepo
+        .append({
+          operationKind: OperationLogKind.ApplicationSetup,
+          operationId: appId,
+          level: entry.level as OperationLogLevel,
+          message: entry.message,
+          detail: entry.detail,
+        })
+        .catch(() => {
+          // Log-sink errors are non-fatal.
+        });
+    };
+
     try {
       await this.scaffolder.scaffold({
         repositoryPath: args.projectPath,
         projectName: args.application.name,
+        applicationId: args.application.id,
+        onLog: onScaffoldLog,
       });
     } catch (err) {
-      this.logger.error('[create-application] scaffold failed', {
-        err: err instanceof Error ? err.message : String(err),
+      const message = err instanceof Error ? err.message : String(err);
+      this.logger.error('[create-application] scaffold failed', { err: message });
+      onScaffoldLog({
+        level: 'Error',
+        message: 'Application setup failed',
+        detail: message,
       });
       try {
         await this.appRepo.update(args.application.id, {
diff --git a/packages/core/src/domain/generated/output.ts b/packages/core/src/domain/generated/output.ts
index 69aaa3339..ddafc8ac7 100644
--- a/packages/core/src/domain/generated/output.ts
+++ b/packages/core/src/domain/generated/output.ts
@@ -607,6 +607,14 @@ export type NotificationEventConfig = {
    * Notify when cloud deployment status changes (spec 089)
    */
   cloudDeploymentUpdated?: boolean;
+  /**
+   * Notify when application row changes (setupComplete, status, gitRemoteUrl, cloudDeploymentProvider — spec 090)
+   */
+  applicationUpdated?: boolean;
+  /**
+   * Notify when a new operation log entry is appended (spec 090)
+   */
+  operationLogAppended?: boolean;
 };
 
 /**
@@ -1671,6 +1679,92 @@ export type Tool = BaseEntity & {
    */
   installedAt?: any;
 };
+export enum ApplicationStatus {
+  Idle = 'Idle',
+  Active = 'Active',
+  Error = 'Error',
+}
+export enum CloudDeploymentProvider {
+  CloudflarePages = 'CloudflarePages',
+  Vercel = 'Vercel',
+  Netlify = 'Netlify',
+  AwsAmplify = 'AwsAmplify',
+  GcpCloudRun = 'GcpCloudRun',
+}
+
+/**
+ * Scoped payload for an ApplicationUpdated notification — carries only the fields the client patches in-place. Deltas for unchanged fields are omitted.
+ */
+export type ApplicationUpdatePayload = {
+  /**
+   * The application whose row changed
+   */
+  applicationId: string;
+  /**
+   * Current setup_complete flag (after the transition)
+   */
+  setupComplete: boolean;
+  /**
+   * Current application status (after the transition)
+   */
+  status: ApplicationStatus;
+  /**
+   * Current git remote URL, if one is set
+   */
+  gitRemoteUrl?: string;
+  /**
+   * Selected cloud deployment provider, if one is set
+   */
+  cloudDeploymentProvider?: CloudDeploymentProvider;
+};
+export enum OperationLogKind {
+  CloudDeploy = 'CloudDeploy',
+  GitRemoteCreate = 'GitRemoteCreate',
+  RepoSync = 'RepoSync',
+  ApplicationSetup = 'ApplicationSetup',
+}
+export enum OperationLogLevel {
+  Debug = 'Debug',
+  Info = 'Info',
+  Warn = 'Warn',
+  Error = 'Error',
+}
+
+/**
+ * A single timestamped line of progress for a long-running operation
+ */
+export type OperationLogEntry = BaseEntity & {
+  /**
+   * Kind of operation this entry belongs to
+   */
+  operationKind: OperationLogKind;
+  /**
+   * Stable id that scopes the operation — typically the application id
+   */
+  operationId: string;
+  /**
+   * Severity / level of this entry
+   */
+  level: OperationLogLevel;
+  /**
+   * Human-readable single-line message
+   */
+  message: string;
+  /**
+   * Optional structured detail (JSON-serialised) — multi-line stderr, error codes, etc.
+   */
+  detail?: string;
+};
+
+/**
+ * Scoped payload for an OperationLogAppended notification — carries the newly-appended entry so clients can patch their log list in-place without a refetch.
+ */
+export type OperationLogAppendPayload = {
+  /**
+   * The newly-appended operation log entry
+   */
+  entry: OperationLogEntry;
+};
 export enum NotificationEventType {
   AgentStarted = 'agent_started',
   PhaseCompleted = 'phase_completed',
@@ -1684,6 +1778,8 @@ export enum NotificationEventType {
   PrBlocked = 'pr_blocked',
   MergeReviewReady = 'merge_review_ready',
   CloudDeploymentUpdated = 'cloud_deployment_updated',
+  ApplicationUpdated = 'application_updated',
+  OperationLogAppended = 'operation_log_appended',
 }
 export enum NotificationSeverity {
   Info = 'info',
@@ -1728,45 +1824,15 @@ export type NotificationEvent = {
    * When the event occurred
    */
   timestamp: any;
-};
-
-/**
- * A code repository tracked by the Shep platform
- */
-export type Repository = SoftDeletableEntity & {
-  /**
-   * Human-readable name for the repository (typically the directory name)
-   */
-  name: string;
   /**
-   * Absolute file system path to the repository root (unique)
-   */
-  path: string;
-  /**
-   * Remote GitHub URL this repository was cloned from (normalized: lowercase, no .git suffix)
+   * Scoped payload for ApplicationUpdated events — present iff eventType === ApplicationUpdated
    */
-  remoteUrl?: string;
+  applicationUpdate?: ApplicationUpdatePayload;
   /**
-   * Whether this repository was auto-forked by shep because the user lacked push access
-   */
-  isFork?: boolean;
-  /**
-   * Original upstream URL when isFork is true (normalized: lowercase, no .git suffix)
+   * Scoped payload for OperationLogAppended events — present iff eventType === OperationLogAppended
    */
-  upstreamUrl?: string;
+  operationLogAppend?: OperationLogAppendPayload;
 };
-export enum ApplicationStatus {
-  Idle = 'Idle',
-  Active = 'Active',
-  Error = 'Error',
-}
-export enum CloudDeploymentProvider {
-  CloudflarePages = 'CloudflarePages',
-  Vercel = 'Vercel',
-  Netlify = 'Netlify',
-  AwsAmplify = 'AwsAmplify',
-  GcpCloudRun = 'GcpCloudRun',
-}
 export enum CloudDeploymentStatus {
   NotDeployed = 'NotDeployed',
   Building = 'Building',
@@ -1849,6 +1915,32 @@ export type Application = SoftDeletableEntity & {
    */
   lastDeployedAt?: any;
 };
+
+/**
+ * A code repository tracked by the Shep platform
+ */
+export type Repository = SoftDeletableEntity & {
+  /**
+   * Human-readable name for the repository (typically the directory name)
+   */
+  name: string;
+  /**
+   * Absolute file system path to the repository root (unique)
+   */
+  path: string;
+  /**
+   * Remote GitHub URL this repository was cloned from (normalized: lowercase, no .git suffix)
+   */
+  remoteUrl?: string;
+  /**
+   * Whether this repository was auto-forked by shep because the user lacked push access
+   */
+  isFork?: boolean;
+  /**
+   * Original upstream URL when isFork is true (normalized: lowercase, no .git suffix)
+   */
+  upstreamUrl?: string;
+};
 export enum EstimateType {
   None = 'None',
   Category = 'Category',
@@ -2531,43 +2623,6 @@ export type PmAuditLog = BaseEntity & {
    */
   ipAddress?: string;
 };
-export enum OperationLogKind {
-  CloudDeploy = 'CloudDeploy',
-  GitRemoteCreate = 'GitRemoteCreate',
-  RepoSync = 'RepoSync',
-}
-export enum OperationLogLevel {
-  Debug = 'Debug',
-  Info = 'Info',
-  Warn = 'Warn',
-  Error = 'Error',
-}
-
-/**
- * A single timestamped line of progress for a long-running operation
- */
-export type OperationLogEntry = BaseEntity & {
-  /**
-   * Kind of operation this entry belongs to
-   */
-  operationKind: OperationLogKind;
-  /**
-   * Stable id that scopes the operation — typically the application id
-   */
-  operationId: string;
-  /**
-   * Severity / level of this entry
-   */
-  level: OperationLogLevel;
-  /**
-   * Human-readable single-line message
-   */
-  message: string;
-  /**
-   * Optional structured detail (JSON-serialised) — multi-line stderr, error codes, etc.
-   */
-  detail?: string;
-};
 
 /**
  * Single installation suggestion for a tool
diff --git a/packages/core/src/infrastructure/di/modules/register-repositories.ts b/packages/core/src/infrastructure/di/modules/register-repositories.ts
index 447392e44..546a4e9f4 100644
--- a/packages/core/src/infrastructure/di/modules/register-repositories.ts
+++ b/packages/core/src/infrastructure/di/modules/register-repositories.ts
@@ -21,6 +21,7 @@ import { SQLiteInteractiveMessageRepository } from '../../repositories/sqlite-in
 import { SQLiteWorkflowStepRepository } from '../../repositories/sqlite-workflow-step.repository.js';
 import type { IOperationLogRepository } from '../../../application/ports/output/repositories/operation-log.repository.interface.js';
 import { SQLiteOperationLogRepository } from '../../repositories/sqlite-operation-log.repository.js';
+import type { IOperationLogEventBus } from '../../../application/ports/output/services/operation-log-event-bus.interface.js';
 
 // Project management (feature 087) repositories
 import type { IPmProjectRepository } from '../../../application/ports/output/repositories/pm-project-repository.interface.js';
@@ -140,7 +141,8 @@ export function registerRepositories(container: DependencyContainer): void {
   container.register<IOperationLogRepository>('IOperationLogRepository', {
     useFactory: (c) => {
       const database = c.resolve<Database.Database>('Database');
-      return new SQLiteOperationLogRepository(database);
+      const bus = c.resolve<IOperationLogEventBus>('IOperationLogEventBus');
+      return new SQLiteOperationLogRepository(database, bus);
     },
   });
 
diff --git a/packages/core/src/infrastructure/di/modules/register-services.ts b/packages/core/src/infrastructure/di/modules/register-services.ts
index 805bd68d3..4fc3775e4 100644
--- a/packages/core/src/infrastructure/di/modules/register-services.ts
+++ b/packages/core/src/infrastructure/di/modules/register-services.ts
@@ -64,6 +64,8 @@ import type { IProcessLivenessProbe } from '../../../application/ports/output/se
 import { ProcessLivenessAdapter } from '../../services/process/process-liveness.adapter.js';
 import type { IProjectBuildService } from '../../../application/ports/output/services/project-build-service.interface.js';
 import { NodeProjectBuildService } from '../../services/build/node-project-build.service.js';
+import type { IOperationLogEventBus } from '../../../application/ports/output/services/operation-log-event-bus.interface.js';
+import { InMemoryOperationLogEventBus } from '../../services/events/in-memory-operation-log-event-bus.js';
 
 /**
  * Register core infrastructure services: validators, filesystem, git, notifications,
@@ -214,6 +216,13 @@ export function registerServices(container: DependencyContainer): void {
   // place by the time the first use case asks for the service.
   container.registerSingleton<IOperationLogService>('IOperationLogService', OperationLogService);
 
+  // Operation log event bus — SQLite repo publishes here after each
+  // successful append; SSE route subscribes to fan out as notifications.
+  container.registerSingleton<IOperationLogEventBus>(
+    'IOperationLogEventBus',
+    InMemoryOperationLogEventBus
+  );
+
   // Process liveness probe — hides `process.kill(pid, 0)` behind a port so
   // application + presentation layers never import `infrastructure/services/
   // process/is-process-alive` directly.
diff --git a/packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts b/packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts
index 2cf1506d4..faa6ca586 100644
--- a/packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts
+++ b/packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts
@@ -13,6 +13,7 @@ import type {
   AppendOperationLogEntryInput,
   IOperationLogRepository,
 } from '../../application/ports/output/repositories/operation-log.repository.interface.js';
+import type { IOperationLogEventBus } from '../../application/ports/output/services/operation-log-event-bus.interface.js';
 import type {
   OperationLogEntry,
   OperationLogKind,
@@ -45,7 +46,10 @@ function rowToEntry(row: OperationLogRow): OperationLogEntry {
 
 @injectable()
 export class SQLiteOperationLogRepository implements IOperationLogRepository {
-  constructor(private readonly db: Database.Database) {}
+  constructor(
+    private readonly db: Database.Database,
+    private readonly bus: IOperationLogEventBus
+  ) {}
 
   async append(input: AppendOperationLogEntryInput): Promise<OperationLogEntry> {
     const id = randomUUID();
@@ -68,7 +72,7 @@ export class SQLiteOperationLogRepository implements IOperationLogRepository {
         created_at: now,
         updated_at: now,
       });
-    return {
+    const entry: OperationLogEntry = {
       id,
       operationKind: input.operationKind,
       operationId: input.operationId,
@@ -78,6 +82,8 @@ export class SQLiteOperationLogRepository implements IOperationLogRepository {
       createdAt: new Date(now),
       updatedAt: new Date(now),
     };
+    this.bus.publish({ entry });
+    return entry;
   }
 
   async listByScope(
diff --git a/packages/core/src/infrastructure/services/events/in-memory-operation-log-event-bus.ts b/packages/core/src/infrastructure/services/events/in-memory-operation-log-event-bus.ts
new file mode 100644
index 000000000..cd12e1559
--- /dev/null
+++ b/packages/core/src/infrastructure/services/events/in-memory-operation-log-event-bus.ts
@@ -0,0 +1,51 @@
+/**
+ * In-memory operation log event bus.
+ *
+ * Single-process pub/sub backed by node:events. The SQLite operation-log
+ * repository publishes here after a successful INSERT; the SSE route
+ * (StreamAgentEventsUseCase) subscribes and re-emits as notifications.
+ *
+ * A throwing subscriber is logged and swallowed so it never prevents
+ * delivery to the other subscribers — publish() is best-effort fanout.
+ */
+
+import { EventEmitter } from 'node:events';
+import { injectable } from 'tsyringe';
+
+import type {
+  IOperationLogEventBus,
+  OperationLogEvent,
+  OperationLogEventListener,
+} from '../../../application/ports/output/services/operation-log-event-bus.interface.js';
+
+const EVENT_NAME = 'operation-log-appended';
+
+@injectable()
+export class InMemoryOperationLogEventBus implements IOperationLogEventBus {
+  private readonly emitter = new EventEmitter();
+
+  constructor() {
+    // Prevent MaxListenersExceededWarning when many SSE clients subscribe.
+    this.emitter.setMaxListeners(0);
+  }
+
+  publish(event: OperationLogEvent): void {
+    this.emitter.emit(EVENT_NAME, event);
+  }
+
+  subscribe(listener: OperationLogEventListener): () => void {
+    const safeListener: OperationLogEventListener = (event) => {
+      try {
+        listener(event);
+      } catch (error) {
+        // Low-level bus — no logger injected here. A misbehaving
+        // subscriber must not poison the fanout; log to stderr and move
+        // on. The SSE stream and every other subscriber keep working.
+        // eslint-disable-next-line no-console
+        console.error('[OperationLogBus] subscriber threw — continuing fanout', error);
+      }
+    };
+    this.emitter.on(EVENT_NAME, safeListener);
+    return () => this.emitter.off(EVENT_NAME, safeListener);
+  }
+}
diff --git a/packages/core/src/infrastructure/services/notifications/notification.service.ts b/packages/core/src/infrastructure/services/notifications/notification.service.ts
index 42870b766..aa37186e2 100644
--- a/packages/core/src/infrastructure/services/notifications/notification.service.ts
+++ b/packages/core/src/infrastructure/services/notifications/notification.service.ts
@@ -32,6 +32,8 @@ const EVENT_TYPE_TO_CONFIG_KEY: Record<NotificationEventType, keyof Notification
   [NotificationEventType.PrBlocked]: 'prBlocked',
   [NotificationEventType.MergeReviewReady]: 'mergeReviewReady',
   [NotificationEventType.CloudDeploymentUpdated]: 'cloudDeploymentUpdated',
+  [NotificationEventType.ApplicationUpdated]: 'applicationUpdated',
+  [NotificationEventType.OperationLogAppended]: 'operationLogAppended',
 };
 
 export class NotificationService implements INotificationService {
diff --git a/packages/core/src/infrastructure/services/scaffolding/bun-shadcn-scaffolder.service.ts b/packages/core/src/infrastructure/services/scaffolding/bun-shadcn-scaffolder.service.ts
index 3a4c3e9e0..dc4a816c4 100644
--- a/packages/core/src/infrastructure/services/scaffolding/bun-shadcn-scaffolder.service.ts
+++ b/packages/core/src/infrastructure/services/scaffolding/bun-shadcn-scaffolder.service.ts
@@ -74,6 +74,66 @@ import type {
 import { flattenSingleChildProject } from './flatten-subdirectory.js';
 import { applyTemplateOverlay } from './template-overlay.js';
 
+/**
+ * Strip ANSI escape sequences from a byte slice coming out of a child
+ * process. Spinner frames and colour codes clutter the UI log without
+ * adding information — we keep the plain text so the drawer shows the
+ * same content a user would see after stripping their terminal's
+ * rendering.
+ *
+ * This is NOT a general-purpose parser — it only handles the subset of
+ * CSI / OSC / cursor sequences that `bunx`, `bun`, `npm`, and
+ * `create-vite` actually emit.
+ */
+// eslint-disable-next-line no-control-regex
+const ANSI_PATTERN = /\x1B\[[0-?]*[ -/]*[@-~]|\x1B\][^\x07]*\x07|\x1B[@-_]/g;
+
+function stripAnsi(input: string): string {
+  return input.replace(ANSI_PATTERN, '').replace(/\r(?!\n)/g, '');
+}
+
+/**
+ * Buffered line-splitter. Holds the trailing fragment between writes
+ * and flushes each completed line to the caller. Used by `runSpawn` to
+ * turn streaming stdout/stderr bytes into discrete log entries.
+ */
+class LineBuffer {
+  private tail = '';
+  private lastEmitted: string | null = null;
+
+  constructor(private readonly onLine: (line: string) => void) {}
+
+  write(chunk: string): void {
+    const combined = this.tail + chunk;
+    const parts = combined.split(/\r?\n/);
+    this.tail = parts.pop() ?? '';
+    for (const raw of parts) {
+      this.emit(raw);
+    }
+  }
+
+  flush(): void {
+    if (this.tail.length > 0) {
+      this.emit(this.tail);
+      this.tail = '';
+    }
+  }
+
+  /**
+   * Emit a single line, after stripping ANSI and skipping empties /
+   * duplicate spinner frames. Collapsing consecutive duplicates is
+   * what prevents `⠦ Creating a new Vite project…` from spamming the
+   * drawer with hundreds of rows per second.
+   */
+  private emit(raw: string): void {
+    const cleaned = stripAnsi(raw).trimEnd();
+    if (cleaned.length === 0) return;
+    if (cleaned === this.lastEmitted) return;
+    this.lastEmitted = cleaned;
+    this.onLine(cleaned);
+  }
+}
+
 /** Packages the "components" workflow step expects to import. */
 const APP_EXTRA_DEPS = ['react-router-dom', 'react-hook-form', 'zod', 'lucide-react'] as const;
 
@@ -111,10 +171,21 @@ const CACHE_SKIP = new Set(['.git', 'node_modules']);
 @injectable()
 export class BunShadcnScaffolder implements IApplicationScaffolder {
   async scaffold(options: ScaffoldOptions): Promise<ScaffoldResult> {
-    const { repositoryPath } = options;
+    const { repositoryPath, onLog } = options;
+    const emit = (level: 'Info' | 'Warn' | 'Error', message: string, detail?: string): void => {
+      if (!onLog) return;
+      try {
+        onLog({ level, message, detail });
+      } catch {
+        // Sink failures must never abort a successful scaffold.
+      }
+    };
+
+    emit('Info', 'Starting application setup', `Project: ${options.projectName}`);
 
     // Phase 1 — bootstrap bun on first-ever run.
-    this.ensureBunOnPath();
+    emit('Info', 'Checking bun is available');
+    this.ensureBunOnPath(emit);
 
     // Phase 2 — base project files.
     //
@@ -130,6 +201,7 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
     this.emptyDirectory(repositoryPath);
 
     if (this.isCacheValid()) {
+      emit('Info', 'Using cached scaffold', 'Running `bun install --frozen-lockfile`');
       this.copyDirectory(this.getCacheDir(), repositoryPath);
       await this.runSpawn({
         command: 'bun',
@@ -137,10 +209,15 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
         cwd: repositoryPath,
         phase: 'bun install (from scaffold cache)',
         timeoutMs: PHASE_TIMEOUT_MS,
+        onLog: emit,
       });
     } else {
+      emit(
+        'Info',
+        'Scaffolding from scratch',
+        'First-run — running `bunx shadcn@latest init` (this can take a few minutes)'
+      );
       // Run shadcn init in an OS-level scratch directory.
-      // See detailed background comment in git history / original code.
       const scratchDir = mkdtempSync(join(tmpdir(), 'shep-scaffold-'));
       try {
         await this.runSpawn({
@@ -163,6 +240,7 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
           phase: 'shadcn init',
           stdinInput: '\n'.repeat(20),
           timeoutMs: PHASE_TIMEOUT_MS,
+          onLog: emit,
         });
 
         const scaffoldRoot = this.findScaffoldRoot(scratchDir);
@@ -185,17 +263,25 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
 
     // Phase 4 — install the app-specific extras the "components"
     // step will import. Batched into one `bun add` call.
+    emit('Info', 'Installing app dependencies', APP_EXTRA_DEPS.join(', '));
     await this.runSpawn({
       command: 'bun',
       args: ['add', ...APP_EXTRA_DEPS],
       cwd: repositoryPath,
       phase: 'bun add extras',
       timeoutMs: PHASE_TIMEOUT_MS,
+      onLog: emit,
     });
 
     // Phase 5 — overlay the fat template on top of the raw scaffold.
+    emit('Info', 'Applying Shep base template');
     const overlay = applyTemplateOverlay(repositoryPath);
 
+    emit(
+      'Info',
+      'Application setup complete',
+      `${overlay.templateFiles.length} template file(s) applied`
+    );
     return {
       repositoryPath,
       templateFiles: overlay.templateFiles,
@@ -208,9 +294,12 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
    * `npm install -g bun` and verify again. Runs synchronously because
    * the whole scaffold pipeline must block on a working bun.
    */
-  private ensureBunOnPath(): void {
+  private ensureBunOnPath(
+    emit: (level: 'Info' | 'Warn' | 'Error', message: string, detail?: string) => void
+  ): void {
     if (this.hasBun()) return;
 
+    emit('Warn', 'bun not on PATH — installing via `npm install -g bun`');
     // eslint-disable-next-line no-console
     console.log('[bun-shadcn-scaffolder] bun not on PATH — installing via `npm install -g bun`');
     const install = spawnSync('npm', ['install', '-g', 'bun'], {
@@ -231,6 +320,7 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
           'The bun binary may not be on PATH for this shell.'
       );
     }
+    emit('Info', 'bun installed');
   }
 
   /**
@@ -383,12 +473,14 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
   }
 
   /**
-   * Run a command to completion. Stdout and stderr inherit so the
-   * user sees progress in the terminal (for CLI invocations) and the
-   * Shep log (for web-app invocations). When `stdinInput` is set, a
-   * piped stdin is attached and the string is written to it up front,
-   * then closed — used as a safety net for interactive prompts that
-   * slip past `--yes`.
+   * Run a command to completion. Pipes stdout/stderr so progress lines
+   * can be tee'd to both the parent process's stdout/stderr (so the
+   * dev server log still shows live progress) AND to `onLog` (so the
+   * UI's operation-log drawer streams the same content).
+   *
+   * When `stdinInput` is set, a piped stdin is attached and the string
+   * is written to it up front, then closed — used as a safety net for
+   * interactive prompts that slip past `--yes`.
    *
    * When `timeoutMs` is set, the child is killed with SIGKILL (or
    * taskkill on Windows) if it hasn't exited before the deadline.
@@ -405,16 +497,23 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
     phase: string;
     stdinInput?: string;
     timeoutMs?: number;
+    onLog?: (level: 'Info' | 'Warn' | 'Error', message: string, detail?: string) => void;
   }): Promise<void> {
     return new Promise((resolve, reject) => {
       const pipeStdin = args.stdinInput !== undefined;
+      const emit =
+        args.onLog ??
+        ((): void => {
+          /* no-op default when caller does not subscribe to log events */
+        });
+      emit('Info', `▶ ${args.phase}`, `${args.command} ${args.args.join(' ')}`);
+
+      // Always pipe stdout/stderr — we forward the bytes to the parent
+      // process (preserving the live terminal experience) AND also
+      // feed a line buffer that sends each emitted line to the UI log.
       const child = spawn(args.command, args.args, {
         cwd: args.cwd,
-        // When we need to feed stdin, we MUST pipe it — inheriting
-        // from the parent would tie the child to whatever stdin the
-        // Shep process has (usually the dev server's TTY or /dev/null
-        // in production) and the interactive prompt would still hang.
-        stdio: pipeStdin ? ['pipe', 'inherit', 'inherit'] : 'inherit',
+        stdio: [pipeStdin ? 'pipe' : 'ignore', 'pipe', 'pipe'],
         // Windows needs `shell: true` to resolve `.cmd` shims for
         // `bun`, `bunx`, and `npm`. POSIX does not and benefits from
         // direct exec (no argument escaping).
@@ -422,6 +521,21 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
         windowsHide: IS_WINDOWS,
       });
 
+      const stdoutBuf = new LineBuffer((line) => emit('Info', line));
+      const stderrBuf = new LineBuffer((line) => emit('Warn', line));
+      if (child.stdout) {
+        child.stdout.on('data', (chunk: Buffer) => {
+          process.stdout.write(chunk);
+          stdoutBuf.write(chunk.toString('utf8'));
+        });
+      }
+      if (child.stderr) {
+        child.stderr.on('data', (chunk: Buffer) => {
+          process.stderr.write(chunk);
+          stderrBuf.write(chunk.toString('utf8'));
+        });
+      }
+
       // Hard timeout — SIGKILL after `timeoutMs` with no exit event.
       // On Windows `child.kill('SIGKILL')` translates to TerminateProcess
       // via libuv, which is the equivalent of `taskkill /F`.
@@ -455,6 +569,9 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
       }
       child.on('error', (err) => {
         clearTimer();
+        stdoutBuf.flush();
+        stderrBuf.flush();
+        emit('Error', `${args.phase} failed to start`, err.message);
         reject(
           new Error(
             `${args.phase} failed to start: ${err.message}. ` +
@@ -464,7 +581,14 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
       });
       child.on('exit', (code, signal) => {
         clearTimer();
+        stdoutBuf.flush();
+        stderrBuf.flush();
         if (timedOut) {
+          emit(
+            'Error',
+            `${args.phase} timed out`,
+            `Killed after ${args.timeoutMs}ms. Command: ${args.command} ${args.args.join(' ')}`
+          );
           reject(
             new Error(
               `${args.phase} timed out after ${args.timeoutMs}ms and was killed. ` +
@@ -474,8 +598,14 @@ export class BunShadcnScaffolder implements IApplicationScaffolder {
           return;
         }
         if (code === 0) {
+          emit('Info', `✓ ${args.phase} done`);
           resolve();
         } else {
+          emit(
+            'Error',
+            `${args.phase} exited with ${code ?? `signal ${signal}`}`,
+            `Command: ${args.command} ${args.args.join(' ')}`
+          );
           reject(
             new Error(
               `${args.phase} exited with ${code ?? `signal ${signal}`}. ` +
diff --git a/specs/090-application-sse-deltas/contracts/.gitkeep b/specs/090-application-sse-deltas/contracts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/specs/090-application-sse-deltas/data-model.md b/specs/090-application-sse-deltas/data-model.md
new file mode 100644
index 000000000..13a23b939
--- /dev/null
+++ b/specs/090-application-sse-deltas/data-model.md
@@ -0,0 +1,64 @@
+# Data Model: application-sse-deltas
+
+> Entity definitions for 090-application-sse-deltas
+
+## Status
+
+- **Phase:** Planning
+- **Updated:** 2026-04-20
+
+## Overview
+
+{{DATA_MODEL_OVERVIEW}}
+
+## New Entities
+
+### {{ENTITY_NAME}}
+
+**Location:** `tsp/domain/entities/{{entity-name}}.tsp`
+
+| Property      | Type          | Required     | Description   |
+| ------------- | ------------- | ------------ | ------------- |
+| {{PROP_NAME}} | {{PROP_TYPE}} | {{REQUIRED}} | {{PROP_DESC}} |
+
+**Relationships:**
+
+- {{RELATIONSHIP_1}}
+
+## Modified Entities
+
+### {{EXISTING_ENTITY}}
+
+**Changes:**
+
+- Add: {{NEW_PROPERTY}}
+- Modify: {{MODIFIED_PROPERTY}}
+
+## Value Objects
+
+### {{VALUE_OBJECT_NAME}}
+
+**Location:** `tsp/domain/value-objects/{{value-object}}.tsp`
+
+| Property    | Type        | Description |
+| ----------- | ----------- | ----------- |
+| {{VO_PROP}} | {{VO_TYPE}} | {{VO_DESC}} |
+
+## Enums
+
+### {{ENUM_NAME}}
+
+**Location:** `tsp/common/enums/{{enum-name}}.tsp`
+
+| Value          | Description   |
+| -------------- | ------------- |
+| {{ENUM_VALUE}} | {{ENUM_DESC}} |
+
+<!-- If no data model changes, replace all with:
+## Overview
+No domain model changes required for this feature.
+-->
+
+---
+
+_Data model changes for TypeSpec compilation_
diff --git a/specs/090-application-sse-deltas/feature.yaml b/specs/090-application-sse-deltas/feature.yaml
new file mode 100644
index 000000000..e0fe74327
--- /dev/null
+++ b/specs/090-application-sse-deltas/feature.yaml
@@ -0,0 +1,48 @@
+feature:
+  id: '090-application-sse-deltas'
+  name: 'application-sse-deltas'
+  number: 90
+  branch: 'feat/chat-timeline-smart-deploy-ux'
+  lifecycle: 'planning'
+  createdAt: '2026-04-20T11:22:59Z'
+
+status:
+  phase: 'planning'
+  progress:
+    completed: 0
+    total: 12
+    percentage: 0
+  currentTask: null
+  lastUpdated: '2026-04-20T11:22:59Z'
+  lastUpdatedBy: 'shep-kit:new-feature'
+
+validation:
+  lastRun: null
+  gatesPassed: []
+  autoFixesApplied: []
+
+tasks:
+  current: null
+  blocked: []
+  failed: []
+
+checkpoints:
+  - phase: 'feature-created'
+    completedAt: '2026-04-20T11:22:59Z'
+    completedBy: 'shep-kit:new-feature'
+  - phase: 'spec-written'
+    completedAt: '2026-04-20T11:22:59Z'
+    completedBy: 'shep-kit:new-feature'
+  - phase: 'research-written'
+    completedAt: '2026-04-20T11:22:59Z'
+    completedBy: 'shep-kit:new-feature'
+  - phase: 'plan-written'
+    completedAt: '2026-04-20T11:22:59Z'
+    completedBy: 'shep-kit:new-feature'
+  - phase: 'tasks-broken-down'
+    completedAt: '2026-04-20T11:22:59Z'
+    completedBy: 'shep-kit:new-feature'
+
+errors:
+  current: null
+  history: []
diff --git a/specs/090-application-sse-deltas/plan.yaml b/specs/090-application-sse-deltas/plan.yaml
new file mode 100644
index 000000000..b1d67d8f8
--- /dev/null
+++ b/specs/090-application-sse-deltas/plan.yaml
@@ -0,0 +1,269 @@
+# Implementation Plan (YAML)
+# This is the source of truth. Markdown is auto-generated from this file.
+
+name: application-sse-deltas
+summary: Implementation plan for 090-application-sse-deltas
+
+# Relationships
+relatedFeatures:
+  - "089-one-click-cloud-deploy"
+technologies:
+  - TypeScript
+  - TypeSpec
+  - SSE
+  - React Query
+  - tsyringe
+relatedLinks:
+  - title: Cloud deploy event bus (precedent)
+    url: packages/core/src/application/ports/output/services/cloud-deployment-event-bus.interface.ts
+  - title: Stream agent events use-case
+    url: packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
+
+# Structured implementation phases
+phases:
+  - id: phase-1
+    name: "TypeSpec + Codegen (foundation)"
+    parallel: false
+    taskIds:
+      - task-1
+      - task-2
+
+  - id: phase-2
+    name: "OperationLog event bus (port + adapter + repo wiring)"
+    parallel: false
+    taskIds:
+      - task-3
+      - task-4
+      - task-5
+
+  - id: phase-3
+    name: "Application delta helper + cache"
+    parallel: false
+    taskIds:
+      - task-6
+      - task-7
+
+  - id: phase-4
+    name: "StreamAgentEventsUseCase integration"
+    parallel: false
+    taskIds:
+      - task-8
+
+  - id: phase-5
+    name: "Client surgical handlers"
+    parallel: true
+    taskIds:
+      - task-9
+      - task-10
+
+  - id: phase-6
+    name: "Verification"
+    parallel: false
+    taskIds:
+      - task-11
+      - task-12
+
+# File change tracking
+filesToCreate:
+  - packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts
+  - packages/core/src/infrastructure/services/in-memory-operation-log-event-bus.ts
+  - packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts
+  - tests/unit/infrastructure/services/in-memory-operation-log-event-bus.test.ts
+  - tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts
+  - tests/unit/application/use-cases/agents/compute-application-deltas.test.ts
+  - tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts
+  - tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts
+  - tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts
+  - tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.ts
+
+filesToModify:
+  - tsp/common/enums/notification-event.tsp
+  - tsp/common/types/notification-event.tsp
+  - packages/core/src/domain/generated/output.ts
+  - packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
+  - packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts
+  - packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts
+  - packages/core/src/infrastructure/di/modules/register-services.ts
+  - packages/core/src/infrastructure/di/modules/register-repositories.ts
+  - src/presentation/web/components/features/application-page/application-page-loader.tsx
+  - src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
+  - src/presentation/web/hooks/agent-events-provider.tsx
+
+# Open questions (all resolved before implementation)
+openQuestions: []
+
+# Markdown content — architecture, strategy, and risks only.
+# Task-level detail lives in tasks.yaml (no duplication).
+content: |
+  ## Status
+
+  - **Phase:** Planning
+  - **Updated:** 2026-04-20
+
+  ## Architecture Overview
+
+  ```
+  ┌──────────────────────────────────────────────────────────────────┐
+  │  WRITE PATH — DB is source of truth                              │
+  │                                                                  │
+  │  UseCase ── append ──► SqliteOperationLogRepository              │
+  │                                │                                 │
+  │                                ▼ (1) INSERT row                  │
+  │                              SQLite                              │
+  │                                │                                 │
+  │                                ▼ (2) publish AFTER insert        │
+  │                        IOperationLogEventBus                     │
+  │                                                                  │
+  │  CreateApplicationUseCase                                        │
+  │   (setup_complete flip) ──► IApplicationRepository.update        │
+  │                                    │                             │
+  │                                    ▼ INSERT/UPDATE row           │
+  │                                  SQLite  ◄─ polled below         │
+  └──────────────────────────────────────────────────────────────────┘
+                                   │
+                                   ▼
+  ┌──────────────────────────────────────────────────────────────────┐
+  │  READ PATH — SSE stream (single backend poller)                  │
+  │                                                                  │
+  │  StreamAgentEventsUseCase.execute()                              │
+  │   ├─ subscribes to ICloudDeploymentEventBus  (existing)          │
+  │   ├─ subscribes to IOperationLogEventBus     (NEW)               │
+  │   └─ pollOnce() every 2s:                                        │
+  │        ├─ diff Features / Runs / Sessions / PRs  (existing)      │
+  │        └─ diff Applications vs per-connection cache (NEW)        │
+  │                                    │                             │
+  │                                    ▼ yields StreamedAgentEvent   │
+  │                         /api/agent-events SSE route              │
+  │                                    │                             │
+  │                                    ▼ data: <NotificationEvent>   │
+  │                         Service Worker (broadcasts)              │
+  │                                    │                             │
+  │                                    ▼                             │
+  │                       AgentEventsProvider (context)              │
+  │                              │              │                    │
+  │                ┌─────────────┘              └─────────────┐      │
+  │                ▼                                          ▼      │
+  │  useApplicationUpdates(id)                useOperationLogAppends(id)
+  │   └─ patches React Query cache           └─ appends to drawer  │
+  │      on ApplicationUpdated                   on OperationLogAppended
+  └──────────────────────────────────────────────────────────────────┘
+  ```
+
+  ## Implementation Strategy
+
+  **MANDATORY TDD**: Every task that ships executable code follows
+  RED → GREEN → REFACTOR. Doc / wiring tasks (TypeSpec, DI binding)
+  have `tdd: null` and are verified by downstream feature tests.
+
+  **Phase ordering** is driven by the dependency graph:
+
+  1. **TypeSpec + codegen first** — the enum values and payload
+     shapes anchor everything downstream. Codegen output must be
+     committed so the rest of the feature compiles.
+  2. **OperationLog bus before Application deltas** — the bus is
+     reusable, self-contained, and easy to test in isolation; landing
+     it first gives the Application-delta work a known-good reference
+     pattern (it mirrors the cloud-deploy bus).
+  3. **Delta helper before use-case wiring** — the pure helper can
+     be fully unit-tested without pulling in the StreamAgentEvents
+     orchestrator; wiring comes once both inputs (bus + helper) are
+     green.
+  4. **Client handlers last** — presentation can only land safely
+     once the typed events are flowing through SSE with real data.
+  5. **Verification** — run the full suite, storybook, and a manual
+     end-to-end smoke through the fresh-app creation flow.
+
+  **DB-first invariant**: the OperationLogEventBus is published to
+  ONLY after the repository's INSERT returns success. We never emit
+  an event for a row that wasn't committed — if the DB write throws,
+  no event fires. This preserves the "DB is source of truth, SSE is
+  a hint" guarantee.
+
+  **Connection-scoped cache**: the Application cache lives in
+  `StreamAgentEventsUseCase.execute()` just like the feature /
+  session caches. Each SSE connection seeds its own cache on first
+  poll and emits no seed events. This matches the existing behavior
+  and is critical for reconnect / Service Worker restart scenarios.
+
+  ## Files to Create/Modify
+
+  ### New Files
+
+  | File | Purpose |
+  | ---- | ------- |
+  | `packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts` | Port interface (mirrors `ICloudDeploymentEventBus`) |
+  | `packages/core/src/infrastructure/services/in-memory-operation-log-event-bus.ts` | In-process pub/sub adapter |
+  | `packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts` | Pure helper diffing app rows → events |
+  | `tests/unit/infrastructure/services/in-memory-operation-log-event-bus.test.ts` | Unit tests for the bus |
+  | `tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts` | Verify publish-after-insert |
+  | `tests/unit/application/use-cases/agents/compute-application-deltas.test.ts` | Unit tests for the delta helper |
+  | `tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts` | Use-case integration: app deltas flow through |
+  | `tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts` | Use-case integration: bus events flow through |
+  | `tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts` | Loader patches query data on event |
+  | `tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.ts` | Drawer appends on event |
+
+  ### Modified Files
+
+  | File | Changes |
+  | ---- | ------- |
+  | `tsp/common/enums/notification-event.tsp` | Add `ApplicationUpdated` + `OperationLogAppended` enum values |
+  | `tsp/common/types/notification-event.tsp` | Add optional `applicationUpdate` + `operationLogAppend` payload models |
+  | `packages/core/src/domain/generated/output.ts` | Regenerated via `pnpm tsp:compile` |
+  | `packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts` | Inject `IApplicationRepository` + `IOperationLogEventBus`; add application cache / subscribe |
+  | `packages/core/src/application/use-cases/agents/stream-agent-events/stream-agent-events.types.ts` | Add `CachedApplicationState` type |
+  | `packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts` | Inject bus; publish after insert |
+  | `packages/core/src/infrastructure/di/modules/register-services.ts` | Register bus singleton |
+  | `packages/core/src/infrastructure/di/modules/register-repositories.ts` | Inject bus into repo |
+  | `src/presentation/web/components/features/application-page/application-page-loader.tsx` | Replace coarse invalidate with typed patch handler |
+  | `src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx` | Replace coarse refresh with append-on-event handler |
+  | `src/presentation/web/hooks/agent-events-provider.tsx` | Expose typed selectors: `useApplicationUpdates(id)`, `useOperationLogAppends(id)` |
+
+  ## Testing Strategy (TDD: Tests FIRST)
+
+  **CRITICAL:** Every RED phase lands a failing test before the GREEN
+  implementation. Each task lists explicit RED → GREEN → REFACTOR steps.
+
+  ### Unit Tests (RED → GREEN → REFACTOR)
+
+  - **`InMemoryOperationLogEventBus`** — publish-subscribe; multiple
+    subscribers; unsubscribe idempotency; publish never throws when
+    a subscriber throws (we catch + log).
+  - **`SqliteOperationLogRepository.append`** — with a spy bus,
+    assert `publish` is called EXACTLY once, AFTER the row is visible
+    via `listByScope`. Throwing bus must NOT roll back the insert.
+  - **`computeApplicationDeltas`** — no prev → no event (seed-only);
+    setup_complete false → true emits `ApplicationUpdated` with correct
+    payload; status Idle → Error emits; unchanged row emits nothing.
+  - **`StreamAgentEventsUseCase`** — with a fake bus, publishing an
+    OperationLog entry mid-stream enqueues a notification event that
+    the `for await` consumer observes. Application row change between
+    polls emits `ApplicationUpdated` on the next yield.
+  - **`ApplicationPageLoader` event handler** — given a queryClient
+    holding `{application: {setupComplete: false, ...}}` and an
+    `ApplicationUpdated` event arrives, the cache transitions to
+    `setupComplete: true` WITHOUT an HTTP request.
+  - **`SmartDeployLogsDrawer` event handler** — given empty entries
+    and an `OperationLogAppended` for the drawer's applicationId,
+    the entry is appended in place at the correct chronological
+    position; duplicate events (same entryId) are deduped.
+
+  ### Integration Tests
+
+  - Covered by existing integration suites after wiring — no new
+    bespoke integration files are required. The SQLite repo test
+    above doubles as an integration test using `:memory:` DB.
+
+  ## Risk Mitigation
+
+  | Risk | Mitigation |
+  | ---- | ---------- |
+  | Event bus throws inside SSE generator (e.g., subscriber code bug) poisons the stream | `InMemoryOperationLogEventBus.publish` wraps each subscriber in try/catch; logger.error on throw; main stream never sees the exception |
+  | Client missed events on SW restart / reconnect leave stale cache | Seed-on-reconnect in the use-case emits no events; client's next read (staleTime expiry or manual open) refetches the full row |
+  | TypeSpec codegen change breaks unrelated generated types | Commit generated output file alongside tsp change; typecheck gate catches any downstream break before merge |
+  | Repo's publish-after-insert is skipped if insert throws | Intentional — publish sits AFTER the INSERT return; on throw we never reach it. DB is source of truth. |
+  | New Application poll adds DB load | `findAll` on `applications` is cheap (tens of rows max in practice), same cadence as feature poll (2s) |
+  | Two feature branches (this + other pending work) modify TypeSpec concurrently | Regenerate after rebase; `pnpm tsp:compile` is deterministic |
+
+  ---
+
+  _Updated by `/shep-kit:plan` — see tasks.yaml for detailed task breakdown_
diff --git a/specs/090-application-sse-deltas/research.yaml b/specs/090-application-sse-deltas/research.yaml
new file mode 100644
index 000000000..f3124f11a
--- /dev/null
+++ b/specs/090-application-sse-deltas/research.yaml
@@ -0,0 +1,200 @@
+# Research Artifact (YAML)
+# This is the source of truth. Markdown is auto-generated from this file.
+
+name: application-sse-deltas
+summary: Technical analysis for 090-application-sse-deltas
+
+# Relationships
+relatedFeatures:
+  - "089-one-click-cloud-deploy"
+technologies:
+  - TypeScript
+  - TypeSpec
+  - SSE
+  - tsyringe
+  - Better-sqlite3
+relatedLinks:
+  - title: Cloud deploy event bus precedent
+    url: packages/core/src/application/ports/output/services/cloud-deployment-event-bus.interface.ts
+  - title: StreamAgentEventsUseCase
+    url: packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
+
+# Structured technology decisions
+decisions:
+  - title: "Event transport: existing shared SSE vs dedicated per-application channel"
+    chosen: "Existing shared /api/agent-events SSE"
+    rejected:
+      - "New /api/applications/:id/updates/stream route"
+      - "WebSocket"
+      - "Long-polling"
+    rationale: >
+      The existing channel already runs through the Service Worker
+      multiplexer (one connection, all tabs), backs off exponentially
+      on reconnect, and is served by an orchestrator (StreamAgentEventsUseCase)
+      that already polls the DB. Adding two new NotificationEventType
+      values costs nothing incremental on the transport layer. A
+      per-application stream would double connection count and duplicate
+      the poll / subscribe lifecycle without a concrete benefit.
+      WebSocket is overkill for one-way server → client signals. Long
+      polling is strictly worse than SSE here.
+
+  - title: "Operation log delivery: poll-based vs in-process event bus"
+    chosen: "In-process event bus (publish on INSERT)"
+    rejected:
+      - "Add operation_log_entries to the 2s poll loop"
+      - "Database NOTIFY / LISTEN (not available in SQLite)"
+    rationale: >
+      Operation log writes happen synchronously in-process (scaffolder
+      stdout, cloud deploy lifecycle, git publish). Publishing after a
+      successful INSERT delivers events immediately — no 2s lag, no
+      "since-cursor" bookkeeping per connection, no N×scopes DB query
+      per tick. Matches the cloud-deploy event bus exactly, which is
+      already working in production. SQLite has no NOTIFY, so the
+      event bus stands in for it. If we ever fan out to multiple
+      processes, we swap the in-memory adapter for a Redis / BroadcastChannel
+      adapter without touching the port.
+
+  - title: "Application row delivery: poll-based vs event bus"
+    chosen: "Poll-based, integrated into StreamAgentEventsUseCase"
+    rejected:
+      - "New IApplicationEventBus"
+      - "Dual: poll + bus"
+    rationale: >
+      Application mutations happen from multiple call sites
+      (CreateApplicationUseCase, scaffolder completion, status
+      updaters) and a bus would require plumbing every writer to the
+      bus. The existing use-case already polls every 2s for features
+      and sessions; adding applications to the same tick is near-zero
+      cost (findAll on applications is small and cached by SQLite).
+      This keeps the write path ergonomics unchanged — any existing
+      repo caller continues to "just update the row" without needing
+      to know about events.
+
+  - title: "Client state management: invalidate-and-refetch vs patch-in-place"
+    chosen: "Patch-in-place (setQueryData / local state merge)"
+    rejected:
+      - "queryClient.invalidateQueries"
+      - "router.refresh()"
+    rationale: >
+      The SSE event payload already carries the new field values, so
+      a refetch is strictly redundant work. Patching React Query
+      directly with setQueryData flips the observable state in the
+      same tick the event arrives, and it costs zero network. If the
+      client ever wants a safety-net refetch (suspicious staleness),
+      it can still call invalidateQueries on demand — but as a hand
+      rail, not the happy path.
+
+  - title: "Seed behavior on SSE (re)connect"
+    chosen: "Connection-scoped cache, zero events on seed"
+    rejected:
+      - "Emit a full snapshot on connect"
+    rationale: >
+      Matches the existing feature / session seed behavior. Prevents a
+      burst of 'ApplicationUpdated' events every time a tab opens
+      that would force the client to re-render every application card.
+      The client already knows the current state because the route
+      hydrated it via /api/applications/:id; SSE only needs to
+      communicate DELTAS.
+
+# Open questions (all resolved)
+openQuestions: []
+
+# Markdown content (the full research document)
+content: |
+  ## Status
+
+  - **Phase:** Research
+  - **Updated:** 2026-04-20
+
+  ## Technology Decisions
+
+  ### Event transport
+
+  **Decision:** piggyback on the existing `/api/agent-events` SSE.
+
+  **Rationale:** one connection through the Service Worker already
+  multiplexes to every tab with exponential backoff; the orchestrator
+  that serves the route (`StreamAgentEventsUseCase`) already polls the
+  DB on a 2s cadence. Adding two new `NotificationEventType` values
+  costs nothing on the wire — we'd be dropping a typed message into an
+  already-flowing stream. A per-application route would double the
+  connection count and duplicate the whole subscribe / reconnect
+  lifecycle for no concrete benefit.
+
+  ### Operation log delivery — bus vs poll
+
+  **Decision:** in-process `IOperationLogEventBus`, publishing after a
+  successful INSERT in `SqliteOperationLogRepository.append`.
+
+  **Rationale:** writes are synchronous in-process (scaffolder stdout,
+  deploy lifecycle, git publish). Publishing after INSERT delivers
+  events in the same ms, not on the next 2s tick. No per-connection
+  "since cursor" bookkeeping, no N × scope SQL per tick. Mirrors the
+  existing `ICloudDeploymentEventBus` exactly, so the wiring is a
+  copy-paste shape. If we go multi-process later, the port lets us
+  swap the adapter (Redis, BroadcastChannel) without touching callers.
+
+  ### Application row delivery — bus vs poll
+
+  **Decision:** add application row diffing to the existing
+  `StreamAgentEventsUseCase.pollOnce()` loop.
+
+  **Rationale:** application mutations come from several call sites
+  (`CreateApplicationUseCase`, scaffolder completion, status
+  updaters). A bus would require plumbing every writer. Piggybacking
+  on the existing 2s poll costs a single `findAll` on an already-small
+  table and leaves the write ergonomics untouched.
+
+  ### Client state management
+
+  **Decision:** patch-in-place via `setQueryData` / local state
+  merge. Refetching on SSE receipt is rejected.
+
+  **Rationale:** the payload already carries the new values. A
+  refetch is redundant network work and adds a flash of "stale, then
+  fresh" on slow connections. Invalidate stays available as a
+  hand-rail for edge cases (suspicious staleness, e2e tests) but is
+  not the happy path.
+
+  ### Seed on (re)connect
+
+  **Decision:** per-connection cache seeds silently; emits no events
+  on first poll.
+
+  **Rationale:** matches features / sessions behavior. Prevents an
+  event storm on every tab open / Service Worker restart. The client
+  already has authoritative initial state from the `/api/applications/:id`
+  hydration route; SSE communicates DELTAS only.
+
+  ## Security Considerations
+
+  - Same surface as the existing agent-events stream — no new auth /
+    origin exposure.
+  - `OperationLogEntry.detail` may contain user-provided or tool-output
+    text; the drawer already renders it safely via React text children
+    inside a whitespace-preserving `<pre>` (no raw-HTML injection
+    paths).
+  - Event bus publishes happen only after authenticated writes; no new
+    trust boundary.
+
+  ## Performance Implications
+
+  - One extra `findAll` on `applications` per 2s poll tick. Applications
+    table is small in practice (O(10s) of rows); the diff is O(n)
+    field compares. Negligible.
+  - Event bus publishes are O(subscribers); web has one subscriber
+    per connected client, CLI / TUI optionally subscribe. No change
+    in write throughput.
+  - Client handlers are O(1) per incoming event — a single
+    `setQueryData` or `setState` call.
+  - Net effect: eliminates one client `setInterval(1500ms)` that was
+    firing three HTTP requests per tick, and one per-app React Query
+    `refetchInterval(2000ms)`. Net request count drops.
+
+  ## Open Questions
+
+  All questions resolved.
+
+  ---
+
+  _Updated by `/shep-kit:research` — proceed with `/shep-kit:plan`_
diff --git a/specs/090-application-sse-deltas/spec.yaml b/specs/090-application-sse-deltas/spec.yaml
new file mode 100644
index 000000000..cb017196c
--- /dev/null
+++ b/specs/090-application-sse-deltas/spec.yaml
@@ -0,0 +1,142 @@
+# Feature Specification (YAML)
+# This is the source of truth. Markdown is auto-generated from this file.
+
+name: application-sse-deltas
+number: 090
+branch: feat/chat-timeline-smart-deploy-ux
+oneLiner: Backend-owned SSE for Application + OperationLog deltas — zero client polling
+summary: >
+  Eliminate the last client-side polling paths in the web UI by emitting
+  dedicated SSE events for Application row changes and OperationLog
+  appends. The backend remains the sole poller (StreamAgentEventsUseCase
+  already runs a 2s poll) and a new in-process event bus publishes
+  OperationLog append events synchronously as rows are inserted. Clients
+  (ApplicationPageLoader, SmartDeployLogsDrawer) stop refetching on
+  coarse "any SSE event" signals and instead patch their local state
+  directly from typed, applicationId-scoped deltas. DB remains the
+  source of truth; SSE is a hint — if the client misses an event it
+  still reads the correct state on next load.
+phase: Requirements
+sizeEstimate: L
+
+# Relationships
+relatedFeatures:
+  - "089-one-click-cloud-deploy"
+
+technologies:
+  - TypeScript
+  - TypeSpec
+  - Server-Sent Events (SSE)
+  - React Query (TanStack Query)
+  - tsyringe DI
+  - Better-sqlite3
+
+relatedLinks:
+  - title: Existing SSE route
+    url: src/presentation/web/app/api/agent-events/route.ts
+  - title: StreamAgentEventsUseCase
+    url: packages/core/src/application/use-cases/agents/stream-agent-events.use-case.ts
+  - title: Cloud deploy event bus pattern (precedent)
+    url: packages/core/src/application/ports/output/services/cloud-deployment-event-bus.interface.ts
+
+# Open questions (must be resolved before implementation)
+openQuestions: []
+
+# Markdown content (the actual spec)
+content: |
+  ## Problem Statement
+
+  The web UI has two remaining client-side polling paths that violate
+  the project's "backend polls, frontend subscribes to SSE" rule:
+
+  1. `ApplicationPageLoader` used a React Query `refetchInterval: 2_000`
+     to poll `/api/applications/:id` until `setup_complete` flipped. This
+     was hastily replaced with a coarse "invalidate on any SSE event"
+     fallback that works today only because unrelated feature / session
+     transitions happen to fire during the scaffold window.
+  2. `SmartDeployLogsDrawer` ran a `setInterval(1500ms)` refetch of
+     `/api/operations/:kind/:id/logs` while any Smart Deploy op was
+     live. It now also piggybacks on the "invalidate on any SSE event"
+     hack, which still costs N HTTP round-trips per backend poll tick.
+
+  Both are brittle: if no ambient SSE event fires during the window of
+  interest, the UI sits stale. Neither has a dedicated, typed backend
+  signal for the state change it cares about. The backend also has no
+  visibility into append deltas for `operation_log_entries` — it only
+  polls features / runs / sessions / PRs.
+
+  This feature closes the gap: the backend becomes the sole poller AND
+  the authoritative event source for every user-visible state change in
+  the Application surface, and clients consume typed deltas with
+  surgical handlers (no invalidate-and-refetch).
+
+  ## Success Criteria
+
+  - [ ] Zero `setInterval` / React Query `refetchInterval` calls in
+        `src/presentation/web/components/features/application-page/`
+        or anywhere they could fire an `/api/…` request on a client
+        timer.
+  - [ ] `NotificationEventType` gains two values: `ApplicationUpdated`
+        and `OperationLogAppended`, defined in TypeSpec and surfaced
+        through `pnpm tsp:compile`.
+  - [ ] `NotificationEvent` payload carries optional `applicationUpdate`
+        and `operationLogAppend` fields with typed, minimal shapes.
+  - [ ] `IOperationLogEventBus` port + in-memory adapter exist and are
+        wired through the DI container, mirroring
+        `ICloudDeploymentEventBus` exactly.
+  - [ ] `SqliteOperationLogRepository.append()` publishes to the bus
+        AFTER a successful DB insert (DB is source of truth — never
+        emit an event for a row that wasn't persisted).
+  - [ ] `StreamAgentEventsUseCase` subscribes to the OperationLog bus
+        (synchronous, same queue as cloud-deploy bus) and its poll loop
+        diffs `applications` rows against a per-connection cache,
+        emitting `ApplicationUpdated` on `setupComplete`, `status`,
+        `gitRemoteUrl`, or `cloudDeploymentProvider` change.
+  - [ ] Per-connection cache seeds on first sight → no burst of
+        "current state" events on reconnect (matches feature / session
+        seed behavior).
+  - [ ] `ApplicationPageLoader` uses a dedicated handler that selects
+        `ApplicationUpdated` events for its applicationId and PATCHES
+        React Query data directly — no HTTP refetch on SSE receipt.
+  - [ ] `SmartDeployLogsDrawer` uses a dedicated handler that appends
+        `OperationLogAppended` entries for its applicationId directly
+        to local state. Initial drawer open still does ONE hydration
+        fetch; after that, SSE is the only driver.
+  - [ ] Robustness: missing an event is never fatal. On reconnect the
+        seed step re-reads authoritative state; on tab return the
+        already-correct state stays correct; stale caches are bounded
+        by `staleTime`.
+  - [ ] Test coverage: new unit tests for the delta helper, the bus
+        publish path, the repo's publish-on-append, and the client
+        handlers. All existing tests continue to pass.
+
+  ## Affected Areas
+
+  | Area | Impact | Reasoning |
+  | ---- | ------ | --------- |
+  | `tsp/` (TypeSpec) | Medium | New `NotificationEventType` values + `NotificationEvent` optional payloads |
+  | `packages/core/src/application/ports/output/services/` | Medium | New `IOperationLogEventBus` port |
+  | `packages/core/src/application/use-cases/agents/stream-agent-events/` | High | New `computeApplicationDeltas` helper + cache; use-case subscribes to new bus |
+  | `packages/core/src/infrastructure/services/` | Medium | New in-memory `OperationLogEventBus` adapter |
+  | `packages/core/src/infrastructure/repositories/sqlite-operation-log.repository.ts` | Medium | Publishes on append |
+  | `packages/core/src/infrastructure/di/` | Low | Bind new port / adapter |
+  | `src/presentation/web/components/features/application-page/application-page-loader.tsx` | Medium | Replace coarse invalidate with typed handler |
+  | `src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx` | Medium | Replace coarse refresh with append-on-event |
+  | `tests/unit/**` | Medium | New test coverage per port / use-case / handler |
+
+  ## Dependencies
+
+  - 089-one-click-cloud-deploy (established the cloud-deploy event bus
+    pattern this feature mirrors; same DI wiring model).
+
+  ## Size Estimate
+
+  **L** — Touches TypeSpec + codegen, adds a new port + adapter,
+  extends a hot-path use case with new cache + delta logic, rewires
+  two client components, and adds ~6 new test files. Bounded by the
+  precedent set by the cloud-deploy event bus, which makes the shape
+  of the bus + DI + SSE wiring very predictable.
+
+  ---
+
+  _Generated by `/shep-kit:new-feature` — proceed with `/shep-kit:research`_
diff --git a/specs/090-application-sse-deltas/tasks.yaml b/specs/090-application-sse-deltas/tasks.yaml
new file mode 100644
index 000000000..e9c29ffa7
--- /dev/null
+++ b/specs/090-application-sse-deltas/tasks.yaml
@@ -0,0 +1,308 @@
+# Task Breakdown (YAML)
+# This is the source of truth. Markdown is auto-generated from this file.
+
+name: application-sse-deltas
+summary: Task breakdown for 090-application-sse-deltas
+
+# Relationships
+relatedFeatures:
+  - "089-one-click-cloud-deploy"
+technologies:
+  - TypeScript
+  - TypeSpec
+  - SSE
+  - React Query
+relatedLinks: []
+
+# Structured task list — this is the single source of truth for tasks.
+# The content field below is a summary only; it does NOT duplicate task details.
+tasks:
+  - id: task-1
+    title: "Extend TypeSpec: NotificationEventType + NotificationEvent payloads"
+    description: >
+      Add two enum values (`ApplicationUpdated`, `OperationLogAppended`)
+      to `NotificationEventType` and add two optional payload models
+      (`applicationUpdate`, `operationLogAppend`) to `NotificationEvent`
+      in `tsp/common/enums/notification-event.tsp` and
+      `tsp/common/types/notification-event.tsp`. Keep fields minimal —
+      only what the client actually renders / patches.
+    state: Todo
+    dependencies: []
+    acceptanceCriteria:
+      - "Enum values land in `packages/core/src/domain/generated/output.ts`"
+      - "`NotificationEvent` type exposes optional `applicationUpdate` and `operationLogAppend` fields with the right shapes"
+      - "`pnpm tsp:compile` succeeds"
+    tdd: null
+    estimatedEffort: S
+
+  - id: task-2
+    title: "Run `pnpm tsp:compile` and commit generated output"
+    description: >
+      Run the codegen, verify the diff only touches generated files,
+      and confirm typecheck still passes across the monorepo.
+    state: Todo
+    dependencies:
+      - task-1
+    acceptanceCriteria:
+      - "`packages/core/src/domain/generated/output.ts` contains the new enum + fields"
+      - "`pnpm typecheck` passes clean"
+    tdd: null
+    estimatedEffort: XS
+
+  - id: task-3
+    title: "Add `IOperationLogEventBus` port"
+    description: >
+      Create `packages/core/src/application/ports/output/services/operation-log-event-bus.interface.ts`
+      mirroring `ICloudDeploymentEventBus`: a `subscribe(cb) => unsubscribe`
+      method and a `publish(event)` method. The event shape references
+      the generated `OperationLogEntry` so no duplication.
+    state: Todo
+    dependencies:
+      - task-2
+    acceptanceCriteria:
+      - "Port file exists with JSDoc"
+      - "Event shape uses `OperationLogEntry` from generated output"
+      - "No implementation leaks (interface-only in the application layer)"
+    tdd: null
+    estimatedEffort: XS
+
+  - id: task-4
+    title: "Implement `InMemoryOperationLogEventBus` adapter (TDD)"
+    description: >
+      In-process pub/sub adapter under `packages/core/src/infrastructure/services/`.
+      `publish` must isolate subscriber failures (try/catch + logger.error)
+      so one broken subscriber cannot poison the SSE stream. `subscribe`
+      returns an idempotent unsubscribe function.
+    state: Todo
+    dependencies:
+      - task-3
+    acceptanceCriteria:
+      - "Multiple subscribers all receive each published event"
+      - "Unsubscribe stops delivery; calling unsubscribe twice is a no-op"
+      - "A throwing subscriber is logged but does NOT stop other subscribers from receiving the event"
+    tdd:
+      red:
+        - Write `in-memory-operation-log-event-bus.test.ts` covering basic publish-subscribe, multi-subscriber fanout, unsubscribe idempotency, and throwing-subscriber isolation
+      green:
+        - Implement the adapter with a `Set<Subscriber>` and a `publish` loop wrapping each callback in try/catch
+      refactor:
+        - Pull the subscriber shape into a small type alias; ensure `@injectable()` decoration + DI token
+    estimatedEffort: S
+
+  - id: task-5
+    title: "Publish from `SqliteOperationLogRepository.append` (TDD)"
+    description: >
+      Inject `IOperationLogEventBus` into the SQLite operation-log
+      repository and publish AFTER a successful row insert. Must not
+      publish when the insert throws (DB is source of truth).
+    state: Todo
+    dependencies:
+      - task-4
+    acceptanceCriteria:
+      - "After `append`, a spy bus sees exactly one `publish` call with the inserted entry"
+      - "If the INSERT throws, the bus is NOT called"
+      - "Publish happens AFTER insert — verified by ordering assertion (row is visible via listByScope before publish payload observed)"
+    tdd:
+      red:
+        - Write `sqlite-operation-log-repository-publish.test.ts` using an in-memory DB + spy bus; initially the test fails because the repo never publishes
+      green:
+        - Add bus injection + `this.bus.publish(entry)` after the INSERT returns
+      refactor:
+        - Confirm DI wiring in `register-repositories.ts` still satisfies the constructor signature
+    estimatedEffort: S
+
+  - id: task-6
+    title: "Pure `computeApplicationDeltas` helper (TDD)"
+    description: >
+      New pure function under
+      `packages/core/src/application/use-cases/agents/stream-agent-events/compute-application-deltas.ts`.
+      Inputs: current `Application` row + cached prior state (or null).
+      Output: zero or one `StreamedAgentEvent` with kind `notification`
+      and `eventType: ApplicationUpdated`. Emits when any of
+      `setupComplete`, `status`, `gitRemoteUrl`,
+      `cloudDeploymentProvider` differ from the cached snapshot.
+    state: Todo
+    dependencies:
+      - task-2
+    acceptanceCriteria:
+      - "No prev → zero events (seed-only case)"
+      - "Single field change → exactly one event with the correct payload"
+      - "Multiple concurrent changes → a single event carrying the full updated payload"
+      - "Unchanged row → zero events"
+    tdd:
+      red:
+        - Write `compute-application-deltas.test.ts` with a matrix of (prev, next) pairs covering the seed, single-field-change, multi-field-change, and no-change cases
+      green:
+        - Implement the diff as a short pure function returning `StreamedAgentEvent[]`
+      refactor:
+        - Extract field-list constant; ensure no hidden allocations in the no-change path
+    estimatedEffort: S
+
+  - id: task-7
+    title: "Add `CachedApplicationState` to stream-agent-events types"
+    description: >
+      Extend `stream-agent-events.types.ts` with a new `CachedApplicationState`
+      type capturing the fields the delta helper watches. No behavior
+      change — purely a shared type surface.
+    state: Todo
+    dependencies:
+      - task-6
+    acceptanceCriteria:
+      - "`CachedApplicationState` exported and imported by both the helper and the use-case"
+      - "Typecheck clean"
+    tdd: null
+    estimatedEffort: XS
+
+  - id: task-8
+    title: "Wire app-deltas + bus subscription into StreamAgentEventsUseCase"
+    description: >
+      Inject `IApplicationRepository` and `IOperationLogEventBus`.
+      Maintain a per-connection `Map<applicationId, CachedApplicationState>`.
+      On each poll, `appRepo.findAll()` → call `computeApplicationDeltas`
+      per app → enqueue events. Subscribe to the OperationLog bus in
+      `execute()` and re-emit each published event as a notification.
+      Seed behavior must match features / sessions (no events on first
+      sight). Unsubscribe on generator cleanup.
+    state: Todo
+    dependencies:
+      - task-4
+      - task-6
+      - task-7
+    acceptanceCriteria:
+      - "First poll seeds the application cache and emits zero events"
+      - "Second poll with a changed application emits one `ApplicationUpdated` event"
+      - "Publishing to the OperationLog bus enqueues a notification observable by the `for await` consumer within one tick"
+      - "Generator cleanup unsubscribes from BOTH buses"
+    tdd:
+      red:
+        - Write `stream-agent-events-application.test.ts` and `stream-agent-events-operation-log-bus.test.ts` with fake repos / fake buses; assert the event sequence observed from `for await of useCase.execute(...)`
+      green:
+        - Add injections, cache, subscription, and diff loop in `pollOnce` + `execute`
+      refactor:
+        - Keep subscription lifecycle symmetric with the existing cloud-deploy subscription; add a single `unsubscribeAll()` helper if it reduces duplication
+    estimatedEffort: M
+
+  - id: task-9
+    title: "Client: `ApplicationPageLoader` surgical handler (TDD)"
+    description: >
+      Replace the "invalidate on any SSE event" effect with a typed
+      handler that selects `NotificationEventType === 'application_updated'`
+      for this page's applicationId and patches the React Query
+      cache in place — no HTTP round-trip. Add a
+      `useApplicationUpdates(applicationId)` hook in
+      `hooks/agent-events-provider.tsx` that exposes the latest
+      matching event; the loader consumes it in `useEffect`.
+    state: Todo
+    dependencies:
+      - task-8
+    acceptanceCriteria:
+      - "No `refetchInterval`, no `setInterval`, no `invalidateQueries` call in the loader"
+      - "Given a seeded query cache + a matching event, cache transitions to the new state without any network call"
+      - "Events for other applicationIds are ignored"
+    tdd:
+      red:
+        - "Write `application-page-loader-patch.test.ts`: mount the loader with a QueryClient holding `setupComplete: false`; dispatch a mock event through the provider; assert cache reads `setupComplete: true` and no `fetch` spy was called"
+      green:
+        - "Swap the coarse effect for the typed one; add the selector hook to the provider"
+      refactor:
+        - "Confirm Storybook story still works via `useOptionalAgentEventsContext`"
+    estimatedEffort: S
+
+  - id: task-10
+    title: "Client: `SmartDeployLogsDrawer` surgical handler (TDD)"
+    description: >
+      Replace the coarse "refresh on any SSE event" effect with a typed
+      handler that selects `OperationLogAppended` events for this
+      drawer's applicationId and appends them to local state in place.
+      Initial hydration fetch on open remains. Add a
+      `useOperationLogAppends(applicationId)` selector hook alongside
+      the Application one. Dedup by `entry.id` in case the bus and the
+      hydration fetch race.
+    state: Todo
+    dependencies:
+      - task-8
+    acceptanceCriteria:
+      - "No `setInterval` anywhere in the drawer"
+      - "Matching event appends to `entries` in correct chronological position"
+      - "Duplicate event (same `entry.id`) does not double-add"
+      - "Non-matching applicationId is ignored"
+    tdd:
+      red:
+        - Write `smart-deploy-logs-drawer-append.test.ts`: mount the drawer with mocked hydration fetch + provider; dispatch events; assert the rendered list grows and deduplicates correctly
+      green:
+        - Implement the selector hook + drawer effect
+      refactor:
+        - Ensure the existing "auto-scroll while running" logic keeps working
+    estimatedEffort: S
+
+  - id: task-11
+    title: "Full verification: lint / typecheck / tests / storybook"
+    description: >
+      Run the local CI gates in order and fix anything that breaks.
+      No "unrelated failure" hand-waving — every failure is owned.
+    state: Todo
+    dependencies:
+      - task-9
+      - task-10
+    acceptanceCriteria:
+      - "`pnpm lint` passes clean"
+      - "`pnpm typecheck` passes clean"
+      - "`pnpm test:unit` passes clean"
+      - "`pnpm test:int` passes clean"
+      - "`pnpm build:storybook` passes clean"
+    tdd: null
+    estimatedEffort: S
+
+  - id: task-12
+    title: "Manual smoke: fresh app creation end-to-end"
+    description: >
+      Start the dev server, create a fresh application, observe (a)
+      the `ApplicationUpdated` event in devtools / network SSE tab,
+      (b) the "Preparing your project" card transitioning without a
+      client-side poll, (c) the Smart Deploy Activity drawer
+      populating with ApplicationSetup log lines in real time via
+      append events (not full refetches). Confirm no `setInterval` or
+      `refetchInterval` fires by grepping console + network panel.
+    state: Todo
+    dependencies:
+      - task-11
+    acceptanceCriteria:
+      - "Scaffold card transitions the instant setup_complete flips server-side"
+      - "Drawer shows entries in real time, each individual append visible in SSE stream"
+      - "No `/api/operations/.../logs` polling requests in the network panel"
+      - "No `/api/applications/:id` requests on a client timer"
+    tdd: null
+    estimatedEffort: XS
+
+# Total effort estimate
+totalEstimate: M–L (~1 day)
+
+# Open questions
+openQuestions: []
+
+# Markdown content — summary and acceptance checklist only.
+# Individual task details live in the tasks[] array above (no duplication).
+content: |
+  ## Summary
+
+  Backend-owned SSE for Application and OperationLog deltas, replacing
+  the last two client polling paths with typed, surgical handlers —
+  12 tasks across 6 phases. TDD required for every task that ships
+  code; doc / wiring tasks carry `tdd: null`.
+
+  ## Acceptance Checklist
+
+  Before marking feature complete:
+
+  - [ ] All tasks completed
+  - [ ] Tests passing (`pnpm test`)
+  - [ ] Linting clean (`pnpm lint`)
+  - [ ] Types valid (`pnpm typecheck`)
+  - [ ] TypeSpec compiles (`pnpm tsp:compile`)
+  - [ ] Storybook builds (`pnpm build:storybook`)
+  - [ ] Manual smoke pass (task-12)
+  - [ ] PR created and reviewed
+
+  ---
+
+  _Task details are in the tasks[] array of tasks.yaml_
diff --git a/src/presentation/web/components/assistant-ui/thread.tsx b/src/presentation/web/components/assistant-ui/thread.tsx
index 6d4a4b6ff..8d16d8b78 100644
--- a/src/presentation/web/components/assistant-ui/thread.tsx
+++ b/src/presentation/web/components/assistant-ui/thread.tsx
@@ -93,6 +93,7 @@ export function Thread({
   afterMessages,
   composer,
   hideEmpty,
+  hideMessages,
 }: {
   className?: string;
   /** Content rendered inside the scrollable viewport, BEFORE messages. Used by the application chat to pin the step tracker at the top of the scroll area. */
@@ -102,6 +103,18 @@ export function Thread({
   composer?: React.ReactNode;
   /** Suppress the default "empty chat" placeholder — useful when `beforeMessages` already fills the viewport (e.g. a step tracker). */
   hideEmpty?: boolean;
+  /**
+   * Suppress the flat `ThreadPrimitive.Messages` slot entirely.
+   * Required when the host owns the chat surface via a grouping
+   * overlay (turn-group cards + operation bubbles) — even with
+   * `hideAllMessages: true` returning an empty `threadMessages`
+   * array, the assistant-ui runtime still injects a synthetic
+   * pending assistant message while a response is in flight,
+   * which would otherwise render as a stray Bot avatar bubble
+   * below the overlay. Pass `hideMessages` to drop the slot from
+   * the DOM entirely.
+   */
+  hideMessages?: boolean;
 }) {
   return (
     <ThreadPrimitive.Root className={cn('flex h-full flex-col', className)}>
@@ -114,12 +127,14 @@ export function Thread({
 
         {beforeMessages}
 
-        <ThreadPrimitive.Messages
-          components={{
-            UserMessage,
-            AssistantMessage,
-          }}
-        />
+        {hideMessages ? null : (
+          <ThreadPrimitive.Messages
+            components={{
+              UserMessage,
+              AssistantMessage,
+            }}
+          />
+        )}
 
         {afterMessages}
       </ThreadPrimitive.Viewport>
diff --git a/src/presentation/web/components/common/feature-node/derive-feature-state.ts b/src/presentation/web/components/common/feature-node/derive-feature-state.ts
index b7dd49504..18f1ed30a 100644
--- a/src/presentation/web/components/common/feature-node/derive-feature-state.ts
+++ b/src/presentation/web/components/common/feature-node/derive-feature-state.ts
@@ -139,8 +139,13 @@ export function mapEventTypeToState(eventType: NotificationEventType): FeatureNo
     case NotificationEventType.MergeReviewReady:
       return 'action-required';
     case NotificationEventType.CloudDeploymentUpdated:
-      // Cloud deploy updates do not affect the feature node lifecycle state —
-      // they are consumed by the application-page cloud deploy hook instead.
+    case NotificationEventType.ApplicationUpdated:
+    case NotificationEventType.OperationLogAppended:
+      // Application-scoped events do not affect the feature node lifecycle
+      // state — they are consumed by the application-page hooks (loader
+      // patch + logs-drawer append) instead. We return 'running' as a
+      // harmless no-op because the callers compare this against feature
+      // node state and never match on application events.
       return 'running';
   }
 }
diff --git a/src/presentation/web/components/features/application-page/app-overflow-menu.tsx b/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
index be04c8286..7317755f7 100644
--- a/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
+++ b/src/presentation/web/components/features/application-page/app-overflow-menu.tsx
@@ -8,6 +8,9 @@
  * info chip (model + session id) that used to live inline in the top bar.
  * Pulling them in here cleans up the action zone for the SmartDeployButton
  * and Preview while still leaving every control one click away.
+ *
+ * Visual: native toolbar icon button. h-8 w-8, rounded-md, borderless,
+ * background appears on hover/open. 150ms transitions.
  */
 
 import { MoreHorizontal } from 'lucide-react';
@@ -36,14 +39,12 @@ export function AppOverflowMenu({ children, className }: AppOverflowMenuProps) {
           aria-label="More options"
           title="More options"
           className={cn(
-            // Mirrors AppViewTabs flat-tab visual so the overflow trigger
-            // reads as part of the same control row, not a competing
-            // affordance. No background pill, no border-radius, no
-            // shadow — just a hover/active background shift.
             'text-muted-foreground hover:bg-muted hover:text-foreground',
-            'data-[state=open]:bg-background data-[state=open]:text-foreground',
-            'data-[state=open]:border-t-primary',
-            'relative inline-flex h-12 w-9 cursor-pointer items-center justify-center rounded-none border-t-2 border-t-transparent bg-transparent shadow-none transition-none',
+            'active:bg-muted/80',
+            'data-[state=open]:bg-muted data-[state=open]:text-foreground',
+            'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none',
+            'inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-transparent',
+            'transition-colors duration-150 ease-out',
             className
           )}
         >
diff --git a/src/presentation/web/components/features/application-page/app-top-bar.tsx b/src/presentation/web/components/features/application-page/app-top-bar.tsx
index 19c1b668d..dfffcdcbd 100644
--- a/src/presentation/web/components/features/application-page/app-top-bar.tsx
+++ b/src/presentation/web/components/features/application-page/app-top-bar.tsx
@@ -71,7 +71,7 @@ export function AppTopBar({
       )}
     >
       {/* ── Group 1: identity ────────────────────────────────── */}
-      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-500">
+      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-500 shadow-xs">
         <LayoutGrid className="h-3.5 w-3.5 text-white" />
       </div>
       <h1 className="min-w-0 truncate text-sm font-semibold">{application.name}</h1>
@@ -96,8 +96,6 @@ export function AppTopBar({
         agentRunning={agentRunning}
       />
 
-      <Divider />
-
       {/* ── Group 4: view switcher (folds in local preview state) ─
           The Web tab now owns the dev-server lifecycle — the old
           standalone Preview button has been removed. Clicking the Web
@@ -113,8 +111,6 @@ export function AppTopBar({
         deploy={deploy}
       />
 
-      <Divider />
-
       {/* ── Group 5: overflow ─────────────────────────────── */}
       <AppOverflowMenu>
         <div className="px-2 py-1.5">
diff --git a/src/presentation/web/components/features/application-page/app-view-tabs.tsx b/src/presentation/web/components/features/application-page/app-view-tabs.tsx
index 314a6b328..dce4aebb1 100644
--- a/src/presentation/web/components/features/application-page/app-view-tabs.tsx
+++ b/src/presentation/web/components/features/application-page/app-view-tabs.tsx
@@ -3,10 +3,12 @@
 /**
  * AppViewTabs — right-pane view switcher for the app top bar.
  *
- * Rebuild of the old pill-style ViewSwitcher to match the visual
- * language of FeatureDrawerTabs: VS Code-style flat tabs with a top
- * accent border on the active tab, right border between tabs, and
- * 13px medium label.
+ * Segmented-control style: a pill-shaped bg-muted container with each
+ * view rendered as a rounded-sm button inside. Active tab sits on a
+ * raised bg-background card with a subtle shadow; inactive tabs sink
+ * into the container and reveal a soft hover background. Mirrors the
+ * toolbar tab control in macOS Sonoma / Windows 11 Settings / VS Code
+ * command palette — compact, rounded, depth-via-shadow not stripes.
  *
  * Folds in the old standalone `RunDevButton` ("Preview") functionality:
  * the Web tab now owns the local dev-server lifecycle. Clicking the Web
@@ -79,16 +81,11 @@ function webTooltip(status: WebStatus, deploy: DeployActionState): string {
 export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: AppViewTabsProps) {
   const webStatus = deriveWebStatus(deploy);
 
-  // Web tab click — switches view AND starts the dev server when idle/error.
-  // Booting/ready states just switch view (the pane content shows the live
-  // state). Wrapped in useCallback so identity is stable for Radix Tabs.
   const handleTabChange = useCallback(
     (value: string) => {
       const next = value as AppView;
       onChange(next);
       if (next === 'web' && (webStatus === 'idle' || webStatus === 'error')) {
-        // Fire-and-forget — the WebPreviewTab will render the booting UI
-        // as the deploy state transitions through its hook.
         void deploy.deploy();
       }
     },
@@ -98,11 +95,14 @@ export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: App
   return (
     <TooltipProvider delayDuration={400}>
       <Tabs value={active} onValueChange={handleTabChange} className="contents">
-        <TabsList className="bg-muted/40 h-12 shrink-0 justify-start gap-0 rounded-none border-0 p-0">
-          {VIEW_TABS.map((view, idx) => {
+        <TabsList
+          className={cn(
+            'bg-muted/60 border-border/60 inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md border p-0.5'
+          )}
+        >
+          {VIEW_TABS.map((view) => {
             const Icon = VIEW_ICONS[view];
             const disabled = disabledTabs.includes(view);
-            const isLast = idx === VIEW_TABS.length - 1;
             const tooltip = view === 'web' ? webTooltip(webStatus, deploy) : VIEW_LABELS[view];
 
             const trigger = (
@@ -110,38 +110,28 @@ export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: App
                 value={view}
                 disabled={disabled}
                 className={cn(
-                  'text-muted-foreground hover:bg-muted hover:text-foreground',
-                  'data-[state=active]:bg-background data-[state=active]:text-foreground',
-                  'data-[state=active]:font-semibold',
-                  '[&:not([data-state=active])]:border-r-border',
-                  'relative h-12 rounded-none border-r border-r-transparent',
-                  'bg-transparent px-3 text-[12px] font-medium shadow-none transition-none',
-                  'cursor-pointer data-[state=active]:shadow-none',
-                  isLast && 'last:border-r-transparent',
-                  disabled && 'cursor-not-allowed opacity-40'
+                  'text-muted-foreground hover:text-foreground inline-flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] font-medium whitespace-nowrap',
+                  'transition-all duration-150 ease-out',
+                  'data-[state=inactive]:hover:bg-background/60',
+                  'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
+                  'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none',
+                  disabled && 'cursor-not-allowed opacity-40 hover:bg-transparent',
+                  !disabled && 'cursor-pointer'
                 )}
               >
-                {/* State-aware icon for the Web tab; static icon for IDE/Terminal. */}
                 {view === 'web' ? (
                   <WebTabIcon status={webStatus} BaseIcon={Icon} />
                 ) : (
-                  <Icon className="mr-1.5 size-3.5" />
+                  <Icon className="size-3.5" />
                 )}
                 {VIEW_LABELS[view]}
-                {/* Bottom accent bar — rendered as a real div so it
-                    is 100% immune to Tailwind CSS variable cascade
-                    issues. Same 2px primary colour as the smart deploy
-                    button's bottom accent. */}
-                {active === view ? (
-                  <span className="bg-primary absolute bottom-0 left-0 h-0.5 w-full" />
-                ) : null}
               </TabsTrigger>
             );
 
             return (
               <Tooltip key={view}>
                 <TooltipTrigger asChild>{trigger}</TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4} className="max-w-xs text-[11px]">
+                <TooltipContent side="bottom" sideOffset={6} className="max-w-xs text-[11px]">
                   {tooltip}
                 </TooltipContent>
               </Tooltip>
@@ -154,9 +144,9 @@ export function AppViewTabs({ active, onChange, disabledTabs = [], deploy }: App
 }
 
 /**
- * Web-tab icon that swaps glyph + adds a status overlay dot based on
- * the dev-server state. Kept as its own component so the Tab trigger
- * markup stays scannable.
+ * Web-tab icon — swaps glyph + adds a status overlay dot based on the
+ * dev-server state. Separate component so the TabsTrigger markup stays
+ * scannable.
  */
 function WebTabIcon({
   status,
@@ -166,13 +156,13 @@ function WebTabIcon({
   BaseIcon: React.ComponentType<{ className?: string }>;
 }) {
   if (status === 'booting') {
-    return <Loader2 className="text-primary mr-1.5 size-3.5 animate-spin" />;
+    return <Loader2 className="text-primary size-3.5 animate-spin" />;
   }
   if (status === 'error') {
-    return <TriangleAlert className="text-destructive mr-1.5 size-3.5" />;
+    return <TriangleAlert className="text-destructive size-3.5" />;
   }
   return (
-    <span className="relative mr-1.5 inline-flex">
+    <span className="relative inline-flex">
       <BaseIcon className="size-3.5" />
       {status === 'ready' ? (
         <span aria-hidden="true" className="absolute -end-0.5 -top-0.5 inline-flex size-1.5">
diff --git a/src/presentation/web/components/features/application-page/application-page-loader.tsx b/src/presentation/web/components/features/application-page/application-page-loader.tsx
index db770db02..6eb1d07c4 100644
--- a/src/presentation/web/components/features/application-page/application-page-loader.tsx
+++ b/src/presentation/web/components/features/application-page/application-page-loader.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import { notFound } from 'next/navigation';
 import type { Application } from '@shepai/core/domain/generated/output';
 import type { ChatState } from '@shepai/core/application/ports/output/services/interactive-session-service.interface';
 import { DeploymentStatusProvider } from '@/hooks/deployment-status-provider';
 import type { DeploymentStatusEntry } from '@shepai/core/application/ports/output/services/deployment-service.interface';
+import { useApplicationUpdate } from '@/hooks/agent-events-provider';
 import { ApplicationPage } from './application-page';
 import type { InitialDeploymentSnapshot } from './application-page';
 
@@ -17,6 +19,8 @@ interface AppData {
 }
 
 export function ApplicationPageLoader({ applicationId }: { applicationId: string }) {
+  const queryClient = useQueryClient();
+
   const { data, isLoading, error } = useQuery<AppData>({
     queryKey: ['application', applicationId],
     queryFn: async () => {
@@ -32,6 +36,23 @@ export function ApplicationPageLoader({ applicationId }: { applicationId: string
     },
   });
 
+  // Merge typed `ApplicationUpdated` deltas into the cached AppData
+  // in-place — no HTTP refetch, no blanket invalidation. The backend
+  // emits a payload whenever server-owned fields flip; we patch the
+  // cache so `setupComplete`, `status`, `gitRemoteUrl`, and
+  // `cloudDeploymentProvider` update the moment the event arrives.
+  const applicationUpdate = useApplicationUpdate(applicationId);
+  useEffect(() => {
+    if (!applicationUpdate) return;
+    queryClient.setQueryData<AppData>(['application', applicationId], (old) => {
+      if (!old) return old;
+      return {
+        ...old,
+        application: { ...old.application, ...applicationUpdate },
+      };
+    });
+  }, [applicationUpdate, queryClient, applicationId]);
+
   if (error?.message === 'not-found') {
     notFound();
   }
diff --git a/src/presentation/web/components/features/application-page/application-page.tsx b/src/presentation/web/components/features/application-page/application-page.tsx
index cb66ad054..8eae1491b 100644
--- a/src/presentation/web/components/features/application-page/application-page.tsx
+++ b/src/presentation/web/components/features/application-page/application-page.tsx
@@ -6,10 +6,7 @@ import type { ChatState } from '@shepai/core/application/ports/output/services/i
 import { featureIdForApplication } from '@shepai/core/domain/shared/feature-id';
 
 import { ChatTab } from '@/components/features/chat/ChatTab';
-import type {
-  ApplicationErrorState,
-  ScaffoldingState,
-} from '@/components/features/chat/ChatTab';
+import type { ApplicationErrorState, ScaffoldingState } from '@/components/features/chat/ChatTab';
 import { APPLICATION_CREATION_PLACEHOLDER_STEPS } from '@/components/features/chat/workflow-placeholder';
 import { useCloudDeployAction } from '@/hooks/use-cloud-deploy-action';
 import { useDeployAction } from '@/hooks/use-deploy-action';
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
index f541bf6fc..3b6ef8394 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-button.tsx
@@ -8,8 +8,12 @@
  * most-likely-intended action based on the combined git + cloud state;
  * the chevron half opens the rich DeployPanel for full control.
  *
- * Visual design intent: read at a glance, no jargon. Target user is
- * non-technical — labels never say "repo", "sync", "push", or "commit".
+ * Visual: native desktop toolbar split button. h-8, rounded-md ends,
+ * subtle 1px border, matching tone-tinted background, shadow-xs for
+ * depth. Hover bumps the tint a level, active inverts to a pressed
+ * feel, focus adds a ring. 150ms transitions across the board. Labels
+ * never say "repo", "sync", "push", or "commit" — this button is used
+ * by non-technical people.
  */
 
 import { useState } from 'react';
@@ -42,21 +46,14 @@ export interface SmartDeployButtonProps {
   className?: string;
 }
 
-/**
- * State-driven label + icon + tone. `tone` maps to a Tailwind colour band
- * applied via the className builder below — `primary` is the default
- * "needs your attention" tone, `emerald` is success-quiet, `destructive`
- * is failure, `muted` is idle.
- */
 interface LabelSpec {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   sub?: string;
   tone: 'primary' | 'emerald' | 'amber' | 'destructive' | 'muted' | 'rocket';
   spinning?: boolean;
-  /** When true, the icon is rendered inside a vibrant gradient chip
-   *  instead of inheriting the tone color — reserved for the
-   *  one-click "Get online" surface that should visually pop. */
+  /** When true, the icon renders inside a vibrant gradient chip — reserved
+   *  for the one-click "Get online" surface that should visually pop. */
   iconChip?: boolean;
 }
 
@@ -65,13 +62,6 @@ function labelFor(state: SmartDeployState): LabelSpec {
     case 'loading':
       return { icon: Loader2, label: 'Loading…', tone: 'muted', spinning: true };
     case 'working': {
-      // Specific-per-source label instead of the generic "Working…".
-      // Sync: we're doing the git commit+push pipeline. Deploy: the
-      // cloud provider is shipping the build. GetOnline: the
-      // one-click create-repo + auto-deploy pipeline (single label
-      // covering the whole sequence so the button can't flicker
-      // between intermediate states). Fallback stays as "Working…"
-      // for any edge case where source isn't set.
       if (state.workingSource === 'getOnline') {
         return {
           icon: Loader2,
@@ -114,8 +104,6 @@ function labelFor(state: SmartDeployState): LabelSpec {
           state.changeCount > 0
             ? `${state.changeCount} change${state.changeCount === 1 ? '' : 's'} not live`
             : 'Not in sync',
-        // Amber instead of emerald so the "your live site is behind"
-        // state looks visibly different from the calm "Live" chip.
         tone: 'amber',
       };
     case 'save':
@@ -150,38 +138,27 @@ function truncateHost(url: string): string {
 }
 
 /**
- * Tone classes — square, flat, VS-Code-tab-style.
- *
- * Neutral `border-border` all around so the button always sits as a
- * clean rectangle with no rounded corners, and a 2px BOTTOM accent
- * bar (`border-b-2 border-b-<tone>`) that carries the state color on
- * a single side only. Subtle background tint + matching text/icon
- * color complete the tone without painting the whole frame green or
- * amber.
+ * Tone classes — native-toolbar split button.
  *
- * Sits next to `app-view-tabs` in the top bar so the whole row reads
- * as one flat rectangular family.
+ * Every tone is a (border, background, text, hover) tuple. `primary` is
+ * the default "needs your attention" tone; `emerald` is a calm success
+ * state; `amber` flags "your live site is behind"; `destructive` is
+ * failure; `muted` is idle/loading; `rocket` is the vibrant one-click
+ * Get-online action. Backgrounds stay subtle (5-10% tint) so the button
+ * reads as a toolbar control, not a hero CTA.
  */
 const TONE_CLASSES: Record<LabelSpec['tone'], string> = {
   primary:
-    'border-border border-b-2 border-b-primary bg-primary/5 text-primary hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/15',
+    'border-primary/30 bg-primary/5 text-primary hover:bg-primary/10 active:bg-primary/15 dark:bg-primary/10 dark:hover:bg-primary/15 dark:active:bg-primary/20',
   emerald:
-    'border-border border-b-2 border-b-emerald-500 bg-emerald-500/5 text-emerald-700 hover:bg-emerald-500/10 dark:text-emerald-400 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15',
+    'border-emerald-500/30 bg-emerald-500/5 text-emerald-700 hover:bg-emerald-500/10 active:bg-emerald-500/15 dark:text-emerald-400 dark:bg-emerald-500/10 dark:hover:bg-emerald-500/15 dark:active:bg-emerald-500/20',
   amber:
-    'border-border border-b-2 border-b-amber-500 bg-amber-500/5 text-amber-700 hover:bg-amber-500/10 dark:text-amber-400 dark:bg-amber-500/10 dark:hover:bg-amber-500/15',
+    'border-amber-500/30 bg-amber-500/5 text-amber-700 hover:bg-amber-500/10 active:bg-amber-500/15 dark:text-amber-400 dark:bg-amber-500/10 dark:hover:bg-amber-500/15 dark:active:bg-amber-500/20',
   destructive:
-    'border-border border-b-2 border-b-destructive bg-destructive/5 text-destructive hover:bg-destructive/10 dark:bg-destructive/10 dark:hover:bg-destructive/15',
-  muted:
-    'border-border border-b-2 border-b-transparent bg-background text-muted-foreground hover:bg-accent',
-  // One-click "Get online" call to action. Mirrors the structure of
-  // the `primary` tone (solid subtle tint, no body gradient) so the
-  // Tailwind build can't mis-render a multi-stop gradient with
-  // opacity modifiers as a full-saturation fuchsia block. The
-  // "cool colored" accent lives entirely in the icon chip — see
-  // `iconChip` rendering below — so the button reads as a pop of
-  // colour without drowning the label in magenta.
+    'border-destructive/30 bg-destructive/5 text-destructive hover:bg-destructive/10 active:bg-destructive/15 dark:bg-destructive/10 dark:hover:bg-destructive/15 dark:active:bg-destructive/20',
+  muted: 'border-border bg-background text-muted-foreground hover:bg-accent active:bg-accent/80',
   rocket:
-    'border-border border-b-2 border-b-fuchsia-500 bg-fuchsia-500/5 text-fuchsia-700 hover:bg-fuchsia-500/10 dark:text-fuchsia-300 dark:bg-fuchsia-500/10 dark:hover:bg-fuchsia-500/15',
+    'border-fuchsia-500/30 bg-fuchsia-500/5 text-fuchsia-700 hover:bg-fuchsia-500/10 active:bg-fuchsia-500/15 dark:text-fuchsia-300 dark:bg-fuchsia-500/10 dark:hover:bg-fuchsia-500/15 dark:active:bg-fuchsia-500/20',
 };
 
 export function SmartDeployButton({
@@ -194,9 +171,6 @@ export function SmartDeployButton({
 }: SmartDeployButtonProps) {
   const spec = labelFor(state);
   const Icon = spec.icon;
-  // Support both controlled and uncontrolled use. Storybook stories
-  // still render the button without a parent popover state, so keep
-  // an internal fallback for those cases.
   const [internalPanelOpen, setInternalPanelOpen] = useState(false);
   const panelOpen = controlledPanelOpen ?? internalPanelOpen;
   const setPanelOpen = (open: boolean): void => {
@@ -211,21 +185,19 @@ export function SmartDeployButton({
   const isDirty = state.changeCount > 0 && state.hasRemote;
 
   return (
-    <div className={cn('inline-flex items-stretch', className)}>
+    <div className={cn('inline-flex items-stretch shadow-xs', className)}>
       {/* ── Left: smart primary action ───────────────────────── */}
       <button
         type="button"
         onClick={onPrimaryClick}
         disabled={!isInteractive}
         className={cn(
-          // Square, flat, VS-Code-tab language. Fixed h-12 matches
-          // the top bar (TOP_BAR_HEIGHT_CLASS = 'h-12') so the
-          // button sits flush top-to-bottom with no outer padding
-          // band. Using h-full here is unreliable inside a flex
-          // items-center parent — the explicit height always wins.
-          'inline-flex h-12 items-center gap-2 rounded-none border border-r-0 px-3 text-xs font-medium transition-colors',
+          'group inline-flex h-8 items-center gap-2 rounded-l-md border border-r-0 px-3 text-xs font-medium',
+          'transition-colors duration-150 ease-out',
+          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none',
+          'focus-visible:relative focus-visible:z-10',
           TONE_CLASSES[spec.tone],
-          isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-70'
+          isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'
         )}
         title={spec.label}
       >
@@ -233,7 +205,7 @@ export function SmartDeployButton({
           className={cn(
             'relative inline-flex',
             spec.iconChip &&
-              'h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-500 text-white shadow-sm'
+              'h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-500 text-white shadow-xs'
           )}
         >
           <Icon
@@ -244,10 +216,7 @@ export function SmartDeployButton({
             )}
           />
           {/* Tiny dirty-dot overlay on the icon when there are pending changes
-              and we're NOT already showing them in the label. Hidden for
-              states whose label already communicates the state so we don't
-              double-indicate: save, pushAndDeploy, saveAndRepublish,
-              working, loading, failed. */}
+              and we're NOT already showing them in the label. */}
           {isDirty &&
           state.kind !== 'save' &&
           state.kind !== 'pushAndDeploy' &&
@@ -274,15 +243,21 @@ export function SmartDeployButton({
             aria-label="Open deploy panel"
             title="More options"
             className={cn(
-              // Square chevron half, same top accent as the main
-              // button so the split reads as one rectangle with a
-              // single vertical divider between the two halves.
-              'inline-flex h-12 items-center justify-center rounded-none border px-1.5 transition-colors',
+              'inline-flex h-8 items-center justify-center rounded-r-md border px-1.5',
+              'transition-colors duration-150 ease-out',
+              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none',
+              'focus-visible:relative focus-visible:z-10',
+              'data-[state=open]:bg-accent/60',
               TONE_CLASSES[spec.tone],
               'cursor-pointer'
             )}
           >
-            <ChevronDown className="size-3.5" />
+            <ChevronDown
+              className={cn(
+                'size-3.5 transition-transform duration-150 ease-out',
+                panelOpen && 'rotate-180'
+              )}
+            />
           </button>
         </PopoverTrigger>
         <PopoverContent align="end" sideOffset={6} className="w-[360px] p-0">
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
index b3ee0b993..4e32b6a9a 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-cluster.tsx
@@ -12,7 +12,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { ScrollText } from 'lucide-react';
 import { toast } from 'sonner';
-import { CloudDeploymentProvider, type Application } from '@shepai/core/domain/generated/output';
+import {
+  ApplicationStatus,
+  CloudDeploymentProvider,
+  type Application,
+} from '@shepai/core/domain/generated/output';
 import type { useCloudDeployAction } from '@/hooks/use-cloud-deploy-action';
 import { useGitStatus } from '@/hooks/use-git-status';
 import { useSyncAction } from '@/hooks/use-sync-action';
@@ -164,24 +168,27 @@ export function SmartDeployCluster({
   // still click "Activity log" inside the panel to read the entries
   // post-hoc.
 
-  // Every primary action opens the unified activity drawer so the
-  // pipeline is never invisible — the user sees the same timeline
-  // regardless of which action kicked it off.
+  // Primary actions do NOT auto-open the unified activity drawer.
+  // The in-chat OperationBubble shows a spinning in-progress card
+  // while each long-running op is live, and the SmartDeployButton
+  // label pins on "Publishing to GitHub…" / "Deploying to
+  // Cloudflare Pages…" through `workingSource`. The drawer is an
+  // on-demand deep-dive surface — users open it explicitly via
+  // the standalone log icon when they want the full cross-op
+  // timeline. Auto-opening it on every click buried the in-chat
+  // status and felt like the UI was shouting at the user.
   const handleSaveChanges = useCallback(async () => {
-    setLogsOpen(true);
     await sync.sync();
     await refreshGitStatus();
   }, [sync, refreshGitStatus]);
 
   const handlePublishToWeb = useCallback(async () => {
-    setLogsOpen(true);
     await cloudDeploy.initiate();
   }, [cloudDeploy]);
 
   const handleRedeploy = handlePublishToWeb;
 
   const handleSaveAndPublish = useCallback(async () => {
-    setLogsOpen(true);
     await sync.sync();
     await refreshGitStatus();
     if (sync.state.kind === 'failed') return;
@@ -200,7 +207,6 @@ export function SmartDeployCluster({
   // user doesn't have to click Publish to web as a separate step.
   const handleSelectProvider = useCallback(
     async (provider: CloudDeploymentProvider) => {
-      setLogsOpen(true);
       await cloudDeploy.selectProvider(provider);
       await cloudDeploy.initiate();
     },
@@ -299,10 +305,11 @@ export function SmartDeployCluster({
         return;
       }
 
-      // 3. Both tokens are on file → open the activity drawer and
-      //    run the full pipeline end-to-end with defaults.
-      setLogsOpen(true);
-
+      // 3. Both tokens are on file → run the full pipeline
+      //    end-to-end with defaults. Progress is visible via the
+      //    in-chat OperationBubble (spinning in-progress card) and
+      //    the SmartDeployButton label ("Getting online…") — no
+      //    auto-opened drawer.
       const hasRemoteNow = gitStatus?.hasRemote === true || Boolean(application.gitRemoteUrl);
       if (!hasRemoteNow) {
         const firstOwner = ownersSnapshot[0];
@@ -421,7 +428,9 @@ export function SmartDeployCluster({
       }
       setPublishModalOpen(false);
       await refreshGitStatus();
-      setLogsOpen(true);
+      // No auto-open drawer — the in-chat OperationBubble shows
+      // the publish progress; users can click the standalone log
+      // icon if they want the full log.
     },
     [application.id, refreshGitStatus]
   );
@@ -442,17 +451,17 @@ export function SmartDeployCluster({
   return (
     <>
       {/* Standalone icon-only activity-log button, detached from the
-          Smart Deploy split. Small, borderless, sits next to the main
-          surface so the user can always read the unified log without
-          the log affordance feeling welded to the deploy action. */}
+          Smart Deploy split. Native toolbar icon-button style — matches
+          the overflow-menu trigger so the whole right cluster reads as
+          a single family. */}
       <button
         type="button"
         aria-label="Open activity log"
         title="Smart Deploy activity log"
         onClick={handleOpenLogs}
-        className="text-muted-foreground hover:bg-muted hover:text-foreground mr-1 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition-colors"
+        className="text-muted-foreground hover:bg-muted hover:text-foreground active:bg-muted/80 focus-visible:ring-ring mr-1 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-transparent transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none"
       >
-        <ScrollText className="size-3.5" />
+        <ScrollText className="size-4" />
       </button>
       <SmartDeployButton
         state={smartState}
@@ -496,7 +505,11 @@ export function SmartDeployCluster({
         open={logsOpen}
         onOpenChange={setLogsOpen}
         applicationId={application.id}
-        isRunning={smartState.kind === 'working' || oneClickRunning}
+        isRunning={
+          smartState.kind === 'working' ||
+          oneClickRunning ||
+          (!application.setupComplete && application.status !== ApplicationStatus.Error)
+        }
         subtitle={cloudProviderName ?? undefined}
       />
 
diff --git a/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
index f00eaa14c..8478d83b2 100644
--- a/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
+++ b/src/presentation/web/components/features/application-page/smart-deploy-logs-drawer.tsx
@@ -32,6 +32,7 @@ import {
   Github,
   Info,
   Loader2,
+  Package,
   RefreshCw,
   TriangleAlert,
 } from 'lucide-react';
@@ -42,9 +43,11 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { useOperationLogAppend } from '@/hooks/agent-events-provider';
 import { cn } from '@/lib/utils';
+import type { OperationLogEntry } from '@shepai/core/domain/generated/output';
 
-export type SmartOpKind = 'CloudDeploy' | 'GitRemoteCreate' | 'RepoSync';
+export type SmartOpKind = 'CloudDeploy' | 'GitRemoteCreate' | 'RepoSync' | 'ApplicationSetup';
 type LogLevel = 'Debug' | 'Info' | 'Warn' | 'Error';
 
 interface OperationLogEntryDto {
@@ -57,29 +60,77 @@ interface OperationLogEntryDto {
   createdAt: string;
 }
 
-const OP_KINDS: readonly SmartOpKind[] = ['GitRemoteCreate', 'CloudDeploy', 'RepoSync'];
+// The SSE-delivered `OperationLogEntry` carries `createdAt` as an `any`
+// because the TypeSpec generator widens date-time fields. In practice
+// it's an ISO string over the wire — coerce defensively so the drawer's
+// `new Date(createdAt)` sort never hits NaN.
+function toDto(entry: OperationLogEntry): OperationLogEntryDto {
+  const createdAt =
+    typeof entry.createdAt === 'string'
+      ? entry.createdAt
+      : entry.createdAt instanceof Date
+        ? entry.createdAt.toISOString()
+        : String(entry.createdAt);
+  return {
+    id: entry.id,
+    operationKind: entry.operationKind as SmartOpKind,
+    operationId: entry.operationId,
+    level: entry.level as LogLevel,
+    message: entry.message,
+    detail: entry.detail,
+    createdAt,
+  };
+}
+
+const OP_KINDS: readonly SmartOpKind[] = [
+  'ApplicationSetup',
+  'GitRemoteCreate',
+  'CloudDeploy',
+  'RepoSync',
+];
 
 const KIND_META: Record<
   SmartOpKind,
-  { label: string; icon: typeof Info; chipClass: string; iconClass: string }
+  {
+    label: string;
+    icon: typeof Info;
+    chipClass: string;
+    iconClass: string;
+    accentClass: string;
+    labelClass: string;
+  }
 > = {
+  ApplicationSetup: {
+    label: 'setup',
+    icon: Package,
+    chipClass: 'bg-indigo-500/15 text-indigo-700 dark:text-indigo-300',
+    iconClass: 'text-indigo-500',
+    accentClass: 'bg-indigo-500/70',
+    labelClass: 'text-indigo-500/80 dark:text-indigo-400/80',
+  },
   GitRemoteCreate: {
-    label: 'GitHub',
+    label: 'github',
     icon: Github,
     chipClass: 'bg-sky-500/15 text-sky-700 dark:text-sky-300',
     iconClass: 'text-sky-500',
+    accentClass: 'bg-sky-500/70',
+    labelClass: 'text-sky-500/80 dark:text-sky-400/80',
   },
   CloudDeploy: {
-    label: 'Cloud',
+    label: 'cloud',
     icon: Cloud,
     chipClass: 'bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300',
     iconClass: 'text-fuchsia-500',
+    accentClass: 'bg-fuchsia-500/70',
+    labelClass: 'text-fuchsia-500/80 dark:text-fuchsia-400/80',
   },
   RepoSync: {
-    label: 'Sync',
+    label: 'sync',
     icon: GitBranch,
     chipClass: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
     iconClass: 'text-emerald-500',
+    accentClass: 'bg-emerald-500/70',
+    labelClass: 'text-emerald-500/80 dark:text-emerald-400/80',
   },
 };
 
@@ -106,7 +157,8 @@ export interface SmartDeployLogsDrawerProps {
   open: boolean;
   onOpenChange(open: boolean): void;
   applicationId: string;
-  /** When true, the drawer polls for new entries every 1.5s. */
+  /** Whether the merged operation is currently live — used to pin the
+   * spinner in the header and to auto-scroll as new entries arrive. */
   isRunning: boolean;
   /** Friendly subtitle, e.g. cloud provider name. */
   subtitle?: string;
@@ -193,22 +245,41 @@ export function SmartDeployLogsDrawer({
     }
   }, [applicationId]);
 
-  // Fetch on open + poll while running. Reset the one-shot spinner
-  // flag when the drawer is closed OR the applicationId switches so
-  // the user sees "Loading logs…" on the next fresh open, not a stale
+  // Fetch on open — one-shot hydration. Reset the "first-load" flag
+  // when the drawer is closed OR the applicationId switches so the
+  // user sees "Loading logs…" on the next fresh open, not a stale
   // "No activity yet" while the first new fetch is still in flight.
+  //
+  // Live updates are driven by the shared agent-events SSE stream
+  // below — we never use a client timer to poll the log endpoint.
   useEffect(() => {
     if (!open) {
       setHasLoadedOnce(false);
       return;
     }
     void refresh();
-    if (!isRunning) return;
-    const timer = setInterval(() => {
-      void refresh();
-    }, 1500);
-    return () => clearInterval(timer);
-  }, [open, isRunning, refresh]);
+  }, [open, refresh]);
+
+  // Live updates: the backend publishes an `OperationLogAppended` SSE
+  // event the instant a new `operation_log_entries` row is written
+  // (see StreamAgentEventsUseCase + IOperationLogEventBus). We append
+  // surgically — no round-trip to `/api/operations/.../logs` — and
+  // dedup by `entry.id` in case the one-shot hydration fetch and the
+  // SSE event race for the same row. Chronological order is enforced
+  // on insert so a reconnect that delivers entries out-of-order still
+  // renders in timestamp order.
+  const appendedEntry = useOperationLogAppend(applicationId);
+  useEffect(() => {
+    if (!open) return;
+    if (!appendedEntry) return;
+    const entry = appendedEntry;
+    setEntries((prev) => {
+      if (prev.some((e) => e.id === entry.id)) return prev;
+      const next = [...prev, toDto(entry)];
+      next.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+      return next;
+    });
+  }, [appendedEntry, open]);
 
   // Auto-scroll to bottom while running so new entries are visible
   // without the user chasing them. Paused otherwise so historical
@@ -286,64 +357,89 @@ export function SmartDeployLogsDrawer({
           </div>
         </SheetHeader>
 
-        <div ref={bodyRef} className="flex-1 overflow-y-auto p-4">
+        <div ref={bodyRef} className="flex-1 overflow-y-auto py-2">
           {!hasLoadedOnce ? (
-            <div className="text-muted-foreground flex items-center gap-2 text-xs">
+            <div className="text-muted-foreground flex items-center gap-2 px-4 py-2 text-xs">
               <Loader2 className="size-3 animate-spin" /> Loading logs…
             </div>
           ) : null}
           {error ? (
-            <div className="text-destructive bg-destructive/10 mb-3 rounded-md border p-2 text-xs">
+            <div className="text-destructive/90 border-destructive/60 mx-2 mb-2 border-l-2 px-3 py-1.5 font-mono text-[11px] leading-snug">
               {error}
             </div>
           ) : null}
           {visible.length === 0 && hasLoadedOnce ? (
-            <div className="text-muted-foreground text-xs">
+            <div className="text-muted-foreground px-4 py-2 text-xs">
               {error ? 'Could not load activity. Use Refresh to try again.' : 'No activity yet.'}
               {isRunning && !error ? ' The operation just started — entries will appear here.' : ''}
             </div>
           ) : null}
 
-          <ol className="flex flex-col gap-2">
+          <ol className="flex flex-col">
             {visible.map((entry) => {
               const { icon: LevelIcon, className: levelClass } = LEVEL_ICON[entry.level];
               const meta = KIND_META[entry.operationKind];
+              const hasDetail = Boolean(entry.detail);
+              const isLoud = entry.level === 'Warn' || entry.level === 'Error';
               return (
                 <li
                   key={entry.id}
-                  className="border-border/60 hover:bg-muted/30 group rounded-md border p-2 transition-colors"
+                  className={cn(
+                    'group relative flex items-start gap-3 px-4 py-[3px] font-mono text-[11.5px] leading-[1.55] transition-colors',
+                    'hover:bg-muted/40',
+                    entry.level === 'Error' && 'bg-destructive/5'
+                  )}
                 >
-                  <div className="flex items-start gap-2">
-                    <LevelIcon className={cn('mt-0.5 size-3.5 shrink-0', levelClass)} />
-                    <div className="min-w-0 flex-1">
-                      <div className="flex flex-wrap items-baseline gap-2">
-                        <span className="text-muted-foreground shrink-0 font-mono text-[10px]">
-                          {formatTime(entry.createdAt)}
-                        </span>
-                        <span
-                          className={cn(
-                            'inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0 text-[9px] font-medium tracking-wide uppercase',
-                            meta.chipClass
-                          )}
-                        >
-                          <meta.icon className={cn('size-2.5', meta.iconClass)} />
-                          {meta.label}
-                        </span>
-                        <span className="min-w-0 flex-1 text-xs leading-snug break-words">
-                          {entry.message}
-                        </span>
-                      </div>
-                      {entry.detail ? (
-                        <details className="mt-1">
-                          <summary className="text-muted-foreground hover:text-foreground cursor-pointer text-[10px]">
-                            Details
-                          </summary>
-                          <pre className="bg-muted/50 mt-1 overflow-x-auto rounded px-2 py-1 font-mono text-[10px] whitespace-pre-wrap">
-                            {entry.detail}
-                          </pre>
-                        </details>
-                      ) : null}
-                    </div>
+                  {/* Thin kind-colored accent on the left edge */}
+                  <span
+                    aria-hidden
+                    className={cn(
+                      'pointer-events-none absolute top-1 bottom-1 left-0 w-[2px] rounded-r-sm',
+                      meta.accentClass,
+                      'opacity-70 group-hover:opacity-100'
+                    )}
+                  />
+
+                  <span className="text-muted-foreground/70 shrink-0 pt-[2px] text-[10.5px] tabular-nums">
+                    {formatTime(entry.createdAt)}
+                  </span>
+
+                  <span
+                    className={cn(
+                      'shrink-0 pt-[3px] text-[10px] tracking-wide uppercase select-none',
+                      meta.labelClass
+                    )}
+                    title={entry.operationKind}
+                  >
+                    {meta.label}
+                  </span>
+
+                  {isLoud ? (
+                    <LevelIcon className={cn('mt-[3px] size-3 shrink-0', levelClass)} />
+                  ) : null}
+
+                  <div className="min-w-0 flex-1">
+                    <span
+                      className={cn(
+                        'break-words whitespace-pre-wrap',
+                        entry.level === 'Error' && 'text-destructive',
+                        entry.level === 'Warn' && 'text-amber-600 dark:text-amber-400',
+                        entry.level === 'Debug' && 'text-muted-foreground'
+                      )}
+                    >
+                      {entry.message}
+                    </span>
+                    {hasDetail ? (
+                      <details className="mt-0.5 [&:not([open])_.caret-open]:hidden [&[open]_.caret-closed]:hidden">
+                        <summary className="text-muted-foreground/70 hover:text-foreground inline-block cursor-pointer list-none text-[10px] [&::-webkit-details-marker]:hidden">
+                          <span className="caret-closed">› details</span>
+                          <span className="caret-open">‹ hide</span>
+                        </summary>
+                        <pre className="text-muted-foreground border-border/60 mt-0.5 ml-[1px] overflow-x-auto border-l pl-2 text-[10.5px] leading-[1.5] whitespace-pre-wrap">
+                          {entry.detail}
+                        </pre>
+                      </details>
+                    ) : null}
                   </div>
                 </li>
               );
diff --git a/src/presentation/web/components/features/chat/ChatTab.tsx b/src/presentation/web/components/features/chat/ChatTab.tsx
index 4cd0e111d..3e720d096 100644
--- a/src/presentation/web/components/features/chat/ChatTab.tsx
+++ b/src/presentation/web/components/features/chat/ChatTab.tsx
@@ -14,8 +14,8 @@ import { useChatRuntime } from './useChatRuntime';
 import { ChatComposer } from './ChatComposer';
 import { InteractionBubble } from './InteractionBubble';
 import { StepTracker } from './StepTracker';
-import { CurrentTurnCard, CompletedTurnGroupsList, useTurnGroupsView } from './turn-group-list';
-import { OperationBubble } from './operation-bubble';
+import { SingleTurnCard, useTurnGroupsView, type TurnGroupView } from './turn-group-list';
+import { OperationRunCard, useOperationRuns, type OperationRun } from './operation-bubble';
 import type { PlaceholderStep } from './workflow-placeholder';
 import { SCAFFOLD_STEP_KEY } from './workflow-placeholder';
 import type { EnhancedStepState } from './useChatRuntime';
@@ -212,10 +212,95 @@ export function ChatTab({
   // Client-side turn grouping — re-runs synchronously on every
   // `rawMessages` change, so a new user bubble or assistant reply
   // is reflected in the overlay in the same render tick.
-  // Only mark the latest turn as in-progress while the agent is
-  // actually running — otherwise a finished conversation would
-  // leave a permanent "Working on your request…" fuchsia card.
-  const turnGroupsView = useTurnGroupsView(rawMessages, status.isRunning);
+  //
+  // Three gating rules:
+  //   1. Only mark the latest turn as in-progress while the agent
+  //      is actually running — otherwise a finished conversation
+  //      would leave a permanent "Working on your request…" card.
+  //   2. Hide the entire overlay while the initial setup workflow
+  //      is still running. The StepTracker owns the narrative
+  //      during setup; showing an extra "Working on your request…"
+  //      card for the first user message duplicates the user's ask
+  //      and clutters the pane.
+  //   3. Once the setup workflow exists (hasPlan), the FIRST user
+  //      turn is by definition the setup-triggering ask — it is
+  //      already represented inside the StepTracker card. Drop it
+  //      from the overlay so the "Working on: …" card only appears
+  //      for genuine post-setup iterations (second user message
+  //      onwards).
+  const setupInProgress = stepProgress.hasPlan && !stepProgress.allDone;
+  const rawTurnGroupsView = useTurnGroupsView(rawMessages, status.isRunning && !setupInProgress);
+  const turnGroupsView = (() => {
+    if (setupInProgress) {
+      return { groups: [], currentTurn: null, hiddenMessageIds: [] };
+    }
+    if (!stepProgress.hasPlan) {
+      return rawTurnGroupsView;
+    }
+    // Flatten all turns (completed + current) in chronological
+    // order, drop the first (setup ask), then re-split so the
+    // latest still owns `currentTurn` if it was in-progress.
+    const all = [...rawTurnGroupsView.groups];
+    if (rawTurnGroupsView.currentTurn) all.push(rawTurnGroupsView.currentTurn);
+    const iterations = all.slice(1);
+    const hadCurrent = rawTurnGroupsView.currentTurn !== null;
+    const currentTurn =
+      hadCurrent && iterations.length > 0 ? iterations[iterations.length - 1]! : null;
+    const groups = currentTurn ? iterations.slice(0, -1) : iterations;
+    return {
+      groups,
+      currentTurn,
+      hiddenMessageIds: rawTurnGroupsView.hiddenMessageIds,
+    };
+  })();
+
+  // Layer 2 sibling feeds: publish + deploy + save-&-push operation
+  // runs, fetched once at the ChatTab level so we can interleave them
+  // chronologically with user-turn cards. Each run carries `startedAt`
+  // for the merge. "Save" writes to the RepoSync kind (distinct from
+  // the GitRemoteCreate "Publish" kind) so we MUST subscribe to it —
+  // otherwise a save+redeploy cycle would only surface the deploy
+  // bubble and the preceding save would silently disappear.
+  const publishRuns = useOperationRuns(applicationId, 'publish');
+  const deployRuns = useOperationRuns(applicationId, 'deploy');
+  const syncRuns = useOperationRuns(applicationId, 'sync');
+
+  // Single chronological merged timeline — user turns + publish +
+  // deploy, sorted by `startedAt`. Re-sorting on every render is
+  // cheap (N ~ low dozens) and guarantees the in-progress "Working
+  // on…" card stays at its chronological slot. When the agent
+  // finishes, the same turn id flips `status` from `in-progress` to
+  // `completed` inside `turnGroupsView`, and since we key the React
+  // element by the turn id, the card updates in place — no unmount,
+  // no position change.
+  interface TimelineItem {
+    kind: 'turn' | 'operation';
+    id: string;
+    startedAt: number;
+    turn?: TurnGroupView;
+    run?: OperationRun;
+  }
+  const timelineItems: TimelineItem[] = (() => {
+    const items: TimelineItem[] = [];
+    for (const g of turnGroupsView.groups) {
+      items.push({ kind: 'turn', id: g.id, startedAt: g.startedAt, turn: g });
+    }
+    if (turnGroupsView.currentTurn) {
+      const g = turnGroupsView.currentTurn;
+      items.push({ kind: 'turn', id: g.id, startedAt: g.startedAt, turn: g });
+    }
+    for (const r of publishRuns) {
+      items.push({ kind: 'operation', id: `pub-${r.id}`, startedAt: r.startedAt, run: r });
+    }
+    for (const r of deployRuns) {
+      items.push({ kind: 'operation', id: `dep-${r.id}`, startedAt: r.startedAt, run: r });
+    }
+    for (const r of syncRuns) {
+      items.push({ kind: 'operation', id: `syn-${r.id}`, startedAt: r.startedAt, run: r });
+    }
+    items.sort((a, b) => a.startedAt - b.startedAt);
+    return items;
+  })();
 
   // Fire the all-steps-complete callback exactly once per mount.
   // Using a ref (not a dependency) prevents re-firing if the parent
@@ -394,20 +479,25 @@ export function ChatTab({
             <Thread
               composer={composer}
               hideEmpty={showTracker}
+              hideMessages={turnGroupsEnabled}
               beforeMessages={
                 <>
-                  {/* Chronological timeline — top to bottom:
+                  {/* Single chronological column. Top to bottom:
                         1. Error recovery banner (when broken)
                         2. Setup workflow (StepTracker)
-                        3. Completed user turns, oldest first
-                        4. In-progress turn (always chronologically last)
-                        5. Operation bubbles (publish / deploy)
-                        6. Pending interaction (awaiting user input)
-                      All rendered in `beforeMessages` because the flat
-                      thread below is dead — `hideAllMessages` zeroes
-                      the persisted bubble list when turn groups are on,
-                      so the overlay owns the entire visible surface
-                      and there's no split between before/after. */}
+                        3. Merged timeline of user turns +
+                           publish / deploy runs, sorted by
+                           `startedAt`. The in-progress "Working
+                           on…" card lives at its chronological
+                           slot — when the agent finishes, the
+                           same item flips to `completed` status
+                           and the card updates in place (same
+                           React key, no remount).
+                        4. Pending interaction (awaiting user input)
+                     All rendered in `beforeMessages` because the flat
+                     thread below is dead — `hideAllMessages` zeroes
+                     the persisted bubble list when turn groups are on,
+                     so the overlay owns the entire visible surface. */}
                   {applicationError ? (
                     <ErrorRecoveryBanner state={applicationError} onRetry={onResumeWorkflow} />
                   ) : null}
@@ -423,37 +513,45 @@ export function ChatTab({
                       onForceStop={handleForceStopStep}
                     />
                   ) : null}
-                  {turnGroupsEnabled ? (
-                    <>
-                      <CompletedTurnGroupsList view={turnGroupsView} allMessages={rawMessages} />
-                      <CurrentTurnCard
-                        view={turnGroupsView}
-                        allMessages={rawMessages}
-                        streaming={streamingState}
-                      />
-                      {applicationId ? (
-                        <>
-                          <OperationBubble applicationId={applicationId} kind="publish" />
-                          <OperationBubble applicationId={applicationId} kind="deploy" />
-                        </>
-                      ) : null}
-                      {pendingInteraction ? (
-                        <InteractionBubble
-                          interaction={pendingInteraction}
-                          onSubmit={respondToInteraction}
-                        />
-                      ) : null}
-                    </>
-                  ) : null}
+                  {turnGroupsEnabled
+                    ? timelineItems.map((item, idx) => {
+                        if (item.kind === 'turn' && item.turn) {
+                          return (
+                            <SingleTurnCard
+                              key={item.id}
+                              group={item.turn}
+                              allMessages={rawMessages}
+                              streaming={
+                                item.turn.status === 'in-progress' ? streamingState : undefined
+                              }
+                            />
+                          );
+                        }
+                        if (item.kind === 'operation' && item.run && applicationId) {
+                          return (
+                            <OperationRunCard
+                              key={item.id}
+                              applicationId={applicationId}
+                              kind={item.run.kind}
+                              entries={item.run.entries}
+                              runIndex={idx}
+                            />
+                          );
+                        }
+                        return null;
+                      })
+                    : null}
                 </>
               }
               afterMessages={
-                // Non-grouping chats (repo/global) keep the legacy
-                // InteractionBubble surface in `afterMessages`.
-                // When turn groups are on, everything moved into
-                // the unified `beforeMessages` timeline above and
-                // this slot stays empty.
-                !turnGroupsEnabled && pendingInteraction ? (
+                turnGroupsEnabled ? (
+                  pendingInteraction ? (
+                    <InteractionBubble
+                      interaction={pendingInteraction}
+                      onSubmit={respondToInteraction}
+                    />
+                  ) : null
+                ) : pendingInteraction ? (
                   <InteractionBubble
                     interaction={pendingInteraction}
                     onSubmit={respondToInteraction}
@@ -500,7 +598,9 @@ function ErrorRecoveryBanner({
   return (
     <div
       className={cn(
-        'animate-in fade-in-0 slide-in-from-top-1 mx-3 my-3 overflow-hidden rounded-lg border shadow-sm duration-200 ease-out',
+        // `shrink-0` — direct child of the Thread viewport flex
+        // column, so it must not be squashed when siblings expand.
+        'animate-in fade-in-0 slide-in-from-top-1 mx-3 my-3 shrink-0 overflow-hidden rounded-lg border shadow-sm duration-200 ease-out',
         'border-red-500/40 bg-red-500/5 dark:bg-red-500/10'
       )}
       role="alert"
diff --git a/src/presentation/web/components/features/chat/operation-bubble.tsx b/src/presentation/web/components/features/chat/operation-bubble.tsx
index 99f8d8db2..5e0cc6bf5 100644
--- a/src/presentation/web/components/features/chat/operation-bubble.tsx
+++ b/src/presentation/web/components/features/chat/operation-bubble.tsx
@@ -3,23 +3,41 @@
 /**
  * OperationBubble
  *
- * Static, chronological info card rendered in the chat thread for a
- * completed long-running operation on the application — currently
- * either "Publish to GitHub" (GitRemoteCreate) or "Deploy to cloud"
- * (CloudDeploy).
+ * In-chat card for a long-running application operation — "Publish
+ * to GitHub" (GitRemoteCreate) or "Deploy to cloud" (CloudDeploy).
+ *
+ * Visual contract mirrors `TurnGroupCard`:
+ *
+ * - **Collapsed by default**: header only (icon, friendly title,
+ *   event count, status badge, chevron). Users click to expand.
+ * - **In-progress** (last log entry < 10s old): auto-expanded with
+ *   a spinning fuchsia/sky header and a scrollable live-tail of
+ *   the latest entries, so the user sees work streaming in place.
+ *   Matches the in-progress TurnGroupCard styling.
+ * - **Done / failed**: collapsed by default with a static badge
+ *   (emerald check / amber warning / rose cross). Expand to see
+ *   the full log inline with per-entry timestamps.
  *
  * Source of truth: the existing `/api/operations/:kind/:id/logs`
- * endpoint which is backed by the `operation_log_entries` table.
- * This component is a THIN presentation layer — it polls the logs
- * while the operation is still writing entries and renders them in
- * order. No grouping or summarization logic lives here; any derived
- * state (e.g. "success" vs "failed") is computed from the last log
- * level of the raw entries returned by the server.
+ * endpoint backed by `operation_log_entries`. Polls on a 1.5s
+ * interval only while `in-progress`; goes static otherwise.
+ *
+ * Obeys the three-layer rule in `CLAUDE.md`: no auto-opened
+ * sidebar drawer — the card is the in-place status indicator.
  */
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Github, Rocket, CheckCircle2, XCircle, Loader2, AlertTriangle } from 'lucide-react';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  Cloud,
+  Github,
+  Loader2,
+  RefreshCw,
+  XCircle,
+} from 'lucide-react';
 import { OperationLogKind } from '@shepai/core/domain/generated/output';
 import { cn } from '@/lib/utils';
 
@@ -35,12 +53,59 @@ interface OperationLogEntryDto {
 
 interface OperationBubbleProps {
   applicationId: string;
-  kind: 'publish' | 'deploy';
+  kind: 'publish' | 'deploy' | 'sync';
+}
+
+/**
+ * Split a flat list of operation log entries into one array per
+ * "run". A run boundary is detected by an OUTER start marker — one
+ * of a small, fixed whitelist of messages emitted exactly once per
+ * use case invocation by the run-owning use case itself:
+ *
+ *   • `create-git-remote.use-case.ts`        → "Starting GitHub repository creation"
+ *   • `initiate-cloud-deployment.use-case.ts`→ "Starting deploy to <providerId>"
+ *   • `sync-repo.use-case.ts`                → "Starting save & backup"
+ *
+ * We deliberately DON'T split on any line that happens to begin
+ * with "Starting ", because cloud providers emit their own inner
+ * progress markers (e.g. "Starting Cloudflare Pages deploy for …")
+ * via the onLog callback. Those are part of the same run — not a
+ * new one — and splitting on them produced the "ghost" duplicate
+ * deploy bubble users were seeing.
+ *
+ * Orphan entries before the first whitelisted marker (legacy rows
+ * from before this convention existed) are attached to the first
+ * real run so we never drop data on the floor.
+ */
+const OUTER_START_MARKERS: readonly string[] = [
+  'Starting GitHub repository creation',
+  'Starting deploy to ',
+  'Starting save & backup',
+];
+
+function isOuterStartMarker(message: string): boolean {
+  return OUTER_START_MARKERS.some((marker) => message.startsWith(marker));
+}
+
+function splitIntoRuns(entries: OperationLogEntryDto[]): OperationLogEntryDto[][] {
+  if (entries.length === 0) return [];
+  const runs: OperationLogEntryDto[][] = [];
+  let current: OperationLogEntryDto[] = [];
+  for (const e of entries) {
+    if (isOuterStartMarker(e.message) && current.length > 0) {
+      runs.push(current);
+      current = [];
+    }
+    current.push(e);
+  }
+  if (current.length > 0) runs.push(current);
+  return runs;
 }
 
 const KIND_TO_OP: Record<OperationBubbleProps['kind'], string> = {
   publish: OperationLogKind.GitRemoteCreate,
   deploy: OperationLogKind.CloudDeploy,
+  sync: OperationLogKind.RepoSync,
 };
 
 const KIND_META = {
@@ -48,13 +113,30 @@ const KIND_META = {
     title: 'Published to GitHub',
     inProgressTitle: 'Publishing to GitHub…',
     icon: Github,
-    accent: 'text-sky-500 bg-sky-500/15',
+    idleAccent: 'bg-sky-500/15 text-sky-500',
+    liveGradient: 'border-sky-500/40 bg-gradient-to-br from-sky-500/5 via-sky-500/5 to-cyan-500/5',
+    liveChip: 'bg-gradient-to-br from-sky-500 via-blue-500 to-cyan-500 text-white shadow-sm',
+    liveText: 'text-sky-700 dark:text-sky-300',
   },
   deploy: {
     title: 'Deployed to cloud',
     inProgressTitle: 'Deploying to cloud…',
-    icon: Rocket,
-    accent: 'text-fuchsia-500 bg-fuchsia-500/15',
+    icon: Cloud,
+    idleAccent: 'bg-fuchsia-500/15 text-fuchsia-500',
+    liveGradient:
+      'border-fuchsia-500/40 bg-gradient-to-br from-fuchsia-500/5 via-purple-500/5 to-sky-500/5',
+    liveChip: 'bg-gradient-to-br from-fuchsia-500 via-purple-500 to-sky-500 text-white shadow-sm',
+    liveText: 'text-fuchsia-700 dark:text-fuchsia-300',
+  },
+  sync: {
+    title: 'Saved & pushed to GitHub',
+    inProgressTitle: 'Saving & pushing to GitHub…',
+    icon: RefreshCw,
+    idleAccent: 'bg-emerald-500/15 text-emerald-500',
+    liveGradient:
+      'border-emerald-500/40 bg-gradient-to-br from-emerald-500/5 via-emerald-500/5 to-teal-500/5',
+    liveChip: 'bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500 text-white shadow-sm',
+    liveText: 'text-emerald-700 dark:text-emerald-300',
   },
 } as const;
 
@@ -67,13 +149,6 @@ async function fetchLogs(applicationId: string, kind: OperationBubbleProps['kind
   return (await res.json()) as { entries: OperationLogEntryDto[] };
 }
 
-/**
- * Derive a human status from the raw entries. An operation is
- * "in-progress" while entries are still being appended (we can't
- * tell from logs alone so we treat the last 10 seconds of activity
- * as live). Otherwise "success" if the last entry is Info/Debug,
- * "failed" if the last entry is Error, "warn" if Warn.
- */
 type BubbleStatus = 'in-progress' | 'success' | 'failed' | 'warn' | 'empty';
 
 function deriveStatus(entries: OperationLogEntryDto[]): BubbleStatus {
@@ -104,105 +179,227 @@ function formatTime(iso: string): string {
   }
 }
 
-export function OperationBubble({ applicationId, kind }: OperationBubbleProps) {
+/** One contiguous execution of publish or deploy — a single bubble. */
+export interface OperationRun {
+  /** Stable id (first entry's id). Use as React key. */
+  id: string;
+  kind: OperationBubbleProps['kind'];
+  /** Epoch ms of the first entry — used for chronological merge. */
+  startedAt: number;
+  entries: OperationLogEntryDto[];
+}
+
+/**
+ * Fetches all log entries for this (application, kind) pair and
+ * splits them into one `OperationRun` per contiguous execution.
+ * Each republish / redeploy produces a fresh run so the caller can
+ * render them as separate bubbles, interleaved chronologically with
+ * user-turn cards by `startedAt`.
+ *
+ * Polling is driven by the LAST run only — older runs are terminal
+ * and can't change state.
+ */
+export function useOperationRuns(
+  applicationId: string | undefined,
+  kind: OperationBubbleProps['kind']
+): OperationRun[] {
   const { data } = useQuery({
-    queryKey: ['operation-logs', applicationId, kind] as const,
-    queryFn: () => fetchLogs(applicationId, kind),
+    queryKey: ['operation-logs', applicationId ?? '', kind] as const,
+    queryFn: () =>
+      applicationId
+        ? fetchLogs(applicationId, kind)
+        : Promise.resolve({ entries: [] as OperationLogEntryDto[] }),
+    enabled: Boolean(applicationId),
+    // Two-speed polling:
+    //   • 1500 ms while the LAST run is still in-progress — the
+    //     user is actively watching a live bubble.
+    //   • 2500 ms at all other times (including when there are no
+    //     entries yet). This is the critical one: when the user
+    //     clicks Save & Redeploy from the smart-deploy cluster, the
+    //     new "Starting …" entry is written by the server but the
+    //     query has nothing in-flight to trigger a refetch. Without
+    //     a baseline idle interval the new bubble wouldn't appear
+    //     until the next manual refresh. 2500 ms is fast enough to
+    //     feel immediate (the button's own progress chip holds
+    //     attention for a beat) and slow enough to be cheap.
     refetchInterval: (q) => {
-      // While still live, poll fast so new entries appear as they
-      // land. Once the operation has settled the auto-refresh
-      // relaxes — a mount is enough to hydrate the final state.
       const entries = q.state.data?.entries ?? [];
-      if (entries.length === 0) return false;
-      const status = deriveStatus(entries);
-      return status === 'in-progress' ? 1500 : false;
+      if (entries.length === 0) return 2500;
+      const runs = splitIntoRuns(entries);
+      const lastRun = runs[runs.length - 1] ?? [];
+      const status = deriveStatus(lastRun);
+      return status === 'in-progress' ? 1500 : 2500;
     },
     staleTime: 0,
   });
 
-  const entries = useMemo(() => data?.entries ?? [], [data]);
-  if (entries.length === 0) return null;
+  return useMemo<OperationRun[]>(() => {
+    const split = splitIntoRuns(data?.entries ?? []);
+    return split.map((run, idx) => {
+      const head = run[0];
+      return {
+        id: head?.id ?? `${kind}-${idx}`,
+        kind,
+        startedAt: head ? new Date(head.createdAt).getTime() : 0,
+        entries: run,
+      };
+    });
+  }, [data, kind]);
+}
+
+/**
+ * Legacy wrapper: renders every run of one (applicationId, kind)
+ * pair. Kept for callers that don't do chronological merging. New
+ * code should use `useOperationRuns` + `OperationRunCard` directly.
+ */
+export function OperationBubble({ applicationId, kind }: OperationBubbleProps) {
+  const runs = useOperationRuns(applicationId, kind);
+  if (runs.length === 0) return null;
+  return (
+    <>
+      {runs.map((run, idx) => (
+        <OperationRunCard
+          key={run.id}
+          applicationId={applicationId}
+          kind={kind}
+          entries={run.entries}
+          runIndex={idx}
+        />
+      ))}
+    </>
+  );
+}
+
+export function OperationRunCard({
+  applicationId,
+  kind,
+  entries,
+  runIndex,
+}: {
+  applicationId: string;
+  kind: OperationBubbleProps['kind'];
+  entries: OperationLogEntryDto[];
+  runIndex: number;
+}) {
+  const [expanded, setExpanded] = useState(false);
 
   const status = deriveStatus(entries);
   const meta = KIND_META[kind];
   const Icon = meta.icon;
   const isInFlight = status === 'in-progress';
 
+  // Always collapsed by default — even while in-flight. The header
+  // row still shows a spinning chip + live title so the user knows
+  // work is happening; clicking the chevron reveals the full log.
+  // Auto-expanding on every run created wall-of-text chaos once the
+  // timeline started interleaving multiple operation kinds.
+  const contentId = `op-${kind}-${applicationId}-${runIndex}`;
+
   return (
     <div
-      className={cn(
-        'border-border/60 bg-card/50 mx-3 my-2 overflow-hidden rounded-lg border shadow-sm',
-        'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out'
-      )}
+      // `shrink-0` — direct child of the Thread viewport flex-col,
+      // must not be squashed when a sibling card expands.
+      className={cn('mx-3 shrink-0 overflow-hidden', 'animate-in fade-in-0 duration-150 ease-out')}
       data-testid={`operation-bubble-${kind}`}
     >
-      <div className="flex items-center gap-2.5 px-3 py-2">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        className={cn(
+          // One-liner row: tight vertical rhythm, no borders, no
+          // card chrome — just icon · title · meta · status · chevron.
+          'group flex w-full cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-left transition-colors',
+          'hover:bg-muted/40'
+        )}
+      >
         <span
           className={cn(
-            'flex h-6 w-6 shrink-0 items-center justify-center rounded-full',
-            meta.accent
+            'flex h-4 w-4 shrink-0 items-center justify-center',
+            isInFlight ? meta.liveText : 'text-muted-foreground'
           )}
         >
-          <Icon className="h-3.5 w-3.5" />
+          {isInFlight ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Icon className="h-3.5 w-3.5" />
+          )}
         </span>
-        <div className="min-w-0 flex-1">
-          <div className="text-foreground truncate text-[12px] font-semibold">
-            {isInFlight ? meta.inProgressTitle : meta.title}
-          </div>
-          <div className="text-muted-foreground text-[10px]">
-            {entries.length} event{entries.length === 1 ? '' : 's'} · started{' '}
-            {formatTime(entries[0].createdAt)}
-          </div>
-        </div>
+        <span
+          className={cn(
+            'truncate text-[11px] font-medium',
+            isInFlight ? meta.liveText : 'text-foreground/90'
+          )}
+        >
+          {isInFlight ? meta.inProgressTitle : meta.title}
+        </span>
+        <span className="text-muted-foreground shrink-0 text-[10px]">
+          · {entries.length} event{entries.length === 1 ? '' : 's'} ·{' '}
+          {formatTime(entries[0].createdAt)}
+        </span>
+        <span className="flex-1" />
         <StatusBadge status={status} />
-      </div>
-      <ol className="border-border/60 bg-background/40 flex flex-col gap-1 border-t px-3 py-2">
-        {entries.map((e) => (
-          <li key={e.id} className="flex items-start gap-2 text-[11px] leading-relaxed">
-            <span className="text-muted-foreground/80 shrink-0 font-mono text-[10px]">
-              {formatTime(e.createdAt)}
-            </span>
-            <LevelDot level={e.level} />
-            <span className="text-foreground/90 min-w-0 flex-1 break-words whitespace-pre-wrap">
-              {e.message}
-              {e.detail ? (
-                <span className="text-muted-foreground/70 mt-0.5 block font-mono text-[10px] whitespace-pre-wrap">
-                  {e.detail}
+        <ChevronDown
+          className={cn(
+            'text-muted-foreground h-3 w-3 shrink-0 transition-transform',
+            expanded && 'rotate-180'
+          )}
+        />
+      </button>
+
+      {/* Expanded body: full list of log entries. Constrained to a
+          max-height with internal scroll so a long deploy log
+          can't blow out the chat pane's vertical space. */}
+      {expanded ? (
+        <div id={contentId} className="border-border/40 bg-background/30 mt-1 rounded-md border">
+          <ol className="flex max-h-[28rem] flex-col gap-1 overflow-y-auto px-3 py-2.5">
+            {entries.map((e) => (
+              <li key={e.id} className="flex items-start gap-2 text-[11px] leading-relaxed">
+                <span className="text-muted-foreground/80 shrink-0 font-mono text-[10px]">
+                  {formatTime(e.createdAt)}
+                </span>
+                <LevelDot level={e.level} />
+                <span className="text-foreground/90 min-w-0 flex-1 break-words whitespace-pre-wrap">
+                  {e.message}
+                  {e.detail ? (
+                    <span className="text-muted-foreground/70 mt-0.5 block font-mono text-[10px] whitespace-pre-wrap">
+                      {e.detail}
+                    </span>
+                  ) : null}
                 </span>
-              ) : null}
-            </span>
-          </li>
-        ))}
-      </ol>
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
     </div>
   );
 }
 
 function StatusBadge({ status }: { status: BubbleStatus }) {
   if (status === 'in-progress') {
-    return (
-      <span className="inline-flex items-center gap-1 text-[10px] text-sky-500">
-        <Loader2 className="h-3 w-3 animate-spin" /> in progress
-      </span>
-    );
+    // The header chip spinner already communicates live state.
+    // Hide this badge to avoid a double spinner in the header row.
+    return null;
   }
   if (status === 'success') {
     return (
-      <span className="inline-flex items-center gap-1 text-[10px] text-emerald-500">
+      <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-emerald-500">
         <CheckCircle2 className="h-3 w-3" /> done
       </span>
     );
   }
   if (status === 'warn') {
     return (
-      <span className="inline-flex items-center gap-1 text-[10px] text-amber-500">
+      <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-amber-500">
         <AlertTriangle className="h-3 w-3" /> warnings
       </span>
     );
   }
   if (status === 'failed') {
     return (
-      <span className="inline-flex items-center gap-1 text-[10px] text-rose-500">
+      <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-rose-500">
         <XCircle className="h-3 w-3" /> failed
       </span>
     );
diff --git a/src/presentation/web/components/features/chat/turn-group-card.tsx b/src/presentation/web/components/features/chat/turn-group-card.tsx
index 7d42324ea..e9077b551 100644
--- a/src/presentation/web/components/features/chat/turn-group-card.tsx
+++ b/src/presentation/web/components/features/chat/turn-group-card.tsx
@@ -3,24 +3,23 @@
 /**
  * TurnGroupCard
  *
- * One user-turn card in the chat timeline. Two modes:
+ * One user-turn card in the chat timeline. Each card has exactly two
+ * visual states: **open** (header + body) and **closed** (header only).
  *
- * - `completed`: collapsed by default, emerald check icon, click
- *   the chevron to reveal raw bubbles.
+ * - **Completed** cards default to CLOSED. Click the chevron to open
+ *   and reveal the `details` slot (raw bubbles: user message + tool
+ *   events + assistant replies).
+ * - **In-progress** cards default to OPEN showing the `condensed`
+ *   slot (user request + friendly streaming indicator — never raw
+ *   tool events, per `CLAUDE.md`'s layered rule). Clicking the
+ *   chevron FULLY collapses the card to header-only.
  *
- * - `in-progress`: the card's DEFAULT surface is the `condensed`
- *   slot — typically the user's request plus a friendly streaming
- *   indicator ("Working on…"), never raw tool events. The chevron
- *   progressively discloses the `details` slot containing every
- *   raw bubble (thinking / read / output / assistant text).
- *
- * This preserves the layered rule from `CLAUDE.md` in this
- * directory: by default the chat shows a high-level friendly
- * surface with the user request visible and nothing else raw.
- * Raw events are hidden behind a single click.
+ * When a card transitions from in-progress to completed (agent
+ * finishes), the body auto-closes so the timeline doesn't suddenly
+ * sprout a bunch of raw-bubble tails across every finished turn.
  */
 
-import { useState, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { ChevronDown, CheckCircle2, MessageSquare, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -33,12 +32,11 @@ export interface TurnGroupCardProps {
   assistantMessageCount: number;
   /** Render mode — see file header. */
   status: 'completed' | 'in-progress';
-  /** Default visible content for in-progress cards (user message
-   *  + friendly streaming indicator). Ignored for completed cards. */
+  /** Body content for in-progress cards (user message + friendly
+   *  streaming indicator). Only used when `status === 'in-progress'`. */
   condensed?: ReactNode;
-  /** Progressive-disclosure body revealed when the chevron is
-   *  toggled — raw bubbles, tool events, full history. Falls back
-   *  to `children` if not provided. */
+  /** Body content for completed cards — raw bubbles, tool events,
+   *  full history. Falls back to `children` if not provided. */
   details?: ReactNode;
   /** Legacy slot used by completed cards — equivalent to `details`. */
   children?: ReactNode;
@@ -54,14 +52,25 @@ export function TurnGroupCard({
   children,
 }: TurnGroupCardProps) {
   const isInProgress = status === 'in-progress';
-  const [userExpanded, setUserExpanded] = useState(false);
+  // Start OPEN for in-progress (user wants to see live progress),
+  // CLOSED for completed (user has to click to open history).
+  const [open, setOpen] = useState<boolean>(isInProgress);
+  // When a card finishes, auto-collapse so the timeline stays
+  // compact — the user can still click to expand the details.
+  useEffect(() => {
+    if (!isInProgress) setOpen(false);
+  }, [isInProgress]);
+
   const contentId = `${id}-content`;
-  const disclosureBody = details ?? children ?? null;
+  const body = isInProgress ? condensed : (details ?? children ?? null);
 
   return (
     <div
+      // `shrink-0` — direct child of the ThreadPrimitive.Viewport
+      // flex-col. Without it a sibling card expanding (e.g. a deploy
+      // log) squashes this card's header into its own border.
       className={cn(
-        'mx-3 my-2 overflow-hidden rounded-lg border shadow-sm',
+        'mx-3 my-2 shrink-0 overflow-hidden rounded-lg border shadow-sm',
         'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out',
         isInProgress
           ? 'border-fuchsia-500/40 bg-gradient-to-br from-fuchsia-500/5 via-purple-500/5 to-sky-500/5'
@@ -70,11 +79,11 @@ export function TurnGroupCard({
     >
       <button
         type="button"
-        onClick={() => setUserExpanded((v) => !v)}
-        aria-expanded={userExpanded}
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
         aria-controls={contentId}
         className={cn(
-          'group flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left transition-colors',
+          'group flex min-h-12 w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left transition-colors',
           'hover:bg-muted/50'
         )}
       >
@@ -109,23 +118,12 @@ export function TurnGroupCard({
         <ChevronDown
           className={cn(
             'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
-            userExpanded && 'rotate-180'
+            open && 'rotate-180'
           )}
         />
       </button>
 
-      {/* Default surface for in-progress cards — user request +
-          friendly streaming indicator. Never raw tool events.
-          Hidden while the chevron is expanded so the `details`
-          body below becomes the single source of content and the
-          user message doesn't render twice. */}
-      {isInProgress && condensed && !userExpanded ? (
-        <div className="border-border/60 bg-background/40 border-t px-3 py-2">{condensed}</div>
-      ) : null}
-
-      {/* Progressive disclosure: raw bubbles hidden until the
-          chevron is clicked. */}
-      {userExpanded ? (
+      {open && body ? (
         <div
           id={contentId}
           className={cn(
@@ -135,9 +133,7 @@ export function TurnGroupCard({
               : 'border-border/60 bg-background/40'
           )}
         >
-          {disclosureBody ?? (
-            <div className="text-muted-foreground text-[11px] italic">No content.</div>
-          )}
+          {body}
         </div>
       ) : null}
     </div>
diff --git a/src/presentation/web/components/features/chat/turn-group-list.tsx b/src/presentation/web/components/features/chat/turn-group-list.tsx
index 1a33ac46b..cd4a8b93c 100644
--- a/src/presentation/web/components/features/chat/turn-group-list.tsx
+++ b/src/presentation/web/components/features/chat/turn-group-list.tsx
@@ -22,7 +22,7 @@ import type { InteractiveMessage } from '@shepai/core/domain/generated/output';
 import { InteractiveMessageRole } from '@shepai/core/domain/generated/output';
 import { TurnGroupCard } from './turn-group-card';
 
-interface TurnGroupView {
+export interface TurnGroupView {
   id: string;
   title: string;
   userMessagePreview: string;
@@ -248,6 +248,83 @@ export function CurrentTurnCard({ view, allMessages, streaming }: CurrentTurnCar
   );
 }
 
+/**
+ * Renders a SINGLE turn group (completed or in-progress) as a
+ * standalone card. Used by `ChatTab` when it builds the unified
+ * chronological timeline — the timeline interleaves user turns
+ * with publish/deploy operation bubbles by `startedAt`, so each
+ * turn has to be renderable on its own at an arbitrary position.
+ *
+ * The in-progress variant requires `streaming` so the live card
+ * keeps its condensed "Thinking…" / "Working…" indicator. When the
+ * agent finishes, the caller flips `status` to `completed` on the
+ * SAME turn id and the card stays in place — React key stability
+ * ensures no unmount / remount, matching the user's expectation
+ * that "Working on" becomes a completed card without relocating.
+ */
+export function SingleTurnCard({
+  group,
+  allMessages,
+  streaming,
+}: {
+  group: TurnGroupView;
+  allMessages: readonly InteractiveMessage[];
+  streaming?: TurnStreamingState;
+}) {
+  const byId = new Map<string, InteractiveMessage>();
+  for (const m of allMessages) byId.set(m.id, m);
+  const isInProgress = group.status === 'in-progress';
+
+  if (!isInProgress) {
+    return (
+      <TurnGroupCard
+        id={group.id}
+        title={group.title}
+        status="completed"
+        assistantMessageCount={group.assistantMessageCount}
+      >
+        <TurnChildMessages messageIds={group.messageIds} byId={byId} />
+      </TurnGroupCard>
+    );
+  }
+
+  // In-progress — condensed default + details behind chevron.
+  const userMessageId = group.messageIds.find((mid) => {
+    const m = byId.get(mid);
+    return m?.role === InteractiveMessageRole.user;
+  });
+  const userMessage = userMessageId ? byId.get(userMessageId) : null;
+  const condensed = (
+    <div className="flex flex-col gap-2">
+      {userMessage ? (
+        <div className="text-foreground border-l-2 border-violet-500/50 pl-2 text-[12px] whitespace-pre-wrap">
+          <div className="text-muted-foreground/70 mb-0.5 text-[10px] font-medium tracking-wide uppercase">
+            You
+          </div>
+          {userMessage.content}
+        </div>
+      ) : null}
+      {streaming ? <CondensedStreamingIndicator streaming={streaming} /> : null}
+    </div>
+  );
+  const details = (
+    <div className="flex flex-col gap-2">
+      <TurnChildMessages messageIds={group.messageIds} byId={byId} />
+      {streaming ? <StreamingIndicator streaming={streaming} /> : null}
+    </div>
+  );
+  return (
+    <TurnGroupCard
+      id={group.id}
+      title={group.title}
+      status="in-progress"
+      assistantMessageCount={group.assistantMessageCount}
+      condensed={condensed}
+      details={details}
+    />
+  );
+}
+
 export interface CompletedTurnGroupsListProps {
   /** Pre-computed groups view (from `useTurnGroupsView`). */
   view: TurnGroupsView;
@@ -266,7 +343,10 @@ export function CompletedTurnGroupsList({ view, allMessages }: CompletedTurnGrou
   for (const m of allMessages) byId.set(m.id, m);
 
   return (
-    <div className="flex flex-col">
+    // `shrink-0` cascades: the outer wrapper must also refuse to
+    // shrink so its child cards keep their intrinsic height inside
+    // the ThreadPrimitive.Viewport flex column.
+    <div className="flex shrink-0 flex-col">
       {view.groups.map((g) => (
         <TurnGroupCard
           key={g.id}
diff --git a/src/presentation/web/hooks/agent-events-provider.tsx b/src/presentation/web/hooks/agent-events-provider.tsx
index fb6cd252b..f7bca878d 100644
--- a/src/presentation/web/hooks/agent-events-provider.tsx
+++ b/src/presentation/web/hooks/agent-events-provider.tsx
@@ -1,13 +1,18 @@
 'use client';
 
 import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import {
+  NotificationEventType,
+  type ApplicationUpdatePayload,
+  type OperationLogAppendPayload,
+} from '@shepai/core/domain/generated/output';
 import {
   useAgentEvents,
   type UseAgentEventsOptions,
   type UseAgentEventsResult,
 } from './use-agent-events';
 
-const AgentEventsContext = createContext<UseAgentEventsResult | null>(null);
+export const AgentEventsContext = createContext<UseAgentEventsResult | null>(null);
 
 interface AgentEventsProviderProps extends UseAgentEventsOptions {
   children: ReactNode;
@@ -35,3 +40,46 @@ export function useAgentEventsContext(): UseAgentEventsResult {
   }
   return ctx;
 }
+
+/**
+ * Like {@link useAgentEventsContext} but returns `null` instead of throwing
+ * when no provider is mounted — use this from components that also need to
+ * render in isolated contexts (Storybook, unit tests) where the global
+ * SSE provider is not available.
+ */
+export function useOptionalAgentEventsContext(): UseAgentEventsResult | null {
+  return useContext(AgentEventsContext);
+}
+
+/**
+ * Latest `ApplicationUpdated` event scoped to one `applicationId`, or `null`.
+ * Returns the payload (not the full `NotificationEvent`) because callers
+ * only need the patchable fields.
+ */
+export function useApplicationUpdate(applicationId: string): ApplicationUpdatePayload | null {
+  const ctx = useContext(AgentEventsContext);
+  const last = ctx?.lastEvent;
+  if (!last) return null;
+  if (last.eventType !== NotificationEventType.ApplicationUpdated) return null;
+  const payload = last.applicationUpdate;
+  if (!payload) return null;
+  if (payload.applicationId !== applicationId) return null;
+  return payload;
+}
+
+/**
+ * Latest `OperationLogAppended` entry scoped to one `applicationId`, or
+ * `null`. Entries are scoped by `entry.operationId === applicationId`.
+ */
+export function useOperationLogAppend(
+  applicationId: string
+): OperationLogAppendPayload['entry'] | null {
+  const ctx = useContext(AgentEventsContext);
+  const last = ctx?.lastEvent;
+  if (!last) return null;
+  if (last.eventType !== NotificationEventType.OperationLogAppended) return null;
+  const entry = last.operationLogAppend?.entry;
+  if (!entry) return null;
+  if (entry.operationId !== applicationId) return null;
+  return entry;
+}
diff --git a/tests/integration/infrastructure/repositories/sqlite-operation-log.repository.test.ts b/tests/integration/infrastructure/repositories/sqlite-operation-log.repository.test.ts
index 87294d13b..f044aa913 100644
--- a/tests/integration/infrastructure/repositories/sqlite-operation-log.repository.test.ts
+++ b/tests/integration/infrastructure/repositories/sqlite-operation-log.repository.test.ts
@@ -10,6 +10,7 @@ import type Database from 'better-sqlite3';
 import { createInMemoryDatabase, tableExists } from '../../../helpers/database.helper.js';
 import { runSQLiteMigrations } from '@/infrastructure/persistence/sqlite/migrations.js';
 import { SQLiteOperationLogRepository } from '@/infrastructure/repositories/sqlite-operation-log.repository.js';
+import { InMemoryOperationLogEventBus } from '@/infrastructure/services/events/in-memory-operation-log-event-bus.js';
 import { OperationLogKind, OperationLogLevel } from '@/domain/generated/output.js';
 
 describe('SQLiteOperationLogRepository', () => {
@@ -19,7 +20,7 @@ describe('SQLiteOperationLogRepository', () => {
   beforeEach(async () => {
     db = createInMemoryDatabase();
     await runSQLiteMigrations(db);
-    repo = new SQLiteOperationLogRepository(db);
+    repo = new SQLiteOperationLogRepository(db, new InMemoryOperationLogEventBus());
   });
 
   it('creates the operation_log_entries table via migration 062', () => {
diff --git a/tests/unit/application/use-cases/agents/compute-application-deltas.test.ts b/tests/unit/application/use-cases/agents/compute-application-deltas.test.ts
new file mode 100644
index 000000000..3d4ee883d
--- /dev/null
+++ b/tests/unit/application/use-cases/agents/compute-application-deltas.test.ts
@@ -0,0 +1,169 @@
+/**
+ * computeApplicationDeltas Unit Tests
+ *
+ * Covers the pure diff helper that emits ApplicationUpdated notifications
+ * when any watched Application field changes against the cached snapshot.
+ *
+ * Seed case (no prev) → zero events.
+ * No-change case → zero events.
+ * Single-field change → exactly one event carrying the full updated payload.
+ * Multi-field change → exactly one event carrying both new values.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { computeApplicationDeltas } from '@/application/use-cases/agents/stream-agent-events/compute-application-deltas.js';
+import type { CachedApplicationState } from '@/application/use-cases/agents/stream-agent-events/stream-agent-events.types.js';
+
+import type { Application } from '@/domain/generated/output.js';
+import {
+  ApplicationStatus,
+  CloudDeploymentProvider,
+  NotificationEventType,
+  NotificationSeverity,
+} from '@/domain/generated/output.js';
+
+const ISO_NOW = '2026-04-14T10:00:00Z';
+
+function makeApplication(overrides: Partial<Application> = {}): Application {
+  return {
+    id: 'app-1',
+    name: 'Test app',
+    slug: 'test-app',
+    description: 'desc',
+    repositoryPath: '/tmp/app',
+    additionalPaths: [],
+    status: ApplicationStatus.Idle,
+    setupComplete: false,
+    createdAt: ISO_NOW,
+    updatedAt: ISO_NOW,
+    ...overrides,
+  } as Application;
+}
+
+function makeCache(overrides: Partial<CachedApplicationState> = {}): CachedApplicationState {
+  return {
+    setupComplete: false,
+    status: ApplicationStatus.Idle,
+    gitRemoteUrl: undefined,
+    cloudDeploymentProvider: undefined,
+    ...overrides,
+  };
+}
+
+describe('computeApplicationDeltas', () => {
+  it('returns zero events when prev is undefined (seed case)', () => {
+    const app = makeApplication();
+
+    const events = computeApplicationDeltas({ application: app, prev: undefined });
+
+    expect(events).toEqual([]);
+  });
+
+  it('returns zero events when no watched field changed', () => {
+    const app = makeApplication({
+      setupComplete: true,
+      status: ApplicationStatus.Active,
+      gitRemoteUrl: 'https://github.com/user/repo',
+      cloudDeploymentProvider: CloudDeploymentProvider.CloudflarePages,
+    });
+    const prev = makeCache({
+      setupComplete: true,
+      status: ApplicationStatus.Active,
+      gitRemoteUrl: 'https://github.com/user/repo',
+      cloudDeploymentProvider: CloudDeploymentProvider.CloudflarePages,
+    });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toEqual([]);
+  });
+
+  it('emits one event when setupComplete flips false → true', () => {
+    const app = makeApplication({ setupComplete: true });
+    const prev = makeCache({ setupComplete: false });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toHaveLength(1);
+    const [event] = events;
+    expect(event.kind).toBe('notification');
+    if (event.kind !== 'notification') throw new Error('expected notification');
+    expect(event.event.eventType).toBe(NotificationEventType.ApplicationUpdated);
+    expect(event.event.severity).toBe(NotificationSeverity.Info);
+    expect(event.event.featureId).toBe(app.id);
+    expect(event.event.featureName).toBe(app.name);
+    expect(event.event.applicationUpdate).toEqual({
+      applicationId: app.id,
+      setupComplete: true,
+      status: app.status,
+      gitRemoteUrl: undefined,
+      cloudDeploymentProvider: undefined,
+    });
+  });
+
+  it('emits one event when status transitions Idle → Error', () => {
+    const app = makeApplication({ status: ApplicationStatus.Error });
+    const prev = makeCache({ status: ApplicationStatus.Idle });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toHaveLength(1);
+    const [event] = events;
+    if (event.kind !== 'notification') throw new Error('expected notification');
+    expect(event.event.applicationUpdate?.status).toBe(ApplicationStatus.Error);
+  });
+
+  it('emits one event when gitRemoteUrl goes undefined → set', () => {
+    const url = 'https://github.com/user/repo';
+    const app = makeApplication({ gitRemoteUrl: url });
+    const prev = makeCache({ gitRemoteUrl: undefined });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toHaveLength(1);
+    const [event] = events;
+    if (event.kind !== 'notification') throw new Error('expected notification');
+    expect(event.event.applicationUpdate?.gitRemoteUrl).toBe(url);
+  });
+
+  it('emits one event when cloudDeploymentProvider is selected', () => {
+    const app = makeApplication({
+      cloudDeploymentProvider: CloudDeploymentProvider.CloudflarePages,
+    });
+    const prev = makeCache({ cloudDeploymentProvider: undefined });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toHaveLength(1);
+    const [event] = events;
+    if (event.kind !== 'notification') throw new Error('expected notification');
+    expect(event.event.applicationUpdate?.cloudDeploymentProvider).toBe(
+      CloudDeploymentProvider.CloudflarePages
+    );
+  });
+
+  it('emits a single event when two fields change simultaneously', () => {
+    const app = makeApplication({
+      setupComplete: true,
+      status: ApplicationStatus.Active,
+    });
+    const prev = makeCache({
+      setupComplete: false,
+      status: ApplicationStatus.Idle,
+    });
+
+    const events = computeApplicationDeltas({ application: app, prev });
+
+    expect(events).toHaveLength(1);
+    const [event] = events;
+    if (event.kind !== 'notification') throw new Error('expected notification');
+    expect(event.event.applicationUpdate).toEqual({
+      applicationId: app.id,
+      setupComplete: true,
+      status: ApplicationStatus.Active,
+      gitRemoteUrl: undefined,
+      cloudDeploymentProvider: undefined,
+    });
+  });
+});
diff --git a/tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts b/tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts
new file mode 100644
index 000000000..101caafef
--- /dev/null
+++ b/tests/unit/application/use-cases/agents/stream-agent-events-application.test.ts
@@ -0,0 +1,203 @@
+/**
+ * StreamAgentEventsUseCase — Application delta unit tests.
+ *
+ * Covers the Application polling path:
+ *   1. First poll seeds the applicationCache without emitting events.
+ *   2. A watched-field change on the second poll emits exactly one
+ *      `ApplicationUpdated` notification with the correct payload.
+ *   3. A subsequent poll with no change emits zero additional events.
+ */
+
+import 'reflect-metadata';
+import { describe, it, expect, vi } from 'vitest';
+
+import { StreamAgentEventsUseCase } from '@/application/use-cases/agents/stream-agent-events.use-case.js';
+import type { ListFeaturesUseCase } from '@/application/use-cases/features/list-features.use-case.js';
+import type { IAgentRunRepository } from '@/application/ports/output/agents/agent-run-repository.interface.js';
+import type { IPhaseTimingRepository } from '@/application/ports/output/agents/phase-timing-repository.interface.js';
+import type { IApplicationRepository } from '@/application/ports/output/repositories/application-repository.interface.js';
+import type { IInteractiveSessionRepository } from '@/application/ports/output/repositories/interactive-session-repository.interface.js';
+import type { ICloudDeploymentEventBus } from '@/application/ports/output/services/cloud-deployment-event-bus.interface.js';
+import type { ILogger } from '@/application/ports/output/services/logger.interface.js';
+import type { IOperationLogEventBus } from '@/application/ports/output/services/operation-log-event-bus.interface.js';
+import type { IProcessLivenessProbe } from '@/application/ports/output/services/process-liveness.interface.js';
+
+import type { Application, NotificationEvent } from '@/domain/generated/output.js';
+import { ApplicationStatus, NotificationEventType } from '@/domain/generated/output.js';
+
+const ISO_NOW = '2026-04-14T10:00:00Z';
+
+function makeApp(overrides: Partial<Application> = {}): Application {
+  return {
+    id: 'app-1',
+    name: 'Test App',
+    slug: 'test-app',
+    description: 'desc',
+    repositoryPath: '/tmp/app',
+    additionalPaths: [],
+    status: ApplicationStatus.Idle,
+    setupComplete: false,
+    createdAt: ISO_NOW,
+    updatedAt: ISO_NOW,
+    deletedAt: null,
+    ...overrides,
+  } as unknown as Application;
+}
+
+function buildUseCase(listMock: () => Promise<Application[]>): StreamAgentEventsUseCase {
+  const listFeaturesStub = {
+    execute: vi.fn().mockResolvedValue([]),
+  } as unknown as ListFeaturesUseCase;
+
+  const agentRunRepo: IAgentRunRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findByThreadId: vi.fn(),
+    updateStatus: vi.fn(),
+    updatePinnedConfig: vi.fn(),
+    findRunningByPid: vi.fn(),
+    list: vi.fn().mockResolvedValue([]),
+    delete: vi.fn(),
+  };
+
+  const phaseTimingRepo: IPhaseTimingRepository = {
+    save: vi.fn(),
+    update: vi.fn(),
+    updateApprovalWait: vi.fn(),
+    findByRunId: vi.fn().mockResolvedValue([]),
+    findByFeatureId: vi.fn().mockResolvedValue([]),
+  };
+
+  const sessionRepo: IInteractiveSessionRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findByFeatureId: vi.fn().mockResolvedValue(null),
+    findAllActive: vi.fn().mockResolvedValue([]),
+    updateStatus: vi.fn(),
+    updateLastActivity: vi.fn(),
+    markAllActiveStopped: vi.fn(),
+    countActiveSessions: vi.fn().mockResolvedValue(0),
+    updateAgentSessionId: vi.fn(),
+    getAgentSessionId: vi.fn().mockResolvedValue(null),
+    findLatestAgentSessionIdForFeature: vi.fn().mockResolvedValue(null),
+    updateTurnStatus: vi.fn(),
+    getTurnStatuses: vi.fn().mockResolvedValue(new Map()),
+    getAllActiveTurnStatuses: vi.fn().mockResolvedValue(new Map()),
+    accumulateUsage: vi.fn(),
+    getUsage: vi.fn().mockResolvedValue(null),
+  };
+
+  const processLiveness: IProcessLivenessProbe = {
+    isProcessAlive: vi.fn().mockReturnValue(true),
+  };
+
+  const cloudEventBus: ICloudDeploymentEventBus = {
+    publish: vi.fn(),
+    subscribe: vi.fn().mockReturnValue(() => undefined),
+  };
+
+  const applicationRepo: IApplicationRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findBySlug: vi.fn().mockResolvedValue(null),
+    findByPath: vi.fn().mockResolvedValue(null),
+    list: listMock,
+    update: vi.fn(),
+    softDelete: vi.fn(),
+    restore: vi.fn(),
+  };
+
+  const operationLogEventBus: IOperationLogEventBus = {
+    publish: vi.fn(),
+    subscribe: vi.fn().mockReturnValue(() => undefined),
+  };
+
+  const logger: ILogger = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  };
+
+  return new StreamAgentEventsUseCase(
+    listFeaturesStub,
+    agentRunRepo,
+    phaseTimingRepo,
+    sessionRepo,
+    processLiveness,
+    cloudEventBus,
+    applicationRepo,
+    operationLogEventBus,
+    logger
+  );
+}
+
+interface Envelope {
+  kind: string;
+  event?: NotificationEvent;
+}
+
+async function collectAppUpdates(useCase: StreamAgentEventsUseCase): Promise<Envelope[]> {
+  const controller = new AbortController();
+  const events: Envelope[] = [];
+
+  // Abort after enough time to go through multiple 1ms poll cycles.
+  const drainTimer = setTimeout(() => controller.abort(), 150);
+
+  try {
+    for await (const event of useCase.execute({
+      signal: controller.signal,
+      pollIntervalMs: 1,
+    })) {
+      events.push(event as Envelope);
+    }
+  } finally {
+    clearTimeout(drainTimer);
+  }
+
+  return events;
+}
+
+describe('StreamAgentEventsUseCase — application deltas', () => {
+  it('first poll seeds the cache silently and a later setupComplete flip emits exactly one ApplicationUpdated', async () => {
+    const seed = makeApp({ setupComplete: false });
+    const transitioned = makeApp({ setupComplete: true });
+
+    // First call returns seed, every subsequent call returns the transitioned row.
+    const listMock = vi.fn().mockResolvedValueOnce([seed]).mockResolvedValue([transitioned]);
+
+    const useCase = buildUseCase(listMock);
+    const events = await collectAppUpdates(useCase);
+
+    const appEvents = events.filter(
+      (e) =>
+        e.kind === 'notification' && e.event?.eventType === NotificationEventType.ApplicationUpdated
+    );
+
+    expect(appEvents.length).toBe(1);
+    expect(appEvents[0]?.event?.applicationUpdate).toEqual({
+      applicationId: 'app-1',
+      setupComplete: true,
+      status: ApplicationStatus.Idle,
+      gitRemoteUrl: undefined,
+      cloudDeploymentProvider: undefined,
+    });
+    // list() was called at least 3 times (seed + transition + stable).
+    expect(listMock.mock.calls.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('no watched-field change across polls yields zero ApplicationUpdated events', async () => {
+    const app = makeApp({ setupComplete: false });
+    const listMock = vi.fn().mockResolvedValue([app]);
+
+    const useCase = buildUseCase(listMock);
+    const events = await collectAppUpdates(useCase);
+
+    const appEvents = events.filter(
+      (e) =>
+        e.kind === 'notification' && e.event?.eventType === NotificationEventType.ApplicationUpdated
+    );
+
+    expect(appEvents.length).toBe(0);
+  });
+});
diff --git a/tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts b/tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts
new file mode 100644
index 000000000..0bb6b8efc
--- /dev/null
+++ b/tests/unit/application/use-cases/agents/stream-agent-events-operation-log-bus.test.ts
@@ -0,0 +1,248 @@
+/**
+ * StreamAgentEventsUseCase — Operation-log bus subscription tests.
+ *
+ * Verifies that:
+ *   1. A publish on the bus while the generator is awaiting the next poll
+ *      tick is re-emitted as an `OperationLogAppended` notification carrying
+ *      the full entry payload.
+ *   2. The subscription is torn down on signal abort.
+ */
+
+import 'reflect-metadata';
+import { describe, it, expect, vi } from 'vitest';
+
+import { StreamAgentEventsUseCase } from '@/application/use-cases/agents/stream-agent-events.use-case.js';
+import type { ListFeaturesUseCase } from '@/application/use-cases/features/list-features.use-case.js';
+import type { IAgentRunRepository } from '@/application/ports/output/agents/agent-run-repository.interface.js';
+import type { IPhaseTimingRepository } from '@/application/ports/output/agents/phase-timing-repository.interface.js';
+import type { IApplicationRepository } from '@/application/ports/output/repositories/application-repository.interface.js';
+import type { IInteractiveSessionRepository } from '@/application/ports/output/repositories/interactive-session-repository.interface.js';
+import type { ICloudDeploymentEventBus } from '@/application/ports/output/services/cloud-deployment-event-bus.interface.js';
+import type { ILogger } from '@/application/ports/output/services/logger.interface.js';
+import type { IProcessLivenessProbe } from '@/application/ports/output/services/process-liveness.interface.js';
+
+import { InMemoryOperationLogEventBus } from '@/infrastructure/services/events/in-memory-operation-log-event-bus.js';
+
+import type { NotificationEvent, OperationLogEntry } from '@/domain/generated/output.js';
+import {
+  NotificationEventType,
+  NotificationSeverity,
+  OperationLogKind,
+  OperationLogLevel,
+} from '@/domain/generated/output.js';
+
+function buildUseCase(bus: InMemoryOperationLogEventBus): StreamAgentEventsUseCase {
+  const listFeaturesStub = {
+    execute: vi.fn().mockResolvedValue([]),
+  } as unknown as ListFeaturesUseCase;
+
+  const agentRunRepo: IAgentRunRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findByThreadId: vi.fn(),
+    updateStatus: vi.fn(),
+    updatePinnedConfig: vi.fn(),
+    findRunningByPid: vi.fn(),
+    list: vi.fn().mockResolvedValue([]),
+    delete: vi.fn(),
+  };
+
+  const phaseTimingRepo: IPhaseTimingRepository = {
+    save: vi.fn(),
+    update: vi.fn(),
+    updateApprovalWait: vi.fn(),
+    findByRunId: vi.fn().mockResolvedValue([]),
+    findByFeatureId: vi.fn().mockResolvedValue([]),
+  };
+
+  const sessionRepo: IInteractiveSessionRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findByFeatureId: vi.fn().mockResolvedValue(null),
+    findAllActive: vi.fn().mockResolvedValue([]),
+    updateStatus: vi.fn(),
+    updateLastActivity: vi.fn(),
+    markAllActiveStopped: vi.fn(),
+    countActiveSessions: vi.fn().mockResolvedValue(0),
+    updateAgentSessionId: vi.fn(),
+    getAgentSessionId: vi.fn().mockResolvedValue(null),
+    findLatestAgentSessionIdForFeature: vi.fn().mockResolvedValue(null),
+    updateTurnStatus: vi.fn(),
+    getTurnStatuses: vi.fn().mockResolvedValue(new Map()),
+    getAllActiveTurnStatuses: vi.fn().mockResolvedValue(new Map()),
+    accumulateUsage: vi.fn(),
+    getUsage: vi.fn().mockResolvedValue(null),
+  };
+
+  const processLiveness: IProcessLivenessProbe = {
+    isProcessAlive: vi.fn().mockReturnValue(true),
+  };
+
+  const cloudEventBus: ICloudDeploymentEventBus = {
+    publish: vi.fn(),
+    subscribe: vi.fn().mockReturnValue(() => undefined),
+  };
+
+  const applicationRepo: IApplicationRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findBySlug: vi.fn().mockResolvedValue(null),
+    findByPath: vi.fn().mockResolvedValue(null),
+    list: vi.fn().mockResolvedValue([]),
+    update: vi.fn(),
+    softDelete: vi.fn(),
+    restore: vi.fn(),
+  };
+
+  const logger: ILogger = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  };
+
+  return new StreamAgentEventsUseCase(
+    listFeaturesStub,
+    agentRunRepo,
+    phaseTimingRepo,
+    sessionRepo,
+    processLiveness,
+    cloudEventBus,
+    applicationRepo,
+    bus,
+    logger
+  );
+}
+
+function makeEntry(overrides: Partial<OperationLogEntry> = {}): OperationLogEntry {
+  return {
+    id: 'log-1',
+    operationKind: OperationLogKind.ApplicationSetup,
+    operationId: 'app-1',
+    level: OperationLogLevel.Info,
+    message: 'hello world',
+    createdAt: new Date('2026-04-14T10:00:00Z'),
+    updatedAt: new Date('2026-04-14T10:00:00Z'),
+    ...overrides,
+  } as unknown as OperationLogEntry;
+}
+
+interface Envelope {
+  kind: string;
+  event?: NotificationEvent;
+}
+
+describe('StreamAgentEventsUseCase — operation log bus', () => {
+  it('re-emits a publish as an OperationLogAppended notification', async () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const useCase = buildUseCase(bus);
+    const controller = new AbortController();
+
+    const entry = makeEntry({ message: 'first entry' });
+    const received: Envelope[] = [];
+
+    // Long poll interval — we want all events to come from the bus, not polling.
+    const iterator = useCase.execute({
+      signal: controller.signal,
+      pollIntervalMs: 10_000,
+    });
+
+    const consume = (async () => {
+      for await (const event of iterator) {
+        received.push(event as Envelope);
+        if ((event as Envelope).event?.eventType === NotificationEventType.OperationLogAppended) {
+          controller.abort();
+        }
+      }
+    })();
+
+    // Let the subscription attach before publishing.
+    await new Promise((resolve) => setImmediate(resolve));
+    bus.publish({ entry });
+
+    await consume;
+
+    const appended = received.find(
+      (e) =>
+        e.kind === 'notification' &&
+        e.event?.eventType === NotificationEventType.OperationLogAppended
+    );
+    expect(appended).toBeDefined();
+    expect(appended?.event?.operationLogAppend?.entry).toEqual(entry);
+    expect(appended?.event?.agentRunId).toBe('app-1');
+    expect(appended?.event?.featureId).toBe('app-1');
+    expect(appended?.event?.severity).toBe(NotificationSeverity.Info);
+  });
+
+  it('maps Warn / Error levels to Warning / Error severity', async () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const useCase = buildUseCase(bus);
+    const controller = new AbortController();
+
+    const received: Envelope[] = [];
+    let seenCount = 0;
+
+    const iterator = useCase.execute({
+      signal: controller.signal,
+      pollIntervalMs: 10_000,
+    });
+
+    const consume = (async () => {
+      for await (const event of iterator) {
+        received.push(event as Envelope);
+        if ((event as Envelope).event?.eventType === NotificationEventType.OperationLogAppended) {
+          seenCount++;
+          if (seenCount >= 2) controller.abort();
+        }
+      }
+    })();
+
+    await new Promise((resolve) => setImmediate(resolve));
+    bus.publish({
+      entry: makeEntry({ id: 'log-w', level: OperationLogLevel.Warn, message: 'warn' }),
+    });
+    bus.publish({
+      entry: makeEntry({ id: 'log-e', level: OperationLogLevel.Error, message: 'err' }),
+    });
+
+    await consume;
+
+    const appendedEvents = received.filter(
+      (e) => e.event?.eventType === NotificationEventType.OperationLogAppended
+    );
+    expect(appendedEvents.length).toBeGreaterThanOrEqual(2);
+    expect(appendedEvents[0]?.event?.severity).toBe(NotificationSeverity.Warning);
+    expect(appendedEvents[1]?.event?.severity).toBe(NotificationSeverity.Error);
+  });
+
+  it('unsubscribes on signal abort so later publishes do not reach a closed generator', async () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const useCase = buildUseCase(bus);
+    const controller = new AbortController();
+
+    const received: Envelope[] = [];
+    const iterator = useCase.execute({
+      signal: controller.signal,
+      pollIntervalMs: 10_000,
+    });
+
+    const consume = (async () => {
+      for await (const event of iterator) {
+        received.push(event as Envelope);
+        controller.abort();
+      }
+    })();
+
+    await new Promise((resolve) => setImmediate(resolve));
+    bus.publish({ entry: makeEntry({ id: 'log-1' }) });
+
+    await consume;
+    const countAfterAbort = received.length;
+
+    // Publishing after abort must NOT reach the (now-returned) generator.
+    bus.publish({ entry: makeEntry({ id: 'log-2' }) });
+    await new Promise((resolve) => setImmediate(resolve));
+
+    expect(received.length).toBe(countAfterAbort);
+  });
+});
diff --git a/tests/unit/application/use-cases/agents/stream-agent-events.use-case.test.ts b/tests/unit/application/use-cases/agents/stream-agent-events.use-case.test.ts
index 9a465cfb0..0eecfe3d7 100644
--- a/tests/unit/application/use-cases/agents/stream-agent-events.use-case.test.ts
+++ b/tests/unit/application/use-cases/agents/stream-agent-events.use-case.test.ts
@@ -17,8 +17,10 @@ import type { ListFeaturesUseCase } from '@/application/use-cases/features/list-
 import type { IAgentRunRepository } from '@/application/ports/output/agents/agent-run-repository.interface.js';
 import type { IPhaseTimingRepository } from '@/application/ports/output/agents/phase-timing-repository.interface.js';
 import type { IInteractiveSessionRepository } from '@/application/ports/output/repositories/interactive-session-repository.interface.js';
+import type { IApplicationRepository } from '@/application/ports/output/repositories/application-repository.interface.js';
 import type { ICloudDeploymentEventBus } from '@/application/ports/output/services/cloud-deployment-event-bus.interface.js';
 import type { ILogger } from '@/application/ports/output/services/logger.interface.js';
+import type { IOperationLogEventBus } from '@/application/ports/output/services/operation-log-event-bus.interface.js';
 import type { IProcessLivenessProbe } from '@/application/ports/output/services/process-liveness.interface.js';
 
 import type { AgentRun, Feature } from '@/domain/generated/output.js';
@@ -124,6 +126,22 @@ function createUseCase(args: {
     subscribe: vi.fn().mockReturnValue(() => undefined),
   };
 
+  const applicationRepo: IApplicationRepository = {
+    create: vi.fn(),
+    findById: vi.fn().mockResolvedValue(null),
+    findBySlug: vi.fn().mockResolvedValue(null),
+    findByPath: vi.fn().mockResolvedValue(null),
+    list: vi.fn().mockResolvedValue([]),
+    update: vi.fn(),
+    softDelete: vi.fn(),
+    restore: vi.fn(),
+  };
+
+  const operationLogEventBus: IOperationLogEventBus = {
+    publish: vi.fn(),
+    subscribe: vi.fn().mockReturnValue(() => undefined),
+  };
+
   const logger: ILogger = {
     debug: vi.fn(),
     info: vi.fn(),
@@ -138,6 +156,8 @@ function createUseCase(args: {
     sessionRepo,
     processLiveness,
     cloudEventBus,
+    applicationRepo,
+    operationLogEventBus,
     logger
   );
 
@@ -242,6 +262,20 @@ describe('StreamAgentEventsUseCase', () => {
       publish: vi.fn(),
       subscribe: vi.fn().mockReturnValue(() => undefined),
     };
+    const applicationRepo: IApplicationRepository = {
+      create: vi.fn(),
+      findById: vi.fn().mockResolvedValue(null),
+      findBySlug: vi.fn().mockResolvedValue(null),
+      findByPath: vi.fn().mockResolvedValue(null),
+      list: vi.fn().mockResolvedValue([]),
+      update: vi.fn(),
+      softDelete: vi.fn(),
+      restore: vi.fn(),
+    };
+    const operationLogEventBus: IOperationLogEventBus = {
+      publish: vi.fn(),
+      subscribe: vi.fn().mockReturnValue(() => undefined),
+    };
     const logger: ILogger = {
       debug: vi.fn(),
       info: vi.fn(),
@@ -259,6 +293,8 @@ describe('StreamAgentEventsUseCase', () => {
       sessionRepo,
       processLiveness,
       cloudEventBus,
+      applicationRepo,
+      operationLogEventBus,
       logger
     );
 
@@ -327,6 +363,20 @@ describe('StreamAgentEventsUseCase', () => {
       publish: vi.fn(),
       subscribe: vi.fn().mockReturnValue(() => undefined),
     };
+    const applicationRepo: IApplicationRepository = {
+      create: vi.fn(),
+      findById: vi.fn().mockResolvedValue(null),
+      findBySlug: vi.fn().mockResolvedValue(null),
+      findByPath: vi.fn().mockResolvedValue(null),
+      list: vi.fn().mockResolvedValue([]),
+      update: vi.fn(),
+      softDelete: vi.fn(),
+      restore: vi.fn(),
+    };
+    const operationLogEventBus: IOperationLogEventBus = {
+      publish: vi.fn(),
+      subscribe: vi.fn().mockReturnValue(() => undefined),
+    };
     const logger: ILogger = {
       debug: vi.fn(),
       info: vi.fn(),
@@ -341,6 +391,8 @@ describe('StreamAgentEventsUseCase', () => {
       sessionRepo,
       processLiveness,
       cloudEventBus,
+      applicationRepo,
+      operationLogEventBus,
       logger
     );
 
diff --git a/tests/unit/application/use-cases/applications/create-application.use-case.test.ts b/tests/unit/application/use-cases/applications/create-application.use-case.test.ts
index 27132d992..fec1d07b0 100644
--- a/tests/unit/application/use-cases/applications/create-application.use-case.test.ts
+++ b/tests/unit/application/use-cases/applications/create-application.use-case.test.ts
@@ -9,6 +9,7 @@ import type { IApplicationCreationPromptBuilder } from '@/application/ports/outp
 import type { IApplicationBriefStore } from '@/application/ports/output/services/application-brief-store.interface.js';
 import type { IApplicationScaffolder } from '@/application/ports/output/services/application-scaffolder.interface.js';
 import type { IInteractiveMessageRepository } from '@/application/ports/output/repositories/interactive-message-repository.interface.js';
+import type { IOperationLogRepository } from '@/application/ports/output/repositories/operation-log.repository.interface.js';
 import type { CreateProjectUseCase } from '@/application/use-cases/projects/create-project.use-case.js';
 import type { SendInteractiveMessageUseCase } from '@/application/use-cases/interactive/send-interactive-message.use-case.js';
 import type { RunWorkflowUseCase } from '@/application/use-cases/workflows/run-workflow.use-case.js';
@@ -92,6 +93,14 @@ function createMockMessageRepo(): IInteractiveMessageRepository {
   };
 }
 
+function createMockOperationLogRepo(): IOperationLogRepository {
+  return {
+    append: vi.fn().mockResolvedValue(undefined),
+    listByScope: vi.fn().mockResolvedValue([]),
+    pruneBefore: vi.fn().mockResolvedValue(0),
+  };
+}
+
 describe('CreateApplicationUseCase', () => {
   let useCase: CreateApplicationUseCase;
   let mockAppRepo: IApplicationRepository;
@@ -103,6 +112,7 @@ describe('CreateApplicationUseCase', () => {
   let mockSessionRepo: IInteractiveSessionRepository;
   let mockScaffolder: IApplicationScaffolder;
   let mockMessageRepo: IInteractiveMessageRepository;
+  let mockOperationLogRepo: IOperationLogRepository;
   let mockLogger: ILogger;
 
   beforeEach(() => {
@@ -119,6 +129,7 @@ describe('CreateApplicationUseCase', () => {
     } as unknown as IInteractiveSessionRepository;
     mockScaffolder = createMockScaffolder();
     mockMessageRepo = createMockMessageRepo();
+    mockOperationLogRepo = createMockOperationLogRepo();
     mockLogger = {
       debug: vi.fn(),
       info: vi.fn(),
@@ -135,6 +146,7 @@ describe('CreateApplicationUseCase', () => {
       mockSessionRepo,
       mockScaffolder,
       mockMessageRepo,
+      mockOperationLogRepo,
       mockLogger
     );
   });
@@ -166,10 +178,12 @@ describe('CreateApplicationUseCase', () => {
     // background dispatch to reach it).
     await new Promise((resolve) => setImmediate(resolve));
     expect(mockScaffolder.scaffold).toHaveBeenCalledTimes(1);
-    expect(mockScaffolder.scaffold).toHaveBeenCalledWith({
-      repositoryPath: `/shep/projects/${arg.name}`,
-      projectName: 'Rest Api Users',
-    });
+    expect(mockScaffolder.scaffold).toHaveBeenCalledWith(
+      expect.objectContaining({
+        repositoryPath: `/shep/projects/${arg.name}`,
+        projectName: 'Rest Api Users',
+      })
+    );
 
     // Application was persisted with the same slug
     expect(mockAppRepo.create).toHaveBeenCalledWith(
diff --git a/tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts b/tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts
new file mode 100644
index 000000000..73d9fc4f8
--- /dev/null
+++ b/tests/unit/infrastructure/repositories/sqlite-operation-log-repository-publish.test.ts
@@ -0,0 +1,107 @@
+/**
+ * Unit test — SQLiteOperationLogRepository publishes on append.
+ *
+ * Real in-memory SQLite (via migration chain so the schema is accurate)
+ * + a spy bus. Verifies that publish fires AFTER a successful INSERT,
+ * carries the appended entry, and is SKIPPED when the INSERT throws.
+ */
+
+import 'reflect-metadata';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type Database from 'better-sqlite3';
+
+import { createInMemoryDatabase } from '../../../helpers/database.helper.js';
+import { runSQLiteMigrations } from '@/infrastructure/persistence/sqlite/migrations.js';
+import { SQLiteOperationLogRepository } from '@/infrastructure/repositories/sqlite-operation-log.repository.js';
+import type {
+  IOperationLogEventBus,
+  OperationLogEvent,
+} from '@/application/ports/output/services/operation-log-event-bus.interface.js';
+import { OperationLogKind, OperationLogLevel } from '@/domain/generated/output.js';
+
+function makeSpyBus(): IOperationLogEventBus & { publish: ReturnType<typeof vi.fn> } {
+  const publish = vi.fn();
+  const subscribe = vi.fn(() => () => {
+    /* unsubscribe no-op for the spy bus */
+  });
+  return { publish, subscribe } as unknown as IOperationLogEventBus & {
+    publish: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe('SQLiteOperationLogRepository — publish on append', () => {
+  let db: Database.Database;
+
+  beforeEach(async () => {
+    db = createInMemoryDatabase();
+    await runSQLiteMigrations(db);
+  });
+
+  it('calls bus.publish exactly once with { entry } after a successful append', async () => {
+    const bus = makeSpyBus();
+    const repo = new SQLiteOperationLogRepository(db, bus);
+
+    const appended = await repo.append({
+      operationKind: OperationLogKind.CloudDeploy,
+      operationId: 'app-1',
+      level: OperationLogLevel.Info,
+      message: 'Starting deploy',
+    });
+
+    expect(bus.publish).toHaveBeenCalledTimes(1);
+    const event = bus.publish.mock.calls[0][0] as OperationLogEvent;
+    expect(event).toEqual({ entry: appended });
+    expect(event.entry.id).toBe(appended.id);
+    expect(event.entry.message).toBe('Starting deploy');
+  });
+
+  it('publishes AFTER the row has been inserted — readers see it immediately', async () => {
+    const bus = makeSpyBus();
+    let rowsVisibleAtPublish: number | null = null;
+    bus.publish.mockImplementation(() => {
+      rowsVisibleAtPublish = (
+        db
+          .prepare(
+            'SELECT COUNT(*) as c FROM operation_log_entries WHERE operation_kind = ? AND operation_id = ?'
+          )
+          .get(OperationLogKind.CloudDeploy, 'app-1') as { c: number }
+      ).c;
+    });
+
+    const repo = new SQLiteOperationLogRepository(db, bus);
+    const appended = await repo.append({
+      operationKind: OperationLogKind.CloudDeploy,
+      operationId: 'app-1',
+      level: OperationLogLevel.Info,
+      message: 'a',
+    });
+
+    expect(rowsVisibleAtPublish).toBe(1);
+
+    const listed = await repo.listByScope(OperationLogKind.CloudDeploy, 'app-1');
+    expect(listed.map((e) => e.id)).toEqual([appended.id]);
+  });
+
+  it('does NOT publish when the INSERT throws', async () => {
+    const bus = makeSpyBus();
+    // Swap in a broken DB whose prepare throws synchronously.
+    const brokenDb = {
+      prepare: () => {
+        throw new Error('DB exploded');
+      },
+    } as unknown as Database.Database;
+
+    const repo = new SQLiteOperationLogRepository(brokenDb, bus);
+
+    await expect(
+      repo.append({
+        operationKind: OperationLogKind.CloudDeploy,
+        operationId: 'app-1',
+        level: OperationLogLevel.Info,
+        message: 'should fail',
+      })
+    ).rejects.toThrow('DB exploded');
+
+    expect(bus.publish).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/infrastructure/services/events/in-memory-operation-log-event-bus.test.ts b/tests/unit/infrastructure/services/events/in-memory-operation-log-event-bus.test.ts
new file mode 100644
index 000000000..c8070772e
--- /dev/null
+++ b/tests/unit/infrastructure/services/events/in-memory-operation-log-event-bus.test.ts
@@ -0,0 +1,125 @@
+import 'reflect-metadata';
+import { describe, expect, it, vi } from 'vitest';
+
+import { InMemoryOperationLogEventBus } from '@/infrastructure/services/events/in-memory-operation-log-event-bus.js';
+import type { OperationLogEvent } from '@/application/ports/output/services/operation-log-event-bus.interface.js';
+import {
+  OperationLogKind,
+  OperationLogLevel,
+  type OperationLogEntry,
+} from '@/domain/generated/output.js';
+
+function entry(overrides: Partial<OperationLogEntry> = {}): OperationLogEntry {
+  const now = new Date();
+  return {
+    id: 'entry-1',
+    operationKind: OperationLogKind.CloudDeploy,
+    operationId: 'app-1',
+    level: OperationLogLevel.Info,
+    message: 'hello',
+    detail: undefined,
+    createdAt: now,
+    updatedAt: now,
+    ...overrides,
+  };
+}
+
+function event(overrides: Partial<OperationLogEntry> = {}): OperationLogEvent {
+  return { entry: entry(overrides) };
+}
+
+describe('InMemoryOperationLogEventBus', () => {
+  it('delivers a published event to a subscriber with the correct entry', () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const listener = vi.fn();
+    bus.subscribe(listener);
+
+    const e = event({ message: 'first' });
+    bus.publish(e);
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(e);
+    expect(listener.mock.calls[0][0].entry.message).toBe('first');
+  });
+
+  it('fans out each published event to every subscriber', () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const a = vi.fn();
+    const b = vi.fn();
+    const c = vi.fn();
+    bus.subscribe(a);
+    bus.subscribe(b);
+    bus.subscribe(c);
+
+    const e1 = event({ id: 'e1' });
+    const e2 = event({ id: 'e2' });
+    bus.publish(e1);
+    bus.publish(e2);
+
+    for (const listener of [a, b, c]) {
+      expect(listener).toHaveBeenCalledTimes(2);
+      expect(listener).toHaveBeenNthCalledWith(1, e1);
+      expect(listener).toHaveBeenNthCalledWith(2, e2);
+    }
+  });
+
+  it('unsubscribing stops delivery and a second unsubscribe is a no-op', () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const listener = vi.fn();
+    const unsubscribe = bus.subscribe(listener);
+
+    bus.publish(event({ id: 'e1' }));
+    unsubscribe();
+    bus.publish(event({ id: 'e2' }));
+    // Second unsubscribe must not throw.
+    expect(() => unsubscribe()).not.toThrow();
+    bus.publish(event({ id: 'e3' }));
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener.mock.calls[0][0].entry.id).toBe('e1');
+  });
+
+  it('continues delivering to other subscribers when one subscriber throws', () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {
+      /* silence expected error log during the throwing-subscriber test */
+    });
+
+    const good1 = vi.fn();
+    const bad = vi.fn(() => {
+      throw new Error('boom');
+    });
+    const good2 = vi.fn();
+
+    bus.subscribe(good1);
+    bus.subscribe(bad);
+    bus.subscribe(good2);
+
+    const e = event();
+    expect(() => bus.publish(e)).not.toThrow();
+
+    expect(good1).toHaveBeenCalledWith(e);
+    expect(good2).toHaveBeenCalledWith(e);
+    expect(bad).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalled();
+
+    consoleError.mockRestore();
+  });
+
+  it('publish() never throws even when the only subscriber throws', () => {
+    const bus = new InMemoryOperationLogEventBus();
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {
+      /* silence expected error log during the throwing-subscriber test */
+    });
+
+    const bad = vi.fn(() => {
+      throw new Error('boom');
+    });
+    bus.subscribe(bad);
+
+    expect(() => bus.publish(event())).not.toThrow();
+    expect(bad).toHaveBeenCalledTimes(1);
+
+    consoleError.mockRestore();
+  });
+});
diff --git a/tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts b/tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts
new file mode 100644
index 000000000..23ec779f7
--- /dev/null
+++ b/tests/unit/presentation/web/features/application-page/application-page-loader-patch.test.ts
@@ -0,0 +1,225 @@
+import React, { useState } from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  NotificationEventType,
+  NotificationSeverity,
+  ApplicationStatus,
+} from '@shepai/core/domain/generated/output';
+import type { Application, NotificationEvent } from '@shepai/core/domain/generated/output';
+import { AgentEventsContext } from '@/hooks/agent-events-provider';
+import type { UseAgentEventsResult } from '@/hooks/use-agent-events';
+import { ApplicationPageLoader } from '@/components/features/application-page/application-page-loader';
+
+// The loader renders an inner <ApplicationPage> which depends on a lot of
+// context we don't need for this test — stub it out so we can focus on the
+// SSE → cache-patch handler in isolation.
+vi.mock('@/components/features/application-page/application-page', () => ({
+  ApplicationPage: () => React.createElement('div', { 'data-testid': 'application-page-stub' }),
+}));
+
+// DeploymentStatusProvider pulls in SSE / fetch code that's irrelevant here.
+vi.mock('@/hooks/deployment-status-provider', () => ({
+  DeploymentStatusProvider: ({ children }: { children: React.ReactNode }) =>
+    React.createElement(React.Fragment, null, children),
+}));
+
+// next/navigation's notFound() throws — keep it inert so a stray call in
+// error paths doesn't explode the whole test file.
+vi.mock('next/navigation', () => ({
+  notFound: vi.fn(),
+}));
+
+const APP_ID = 'app-123';
+
+const baseApp: Application = {
+  id: APP_ID,
+  name: 'Todo',
+  slug: 'todo',
+  description: 'Todo app',
+  repositoryPath: '/tmp/todo',
+  additionalPaths: [],
+  status: ApplicationStatus.Idle,
+  setupComplete: false,
+  createdAt: new Date('2026-01-01').toISOString(),
+  updatedAt: new Date('2026-01-01').toISOString(),
+};
+
+interface AppData {
+  application: Application;
+  initialChatState?: unknown;
+  deployment?: { state: string; url: string | null };
+}
+
+function seededClient(seed: AppData | null): QueryClient {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        staleTime: Number.POSITIVE_INFINITY,
+        gcTime: Number.POSITIVE_INFINITY,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+  if (seed !== null) {
+    client.setQueryData(['application', APP_ID], seed);
+  }
+  return client;
+}
+
+function makeEvent(overrides: Partial<NotificationEvent>): NotificationEvent {
+  return {
+    eventType: NotificationEventType.AgentStarted,
+    agentRunId: 'run-1',
+    featureId: 'feat-1',
+    featureName: 'Test',
+    message: 'hi',
+    severity: NotificationSeverity.Info,
+    timestamp: '2026-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+interface HarnessRef {
+  dispatch(event: NotificationEvent | null): void;
+}
+
+function Harness({
+  client,
+  handleRef,
+}: {
+  client: QueryClient;
+  handleRef: { current: HarnessRef | null };
+}) {
+  const [lastEvent, setLastEvent] = useState<NotificationEvent | null>(null);
+  handleRef.current = {
+    dispatch: setLastEvent,
+  };
+  const value: UseAgentEventsResult = {
+    events: lastEvent ? [lastEvent] : [],
+    lastEvent,
+    connectionStatus: 'connected',
+  };
+  return React.createElement(
+    QueryClientProvider,
+    { client },
+    React.createElement(
+      AgentEventsContext.Provider,
+      { value },
+      React.createElement(ApplicationPageLoader, { applicationId: APP_ID })
+    )
+  );
+}
+
+describe('ApplicationPageLoader surgical SSE patch handler', () => {
+  let fetchSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockRejectedValue(new Error('fetch should not be called'));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('merges ApplicationUpdated payload into the cached AppData in-place', () => {
+    const client = seededClient({ application: baseApp });
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    render(React.createElement(Harness, { client, handleRef }));
+
+    act(() => {
+      handleRef.current?.dispatch(
+        makeEvent({
+          eventType: NotificationEventType.ApplicationUpdated,
+          applicationUpdate: {
+            applicationId: APP_ID,
+            setupComplete: true,
+            status: ApplicationStatus.Idle,
+          },
+        })
+      );
+    });
+
+    const patched = client.getQueryData(['application', APP_ID]) as AppData | undefined;
+    expect(patched).toBeDefined();
+    expect(patched!.application.setupComplete).toBe(true);
+    expect(patched!.application.status).toBe(ApplicationStatus.Idle);
+    expect(patched!.application.id).toBe(APP_ID);
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('ignores updates for a different applicationId', () => {
+    const client = seededClient({ application: baseApp });
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    render(React.createElement(Harness, { client, handleRef }));
+
+    act(() => {
+      handleRef.current?.dispatch(
+        makeEvent({
+          eventType: NotificationEventType.ApplicationUpdated,
+          applicationUpdate: {
+            applicationId: 'some-other-app',
+            setupComplete: true,
+            status: ApplicationStatus.Active,
+          },
+        })
+      );
+    });
+
+    const cached = client.getQueryData(['application', APP_ID]) as AppData;
+    expect(cached.application.setupComplete).toBe(false);
+    expect(cached.application.status).toBe(ApplicationStatus.Idle);
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('ignores non-ApplicationUpdated events', () => {
+    const client = seededClient({ application: baseApp });
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    render(React.createElement(Harness, { client, handleRef }));
+
+    act(() => {
+      handleRef.current?.dispatch(
+        makeEvent({
+          eventType: NotificationEventType.AgentStarted,
+        })
+      );
+    });
+
+    const cached = client.getQueryData(['application', APP_ID]) as AppData;
+    expect(cached.application).toEqual(baseApp);
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('does nothing when the cache is missing (no throw, cache stays empty)', () => {
+    const client = seededClient(null);
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    render(React.createElement(Harness, { client, handleRef }));
+
+    // Seed absent — fetch will be triggered by the `useQuery` hook. Swap
+    // the mock to return a rejected promise so we exercise the missing-cache
+    // branch of the patch handler without ever filling the cache.
+    act(() => {
+      handleRef.current?.dispatch(
+        makeEvent({
+          eventType: NotificationEventType.ApplicationUpdated,
+          applicationUpdate: {
+            applicationId: APP_ID,
+            setupComplete: true,
+            status: ApplicationStatus.Idle,
+          },
+        })
+      );
+    });
+
+    // With no seeded cache the useQuery query will have started — the key
+    // thing is that the handler must NOT have thrown and must NOT have
+    // populated the cache itself.
+    const cached = client.getQueryData(['application', APP_ID]);
+    expect(cached).toBeUndefined();
+  });
+});
diff --git a/tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.tsx b/tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.tsx
new file mode 100644
index 000000000..f59bbba53
--- /dev/null
+++ b/tests/unit/presentation/web/features/application-page/smart-deploy-logs-drawer-append.test.tsx
@@ -0,0 +1,255 @@
+/**
+ * Surgical SSE-append handler for the Smart Deploy activity drawer.
+ *
+ * The drawer used to refresh the whole merged log on ANY notification
+ * event — a full fetch × 4 operation scopes per event. This test pins
+ * down the new behaviour: one hydration fetch on open, then in-place
+ * appends whenever an `OperationLogAppended` notification arrives for
+ * this drawer's `applicationId`. Dedup is by `entry.id`.
+ */
+
+import React, { useState } from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, act, waitFor } from '@testing-library/react';
+import {
+  ApplicationStatus,
+  NotificationEventType,
+  NotificationSeverity,
+  OperationLogKind,
+  OperationLogLevel,
+} from '@shepai/core/domain/generated/output';
+import type { NotificationEvent, OperationLogEntry } from '@shepai/core/domain/generated/output';
+import { AgentEventsContext } from '@/hooks/agent-events-provider';
+import type { UseAgentEventsResult } from '@/hooks/use-agent-events';
+import { SmartDeployLogsDrawer } from '@/components/features/application-page/smart-deploy-logs-drawer';
+
+const APP_ID = 'app-1';
+
+function makeEntry(
+  overrides: Partial<OperationLogEntry> & { id: string; createdAt: string }
+): OperationLogEntry {
+  const { id, createdAt, ...rest } = overrides;
+  return {
+    id,
+    operationKind: OperationLogKind.ApplicationSetup,
+    operationId: APP_ID,
+    level: OperationLogLevel.Info,
+    message: `entry ${id}`,
+    createdAt,
+    updatedAt: createdAt,
+    ...rest,
+  };
+}
+
+function makeAppendEvent(entry: OperationLogEntry): NotificationEvent {
+  return {
+    eventType: NotificationEventType.OperationLogAppended,
+    agentRunId: 'run-1',
+    featureId: 'feat-1',
+    featureName: 'test',
+    message: 'append',
+    severity: NotificationSeverity.Info,
+    timestamp: entry.createdAt,
+    operationLogAppend: { entry },
+  };
+}
+
+interface HarnessRef {
+  dispatch(event: NotificationEvent | null): void;
+  setOpen(open: boolean): void;
+}
+
+function Harness({
+  handleRef,
+  initialOpen = true,
+}: {
+  handleRef: { current: HarnessRef | null };
+  initialOpen?: boolean;
+}) {
+  const [lastEvent, setLastEvent] = useState<NotificationEvent | null>(null);
+  const [open, setOpen] = useState(initialOpen);
+  handleRef.current = {
+    dispatch: setLastEvent,
+    setOpen,
+  };
+  const value: UseAgentEventsResult = {
+    events: lastEvent ? [lastEvent] : [],
+    lastEvent,
+    connectionStatus: 'connected',
+  };
+  return React.createElement(
+    AgentEventsContext.Provider,
+    { value },
+    React.createElement(SmartDeployLogsDrawer, {
+      open,
+      onOpenChange: setOpen,
+      applicationId: APP_ID,
+      isRunning: true,
+    })
+  );
+}
+
+const hydrationEntries: Record<string, OperationLogEntry[]> = {};
+
+function resetHydration(): void {
+  for (const key of Object.keys(hydrationEntries)) {
+    delete hydrationEntries[key];
+  }
+  hydrationEntries[OperationLogKind.ApplicationSetup] = [
+    makeEntry({ id: 'e1', createdAt: '2026-04-20T10:00:00.000Z' }),
+    makeEntry({ id: 'e2', createdAt: '2026-04-20T10:00:01.000Z' }),
+  ];
+  hydrationEntries[OperationLogKind.GitRemoteCreate] = [];
+  hydrationEntries[OperationLogKind.CloudDeploy] = [];
+  hydrationEntries[OperationLogKind.RepoSync] = [];
+}
+
+describe('SmartDeployLogsDrawer surgical append handler', () => {
+  let fetchSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    resetHydration();
+    fetchSpy = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+      const url = typeof input === 'string' ? input : (input as URL).toString();
+      for (const kind of Object.keys(hydrationEntries)) {
+        if (url.includes(`/api/operations/${kind}/`)) {
+          return new Response(JSON.stringify({ entries: hydrationEntries[kind] }), {
+            status: 200,
+          });
+        }
+      }
+      return new Response(JSON.stringify({ entries: [] }), { status: 200 });
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  async function waitForHydration(screen: ReturnType<typeof render>) {
+    await waitFor(() => {
+      expect(screen.getByText(/2 entries/i)).toBeTruthy();
+    });
+  }
+
+  it('appends a new OperationLogAppended entry in chronological position', async () => {
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    const screen = render(React.createElement(Harness, { handleRef }));
+    await waitForHydration(screen);
+
+    fetchSpy.mockClear();
+
+    const newEntry = makeEntry({
+      id: 'e3',
+      createdAt: '2026-04-20T10:00:02.000Z',
+      message: 'brand new line',
+    });
+
+    act(() => {
+      handleRef.current?.dispatch(makeAppendEvent(newEntry));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/3 entries/i)).toBeTruthy();
+    });
+    expect(screen.getByText('brand new line')).toBeTruthy();
+    // No refetch was triggered — append was surgical.
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('dedupes when the same entry event arrives twice', async () => {
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    const screen = render(React.createElement(Harness, { handleRef }));
+    await waitForHydration(screen);
+
+    const entry = makeEntry({
+      id: 'e3',
+      createdAt: '2026-04-20T10:00:02.000Z',
+      message: 'once',
+    });
+
+    act(() => {
+      handleRef.current?.dispatch(makeAppendEvent(entry));
+    });
+    await waitFor(() => {
+      expect(screen.getByText(/3 entries/i)).toBeTruthy();
+    });
+    // Dispatch a second time with a fresh reference — useEffect deps
+    // change (new object identity) but dedup should still hold.
+    act(() => {
+      handleRef.current?.dispatch(null);
+    });
+    act(() => {
+      handleRef.current?.dispatch(makeAppendEvent(entry));
+    });
+
+    // Still only 3 entries.
+    expect(screen.getByText(/3 entries/i)).toBeTruthy();
+  });
+
+  it('ignores events for a different applicationId', async () => {
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    const screen = render(React.createElement(Harness, { handleRef }));
+    await waitForHydration(screen);
+
+    const foreign = makeEntry({
+      id: 'e-other',
+      createdAt: '2026-04-20T10:00:02.000Z',
+    });
+    foreign.operationId = 'app-2';
+
+    act(() => {
+      handleRef.current?.dispatch(makeAppendEvent(foreign));
+    });
+
+    // Count unchanged.
+    expect(screen.getByText(/2 entries/i)).toBeTruthy();
+  });
+
+  it('ignores non-OperationLogAppended events', async () => {
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    const screen = render(React.createElement(Harness, { handleRef }));
+    await waitForHydration(screen);
+
+    fetchSpy.mockClear();
+
+    act(() => {
+      handleRef.current?.dispatch({
+        eventType: NotificationEventType.ApplicationUpdated,
+        agentRunId: 'run-1',
+        featureId: 'feat-1',
+        featureName: 'test',
+        message: 'unrelated',
+        severity: NotificationSeverity.Info,
+        timestamp: '2026-04-20T10:00:02.000Z',
+        applicationUpdate: {
+          applicationId: APP_ID,
+          setupComplete: true,
+          status: ApplicationStatus.Idle,
+        },
+      });
+    });
+
+    // Count unchanged, no refetch.
+    expect(screen.getByText(/2 entries/i)).toBeTruthy();
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('ignores events when the drawer is closed', () => {
+    const handleRef: { current: HarnessRef | null } = { current: null };
+    render(React.createElement(Harness, { handleRef, initialOpen: false }));
+
+    // Nothing to hydrate yet — drawer closed. Fetch should NOT have been
+    // called, and dispatching an append event should be a no-op.
+    expect(fetchSpy).not.toHaveBeenCalled();
+
+    act(() => {
+      handleRef.current?.dispatch(
+        makeAppendEvent(makeEntry({ id: 'e3', createdAt: '2026-04-20T10:00:02.000Z' }))
+      );
+    });
+
+    // Still no hydration fetch because drawer never opened.
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index faba93c3d..f31acddd5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,7 @@
     "paths": {
       "@shepai/core": ["packages/core/src/index.ts"],
       "@shepai/core/*": ["packages/core/src/*"],
+      "@tanstack/react-query": ["src/presentation/web/node_modules/@tanstack/react-query"],
       "@/application/*": ["packages/core/src/application/*"],
       "@/infrastructure/*": ["packages/core/src/infrastructure/*"],
       "@/domain/*": ["packages/core/src/domain/*"],
diff --git a/tsp/common/enums/notification.tsp b/tsp/common/enums/notification.tsp
index ecb37c1af..6abd142c3 100644
--- a/tsp/common/enums/notification.tsp
+++ b/tsp/common/enums/notification.tsp
@@ -74,6 +74,12 @@ enum NotificationEventType {
 
   @doc("Cloud deployment status changed — emitted by the in-process cloud deployment event bus")
   CloudDeploymentUpdated: "cloud_deployment_updated",
+
+  @doc("Application row changed — one or more of setupComplete, status, gitRemoteUrl, or cloudDeploymentProvider transitioned since the last poll")
+  ApplicationUpdated: "application_updated",
+
+  @doc("A new OperationLogEntry was appended for a long-running operation (scaffold, cloud deploy, git publish, repo sync)")
+  OperationLogAppended: "operation_log_appended",
 }
 
 /**
diff --git a/tsp/common/enums/operation-log.tsp b/tsp/common/enums/operation-log.tsp
index 4c879d8e0..28f7ef132 100644
--- a/tsp/common/enums/operation-log.tsp
+++ b/tsp/common/enums/operation-log.tsp
@@ -22,6 +22,9 @@ enum OperationLogKind {
 
   @doc("Sync local changes to an existing GitHub remote (commit + push)")
   RepoSync: "RepoSync",
+
+  @doc("Initial project scaffolding — create-vite / shadcn init / bun install output")
+  ApplicationSetup: "ApplicationSetup",
 }
 
 /**
diff --git a/tsp/domain/entities/notification-event.tsp b/tsp/domain/entities/notification-event.tsp
index 05595e388..b32bf0127 100644
--- a/tsp/domain/entities/notification-event.tsp
+++ b/tsp/domain/entities/notification-event.tsp
@@ -15,8 +15,49 @@
  *   → emits to NotificationEventBus
  *   → fans out to: SSE clients, desktop notifier
  * ```
+ *
+ * ## Optional Payloads
+ *
+ * Some event types carry a scoped payload beyond the generic
+ * feature/agent-run envelope:
+ *
+ *   • `ApplicationUpdated`        → `applicationUpdate`
+ *   • `OperationLogAppended`      → `operationLogAppend`
+ *   • `CloudDeploymentUpdated`    → `cloudDeployment` (runtime-only; see
+ *     NotificationStreamEvent in stream-agent-events.types.ts)
+ *
+ * Clients select the payload they care about by event type and can patch
+ * their local state directly — no HTTP refetch required.
  */
+import "../../common/base.tsp";
 import "../../common/enums/notification.tsp";
+import "../../common/enums/cloud-deployment.tsp";
+import "./application.tsp";
+import "./operation-log-entry.tsp";
+
+@doc("Scoped payload for an ApplicationUpdated notification — carries only the fields the client patches in-place. Deltas for unchanged fields are omitted.")
+model ApplicationUpdatePayload {
+  @doc("The application whose row changed")
+  applicationId: string;
+
+  @doc("Current setup_complete flag (after the transition)")
+  setupComplete: boolean;
+
+  @doc("Current application status (after the transition)")
+  status: ApplicationStatus;
+
+  @doc("Current git remote URL, if one is set")
+  gitRemoteUrl?: string;
+
+  @doc("Selected cloud deployment provider, if one is set")
+  cloudDeploymentProvider?: CloudDeploymentProvider;
+}
+
+@doc("Scoped payload for an OperationLogAppended notification — carries the newly-appended entry so clients can patch their log list in-place without a refetch.")
+model OperationLogAppendPayload {
+  @doc("The newly-appended operation log entry")
+  entry: OperationLogEntry;
+}
 
 @doc("Notification event emitted for agent lifecycle transitions")
 model NotificationEvent {
@@ -43,4 +84,10 @@ model NotificationEvent {
 
   @doc("When the event occurred")
   timestamp: utcDateTime;
+
+  @doc("Scoped payload for ApplicationUpdated events — present iff eventType === ApplicationUpdated")
+  applicationUpdate?: ApplicationUpdatePayload;
+
+  @doc("Scoped payload for OperationLogAppended events — present iff eventType === OperationLogAppended")
+  operationLogAppend?: OperationLogAppendPayload;
 }
diff --git a/tsp/domain/entities/settings.tsp b/tsp/domain/entities/settings.tsp
index 7278f56c8..0db5da561 100644
--- a/tsp/domain/entities/settings.tsp
+++ b/tsp/domain/entities/settings.tsp
@@ -525,6 +525,12 @@ model NotificationEventConfig {
 
   @doc("Notify when cloud deployment status changes (spec 089)")
   cloudDeploymentUpdated?: boolean = true;
+
+  @doc("Notify when application row changes (setupComplete, status, gitRemoteUrl, cloudDeploymentProvider — spec 090)")
+  applicationUpdated?: boolean = true;
+
+  @doc("Notify when a new operation log entry is appended (spec 090)")
+  operationLogAppended?: boolean = true;
 }
 
 /**
diff --git a/vitest.config.ts b/vitest.config.ts
index 312611857..b81107327 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -13,6 +13,10 @@ const sharedExclude = [
 
 const sharedResolve = {
   alias: [
+    {
+      find: '@tanstack/react-query',
+      replacement: resolve(__dirname, './src/presentation/web/node_modules/@tanstack/react-query'),
+    },
     { find: '@shepai/core', replacement: resolve(__dirname, './packages/core/src') },
     { find: '@/application', replacement: resolve(__dirname, './packages/core/src/application') },
     {