@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/workspace/chat-timeline/GeneratingIndicator.test.ts

@@ -0,0 +1,156 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Identity half of the docked generating indicator.
+ *
+ * A fresh spawn has no identity for its first seconds: the `new-…` session has
+ * no sidebar row yet, so `runModel` is null, and `seedSession` only writes the
+ * resolved model once the spawn response lands. The identity slot therefore
+ * rendered empty while the verb rendered beside it — `• Thinking…`, a bullet
+ * with nothing in front of it. The component must name the WAIT in that state
+ * instead of painting a blank identity, and must keep naming the real run the
+ * moment either half arrives (a provider-only identity still says which account
+ * is answering).
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
+
+let container: HTMLElement;
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+async function mount(props: Record<string, unknown>): Promise<HTMLElement> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(GeneratingIndicator, { generatingVerb: 'Thinking', ...props }), container);
+  });
+  return container;
+}
+
+describe('GeneratingIndicator identity', () => {
+  test('an unknown identity names the wait instead of drawing a bullet with nothing in front of it', async () => {
+    const el = await mount({});
+    expect(el.textContent).toContain('Loading');
+    // The verb belongs to a run whose identity is known: beside an empty
+    // identity it read as a stray bullet.
+    expect(el.textContent).not.toContain('Thinking');
+    expect(el.textContent).not.toContain('•');
+  });
+
+  test('a blank model name is not an identity', async () => {
+    const el = await mount({ modelName: '   ' });
+    expect(el.textContent).toContain('Loading');
+  });
+
+  test('the model names the run and keeps the verb', async () => {
+    const el = await mount({ modelName: 'DeepSeek V4 Flash' });
+    expect(el.textContent).toContain('DeepSeek V4 Flash');
+    expect(el.textContent).toContain('Thinking');
+    expect(el.textContent).not.toContain('Loading');
+  });
+
+  test('a provider-only identity still names the run', async () => {
+    const el = await mount({ provider: 'kenari' });
+    expect(el.textContent).toContain('Kenari');
+    expect(el.textContent).toContain('Thinking');
+    expect(el.textContent).not.toContain('Loading');
+    // The separator belongs to the PAIR: there is no model half to separate.
+    expect(el.textContent).not.toContain('•');
+  });
+});
+
+/**
+ * The row's shrink contract, which is the layout half of the reported bug.
+ *
+ * happy-dom computes no layout, so the assertions here are on the MARKUP that
+ * produces it — and the browser specs (`chat.e2e.ts` / `mobile.e2e.ts`,
+ * "keeps the provider, model and dots when the activity phrase is long") are
+ * what prove the geometry. This suite is the fast gate: it fails when the
+ * structure that makes a long phrase ellipsize is removed.
+ *
+ * What broke: the activity phrase was one non-shrinking span (`shrink-0` with
+ * no truncation), so `Running <a long command>` took its full width, the
+ * identity spans beside it shrank to zero, and the dots — siblings of that
+ * span, in a row that clips — were drawn past the row's right edge.
+ */
+describe('GeneratingIndicator long-phrase layout', () => {
+  /** The span that holds the animated dots, and the phrase wrapper beside it. */
+  function rowParts(el: HTMLElement) {
+    const dots = el.querySelector('.dot-anim-1')?.parentElement ?? null;
+    const verbWrap = dots?.parentElement ?? null;
+    const verb = verbWrap?.firstElementChild as HTMLElement | null;
+    return { dots, verbWrap, verb };
+  }
+
+  test('the activity phrase is the truncating member, and the dots are its sibling', async () => {
+    const el = await mount({
+      provider: 'kenari',
+      modelName: 'DeepSeek V4 Flash',
+      generatingVerb: 'Running rg -n --hidden "a very long pattern" src/client/components/workspace',
+    });
+    const { dots, verb, verbWrap } = rowParts(el);
+    expect(verb, 'no activity phrase element').not.toBeNull();
+    expect(dots, 'no dots element').not.toBeNull();
+
+    // The phrase is what gives up width — a truncating box inside a wrapper
+    // that is allowed to shrink.
+    expect(verb!.className).toContain('truncate');
+    expect(verb!.className).toContain('min-w-0');
+    expect(verbWrap!.className).toContain('flex-1');
+    // The wrapper carries a floor, so the phrase cannot be squeezed away
+    // entirely while it is the only thing that may truncate.
+    expect(verbWrap!.className).toContain('min-w-[4rem]');
+
+    // The dots never shrink, and they are a SIBLING of the phrase — inside a
+    // truncated element they would be clipped with it.
+    expect(dots!.className).toContain('shrink-0');
+    expect(dots!.parentElement).toBe(verbWrap);
+    expect(dots!.previousElementSibling).toBe(verb);
+
+    // The full phrase is still available on hover, so the ellipsis hides
+    // nothing permanently.
+    expect(verb!.getAttribute('title')).toContain('Running rg -n');
+  });
+
+  test('the identity spans are separate members that can ellipsize', async () => {
+    const el = await mount({ provider: 'kenari', modelName: 'DeepSeek V4 Flash' });
+    const { verbWrap } = rowParts(el);
+    const identity = [...(verbWrap?.parentElement?.children ?? [])]
+      .filter((node): node is HTMLElement => node !== verbWrap && Boolean(node.textContent?.trim()))
+      .filter((node) => node.textContent?.trim() !== '•');
+    expect(identity.length, 'provider and model are not two members').toBe(2);
+    for (const half of identity) {
+      // Each half may ellipsize, but neither is `shrink-0`: a fixed-width
+      // identity would push the phrase out on a narrow phone instead.
+      expect(half.className).toContain('truncate');
+      expect(half.className).toContain('min-w-0');
+      expect(half.className).not.toContain('shrink-0');
+    }
+  });
+});

package/src/client/components/workspace/chat-timeline/GeneratingIndicator.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Bot } from 'lucide-preact';
+import { providerLabel } from '@/shared/lib/models/provider/label';
+
+interface GeneratingIndicatorProps {
+  modelName?: string;
+  generatingVerb?: string;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  /**
+   * DOM id for the docked row. Two indicators can be mounted at once — the chat
+   * run and a side question both streaming — so a second caller must pass its
+   * own id rather than duplicating the default one.
+   */
+  id?: string;
+}
+
+const COOL_VERBS = [
+  'Synthesizing solution',
+  'Evaluating context',
+  'Reading workspace',
+  'Planning next step',
+  'Executing diagnostics',
+  'Compiling edge routes'
+];
+
+/**
+ * The trailing ellipsis every state shares.
+ *
+ * `shrink-0` is load-bearing: the dots are the indicator's only sign of life,
+ * so they must never be the thing a long activity phrase squeezes out. They sit
+ * BESIDE the truncated verb, never inside it — a sibling of a `truncate`
+ * element is the only way they survive.
+ */
+function Dots() {
+  return (
+    <span className="inline-flex shrink-0 tracking-wider text-ink/80 ml-0.5">
+      <span className="dot-anim-1 inline-block">.</span>
+      <span className="dot-anim-2 inline-block">.</span>
+      <span className="dot-anim-3 inline-block">.</span>
+    </span>
+  );
+}
+
+export function GeneratingIndicator({ modelName, generatingVerb, provider, providerNames, id = 'generating-docked-indicator' }: GeneratingIndicatorProps) {
+  const [activeVerbIndex, setActiveVerbIndex] = useState(0);
+
+  // Rotate action verb every 2.8s
+  useEffect(() => {
+    if (generatingVerb) return;
+    const interval = setInterval(() => {
+      setActiveVerbIndex((prev) => (prev + 1) % COOL_VERBS.length);
+    }, 2800);
+    return () => clearInterval(interval);
+  }, [generatingVerb]);
+
+  const displayVerb = generatingVerb 
+    ? (generatingVerb.charAt(0).toUpperCase() + generatingVerb.slice(1))
+    : COOL_VERBS[activeVerbIndex];
+
+  const providerText = provider ? providerLabel(provider, providerNames) : '';
+  // The identity half is genuinely unknown for the first seconds of a fresh
+  // spawn: a pending `new-…` session has no sidebar row yet, and the resolved
+  // model only arrives with the spawn response (`seedSession`). An empty slot
+  // rendered as `• Thinking…` — a bullet with nothing in front of it. Name the
+  // wait instead of painting a blank identity.
+  const modelText = modelName?.trim() ?? '';
+  // One half is enough to name the run — a provider-only identity still says
+  // which account is answering. Only "neither" is the unknown state.
+  const identityKnown = Boolean(providerText || modelText);
+
+  return (
+    <div 
+      id={id}
+      className="w-full flex items-center px-1 py-1 bg-transparent border-0 border-none text-[11px] font-mono select-none animate-in fade-in duration-200"
+    >
+      <style>{`
+        @keyframes bounce-dot {
+          0%, 100% { opacity: 0.2; transform: translateY(0); }
+          50% { opacity: 1; transform: translateY(-15%); }
+        }
+        .dot-anim-1 { animation: bounce-dot 1.2s infinite both; }
+        .dot-anim-2 { animation: bounce-dot 1.2s infinite both 0.2s; }
+        .dot-anim-3 { animation: bounce-dot 1.2s infinite both 0.4s; }
+      `}</style>
+
+      {/* Left info: Animated Rainbow Spinner Ring + Bot Badge + Model Name + Dynamic Action Verb */}
+      <div className="flex items-center space-x-2 min-w-0 flex-1">
+        
+        {/* Bot Icon with Animated Colorful Gradient Spinner */}
+        <div className="relative w-4 h-4 rounded flex items-center justify-center shrink-0">
+          {/* Multi-color conic gradient spinner ring */}
+          <div 
+            className="absolute -inset-[1.5px] rounded-[5px] animate-spin"
+            style={{
+              background: 'conic-gradient(from 0deg, #ff453a, #ff9f0a, #ffd60a, #30d158, #64d2ff, #0a84ff, #bf5af2, #ff375f, #ff453a)',
+              animationDuration: '1.2s'
+            }}
+          />
+          {/* Center Dark Bot Badge */}
+          <div className="relative w-full h-full rounded-[3px] bg-ink flex items-center justify-center text-canvas z-10 shadow-2xs">
+            <Bot size={10} className="text-canvas" />
+          </div>
+        </div>
+
+        {/* Provider & model name with dynamic verb + dots. When neither half is
+            known yet (a spawn still in flight) the slot names the WAIT rather
+            than drawing a bullet with an empty identity in front of it.
+
+            Shrink priority is the whole layout contract here. The activity
+            phrase is the ONLY shrinkable member (it is `flex-1` with a 0%
+            basis and `min-w-0`), so a long command — a `bash` line, a grep
+            pattern, a file path — gives up its width first and ends in an
+            ellipsis. The identity spans keep their natural width and only
+            ellipsize when the row cannot fit them at all, and the dots are a
+            `shrink-0` SIBLING of the truncated phrase rather than part of it:
+            when the phrase was one non-shrinking span, a long command pushed
+            the provider, the model and the dots out of the row entirely —
+            which is the reported "provider and model and the loading dots are
+            not visible". */}
+        <div className="flex items-center space-x-1.5 min-w-0 flex-1">
+          {identityKnown ? (
+            <>
+              {providerText && (
+                <span className="text-ink/55 truncate shrink min-w-0">{providerText}</span>
+              )}
+              {modelText && (
+                <span className="font-semibold text-ink truncate shrink min-w-0">
+                  {modelText}
+                </span>
+              )}
+              {/* The separator belongs to the PAIR: a provider-only identity has
+                  nothing for it to separate. */}
+              {providerText && modelText && <span className="text-ink/40 shrink-0">•</span>}
+              {/* `min-w-[4rem]` is the floor that keeps the phrase READABLE: a
+                  row too narrow for even that gives the identity its room back
+                  (both identity spans are `min-w-0`), so the verb can never be
+                  squeezed to nothing while a truncated phrase is the point. */}
+              <span className="text-ink/75 flex items-center space-x-1 min-w-[4rem] flex-1 font-medium">
+                <span className="truncate min-w-0 transition-all duration-300" title={displayVerb}>
+                  {displayVerb}
+                </span>
+                <Dots />
+              </span>
+            </>
+          ) : (
+            <span className="text-ink/55 flex items-center space-x-1 shrink-0">
+              <span>Loading</span>
+              <Dots />
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/GoalNotice.tsx

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The body of a goal notice: the objective, the budget it was injected with,
+ * and the instructions omp attached.
+ *
+ * Why a card of its own: a goal turn is `display: false` — omp does not put it
+ * in the conversation — but the transcript has no other slot for a
+ * `custom_message`, so each one lands as a generic notice whose subtitle is its
+ * first line. For a continuation that line is a raw HTML comment and the body
+ * is the whole internal prompt, objective buried in the middle. Here the
+ * objective leads, the numbers read as numbers, and the prompt is demoted to
+ * reference text.
+ *
+ * This is the card the `SystemNotice` header sits on top of; it is rendered
+ * OPEN, so it carries no "which injection is this" hint of its own — the
+ * header's badge says it.
+ *
+ * `Goal` in the timeline is two other cards already (`tool-renderers/panels/
+ * GoalRecord.tsx` draws the `goal` tool's result, `Goal.tsx` the older
+ * goal/`yield` list); this is the injected-message side of the same feature.
+ */
+
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { formatGoalDuration, formatGoalTokens } from '@/shared/lib/omp/mode/format';
+import type { GoalNoticeData } from '@/shared/lib/omp/mode/notice';
+
+export function GoalNotice({ data }: { data: GoalNoticeData }) {
+  const figures: string[] = [];
+  if (data.tokensUsed !== undefined) figures.push(`tokens ${formatGoalTokens(data.tokensUsed)}`);
+  figures.push(`budget ${data.tokenBudget === undefined ? 'none' : formatGoalTokens(data.tokenBudget)}`);
+  if (data.remaining) figures.push(`left ${data.remaining}`);
+  if (data.timeUsedSeconds !== undefined) figures.push(formatGoalDuration(data.timeUsedSeconds));
+
+  return (
+    <div className="space-y-2.5">
+      <div className="rounded-lg border border-ink/8 bg-paper p-3">
+        <div className="mb-1 text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">Objective</div>
+        <MarkdownRenderer content={data.objective || '_No objective recorded._'} className="text-[12px] leading-relaxed" />
+      </div>
+
+      {/* The figures omp injected this turn with — the strip above the composer
+          shows the live ones, so this is the historical reading at that turn. */}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[10.5px] text-ink/45">
+        {figures.map((figure) => (
+          <span key={figure}>{figure}</span>
+        ))}
+      </div>
+
+      {data.instructions && (
+        <div className="rounded-lg border border-ink/8 bg-canvas/40 p-3">
+          <div className="mb-1.5 text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
+            Instructions sent with it
+          </div>
+          <MarkdownRenderer content={data.instructions} className="text-[11.5px] leading-relaxed text-ink/75" />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/MessageItem.tsx

@@ -0,0 +1,289 @@
+import type { TargetedMouseEvent } from 'preact';
+import { useMemo } from 'preact/hooks';
+import { memo } from 'preact/compat';
+import { AlertCircle, Bot, Info, MessageSquarePlus, Undo2, User } from 'lucide-preact';
+import type { Attachment, ChatMessageData } from '@/shared/types';
+import { toAttachmentList } from '@/shared/lib/chat/attachments';
+import { ThinkingSection } from '@/client/components/workspace/chat-timeline/ThinkingSection';
+import { ToolCallingSection } from '@/client/components/workspace/chat-timeline/ToolCallingSection';
+import { SystemNotice } from '@/client/components/workspace/chat-timeline/SystemNotice';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { AttachmentChips } from '@/client/components/workspace/chat-timeline/AttachmentChips';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { PluginMessageActions } from '@/client/components/workspace/chat-timeline/PluginMessageActions';
+import { capitalizeFirstLetter } from '@/shared/lib/chat/capitalize';
+import { isNoticeRow, messageAnswerText } from '@/shared/lib/chat/notice-row';
+import { formatMessageStamp } from '@/shared/lib/format/time';
+
+interface ChatMessageItemProps {
+  msg: ChatMessageData | any;
+  isStreaming?: boolean;
+  onUndo?: (msgId: string, content?: string) => void;
+  /**
+   * Start a new chat seeded with this row. A user row passes its attachments
+   * too: the prompt it carried is only half the turn — an image or an inlined
+   * text file exists nowhere else, and seeding the text alone silently dropped
+   * it from the new chat.
+   */
+  onNewChat?: (content: string, attachments?: Attachment[]) => void;
+
+  /** Extra classes on the root wrapper (e.g. spacing between messages). */
+  className?: string;
+  /** Whether the message immediately preceding this one was also an assistant message. */
+  isPrevAssistant?: boolean;
+  /**
+   * Whether a user row offers Undo / New-chat. Both act on the CHAT, so a row
+   * that is not a chat turn (the BTW panel's question row) turns them off
+   * instead of rendering buttons that do nothing.
+   */
+  userActions?: boolean;
+}
+
+export const ChatMessageItem = memo(function ChatMessageItem({
+  msg,
+  isStreaming = false,
+  onUndo,
+  onNewChat,
+  className = '',
+  isPrevAssistant = false,
+  userActions = true,
+}: ChatMessageItemProps) {
+  const isUser = msg.role === 'user';
+
+  /** A notice row renders as a card. When omp diverted the turn's answer into
+   *  `notice` instead, the row is an answer (it kept the turn's own metadata)
+   *  and the notice text is the response — see chat/notice-row.ts. */
+  const isNotice = isNoticeRow(msg);
+  const effectiveContent = isNotice ? msg.content : messageAnswerText(msg);
+
+  /** Stable string references for MarkdownRenderer so its internal
+   *  useMemo([content]) holds across parent re-renders (streaming frames
+   *  replace the timeline array identity every frame). */
+  const userContent = useMemo(() => (typeof effectiveContent === 'string' ? effectiveContent.trim() : effectiveContent), [effectiveContent]);
+  const assistantContent = useMemo(() => (typeof effectiveContent === 'string' ? capitalizeFirstLetter(effectiveContent) : effectiveContent), [effectiveContent]);
+
+  /** Content is not worth rendering when it is empty or only punctuation
+   *  placeholders ("." / "..." etc.) — chunked assistant turns often carry a
+   *  lone dot while the real payload lives in tool calls / thinking. */
+  const hasRenderableContent = typeof effectiveContent === 'string' && /[A-Za-z0-9]/.test(effectiveContent);
+
+  const handleNewChat = (e?: TargetedMouseEvent<HTMLElement>) => {
+    if (e) e.preventDefault();
+    if (!onNewChat) return;
+    // Committed rows carry the persisted display fields only (no `File`), which
+    // is what the composer and the send path both expect on a replay.
+    const attachments = toAttachmentList(msg.attachments);
+    onNewChat(msg.content, attachments.length ? attachments : undefined);
+  };
+
+  const handleUndo = () => {
+    if (onUndo) {
+      onUndo(msg.id, msg.content);
+    }
+  };
+
+  if (isUser) {
+    const isAgentAttributed = msg.attribution === 'agent';
+
+    return (
+      <div id={msg.id} className={`flex flex-col items-end space-y-1.5 w-full max-w-full ${className}`}>
+        {/* User bubble - standardized to text-[13px] with markdown support */}
+        <div className="bg-paper p-3.5 sm:p-4 rounded-xl border border-ink/15 text-[13px] text-ink shadow-xs max-w-[92%] sm:max-w-[85%] break-words overflow-hidden flex flex-col space-y-2 font-sans select-text mx-3" style={{ lineHeight: 'var(--markdown-body-line-height)' }}>
+          {isAgentAttributed && (
+            <div className="flex items-center space-x-1.5 pb-1.5 mb-1 border-b border-ink/10 text-[11px] font-mono text-ink/70">
+              <Bot size={12} className="text-ink shrink-0" />
+              <span className="font-semibold text-ink">Subagent Assignment</span>
+              <span className="text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-ink/5 text-ink/60">Delegated</span>
+            </div>
+          )}
+          <MarkdownRenderer content={userContent} />
+          
+          <AttachmentChips
+            attachments={msg.attachments || []}
+            onOpenFile={(att: { name?: string; content?: string }) => {
+              window.dispatchEvent(new CustomEvent('omp:open-file', {
+                detail: { path: att.name ?? 'attachment', content: att.content }
+              }));
+            }}
+          />
+        </div>
+        
+        {/* User Metadata & Toolbar (Undo on the left of Copy) */}
+        <div className="flex items-center space-x-2.5 text-[11px] text-ink/60 px-1 font-mono">
+          <div className="flex items-center space-x-1.5 border-r border-ink/15 pr-2.5">
+            {isAgentAttributed ? (
+              <>
+                <Bot size={11} className="text-ink/70 shrink-0" />
+                <span className="text-[10px] uppercase font-semibold tracking-wider text-ink/60">Agent</span>
+              </>
+            ) : (
+              <User size={11} className="text-ink/70 shrink-0" />
+            )}
+            {formatMessageStamp(msg) && <span>{formatMessageStamp(msg)}</span>}
+          </div>
+          
+          <div className="flex items-center space-x-1">
+            {/* Undo Button (to the left of copy button) */}
+            {userActions && (
+              <button 
+                type="button"
+                className="flex items-center hover:text-ink transition-colors p-1 rounded hover:bg-ink/5 cursor-pointer" 
+                title="Undo / Edit message"
+                aria-label="Undo this message"
+                onClick={handleUndo}
+              >
+                <Undo2 size={12} />
+              </button>
+            )}
+
+            {/* Copy Button */}
+            <CopyButton
+              text={msg.content}
+              className="flex items-center hover:text-ink transition-colors p-1 rounded hover:bg-ink/5 cursor-pointer"
+              iconSize={12}
+              title="Copy prompt"
+              ariaLabel="Copy prompt"
+              emptyTitle="Nothing to copy — attachment-only prompt"
+            />
+
+            {/* New Chat Button */}
+            {userActions && (
+              <button 
+                type="button"
+                className="flex items-center hover:text-ink transition-colors p-1 rounded hover:bg-ink/5 cursor-pointer" 
+                title="New Chat from here"
+                aria-label="Start a new chat from this message"
+                onClick={handleNewChat}
+              >
+                <MessageSquarePlus size={12} />
+              </button>
+            )}
+
+            {/* Plugin contributions, in store order. The empty slot renders
+                nothing, so a Kabmo with no plugins keeps this strip intact. */}
+            <PluginMessageActions messageId={String(msg.id)} role="user" text={typeof msg.content === 'string' ? msg.content : ''} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Assistant / AI Message Rendering
+  const thinkingData = msg.thinking || (msg.monologue ? { thought: msg.monologue } : undefined);
+  const allToolCalls = msg.toolCalls || msg.actions;
+  const secondaryToolCalls = msg.actions2;
+  const cleanIntent = msg.intent ? capitalizeFirstLetter(msg.intent.replace(/^[.\s]+/, '')) : null;
+  const hasToolCalls = Boolean(allToolCalls && allToolCalls.length > 0);
+
+  return (
+    <div 
+      id={msg.id} 
+      className={`flex flex-col items-start space-y-2 w-full max-w-full transition-all ${
+        isStreaming ? 'pb-10 mb-2' : ''
+      } ${className}`}
+    >
+      {/* Main AI Response Container */}
+      <div className="w-full space-y-2.5 font-sans leading-relaxed">
+        
+        {/* System Notice Alert (a notice carrying the answer renders as content below) */}
+        {isNotice && <SystemNotice notice={msg.notice} source={msg.noticeSource} />}
+
+        {/* Thinking / Reasoning Accordion */}
+        {thinkingData && (
+          <ThinkingSection 
+            thinking={thinkingData} 
+            defaultExpanded={false}
+            showSeparator={isPrevAssistant}
+          />
+        )}
+
+        {/* Provider / API Error Alert */}
+        {msg.error && (
+          <div className="flex items-start space-x-2.5 bg-error/10 border border-error/30 rounded-lg mx-3 px-3.5 py-2.5 text-[12px] text-ink select-text">
+            <AlertCircle size={15} className="text-error flex-shrink-0 mt-0.5" />
+            <div className="min-w-0 flex-1 space-y-0.5">
+              <div className="flex items-center space-x-2 flex-wrap">
+                <span className="font-semibold text-error text-[12px] tracking-tight">
+                  {msg.error.status ? `Error ${msg.error.status}` : 'Request Failed'}
+                </span>
+                {msg.error.stopReason && (
+                  <span className="text-[10px] font-mono text-ink/50 bg-ink/5 px-1.5 py-0.5 rounded">
+                    {msg.error.stopReason}
+                  </span>
+                )}
+              </div>
+              {msg.error.message && (
+                <p className="text-ink/80 leading-relaxed text-[12px] font-mono whitespace-pre-wrap break-words">
+                  {msg.error.message.split('\n').map((l: string) => l.trim()).filter(Boolean)[0]}
+                  {msg.error.message.split('\n').map((l: string) => l.trim()).filter(Boolean).length > 1 && (
+                    <span className="relative inline-flex items-center ml-1.5 align-middle group">
+                      <Info size={13} className="text-error/70 hover:text-error cursor-pointer transition-colors" />
+                      <span className="pointer-events-none absolute z-50 left-1/2 bottom-full mb-1.5 w-72 -translate-x-1/2 rounded-md bg-ink text-canvas p-2.5 text-[11px] font-mono leading-relaxed whitespace-pre-wrap break-words opacity-0 group-hover:opacity-100 transition-opacity duration-150 shadow-lg">
+                        {msg.error.message}
+                      </span>
+                    </span>
+                  )}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Main AI Response Content (Rich Markdown with code blocks, tables, lists) rendered before tool calls */}
+        {hasRenderableContent && (
+          <div className="text-[13px] text-ink leading-relaxed font-sans bg-transparent px-3 py-1 select-text">
+            <MarkdownRenderer content={assistantContent} />
+          </div>
+        )}
+
+        {/* Tool Call Intent (rendered standalone only when there are no tool calls to absorb it as title) */}
+        {cleanIntent && !hasToolCalls && (!hasRenderableContent || !msg.content.toLowerCase().includes(msg.intent.toLowerCase().trim())) && (
+          <div className={`leading-relaxed font-sans px-3 select-text ${
+            hasRenderableContent
+              ? 'text-[12px] text-ink/70 py-0.5'
+              : 'text-[13px] text-ink py-1'
+          }`}>
+            {cleanIntent}
+          </div>
+        )}
+
+        {/* Primary Tool Executions Accordion */}
+        {hasToolCalls && (
+          <ToolCallingSection 
+            tools={allToolCalls}
+            defaultExpanded={false}
+          />
+        )}
+
+        {/* Intermediate Diagnostic Note */}
+        {msg.systemNote && (
+          <div className="text-[12px] text-ink leading-relaxed border-l-2 border-ink/30 bg-paper/60 px-3 py-2 rounded-r-md font-mono break-words whitespace-pre-wrap select-text">
+            <span className="text-[10px] text-ink/50 uppercase tracking-wider block mb-0.5 font-sans font-semibold">
+              Diagnostic Note
+            </span>
+            {msg.systemNote}
+          </div>
+        )}
+
+        {/* Secondary Tool Executions */}
+        {secondaryToolCalls && secondaryToolCalls.length > 0 && (
+          <ToolCallingSection 
+            tools={secondaryToolCalls}
+            defaultExpanded={true}
+          />
+        )}
+
+        {/* AI Final Summary / Conclusion Card (Only shown when not streaming) */}
+        {!isStreaming && msg.summary && (
+          <div className="text-[12px] text-ink bg-paper border border-ink/15 rounded-lg p-3 space-y-1 select-text font-sans">
+            <div className="font-semibold text-ink flex items-center space-x-1.5 text-[12px]">
+              <span className="w-1.5 h-1.5 rounded-full bg-success" />
+              <span>Resolution Summary</span>
+            </div>
+            <p className="text-ink/80 leading-relaxed text-[12px]">{msg.summary}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});