@celljs/ta-web 4.7.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celljs/ta-web",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "The web client of ta serve: sessions, streaming messages, tool runs with diffs, and dialogs",
   "keywords": [
     "cell-component"
@@ -31,12 +31,16 @@
     "watch": "tsc -b -w --preserveWatchOutput"
   },
   "dependencies": {
-    "@celljs/core": "4.7.0",
-    "@celljs/react": "4.7.0",
-    "@celljs/ta-client": "4.7.0",
-    "@celljs/ta-protocol": "4.7.0",
-    "@celljs/ta-relay": "4.7.0",
-    "@celljs/widget": "4.7.0",
+    "@celljs/core": "4.8.0",
+    "@celljs/react": "4.8.0",
+    "@celljs/ta-client": "4.8.0",
+    "@celljs/ta-protocol": "4.8.0",
+    "@celljs/ta-relay": "4.8.0",
+    "@celljs/widget": "4.8.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
     "katex": "^0.18.11",
     "lucide-react": "^1.70.0",
     "mermaid": "^12.3.0",

package/src/browser/chat/chat-protocol.ts

@@ -7,6 +7,8 @@ export const TaChat = Symbol('TaChat');
 export interface ChatDraft {
     /** Where it will work. */
     cwd: string;
+    /** `<provider>/<model id>` it will start on; none: the default model of the settings. */
+    model?: string;
 }
 
 export interface ChatState {
@@ -34,6 +36,8 @@ export interface TaChat {
     draft(): Promise<void>;
     /** Moves the new conversation to another directory; the next new ones start there too. */
     setDraftCwd(cwd: string): void;
+    /** The model the new conversation starts on; none: the default one. */
+    setDraftModel(model: string | undefined): void;
     /** Opens the session of the new conversation and sends its first message; fails as the opening fails. */
     submit(message: string, images?: ImageContent[]): Promise<void>;
     show(sessionId: string): Promise<void>;

package/src/browser/chat/chat-view.tsx

@@ -15,6 +15,7 @@ import { useNotices, useWorkbench } from '../hooks';
 import { useT } from '../i18n/use-t';
 import { MessageUtil } from '../util/message';
 import { type ChatDraft, type ChatState, TaChat } from './chat-protocol';
+import { useDraftModel } from './draft-model';
 
 const SUGGESTIONS: HeroSuggestion[] = [
     { picture: 'card', label: 'ta.chat.suggest.1.label', text: 'ta.chat.suggest.1' },
@@ -69,6 +70,8 @@ function DraftView({ draft, menu, aboveComposer, belowComposer }: DraftViewProps
     const fail = (cause: unknown) => notices.error(cause);
     const submit = (message: string, images?: ImageContent[]) => chat.submit(message, images);
     const list = React.useCallback((directory: string) => workbench.workspace.listDirectory('.', directory), [workbench]);
+    const pickModel = React.useCallback((model: string | undefined) => chat.setDraftModel(model), [chat]);
+    const model = useDraftModel(workbench.settings, draft, pickModel, t);
     return (
         <section className="ta-session">
             <header className="ta-session-header">
@@ -93,6 +96,7 @@ function DraftView({ draft, menu, aboveComposer, belowComposer }: DraftViewProps
                     cwd={draft.cwd || undefined}
                     onSubmit={submit}
                     onError={fail}
+                    actions={model ? [[model]] : undefined}
                     beside={<DirectoryButton cwd={draft.cwd} list={list} remote={workbench} onPick={cwd => chat.setDraftCwd(cwd)} />}
                 />
                 {belowComposer}

package/src/browser/chat/chat.spec.ts

@@ -137,6 +137,37 @@ describe('TaChatImpl', () => {
         expect(env.chat.state.store?.sessionId).toBe('s1');
     });
 
+    it('does not open again from its file a conversation of a package that is closed: its package opens it with its role', async () => {
+        await (env.chat as any).workbench.server.openSession({ cwd: '/agent' });
+        env.sessions[0].group = '@celljs/ta-channels';
+        await env.chat.start();
+        await env.chat.show('s1');
+        expect(env.storage.get('ta.chat.grouped')).toBe(true as unknown as string);
+        await env.chat.close('s1');
+        const again = setup();
+        again.storage.set('ta.chat.file', env.storage.get('ta.chat.file') as string);
+        again.storage.set('ta.chat.grouped', true as unknown as string);
+        await again.chat.start();
+        expect(again.opened).toEqual([]);
+        expect(again.chat.state.draft).toEqual({ cwd: '/home' });
+    });
+
+    it('keeps the conversation shown until the next is loaded, and of quick switches shows only the last', async () => {
+        const server = (env.chat as any).workbench.server;
+        await server.openSession({ cwd: '/a' });
+        await server.openSession({ cwd: '/b' });
+        await server.openSession({ cwd: '/c' });
+        await env.chat.start();
+        await env.chat.show('s1');
+        const shown: (string | undefined)[] = [];
+        env.chat.subscribe(state => shown.push(state.store?.sessionId));
+        await Promise.all([env.chat.show('s2'), env.chat.show('s3')]);
+        expect(env.chat.state.store?.sessionId).toBe('s3');
+        expect(env.stores.map(store => store.sessionId)).toEqual(['s1', 's3']);
+        expect(shown.filter(id => id !== 's3')).toEqual([undefined]);
+        expect(env.extensions.connected.filter(Boolean).at(-1)).toEqual({ cwd: '/c', sessionId: 's3' });
+    });
+
     it('opens a new conversation in the directory of the last one, and shows a new one when the last open closes', async () => {
         await env.chat.start();
         env.chat.setDraftCwd('/work');

package/src/browser/chat/chat.ts

@@ -10,8 +10,12 @@ import { type ChatState, TaChat } from './chat-protocol';
 
 /** The file of the conversation shown last, in any browser: the page opens it again. */
 const FILE: StateSpec<string> = { key: 'chat.file', tier: 'user', initial: '', parse: StateUtil.string };
+/** That conversation is of a package's group: the page shows it again only while it is open, as its package opens it with a role of its own. */
+const GROUPED: StateSpec<boolean> = { key: 'chat.grouped', tier: 'user', initial: false, parse: StateUtil.boolean };
 /** The directory of the last new conversation. */
 const CWD: StateSpec<string> = { key: 'chat.cwd', tier: 'user', initial: '', parse: StateUtil.string };
+/** The model the user picked for the last new conversation. */
+const MODEL: StateSpec<string> = { key: 'chat.model', tier: 'user', initial: '', parse: StateUtil.string };
 /** A file in a directory of packages: `extensions/<name>/...`, of the user or a project. */
 const PACKAGE_FILE = /(^|[\\/])extensions[\\/][^\\/]+[\\/]/;
 
@@ -62,6 +66,8 @@ export class TaChatImpl implements TaChat {
     protected watching = false;
     /** A web extension changed packages during a run: its end loads them again. */
     protected reloadPending = false;
+    /** The conversation asked for last: of quick switches, only the last is shown. */
+    protected wanted?: string;
 
     get state(): ChatState {
         return this.current;
@@ -86,7 +92,8 @@ export class TaChatImpl implements TaChat {
             await this.workbench.refresh();
             const file = (await this.persisted.load(FILE)) || undefined;
             const open = file && this.workbench.state.sessions.find(session => session.sessionFile === file);
-            const sessionId = open ? open.sessionId : file ? await this.open({ sessionFile: file }).catch(() => undefined) : undefined;
+            const reopen = file && !(await this.persisted.load(GROUPED));
+            const sessionId = open ? open.sessionId : reopen ? await this.open({ sessionFile: file }).catch(() => undefined) : undefined;
             if (sessionId) {
                 await this.attach(sessionId);
             } else {
@@ -107,18 +114,25 @@ export class TaChatImpl implements TaChat {
     setDraftCwd(cwd: string): void {
         if (this.current.draft) {
             this.persisted.set(CWD, cwd);
-            this.update({ draft: { cwd } });
+            this.update({ draft: { ...this.current.draft, cwd } });
             this.extensions.connect({ cwd });
         }
     }
 
+    setDraftModel(model: string | undefined): void {
+        if (this.current.draft && this.current.draft.model !== model) {
+            this.persisted.set(MODEL, model ?? '');
+            this.update({ draft: { ...this.current.draft, model } });
+        }
+    }
+
     submit(message: string, images?: ImageContent[]): Promise<void> {
         const next = this.queue.then(async () => {
             const { draft } = this.current;
             if (!draft) {
                 return;
             }
-            const sessionId = await this.open({ cwd: draft.cwd });
+            const sessionId = await this.open({ cwd: draft.cwd, model: draft.model });
             if (draft.cwd) {
                 this.persisted.set(CWD, draft.cwd);
             }
@@ -130,8 +144,9 @@ export class TaChatImpl implements TaChat {
     }
 
     show(sessionId: string): Promise<void> {
+        this.wanted = sessionId;
         return this.enqueue(async () => {
-            if (this.current.store?.sessionId !== sessionId) {
+            if (this.wanted === sessionId && this.current.store?.sessionId !== sessionId) {
                 await this.attach(sessionId);
             }
         });
@@ -179,18 +194,24 @@ export class TaChatImpl implements TaChat {
     }
 
     /** Follows a session, running the web tools it asks for. */
+    /** The conversation shown stays until the next one is loaded, so that switching does not flash an empty page. */
     protected async attach(sessionId: string): Promise<void> {
-        this.leave();
         const store = this.workbench.createStore(sessionId, { clientTools: this.extensions.state.tools.map(tool => this.clientTool(tool.name)) });
-        await store.attach();
+        try {
+            await store.attach();
+            // The list has the sessions opened since, as those of agents: web extensions get the directory of this one.
+            await this.workbench.refresh();
+        } catch (error) {
+            store.detach().catch(() => undefined);
+            throw error;
+        }
+        this.leave();
         this.seenEdits.clear();
         for (const id of Object.keys(store.state.tools)) {
             this.seenEdits.add(id);
         }
-        // The list has the sessions opened since, as those of agents: web extensions get the directory of this one.
-        await this.workbench.refresh();
         this.follow(store);
-        this.remember(this.workbench.state.sessions.find(session => session.sessionId === sessionId)?.sessionFile);
+        this.remember(this.workbench.state.sessions.find(session => session.sessionId === sessionId));
     }
 
     /** The newest other open session, or a new conversation. */
@@ -207,7 +228,7 @@ export class TaChatImpl implements TaChat {
 
     protected showDraft(): void {
         const cwd = this.persisted.get(CWD) || this.workbench.state.server?.cwd || '';
-        this.update({ draft: { cwd }, error: undefined });
+        this.update({ draft: { cwd, model: this.persisted.get(MODEL) || undefined }, error: undefined });
         this.extensions.connect(cwd ? { cwd } : undefined);
     }
 
@@ -261,7 +282,7 @@ export class TaChatImpl implements TaChat {
 
     protected onEvent(event: TaEvent): void {
         if (event.type === 'session_replaced') {
-            this.remember(event.info.sessionFile);
+            this.remember(event.info);
         }
         this.extensions.emit(event);
     }
@@ -320,9 +341,10 @@ export class TaChatImpl implements TaChat {
         await this.attach(await this.open({ sessionFile, cwd }));
     }
 
-    protected remember(sessionFile: string | undefined): void {
-        if (sessionFile) {
-            this.persisted.set(FILE, sessionFile);
+    protected remember(info: { sessionFile?: string; group?: string } | undefined): void {
+        if (info?.sessionFile) {
+            this.persisted.set(FILE, info.sessionFile);
+            this.persisted.set(GROUPED, !!info.group);
         }
     }
 

package/src/browser/chat/draft-model.spec.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test';
+import type { TaSettingsSnapshot } from '@celljs/ta-protocol';
+import { DraftModelUtil } from './draft-model';
+
+const t = ((id: string) => id) as never;
+
+function snapshot(fields: Partial<TaSettingsSnapshot>): TaSettingsSnapshot {
+    return { user: {}, project: {}, cwd: '/w', userFile: 'u', projectFile: 'p', projectTrusted: true, models: [], ...fields };
+}
+
+describe('DraftModelUtil', () => {
+    it('lists the models by name, the picked one checked, else the one of the settings', () => {
+        const picked: string[] = [];
+        const settings = snapshot({
+            models: ['anthropic/claude-x', 'codebuddy-code/default', 'codebuddy-code/opus'],
+            modelNames: { 'codebuddy-code/default': 'CodeBuddy Code', 'codebuddy-code/opus': 'Opus' },
+            user: { model: 'anthropic/claude-x' },
+        });
+        const action = DraftModelUtil.action(settings, undefined, model => picked.push(model), t);
+        expect(action.detail).toBe('claude-x');
+        expect(action.items?.map(item => [item.label, item.detail, !!item.checked])).toEqual([
+            ['claude-x', 'anthropic', true],
+            ['CodeBuddy Code', 'codebuddy-code', false],
+            ['Opus', 'codebuddy-code', false],
+        ]);
+        action.items?.[2].run?.();
+        expect(picked).toEqual(['codebuddy-code/opus']);
+        expect(DraftModelUtil.action(settings, 'codebuddy-code/default', () => undefined, t).detail).toBe('CodeBuddy Code');
+        expect(DraftModelUtil.settingsModel(snapshot({ user: { model: 'a/b' }, project: { model: 'c/d' } }))).toBe('c/d');
+    });
+});

package/src/browser/chat/draft-model.tsx

@@ -0,0 +1,63 @@
+import type { TaSettingsServer, TaSettingsSnapshot } from '@celljs/ta-protocol';
+import { Box } from 'lucide-react';
+import * as React from 'react';
+import type { ComposerAction } from '../components/composer-box';
+import { Icon } from '../components/icon';
+import type { Translate } from '../i18n/use-t';
+import type { ChatDraft } from './chat-protocol';
+
+export namespace DraftModelUtil {
+    /** The model the settings start a conversation in `snapshot`'s directory on: the project's, else the user's. */
+    export function settingsModel(snapshot: TaSettingsSnapshot): string | undefined {
+        const model = snapshot.project.model ?? snapshot.user.model;
+        return typeof model === 'string' && model ? model : undefined;
+    }
+
+    /** The model entry of the + of a new conversation: the models with credentials, the picked one checked. */
+    export function action(snapshot: TaSettingsSnapshot, picked: string | undefined, pick: (model: string) => void, t: Translate): ComposerAction {
+        const current = picked ?? settingsModel(snapshot);
+        const name = (ref: string) => snapshot.modelNames?.[ref] ?? ref.slice(ref.indexOf('/') + 1);
+        return {
+            key: 'model',
+            label: t('ta.session.model'),
+            icon: <Icon icon={Box} size={16} />,
+            detail: current ? name(current) : t('ta.session.noModel'),
+            items: snapshot.models.map(ref => ({
+                key: ref,
+                label: name(ref),
+                detail: ref.slice(0, ref.indexOf('/')),
+                checked: ref === current,
+                run: () => pick(ref),
+            })),
+        };
+    }
+}
+
+/**
+ * The model of a new conversation in its + menu: the models of the settings of its directory, those
+ * of pi packages included. A model picked before that is gone is forgotten.
+ */
+export function useDraftModel(
+    settings: TaSettingsServer,
+    draft: ChatDraft,
+    pick: (model: string | undefined) => void,
+    t: Translate,
+): ComposerAction | undefined {
+    const [snapshot, setSnapshot] = React.useState<TaSettingsSnapshot>();
+    React.useEffect(() => {
+        let live = true;
+        settings.getSettings(draft.cwd || undefined).then(
+            next => live && setSnapshot(next),
+            () => undefined,
+        );
+        return () => {
+            live = false;
+        };
+    }, [settings, draft.cwd]);
+    React.useEffect(() => {
+        if (snapshot && draft.model && !snapshot.models.includes(draft.model)) {
+            pick(undefined);
+        }
+    }, [snapshot, draft.model, pick]);
+    return snapshot?.models.length ? DraftModelUtil.action(snapshot, draft.model, pick, t) : undefined;
+}

package/src/browser/components/app-view.tsx

@@ -288,7 +288,7 @@ export function AppView() {
     const closeSettings = React.useCallback(() => setSettings(undefined), []);
     const [rightOpen, toggleRight, revealRight] = useRight();
     const [maximized, setMaximized] = React.useState(false);
-    const [{ theme }, settingsStore] = useSettings();
+    const [{ theme, language }, settingsStore] = useSettings();
     const sidebar = usePane(SIDEBAR);
     const editor = usePane(EDITOR);
     const online = workbench.status === 'online';
@@ -297,6 +297,12 @@ export function AppView() {
     const openLink = useOpenLink(undefined);
     useDocument();
     useRefresh(online);
+    // What the server and its packages say (errors, questions) is in the language of the page.
+    React.useEffect(() => {
+        if (online) {
+            bench.settings.setLanguage(language).catch(() => undefined);
+        }
+    }, [online, language, bench]);
     React.useEffect(() => {
         void bench.start();
     }, [bench]);
@@ -334,14 +340,15 @@ export function AppView() {
     // biome-ignore lint/correctness/useExhaustiveDependencies: follows what the main area shows
     React.useEffect(() => setSettings(undefined), [page, shownSession]);
     // Another conversation shown that no sidebar view lists (not that of an agent, which is in a group), by a page,
-    // a link or a fork: the sidebar turns to the chats, where it is selected, to be found again. Not the one the page opens with.
+    // a link or a fork: the sidebar turns to the chats, where it is selected, to be found again. Not the one the page opens with,
+    // nor one the list does not have yet: it may be an agent's.
     // biome-ignore lint/correctness/useExhaustiveDependencies: follows the conversation shown
     React.useEffect(() => {
         if (!shownSession || !started.current) {
             return;
         }
         const info = workbench.sessions.find(session => session.sessionId === shownSession);
-        if (!info?.group) {
+        if (info && !info.group) {
             setSideId('');
         }
     }, [shownSession]);

package/src/browser/components/composer-box.tsx

@@ -2,6 +2,7 @@ import { ArrowUp, AtSign, Check, ChevronLeft, ChevronRight, ImagePlus, Plus, Sla
 import * as React from 'react';
 import { useT } from '../i18n/use-t';
 import { type ComposerAttachment, type ComposerImage, ComposerUtil, IMAGE_TYPES } from '../util/composer';
+import { FileDragUtil } from '../util/file-drag';
 import { ComposerMenu, type ComposerMenuItem } from './composer-menu';
 import { Icon, IconButton } from './icon';
 
@@ -59,6 +60,8 @@ export interface ComposerBoxProps {
     /** Controls on the right, before the send button, as the microphone of the double. */
     after?: React.ReactNode;
     autoFocus?: boolean;
+    /** The directory of the conversation: files dragged in from it become `@` references relative to it. */
+    cwd?: string;
     onError(error: unknown): void;
 }
 
@@ -102,13 +105,31 @@ export function Attachments({ attachments, onRemove }: { attachments: ComposerAt
     );
 }
 
-/** The + on the left of the box: what is not typing, in one place. A list opens in place of the menu. */
+/** A list of more entries than this gets a box that narrows it. */
+const SEARCH_FROM = 8;
+
+export namespace PlusMenuUtil {
+    /** The entries whose label or detail has every word of `query`, in any case. */
+    export function filter(items: ComposerAction[], query: string): ComposerAction[] {
+        const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+        return words.length ? items.filter(item => words.every(word => `${item.label} ${item.detail ?? ''}`.toLowerCase().includes(word))) : items;
+    }
+}
+
+/** The + on the left of the box: what is not typing, in one place. A list opens in place of the menu, with a box to narrow a long one. */
 function PlusMenu({ sections, onClose }: { sections: ComposerAction[][]; onClose(): void }) {
+    const t = useT();
     const [open, setOpen] = React.useState<ComposerAction>();
-    const shown = open?.items ? [open.items] : sections;
+    const [query, setQuery] = React.useState('');
+    const searchable = (open?.items?.length ?? 0) > SEARCH_FROM;
+    const shown = open?.items ? [searchable ? PlusMenuUtil.filter(open.items, query) : open.items] : sections;
+    const enter = (action: ComposerAction | undefined) => {
+        setQuery('');
+        setOpen(action);
+    };
     const pick = (action: ComposerAction) => {
         if (action.items) {
-            setOpen(action);
+            enter(action);
             return;
         }
         onClose();
@@ -117,12 +138,30 @@ function PlusMenu({ sections, onClose }: { sections: ComposerAction[][]; onClose
     return (
         <div className="ta-plus-menu" role="menu" aria-label={open?.label}>
             {open && (
-                <button type="button" className="ta-plus-back" onClick={() => setOpen(undefined)}>
+                <button type="button" className="ta-plus-back" onClick={() => enter(undefined)}>
                     <Icon icon={ChevronLeft} size={15} />
                     <span>{open.label}</span>
                 </button>
             )}
+            {searchable && (
+                <input
+                    className="ta-plus-search"
+                    autoFocus
+                    value={query}
+                    placeholder={t('ta.composer.filter')}
+                    aria-label={t('ta.composer.filter')}
+                    onChange={event => setQuery(event.target.value)}
+                    onKeyDown={event => {
+                        const first = shown[0]?.[0];
+                        if (event.key === 'Enter' && first && !event.nativeEvent.isComposing) {
+                            event.preventDefault();
+                            pick(first);
+                        }
+                    }}
+                />
+            )}
             <div className="ta-plus-items">
+                {searchable && !shown[0].length && <div className="ta-plus-empty">{t('ta.composer.noMatch')}</div>}
                 {shown.map((section, index) => (
                     <React.Fragment key={index}>
                         {index > 0 && <hr className="ta-plus-line" />}
@@ -169,6 +208,7 @@ export const ComposerBox = React.forwardRef<ComposerBoxHandle, ComposerBoxProps>
         beside,
         after,
         autoFocus,
+        cwd,
         onError,
     } = props;
     const t = useT();
@@ -361,6 +401,12 @@ export const ComposerBox = React.forwardRef<ComposerBoxHandle, ComposerBoxProps>
 
     const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
         setDragging(false);
+        const files = FileDragUtil.get(event.dataTransfer);
+        if (files) {
+            event.preventDefault();
+            edit(...ComposerUtil.insert(text, caret, `${FileDragUtil.references(files, cwd)} `));
+            return;
+        }
         if (takesImages && event.dataTransfer.files.length) {
             event.preventDefault();
             addFiles(event.dataTransfer.files);
@@ -390,11 +436,11 @@ export const ComposerBox = React.forwardRef<ComposerBoxHandle, ComposerBoxProps>
         <div className="ta-console-composer">
             {(items.length > 0 || note) && <ComposerMenu id={menuId} items={items} selected={selected} note={note} onPick={pick} onHover={setSelected} />}
             {above}
-            {/* biome-ignore lint/a11y/noStaticElementInteractions: dropping images is a shortcut; the + menu does the same */}
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: dropping images and files is a shortcut; the + menu does the same */}
             <div
                 className={`ta-console-box ${dragging ? 'ta-dragging' : ''}`}
                 onDragOver={event => {
-                    if (takesImages && event.dataTransfer.types.includes('Files')) {
+                    if (FileDragUtil.has(event.dataTransfer) || (takesImages && event.dataTransfer.types.includes('Files'))) {
                         event.preventDefault();
                         setDragging(true);
                     }

package/src/browser/components/composer.tsx

@@ -144,6 +144,7 @@ export const Composer = React.forwardRef<ComposerBoxHandle, ComposerProps>(funct
             beside={beside}
             after={after}
             autoFocus
+            cwd={cwd}
             onError={onError}
             above={
                 <>

package/src/browser/components/dialog-view.tsx

@@ -1,13 +1,17 @@
 import type { RpcExtensionUIRequest, RpcExtensionUIResponse } from '@celljs/ta-protocol';
 import * as React from 'react';
 import { useT } from '../i18n/use-t';
+import { TerminalText } from '../util/terminal-text';
 
 type Respond = (response: RpcExtensionUIResponse) => void;
 
-/** The dialog an extension opened, such as the permission gate's question; one at a time, oldest first. */
+/**
+ * The dialog an extension opened, such as the permission gate's question; one at a time, oldest first. Its texts
+ * are written for pi's terminal: shown without its escapes, while an option goes back as it came.
+ */
 export function DialogView({ request, respond }: { request: RpcExtensionUIRequest; respond: Respond }) {
     const t = useT();
-    const [value, setValue] = React.useState(() => ('prefill' in request ? (request.prefill ?? '') : ''));
+    const [value, setValue] = React.useState(() => ('prefill' in request ? TerminalText.plain(request.prefill ?? '') : ''));
     const cancel = () => respond({ type: 'extension_ui_response', id: request.id, cancelled: true });
     const answer = (response: Omit<RpcExtensionUIResponse, 'type' | 'id'>) =>
         respond({ type: 'extension_ui_response', id: request.id, ...response } as RpcExtensionUIResponse);
@@ -16,7 +20,7 @@ export function DialogView({ request, respond }: { request: RpcExtensionUIReques
         case 'confirm':
             body = (
                 <>
-                    <p className="ta-dialog-message">{request.message}</p>
+                    <p className="ta-dialog-message">{TerminalText.plain(request.message)}</p>
                     <div className="ta-dialog-actions">
                         <button type="button" className="ta-button" onClick={() => answer({ confirmed: false })}>
                             {t('ta.no')}
@@ -33,7 +37,7 @@ export function DialogView({ request, respond }: { request: RpcExtensionUIReques
                 <div className="ta-dialog-options">
                     {request.options.map((option, index) => (
                         <button key={option} type="button" className="ta-option" autoFocus={index === 0} onClick={() => answer({ value: option })}>
-                            {option}
+                            {TerminalText.plain(option)}
                         </button>
                     ))}
                 </div>
@@ -52,7 +56,7 @@ export function DialogView({ request, respond }: { request: RpcExtensionUIReques
                             className="ta-input"
                             autoFocus
                             value={value}
-                            placeholder={request.placeholder}
+                            placeholder={request.placeholder && TerminalText.plain(request.placeholder)}
                             onChange={event => setValue(event.target.value)}
                         />
                     ) : (
@@ -74,8 +78,13 @@ export function DialogView({ request, respond }: { request: RpcExtensionUIReques
             return null;
     }
     return (
-        <div className="ta-dialog ta-glass" role="dialog" aria-label={request.title} onKeyDown={event => event.key === 'Escape' && cancel()}>
-            <div className="ta-dialog-title">{request.title}</div>
+        <div
+            className="ta-dialog ta-glass"
+            role="dialog"
+            aria-label={TerminalText.plain(request.title)}
+            onKeyDown={event => event.key === 'Escape' && cancel()}
+        >
+            <div className="ta-dialog-title">{TerminalText.plain(request.title)}</div>
             {body}
         </div>
     );

package/src/browser/components/notice-center.tsx

@@ -7,6 +7,7 @@ import { NoticesUtil } from '../notices/notices';
 import type { ConfirmRequest, InputRequest, Notice, TaNotices } from '../notices/notices-protocol';
 import { LEVEL_ICONS } from './callout';
 import { Icon, IconButton } from './icon';
+import { TerminalArt } from './terminal-art';
 
 /** How long a notice takes to go, in style.ts. */
 const LEAVE_MS = 160;
@@ -53,7 +54,11 @@ function Toast({ notice, notices }: { notice: Notice; notices: TaNotices }) {
     }, [notices, notice.id]);
     const hold = useLifetime(notice, leave);
     return (
-        <div className={`ta-toast ta-level-${notice.level}${leaving ? ' ta-leaving' : ''}`} role={notice.level === 'error' ? 'alert' : 'status'} {...hold}>
+        <div
+            className={`ta-toast ta-level-${notice.level}${notice.art ? ' ta-toast-with-art' : ''}${leaving ? ' ta-leaving' : ''}`}
+            role={notice.level === 'error' ? 'alert' : 'status'}
+            {...hold}
+        >
             <Icon icon={LEVEL_ICONS[notice.level]} size={16} className="ta-level-icon" />
             <div className="ta-toast-text">
                 <div className="ta-toast-message">
@@ -61,6 +66,7 @@ function Toast({ notice, notices }: { notice: Notice; notices: TaNotices }) {
                     {notice.count > 1 && <span className="ta-toast-count">×{notice.count}</span>}
                 </div>
                 {notice.detail && <div className="ta-toast-detail">{notice.detail}</div>}
+                {notice.art && <TerminalArt art={notice.art} className="ta-toast-art" label={t('ta.notice.picture')} />}
                 {notice.action && (
                     <button
                         type="button"

package/src/browser/components/plus-menu.spec.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'bun:test';
+import { PlusMenuUtil } from './composer-box';
+
+describe('PlusMenuUtil', () => {
+    it('narrows a list to the entries with every word, in their label or detail', () => {
+        const items = [
+            { key: 'a', label: 'Claude-Opus-5.5', detail: 'codebuddy-code' },
+            { key: 'b', label: 'GPT-6-Sol', detail: 'codebuddy-code' },
+            { key: 'c', label: 'claude-opus-5-5', detail: 'claude-code' },
+        ];
+        expect(PlusMenuUtil.filter(items, '').map(item => item.key)).toEqual(['a', 'b', 'c']);
+        expect(PlusMenuUtil.filter(items, 'OPUS').map(item => item.key)).toEqual(['a', 'c']);
+        expect(PlusMenuUtil.filter(items, 'opus claude-code').map(item => item.key)).toEqual(['c']);
+        expect(PlusMenuUtil.filter(items, 'gemini')).toEqual([]);
+    });
+});