@celljs/ta-web 4.7.0 → 4.8.0

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useNotices, useOpenLink, useSessionState } from '../hooks';
 import { useT } from '../i18n/use-t';
 import { MessageUtil } from '../util/message';
+import { TerminalText } from '../util/terminal-text';
 import { Composer } from './composer';
 import type { ComposerBoxHandle } from './composer-box';
 import { useConversationScroll } from './conversation-scroll';
@@ -14,11 +15,17 @@ import { useMessageActions } from './message-actions';
 import { MessageActions } from './message-footer';
 import { ConversationSession, MessageList } from './message-list';
 import { useSessionSettings } from './session-settings';
+import { TerminalArt } from './terminal-art';
 
-/** What the extensions of the session say with `notify` goes to the notices of the page; what was said before it opened stays quiet. */
+/**
+ * What the extensions of the session say with `notify` goes to the notices of the page; what was said before it
+ * opened stays quiet. A picture in it (a QR code to sign in) is drawn, and stays until the next notice of the
+ * session, which says how it went or brings a new code.
+ */
 function useSessionNotices(notices: Notice[]) {
     const [, center] = useNotices();
     const seen = React.useRef<Set<string> | undefined>(undefined);
+    const picture = React.useRef<number>(undefined);
     React.useEffect(() => {
         if (!seen.current) {
             seen.current = new Set(notices.map(notice => notice.id));
@@ -27,12 +34,46 @@ function useSessionNotices(notices: Notice[]) {
         for (const notice of notices) {
             if (!seen.current.has(notice.id)) {
                 seen.current.add(notice.id);
-                center.notify(notice.message, { level: notice.type });
+                if (picture.current !== undefined) {
+                    center.dismiss(picture.current);
+                    picture.current = undefined;
+                }
+                const { text, art } = TerminalText.art(notice.message);
+                const id = center.notify(text, { level: notice.type, art, sticky: art !== undefined });
+                picture.current = art ? id : undefined;
             }
         }
     }, [notices, center]);
 }
 
+/** What an extension shows above or below the message box (`setWidget`): its lines as a terminal draws them, a picture in them drawn. */
+function WidgetView({ lines }: { lines: string[] }) {
+    const t = useT();
+    const { text, art } = React.useMemo(() => TerminalText.art(lines.join('\n')), [lines]);
+    return (
+        <div className="ta-widget">
+            {text && <pre className="ta-widget-text">{text}</pre>}
+            {art && <TerminalArt art={art} className="ta-widget-art" label={t('ta.notice.picture')} />}
+        </div>
+    );
+}
+
+/** The status of an extension, as a chip: its label, then each part, with a dot for the sign of its state. */
+function StatusChip({ text }: { text: string }) {
+    const { label, segments } = React.useMemo(() => TerminalText.status(text), [text]);
+    return (
+        <span className="ta-statusline-item" title={text}>
+            {label && <span className="ta-statusline-label">{label}</span>}
+            {segments.map((segment, index) => (
+                <span key={index} className={`ta-statusline-part${segment.tone ? ` ta-tone-${segment.tone}` : ''}`}>
+                    {segment.tone && <span className={`ta-status ta-status-${segment.tone}`} />}
+                    {segment.text}
+                </span>
+            ))}
+        </span>
+    );
+}
+
 export interface SessionViewProps {
     store: SessionStore;
     server: TaServer;
@@ -80,6 +121,15 @@ export function SessionView({
     const composer = React.useRef<ComposerBoxHandle>(null);
     const cwd = info?.cwd;
     const messageActions = useMessageActions(store, server, state.working, cwd, composer, onActivity);
+    // An extension puts text in the message box, as in pi's terminal.
+    const editorText = state.editorText;
+    const takenText = React.useRef(editorText?.id);
+    React.useEffect(() => {
+        if (editorText && editorText.id !== takenText.current) {
+            takenText.current = editorText.id;
+            composer.current?.setText(TerminalText.plain(editorText.text));
+        }
+    }, [editorText]);
     React.useEffect(() => {
         if (draftText) {
             composer.current?.setText(draftText);
@@ -97,7 +147,10 @@ export function SessionView({
         }
     }, [state.closed, onClosed]);
 
-    const statuses = Object.values(state.status);
+    const statuses = Object.entries(state.status).filter(([, text]) => TerminalText.plain(text).trim());
+    const widgets = Object.entries(state.widgets);
+    const widgetsAt = (placement: 'aboveEditor' | 'belowEditor') =>
+        widgets.filter(([, widget]) => widget.placement === placement).map(([key, widget]) => <WidgetView key={key} lines={widget.lines} />);
     const dialog = state.pendingUi[0];
     const title = info?.sessionName || (info ? MessageUtil.basename(info.cwd) : t('ta.session.title'));
 
@@ -134,6 +187,7 @@ export function SessionView({
             <div className="ta-bottom">
                 {dialog && <DialogView key={dialog.id} request={dialog} respond={response => store.respondUi(response).catch(fail)} />}
                 {aboveComposer}
+                {widgetsAt('aboveEditor')}
                 <Composer
                     ref={composer}
                     store={store}
@@ -146,7 +200,14 @@ export function SessionView({
                     onError={fail}
                 />
                 {belowComposer}
-                {statuses.length > 0 && <div className="ta-statusline">{statuses.join(' · ')}</div>}
+                {widgetsAt('belowEditor')}
+                {statuses.length > 0 && (
+                    <div className="ta-statusline">
+                        {statuses.map(([key, text]) => (
+                            <StatusChip key={key} text={text} />
+                        ))}
+                    </div>
+                )}
             </div>
         </section>
     );

package/src/browser/components/terminal-art.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TerminalText } from '../util/terminal-text';
+
+/** A picture of cells, as a QR code to scan: black on white whatever the theme, with a margin of white. */
+export function TerminalArt({ art, className, label }: { art: boolean[][]; className: string; label: string }) {
+    const path = React.useMemo(() => TerminalText.path(art), [art]);
+    const width = Math.max(...art.map(row => row.length));
+    const margin = 2;
+    return (
+        <svg
+            className={className}
+            viewBox={`${-margin} ${-margin} ${width + margin * 2} ${art.length + margin * 2}`}
+            role="img"
+            aria-label={label}
+            shapeRendering="crispEdges"
+        >
+            <rect x={-margin} y={-margin} width={width + margin * 2} height={art.length + margin * 2} fill="#fff" />
+            <path d={path} fill="#111" />
+        </svg>
+    );
+}

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

@@ -63,7 +63,7 @@ function ToolRow({ name, args, status, trailing, details }: ToolRowProps) {
     const line = (
         <>
             <StatusDot status={status} />
-            <span className="ta-tool-verb">{summary.verb ? t(summary.verb) : name}</span>
+            <span className="ta-tool-verb">{summary.verb ? t(summary.verb) : summary.name}</span>
             {summary.target && <span className={`ta-tool-target ${summary.code ? 'ta-mono' : ''}`}>{summary.target}</span>}
             {details ? <Icon icon={ChevronRight} size={13} className="ta-tool-chevron" /> : <span className="ta-tool-chevron" />}
         </>

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

@@ -55,6 +55,7 @@ export function WebComposer({
             mentionLabel={mentions ? mentionLabel : undefined}
             actions={actions}
             beside={onPickCwd && listDirectory && <DirectoryButton cwd={cwd || serverCwd || ''} list={listDirectory} remote={remote} onPick={onPickCwd} />}
+            cwd={cwd || serverCwd}
             onError={cause => notices.error(cause)}
         />
     );

package/src/browser/extension/icons.ts

@@ -1,4 +1,5 @@
 import {
+    AlarmClock,
     ArrowDown,
     ArrowLeft,
     ArrowRight,
@@ -12,6 +13,7 @@ import {
     ChevronRight,
     ChevronsDownUp,
     ChevronsUpDown,
+    CircleAlert,
     Clipboard,
     Code,
     Columns2,
@@ -51,6 +53,7 @@ import {
     Pencil,
     Pin,
     PinOff,
+    Play,
     Plus,
     Puzzle,
     RefreshCw,
@@ -83,6 +86,7 @@ import type { WebIcon } from './web-extension-api';
 
 /** The icons a web extension gets as `pi.ui.icons`; names are lucide's. Only add: removing one breaks extensions. */
 export const WEB_ICONS: Readonly<Record<string, WebIcon>> = Object.freeze({
+    AlarmClock,
     ArrowDown,
     ArrowLeft,
     ArrowRight,
@@ -96,6 +100,7 @@ export const WEB_ICONS: Readonly<Record<string, WebIcon>> = Object.freeze({
     ChevronRight,
     ChevronsDownUp,
     ChevronsUpDown,
+    CircleAlert,
     Clipboard,
     Code,
     Columns2,
@@ -134,6 +139,7 @@ export const WEB_ICONS: Readonly<Record<string, WebIcon>> = Object.freeze({
     PackageOpen,
     Pencil,
     Pin,
+    Play,
     PinOff,
     Plus,
     Puzzle,

package/src/browser/extension/web-extension-api.ts

@@ -1,4 +1,13 @@
-import type { TaEvent, TaPackageServer, TaRemoteServer, TaServer, TaSessionInfo, TaTerminalServer, TaWorkspaceServer } from '@celljs/ta-protocol';
+import type {
+    TaEvent,
+    TaPackageServer,
+    TaRemoteServer,
+    TaServer,
+    TaSessionInfo,
+    TaSettingsServer,
+    TaTerminalServer,
+    TaWorkspaceServer,
+} from '@celljs/ta-protocol';
 import type * as React from 'react';
 import type { Mood } from '../avatar/dino-avatar';
 import type { Language, Theme } from '../settings/settings-protocol';
@@ -21,6 +30,8 @@ export interface WebExtensionAPI {
     readonly packages: TaPackageServer;
     /** The other machines of `ssh://` directories (TaLocation): their ports, for a page served there. */
     readonly remote: TaRemoteServer;
+    /** pi's settings of ta (`settings.json`): `getSettings(cwd)` also lists the models with credentials, for a model picker. */
+    readonly settings: TaSettingsServer;
     readonly ui: WebExtensionUI;
     /** A view of its own: a page or a sidebar view, in the navigation on the left, or a tool of the workbench on the right. */
     registerView(name: string, view: WebView): void;
@@ -129,6 +140,31 @@ export interface WebExtensionUI {
     editor(title: string, prefill?: string): Promise<string | undefined>;
     readonly theme: Theme;
     readonly language: Language;
+    /**
+     * Whether a view can show a site in a `<webview>` element, as in Ta Desktop: a page of its own rather
+     * than a frame, which sites cannot refuse, where signing in works and stays, with the history, title and
+     * icon of the page as events and methods of the element (Electron's). Elsewhere, an iframe.
+     */
+    readonly supportsWebview: boolean;
+    /**
+     * Ta Desktop's way to the file manager of the system (Finder, File Explorer, that of Linux), for paths of
+     * this machine; undefined in a browser and the mobile app. A directory of `ssh://` is not of this machine.
+     */
+    readonly desktop?: WebDesktop;
+    /**
+     * Files dragged between views, as the explorer drags them: `set` them in `dragstart`. Dropped on the
+     * message box of a conversation they become `@` references (relative to its directory when they are in
+     * it); a terminal takes their `paths`; anywhere else they are their paths as text.
+     */
+    readonly fileDrag: WebFileDrag;
+    /**
+     * Ta Desktop: sends a command of the Chrome DevTools Protocol to the page of a `<webview>` of this page
+     * (its `getWebContentsId()`), as that page's debugger, and resolves with its result; `undefined`
+     * elsewhere. Only commands on the page itself: Accessibility, CSS, DOM, DOMSnapshot, Emulation, Input,
+     * Log, Overlay, Page and Runtime, without those that touch files, downloads or navigate (use the
+     * element's `loadURL`); the app refuses the rest.
+     */
+    readonly debugWebview?: (webContentsId: number, method: string, params?: Record<string, unknown>) => Promise<unknown>;
     /**
      * A tab in the editor area beside the conversation (a file, a diff, a browser); an open id is shown
      * again. With `preserveFocus`, it opens behind the tab shown, and the workbench is not revealed: for
@@ -166,6 +202,11 @@ export interface WebExtensionUI {
     readonly CodeEditor: React.ComponentType<CodeEditorProps>;
     /** Monaco's diff editor on two texts of a file, side by side or inline; the right side can be edited. */
     readonly DiffEditor: React.ComponentType<DiffEditorProps>;
+    /**
+     * A terminal as VS Code's: xterm.js drawn on the GPU, in the theme of the page. It loads the first
+     * time one is made; what it shows stays while no view shows it (`attach` it to the next one).
+     */
+    createTerminal(options?: WebTerminalOptions): WebTerminal;
     /** The message box of the conversations of the page, with its + menu: one look for every conversation. */
     readonly Composer: React.ComponentType<WebComposerProps>;
     /** Markdown as the conversations show it. */
@@ -176,6 +217,95 @@ export interface WebExtensionUI {
     readonly FolderPicker: React.ComponentType<WebFolderPickerProps>;
 }
 
+export interface WebDesktop {
+    /** Node's `process.platform` of the machine (`darwin`, `win32`, `linux`): what its file manager is called. */
+    readonly platform: string;
+    /** Opens the folder of an absolute path of this machine in the file manager, the item selected. */
+    showItemInFolder(path: string): Promise<void>;
+    /** The sign-ins of the user's browsers taken into the browser of Ta; macOS and Windows only. */
+    readonly browserData?: WebBrowserData;
+}
+
+/** A profile of the user's Chrome, Edge, Brave, Arc, Vivaldi or Chromium. */
+export interface WebBrowserProfile {
+    /** What `import` takes. */
+    id: string;
+    /** The name of the browser, `Google Chrome`. */
+    browser: string;
+    /** The name of the profile, as the browser shows it. */
+    name: string;
+}
+
+/** The cookies an import took into the browser of Ta. */
+export interface WebBrowserImport {
+    imported: number;
+    /** Those that could not be read or set. */
+    skipped: number;
+    /** Windows: those under Chrome's app-bound encryption, which only Chrome can read: sign in again. */
+    appBound: number;
+}
+
+/**
+ * Ta Desktop's browser of the workbench keeps its own sign-ins. These take those of the user's browser:
+ * its cookies, never its passwords or history, once the user said yes in a dialog of the app (on macOS,
+ * the Keychain asks too).
+ */
+export interface WebBrowserData {
+    /** The profiles with cookies of the browsers installed. */
+    profiles(): Promise<WebBrowserProfile[]>;
+    /** Takes the cookies of a profile; `undefined` when the user said no. */
+    import(profileId: string): Promise<WebBrowserImport | undefined>;
+    /** Forgets the cookies, storage and cache of the browser of Ta. */
+    clear(): Promise<void>;
+}
+
+/** Files of a directory on a drag. */
+export interface WebDraggedFiles {
+    /** The directory they are of (`ui.useCwd()` or another): a path of the machine of ta serve, or `ssh://`. */
+    cwd: string;
+    /** Relative to `cwd`, with `/`. */
+    paths: string[];
+}
+
+export interface WebFileDrag {
+    set(dataTransfer: DataTransfer, files: WebDraggedFiles): void;
+    /** Whether a drag holds files: what `dragover` can tell, before the drop. */
+    has(dataTransfer: DataTransfer): boolean;
+    /** The files of a drop; undefined when it holds none. */
+    get(dataTransfer: DataTransfer): WebDraggedFiles | undefined;
+    /** Their absolute paths inside their machine. */
+    paths(files: WebDraggedFiles): string[];
+}
+
+export interface WebTerminalOptions {
+    /** Its size until a view fits it: the size the program started with. Default: 80 × 24. */
+    cols?: number;
+    rows?: number;
+    /**
+     * The directory of the program: paths of its output (`src/a.ts:10`) are read from there, and from the
+     * one a shell reports (OSC 7) once it does. URLs and paths are links, opened with Cmd or Ctrl + click
+     * as the links of a reply are (with Shift, a page in the browser of the system).
+     */
+    cwd?: string;
+}
+
+/** A terminal screen; the program behind it is the extension's (`pi.terminals` for a shell of the server). */
+export interface WebTerminal {
+    /** Its size in characters. */
+    readonly cols: number;
+    readonly rows: number;
+    /** Output of the program, with its control sequences. */
+    write(data: string): void;
+    /** What the user types or pastes, and the mouse reports the program asked for, as a terminal sends them. */
+    onData(listener: (data: string) => void): () => void;
+    /** It fitted a view of another size: the program should know it (`resizeTerminal`). */
+    onResize(listener: (size: { cols: number; rows: number }) => void): () => void;
+    /** Shows it in `element`, which it fills and follows in size; the function returned takes it out again. */
+    attach(element: HTMLElement): () => void;
+    focus(): void;
+    dispose(): void;
+}
+
 export interface WebFolderPickerProps {
     /** Where it opens; default: the directory of ta serve. */
     initial?: string;

package/src/browser/extension/web-extensions.ts

@@ -1,5 +1,14 @@
 import { Autowired, Component, Optional, PostConstruct } from '@celljs/core';
-import type { TaEvent, TaPackageServer, TaRemoteServer, TaServer, TaTerminalServer, TaWebExtensionInfo, TaWorkspaceServer } from '@celljs/ta-protocol';
+import type {
+    TaEvent,
+    TaPackageServer,
+    TaRemoteServer,
+    TaServer,
+    TaSettingsServer,
+    TaTerminalServer,
+    TaWebExtensionInfo,
+    TaWorkspaceServer,
+} from '@celljs/ta-protocol';
 import * as React from 'react';
 import { CodeEditor } from '../components/code-editor';
 import { DiffEditor } from '../components/diff-editor';
@@ -9,9 +18,13 @@ import { TaAvatar } from '../components/ta-avatar';
 import { WebComposer } from '../components/web-composer';
 import { WebDialog } from '../components/web-dialog';
 import { message as messageOf } from '../i18n/messages';
+import { TaLinks } from '../links/links-protocol';
 import { TaNotices } from '../notices/notices-protocol';
 import { TaSettings } from '../settings/settings-protocol';
 import { type StateSpec, StateUtil, TaState } from '../state/state-protocol';
+import { DefaultWebTerminal } from '../terminal/web-terminal';
+import { DesktopUtil } from '../util/desktop';
+import { FileDragUtil } from '../util/file-drag';
 import { TaWorkbench } from '../workbench-protocol';
 import { WEB_ICONS } from './icons';
 import type {
@@ -21,9 +34,12 @@ import type {
     WebEditor,
     WebExtensionAPI,
     WebExtensionFactory,
+    WebFileDrag,
     WebFolderPickerProps,
     WebOpener,
     WebStorage,
+    WebTerminal,
+    WebTerminalOptions,
     WebTool,
     WebView,
     WidgetOptions,
@@ -41,6 +57,8 @@ import {
 
 const DEFAULT_ORDER = 100;
 
+const FILE_DRAG: WebFileDrag = Object.freeze({ set: FileDragUtil.set, has: FileDragUtil.has, get: FileDragUtil.get, paths: FileDragUtil.paths });
+
 /** One web extension that runs, and what it registered. */
 interface Running {
     loaded: LoadedWebExtension;
@@ -125,6 +143,10 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
     @Autowired(TaSettings)
     protected readonly settings: TaSettings;
 
+    /** Detached: TaLinks asks the openers of the extensions. */
+    @Autowired({ id: TaLinks, detached: true })
+    protected readonly links: TaLinks;
+
     @Autowired(TaNotices)
     protected readonly notices: TaNotices;
     @Autowired(TaState)
@@ -518,6 +540,9 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
             get remote(): TaRemoteServer {
                 return workbench.remote;
             },
+            get settings(): TaSettingsServer {
+                return workbench.settings;
+            },
             ui: {
                 setWidget: (key, component, options = {}) =>
                     register(() => (component ? run.widgets.set(key, { component, options }) : run.widgets.delete(key))),
@@ -536,6 +561,10 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
                 get language() {
                     return settings.state.language;
                 },
+                supportsWebview: DesktopUtil.has('webview'),
+                desktop: DesktopUtil.fileManager(),
+                fileDrag: FILE_DRAG,
+                debugWebview: DesktopUtil.debugWebview(),
                 openEditor: (editor, options) => this.openEditor(run, editor, options?.preserveFocus === true, options?.preview === true),
                 closeEditor: id => this.removeEditors(editor => editor.id === id && editor.extension === run.loaded.id),
                 pinEditor: id => {
@@ -574,6 +603,12 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
                 icons: WEB_ICONS,
                 CodeEditor: this.codeEditor,
                 DiffEditor: this.diffEditor,
+                // Ends with the extension.
+                createTerminal: (options?: WebTerminalOptions): WebTerminal => {
+                    const terminal = new DefaultWebTerminal(settings, (target, open) => void this.links.open(target, open), options);
+                    run.unsubscribes.push(() => terminal.dispose());
+                    return terminal;
+                },
                 Composer: this.composer,
                 Markdown,
                 Dialog: WebDialog,

package/src/browser/i18n/messages.ts

@@ -28,6 +28,10 @@ export const EN_MESSAGES = {
     'ta.link.trustHint': 'Pages of this host open without asking from now on; the list is in Settings.',
     'ta.link.copied': 'Link copied',
     'ta.link.notFound': '{path} is not there.',
+    'ta.terminal.openLink': 'Ctrl + click to open',
+    'ta.terminal.openLinkMac': 'Cmd + click to open',
+    'ta.terminal.openUrl': 'Ctrl + click to open, with Shift in your browser',
+    'ta.terminal.openUrlMac': 'Cmd + click to open, with Shift in your browser',
     'ta.link.noOpener': 'Nothing opens files: turn on the package @celljs/ta-workspace in Settings.',
     'ta.settings.links': 'Links',
     'ta.settings.trustedDomains': 'Trusted domains',
@@ -53,8 +57,14 @@ export const EN_MESSAGES = {
     'ta.connection.retryNow': 'Retry now',
     'ta.connection.back': 'Connected again',
     'ta.connection.notDone': 'Not done: the Ta service is not connected',
+    'ta.error.sessionNotFound': 'This conversation is no longer open; open it again from the list',
+    'ta.error.sessionLocked': 'This conversation is open in another Ta; close it there first',
+    'ta.error.tooManySessions': 'Too many conversations are open; close one and try again',
+    'ta.error.messageConflict': 'The message was not sent: it clashed with another; send it again',
+    'ta.error.modelNotFound': 'The model is not available; pick another or sign in to its service',
     'ta.connection.notDoneHint': 'Try again once the connection is back.',
     'ta.notices': 'Notifications',
+    'ta.notice.picture': 'Picture of the extension, such as a QR code to scan',
     'ta.packages.removeDetail': 'Its pages, cards and commands go with it.',
     'ta.packages.removed': 'Removed {name}',
     'ta.packages.reloaded': 'Extensions loaded again',
@@ -310,6 +320,8 @@ export const EN_MESSAGES = {
     'ta.composer.image.size': '{name} is larger than 5 MB.',
     'ta.composer.image.count': 'At most 8 images per message.',
     'ta.composer.filesUnavailable': 'File search is not available on this server yet',
+    'ta.composer.filter': 'Search',
+    'ta.composer.noMatch': 'Nothing matches',
     'ta.composer.noFiles': 'No matching file',
     'ta.composer.queue.steering': 'Steer',
     'ta.composer.queue.followUp': 'Queued',
@@ -490,6 +502,10 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.link.trustHint': '以后这个域名的网页不再询问，直接打开；可在设置中管理。',
     'ta.link.copied': '链接已复制',
     'ta.link.notFound': '{path} 不存在。',
+    'ta.terminal.openLink': 'Ctrl + 点击打开',
+    'ta.terminal.openLinkMac': 'Cmd + 点击打开',
+    'ta.terminal.openUrl': 'Ctrl + 点击打开，加按 Shift 在系统浏览器中打开',
+    'ta.terminal.openUrlMac': 'Cmd + 点击打开，加按 Shift 在系统浏览器中打开',
     'ta.link.noOpener': '没有能打开文件的包：请在设置中开启 @celljs/ta-workspace。',
     'ta.settings.links': '链接',
     'ta.settings.trustedDomains': '受信任的域名',
@@ -514,8 +530,14 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.connection.retryNow': '立即重试',
     'ta.connection.back': '已重新连接',
     'ta.connection.notDone': '没有完成：未连接到 Ta 服务',
+    'ta.error.sessionNotFound': '这个对话已关闭，请从列表里重新打开',
+    'ta.error.sessionLocked': '这个对话在另一个 Ta 里打开着，请先在那里关闭',
+    'ta.error.tooManySessions': '打开的对话太多了，请关掉一个再试',
+    'ta.error.messageConflict': '消息没有发出：与另一条消息冲突，请重新发送',
+    'ta.error.modelNotFound': '这个模型不可用，请换一个模型，或先登录它的服务',
     'ta.connection.notDoneHint': '连接恢复后再试一次。',
     'ta.notices': '通知',
+    'ta.notice.picture': '扩展给出的图像，如要扫描的二维码',
     'ta.packages.removeDetail': '它的页面、卡片和命令也会一起移除。',
     'ta.packages.removed': '已移除 {name}',
     'ta.packages.reloaded': '已重新加载扩展',
@@ -770,6 +792,8 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.composer.image.size': '{name} 超过 5 MB。',
     'ta.composer.image.count': '每条消息最多 8 张图片。',
     'ta.composer.filesUnavailable': '此服务暂不支持搜索文件',
+    'ta.composer.filter': '搜索',
+    'ta.composer.noMatch': '没有匹配的项',
     'ta.composer.noFiles': '没有匹配的文件',
     'ta.composer.queue.steering': '引导',
     'ta.composer.queue.followUp': '排队',

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

@@ -20,6 +20,8 @@ export interface NoticeOptions {
     key?: string;
     /** Stays until the user closes it. */
     sticky?: boolean;
+    /** A picture of cells under the message, dark ones true: a QR code an extension drew with characters. */
+    art?: boolean[][];
 }
 
 export interface Notice {
@@ -30,6 +32,7 @@ export interface Notice {
     action?: NoticeAction;
     key?: string;
     sticky?: boolean;
+    art?: boolean[][];
     /** How many times it came. */
     count: number;
 }

package/src/browser/notices/notices.spec.ts

@@ -48,13 +48,19 @@ describe('TaNoticesImpl', () => {
         expect(notices.state.notices).toHaveLength(1);
     });
 
-    it('says an error with its hint, and a lost connection once, whatever failed', () => {
+    it('says an error ta serve does not name with its message and hint', () => {
+        const notices = setup('zh-CN');
+        notices.error(new TaRemoteError('No such file.', TaErrorCode.COMMAND_FAILED, 'Fix it.'));
+        expect(notices.state.notices.map(({ message, detail }) => ({ message, detail }))).toEqual([{ message: 'No such file.', detail: 'Fix it.' }]);
+    });
+
+    it('says a failure of ta serve in the language of the page, and a lost connection once, whatever failed', () => {
         const notices = setup('zh-CN');
         notices.error(new TaRemoteError('Locked.', TaErrorCode.SESSION_LOCKED, 'Close it there first.'));
         notices.error(new TaRemoteError('Not connected to ta serve.', TaErrorCode.CONNECTION_LOST));
         notices.error(new TaRemoteError('The connection to ta serve was lost.', TaErrorCode.CONNECTION_LOST));
         expect(notices.state.notices.map(({ message, detail, level, count }) => ({ message, detail, level, count }))).toEqual([
-            { message: 'Locked.', detail: 'Close it there first.', level: 'error', count: 1 },
+            { message: '这个对话在另一个 Ta 里打开着，请先在那里关闭', detail: 'Locked.', level: 'error', count: 1 },
             { message: '没有完成：未连接到 Ta 服务', detail: '连接恢复后再试一次。', level: 'error', count: 2 },
         ]);
     });

package/src/browser/notices/notices.ts

@@ -1,6 +1,6 @@
 import { Autowired, Component } from '@celljs/core';
 import { TaErrorCode } from '@celljs/ta-protocol';
-import { message } from '../i18n/messages';
+import { type MessageId, message } from '../i18n/messages';
 import { TaSettings } from '../settings/settings-protocol';
 import {
     type ConfirmOptions,
@@ -50,6 +50,15 @@ export namespace NoticesUtil {
         return kept;
     }
 
+    /** The failures of ta serve the user can read about in the language of the page: what they mean. */
+    export const LOCALIZED: Partial<Record<string, MessageId>> = {
+        [TaErrorCode.SESSION_NOT_FOUND]: 'ta.error.sessionNotFound',
+        [TaErrorCode.SESSION_LOCKED]: 'ta.error.sessionLocked',
+        [TaErrorCode.TOO_MANY_SESSIONS]: 'ta.error.tooManySessions',
+        [TaErrorCode.MESSAGE_CONFLICT]: 'ta.error.messageConflict',
+        [TaErrorCode.MODEL_NOT_FOUND]: 'ta.error.modelNotFound',
+    };
+
     /** What an error says: its message, and for a failure ta serve names (TaRemoteError) its hint. */
     export function describe(cause: unknown): { message: string; detail?: string; code?: string } {
         if (cause instanceof Error) {
@@ -91,6 +100,7 @@ export class TaNoticesImpl implements TaNotices {
             action: options.action,
             key,
             sticky: options.sticky,
+            art: options.art,
             count: same && same.message === text ? same.count + 1 : 1,
         };
         this.update({ notices: NoticesUtil.keep([...this.current.notices.filter(other => other !== same), notice]) });
@@ -114,6 +124,12 @@ export class TaNoticesImpl implements TaNotices {
                 detail: message(language, 'ta.connection.notDoneHint'),
             });
         }
+        const known = code ? NoticesUtil.LOCALIZED[code] : undefined;
+        if (known) {
+            // ta serve speaks English to its clients; the user reads what the error means, its words beneath.
+            const language = this.settings.state.language;
+            return this.notify(message(language, known), { ...options, level: 'error', detail: text });
+        }
         return this.notify(text, { detail, ...options, level: 'error' });
     }
 

package/src/browser/style/conversation.ts

@@ -23,7 +23,16 @@ export const CONVERSATION_STYLE = `
 .ta-footer-usage { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px; white-space: nowrap; }
 .ta-footer-usage > span { display: inline-flex; align-items: center; gap: 1px; }
 .ta-working { display: flex; align-items: center; gap: 8px; color: var(--ta-text); font-size: 13px; font-weight: 500; }
-.ta-statusline { font-size: 11.5px; color: var(--ta-muted); padding: 0 4px; }
+.ta-statusline { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; font-size: 11.5px; color: var(--ta-secondary); }
+.ta-statusline-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ta-chip); white-space: nowrap; }
+.ta-statusline-label { color: var(--ta-text); font-weight: 500; }
+.ta-statusline-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ta-statusline-part + .ta-statusline-part::before { content: ''; width: 1px; height: 10px; margin-right: 2px; background: var(--ta-border-field); }
+.ta-statusline-part.ta-tone-error { color: var(--ta-red); }
+.ta-statusline-part > .ta-status { width: 8px; }
+.ta-widget { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ta-border); background: var(--ta-side); }
+.ta-widget-text { margin: 0; max-width: 100%; overflow-x: auto; font-family: var(--ta-mono); font-size: 12px; line-height: 1.5; color: var(--ta-secondary); white-space: pre; }
+.ta-widget-art { width: 180px; height: auto; border-radius: 8px; }
 .ta-console-composer { position: relative; }
 .ta-console-box { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--ta-border-field); background: var(--ta-input); box-shadow: var(--ta-shadow-composer); transition: border-color 150ms; }
 .ta-console-box:focus-within { border-color: var(--ta-border-focus); }
@@ -68,6 +77,12 @@ export const CONVERSATION_STYLE = `
 .ta-code-editor { position: relative; flex: 1; width: 100%; height: 100%; min-height: 0; background: var(--ta-code); }
 .ta-code-editor-host { position: absolute; inset: 0; }
 .ta-code-editor-state { position: absolute; inset: 0; padding: 16px; color: var(--ta-muted); font-size: 13px; }
+/* A terminal (WebTerminal) fills the element it is attached to, which must have a size and position: relative. */
+.ta-terminal { position: absolute; inset: 0; background: var(--ta-code); }
+/* The padding is the terminal's own: xterm.js fits its rows and columns inside it. */
+.ta-terminal .xterm { height: 100%; padding: 6px 0 4px 12px; }
+.ta-terminal .xterm-viewport { background: transparent !important; }
+.ta-terminal .xterm-helper-textarea { caret-color: transparent; }
 .ta-code pre { margin: 0; padding: 10px 12px; overflow-x: auto; color: var(--ta-body); }
 .ta-code-actions { display: flex; align-items: center; gap: 2px; }
 .ta-code-actions .ta-icon-button { width: 24px; height: 24px; border-radius: 6px; color: var(--ta-muted); }