auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/components/ConversationSessionBar.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { History, Plus } from 'lucide-react';
+import { limitTitleWidth, SESSION_TITLE_MAX_WIDTH } from '@openfilm/shared';
+import { Tooltip } from './Tooltip';
+import { useT } from '@/i18n';
+import {
+  groupSessionsByRecency,
+  type ProjectSessionItem,
+  type SessionRecencyKey,
+} from '@/lib/project-sessions';
+import { PANE_BAR, PANE_BTN, PANE_BTN_ON, PANE_ICON, PANE_TITLE } from './dock-pane-bar';
+import { chatLayer } from '@/lib/chat-layer';
+
+const RECENCY_I18N: Record<SessionRecencyKey, 'sidebar.searchToday' | 'sidebar.searchYesterday' | 'sidebar.searchPrevious7Days' | 'sidebar.searchEarlier'> = {
+  today: 'sidebar.searchToday',
+  yesterday: 'sidebar.searchYesterday',
+  week: 'sidebar.searchPrevious7Days',
+  earlier: 'sidebar.searchEarlier',
+};
+
+/**
+ * The title cell's maximum width.
+ *
+ * The title itself is already capped (SESSION_TITLE_MAX_WIDTH: 15 CJK or 30 Latin characters); this only keeps it
+ * from filling the bar. So it must be a little wider than those 30 characters, or a title within the cap gets cut
+ * while the bar has room to spare.
+ */
+const TITLE_MAX = 'max-w-[15rem]';
+
+/**
+ * The bar at the top of the conversation: the session's title on the left (none drawn without one), new and
+ * history on the right.
+ *
+ * The title comes from the first message, so it appears once something has been said. Clicking it renames, no
+ * separate pencil. The history popover has search on top and groups for today, yesterday, the past 7 days and
+ * earlier.
+ */
+export function ConversationSessionBar({
+  sessions,
+  currentSessionId,
+  onNewSession,
+  onSelectSession,
+  onRenameSession,
+  busy = false,
+}: {
+  sessions: ProjectSessionItem[];
+  currentSessionId: string;
+  /**
+   * A turn is running. A project runs one conversation at a time, so new and switch are off meanwhile; otherwise
+   * two agents would edit the same film.json in the same project folder. Both work again once the turn ends.
+   */
+  busy?: boolean;
+  onNewSession?: () => void;
+  onSelectSession?: (sessionId: string) => void;
+  onRenameSession?: (title: string) => Promise<void>;
+}) {
+  const t = useT();
+  const current = sessions.find((item) => item.id === currentSessionId);
+  const label = current?.title.trim() ?? '';
+  const [renaming, setRenaming] = React.useState(false);
+  const [draft, setDraft] = React.useState(label);
+  const [historyPos, setHistoryPos] = React.useState<{ x: number; y: number } | null>(null);
+  const [query, setQuery] = React.useState('');
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    setDraft(label);
+    setRenaming(false);
+  }, [label, currentSessionId]);
+
+  React.useEffect(() => {
+    if (!historyPos) return;
+    const close = () => setHistoryPos(null);
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setHistoryPos(null);
+    };
+    const onScroll = (event: Event) => {
+      if (panelRef.current?.contains(event.target as Node)) return;
+      close();
+    };
+    window.addEventListener('click', close);
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('resize', close);
+    const focus = window.setTimeout(() => searchRef.current?.focus(), 0);
+    return () => {
+      window.clearTimeout(focus);
+      window.removeEventListener('click', close);
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', close);
+    };
+  }, [historyPos]);
+
+  React.useEffect(() => {
+    if (!historyPos) setQuery('');
+  }, [historyPos]);
+
+  /* A turn started while history is open: close it, none of its rows can be picked now. */
+  React.useEffect(() => {
+    if (busy) setHistoryPos(null);
+  }, [busy]);
+
+  const titleBoxRef = React.useRef<HTMLButtonElement | null>(null);
+  const [titleEditWidth, setTitleEditWidth] = React.useState<number | null>(null);
+
+  function startRename() {
+    if (!onRenameSession || !label) return;
+    const width = titleBoxRef.current?.getBoundingClientRect().width;
+    setTitleEditWidth(width && width > 0 ? width : null);
+    setDraft(label);
+    setRenaming(true);
+  }
+
+  async function commitRename() {
+    if (!onRenameSession) {
+      setRenaming(false);
+      return;
+    }
+    const clean = draft.replace(/\s+/g, ' ').trim();
+    setRenaming(false);
+    if (!clean || clean === label) {
+      setDraft(label);
+      return;
+    }
+    await onRenameSession(clean);
+  }
+
+  const listed = sessions.filter((item) => item.turns > 0);
+  const untitled = t('project.untitledSession');
+  const labelOf = (item: ProjectSessionItem) => item.title.trim() || untitled;
+  const needle = query.trim().toLowerCase();
+  const visible = needle
+    ? listed.filter((item) => labelOf(item).toLowerCase().includes(needle))
+    : listed;
+  const groups = groupSessionsByRecency(visible);
+
+  return (
+    <div className={PANE_BAR}>
+      {label ? (
+        renaming ? (
+          <input
+            autoFocus
+            value={draft}
+            onChange={(event) => {
+              const next = event.target.value;
+              if ((event.nativeEvent as InputEvent).isComposing) {
+                setDraft(next);
+                return;
+              }
+              setDraft(limitTitleWidth(next, SESSION_TITLE_MAX_WIDTH));
+            }}
+            onCompositionEnd={(event) => {
+              setDraft(limitTitleWidth(event.currentTarget.value, SESSION_TITLE_MAX_WIDTH));
+            }}
+            onBlur={() => void commitRename()}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') void commitRename();
+              if (event.key === 'Escape') {
+                setDraft(label);
+                setRenaming(false);
+              }
+            }}
+            style={titleEditWidth ? { width: titleEditWidth } : undefined}
+            className={`${TITLE_MAX} ${PANE_TITLE} box-border h-[22px] max-w-[min(15rem,calc(100%-52px))] bg-transparent px-1 outline-none`}
+          />
+        ) : onRenameSession ? (
+          <Tooltip label={t('projectMenu.rename')} side="bottom">
+            <button
+              ref={titleBoxRef}
+              type="button"
+              onClick={startRename}
+              className={`${TITLE_MAX} flex h-[22px] w-fit min-w-0 items-center rounded-md px-1 text-left transition hover:bg-[var(--bg-hover)]`}
+            >
+              <span title={label} className={PANE_TITLE}>
+                {label}
+              </span>
+            </button>
+          </Tooltip>
+        ) : (
+          <span
+            title={label}
+            className={`${TITLE_MAX} ${PANE_TITLE} px-1`}
+          >
+            {label}
+          </span>
+        )
+      ) : null}
+      <span className="min-w-0 flex-1" />
+      <div className="flex shrink-0 items-center gap-1">
+        {/* These buttons sit at the top edge, so tooltips open downwards. */}
+        {onNewSession ? (
+          <Tooltip label={busy ? t('project.sessionBusy') : t('projectMenu.newSession')} side="bottom">
+            <button
+              type="button"
+              aria-label={t('projectMenu.newSession')}
+              aria-disabled={busy || undefined}
+              onClick={busy ? undefined : onNewSession}
+              className={`${PANE_BTN} ${busy ? 'cursor-not-allowed opacity-40' : ''}`}
+            >
+              <Plus size={PANE_ICON} />
+            </button>
+          </Tooltip>
+        ) : null}
+        {onSelectSession ? (
+          <Tooltip label={busy ? t('project.sessionBusy') : t('project.sessionHistory')} side="bottom">
+            <button
+              type="button"
+              aria-label={t('project.sessionHistory')}
+              aria-expanded={historyPos != null}
+              aria-disabled={busy || undefined}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (busy) return;
+                const rect = event.currentTarget.getBoundingClientRect();
+                setHistoryPos((cur) => (cur ? null : { x: rect.right, y: rect.bottom + 4 }));
+              }}
+              className={`${PANE_BTN} ${historyPos ? PANE_BTN_ON : ''} ${busy ? 'cursor-not-allowed opacity-40' : ''}`}
+            >
+              <History size={PANE_ICON} />
+            </button>
+          </Tooltip>
+        ) : null}
+      </div>
+
+      {historyPos &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            ref={panelRef}
+            className="fixed z-[110] w-[216px] overflow-hidden rounded-md border border-[var(--border)] bg-[var(--surface)] shadow-[var(--shadow-lg)]"
+            style={{
+              right: Math.max(window.innerWidth - historyPos.x, 12),
+              top: historyPos.y,
+              animation: 'openfilm-rise 0.14s ease-out both',
+            }}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="px-2 pt-1">
+              <input
+                ref={searchRef}
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('project.sessionSearchPlaceholder')}
+                className="h-5 w-full bg-transparent text-[11px] text-[var(--text)] outline-none placeholder:text-[var(--text-faint)]"
+              />
+            </div>
+            <div className="max-h-[min(320px,50vh)] overflow-y-auto pb-1">
+              {groups.length === 0 ? (
+                <div className="px-2 py-5 text-left text-[11px] text-[var(--text-faint)]">
+                  {t('project.sessionHistoryEmpty')}
+                </div>
+              ) : (
+                groups.map((group) => (
+                  <div key={group.key}>
+                    <div className="px-2 pb-0.5 pt-1 text-left text-[10px] font-medium text-[var(--text-faint)]">
+                      {t(RECENCY_I18N[group.key])}
+                    </div>
+                    {group.items.map((item) => {
+                      const active = item.id === currentSessionId;
+                      const name = labelOf(item);
+                      return (
+                        <button
+                          key={item.id}
+                          type="button"
+                          onClick={() => {
+                            setHistoryPos(null);
+                            if (!active) onSelectSession?.(item.id);
+                          }}
+                          className={`mx-1 flex w-[calc(100%-8px)] items-center rounded-md px-1 py-[5px] text-left text-[12px] leading-tight transition hover:bg-[var(--bg-hover)] ${
+                            active ? 'bg-[var(--bg-hover)] text-[var(--text)]' : 'text-[var(--text-muted)]'
+                          }`}
+                        >
+                          <span className="min-w-0 flex-1 truncate">{name}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>,
+          chatLayer(),
+        )}
+    </div>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/CopyDiagnostics.tsx

@@ -0,0 +1,24 @@
+/**
+ * By a turn that failed: the diagnostic report on the clipboard, to paste into an issue (the app's main.mjs makes it:
+ * what OpenFilm finds on this computer, the last week's problems, the agents). Not shown by a shell that lacks it.
+ */
+import React from 'react';
+import { useT } from '@/i18n';
+import { desktopBridge } from '@/lib/desktop-bridge';
+
+export function CopyDiagnostics() {
+  const t = useT();
+  const copy = desktopBridge()?.agents?.copyReport;
+  const [state, setState] = React.useState<'idle' | 'making' | 'copied'>('idle');
+  if (!copy) return null;
+  const run = () => {
+    setState('making');
+    void copy().then((r) => setState(r.ok ? 'copied' : 'idle'), () => setState('idle'));
+  };
+  return (
+    <button type="button" onClick={run} disabled={state === 'making'} title={t('composer.copyDiagnosticsHint')}
+      className="underline underline-offset-2 hover:text-[var(--text)] disabled:opacity-60">
+      {state === 'copied' ? t('composer.diagnosticsCopied') : t('composer.copyDiagnostics')}
+    </button>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/Divider.tsx

@@ -0,0 +1,47 @@
+/**
+ * The seam between Studio and the chat is the handle that sizes the chat, as Studio's own seams are (its
+ * PaneDivider): it draws nothing for a mouse (the cursor says it can be dragged, the panes say what is happening) and
+ * lights up only when reached by keyboard. The app owns the width (shell/bridge.ts keeps it within the window).
+ */
+import React from 'react';
+import { app as desktop } from '../app-bridge';
+
+const STEP = 24;
+
+/** the chat's column: its width is what the seam changes */
+const columnWidth = (el: Element) => (el.closest('[data-studio-host-panel]') ?? el.parentElement ?? el).getBoundingClientRect().width;
+
+export function Divider() {
+  const drag = React.useRef<{ x: number; width: number } | null>(null);
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize the chat"
+      tabIndex={0}
+      className="absolute bottom-0 left-0 top-0 z-20 w-[10px] cursor-col-resize outline-none focus-visible:bg-[var(--border-strong)]"
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { x: event.clientX, width: columnWidth(event.currentTarget) };
+        document.body.style.cursor = 'col-resize';
+      }}
+      onPointerMove={(event) => {
+        if (!drag.current) return;
+        desktop.setChatWidth(drag.current.width + (drag.current.x - event.clientX));
+      }}
+      onPointerUp={(event) => {
+        if (!drag.current) return;
+        desktop.setChatWidth(drag.current.width + (drag.current.x - event.clientX), true);
+        drag.current = null;
+        document.body.style.cursor = '';
+      }}
+      onPointerCancel={() => { drag.current = null; document.body.style.cursor = ''; }}
+      onKeyDown={(event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+        event.preventDefault();
+        desktop.setChatWidth(columnWidth(event.currentTarget) + (event.key === 'ArrowLeft' ? STEP : -STEP), true);
+      }}
+    />
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/FileChangesList.tsx

@@ -0,0 +1,119 @@
+/**
+ * Under the agent's reply: what the turn changed in the project's files (lib/file-changes), as a coding agent's app
+ * lists them. One card, a row per file: its name, its lines added and removed, and on a click its changed lines. The
+ * first few rows show; the rest open from the last row. Settings → Developer turns it off.
+ */
+import React from 'react';
+import { ChevronRight, File, FileAudio, FileCode, FileImage, FileJson, FileText, FileVideo } from 'lucide-react';
+import { useT } from '@/i18n';
+import type { FileChange, FileHunk } from '@/lib/file-changes';
+import { StickToBottomContext } from './useStickToBottom';
+
+/** rows shown before "N more files" */
+const ROWS_SHOWN = 4;
+
+const ICONS: Array<[RegExp, typeof File]> = [
+  [/\.(html?|css|[cm]?js|jsx|tsx?|py|sh)$/i, FileCode],
+  [/\.json$/i, FileJson],
+  [/\.(md|txt|srt|vtt|csv|ya?ml|toml|xml)$/i, FileText],
+  [/\.(png|jpe?g|gif|webp|avif|svg)$/i, FileImage],
+  [/\.(mp3|m4a|wav|aac|ogg|flac|opus)$/i, FileAudio],
+  [/\.(mp4|mov|webm|mkv|m4v)$/i, FileVideo],
+];
+const iconOf = (path: string) => ICONS.find(([test]) => test.test(path))?.[1] ?? File;
+
+export function FileChangesList({ changes }: { changes: FileChange[] }) {
+  const t = useT();
+  const thread = React.useContext(StickToBottomContext);
+  const [all, setAll] = React.useState(false);
+  const shown = all ? changes : changes.slice(0, ROWS_SHOWN);
+  const hidden = changes.length - shown.length;
+  /* opening a row or the rest makes the reply taller: the thread stays where it is, as it does for the work summary */
+  const keepPlace = () => thread?.skipNextPin();
+
+  return (
+    <div className="min-w-0 overflow-hidden rounded-[10px] border border-[var(--border)]">
+      {shown.map((change, i) => (
+        <FileRow key={change.path} change={change} first={i === 0} onToggle={keepPlace} />
+      ))}
+      {hidden > 0 || changes.length > ROWS_SHOWN ? (
+        <button
+          type="button"
+          onClick={() => { keepPlace(); setAll((value) => !value); }}
+          className="flex h-9 w-full items-center border-t border-[var(--border)] px-3 text-left text-[12.5px] text-[var(--chat-hint)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--chat-text)]"
+        >
+          {hidden > 0 ? t('fileChanges.more').replace('{n}', String(hidden)) : t('fileChanges.fewer')}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function FileRow({ change, first, onToggle }: { change: FileChange; first: boolean; onToggle: () => void }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const Icon = iconOf(change.path);
+  const slash = change.path.lastIndexOf('/');
+  const name = change.path.slice(slash + 1);
+  const folder = slash > 0 ? change.path.slice(0, slash) : '';
+  const lines = change.added != null || change.removed != null;
+  const canOpen = Boolean(change.hunks?.length);
+  const row = (
+    <>
+      <Icon size={14} aria-hidden className="shrink-0 text-[var(--chat-hint)]" />
+      <span className={`min-w-0 truncate text-[13px] text-[var(--chat-text)] ${change.change === 'removed' ? 'line-through opacity-70' : ''}`} title={change.path}>
+        {name}
+        {folder ? <span className="ml-1.5 text-[12px] text-[var(--chat-hint)]">{folder}</span> : null}
+      </span>
+      <span className="ml-auto flex shrink-0 items-center gap-1.5 pl-3 font-mono text-[12px] tabular-nums">
+        {lines ? (
+          <>
+            {change.added ? <span className="text-[var(--ok)]">+{change.added}</span> : null}
+            {change.removed ? <span className="text-[var(--err)]">−{change.removed}</span> : null}
+          </>
+        ) : (
+          <span className="font-sans text-[var(--chat-hint)]">{t(`fileChanges.${change.change}`)}</span>
+        )}
+      </span>
+      <ChevronRight size={13} aria-hidden className={`shrink-0 text-[var(--chat-hint)] transition-transform ${open ? 'rotate-90' : ''} ${canOpen ? '' : 'invisible'}`} />
+    </>
+  );
+  const shell = `flex h-9 w-full min-w-0 items-center gap-2 px-3 text-left ${first ? '' : 'border-t border-[var(--border)]'}`;
+  return (
+    <div className="min-w-0">
+      {canOpen ? (
+        <button type="button" aria-expanded={open} onClick={() => { onToggle(); setOpen((value) => !value); }}
+          className={`${shell} transition-colors hover:bg-[var(--bg-hover)]`}>
+          {row}
+        </button>
+      ) : <div className={shell}>{row}</div>}
+      {open && change.hunks ? <Hunks hunks={change.hunks} cut={change.cut === true} /> : null}
+    </div>
+  );
+}
+
+/* the changed lines as git shows them: each hunk's place, then its lines, removed (−) and added (+) */
+function Hunks({ hunks, cut }: { hunks: FileHunk[]; cut: boolean }) {
+  const t = useT();
+  return (
+    <div className="max-h-[360px] min-w-0 overflow-auto border-t border-[var(--border)] font-mono text-[11.5px] leading-[18px]">
+      {hunks.map((hunk, i) => (
+        <React.Fragment key={i}>
+          <div className="w-max min-w-full whitespace-pre px-3 text-[var(--chat-hint)] opacity-80">
+            @@ −{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},{hunk.newLines} @@
+          </div>
+          {hunk.lines.map((line, j) => {
+            const sign = line[0];
+            return (
+              <div key={j} className={`flex w-max min-w-full whitespace-pre pr-3 ${sign === '-' ? 'bg-[rgba(229,83,75,0.13)] text-[#e5534b]' : sign === '+' ? 'bg-[rgba(63,185,80,0.13)] text-[#3fb950]' : 'text-[var(--chat-hint)]'}`}>
+                <span aria-hidden className="w-6 shrink-0 select-none text-center opacity-80">{sign === '-' ? '−' : sign === '+' ? '+' : ''}</span>
+                <span>{line.slice(1)}</span>
+              </div>
+            );
+          })}
+        </React.Fragment>
+      ))}
+      {cut ? <div className="px-3 py-1 font-sans text-[12px] text-[var(--chat-hint)]">{t('fileChanges.cut')}</div> : null}
+    </div>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/Markdown.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import * as React from 'react';
+import {
+  parseInlineMarkdown,
+  rescanMarkdown,
+  type MarkdownBlock,
+  type MarkdownScan,
+} from '@openfilm/shared/markdown';
+import type { StudioRef } from '../app-bridge';
+import { useT } from '@/i18n';
+import { agentRefPill, parseAgentRefs } from '@/lib/agent-refs';
+import { useClipSrc } from '@/lib/studio-film';
+import { PromptPill, PromptPillRevealContext } from './prompt-editor';
+
+/**
+ * Markdown in the conversation.
+ *
+ * This is speech, not a document page: the size matches the text rows around it (14px / 1.65, as tool rows and
+ * thoughts), blocks sit close together, headings differ only by weight and a touch of size, with no anchors or
+ * line numbers.
+ */
+export function Markdown({ text, muted = false }: { text: string; muted?: boolean }) {
+  const blocks = useMarkdownBlocks(text);
+  if (!blocks.length) return null;
+  return (
+    <div className={`flex min-w-0 flex-col gap-2 text-[14px] leading-[1.65] ${muted ? 'text-[var(--chat-hint)]' : 'text-[var(--chat-text)]'}`}>
+      {blocks.map((block, index) => <MarkdownRow key={index} block={block} />)}
+    </div>
+  );
+}
+
+/**
+ * Incremental parsing, one cache per message.
+ *
+ * The text streams in token by token. Reparsing each frame isn't slow, but it makes new block objects, so every
+ * memoized MarkdownRow re-renders: near the end of a long reply, each token re-renders dozens of blocks.
+ * rescanMarkdown rescans only the part that can still change and keeps unchanged blocks as the same objects, so the
+ * memo works.
+ *
+ * Writing the ref is caching, not state: the same text always parses the same, so an interrupted render can't
+ * break it. Before continuing, the scan checks the old text is a prefix, and rescans everything if not.
+ */
+function useMarkdownBlocks(text: string): MarkdownBlock[] {
+  const cache = React.useRef<MarkdownScan | null>(null);
+  const rows = React.useRef<MarkdownBlock[]>([]);
+  const next = rescanMarkdown(cache.current, text);
+  if (next !== cache.current) {
+    cache.current = next;
+    rows.current = next.blocks.map((entry) => entry.block);
+  }
+  return rows.current;
+}
+
+const MarkdownRow = React.memo(function MarkdownRow({ block }: { block: MarkdownBlock }) {
+  if (block.kind === 'heading') {
+    // No room for an h1 in a conversation: a heading only leads a few lines, a little top space is enough.
+    const cls = block.level <= 2
+      ? 'pt-1 text-[1.07em] font-semibold text-[var(--chat-text)]'
+      : 'pt-0.5 font-semibold text-[var(--chat-text)]';
+    return <p className={cls}>{inline(block.text)}</p>;
+  }
+  if (block.kind === 'paragraph') {
+    // In chat a single newline is a line break (not a space as in CommonMark): three lines the model wrote
+    // separately must not run into one sentence.
+    return <p className="whitespace-pre-wrap break-words">{inline(block.text)}</p>;
+  }
+  if (block.kind === 'quote') {
+    return (
+      <blockquote className="whitespace-pre-wrap break-words border-l-2 border-[var(--border)] pl-2.5 text-[var(--text-muted)]">
+        {inline(block.text)}
+      </blockquote>
+    );
+  }
+  if (block.kind === 'list') {
+    const Tag = block.ordered ? 'ol' : 'ul';
+    return (
+      <Tag
+        {...(block.ordered && block.start != null ? { start: block.start } : {})}
+        className={`flex flex-col gap-0.5 pl-[18px] marker:text-[var(--text-faint)] ${
+          block.ordered ? 'list-decimal' : 'list-disc'
+        }`}
+      >
+        {block.lines.map((line, index) => (
+          <li key={index} className="break-words">{inline(line)}</li>
+        ))}
+      </Tag>
+    );
+  }
+  if (block.kind === 'code') {
+    // No syntax highlighting: code blocks in chat are mostly a few lines of commands, not worth a highlighter
+    // in the bundle.
+    return (
+      <pre className="overflow-x-auto rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 font-mono text-[13.5px] leading-[1.55] text-[var(--text-dim)]">
+        <code>{block.text}</code>
+      </pre>
+    );
+  }
+  if (block.kind === 'table') {
+    const [head, ...body] = block.rows;
+    return (
+      <div className="overflow-x-auto rounded-lg border border-[var(--border)]">
+        <table className="w-full border-collapse text-left text-[14px]">
+          {head ? (
+            <thead className="bg-[var(--surface-2)]">
+              <tr>
+                {head.map((cell, index) => (
+                  <th key={index} className="border-b border-[var(--border)] px-2 py-1 font-semibold">
+                    {inline(cell)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          ) : null}
+          <tbody>
+            {body.map((row, rowIndex) => (
+              <tr key={rowIndex} className="border-b border-[var(--border)]/60 last:border-0">
+                {row.map((cell, cellIndex) => (
+                  <td key={cellIndex} className="px-2 py-1 text-[var(--text-dim)]">{inline(cell)}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+  return <hr className="border-[var(--border)]" />;
+});
+
+function inline(text: string): React.ReactNode[] {
+  return parseInlineMarkdown(text).map((piece, index) => {
+    if (piece.kind === 'code') {
+      return (
+        <code key={index} className="rounded bg-[var(--surface-2)] px-1 py-0.5 font-mono text-[0.88em]">
+          {piece.text}
+        </code>
+      );
+    }
+    if (piece.kind === 'strong') return <strong key={index} className="font-semibold">{withRefs(piece.text)}</strong>;
+    if (piece.kind === 'em') return <em key={index} className="italic">{withRefs(piece.text)}</em>;
+    if (piece.kind === 'link') {
+      return (
+        <a
+          key={index}
+          href={piece.href}
+          // Always a new tab: a turn may be running here, and navigating away would lose it.
+          target="_blank"
+          rel="noopener noreferrer"
+          className="break-all text-[var(--accent)] underline underline-offset-2 hover:opacity-80"
+        >
+          {piece.text}
+        </a>
+      );
+    }
+    return <React.Fragment key={index}>{withRefs(piece.text)}</React.Fragment>;
+  });
+}
+
+/**
+ * The agent's words with what it points at in Studio as pills (lib/agent-refs: `[[clip:s3]]`, `[[t:13.6]]`…). Only
+ * in words: what it writes in code stays code, a token there being an example, not a reference.
+ */
+function withRefs(text: string): React.ReactNode {
+  if (!text.includes('[[')) return text;
+  const segments = parseAgentRefs(text);
+  if (segments.length === 1 && segments[0]!.kind === 'text') return text;
+  return segments.map((segment, index) => (segment.kind === 'text'
+    ? <React.Fragment key={index}>{segment.text}</React.Fragment>
+    : <AgentRefPill key={index} studioRef={segment.ref} />));
+}
+
+/** A thing an agent pointed at: read-only, its hover card as a sent pill's, a click shows it in Studio. */
+function AgentRefPill({ studioRef }: { studioRef: StudioRef }) {
+  const t = useT();
+  const ctx = React.useContext(PromptPillRevealContext);
+  const clipSrc = useClipSrc(studioRef.kind === 'clip' ? studioRef.id : null);
+  const reference = React.useMemo(
+    () => agentRefPill(studioRef, { clipSrc, trackLabel: (n) => t('agentRef.track').replace('{n}', String(n)) }),
+    [studioRef, clipSrc, t],
+  );
+  const reveal = ctx?.onReveal;
+  const label = ctx?.revealLabel;
+  return (
+    <PromptPill
+      reference={reference}
+      card={ctx?.describe?.(reference) ?? null}
+      {...(reveal && label ? { hint: label, title: `${reference.label} · ${label}` } : {})}
+      {...(reveal ? {
+        onClick: (event: React.MouseEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
+          reveal(reference);
+        },
+      } : {})}
+    />
+  );
+}