@adecore/agents-react 0.23.1 → 0.24.0

package/dist/chat/ui/RunSettings.js

@@ -10,8 +10,8 @@ import { modelName, shortModelName } from '../../agents/model-name.js';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions } from '../logic/context-usage.js';
 import { RUNTIME_MODES } from '../runtime-modes.js';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
-import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
-import { chatHost } from '../../host.js';
+import { Icon, Menu, Pill, Tooltip, useNow } from '@adecore/ui';
+import { useChatHost } from '../../host.js';
 import { useUsageLimits } from '../../usage/limits.js';
 const MINUTE_MS = 60_000;
 const MODE_ICONS = {
@@ -87,7 +87,7 @@ export function RunSettings({ disabled = false, providers, provider, selection,
         const slash = value.indexOf('/');
         onModel(value.slice(0, slash), value.slice(slash + 1));
     };
-    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), models.map((row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, children: [_jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), row.badge && _jsx("span", { className: "rounded bg-accent-soft px-1 text-[11px] leading-5 font-medium uppercase text-accent", children: row.badge })] }, row.slug)))] }, entry.kind)));
+    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), models.map((row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, children: [_jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), row.badge && (_jsx(Pill, { tone: "accent", shape: "tag", size: "sm", children: row.badge.charAt(0).toLocaleUpperCase() + row.badge.slice(1) }))] }, row.slug)))] }, entry.kind)));
     return (_jsxs(Menu.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { label: permissionHint ?? t('pickers.settings.title'), kbd: "/model", children: _jsxs(Menu.Trigger, { disabled: disabled, className: clsx('flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5', open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'), children: [_jsx(AgentIcon, { kind: provider, size: 14, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-text @max-xl/composer:hidden", children: current }), _jsx("span", { className: "hidden truncate font-medium text-text @max-xl/composer:inline", children: short }), account !== null && (_jsxs("span", { className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.choice.current?.account.color }), _jsx("span", { className: "truncate @max-xl/composer:hidden", children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current) })] })), summary.map((entry) => (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5', !entry.ring && '@max-xl/composer:hidden'), children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), entry.ring && _jsx(ContextRing, { usage: usage }), _jsx("span", { className: clsx(entry.ring && '@max-sm/composer:hidden'), children: entry.label })] }, entry.id))), _jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsxs("span", { className: clsx('flex shrink-0 items-center gap-1', fullAccess && 'text-status-needs-you'), children: [_jsx(Icon, { icon: MODE_ICONS[shownMode], size: 12, className: "shrink-0" }), _jsx("span", { children: effectiveRuntimeMode === undefined && permissionMode !== undefined ? permissionMode : t(`modes.${shownMode}.short`) }), permissionFallback && _jsx(Icon, { icon: TriangleAlert, size: 12, className: "shrink-0 text-status-needs-you" })] })] }), _jsx(Icon, { icon: open ? ChevronUp : ChevronDown, size: 12, className: "shrink-0 @max-sm/composer:hidden" })] }) }), _jsxs(Menu.Popup, { side: "top", sideOffset: 8, align: "start", className: "w-80", children: [providers.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noProvider') }), _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(live) }), legacy.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) }) }), chosenLegacy && _jsx(Menu.Hint, { className: "truncate", children: chosenLegacy.name })] }), _jsx(Menu.Popup, { className: "min-w-56", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(legacy) }) })] })), _jsx(Menu.Separator, {}), account !== null && _jsx(AccountSubmenu, { provider: provider, account: account }), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 14, className: clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint') }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.mode.label') }), _jsx(Menu.Hint, { className: "truncate", children: t(`modes.${runtimeMode}.label`) })] }), _jsxs(Menu.Popup, { className: "w-72", children: [permissionHint !== null && _jsx("p", { className: "px-2.5 py-2 text-xs text-text-muted", children: permissionHint }), _jsx(Menu.RadioGroup, { value: runtimeMode, onValueChange: (mode) => onMode(mode), children: RUNTIME_MODES.map((mode) => (_jsxs(Menu.RadioItem, { value: mode, className: "items-start", children: [_jsx("span", { className: "grid h-lh w-4 shrink-0 place-items-center", children: _jsx(Icon, { icon: MODE_ICONS[mode], size: 14, className: mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint' }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [t(`modes.${mode}.label`), _jsx("span", { className: "text-xs text-text-faint", children: t(`modes.${mode}.hint`) })] })] }, mode))) })] })] }), options.map((option) => (_jsx(OptionRow, { option: option, selection: selection, onChange: (value) => onOption(option.id, value) }, option.id))), (hasContextOption || standaloneContext) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx(ContextUsage, { usage: usage, disabled: compactDisabled, onCompact: onCompact })] }))] })] }));
 }
 /* Red where a window is nearly spent, amber where it is worth knowing, as the usage bars have it. */
@@ -104,9 +104,10 @@ function sessionTone(used) {
  * the conversation goes along to those. A switch applies from the next turn.
  */
 function AccountSubmenu({ provider, account }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { choice, started, onPick } = account;
-    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: choice.current?.account.color }) }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.account.label') }), _jsx(Menu.Hint, { className: "truncate", children: choice.current === null ? choice.currentId : choice.nameOf(choice.current) })] }), _jsxs(Menu.Popup, { className: "min-w-64", children: [_jsxs(Menu.Group, { children: [_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: provider, size: 12 }), choice.providerName] }), _jsx(Menu.RadioGroup, { value: choice.currentId, onValueChange: (id) => onPick(id), children: _jsx(AccountRows, { choice: choice, locked: (id) => started && !canContinueOn(choice.accounts, provider, choice.currentId, id) }) })] }), _jsx(Menu.Separator, {}), _jsxs(Menu.Item, { className: "text-text-muted", onClick: () => chatHost().openSettings('providers'), children: [_jsx(Icon, { icon: Settings, size: 14, className: "shrink-0 text-text-faint" }), t('pickers.account.manage')] })] })] }));
+    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: choice.current?.account.color }) }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.account.label') }), _jsx(Menu.Hint, { className: "truncate", children: choice.current === null ? choice.currentId : choice.nameOf(choice.current) })] }), _jsxs(Menu.Popup, { className: "min-w-64", children: [_jsxs(Menu.Group, { children: [_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: provider, size: 12 }), choice.providerName] }), _jsx(Menu.RadioGroup, { value: choice.currentId, onValueChange: (id) => onPick(id), children: _jsx(AccountRows, { choice: choice, locked: (id) => started && !canContinueOn(choice.accounts, provider, choice.currentId, id) }) })] }), _jsx(Menu.Separator, {}), _jsxs(Menu.Item, { className: "text-text-muted", onClick: () => host.openSettings('providers'), children: [_jsx(Icon, { icon: Settings, size: 14, className: "shrink-0 text-text-faint" }), t('pickers.account.manage')] })] })] }));
 }
 /* Mounted only while the submenu is open, since asking for the plan windows starts a CLI per account. */
 function AccountRows({ choice, locked }) {

package/dist/chat/ui/ShellCommand.d.ts

@@ -0,0 +1,3 @@
+export declare function ShellCommand({ command }: {
+    command: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/ShellCommand.js

@@ -0,0 +1,110 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode } from '../logic/embedded-code.js';
+import { useChatHost } from '../../host.js';
+import { useCodeTheme } from './code-theme.js';
+import { tokenStyle, useCodeHighlighter } from './highlighter.js';
+// Rows redraw often and a thread holds many commands, so each is tokenized once per theme.
+const CACHE_LIMIT = 300;
+const cache = new Map();
+/* The runs of `code` in one language, placed at `offset`; a run in the theme's own foreground takes the color around it. */
+function runsOf(highlighter, code, language, theme, offset) {
+    const fg = highlighter.getTheme(theme).fg.toLowerCase();
+    const { tokens } = highlighter.codeToTokens(code, { lang: language, theme });
+    return tokens.flat().map((token) => ({
+        start: offset + token.offset,
+        end: offset + token.offset + token.content.length,
+        content: token.content,
+        color: token.color?.toLowerCase() === fg ? undefined : token.color,
+        fontStyle: token.fontStyle
+    }));
+}
+/* `base` with `[start, end)` cut out of it and `inner` in its place. */
+function overlay(base, start, end, inner) {
+    const kept = [];
+    for (const run of base) {
+        if (run.end <= start || run.start >= end) {
+            kept.push(run);
+            continue;
+        }
+        if (run.start < start) {
+            kept.push({ ...run, end: start, content: run.content.slice(0, start - run.start) });
+        }
+        if (run.end > end) {
+            kept.push({ ...run, start: end, content: run.content.slice(end - run.start) });
+        }
+    }
+    return [...kept, ...inner].sort((left, right) => left.start - right.start);
+}
+function languagesOf(command) {
+    return new Set([SHELL_LANGUAGE, ...embeddedCode(command).map(({ language }) => language)]);
+}
+/* The colored runs of a command, or null while a grammar or the theme is still on its way. */
+function highlight(command, theme, code) {
+    const key = `${theme}\n${command}`;
+    const known = cache.get(key);
+    if (known !== undefined) {
+        // Touched entries move to the end, so the oldest falls out first.
+        cache.delete(key);
+        cache.set(key, known);
+        return known;
+    }
+    const embedded = embeddedCode(command);
+    const highlighter = code.ready([SHELL_LANGUAGE, ...embedded.map(({ language }) => language)], theme);
+    if (highlighter === null) {
+        return null;
+    }
+    let runs = runsOf(highlighter, command, code.language(SHELL_LANGUAGE), theme, 0);
+    for (const part of embedded) {
+        runs = overlay(runs, part.start, part.end, runsOf(highlighter, command.slice(part.start, part.end), code.language(part.language), theme, part.start));
+    }
+    cache.set(key, runs);
+    if (cache.size > CACHE_LIMIT) {
+        cache.delete(cache.keys().next().value);
+    }
+    return runs;
+}
+function draw(command, runs) {
+    const parts = [];
+    let at = 0;
+    for (const run of runs) {
+        // Shiki leaves the line breaks out of its tokens; they come from the command itself.
+        if (run.start > at) {
+            parts.push(command.slice(at, run.start));
+        }
+        const style = tokenStyle(run);
+        parts.push(style === undefined ? (run.content) : (_jsx("span", { style: style, children: run.content }, run.start)));
+        at = run.end;
+    }
+    if (at < command.length) {
+        parts.push(command.slice(at));
+    }
+    return parts;
+}
+/*
+ * A shell command in the colors of the code theme, with the code inside it (a `bash -lc` script, a
+ * `python3 -c` argument, a heredoc) in its own language. Plain text until the grammars are in, which
+ * changes no size; a command past the limit stays plain.
+ */
+export function ShellCommand({ command }) {
+    const theme = useCodeTheme();
+    const { custom } = useChatHost().code;
+    const highlighter = useCodeHighlighter();
+    // Bumped when a load settles, so the cache is asked again.
+    const [, setLoads] = useState(0);
+    const tooLong = command.length > EMBEDDED_CODE_LIMIT;
+    const runs = tooLong ? null : highlight(command, theme, highlighter);
+    useEffect(() => {
+        if (runs !== null || tooLong) {
+            return;
+        }
+        let cancelled = false;
+        Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command)].map((lang) => highlighter.loadLanguage(lang))])
+            .then(() => !cancelled && setLoads((count) => count + 1))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [highlighter, command, theme, custom, runs, tooLong]);
+    return _jsx(_Fragment, { children: runs === null ? command : draw(command, runs) });
+}

package/dist/chat/ui/SubagentInfo.js

@@ -8,21 +8,22 @@ import { SubagentActions, SubagentBreadcrumb } from './SubagentControls.js';
 import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name.js';
 import { useChatRow } from '../../state/chats.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 /*
  * What a sub-agent is, over its conversation: the way down to it, its state and time, the model it runs on
  * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const item = useSubagentItem(chatId, toolUseId);
     const provider = useChatRow(chatId, (row) => row?.info.provider);
-    const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
+    const task = host.tasks.useTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
     const word = item === null ? null : statusWordOf(item, task);
     const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
-    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border px-4 py-1.5", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(SubagentBreadcrumb, { chatId: chatId, className: "max-w-1/3 shrink-0 font-medium" }), item !== null && word !== null && (_jsxs(_Fragment, { children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) })] })), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), _jsx(SubagentActions, { chatId: chatId })] }) }));
+    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border py-1.5 pr-1.5 pl-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(SubagentBreadcrumb, { chatId: chatId, className: "max-w-1/3 shrink-0 font-medium" }), item !== null && word !== null && (_jsxs(_Fragment, { children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) })] })), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), _jsx(SubagentActions, { chatId: chatId })] }) }));
 }

package/dist/chat/ui/SubagentStopButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { Square } from 'lucide-react';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
 import { useChatActions } from '../actions.js';
@@ -9,6 +9,7 @@ import { stopLabel, stopOf, subagentTitle } from '../subagent-list.js';
 import { IconButton } from '@adecore/ui';
 /* Stops one active sub-agent of a chat, or says nothing when stopping it is not on offer. */
 export function SubagentStopButton({ chatId, item, size = 'xs', className }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const actions = useChatActions();
@@ -21,12 +22,12 @@ export function SubagentStopButton({ chatId, item, size = 'xs', className }) {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e) => {
             const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
             const description = stale ? t('subagents.stale') : e instanceof Error ? e.message : t('subagents.noAnswer');
-            chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
+            host.notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };
     const run = () => {
         if (stop === 'task' && item.childId !== undefined) {
-            chatHost().confirm.stopTask(id, item.childId, subagentTitle(item), send);
+            host.confirm.stopTask(id, item.childId, subagentTitle(item), send);
             return;
         }
         send();

package/dist/chat/ui/SubagentTimeline.js

@@ -18,6 +18,8 @@ import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm.js';
 import { useToggleSet } from './useToggleSet.js';
 import { FileLinkContext } from './file-links.js';
 import { useChatRow } from '../../state/chats.js';
+import { useChatPreferences } from '../preferences.js';
+import { readingWidthStyle } from '../reading-width.js';
 import { useChatScope } from '../../scope.js';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 const NO_TURNS = new Set();
@@ -95,10 +97,11 @@ export function SubagentTimeline({ chatId, toolUseId }) {
             loadEarlier();
         }
     }, [rows, state.status, loadEarlier]);
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
     const openChild = (step) => {
         show(openBelow(trail, step));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, "data-file-cwd": state.context?.cwd ?? cwd ?? '', "data-file-scope-id": scope.id, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", style: readingWidthStyle(readingWidth), children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, "data-file-cwd": state.context?.cwd ?? cwd ?? '', "data-file-scope-id": scope.id, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
                         // The thread keeps its reader in place itself when a page goes in above.
                         style: { overflowAnchor: 'none' }, onScroll: (event) => {
                             const element = event.currentTarget;

package/dist/chat/ui/Timeline.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
@@ -11,6 +11,8 @@ import { timedRowsOf, withTimedRows } from '../logic/thread-cards.js';
 import { openFromMain, useSubagentTrail } from '../subagent-view.js';
 import { registerItemJumper, registerMessageStepper, registerTimeline, registerTurnJumper, setTimelineAtEnd, wantsEarlier } from '../timeline-scroll.js';
 import { useTimelineFlash } from '../timeline-flash.js';
+import { useChatPreferences } from '../preferences.js';
+import { readingMeasure, readingWidthStyle } from '../reading-width.js';
 import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber.js';
 import { EMPTY_TARGET, readTimelineTarget, revealUiReplyBlock, uiReplyJump, withCurrentText } from '../logic/timeline-target.js';
 import { forkRefusal } from '../logic/fork.js';
@@ -30,7 +32,7 @@ import { Row } from './rows/Rows.js';
 import { RowContainer } from './rows/RowContainer.js';
 import { ReplyHeader } from './rows/MessageRows.js';
 import { useChatRow, useChats } from '../../state/chats.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { FileLinkContext } from './file-links.js';
 import { AgentIcon } from '../../agents/AgentIcon.js';
@@ -49,11 +51,12 @@ function showRowAtTop(virtualizer, followRef, index) {
  * and the folder it works in, so a first question can lean on all three.
  */
 function EmptyThread({ chatId }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const info = useChatRow(chatId, (row) => row?.info ?? null);
     const model = useModelName(info?.provider, info?.selection.model ?? '');
-    const sources = chatHost().useContextSources(chatId);
-    const hidesFolder = chatHost().useHidesFolder(chatId);
+    const sources = host.useContextSources(chatId);
+    const hidesFolder = host.useHidesFolder(chatId);
     return (_jsx("div", { className: "flex grow items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center", children: [_jsx(EmptyState, { icon: info ? _jsx(AgentIcon, { kind: info.provider }) : undefined, className: "p-0", children: info ? t('timeline.empty.ready', { model }) : t('timeline.empty.ask') }), sources.length > 0 && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx(SectionLabel, { children: t('timeline.empty.canRead') }), _jsx("span", { className: "max-w-full text-xs text-text-muted", children: sources.map((source) => source.title).join(', ') })] })), info?.cwd && !hidesFolder && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx(SectionLabel, { children: t('timeline.empty.worksIn') }), _jsx("span", { className: "max-w-full font-mono text-xs break-all text-text-muted", children: info.cwd })] }))] }) }));
 }
 /*
@@ -66,11 +69,18 @@ function MarkableRow({ row, chatId, bookmark, children }) {
     }
     return (_jsxs(_Fragment, { children: [_jsx(BookmarkMarker, { chatId: chatId, itemId: row.id, bookmark: bookmark }), _jsxs("div", { className: "group/message", children: [children, _jsx(MessageActions, { chatId: chatId, row: row })] })] }));
 }
+/* Memoized with stable props, so a streamed word or a scroll draws only the rows it changed. */
+const ThreadRow = memo(function ThreadRow({ row, previous, index, top, measure, chatId, flashNonce, bookmark, ...actions }) {
+    const header = replyHeader(row, previous);
+    return (_jsxs(RowContainer, { row: row, previous: previous, index: index, top: top, ref: measure, children: [flashNonce !== null && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flashNonce), header !== null && (_jsx("div", { className: "chat-column-content w-full", children: _jsx(ReplyHeader, { chatId: chatId, at: header.at }) })), _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: bookmark, children: _jsx(Row, { row: row, chatId: chatId, ...actions }) })] }));
+});
 /*
  * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
  * where it was underneath and the composer stays in reach for the prompts it answers.
  */
 export function Timeline({ chatId, composer, overlay }) {
+    const host = useChatHost();
+    const { fork } = host;
     const { t } = useTranslation('agent-chat');
     const order = useChatRow(chatId, (row) => row?.order);
     // The structure, not the items. A delta growing a reply must not derive every row again.
@@ -137,12 +147,12 @@ export function Timeline({ chatId, composer, overlay }) {
         }
         return deriveTimelineRows(order.map((id) => items[id]), { expandedGroups: groups.ids, expandedTurns: turns.ids, expandedSubagents: subagents.ids, activeTurnId, forkedTurns });
     }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
-    const cards = chatHost().useThreadCards(scopeId, chatId);
-    const drawsVisuals = chatHost().visuals !== null;
+    const cards = host.useThreadCards(scopeId, chatId);
+    const drawsVisuals = host.visuals !== null;
     // Where the part of the thread this client holds begins, while there is a page before it.
     const heldFrom = cursor === null ? null : (items?.[order?.[0] ?? '']?.createdAt ?? null);
     const rows = useMemo(() => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? (visuals ?? []) : null, heldFrom)), [threadRows, cards, drawsVisuals, visuals, heldFrom]);
-    const welcomes = chatHost().useWelcome(chatId);
+    const welcomes = host.useWelcome(chatId);
     const empty = rows.length === 0;
     // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
     const welcome = welcomes && empty && (info === null || (info.usage.turns === 0 && info.activeTurnId === null));
@@ -208,17 +218,11 @@ export function Timeline({ chatId, composer, overlay }) {
         overscan: 8,
         scrollPaddingEnd: coveredHeight
     });
-    // A change in what the last row says (a streaming delta) must also pull the view down.
-    const lastRow = rows[rows.length - 1];
-    const lastReplyLength = useChatRow(chatId, (row) => {
-        const item = lastRow?.kind === 'assistant' ? row?.items[lastRow.id] : undefined;
-        return item?.kind === 'assistant' ? item.text.length : null;
-    });
-    const tail = lastReplyLength ?? rows.length;
     /*
-     * Rows are measured as they render, so the end moves while it is drawn (a diff that highlights, an
-     * image that loads). `scrollToIndex` aims at where a row was when asked and fell short; the
-     * scroller's own bottom is a fact, and a new total size says a row was measured again.
+     * Rows are measured as they render, so the end moves while it is drawn (a streamed line, a diff that
+     * highlights, an image that loads). `scrollToIndex` aims at where a row was when asked and fell
+     * short; the scroller's own bottom is a fact, and a new total size says a row was measured again.
+     * A word that does not add a line moves nothing, so the thread does not listen to the words.
      */
     const totalSize = virtualizer.getTotalSize();
     useLayoutEffect(() => {
@@ -229,7 +233,7 @@ export function Timeline({ chatId, composer, overlay }) {
         // The composer is in the scroll flow, so its measured height is part of this end position.
         element.scrollTop = element.scrollHeight;
         scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
-    }, [rows.length, tail, totalSize, composerHeight, frame.height]);
+    }, [rows.length, totalSize, composerHeight, frame.height]);
     // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
     useLayoutEffect(() => {
         const element = scrollRef.current;
@@ -261,7 +265,8 @@ export function Timeline({ chatId, composer, overlay }) {
     const onMainAgent = trail.length === 0;
     // A node on a canvas has no strip. It is too narrow to give up a column of its width.
     const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
-    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber);
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
+    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
     /*
      * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
      * drew), so reading the scroll position costs no layout.
@@ -271,8 +276,28 @@ export function Timeline({ chatId, composer, overlay }) {
     const scrollTop = virtualizer.scrollOffset ?? 0;
     const viewport = virtualizer.scrollRect?.height ?? 0;
     const visibleHeight = Math.max(0, viewport - coveredHeight);
+    const visibleHeightRef = useRef(visibleHeight);
+    visibleHeightRef.current = visibleHeight;
     const inView = showsScrubber ? messagesInView({ starts, scrollTop, visibleHeight }) : null;
-    const chatFind = chatHost().useTimelineFind({
+    /*
+     * The virtualizer draws again only when its range of rows changes, which a scroll inside one long
+     * row never does; the scroll itself redraws the strip once the messages in view are others.
+     */
+    const [, redrawStrip] = useReducer((count) => count + 1, 0);
+    const stripRef = useRef({ starts, inView });
+    stripRef.current = { starts, inView };
+    const followStrip = (element) => {
+        const { starts: current, inView: shown } = stripRef.current;
+        if (shown === null) {
+            return;
+        }
+        const next = messagesInView({ starts: current, scrollTop: element.scrollTop, visibleHeight: visibleHeightRef.current });
+        if (next?.first !== shown.first || next?.last !== shown.last) {
+            redrawStrip();
+        }
+    };
+    // One object while what it holds stays, so a find that keys an effect on it does not run it for every scroll.
+    const findOptions = useMemo(() => ({
         chatId,
         frame: frameRef,
         thread: threadRef,
@@ -291,14 +316,15 @@ export function Timeline({ chatId, composer, overlay }) {
         // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
         scrollToRow: (index) => {
             const top = scrollRef.current?.scrollTop ?? 0;
-            const bottom = top + visibleHeight;
+            const bottom = top + visibleHeightRef.current;
             if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
                 virtualizer.scrollToIndex(index, { align: 'center' });
             }
         },
         coveredHeight: () => coveredHeightRef.current,
         stopFollowing
-    });
+    }), [chatId, onMainAgent, rows, items, order, virtualizer, turns.add, groups.add, subagents.add, stopFollowing]);
+    const chatFind = host.useTimelineFind(findOptions);
     const searching = chatFind.open;
     // A find covers the whole thread, so every page before this one comes in while it is open.
     useEffect(() => {
@@ -439,14 +465,14 @@ export function Timeline({ chatId, composer, overlay }) {
     const cardChat = useMemo(() => ({
         chatId,
         canFork: (turnId) => {
-            if (chatHost().fork === null) {
+            if (fork === null) {
                 return false;
             }
             const row = useChats.getState().byKey[keyOf(chatId)];
             return forkRefusal(row?.info ?? null, row?.structure[turnId]) === null;
         },
-        fork: (turnId) => chatHost().fork?.(chatId, turnId)
-    }), [keyOf, chatId]);
+        fork: (turnId) => fork?.(chatId, turnId)
+    }), [keyOf, chatId, fork]);
     const stepRef = useRef(() => false);
     stepRef.current = (direction) => {
         if (!onMainAgent) {
@@ -460,20 +486,25 @@ export function Timeline({ chatId, composer, overlay }) {
         return true;
     };
     useEffect(() => registerMessageStepper(keyOf(chatId), (direction) => stepRef.current(direction)), [keyOf, chatId]);
+    // Read through a ref, so the rows keep one callback for their life and their memo holds.
+    const opensRef = useRef({ rows, show });
+    opensRef.current = { rows, show };
     /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
-    const openConversation = (step) => {
-        show(openFromMain(step));
-    };
+    const openConversation = useCallback((step) => {
+        opensRef.current.show(openFromMain(step));
+    }, []);
+    const addSubagent = subagents.add;
     /* The header of a turn a sub-agent woke. It points at the row that agent worked in, or the one it hangs under. */
-    const openSubagent = (toolUseId) => {
-        const found = findSubagentBranch(rows, toolUseId);
+    const openSubagent = useCallback((toolUseId) => {
+        const found = findSubagentBranch(opensRef.current.rows, toolUseId);
         if (!found) {
             return;
         }
-        subagents.add(found.branch.id);
+        addSubagent(found.branch.id);
         showRowAtTop(virtualizer, followRef, found.index);
-    };
-    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
+    }, [addSubagent, virtualizer]);
+    const flashedRow = flash !== null && flash.key === keyOf(chatId) && !flash.block ? flash.rowId : null;
+    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", style: readingWidthStyle(readingWidth), "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
                             // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
                             // it and scrolls the thread toward the end on every keystroke.
                             className: "chat-scroll min-h-0 grow overflow-auto", 
@@ -495,15 +526,14 @@ export function Timeline({ chatId, composer, overlay }) {
                                 if (wantsEarlier(el)) {
                                     loadEarlier();
                                 }
+                                followStrip(el);
                             }, children: _jsxs("div", { ref: contentRef, className: clsx('relative flex min-h-full flex-col', welcome && 'justify-center'), children: [_jsx(ContextMenu.Trigger, { ref: threadRef, className: clsx('chat-thread flex flex-col px-4 pt-4', !welcome && 'grow'), style: {
                                             paddingLeft,
                                             '--chat-wide-inset': `${2 * (showsScrubber ? STRIP_CLEARANCE_PX : paddingLeft) - paddingLeft}px`
-                                        }, inert: overlay ? true : undefined, onContextMenu: (e) => setTarget(readTimelineTarget(e.target, threadRef.current, withCurrentText(rows, fullItems()))), children: welcome ? (_jsx(WelcomeGreeting, { chatId: chatId })) : empty ? (_jsx(EmptyThread, { chatId: chatId })) : (_jsx("div", { className: "relative w-full shrink-0", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualRow) => {
-                                                const row = rows[virtualRow.index];
-                                                const previous = virtualRow.index > 0 ? rows[virtualRow.index - 1] : null;
-                                                const header = replyHeader(row, previous);
-                                                return (_jsxs(RowContainer, { row: row, previous: previous, index: virtualRow.index, top: virtualRow.start, ref: virtualizer.measureElement, children: [flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && !flash.block && (_jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce)), header !== null && (_jsx("div", { className: "chat-column-content w-full", children: _jsx(ReplyHeader, { chatId: chatId, at: header.at }) })), _jsx(UiReplyNavigationContext.Provider, { value: uiNavigation, children: _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: marks.get(row.id) ?? null, children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }) }) }) })] }, row.id));
-                                            }) })) }), _jsx(QuoteButton, { thread: threadRef, frame: contentRef, taker: quoteTakerRef }), _jsx("div", { ref: composerRef, 
+                                        }, inert: overlay ? true : undefined, onContextMenu: (e) => setTarget(readTimelineTarget(e.target, threadRef.current, withCurrentText(rows, fullItems()))), children: welcome ? (_jsx(WelcomeGreeting, { chatId: chatId })) : empty ? (_jsx(EmptyThread, { chatId: chatId })) : (_jsx("div", { className: "relative w-full shrink-0", style: { height: virtualizer.getTotalSize() }, children: _jsx(UiReplyNavigationContext.Provider, { value: uiNavigation, children: _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: virtualizer.getVirtualItems().map((virtualRow) => {
+                                                        const row = rows[virtualRow.index];
+                                                        return (_jsx(ThreadRow, { row: row, previous: virtualRow.index > 0 ? rows[virtualRow.index - 1] : null, index: virtualRow.index, top: virtualRow.start, measure: virtualizer.measureElement, chatId: chatId, flashNonce: flash !== null && flashedRow === row.id ? flash.nonce : null, bookmark: marks.get(row.id) ?? null, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }, row.id));
+                                                    }) }) }) })) }), _jsx(QuoteButton, { thread: threadRef, frame: contentRef, taker: quoteTakerRef }), _jsx("div", { ref: composerRef, 
                                         // The card is translucent so the thread shows through it, but the pb-3 strip under it must stay opaque.
-                                        className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'), style: { position: stickyComposer ? 'sticky' : 'relative', bottom: 0 }, children: _jsx(QuoteTakerContext.Provider, { value: registerQuoteTaker, children: composer }) })] }) }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef, chatId: onMainAgent ? chatId : null })] }), drawsVisuals && _jsx(VisualDialogs, { chatId: chatId }), loadingEarlier && !overlay && (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), showsScrubber && !overlay && (_jsx("div", { className: "absolute top-4", style: { left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }, children: _jsx(ErrorBoundary, { label: t('timeline.stripFailed'), resetKeys: [ticks.length], children: _jsx(Scrubber, { ticks: ticks, firstInView: inView?.first ?? null, lastInView: inView?.last ?? null, onPick: pick, chat: cardChat, found: found, foundCurrent: foundCurrent }) }) })), overlay && (_jsx("div", { className: "absolute inset-0 z-5 flex flex-col bg-surface", style: { paddingBottom: coveredHeight }, children: overlay }))] }) }));
+                                        className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'), style: { position: stickyComposer ? 'sticky' : 'relative', bottom: 0 }, children: _jsx(QuoteTakerContext.Provider, { value: registerQuoteTaker, children: composer }) })] }) }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef, chatId: onMainAgent ? chatId : null, column: frame.column })] }), drawsVisuals && _jsx(VisualDialogs, { chatId: chatId }), loadingEarlier && !overlay && (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), showsScrubber && !overlay && (_jsx("div", { className: "absolute top-4", style: { left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }, children: _jsx(ErrorBoundary, { label: t('timeline.stripFailed'), resetKeys: [ticks.length], children: _jsx(Scrubber, { ticks: ticks, firstInView: inView?.first ?? null, lastInView: inView?.last ?? null, onPick: pick, chat: cardChat, found: found, foundCurrent: foundCurrent }) }) })), overlay && (_jsx("div", { className: "absolute inset-0 z-5 flex flex-col bg-surface", style: { paddingBottom: coveredHeight }, children: overlay }))] }) }));
 }

package/dist/chat/ui/TimelineMenu.d.ts

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
 import type { TimelineTarget } from '../logic/timeline-target.js';
-export declare function TimelineMenuPopup({ target, thread, chatId }: {
+export declare function TimelineMenuPopup({ target, thread, chatId, column }: {
     target: TimelineTarget;
     thread: RefObject<HTMLDivElement | null>;
     chatId?: string | null;
+    column?: boolean;
 }): import("react").JSX.Element;
 export declare function BookmarkMenuItems({ chatId, itemId, onName }: {
     chatId: string;

package/dist/chat/ui/TimelineMenu.js

@@ -1,16 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, Pencil, Scan } from 'lucide-react';
+import { BookmarkPlus, BookmarkX, Braces, Copy, Eye, FileText, GitFork, MessageSquare, MoveHorizontal, Pencil, Scan } from 'lucide-react';
 import { placeBookmark, removeBookmark, useBookmarkNaming } from '../bookmarks.js';
+import { rememberReadingWidth, useChatPreferences } from '../preferences.js';
+import { CHAT_READING_WIDTHS, readingWidthLabel } from '../reading-width.js';
 import { forkRefusal, turnIdOfRow } from '../logic/fork.js';
 import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
-import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links.js';
+import { useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 /* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
-export function TimelineMenuPopup({ target, thread, chatId = null }) {
+export function TimelineMenuPopup({ target, thread, chatId = null, column = false }) {
     const { t } = useTranslation('agent-chat');
     const message = target.row === null ? null : messageTextOf(target.row);
     const turnId = chatId === null || target.row === null ? null : turnIdOfRow(target.row);
@@ -20,7 +22,8 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
     // A thread outside a chat (a sub-agent's transcript) has no cwd of its own; the app answers for it then.
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
-    const { fork, fileLinks } = chatHost();
+    const { fork, fileLinks } = useChatHost();
+    const openFileLink = useOpenFileLink();
     const openInPreview = () => {
         if (target.file != null) {
             openFileLink(target.file.cwd, target.file.ref, target.file.scopeId);
@@ -29,7 +32,7 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
             openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false }, scopeId);
         }
     };
-    return (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] }))] }));
+    return (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] })), column && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsx(ReadingWidthSubmenu, {})] }))] }));
 }
 /*
  * Place a bookmark on a message, or rename and remove the one it has, from the thread and from the strip.
@@ -38,15 +41,22 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
 export function BookmarkMenuItems({ chatId, itemId, onName }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const host = useChatHost();
     const bookmark = useChatRow(chatId, (row) => row?.bookmarks?.find((candidate) => candidate.itemId === itemId) ?? null);
     if (bookmark === null) {
         return (_jsxs(ContextMenu.Item, { onClick: () => {
-                void placeBookmark(scope, chatId, itemId);
+                void placeBookmark(scope, host, chatId, itemId);
                 onName?.();
             }, children: [_jsx(Icon, { icon: BookmarkPlus, size: 14 }), " ", t('bookmarks.add')] }));
     }
     return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { onClick: () => {
                     useBookmarkNaming.getState().open(scope.keyOf(chatId), bookmark.itemId);
                     onName?.();
-                }, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('bookmarks.rename')] }), _jsxs(ContextMenu.Item, { onClick: () => void removeBookmark(scope, chatId, bookmark), children: [_jsx(Icon, { icon: BookmarkX, size: 14 }), " ", t('bookmarks.remove')] })] }));
+                }, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('bookmarks.rename')] }), _jsxs(ContextMenu.Item, { onClick: () => void removeBookmark(scope, host, chatId, bookmark), children: [_jsx(Icon, { icon: BookmarkX, size: 14 }), " ", t('bookmarks.remove')] })] }));
+}
+/* The person's reading width for every chat of its own on this client. */
+function ReadingWidthSubmenu() {
+    const { t } = useTranslation('agent-chat');
+    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
+    return (_jsxs(ContextMenu.SubmenuRoot, { children: [_jsxs(ContextMenu.SubmenuTrigger, { children: [_jsx(Icon, { icon: MoveHorizontal, size: 14 }), " ", t('readingWidth.label')] }), _jsx(ContextMenu.Popup, { className: "min-w-40", children: _jsx(ContextMenu.RadioGroup, { value: readingWidth, onValueChange: (width) => rememberReadingWidth(width), children: CHAT_READING_WIDTHS.map((width) => (_jsx(ContextMenu.RadioItem, { value: width, children: readingWidthLabel(width) }, width))) }) })] }));
 }

package/dist/chat/ui/UnifiedDiff.js

@@ -7,13 +7,14 @@ import { DiffOmitted } from './diff/DiffOmitted.js';
 import { DiffUnavailable } from './diff/DiffUnavailable.js';
 import { RawDiff } from './diff/RawDiff.js';
 import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 const LegacyUnifiedDiff = lazyNamed(() => import('./diff/LegacyUnifiedDiff.js'), 'default', { prefetch: false });
 const EditorPatchDiff = lazyNamed(() => import('./diff/EditorPatchDiff.js'), 'default');
 export default function UnifiedDiff(props) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { change, contents, allowEditor = true, ignoreWhitespace = false, overflow = 'wrap', diffStyle = 'unified', fill = false, maxHeight } = props;
-    const loadEngine = chatHost().code.editor;
+    const loadEngine = host.code.editor;
     const oldText = contents?.old ?? '';
     const newText = contents?.new ?? '';
     const sourceAllowed = useMemo(() => diffSourceBudget(oldText, newText) && patchSourceBudget(change.diff), [oldText, newText, change.diff]);