ompchamber 0.3.0

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

@@ -0,0 +1,220 @@
+import type { SetStateAction } from 'preact/compat';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, Folder } from 'lucide-preact';
+import type { Attachment, ChatMessageData } from '@/shared/types';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
+import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+
+interface EmptyWorkspacePromptProps {
+  className?: string;
+  folders?: any[];
+  selectedFolderId: number | null;
+  setSelectedFolderId: (id: number | null) => void;
+  inputValue: string;
+  setInputValue: (v: string) => void;
+  inputAttachments?: Attachment[];
+  setInputAttachments?: (atts: SetStateAction<Attachment[]>) => void;
+  onSend: (attachments: Attachment[]) => void;
+  isGenerating: boolean;
+  appSettings?: Record<string, any>;
+  /** Messages of the pending session: rendered above the input so the
+   *  optimistic user bubble shows immediately on send (before the omp spawn
+   *  completes and the real session timeline takes over). */
+  localMessages?: ChatMessageData[];
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  modelNames?: Record<string, string>;
+  rootPath?: string | null;
+  onThinkingLevelChange?: (level: string) => void;
+  onModelChange?: (provider: string, modelId: string) => void;
+  sessionModel?: { provider: string; modelId: string } | null;
+  sessionThinkingLevel?: string | null;
+  accessMode: ApprovalMode;
+  onAccessModeChange: (mode: ApprovalMode) => void;
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  generatingVerb?: string;
+  variant?: 'desktop' | 'mobile';
+}
+
+export function EmptyWorkspacePrompt({
+  className = '',
+  folders = [],
+  selectedFolderId,
+  setSelectedFolderId,
+  inputValue,
+  setInputValue,
+  inputAttachments,
+  setInputAttachments,
+  onSend,
+  isGenerating,
+  appSettings = {},
+  localMessages = [],
+  provider,
+  providerNames,
+  modelName,
+  modelNames,
+  rootPath,
+  onThinkingLevelChange,
+  onModelChange,
+  sessionModel,
+  sessionThinkingLevel,
+  accessMode,
+  onAccessModeChange,
+  composerModelRef,
+  generatingVerb,
+  variant = 'desktop',
+}: EmptyWorkspacePromptProps) {
+  const [showWorkspace, setShowWorkspace] = useState(false);
+  const workspaceRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(workspaceRef, () => setShowWorkspace(false));
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  const selectedFolder = useMemo(() => {
+    return folders?.find(f => f.id === selectedFolderId);
+  }, [folders, selectedFolderId]);
+
+  useEffect(() => {
+    if (timelineRef.current) {
+      timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
+    }
+  }, [localMessages.length]);
+
+  return (
+    <div className={`flex flex-col h-full bg-canvas ${variant === 'mobile' ? 'px-3 py-4' : 'p-8'} ${className}`}
+      style={variant === 'mobile' ? { paddingBottom: 'max(1rem, env(safe-area-inset-bottom, 0px))' } : undefined}
+    >
+      <div
+        className={`mx-auto w-full max-w-[970px] flex flex-col min-h-0 space-y-3 ${
+          localMessages.length > 0 ? 'flex-1' : 'my-auto justify-center'
+        }`}
+      >
+        {/* Workspace Selection Seamless Dropdown (No border, transparent
+            background). Hidden once a chat has been sent — the session now has
+            a target workspace, so the composer is the only focus. */}
+        {localMessages.length === 0 && (
+          <div className="relative shrink-0" ref={workspaceRef}>
+          <button 
+            type="button"
+            onClick={() => setShowWorkspace(!showWorkspace)}
+            className="group flex items-center space-x-1.5 px-1.5 py-1 rounded-md text-xs font-medium text-ink/75 hover:text-ink hover:bg-ink/5 focus-visible:bg-ink/5 transition-all outline-none cursor-pointer select-none"
+          >
+            <Folder size={13} className="text-ink/50 group-hover:text-ink/80 transition-colors flex-shrink-0" />
+            <span className="flex items-center space-x-1 max-w-[260px] truncate tracking-tight">
+              <span>{selectedFolder ? selectedFolder.name : 'Select Workspace Context'}</span>
+            </span>
+            <ChevronDown size={13} className={`text-ink/40 group-hover:text-ink/70 flex-shrink-0 transition-transform duration-150 ${showWorkspace ? 'rotate-180 text-ink/70' : ''}`} />
+          </button>
+          
+          {showWorkspace && (
+            <div className="absolute bottom-full left-0 mb-1.5 w-64 bg-paper border border-ink/10 rounded-lg shadow-lg z-50 flex flex-col overflow-hidden text-xs py-1">
+              <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-ink/40 font-semibold border-b border-ink/5">
+                Target Workspace
+              </div>
+              <div className="max-h-56 scrollbar-overlay-container scrollbar-overlay-static py-1">
+                {folders.length === 0 ? (
+                  <div className="px-3 py-2 text-ink/40 italic">No workspaces available</div>
+                ) : (
+                  folders.map((f: any) => (
+                    <button 
+                      key={f.id}
+                      type="button"
+                      onClick={() => { setSelectedFolderId(f.id); setShowWorkspace(false); }}
+                      className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+                        selectedFolderId === f.id
+                          ? 'bg-ink/10 text-ink font-semibold'
+                          : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                      }`}
+                    >
+                      <div className="flex items-center space-x-2 truncate pr-2">
+                        <Folder size={12} className={selectedFolderId === f.id ? "text-ink flex-shrink-0" : "text-ink/50 flex-shrink-0"} />
+                        <span className="truncate font-medium">{f.name}</span>
+                      </div>
+                      {selectedFolderId === f.id && <Check size={12} className="text-ink flex-shrink-0" />}
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        )}
+
+        {/* Pending session timeline: optimistic bubbles render here immediately
+            on send, then the real session (UUID) takes over the ChatTimeline.
+            Only shown when there are messages so the empty composer stays
+            centered next to the workspace picker. */}
+        {localMessages.length > 0 && (
+          <div
+            ref={timelineRef}
+            className="flex-1 min-h-0 overflow-y-auto scroll-smooth overscroll-contain"
+          >
+            <div className="mx-auto w-full max-w-[970px]">
+              {localMessages.map((msg, idx) => {
+                const prev = localMessages[idx - 1];
+                let lastAiIdx = localMessages.length - 1;
+                while (lastAiIdx >= 0 && localMessages[lastAiIdx].notice) lastAiIdx--;
+                const isLoading = isGenerating && idx === lastAiIdx && msg.role === 'ai';
+                const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user';
+                // Notice rows are transparent for footer purposes — the last
+                // real AI message of a run still owns the footer (mirror
+                // ChatTimeline) and the notice itself never gets one.
+                const nextReal = localMessages.slice(idx + 1).find(m => !m.notice);
+                const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
+                return (
+                  <ChatMessageItem
+                    key={msg.id}
+                    msg={msg}
+                    provider={provider}
+                    providerNames={providerNames}
+                    modelName={modelName}
+                    modelNames={modelNames}
+                    thinkingLevel={sessionThinkingLevel ?? undefined}
+                    isStreaming={isLoading}
+                    footerVisible={isLastAi}
+                    className={isAiFragment ? 'mt-1' : 'mt-8'}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Docked above the input, mirroring chat-timeline/index.tsx so the
+            indicator does not jump when a pending new chat adopts its omp
+            session and the main timeline branch takes over rendering. */}
+        {isGenerating && (
+          <GeneratingIndicator
+            modelName={modelName}
+            generatingVerb={generatingVerb}
+            provider={provider}
+            providerNames={providerNames}
+          />
+        )}
+        <ChatInput
+          value={inputValue}
+          onChange={setInputValue}
+          rootPath={rootPath}
+          attachments={inputAttachments}
+          onAttachmentsChange={setInputAttachments}
+          onSend={onSend}
+          isGenerating={isGenerating}
+          disabled={!selectedFolderId}
+          className="w-full shrink-0"
+          appSettings={appSettings}
+          onThinkingLevelChange={onThinkingLevelChange}
+          onModelChange={onModelChange}
+          sessionModel={sessionModel}
+          sessionThinkingLevel={sessionThinkingLevel}
+          accessMode={accessMode}
+          onAccessModeChange={onAccessModeChange}
+          composerModelRef={composerModelRef}
+          variant={variant}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+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>;
+}
+
+const COOL_VERBS = [
+  'Synthesizing solution',
+  'Evaluating context',
+  'Reading workspace',
+  'Planning next step',
+  'Executing diagnostics',
+  'Compiling edge routes'
+];
+
+export function GeneratingIndicator({ modelName, generatingVerb, provider, providerNames }: 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) : '';
+
+  return (
+    <div 
+      id="generating-docked-indicator"
+      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">
+        
+        {/* 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 */}
+        <div className="flex items-center space-x-1.5 min-w-0 truncate">
+          {providerText && (
+            <span className="text-ink/55 truncate shrink">{providerText}</span>
+          )}
+          <span className="font-semibold text-ink truncate">
+            {modelName}
+          </span>
+          <span className="text-ink/40 shrink-0">•</span>
+          <span className="text-ink/75 flex items-center space-x-1 shrink-0 font-medium">
+            <span className="transition-all duration-300">{displayVerb}</span>
+            <span className="inline-flex 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>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,321 @@
+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 { ChatMessageData, ToolCallData } from '@/shared/types';
+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 { AiMessageFooter } from '@/client/components/workspace/chat-timeline/AiMessageFooter';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { capitalizeFirstLetter } from '@/shared/lib/chat/capitalize';
+import { formatClock, parseTodayLabel } from '@/shared/lib/format/time';
+
+interface ChatMessageItemProps {
+  msg: ChatMessageData | any;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  /** id → display-name map from the model catalog; resolves per-message ids. */
+  modelNames?: Record<string, string>;
+  /** Session thinking level shown in the AI footer. */
+  thinkingLevel?: string;
+  isStreaming?: boolean;
+  onRetry?: (msgId: string) => void;
+  onUndo?: (msgId: string, content?: string) => void;
+  onNewChat?: (content: string) => void;
+  /** Render the AI metadata/toolbar footer. Only the last AI message of a
+   *  response run should show it so multi-part JSONL responses do not repeat
+   *  the footer per message. */
+  footerVisible?: boolean;
+  /** Mobile uses a compact provider/model footer with a bottom-sheet menu. */
+  isMobile?: boolean;
+
+  /** Extra classes on the root wrapper (e.g. spacing between messages). */
+  className?: string;
+  /** Elapsed ms of the whole AI response run — shown as ⏳ duration. */
+  durationMs?: number | null;
+  /** Whether the message immediately preceding this one was also an assistant message. */
+  isPrevAssistant?: boolean;
+}
+
+export const ChatMessageItem = memo(function ChatMessageItem({
+  msg,
+  provider,
+  providerNames,
+  modelName, 
+  modelNames,
+  thinkingLevel,
+  isStreaming = false,
+  onRetry, 
+  onUndo, 
+  onNewChat,
+  footerVisible = true,
+  isMobile = false,
+  className = '',
+  durationMs = null,
+  isPrevAssistant = false,
+}: ChatMessageItemProps) {
+  const isUser = msg.role === 'user';
+
+  /** 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 msg.content === 'string' ? msg.content.trim() : msg.content), [msg.content]);
+  const assistantContent = useMemo(() => (typeof msg.content === 'string' ? capitalizeFirstLetter(msg.content) : msg.content), [msg.content]);
+
+  /** 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 msg.content === 'string' && /[A-Za-z0-9]/.test(msg.content);
+
+  const formatFooterDate = (value?: string) => {
+    const raw = value || msg.timestamp || msg.date;
+    if (!raw) return '';
+    if (raw.startsWith('Today,')) {
+      return `Today, ${raw.slice('Today,'.length).trim()}`;
+    }
+    // Bare "10:30 AM" timestamp (live path) — resolve against today.
+    if (/^\d{1,2}:\d{2}\s*(AM|PM)$/i.test(raw)) {
+      const parsedMs = parseTodayLabel(`Today, ${raw}`);
+      if (parsedMs !== null) return `Today, ${formatClock(parsedMs)}`;
+    }
+    const date = new Date(raw);
+    if (Number.isNaN(date.getTime())) return '';
+    const day = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    return `${day}, ${formatClock(date)}`;
+  };
+
+  const handleNewChat = (e?: TargetedMouseEvent<HTMLElement>) => {
+    if (e) e.preventDefault();
+    if (onNewChat) {
+      onNewChat(msg.content);
+    }
+  };
+
+  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" />
+            )}
+            {formatFooterDate() && <span>{formatFooterDate()}</span>}
+          </div>
+          
+          <div className="flex items-center space-x-1">
+            {/* Undo Button (to the left of copy button) */}
+            <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"
+              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"
+            />
+
+            {/* New Chat Button */}
+            <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"
+              onClick={handleNewChat}
+            >
+              <MessageSquarePlus size={12} />
+            </button>
+          </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);
+  const yieldOutput = allToolCalls
+    ?.filter((t: ToolCallData) => t.name === 'yield' || t.type === 'yield')
+    .find((t: ToolCallData) => t.status !== 'error')?.output;
+  const toolTitle = cleanIntent
+    || (yieldOutput ?? (allToolCalls?.length === 1 ? 'Tool Execution (1 step)' : `Tool Executions (${allToolCalls?.length} steps)`));
+
+  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 */}
+        {msg.notice && <SystemNotice notice={msg.notice} />}
+
+        {/* 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}
+            title={toolTitle}
+            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}
+            title={`Follow-up Tools (${secondaryToolCalls.length})`}
+            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>
+      
+      {/* Bottom AI Metadata & Actions Toolbar (Only shown once completed) */}
+      {!isStreaming && footerVisible && (
+        <AiMessageFooter
+          provider={msg.provider || provider}
+          providerNames={providerNames}
+          currentModel={(msg.model ? (modelNames?.[msg.model] ?? msg.model) : '') || modelName || ''}
+          thinkingLevel={msg.thinkingLevel ?? thinkingLevel}
+          dateStr={formatFooterDate()}
+          durationMs={durationMs ?? msg.durationMs}
+          usage={msg.usage}
+          content={msg.content}
+          msgId={msg.id}
+          onRetry={onRetry}
+          onNewChat={onNewChat}
+          isMobile={isMobile}
+        />
+      )}
+    </div>
+  );
+});