@djangocfg/ui-tools 2.1.430 → 2.1.432

package/src/tools/chat/composer/Composer.tsx

@@ -94,21 +94,34 @@ const SIZE_CLASSES: Record<ComposerSize, {
   inlineSlot: string;
 }> = {
   sm: {
-    surface: 'rounded-xl px-2 py-1',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-xl px-2 py-2',
     textarea: 'min-h-7 max-h-44 px-1.5 py-1',
     text: 'text-sm',
     containerPadding: 'px-2 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]',
     inlineSlot: '[&>:not(textarea)]:h-7',
   },
   md: {
-    surface: 'rounded-2xl px-2 py-1.5',
-    textarea: 'min-h-9 max-h-60 px-2 py-1.5',
-    text: 'text-base sm:text-sm',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges (was py-1.5,
+    // which left the button closer to the bottom than the right).
+    surface: 'rounded-2xl px-2 py-2',
+    // ~one-line tall (min-h-8) with tight, balanced vertical padding.
+    // `py-1.5` (6px) stacked under the surface's own `py-1.5` read like a
+    // phantom empty line under a single-line input — `py-1` keeps the
+    // text vertically centred without the extra bottom gap.
+    textarea: 'min-h-8 max-h-60 px-2 py-1',
+    // Comfortable 15px chat body. `text-base sm:text-sm` collapsed to
+    // 14px and read too small; 15px matches the rich-editor baseline.
+    text: 'text-[15px]',
     containerPadding: 'px-2.5 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]',
     inlineSlot: '[&>:not(textarea)]:h-9',
   },
   lg: {
-    surface: 'rounded-2xl px-3 py-2.5',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-2xl px-3 py-3',
     textarea: 'min-h-12 max-h-72 px-2.5 py-2',
     text: 'text-base',
     containerPadding: 'px-3.5 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]',
@@ -133,7 +146,9 @@ const APPEARANCE_CLASSES: Record<ComposerAppearance, {
 }> = {
   compact: { surface: '', textarea: '', text: '', containerPadding: '' },
   full: {
-    surface: 'rounded-3xl px-3 py-2',
+    // Symmetric corner inset — px == py so the trailing send button sits
+    // equidistant from the surface's right and bottom edges.
+    surface: 'rounded-3xl px-3 py-3',
     textarea: 'min-h-10 max-h-80 px-2.5 py-2',
     text: 'text-base',
     containerPadding: 'px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]',
@@ -337,6 +352,8 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
     dragDepth.current = 0;
     setIsDragging(false);
     const dropped = Array.from(e.dataTransfer.files ?? []);
+    // eslint-disable-next-line no-console
+    console.log('[composer] handleDrop files=%d names=%o', dropped.length, dropped.map((f) => f.name));
     if (dropped.length > 0) attachHandle.attachFiles(dropped);
   };
 
@@ -485,7 +502,20 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
   // ── Inline (compact single-row) layout ─────────────────────────────────
   // Drag-drop handlers shared by both layouts. No-op when attaching is
   // disabled — the handlers themselves early-return.
-  const dragProps = {
+  //
+  // `data-wails-dropzone` is load-bearing inside the Wails desktop shell:
+  // its runtime gates DOM file drops on a per-element basis. On `dragover`
+  // it walks `elementFromPoint(...).closest('[data-wails-dropzone]')` and
+  // sets `dataTransfer.dropEffect = 'copy'` ONLY when the cursor is over a
+  // marked element — otherwise it forces `dropEffect = 'none'`, and the
+  // browser then REJECTS the `drop` on that element (the React `onDrop`
+  // never fires). Marking the composer surface makes the runtime allow the
+  // drop here, exactly like the debug drop-test harness. Harmless no-op in
+  // a plain browser (it's just an unknown data-attribute there).
+  const dragProps: React.HTMLAttributes<HTMLDivElement> & {
+    'data-wails-dropzone': string;
+  } = {
+    'data-wails-dropzone': '',
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
@@ -615,12 +645,15 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
       ref={surfaceRef}
       onMouseDown={handleSurfaceMouseDown}
       className={cn(
-        // Raised input panel — reads against the chat background via the
-        // neutral `muted` surface + a hairline ring (Gemini/ChatGPT
-        // style), not a heavy drawn border. Focus firms up the ring
-        // without a hard accent frame.
+        // Raised input panel — a *gentle* elevation over the chat
+        // background, not a hard box. `card` is the "slightly elevated
+        // surface" token (one step up from `background`); `muted` is the
+        // chips/fills token and sat far too light, reading as a
+        // high-contrast block on the dark macOS theme. A softened
+        // hairline ring (`border/60`) keeps the edge whisper-quiet
+        // (Gemini/ChatGPT/Claude style). Focus firms the ring up.
         'flex flex-col rounded-2xl text-foreground',
-        'bg-muted ring-1 ring-border',
+        'bg-card ring-1 ring-border/60',
         'focus-within:ring-ring/50',
         'transition-colors',
         // The whole surface reads as a text field — the padding around the

package/src/tools/chat/composer/ComposerRichTextarea.tsx

@@ -12,11 +12,23 @@ import {
 import { useRegisterComposer } from '../hooks/useAutoFocusOnStreamEnd';
 import type { ComposerSize, ComposerTextareaProps } from './types';
 
-/** Single-row baseline height per composer size (px). */
+/**
+ * Single-row min-height FLOOR per composer size (px).
+ *
+ * This is a floor, NOT the row height — the empty `<p>`'s own line box
+ * defines the real single-row height. The floor must stay BELOW one line
+ * box (15px text × line-height) so it can never inflate the editor past
+ * one line: when a host overrides the editor leading (e.g. cmdop pins
+ * `.ProseMirror` to `leading-normal` ≈ 22.5px), a 24/28px min-height used
+ * to sit ABOVE the line box and the empty composer read as having a
+ * phantom extra line under the caret. Keeping every floor ≤ the tightest
+ * expected single line (≈22px) means the line box always wins and the
+ * single-row composer is exactly one line tall in every host.
+ */
 const MIN_HEIGHT: Record<ComposerSize, number> = {
-  sm: 20,
-  md: 24,
-  lg: 28,
+  sm: 18,
+  md: 20,
+  lg: 22,
 };
 
 export interface ComposerRichTextareaProps extends ComposerTextareaProps {

package/src/tools/chat/composer/PastedTextDialog.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useMemo } from 'react';
+import { FileText } from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { MarkdownMessage } from '../../dev/code/MarkdownMessage';
+
+export interface PastedTextDialogProps {
+  /** Whether the dialog is open. */
+  open: boolean;
+  /** Open-state change handler (Esc / overlay click / close button). */
+  onOpenChange: (open: boolean) => void;
+  /** The raw pasted text to preview. */
+  text: string;
+  /** Short title shown in the header (the chip's derived title). */
+  title?: string;
+}
+
+/**
+ * Read-only preview for a "Pasted text" attachment chunk.
+ *
+ * Renders the raw paste through `MarkdownMessage` — the same chat-tuned
+ * renderer used for message bubbles, so fenced code blocks, tables and
+ * GFM all come out formatted, with the plain-text fast path kicking in
+ * for prose-only pastes. View-only by design: there is no edit affordance.
+ *
+ * Built on ui-core's radix `Dialog` primitive with local open-state — it
+ * does not touch the global `dialog-service` (that service is shaped for
+ * imperative string-message alerts/confirms, not arbitrary content). The
+ * caller owns `open` so the chip can drive it from a click.
+ */
+export function PastedTextDialog({
+  open,
+  onOpenChange,
+  text,
+  title,
+}: PastedTextDialogProps) {
+  // A rough size hint for the header (chars / KB) — cheap, derived.
+  const meta = useMemo(() => {
+    const chars = text.length;
+    const kb = new Blob([text]).size / 1024;
+    return kb >= 1
+      ? `${chars.toLocaleString()} chars · ${kb.toFixed(1)} KB`
+      : `${chars.toLocaleString()} chars`;
+  }, [text]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn(
+          'flex max-h-[80dvh] w-full max-w-2xl flex-col gap-3 p-0',
+        )}
+        // This is a read-only preview — there is no primary action to
+        // focus. radix would otherwise autofocus the first focusable node,
+        // which is the (visually hover-hidden) "Copy" button inside the
+        // markdown code block — surfacing a stray focus ring on open.
+        // Prevent the default and keep focus on the panel itself; Esc /
+        // overlay click still dismiss, and Tab reaches controls normally.
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader className="shrink-0 space-y-1 border-b border-border px-5 pb-3 pt-5 text-left">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <span className="grid size-7 shrink-0 place-items-center rounded-md bg-primary/15 text-primary">
+              <FileText aria-hidden className="size-4" />
+            </span>
+            <span className="min-w-0 truncate">{title ?? 'Pasted text'}</span>
+          </DialogTitle>
+          <p className="pl-9 text-xs text-muted-foreground">{meta}</p>
+        </DialogHeader>
+
+        {/* Scrollable body — `MarkdownMessage` formats the paste. */}
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-5">
+          <MarkdownMessage content={text} size="sm" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PastedTextDialog;

package/src/tools/chat/composer/index.ts

@@ -40,6 +40,15 @@ export {
 } from './useComposerAttach';
 export { useComposerAttachContext } from './AttachContext';
 export { fileToAttachment, revokeAttachmentUrl } from './fileToAttachment';
+export {
+  textToAttachment,
+  deriveTextTitle,
+  DEFAULT_PASTE_TEXT_THRESHOLD,
+} from './textToAttachment';
+export {
+  PastedTextDialog,
+  type PastedTextDialogProps,
+} from './PastedTextDialog';
 export {
   parseSlashState,
   filterCommands,

package/src/tools/chat/composer/textToAttachment.ts

@@ -0,0 +1,69 @@
+/**
+ * `string → ChatAttachment` — the producer for "Pasted text" chunks.
+ *
+ * When a long paste is converted into an attachment chip instead of
+ * being dumped into the textarea (ChatGPT/Claude behaviour), the raw
+ * text is minted into a `type:'text'` attachment. Its payload lives in
+ * `text` (exact, newline-preserving); `url` is empty since there is no
+ * blob backing it.
+ *
+ * Mirrors `fileToAttachment` so the picker, drag-drop, file-paste and
+ * text-paste paths all funnel into the same `ChatAttachment` shape.
+ */
+
+import { createId } from '../core/ids';
+import type { ChatAttachment } from '../types';
+
+/** Default character threshold above which a paste becomes a chunk. */
+export const DEFAULT_PASTE_TEXT_THRESHOLD = 2000;
+
+/** Max length of the auto-derived title (first non-empty line). */
+const TITLE_MAX = 32;
+
+/**
+ * Derive a short, human-readable title from the pasted text — the first
+ * non-empty line, collapsed and ellipsised (e.g. "Valuing the Bali Vec…").
+ * Falls back to a generic label for whitespace-only / empty input.
+ */
+export function deriveTextTitle(text: string): string {
+  const firstLine = text
+    .split(/\r?\n/)
+    .map((l) => l.trim())
+    .find((l) => l.length > 0);
+  if (!firstLine) return 'Pasted text';
+  // Strip leading markdown markers (heading `#`, blockquote `>`, list
+  // bullets `-`/`*`/`+`) so a markdown paste reads as plain text on the
+  // chip — the title is a label, not source. The payload is untouched.
+  const stripped = firstLine
+    .replace(/^#{1,6}\s+/, '')
+    .replace(/^>\s+/, '')
+    .replace(/^[-*+]\s+/, '')
+    .trim();
+  // Collapse internal runs of whitespace so a title never wraps oddly.
+  const collapsed = (stripped || firstLine).replace(/\s+/g, ' ');
+  return collapsed.length > TITLE_MAX
+    ? `${collapsed.slice(0, TITLE_MAX).trimEnd()}…`
+    : collapsed;
+}
+
+/**
+ * Convert a pasted string into a `type:'text'` `ChatAttachment`.
+ *
+ * - `name`  — short title derived from the first line (shown on the chip).
+ * - `text`  — the full, exact payload (sent to `onSubmit` alongside the
+ *             message content).
+ * - `url`   — empty: text chunks have no blob backing.
+ * - `sizeBytes` — UTF-8 byte length, for an optional "N chars / KB" hint.
+ */
+export function textToAttachment(text: string): ChatAttachment {
+  return {
+    id: createId('att'),
+    type: 'text',
+    url: '',
+    name: deriveTextTitle(text),
+    mimeType: 'text/plain',
+    sizeBytes: new Blob([text]).size,
+    status: 'ready',
+    text,
+  };
+}

package/src/tools/chat/composer/types.ts

@@ -198,6 +198,19 @@ export interface ComposerAttachConfig {
   pasteEnabled?: boolean;
   /** Called when a file is rejected (size / type / count). */
   onReject?: (file: File, reason: 'size' | 'type' | 'count') => void;
+  /**
+   * Convert a long plain-text paste (⌘V / Ctrl+V) into a "Pasted text"
+   * attachment chip instead of dumping it into the textarea — the
+   * ChatGPT/Claude behaviour. Default `true`. Short pastes (below
+   * {@link pasteTextThreshold}) always go straight into the textarea.
+   */
+  pasteTextAsChunk?: boolean;
+  /**
+   * Character threshold above which a plain-text paste becomes a chunk.
+   * Default `2000` (matches Claude / LibreChat). Ignored when
+   * `pasteTextAsChunk` is `false`.
+   */
+  pasteTextThreshold?: number;
 }
 
 /** Imperative handle the attach pipeline exposes to the composer + menu. */

package/src/tools/chat/composer/useComposerAttach.tsx

@@ -5,6 +5,10 @@ import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react';
 import { buildAcceptString, useClipboardPaste } from '../../forms/Uploader';
 import type { UseChatComposerReturn } from '../hooks/useChatComposer';
 import { fileToAttachment, revokeAttachmentUrl } from './fileToAttachment';
+import {
+  DEFAULT_PASTE_TEXT_THRESHOLD,
+  textToAttachment,
+} from './textToAttachment';
 import type {
   ComposerAcceptType,
   ComposerAttachConfig,
@@ -59,6 +63,8 @@ export function useComposerAttach({
     maxSizeBytes,
     multiple = true,
     pasteEnabled = true,
+    pasteTextAsChunk = true,
+    pasteTextThreshold = DEFAULT_PASTE_TEXT_THRESHOLD,
     uploadFn,
     onReject,
   } = config;
@@ -187,6 +193,47 @@ export function useComposerAttach({
     pasteScopeRef,
   );
 
+  // Long-text paste → "Pasted text" chunk. A separate listener from the
+  // file path above: `useClipboardPaste` deliberately ignores pastes
+  // that carry text into a text field (so it doesn't hijack typing), so
+  // it never sees this case. We intercept here, before the browser
+  // inserts the text into the textarea, and mint a `type:'text'`
+  // attachment instead — the ChatGPT/Claude behaviour.
+  const pasteTextEnabled = pasteEnabled && pasteTextAsChunk && !disabled;
+  useEffect(() => {
+    if (!pasteTextEnabled) return undefined;
+    const target: HTMLElement | Document = pasteScopeRef?.current ?? document;
+
+    const onPaste = (e: Event) => {
+      const ev = e as ClipboardEvent;
+      const cd = ev.clipboardData;
+      if (!cd) return;
+      // Only chunk pastes aimed at the composer's editable surface —
+      // a paste into some unrelated input inside the scope is left alone.
+      const node = ev.target;
+      const el =
+        node instanceof HTMLElement ? node : null;
+      const isEditable =
+        el != null &&
+        (el instanceof HTMLTextAreaElement ||
+          el instanceof HTMLInputElement ||
+          el.isContentEditable);
+      if (!isEditable) return;
+      // A file/blob paste is the image path's job — don't steal it.
+      if (Array.from(cd.items).some((i) => i.kind === 'file')) return;
+      const text = cd.getData('text/plain');
+      if (text.length < pasteTextThreshold) return;
+      // Respect the file-count cap (text chunks share the attachment list).
+      const c = composerRef.current;
+      if (maxFiles != null && c.attachments.length >= maxFiles) return;
+      e.preventDefault();
+      c.addAttachment(textToAttachment(text));
+    };
+
+    target.addEventListener('paste', onPaste);
+    return () => target.removeEventListener('paste', onPaste);
+  }, [pasteTextEnabled, pasteTextThreshold, maxFiles, pasteScopeRef]);
+
   // On unmount, free any object-URLs still held by staged attachments
   // (drafts abandoned without sending). `composerRef` gives the latest
   // list without re-running the effect on every attach.

package/src/tools/chat/constants.ts

@@ -44,8 +44,15 @@ export const LIMITS = {
   attachmentsMax: 10,
   /** Composer history slots. */
   composerHistorySize: 50,
-  /** Coalesce stream tokens within this window before dispatching. */
-  streamCoalesceMs: 16,
+  /**
+   * Coalesce stream tokens within this window before dispatching one
+   * aggregated chunk. 33ms ≈ 30fps — enough to feel live while halving
+   * the re-parse count now that markdown renders during streaming
+   * (block-split + per-block memoization keeps each render ~O(n), but
+   * fewer dispatches still means fewer tail re-parses). ai-sdk uses ~50ms
+   * for the same reason.
+   */
+  streamCoalesceMs: 33,
   /** Default history page size. */
   pageSize: 50,
   /** Virtualize list when >= this many messages (host-controlled threshold). */

package/src/tools/chat/core/extractFirstUrl.ts

@@ -0,0 +1,45 @@
+/**
+ * Extract the FIRST previewable http(s) URL from a message's plain text.
+ *
+ * Telegram/WhatsApp rule: at most one preview per message — we surface the
+ * first link only. Returns `null` when there's nothing to unfurl.
+ *
+ * Deliberately conservative: only absolute http/https URLs (no bare
+ * `example.com`, no mailto/ftp), trailing punctuation trimmed, and a length
+ * cap to avoid pathological inputs.
+ */
+
+// http(s) URL up to the first whitespace or closing bracket/quote.
+const URL_RE = /\bhttps?:\/\/[^\s<>"'`)\]}]+/i;
+
+/** Trailing punctuation that's almost always sentence/markup, not the URL. */
+const TRAILING = /[.,;:!?)\]}'"»]+$/;
+
+export function extractFirstUrl(text: string | undefined | null): string | null {
+  if (!text) return null;
+  // Skip fenced/inline code-heavy content cheaply: still match, but the cap
+  // below guards huge blobs.
+  if (text.length > 50_000) return null;
+
+  const match = URL_RE.exec(text);
+  if (!match) return null;
+
+  let url = match[0].replace(TRAILING, '');
+
+  // Balance a trailing ")" that belongs to a markdown link `](url)` wrapper:
+  // if the URL has more ")" than "(", drop the extras.
+  const opens = (url.match(/\(/g) ?? []).length;
+  const closes = (url.match(/\)/g) ?? []).length;
+  if (closes > opens) {
+    url = url.replace(/\)+$/, (m) => m.slice(0, Math.max(0, m.length - (closes - opens))));
+  }
+
+  // Validate — a malformed match resolves to no preview.
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return null;
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}

package/src/tools/chat/core/reducer.ts

@@ -8,13 +8,23 @@
  *  - `version` bumps on edit so memo keys invalidate.
  */
 
-import type { ChatAttachment, ChatMessage, ChatSource, ChatToolCall } from '../types';
+import type { ChatAttachment, ChatMessage, ChatToolCall } from '../types';
 
 export interface ChatState {
   sessionId: string | null;
   messages: ChatMessage[];
   /** Initial history load in flight. */
   isLoading: boolean;
+  /**
+   * True once the initial history load has settled (done OR errored). False
+   * from mount until then. Lets the UI distinguish "history still loading"
+   * from "genuinely empty conversation": render a spinner while
+   * `!historyLoaded`, the empty-state only once `historyLoaded` is true and
+   * `messages` is empty. `isLoading` alone can't carry this — it is `false`
+   * on the very first synchronous render (before the bootstrap effect runs),
+   * which would flash the empty-state for a session that does have history.
+   */
+  historyLoaded: boolean;
   /** Assistant is generating a reply. */
   isStreaming: boolean;
   /** Older history page in flight. */
@@ -28,6 +38,7 @@ export const initialState: ChatState = {
   sessionId: null,
   messages: [],
   isLoading: false,
+  historyLoaded: false,
   isStreaming: false,
   isLoadingMore: false,
   hasMore: true,
@@ -73,9 +84,12 @@ export type ChatAction =
   | {
       type: 'STREAM_DONE';
       id: string;
-      tokensIn?: number;
-      tokensOut?: number;
-      sources?: ChatSource[];
+      /**
+       * Generic finalize merge (content/blocks/sources/tokens/attachments/
+       * metadata). The single slot the terminal event carries — applied as
+       * a `Partial<ChatMessage>` merge. No-op when absent.
+       */
+      patch?: Partial<ChatMessage>;
     }
   | { type: 'STREAM_CANCELLED'; id: string; partialText: string; label?: string }
   | { type: 'STREAM_ERROR'; id?: string; message: string }
@@ -134,6 +148,11 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
         messages: action.messages ?? state.messages,
         hasMore: action.hasMore ?? state.hasMore,
         oldestCursor: action.cursor ?? state.oldestCursor,
+        // When the session carries its messages (the autoCreateSession /
+        // newSession path commits them here), the initial load is settled.
+        // A bare `SESSION_SET` (resume path sets the id, then awaits
+        // loadHistory → HISTORY_LOAD_DONE) leaves `historyLoaded` untouched.
+        historyLoaded: action.messages !== undefined ? true : state.historyLoaded,
         error: null,
       };
 
@@ -144,6 +163,7 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
       return {
         ...state,
         isLoading: false,
+        historyLoaded: true,
         messages: action.messages,
         hasMore: action.hasMore,
         oldestCursor: action.cursor,
@@ -258,10 +278,11 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
     case 'STREAM_DONE': {
       const patched = patchMessageById(state.messages, action.id, (m) => ({
         ...m,
+        // Generic finalize merge (content/blocks/sources/tokens/attachments/
+        // metadata). No-op when `patch` is absent — `message_end` is then a
+        // pure terminal that only clears `isStreaming`.
+        ...(action.patch ?? {}),
         isStreaming: false,
-        tokensIn: action.tokensIn ?? m.tokensIn,
-        tokensOut: action.tokensOut ?? m.tokensOut,
-        sources: action.sources ?? m.sources,
       }));
       // Drop an assistant message that ended up completely empty (no text, no
       // tool calls). This happens in the HITL approval flow: the first stream
@@ -377,7 +398,10 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
       };
 
     case 'ERROR_SET':
-      return { ...state, error: action.error };
+      // An error settles the initial load — a failed bootstrap must not leave
+      // a stuck spinner; clear `isLoading` and mark the load resolved so the
+      // host can fall through to its error/empty surface.
+      return { ...state, error: action.error, isLoading: false, historyLoaded: true };
 
     case 'ATTACHMENT_PROGRESS': {
       const messages = patchMessageById(state.messages, action.messageId, (m) => {

package/src/tools/chat/core/transport/mappers/pydantic-ai.ts

@@ -100,7 +100,7 @@ export function* mapPydanticAIEvent(
     }
 
     case 'done':
-      yield { type: 'message_end', tokensOut: ev.total_tokens };
+      yield { type: 'message_end', patch: { tokensOut: ev.total_tokens } };
       return;
 
     case 'error':

package/src/tools/chat/core/transport/mock.ts

@@ -93,7 +93,10 @@ export function createMockTransport(opts: MockTransportOptions = {}): ChatTransp
           await sleep(latency);
           yield { type: 'chunk', delta: piece };
         }
-        yield { type: 'message_end', tokensIn: content.length, tokensOut: reply.length };
+        yield {
+          type: 'message_end',
+          patch: { tokensIn: content.length, tokensOut: reply.length },
+        };
       } else {
         for (const ev of reply) {
           if (options.signal.aborted) return;

package/src/tools/chat/hooks/useChat.ts

@@ -143,30 +143,34 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const t0 = performance.now();
       try {
         if (config.initialSessionId) {
-          if (!cancelled) {
-            dispatch({
-              type: 'SESSION_SET',
-              sessionId: config.initialSessionId,
-            });
-          }
+          dispatch({
+            type: 'SESSION_SET',
+            sessionId: config.initialSessionId,
+          });
           const page = await transport.loadHistory(config.initialSessionId, null, pageSize);
-          if (cancelled) {
-            log.bootstrap.debug('cancelled (post-loadHistory)');
-            // Even though *this* effect is cancelled, the network call did
-            // succeed — return the sessionId so awaitSession() doesn't see
-            // a phantom null when the next mount picks up.
-            return config.initialSessionId;
-          }
+          // Commit the loaded history even if THIS effect run was cancelled.
+          // Under React StrictMode the first mount's effect is always
+          // cancelled (mount → unmount → mount), and the second run skips the
+          // fetch because `sessionId` is already in the persisted reducer
+          // state (the early-return at the top of the effect). If we bailed
+          // here on `cancelled`, `HISTORY_LOAD_DONE` would never dispatch on
+          // either run and the resumed history would silently never reach the
+          // reducer — the read succeeds but the messages are dropped, so the
+          // chat shows the empty-state until a remount re-bootstraps it. The
+          // reducer state survives the StrictMode remount, so dispatching the
+          // load result regardless is correct (mirrors the autoCreateSession
+          // branch below, which already commits post-cancel for the same reason).
           dispatch({
             type: 'HISTORY_LOAD_DONE',
             messages: page.messages,
             hasMore: page.hasMore,
             cursor: page.nextCursor,
           });
-          log.bootstrap.success('resumed', {
+          log.bootstrap.success(cancelled ? 'resumed (post-cancel)' : 'resumed', {
             sessionId: config.initialSessionId,
             messages: page.messages.length,
             hasMore: page.hasMore,
+            cancelled,
             elapsedMs: Math.round(performance.now() - t0),
           });
           return config.initialSessionId;
@@ -397,14 +401,10 @@ export function useChat(config: UseChatConfig): UseChatReturn {
             dispatch({
               type: 'STREAM_DONE',
               id: targetId,
-              tokensIn: ev.tokensIn,
-              tokensOut: ev.tokensOut,
-              sources: ev.sources,
+              patch: ev.patch,
             });
             log.stream.debug('message_end', {
-              tokensIn: ev.tokensIn,
-              tokensOut: ev.tokensOut,
-              sources: ev.sources?.length ?? 0,
+              patchKeys: ev.patch ? Object.keys(ev.patch) : [],
             });
             return;
           case 'message_metrics':

package/src/tools/chat/lazy.tsx

@@ -75,6 +75,16 @@ export * from './composer';
 export * from './shell';
 export * from './launcher';
 
+// Markdown renderer + plain-text helper — also surfaced from index.ts; the
+// `./chat` package entry resolves to THIS file (lazy.tsx), so a host that
+// composes a custom mention-aware bubble needs them re-exported here too
+// (otherwise the symbols typecheck via index.ts but fail to bundle at runtime).
+export {
+  MarkdownMessage,
+  extractTextFromChildren,
+  type MarkdownMessageProps,
+} from '../dev/code/MarkdownMessage';
+
 // Bridge — AI-driven `point` directives (lightweight, no heavy deps).
 export {
   HighlightOverlay,