@bastani/atomic 0.8.31-alpha.5 → 0.9.0-alpha.1

package/dist/builtin/workflows/src/tui/stage-chat-view-state.ts

@@ -0,0 +1,464 @@
+import {
+  ChatSessionHost,
+  type ChatSessionHostStyle,
+} from "@bastani/atomic";
+import { Editor } from "@earendil-works/pi-tui";
+import type { EditorComponent } from "@earendil-works/pi-tui";
+import type { PendingPrompt, StageSnapshot } from "../shared/store-types.js";
+import { stageUiBroker } from "../shared/stage-ui-broker.js";
+import { resolveStageChatViewportRows } from "./stage-chat-layout.js";
+import { createPromptCardState } from "./prompt-card.js";
+import {
+  hideMountedCustomUi,
+  releaseMountedCustomUi,
+  showCustomUi,
+} from "./stage-chat-view-custom-ui.js";
+import { editorRuleColor } from "./stage-chat-view-footer-status.js";
+import {
+  blankLine,
+  cursorBlock,
+  editorThemeFromGraphTheme,
+  paint,
+  setEditorBorderColor,
+  setEditorPlaceholder,
+} from "./stage-chat-view-render-helpers.js";
+import {
+  HEADER_ROWS,
+  SEP_ROWS,
+  VIEW_LINE_COUNT,
+  isReadOnlyArchiveStatus,
+  type NoticeEntry,
+  type StageChatDetachMetadata,
+  type StageChatViewContext,
+  type StageChatViewOpts,
+} from "./stage-chat-view-types.js";
+import { noticeRow, noticeSummary } from "./stage-chat-view-transcript.js";
+import { hexToAnsi, RESET } from "./color-utils.js";
+
+export function initializeStageChatView(
+  ctx: StageChatViewContext,
+  opts: StageChatViewOpts,
+): void {
+  ctx.store = opts.store;
+  ctx.theme = opts.graphTheme;
+  ctx.runId = opts.runId;
+  ctx.stageId = opts.stageId;
+  ctx.workflowName = opts.workflowName;
+  ctx.handle = opts.handle;
+  ctx.onDetach = opts.onDetach;
+  ctx.onClose = opts.onClose;
+  ctx.requestRender = opts.requestRender;
+  ctx.requestFocus = opts.requestFocus;
+  ctx.focusHoldTimer = undefined;
+  ctx.getViewportRows = opts.getViewportRows;
+  ctx.piTui = opts.piTui;
+  ctx.piTheme = opts.piTheme;
+  ctx.piKeybindings = opts.piKeybindings;
+  ctx.piEditorFactory = opts.piEditorFactory;
+  ctx.stageUiBroker = opts.stageUiBroker ?? stageUiBroker;
+  ctx.canSubmitPrompt = opts.canSubmitPrompt;
+  ctx.mountedCustomUi = null;
+  ctx.mountingRequestId = null;
+  ctx.promptState = null;
+  ctx.promptEditor = null;
+  ctx.promptEditorPromptId = null;
+  ctx.promptEditorSubmitFromEnter = false;
+  ctx.promptScrollOffset = 0;
+  ctx.promptMaxScroll = 0;
+  ctx.localPaused = false;
+  ctx.seenNoticeIds = new Set<string>();
+  ctx._unsubscribeStore = null;
+  ctx._unsubscribeHandle = null;
+  ctx._unregisterStageUiHost = null;
+  installFocusHold(ctx);
+  ctx.chatHost = createChatHost(ctx, opts);
+  ctx._unregisterStageUiHost = ctx.stageUiBroker.registerHost(ctx.runId, ctx.stageId, {
+    showCustomUi: (request) => {
+      void showCustomUi(ctx, request);
+    },
+    hideCustomUi: (request) => {
+      hideMountedCustomUi(ctx, request);
+    },
+  });
+
+  snapshotMessagesFromHandle(ctx);
+  const initialStage = currentStage(ctx);
+  snapshotMessagesFromSessionFile(ctx, initialStage);
+  absorbStageNotices(ctx, initialStage);
+  syncPromptState(ctx, initialStage?.pendingPrompt);
+  ctx._unsubscribeStore = ctx.store.subscribe(() => handleStoreUpdate(ctx));
+
+  if (ctx.handle) {
+    ctx._unsubscribeHandle = ctx.handle.subscribe((event) => {
+      ctx.chatHost.applyAgentEvent(event);
+    });
+  }
+  ctx.chatHost.syncAnimationTick();
+}
+
+function installFocusHold(ctx: StageChatViewContext): void {
+  if (!ctx.requestFocus) return;
+  ctx.focusHoldTimer = setInterval(() => {
+    // Hold focus on the overlay whenever there is something to interact with:
+    // a mounted custom UI (ask_user_question / readiness gate) must stay
+    // answerable even mid-turn, and an idle composer should keep focus. During
+    // a pure streaming continuation (no custom UI mounted) we leave focus alone
+    // so we never reclaim it out from under the agent's live output.
+    if (ctx.mountedCustomUi !== null || !isStreaming(ctx)) ctx.requestFocus?.();
+  }, 150);
+}
+
+function createChatHost(
+  ctx: StageChatViewContext,
+  opts: StageChatViewOpts,
+): ChatSessionHost<NoticeEntry> {
+  return new ChatSessionHost<NoticeEntry>({
+    style: chatHostStyle(ctx),
+    commands: {
+      ensureAttached: async () => {
+        await liveHandle(ctx)?.ensureAttached();
+      },
+      prompt: async (text) => {
+        const handle = liveHandle(ctx);
+        if (!handle) throw new Error("no live handle on this stage");
+        await handle.prompt(text);
+      },
+      steer: async (text) => {
+        const handle = liveHandle(ctx);
+        if (!handle) throw new Error("no live handle on this stage");
+        await handle.steer(text);
+      },
+      followUp: async (text) => {
+        const handle = liveHandle(ctx);
+        if (!handle) throw new Error("no live handle on this stage");
+        await handle.followUp(text);
+      },
+      interrupt: async () => {
+        const handle = liveHandle(ctx);
+        if (!handle) return;
+        const status = currentStage(ctx)?.status ?? handle.status;
+        if (status === "pending" || status === "running" || status === "awaiting_input") {
+          await handle.pause();
+          return;
+        }
+        await handle.agentSession?.abort();
+      },
+      resume: async (message) => {
+        const handle = liveHandle(ctx);
+        if (!handle) throw new Error("no live handle on this stage");
+        ctx.localPaused = true;
+        await handle.resume(message);
+        ctx.localPaused = false;
+      },
+      runBash: async (request) => {
+        const handle = liveHandle(ctx);
+        if (!handle) throw new Error("no live handle on this stage");
+        await handle.ensureAttached();
+        const agentSession = handle.agentSession;
+        if (!agentSession) throw new Error("no live agent session on this stage");
+        return agentSession.executeBash(request.command, request.onChunk, {
+          excludeFromContext: request.excludeFromContext,
+        });
+      },
+      abortBash: async () => {
+        liveHandle(ctx)?.agentSession?.abortBash();
+      },
+      abortCompaction: async () => {
+        liveHandle(ctx)?.agentSession?.abortCompaction();
+      },
+      handleSlashCommand: async (text) => handleSlashCommand(ctx, text),
+    },
+    isBashRunning: () => liveHandle(ctx)?.agentSession?.isBashRunning === true,
+    requestRender: opts.requestRender,
+    getAgentSession: () => liveHandle(ctx)?.agentSession,
+    isStreaming: () => liveHandle(ctx)?.isStreaming === true,
+    isPaused: () => isPaused(ctx),
+    isDisabled: () => isBlocked(ctx) || !liveHandle(ctx),
+    tui: opts.piTui,
+    keybindings: opts.piKeybindings,
+    editorFactory: opts.piEditorFactory,
+    editorTheme: editorThemeFromGraphTheme(ctx.theme),
+    getChatRenderSettings: opts.getChatRenderSettings,
+    footerData: opts.footerData,
+    renderExtraEntry: (entry) => noticeRow(entry, ctx.theme),
+  });
+}
+
+function chatHostStyle(ctx: StageChatViewContext): ChatSessionHostStyle {
+  return {
+    dim: (text) => paint(text, ctx.theme.dim),
+    text: (text) => paint(text, ctx.theme.text),
+    textMuted: (text) => paint(text, ctx.theme.textMuted),
+    accent: (text) => paint(text, ctx.theme.accent),
+    accentBold: (text) => paint(text, ctx.theme.accent, { bold: true }),
+    rule: (hex, text) => hexToAnsi(hex) + text + RESET,
+    cursor: () => cursorBlock(),
+    blank: (width) => blankLine(width),
+    editorRuleColor: (disabled, agentSession, state) =>
+      editorRuleColor(ctx, disabled, agentSession, state),
+  };
+}
+
+function handleStoreUpdate(ctx: StageChatViewContext): void {
+  const stage = currentStage(ctx);
+  let changed = false;
+  if (stage && stage.status === "paused" && !ctx.localPaused) {
+    ctx.localPaused = true;
+    changed = true;
+  } else if (stage && stage.status === "running" && ctx.localPaused) {
+    ctx.localPaused = false;
+    changed = true;
+  }
+  changed = absorbStageNotices(ctx, stage) || changed;
+  const promptChanged = syncPromptState(ctx, stage?.pendingPrompt);
+  changed = promptChanged || changed;
+  if (promptChanged && ctx.promptState && canSubmitPrompt(ctx, ctx.promptState.prompt.id)) {
+    ctx.requestFocus?.();
+  }
+  ctx.chatHost.syncAnimationTick();
+  if (changed) ctx.requestRender?.();
+}
+
+function snapshotMessagesFromHandle(ctx: StageChatViewContext): void {
+  const handle = liveHandle(ctx);
+  if (!handle) return;
+  ctx.chatHost.appendMessages(handle.messages);
+}
+
+function snapshotMessagesFromSessionFile(
+  ctx: StageChatViewContext,
+  stage: StageSnapshot | undefined,
+): void {
+  ctx.chatHost.loadSessionFile(liveHandle(ctx)?.sessionFile ?? stage?.sessionFile);
+}
+
+function absorbStageNotices(
+  ctx: StageChatViewContext,
+  stage: StageSnapshot | undefined,
+): boolean {
+  const notices = stage?.notices;
+  if (!notices) return false;
+  let changed = false;
+  for (const n of notices) {
+    if (ctx.seenNoticeIds.has(n.id)) continue;
+    ctx.seenNoticeIds.add(n.id);
+    changed = true;
+    ctx.chatHost.appendExtraEntry({
+      role: "notice",
+      noticeId: n.id,
+      kind: n.kind,
+      value: n.to,
+      from: n.from,
+      meta: n.meta,
+      text: noticeSummary(n),
+    });
+  }
+  return changed;
+}
+
+export function currentStage(ctx: StageChatViewContext): StageSnapshot | undefined {
+  const snap = ctx.store.snapshot();
+  const run = snap.runs.find((r) => r.id === ctx.runId);
+  return run?.stages.find((s) => s.id === ctx.stageId);
+}
+
+export function syncPromptState(
+  ctx: StageChatViewContext,
+  prompt: PendingPrompt | undefined,
+): boolean {
+  if (!prompt) {
+    const hadLivePrompt =
+      ctx.promptState !== null ||
+      ctx.promptEditor !== null ||
+      ctx.promptEditorPromptId !== null;
+    if (!hadLivePrompt) return false;
+    ctx.promptState = null;
+    disposePromptEditor(ctx);
+    resetPromptScroll(ctx);
+    return true;
+  }
+  if (!ctx.promptState || ctx.promptState.prompt.id !== prompt.id) {
+    ctx.promptState = createPromptCardState(prompt);
+    seedPromptTextState(ctx, prompt);
+    resetPromptEditor(ctx, prompt);
+    resetPromptScroll(ctx);
+    return true;
+  }
+  return false;
+}
+
+function resetPromptScroll(ctx: StageChatViewContext): void {
+  ctx.promptScrollOffset = 0;
+  ctx.promptMaxScroll = 0;
+}
+
+function promptSeedText(ctx: StageChatViewContext, prompt: PendingPrompt): string {
+  const draft = ctx.store.getStagePromptDraft(ctx.runId, ctx.stageId, prompt.id);
+  if (draft !== undefined) return draft;
+  return typeof prompt.initial === "string" ? prompt.initial : "";
+}
+
+function seedPromptTextState(ctx: StageChatViewContext, prompt: PendingPrompt): void {
+  if (prompt.kind !== "input" && prompt.kind !== "editor") return;
+  if (!ctx.promptState || ctx.promptState.prompt.id !== prompt.id) return;
+  const seed = promptSeedText(ctx, prompt);
+  ctx.promptState.rawText = seed;
+  ctx.promptState.caret = seed.length;
+}
+
+function recordPromptDraft(
+  ctx: StageChatViewContext,
+  promptId: string,
+  text: string,
+): void {
+  ctx.store.recordStagePromptDraft(ctx.runId, ctx.stageId, promptId, text);
+}
+
+export function recordCurrentPromptDraft(ctx: StageChatViewContext): void {
+  const state = ctx.promptState;
+  if (!state) return;
+  const prompt = state.prompt;
+  if (prompt.kind !== "input" && prompt.kind !== "editor") return;
+  const text = ctx.promptEditor && ctx.promptEditorPromptId === prompt.id
+    ? ctx.promptEditor.getText()
+    : state.rawText;
+  recordPromptDraft(ctx, prompt.id, text);
+}
+
+function resetPromptEditor(ctx: StageChatViewContext, prompt: PendingPrompt): void {
+  disposePromptEditor(ctx);
+  if ((prompt.kind !== "input" && prompt.kind !== "editor") || !ctx.piTui) return;
+  const editor = ctx.piEditorFactory
+    ? ctx.piEditorFactory(ctx.piTui, editorThemeFromGraphTheme(ctx.theme), ctx.piKeybindings)
+    : new Editor(ctx.piTui, editorThemeFromGraphTheme(ctx.theme), { paddingX: 0 });
+  editor.setText(ctx.promptState?.prompt.id === prompt.id ? ctx.promptState.rawText : promptSeedText(ctx, prompt));
+  setEditorPlaceholder(editor, "Type your response…");
+  setEditorBorderColor(editor, (text) => hexToAnsi(ctx.theme.accent) + text + RESET);
+  editor.onChange = (text: string) => {
+    if (ctx.promptState?.prompt.id !== prompt.id) return;
+    ctx.promptState.rawText = text;
+    ctx.promptState.caret = text.length;
+    recordPromptDraft(ctx, prompt.id, text);
+    ctx.requestRender?.();
+  };
+  editor.onSubmit = (text: string) => {
+    resolvePromptResponse(ctx, prompt.id, text, {
+      suppressNextGraphSubmit: ctx.promptEditorSubmitFromEnter,
+    });
+  };
+  ctx.promptEditor = editor;
+  ctx.promptEditorPromptId = prompt.id;
+}
+
+function disposePromptEditor(ctx: StageChatViewContext): void {
+  const editor = ctx.promptEditor;
+  ctx.promptEditor = null;
+  ctx.promptEditorPromptId = null;
+  const disposable = editor as (EditorComponent & { dispose?: () => void }) | null;
+  disposable?.dispose?.();
+}
+
+export function resolvePromptResponse(
+  ctx: StageChatViewContext,
+  promptId: string,
+  response: unknown,
+  metadata: StageChatDetachMetadata = {},
+): void {
+  const prompt = ctx.promptState?.prompt;
+  if (!prompt || prompt.id !== promptId) return;
+  if (!canSubmitPrompt(ctx, promptId)) {
+    ctx.requestRender?.();
+    return;
+  }
+  ctx.promptState = null;
+  disposePromptEditor(ctx);
+  resetPromptScroll(ctx);
+  const resolved = ctx.store.resolveStagePendingPrompt(ctx.runId, ctx.stageId, prompt.id, response);
+  ctx.requestRender?.();
+  if (resolved) ctx.onDetach("prompt-resolved", metadata);
+}
+
+export function viewLineCount(ctx: StageChatViewContext): number {
+  const reported = ctx.getViewportRows?.();
+  if (typeof reported !== "number" || !Number.isFinite(reported)) {
+    return VIEW_LINE_COUNT;
+  }
+  return resolveStageChatViewportRows(reported, VIEW_LINE_COUNT);
+}
+
+export function liveHandle(ctx: StageChatViewContext) {
+  return ctx.handle?.isDisposed === true ? undefined : ctx.handle;
+}
+
+export function isStreaming(ctx: StageChatViewContext): boolean {
+  return ctx.chatHost.isStreaming();
+}
+
+export function isBlocked(ctx: StageChatViewContext): boolean {
+  return currentStage(ctx)?.status === "blocked";
+}
+
+export function isPaused(
+  ctx: StageChatViewContext,
+  stage: StageSnapshot | undefined = currentStage(ctx),
+): boolean {
+  return ctx.localPaused || stage?.status === "paused" || liveHandle(ctx)?.status === "paused";
+}
+
+export function isReadOnlyArchive(
+  ctx: StageChatViewContext,
+  stage: StageSnapshot | undefined = currentStage(ctx),
+): boolean {
+  if (liveHandle(ctx)) return false;
+  if (!stage) return true;
+  return isReadOnlyArchiveStatus(stage.status) || Boolean(stage.sessionFile);
+}
+
+async function handleSlashCommand(ctx: StageChatViewContext, text: string): Promise<boolean> {
+  const [command, ...rest] = text.trim().split(/\s+/);
+  switch (command) {
+    case "/compact": {
+      if (rest.length > 0) return true;
+      const handle = liveHandle(ctx);
+      if (!handle) return false;
+      await handle.ensureAttached();
+      if (!handle.agentSession) return false;
+      await handle.agentSession.compact();
+      return true;
+    }
+    case "/quit":
+      ctx.onClose();
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function canSubmitPrompt(ctx: StageChatViewContext, promptId: string): boolean {
+  return ctx.canSubmitPrompt?.(ctx.runId, ctx.stageId, promptId) ?? true;
+}
+
+export function invalidateStageChatView(ctx: StageChatViewContext): void {
+  ctx.chatHost.invalidate();
+  syncPromptState(ctx, currentStage(ctx)?.pendingPrompt);
+}
+
+export function disposeStageChatView(ctx: StageChatViewContext): void {
+  if (ctx.focusHoldTimer !== undefined) {
+    clearInterval(ctx.focusHoldTimer);
+    ctx.focusHoldTimer = undefined;
+  }
+  ctx._unsubscribeStore?.();
+  ctx._unsubscribeStore = null;
+  ctx._unsubscribeHandle?.();
+  ctx._unsubscribeHandle = null;
+  releaseMountedCustomUi(ctx);
+  disposePromptEditor(ctx);
+  ctx._unregisterStageUiHost?.();
+  ctx._unregisterStageUiHost = null;
+  ctx.chatHost.dispose();
+}
+
+export function promptPageSize(ctx: StageChatViewContext): number {
+  return Math.max(4, viewLineCount(ctx) - HEADER_ROWS - SEP_ROWS - 2);
+}

package/dist/builtin/workflows/src/tui/stage-chat-view-transcript.ts

@@ -0,0 +1,242 @@
+import type { ChatMessageEntry } from "@bastani/atomic";
+import type { Component } from "@earendil-works/pi-tui";
+import type { StageNotice } from "../shared/store-types.js";
+import type { GraphTheme } from "./graph-theme.js";
+import type {
+  NoticeEntry,
+  TranscriptDebugEntry,
+  TranscriptEntry,
+} from "./stage-chat-view-types.js";
+import {
+  renderWorkflowNoticeCard,
+  type WorkflowNoticeTone,
+} from "./workflow-notice-card.js";
+
+export function noticeSummary(n: StageNotice): string {
+  const base = `~ ${n.kind} → ${n.to}`;
+  return n.from ? `${base} (was ${n.from})` : base;
+}
+
+export function noticeRow(entry: NoticeEntry, theme: GraphTheme): Component {
+  return {
+    render(width: number): string[] {
+      return renderWorkflowNoticeCard({
+        ...stageNoticeCard(entry),
+        fallbackText: entry.text,
+        width,
+        theme,
+      });
+    },
+    invalidate() {
+      /* notice entries are immutable */
+    },
+  };
+}
+
+export function transcriptDebugEntries(
+  entry: TranscriptEntry,
+): TranscriptDebugEntry[] {
+  if (isChatMessageEntry(entry) && entry.kind === "assistant") {
+    const entries: TranscriptDebugEntry[] = [];
+    const thinking = extractThinkingText(entry.message.content);
+    const text = extractMessageText(entry.message.content);
+    if (thinking) {
+      entries.push({
+        role: "thinking",
+        text: thinking,
+        toolCallId: "",
+        state: "",
+        output: "",
+      });
+    }
+    if (text || entries.length === 0) {
+      entries.push({ ...entry, text, toolCallId: "", state: "", output: "" });
+    }
+    return entries;
+  }
+  return [
+    {
+      ...entry,
+      role: entry.role,
+      text: transcriptDebugText(entry),
+      toolCallId: transcriptDebugToolCallId(entry),
+      state: transcriptDebugToolState(entry),
+      output: transcriptDebugToolOutput(entry),
+    },
+  ];
+}
+
+function transcriptDebugText(entry: TranscriptEntry): string {
+  if ("text" in entry && typeof entry.text === "string") return entry.text;
+  if (isChatMessageEntry(entry)) {
+    switch (entry.kind) {
+      case "assistant":
+        return extractMessageText(entry.message.content);
+      case "tool":
+        return entry.result
+          ? extractToolResultText(entry.result)
+          : `${entry.toolName} ${typeof entry.args === "string" ? entry.args : JSON.stringify(entry.args ?? {})}`;
+      case "bashExecution":
+        return entry.message.output || entry.message.command;
+      case "user":
+      case "system":
+        return entry.text;
+      case "custom":
+        return extractMessageText(entry.message.content);
+      case "branchSummary":
+        return entry.message.summary;
+    }
+  }
+  return "";
+}
+
+function transcriptDebugToolCallId(entry: TranscriptEntry): string {
+  if (isChatMessageEntry(entry) && entry.kind === "tool") return entry.toolCallId;
+  if ("toolCallId" in entry && typeof entry.toolCallId === "string") {
+    return entry.toolCallId;
+  }
+  return "";
+}
+
+function transcriptDebugToolState(entry: TranscriptEntry): string {
+  if (isChatMessageEntry(entry) && entry.kind === "tool") {
+    if (entry.result?.isError) return "error";
+    return entry.isPartial === false ? "success" : "pending";
+  }
+  if ("state" in entry && typeof entry.state === "string") return entry.state;
+  return "";
+}
+
+function transcriptDebugToolOutput(entry: TranscriptEntry): string {
+  if (isChatMessageEntry(entry) && entry.kind === "tool") {
+    return entry.result ? extractToolResultText(entry.result) : "";
+  }
+  if ("output" in entry && typeof entry.output === "string") return entry.output;
+  return "";
+}
+
+function isChatMessageEntry(entry: TranscriptEntry): entry is ChatMessageEntry {
+  return "kind" in entry && entry.role !== "notice";
+}
+
+function extractThinkingText(content: unknown): string {
+  if (!Array.isArray(content)) return "";
+  const parts: string[] = [];
+  for (const item of content) {
+    if (item == null || typeof item !== "object") continue;
+    const thinking = (item as { type?: unknown; thinking?: unknown }).thinking;
+    if (
+      (item as { type?: unknown }).type === "thinking" &&
+      typeof thinking === "string"
+    ) {
+      parts.push(thinking);
+    }
+  }
+  return parts.join("\n\n");
+}
+
+function extractMessageText(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  const parts: string[] = [];
+  for (const item of content) {
+    if (item == null) continue;
+    if (typeof item === "string") {
+      parts.push(item);
+      continue;
+    }
+    const obj = item as { type?: unknown; text?: unknown };
+    if (typeof obj.text === "string") parts.push(obj.text);
+    else if (obj.type === "text" && typeof obj.text === "string") {
+      parts.push(obj.text);
+    }
+  }
+  return parts.join("");
+}
+
+function extractToolResultText(result: unknown): string {
+  if (typeof result === "string") return result;
+  if (result == null || typeof result !== "object") return "";
+  const content = (result as { content?: unknown }).content;
+  return extractMessageText(content);
+}
+
+function stageNoticeCard(entry: NoticeEntry): {
+  title: string;
+  glyph: string;
+  headline: string;
+  tone: WorkflowNoticeTone;
+  fields: Array<{
+    label: string;
+    value: string | undefined;
+    tone?: WorkflowNoticeTone | "text" | "muted";
+  }>;
+} {
+  switch (entry.kind) {
+    case "abort":
+      return {
+        title: "STAGE ABORTED",
+        glyph: "✗",
+        headline: "Stage received an abort notice",
+        tone: "error",
+        fields: stageNoticeFields(entry, "error"),
+      };
+    case "compaction":
+      return {
+        title: "STAGE COMPACTION",
+        glyph: "✓",
+        headline: "Stage context was compacted",
+        tone: "success",
+        fields: stageNoticeFields(entry, "muted"),
+      };
+    case "model":
+      return {
+        title: "STAGE MODEL",
+        glyph: "→",
+        headline: "Stage model changed",
+        tone: "info",
+        fields: stageNoticeFields(entry),
+      };
+    case "thinking":
+      return {
+        title: "STAGE THINKING",
+        glyph: "→",
+        headline: "Stage thinking level changed",
+        tone: "mauve",
+        fields: stageNoticeFields(entry),
+      };
+    case "tree":
+      return {
+        title: "STAGE TREE",
+        glyph: "◆",
+        headline: "Stage branch tree changed",
+        tone: "info",
+        fields: stageNoticeFields(entry, "muted"),
+      };
+    case "mcp":
+    default:
+      return {
+        title: "STAGE NOTICE",
+        glyph: "◆",
+        headline: "Workflow stage notice",
+        tone: "info",
+        fields: stageNoticeFields(entry, "muted"),
+      };
+  }
+}
+
+function stageNoticeFields(
+  entry: NoticeEntry,
+  valueTone: WorkflowNoticeTone | "text" | "muted" = "text",
+): Array<{
+  label: string;
+  value: string | undefined;
+  tone?: WorkflowNoticeTone | "text" | "muted";
+}> {
+  return [
+    { label: "kind", value: entry.kind, tone: "muted" },
+    { label: "value", value: entry.value, tone: valueTone },
+    { label: "from", value: entry.from, tone: "muted" },
+    { label: "meta", value: entry.meta, tone: "muted" },
+  ];
+}