ompchamber 0.3.0

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

@@ -0,0 +1,209 @@
+import { useMemo, useState } from 'preact/hooks';
+import { AlertCircle, Bell, Bot, CheckCircle2, ChevronDown, Clock, Info, Layers } from 'lucide-preact';
+import { highlightCode, isCodeLike } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { parseTaskNotice } from '@/shared/lib/chat/task-result-parser';
+import { TaskResultContent } from '@/client/components/workspace/chat-timeline/TaskResultContent';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+
+interface SystemNoticeProps {
+  notice: string;
+}
+
+/** System notice collapsible — handles generic notices, structured <task-result> agent jobs, and <system-reminder> blocks. */
+export function SystemNotice({ notice }: SystemNoticeProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  useSyntaxReady();
+
+  // 1. Check if notice contains a structured <task-result> block
+  const taskNotice = useMemo(() => parseTaskNotice(notice), [notice]);
+
+  // 2. Check if notice is a <system-reminder> or action-reminder block
+  const reminderInfo = useMemo(() => {
+    const hasReminderTag = /<\/?system-reminder[^>]*>/i.test(notice);
+    const isReminderLike =
+      hasReminderTag || notice.includes('xd://resolve') || notice.includes('`ast_edit` result');
+    if (!isReminderLike) return null;
+
+    const cleanContent = notice.replace(/<\/?system-reminder[^>]*>/gi, '').trim();
+    if (!cleanContent) return null;
+
+    // First line for display title, removing backticks for clean title bar display
+    const firstLine =
+      cleanContent
+        .split(/\r?\n/)
+        .map((l) => l.trim())
+        .find(Boolean) ?? cleanContent;
+    const cleanTitle = firstLine.replace(/`([^`]+)`/g, '$1');
+
+    return {
+      content: cleanContent,
+      title: cleanTitle,
+    };
+  }, [notice]);
+
+  // 3. Fallback generic notice parsing (stripping any residual system-notice tags)
+  const genericInfo = useMemo(() => {
+    const clean = notice.replace(/<\/?system-notice[^>]*>/gi, '').trim();
+    const lines = clean.split(/\r?\n/);
+    const firstLine = (lines.find((l) => l.trim()) ?? '').trim();
+    const restStart = lines.findIndex((l) => l.trim() === firstLine);
+    const rest = lines.slice(restStart + 1).join('\n').trim();
+    const isCode = isCodeLike(rest);
+    return {
+      clean,
+      firstLine,
+      rest,
+      isCode,
+    };
+  }, [notice]);
+
+  const rawTitle = taskNotice?.intro || reminderInfo?.title || genericInfo.firstLine || notice;
+  const isTruncated = rawTitle.length > 100;
+  const displayTitle = rawTitle.slice(0, 100) + (isTruncated ? '...' : '');
+
+  // If notice has only 1 line of content AND does not exceed the 100-character ellipsis limit,
+  // disable expand since the entire text is already fully visible in the sub-header.
+  // If it exceeds the ellipsis limit (>100 chars) or has multiple lines, keep expand active.
+  const isExpandable = useMemo(() => {
+    if (taskNotice) return true;
+    const clean = notice
+      .replace(/<\/?(?:system-notice|system-reminder)[^>]*>/gi, '')
+      .trim();
+    const lines = clean
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter(Boolean);
+    return lines.length > 1 || clean.length > 100 || rawTitle.length > 100;
+  }, [taskNotice, notice, rawTitle]);
+
+  const noticeStyle = useMemo(() => {
+    if (taskNotice) {
+      const isError = taskNotice.status === 'failed' || taskNotice.status === 'error';
+      if (isError) {
+        return {
+          icon: <AlertCircle size={13} />,
+          badgeClass: 'bg-error/10 text-error',
+          label: 'Task Result',
+          isError: true,
+        };
+      }
+      return {
+        icon: <CheckCircle2 size={13} />,
+        badgeClass: 'bg-success/10 text-success',
+        label: 'Task Result',
+        isError: false,
+      };
+    }
+    if (reminderInfo) {
+      return {
+        icon: <Bell size={13} />,
+        badgeClass: 'bg-warning/10 text-warning',
+        label: 'System Reminder',
+        isError: false,
+      };
+    }
+    return {
+      icon: <Info size={13} />,
+      badgeClass: 'bg-info/10 text-info',
+      label: 'System Notice',
+      isError: false,
+    };
+  }, [taskNotice, reminderInfo]);
+
+  const handleToggle = () => {
+    if (!isExpandable) return;
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <div
+      className={`mx-3 overflow-hidden rounded-xl border border-ink/10 bg-paper text-[12px] text-ink transition-colors ${
+        isExpandable ? 'hover:border-ink/20' : ''
+      } select-text`}
+    >
+      <button
+        type="button"
+        onClick={handleToggle}
+        disabled={!isExpandable}
+        aria-expanded={isExpandable ? isOpen : undefined}
+        className={`flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors ${
+          isExpandable ? 'cursor-pointer hover:bg-ink/[0.03]' : 'cursor-default'
+        } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/20`}
+      >
+        <span className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${noticeStyle.badgeClass}`}>
+          {noticeStyle.icon}
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span className="flex flex-wrap items-center gap-2">
+            <span className="truncate text-[12px] font-semibold tracking-tight text-ink">
+              {noticeStyle.label}
+            </span>
+            {taskNotice?.agent && (
+              <span className="flex items-center gap-1 rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] text-ink/60">
+                <Bot size={10} />
+                {taskNotice.agent}
+              </span>
+            )}
+            {taskNotice?.status && (
+              <span
+                className={`flex items-center gap-1 rounded px-1.5 py-0.2 font-mono text-[9px] font-semibold uppercase ${
+                  noticeStyle.isError ? 'bg-error/10 text-error' : 'bg-success/10 text-success'
+                }`}
+              >
+                {noticeStyle.isError ? <AlertCircle size={10} /> : <CheckCircle2 size={10} />}
+                {taskNotice.status}
+              </span>
+            )}
+            {taskNotice?.duration && (
+              <span className="flex items-center gap-1 font-mono text-[9px] text-ink/40">
+                <Clock size={9} />
+                {taskNotice.duration}
+              </span>
+            )}
+            {taskNotice?.meta?.size && (
+              <span className="flex items-center gap-1 font-mono text-[9px] text-ink/40">
+                <Layers size={9} />
+                {taskNotice.meta.size}
+              </span>
+            )}
+          </span>
+          {!isOpen && displayTitle && (
+            <span className="truncate font-mono text-[10.5px] text-ink/45" title={rawTitle}>
+              {displayTitle}
+            </span>
+          )}
+        </span>
+        {isExpandable && (
+          <ChevronDown
+            size={14}
+            className={`shrink-0 text-ink/35 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          />
+        )}
+      </button>
+
+      {isOpen && isExpandable && (
+        <div className="border-t border-ink/8 bg-canvas/40 px-3.5 py-2.5">
+          {taskNotice ? (
+            <TaskResultContent task={taskNotice} />
+          ) : reminderInfo ? (
+            <div className="rounded-lg border border-ink/8 bg-paper p-3 text-[11.5px] leading-relaxed text-ink/85">
+              <MarkdownRenderer content={reminderInfo.content} />
+            </div>
+          ) : genericInfo.isCode ? (
+            <pre
+              className="max-h-56 overflow-auto font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/75 scrollbar-overlay-container scrollbar-overlay-static"
+              dangerouslySetInnerHTML={{
+                __html: highlightCode(genericInfo.rest || genericInfo.clean, 'javascript'),
+              }}
+            />
+          ) : (
+            <div className="rounded-lg border border-ink/8 bg-paper p-3 text-[11.5px] leading-relaxed text-ink/85">
+              <MarkdownRenderer content={genericInfo.clean || genericInfo.rest} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,175 @@
+import { useState } from 'preact/hooks';
+import { AlignLeft, Code, Eye, FileCode, FileText, Layers, Terminal } from 'lucide-preact';
+import type { ParsedTaskNotice } from '@/shared/lib/chat/task-result-parser';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { highlightCode, isCodeLike } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface TaskResultContentProps {
+  task: ParsedTaskNotice;
+}
+
+export function TaskResultContent({ task }: TaskResultContentProps) {
+  useSyntaxReady();
+  const structured = task.structuredOutput;
+  const isRawCode = !task.formattedJson && isCodeLike(task.rawOutput);
+
+  const [activeTab, setActiveTab] = useState<'formatted' | 'raw'>(
+    structured || !isRawCode ? 'formatted' : 'raw'
+  );
+
+  return (
+    <div className="space-y-3">
+      {/* Top action toolbar / tab toggles */}
+      <div className="flex items-center justify-between border-b border-ink/8 pb-2">
+        <div className="flex items-center gap-1.5">
+          {(structured || !isRawCode) && (
+            <button
+              type="button"
+              onClick={() => setActiveTab('formatted')}
+              className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                activeTab === 'formatted'
+                  ? 'bg-ink/10 text-ink'
+                  : 'text-ink/60 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              <Eye size={12} />
+              <span>{structured ? 'Overview' : 'Markdown'}</span>
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => setActiveTab('raw')}
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors ${
+              activeTab === 'raw'
+                ? 'bg-ink/10 text-ink'
+                : 'text-ink/60 hover:bg-ink/5 hover:text-ink'
+            }`}
+          >
+            <Code size={12} />
+            <span>{task.formattedJson ? 'Raw JSON' : isRawCode ? 'Code' : 'Raw Text'}</span>
+          </button>
+        </div>
+
+        <CopyButton
+          text={task.formattedJson || task.rawOutput}
+          className="flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px] font-medium text-ink/60 transition-colors hover:bg-ink/5 hover:text-ink"
+          iconSize={12}
+          title="Copy payload"
+          resetMs={1800}
+          wrapLabel
+          copiedLabelClassName="text-success"
+          label="Copy"
+        />
+      </div>
+
+      {/* Tab: Formatted Structured View or Rich Markdown */}
+      {activeTab === 'formatted' && (
+        structured ? (
+          <div className="space-y-3 text-[11.5px]">
+            {/* Summary Callout */}
+            {structured.summary && (
+              <div className="rounded-lg border border-ink/10 bg-canvas/60 p-2.5">
+                <div className="mb-1 flex items-center gap-1.5 font-mono text-[10px] font-semibold uppercase tracking-wider text-ink/70">
+                  <AlignLeft size={11} className="text-ink/60" />
+                  <span>Summary</span>
+                </div>
+                <div className="leading-relaxed text-ink/85">
+                  <MarkdownRenderer content={structured.summary} className="text-[11.5px]" />
+                </div>
+              </div>
+            )}
+
+            {/* Architecture info */}
+            {structured.architecture && (
+              <div className="rounded-lg border border-ink/8 bg-paper p-2.5">
+                <div className="mb-1 flex items-center gap-1.5 font-mono text-[10px] font-semibold text-ink/70 uppercase tracking-wider">
+                  <Layers size={11} className="text-ink/60" />
+                  <span>Architecture</span>
+                </div>
+                <p className="leading-relaxed text-ink/80">{structured.architecture}</p>
+              </div>
+            )}
+
+            {/* Inspected Files List */}
+            {Array.isArray(structured.files) && structured.files.length > 0 && (
+              <div className="rounded-lg border border-ink/8 bg-paper p-2.5">
+                <div className="mb-2 flex items-center justify-between">
+                  <div className="flex items-center gap-1.5 font-mono text-[10px] font-semibold text-ink/70 uppercase tracking-wider">
+                    <FileCode size={11} className="text-ink/60" />
+                    <span>Files Inspected</span>
+                  </div>
+                  <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] text-ink/50">
+                    {structured.files.length} items
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+                  {structured.files.map((file, idx) => (
+                    <div
+                      key={idx}
+                      className="flex flex-col justify-between rounded border border-ink/6 bg-canvas/40 p-1.5 transition-colors hover:border-ink/15"
+                    >
+                      <span className="font-mono text-[10.5px] font-medium text-ink truncate">
+                        {file.path}
+                      </span>
+                      {file.description && (
+                        <span className="text-[10px] text-ink/60 leading-tight line-clamp-2 mt-0.5">
+                          {file.description}
+                        </span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Markdown Report */}
+            {structured.report && (
+              <div className="rounded-lg border border-ink/8 bg-paper p-2.5">
+                <div className="mb-2 flex items-center gap-1.5 font-mono text-[10px] font-semibold text-ink/70 uppercase tracking-wider">
+                  <FileText size={11} className="text-ink/60" />
+                  <span>Report</span>
+                </div>
+                <div className="max-h-72 overflow-auto rounded border border-ink/6 bg-canvas/30 p-2 text-ink/85 scrollbar-overlay-container">
+                  <MarkdownRenderer content={structured.report} className="text-[11.5px] leading-relaxed" />
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-ink/8 bg-paper p-3 text-[11.5px] leading-relaxed text-ink/85 max-h-72 overflow-auto scrollbar-overlay-container">
+            <MarkdownRenderer content={task.rawOutput} />
+          </div>
+        )
+      )}
+
+      {/* Tab: Raw Code/JSON View */}
+      {activeTab === 'raw' && (
+        <pre
+          className="max-h-64 overflow-auto rounded-lg border border-ink/8 bg-paper p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/80 scrollbar-overlay-container scrollbar-overlay-static"
+          dangerouslySetInnerHTML={{
+            __html: highlightCode(
+              task.formattedJson || task.rawOutput,
+              task.formattedJson ? 'json' : isRawCode ? 'javascript' : 'markdown'
+            ),
+          }}
+        />
+      )}
+
+      {/* Outro & Follow-up URI Links */}
+      {task.outro && (
+        <div className="rounded-lg border border-ink/10 bg-canvas/60 p-2.5 text-[11px] text-ink/75">
+          <div className="mb-1.5 flex items-center gap-1.5 font-mono text-[9.5px] font-semibold uppercase tracking-wider text-ink/50">
+            <Terminal size={11} />
+            <span>Follow-up & Transcript</span>
+          </div>
+          <div className="text-[11.5px] leading-relaxed text-ink/85">
+            <MarkdownRenderer content={task.outro} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,130 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { BrainCircuit, ChevronDown, Sparkles } from 'lucide-preact';
+import type { ThinkingData } from '@/shared/types';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { CopyButton } from '@/client/components/common/CopyButton';
+
+interface ThinkingSectionProps {
+  thinking: ThinkingData | string;
+  defaultExpanded?: boolean;
+  showSeparator?: boolean;
+}
+
+export function ThinkingSection({ 
+  thinking, 
+  defaultExpanded = false,
+  showSeparator = false
+}: ThinkingSectionProps) {
+  const isGenerating = typeof thinking === 'object' ? Boolean(thinking.isGenerating) : false;
+  const [isOpen, setIsOpen] = useState(defaultExpanded || isGenerating);
+  const thoughtBodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isGenerating) setIsOpen(true);
+  }, [isGenerating]);
+
+  const thoughtText = typeof thinking === 'string' ? thinking : thinking.thought || '';
+  const noticeMatch = thoughtText.match(/<system-notice[^>]*>([\s\S]*?)<\/system-notice>/);
+  const noticeText = noticeMatch?.[1]?.trim() ?? '';
+  const cleanThought = thoughtText.replace(/<system-notice[^>]*>[\s\S]*?<\/system-notice>/g, '').trim();
+  const duration = typeof thinking === 'object' ? thinking.duration : undefined;
+  const summary = typeof thinking === 'object' && thinking.summary
+    ? thinking.summary
+    : cleanThought.slice(0, 100) + (cleanThought.length > 100 ? '...' : '');
+
+  useEffect(() => {
+    if (!isOpen || !isGenerating) return;
+    const el = thoughtBodyRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isOpen, cleanThought, isGenerating]);
+
+  const toggleOpen = () => setIsOpen(prev => !prev);
+
+  if (!cleanThought) return null;
+
+  return (
+    <div className={`mx-3 ${showSeparator ? 'space-y-1.5' : ''}`}>
+      {showSeparator && (
+        <div className="flex items-center gap-2 px-1 pt-0.5">
+          <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/35">
+            Thinking
+          </span>
+          <span className="h-px flex-1 bg-ink/8" />
+        </div>
+      )}
+      <div className="overflow-hidden rounded-xl border border-ink/10 bg-paper transition-colors hover:border-ink/20">
+        <button
+          type="button"
+          onClick={toggleOpen}
+        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-ink/[0.03] cursor-pointer select-none"
+        aria-expanded={isOpen}
+      >
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ink/5 text-ink/70">
+          <Sparkles size={13} />
+        </span>
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span className="flex items-center gap-1.5">
+            <span className="text-[12px] font-semibold tracking-tight text-ink">Thinking</span>
+            {isGenerating && <span className="h-1.5 w-1.5 rounded-full bg-ink/60 animate-pulse" />}
+          </span>
+          {!isOpen && summary && (
+            <span className="truncate font-mono text-[10.5px] text-ink/45">{summary}</span>
+          )}
+        </span>
+        {duration && (
+          <span className="shrink-0 rounded-full bg-ink/5 px-2 py-0.5 font-mono text-[10px] text-ink/50">
+            {duration}
+          </span>
+        )}
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-ink/35 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="border-t border-ink/8 bg-canvas/40 px-3 py-3">
+          <div className="flex items-center justify-between pb-1.5">
+            <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
+              Model Reasoning & Strategy
+            </span>
+            <CopyButton
+              text={cleanThought}
+              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              title="Copy thinking"
+              wrapLabel
+              label="Copy"
+            />
+          </div>
+
+          {noticeText && (
+            <div className="mb-2 flex items-start gap-2.5 rounded-lg border border-ink/15 bg-paper px-3 py-2.5">
+              <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink/10">
+                <BrainCircuit size={13} className="text-ink/70" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="mb-0.5 text-[9.5px] font-semibold uppercase tracking-[0.12em] text-ink/50">
+                  System Notice
+                </div>
+                <div className="text-[12px] leading-relaxed text-ink/85">
+                  <MarkdownRenderer content={noticeText} className="text-[12px] text-ink/85 leading-relaxed" />
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div
+            ref={thoughtBodyRef}
+            className="max-h-72 overflow-auto border-l-2 border-ink/15 py-1 pl-3 text-ink/80 scrollbar-overlay-container scrollbar-overlay-static select-text"
+          >
+            <MarkdownRenderer
+              content={cleanThought}
+              className="text-[12px] leading-relaxed text-ink/85 [&_.code-block]:my-2 [&_p]:my-1.5 [&_ul]:my-1.5 [&_ol]:my-1.5"
+            />
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,130 @@
+import type { RefObject } from 'preact/compat';
+import { ArrowDown } from 'lucide-preact';
+import { MessageList } from '@/client/components/workspace/chat-timeline/MessageList';
+import { MinimapShortcuts } from '@/client/components/workspace/chat-timeline/MinimapShortcuts';
+import { LoadingOlderIndicator } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
+import type { ChatMessageData } from '@/shared/types';
+
+interface TimelineBodyProps {
+  isMobile: boolean;
+  userMessages: ChatMessageData[];
+  onScrollTo: (id: string) => void;
+  scrollRef: RefObject<HTMLDivElement>;
+  contentRef: (node: HTMLDivElement | null) => void;
+  handleScroll: () => void;
+  isScrolling: boolean;
+  loadingOlder: boolean;
+  hasMore: boolean;
+  loadOlderError: boolean;
+  loadOlder: () => void;
+  messages: ChatMessageData[];
+  isGenerating: boolean;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  modelNames?: Record<string, string>;
+  thinkingLevel?: string;
+  onUndo: (id: string, content?: string) => void;
+  onRetry: (id: string) => void;
+  onNewChat: (content: string) => void;
+  showScrollBottom: boolean;
+  jumpToBottom: (behavior?: ScrollBehavior) => void;
+}
+
+/**
+ * Scrollable timeline body: the minimap rail (desktop only), the history
+ * paging affordance, the ordered message rows, and the scroll-to-bottom
+ * button. Split out of ChatTimeline so the parent stays a pure layout shell.
+ */
+export function TimelineBody({
+  isMobile,
+  userMessages,
+  onScrollTo,
+  scrollRef,
+  contentRef,
+  handleScroll,
+  isScrolling,
+  loadingOlder,
+  hasMore,
+  loadOlderError,
+  loadOlder,
+  messages,
+  isGenerating,
+  provider,
+  providerNames,
+  modelName,
+  modelNames,
+  thinkingLevel,
+  onUndo,
+  onRetry,
+  onNewChat,
+  showScrollBottom,
+  jumpToBottom,
+}: TimelineBodyProps) {
+  return (
+    <>
+      {/* Minimap Shortcuts — desktop only: the rail needs side room a
+          phone does not have. */}
+      {!isMobile && (
+        <MinimapShortcuts userMessages={userMessages} onScrollTo={onScrollTo} />
+      )}
+
+      {/* Timeline Body */}
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        className={`flex-1 scrollbar-overlay-container overscroll-contain scroll-smooth overflow-x-hidden ${
+          isMobile ? 'px-3 py-3 pb-8' : 'p-4 pb-10'
+        } ${
+          isScrolling ? 'timeline-scrollbar-visible' : 'timeline-scrollbar-hidden'
+        }`}
+      >
+        <div ref={contentRef} className="mx-auto w-full max-w-[970px]">
+          {(loadingOlder || hasMore || loadOlderError) && (
+            <div className="pb-1">
+              {loadingOlder
+                ? <LoadingOlderIndicator />
+                : (
+                  <button
+                    type="button"
+                    onClick={loadOlder}
+                    className={`block mx-auto px-3 py-1 rounded-full border text-[11px] font-mono transition-colors ${loadOlderError
+                      ? 'border-error/40 text-error hover:border-error'
+                      : 'border-ink/15 text-ink/50 hover:text-ink hover:border-ink/30'}`}
+                  >
+                    {loadOlderError ? 'Failed to load — retry' : 'Load earlier messages'}
+                  </button>
+                )}
+            </div>
+          )}
+          <MessageList
+            messages={messages}
+            isGenerating={isGenerating}
+            provider={provider}
+            providerNames={providerNames}
+            modelName={modelName}
+            modelNames={modelNames}
+            thinkingLevel={thinkingLevel}
+            onUndo={onUndo}
+            onRetry={onRetry}
+            onNewChat={onNewChat}
+            isMobile={isMobile}
+          />
+        </div>
+      </div>
+
+      {/* Scroll to bottom button */}
+      {showScrollBottom && (
+        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-20">
+          <button
+            onClick={() => jumpToBottom('smooth')}
+            className="flex items-center justify-center w-8 h-8 rounded-full border border-ink/20 bg-paper text-ink/60 hover:text-ink hover:bg-ink/5 transition-all shadow-sm"
+            title="Scroll to bottom"
+          >
+            <ArrowDown size={16} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+}