@celljs/ta-web 4.6.1 → 4.8.0

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

@@ -1,5 +1,14 @@
 import { Autowired, Component, Optional, PostConstruct } from '@celljs/core';
-import type { TaEvent, TaPackageServer, 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)
@@ -474,11 +496,18 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
     protected readonly listDirectory = (directory: string) => this.workbench.workspace.listDirectory('.', directory);
     /** The message box, whose button of the directory lists those of the server. */
     protected readonly composer = (props: WebComposerProps) =>
-        React.createElement(WebComposer, { ...props, notices: this.notices, listDirectory: this.listDirectory, serverCwd: this.workbench.state.server?.cwd });
+        React.createElement(WebComposer, {
+            ...props,
+            notices: this.notices,
+            listDirectory: this.listDirectory,
+            serverCwd: this.workbench.state.server?.cwd,
+            remote: this.workbench,
+        });
     protected readonly folderPicker = ({ initial, onPick, onClose }: WebFolderPickerProps) =>
         React.createElement(FolderPicker, {
             list: this.listDirectory,
             initial: initial || this.workbench.state.server?.cwd || '.',
+            remote: this.workbench,
             onPick: async (path: string) => onPick(path),
             onClose,
         });
@@ -508,6 +537,12 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
             get packages(): TaPackageServer {
                 return workbench.packages;
             },
+            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))),
@@ -526,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 => {
@@ -564,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',
@@ -44,17 +48,23 @@ export const EN_MESSAGES = {
     'ta.editor.discardClose': 'Close without saving',
     'ta.online': 'Online',
     'ta.reconnecting': 'Reconnecting',
-    'ta.unreachable': 'ta serve is not running. Start it with ta serve; this page connects by itself.',
+    'ta.unreachable': 'The Ta service is not running. Start it with ta serve in a terminal; this page connects by itself.',
     'ta.pwa.install': 'Install as an app',
-    // The connection to ta serve, and the notices of the page
-    'ta.connection.lost': 'The connection to ta serve dropped.',
+    // The connection to the Ta service (ta serve), and the notices of the page
+    'ta.connection.lost': 'The connection to the Ta service dropped.',
     'ta.connection.retryIn': 'Trying again in {seconds}s',
     'ta.connection.retrying': 'Connecting…',
     'ta.connection.retryNow': 'Retry now',
     'ta.connection.back': 'Connected again',
-    'ta.connection.notDone': 'Not done: ta serve is not connected',
+    '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',
@@ -62,10 +72,10 @@ export const EN_MESSAGES = {
     'ta.home': 'Home',
     'ta.menu': 'Menu',
     'ta.signin.title': 'Connect to Ta',
-    'ta.signin.hint': 'Run ta serve --web, which opens this page signed in, or paste the token from ~/.ta/agent/serve.json.',
+    'ta.signin.hint': 'Run ta serve --web in a terminal, which opens this page signed in, or paste the token from ~/.ta/agent/serve.json.',
     'ta.signin.token': 'Access token',
     'ta.signin.connect': 'Connect',
-    'ta.signin.refused': 'ta serve did not accept the token, or it is not running.',
+    'ta.signin.refused': 'The Ta service did not accept the token, or it is not running.',
     'ta.signin.pairHint': 'On your computer, run ta pair <relay> and paste the link it prints here. What goes through the relay is encrypted end to end.',
     'ta.signin.pairing': 'Pairing link',
     'ta.signin.pairRefused': 'Your Ta does not know this device: it may have been unpaired. Run ta pair again.',
@@ -197,6 +207,36 @@ export const EN_MESSAGES = {
     'ta.folder.empty': 'No folders here.',
     'ta.folder.failed': 'Cannot open {path}.',
     'ta.folder.open': 'Use this directory',
+    'ta.remote.local': 'This computer',
+    'ta.remote.add': 'Add a host',
+    'ta.remote.addHint': 'A Host of ~/.ssh/config, user@host:port, or an ssh command',
+    'ta.remote.connected': 'Connected',
+    'ta.remote.failed': 'Cannot connect to {host}',
+    'ta.remote.title': 'Remote hosts',
+    'ta.remote.description': 'Conversations can work in directories of these machines. Ta connects with the ssh of this computer and its ~/.ssh/config.',
+    'ta.remote.none': 'No hosts yet.',
+    'ta.remote.invalid': '{host} names no host: write a Host of ~/.ssh/config, user@host:port, or ssh user@host -p port.',
+    'ta.remote.options': 'Ta takes no {options} here: put it in a Host of ~/.ssh/config, and add that Host.',
+    'ta.remote.disconnected': 'Not connected',
+    'ta.remote.fromConfig': 'From ~/.ssh/config',
+    'ta.remote.added': 'Added',
+    'ta.remote.connect': 'Connect',
+    'ta.remote.disconnect': 'Disconnect',
+    'ta.remote.connectedTo': 'Connected to {host}',
+    'ta.remote.remove': 'Remove {host}',
+    'ta.remote.port': 'Port {port} of {host}',
+    'ta.remote.closePort': 'Stop forwarding',
+    'ta.remote.connecting': 'Connecting to {host}…',
+    'ta.remote.step.connecting': 'Connecting to {host}…',
+    'ta.remote.step.checking': 'Looking at {host}…',
+    'ta.remote.step.installing-node': 'Installing Node.js {detail} on {host}…',
+    'ta.remote.step.copying-server': 'Copying Ta to {host}…',
+    'ta.remote.step.starting': 'Starting on {host}…',
+    'ta.remote.lost': 'Lost the connection to {host}; it comes back with the next step.',
+    'ta.remote.prompt.title': 'Connect to {host}',
+    'ta.remote.prompt.trust': 'Trust and connect',
+    'ta.remote.prompt.continue': 'Continue',
+    'ta.remote.forwarded': 'Port {port} of {host} is at {local} here',
     'ta.chat.search': 'Search chats',
     'ta.chat.all': 'All',
     'ta.chat.noMatch': 'No chat matches.',
@@ -280,12 +320,15 @@ 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',
     'ta.composer.queue.takeBack': 'Take back',
     'ta.composer.queue.takeBackTitle': 'Take the waiting messages back into the box',
     'ta.account': 'Account',
+    'ta.account.service': 'Ta service',
     // The settings view and the menu of the gear
     'ta.manage': 'Manage',
     'ta.manage.packages': 'Extensions',
@@ -303,7 +346,7 @@ export const EN_MESSAGES = {
     'ta.settings.scopeHint.user': 'In {file}, for every project.',
     'ta.settings.scopeHint.project': 'In {file}; overrides the user settings in this project.',
     'ta.settings.untrusted': 'Ta does not trust this project yet, so it ignores its settings. Run ta in it once and trust it to change them here.',
-    'ta.settings.offline': 'Connect to ta serve to see these settings.',
+    'ta.settings.offline': 'Connect to the Ta service to see these settings.',
     'ta.settings.loading': 'Reading the settings…',
     'ta.settings.failed': 'Not saved: {error}',
     'ta.settings.default': 'Default ({value})',
@@ -459,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': '受信任的域名',
@@ -475,16 +522,22 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.editor.discardClose': '不保存并关闭',
     'ta.online': '在线',
     'ta.reconnecting': '重连中',
-    'ta.unreachable': 'ta serve 没有在运行。运行 ta serve 后，本页会自动连上。',
+    'ta.unreachable': 'Ta 服务没有在运行。在终端运行 ta serve 启动它，本页会自动连上。',
     'ta.pwa.install': '安装为应用',
-    'ta.connection.lost': '与 ta serve 的连接断开了',
+    'ta.connection.lost': '与 Ta 服务的连接断开了',
     'ta.connection.retryIn': '{seconds} 秒后重试',
     'ta.connection.retrying': '正在连接…',
     'ta.connection.retryNow': '立即重试',
     'ta.connection.back': '已重新连接',
-    'ta.connection.notDone': '没有完成：ta serve 未连接',
+    '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': '已重新加载扩展',
@@ -492,10 +545,10 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.home': '首页',
     'ta.menu': '菜单',
     'ta.signin.title': '连接 Ta',
-    'ta.signin.hint': '运行 ta serve --web 会自动以登录状态打开本页；也可以粘贴 ~/.ta/agent/serve.json 里的 token。',
+    'ta.signin.hint': '在终端运行 ta serve --web，会自动打开本页并登录；也可以粘贴 ~/.ta/agent/serve.json 里的 token。',
     'ta.signin.token': '访问 token',
     'ta.signin.connect': '连接',
-    'ta.signin.refused': 'ta serve 没有接受这个 token，或者它没有在运行。',
+    'ta.signin.refused': 'Ta 服务没有接受这个 token，或者它没有在运行。',
     'ta.signin.pairHint': '在电脑上运行 ta pair <Relay 地址>，把它打印的链接粘贴到这里。经 Relay 的内容端到端加密。',
     'ta.signin.pairing': '配对链接',
     'ta.signin.pairRefused': '你的 Ta 不认识这台设备，可能已取消配对。请重新运行 ta pair。',
@@ -626,6 +679,36 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.folder.empty': '这里没有子目录。',
     'ta.folder.failed': '打不开 {path}。',
     'ta.folder.open': '使用此目录',
+    'ta.remote.local': '本机',
+    'ta.remote.add': '添加主机',
+    'ta.remote.addHint': '~/.ssh/config 里的主机、user@host:port，或 ssh 命令',
+    'ta.remote.connected': '已连接',
+    'ta.remote.failed': '连不上 {host}',
+    'ta.remote.title': '远程主机',
+    'ta.remote.description': '对话可以在这些机器的目录里工作。Ta 用本机的 ssh 和 ~/.ssh/config 连接。',
+    'ta.remote.none': '还没有主机。',
+    'ta.remote.invalid': '{host} 不是主机：写 ~/.ssh/config 里的 Host、user@host:port，或 ssh user@host -p 端口。',
+    'ta.remote.options': '这里不支持 {options}：把它写进 ~/.ssh/config 的一个 Host 里，再添加那个 Host。',
+    'ta.remote.disconnected': '未连接',
+    'ta.remote.fromConfig': '来自 ~/.ssh/config',
+    'ta.remote.added': '手动添加',
+    'ta.remote.connect': '连接',
+    'ta.remote.disconnect': '断开',
+    'ta.remote.connectedTo': '已连接 {host}',
+    'ta.remote.remove': '移除 {host}',
+    'ta.remote.port': '{host} 的 {port} 端口',
+    'ta.remote.closePort': '停止转发',
+    'ta.remote.connecting': '正在连接 {host}…',
+    'ta.remote.step.connecting': '正在连接 {host}…',
+    'ta.remote.step.checking': '正在检查 {host}…',
+    'ta.remote.step.installing-node': '正在为 {host} 安装 Node.js {detail}…',
+    'ta.remote.step.copying-server': '正在把 Ta 复制到 {host}…',
+    'ta.remote.step.starting': '正在 {host} 上启动…',
+    'ta.remote.lost': '与 {host} 的连接断开了，下次操作时会自动重连。',
+    'ta.remote.prompt.title': '连接 {host}',
+    'ta.remote.prompt.trust': '信任并连接',
+    'ta.remote.prompt.continue': '继续',
+    'ta.remote.forwarded': '{host} 的 {port} 端口已转发到本机 {local}',
     'ta.chat.search': '搜索对话',
     'ta.chat.all': '全部',
     'ta.chat.noMatch': '没有匹配的对话。',
@@ -709,12 +792,15 @@ 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': '排队',
     'ta.composer.queue.takeBack': '撤回',
     'ta.composer.queue.takeBackTitle': '把排队的消息取回输入框',
     'ta.account': '账号',
+    'ta.account.service': 'Ta 服务',
     // The settings view and the menu of the gear
     'ta.manage': '管理',
     'ta.manage.packages': '扩展',
@@ -732,7 +818,7 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     'ta.settings.scopeHint.user': '保存在 {file}，对所有项目生效。',
     'ta.settings.scopeHint.project': '保存在 {file}，在此项目中覆盖用户设置。',
     'ta.settings.untrusted': 'Ta 还没有信任这个项目，因此不会读取它的设置。先在该目录运行一次 ta 并信任它，再回来修改。',
-    'ta.settings.offline': '连接 ta serve 后才能查看这些设置。',
+    'ta.settings.offline': '连接到 Ta 服务后才能查看这些设置。',
     'ta.settings.loading': '正在读取设置…',
     'ta.settings.failed': '未保存：{error}',
     'ta.settings.default': '默认（{value}）',

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,14 +48,20 @@ 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 serve 未连接', detail: '连接恢复后再试一次。', level: 'error', count: 2 },
+            { 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/base.ts

@@ -80,7 +80,12 @@ export const BASE_STYLE = `
 }
 * { box-sizing: border-box; }
 html, body, #cell-root, #root { height: 100%; margin: 0; }
-* { overscroll-behavior: none; }
+/* The page and its scrolling areas do not bounce at the ends. Only scrolling areas of their own: on any
+   other element (one with overflow: hidden is a scroll container too) it stops the wheel from reaching
+   the area under it, and nothing scrolls while the pointer is over a card or a code block. */
+html, body, .ta-scroll, .ta-chat-scroll, .ta-side-scroll, .ta-rail-items, .ta-side-view-body, .ta-editor-body,
+.ta-workbench-launcher, .ta-workbench-menu, .ta-settings-scroll, .ta-settings-toc, .ta-plus-items, .ta-commands,
+.ta-folder-list, .ta-auth-list { overscroll-behavior: none; }
 body { background: var(--ta-main); color: var(--ta-text); font: 14px/1.6 var(--ta-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
 button, input, select, textarea { font: inherit; color: inherit; }
 button { cursor: pointer; }

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); }

package/src/browser/style/layout.ts

@@ -93,6 +93,8 @@ export const LAYOUT_STYLE = `
 .ta-run-tokens { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ta-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
 .ta-run-tokens > span { display: inline-flex; align-items: center; gap: 1px; }
 .ta-run-line { display: flex; min-width: 0; min-height: 22px; padding-left: 6px; margin-top: -6px; }
+/* Under the open steps of a turn the line is one more step: the same pitch, its dot on the string's line. */
+.ta-thread-item:has(> .ta-message > .ta-process:last-child > .ta-process-steps) + .ta-run-line { margin-top: -18px; padding-left: 4.5px; }
 .ta-status-waiting::before { background: var(--ta-yellow); }
 /* On the head of a turn the face of ta already shows that it works. */
 .ta-turn-head .ta-run-status > .ta-status { display: none; }
@@ -144,6 +146,9 @@ export const LAYOUT_STYLE = `
 .ta-plus-line { height: 1px; margin: 5px 8px; border: 0; background: var(--ta-border-muted); flex: none; }
 .ta-plus-back { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; margin-bottom: 4px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--ta-border-muted); border-radius: 9px 9px 0 0; background: none; color: var(--ta-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
 .ta-plus-back:hover { color: var(--ta-text); }
+.ta-plus-search { box-sizing: border-box; width: 100%; height: 32px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--ta-border); border-radius: 9px; background: var(--ta-main); color: var(--ta-text); font: inherit; font-size: 13px; outline: none; }
+.ta-plus-search:focus { border-color: var(--ta-border-strong, var(--ta-secondary)); }
+.ta-plus-empty { padding: 10px 8px; color: var(--ta-secondary); font-size: 12.5px; }
 @keyframes ta-plus-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 .ta-console-composer textarea { padding: 5px 2px; }
 /* A long placeholder stays on one line, so the empty box keeps its height beside the controls of the +. */
@@ -169,20 +174,25 @@ export const LAYOUT_STYLE = `
 .ta-queue-back { align-self: flex-end; color: var(--ta-muted); }
 .ta-queue-back:hover { color: var(--ta-text); }
 .ta-account { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
-.ta-account-button { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ta-border-field); background: var(--ta-raised); color: var(--ta-secondary); padding: 0; transition: background 120ms, color 120ms, border-color 120ms; }
-.ta-account-button:hover, .ta-account-button.ta-on { color: var(--ta-text); border-color: var(--ta-border-focus); }
-.ta-account-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ta-side); background: var(--ta-muted); }
-.ta-account-dot.ta-ok { background: var(--ta-green); }
-.ta-account-dot.ta-warn { background: var(--ta-yellow); }
-.ta-account-menu { position: absolute; left: calc(100% + 10px); bottom: 0; z-index: 45; width: 264px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--ta-border); background: var(--ta-side); box-shadow: var(--ta-shadow-pop); animation: ta-fade 120ms ease-out; }
-.ta-account-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-width: 0; }
-.ta-account-figure { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ta-raised); color: var(--ta-secondary); }
-.ta-account-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
-.ta-account-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
-.ta-account-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 400; color: var(--ta-muted); }
-.ta-account-sub { font-size: 11.5px; color: var(--ta-muted); }
+.ta-account-button { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; padding: 0; transition: background 150ms; }
+.ta-account-button:hover, .ta-account-button.ta-on { background: var(--ta-hover); }
+.ta-account-figure { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ta-green) 14%, var(--ta-main)); color: color-mix(in srgb, var(--ta-green) 75%, var(--ta-text)); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; user-select: none; }
+.ta-account-figure.ta-large { width: 36px; height: 36px; font-size: 15px; }
+.ta-account-dot { position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ta-yellow); box-shadow: 0 0 0 2px var(--ta-side); }
+.ta-account-menu { position: absolute; left: calc(100% + 10px); bottom: 0; z-index: 45; width: 248px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--ta-border); background: var(--ta-side); box-shadow: var(--ta-shadow-pop); animation: ta-fade 120ms ease-out; }
+.ta-account-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; min-width: 0; }
+.ta-account-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
+.ta-account-title { font-size: 13.5px; font-weight: 600; color: var(--ta-text); }
+.ta-account-sub { font-size: 12px; color: var(--ta-muted); }
+.ta-account-service { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 2px 2px; padding: 0 10px; border-radius: 8px; background: var(--ta-raised); font-size: 12.5px; color: var(--ta-secondary); }
+.ta-account-service-name { flex: 1; min-width: 0; }
+.ta-account-service-state { flex: none; font-size: 12px; color: var(--ta-muted); font-variant-numeric: tabular-nums; }
+.ta-account-state { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ta-muted); }
+.ta-account-state.ta-ok { background: var(--ta-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ta-green) 18%, transparent); }
+.ta-account-state.ta-warn { background: var(--ta-yellow); }
 .ta-account-sep { height: 1px; margin: 4px 2px; background: var(--ta-border-muted); }
-.ta-account-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; color: var(--ta-text); }
+.ta-account-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; color: var(--ta-text); }
+.ta-account-item > svg, .ta-account-item > .ta-icon { flex: none; color: var(--ta-secondary); }
 .ta-account-item:hover { background: var(--ta-hover); }
 .ta-account-item.ta-danger { color: var(--ta-red); }
 @media (max-width: 860px) {
@@ -250,7 +260,7 @@ export const LAYOUT_STYLE = `
 .ta-web-dialog .ta-modal-title { font-size: 16px; }
 .ta-folder-bar { display: flex; align-items: center; gap: 6px; }
 .ta-folder-bar .ta-field input { font-family: var(--ta-mono); font-size: 12.5px; }
-.ta-folder-list { list-style: none; flex: 1; min-height: 180px; overflow-y: auto; margin: 0; padding: 4px; border: 1px solid var(--ta-border-muted); border-radius: 10px; }
+.ta-folder-list { list-style: none; flex: none; height: min(340px, 44vh); overflow-y: auto; margin: 0; padding: 4px; border: 1px solid var(--ta-border-muted); border-radius: 10px; }
 .ta-folder-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ta-body); font-size: 13px; text-align: left; }
 .ta-folder-item:hover { background: var(--ta-hover); color: var(--ta-text); }
 .ta-folder-item > .ta-icon:first-child, .ta-folder-chevron { color: var(--ta-muted); }
@@ -258,7 +268,35 @@ export const LAYOUT_STYLE = `
 .ta-folder-item:hover .ta-folder-chevron { opacity: 1; }
 .ta-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ta-folder-note { display: flex; justify-content: center; padding: 28px 8px; color: var(--ta-muted); font-size: 12.5px; }
-.ta-folder-failed { color: var(--ta-red); font-size: 12.5px; }
+.ta-folder-failed { color: var(--ta-red); font-size: 12.5px; overflow-wrap: anywhere; }
+.ta-folder-note { gap: 8px; align-items: center; }
+.ta-folder-step { color: var(--ta-secondary); }
+.ta-folder-unreachable { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; font-size: 13px; color: var(--ta-text); }
+.ta-folder-unreachable span { max-width: 100%; color: var(--ta-muted); font-family: var(--ta-mono); font-size: 12px; overflow-wrap: anywhere; }
+/* The machines of the picker: this one, the hosts of ssh, + another */
+.ta-modal.ta-folder { width: min(640px, 100%); }
+.ta-folder-machines { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0 0 2px; gap: 6px; scrollbar-width: none; }
+.ta-folder-machines::-webkit-scrollbar { display: none; }
+.ta-folder-machines .ta-icon-button { flex: none; width: 28px; height: 28px; border-radius: 14px; }
+.ta-folder-add input { width: 230px; height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--ta-border-field); background: var(--ta-input); color: var(--ta-text); font-size: 12.5px; outline: none; }
+.ta-folder-add input:focus { border-color: var(--ta-border-focus); }
+.ta-folder-add input[aria-invalid='true'] { border-color: var(--ta-red); }
+.ta-folder-add input { width: 300px; }
+.ta-remote-state { display: inline-flex; align-items: center; gap: 6px; }
+.ta-remote-light { width: 7px; height: 7px; border-radius: 50%; background: var(--ta-border-field); flex: none; }
+.ta-remote-light.ta-on { background: var(--ta-green); }
+.ta-remote-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ta-green); flex: none; }
+/* The host of a directory of another machine, before its name */
+.ta-host-tag { display: inline-flex; align-items: center; flex: none; max-width: 120px; height: 17px; padding: 0 6px; margin-right: 5px; border-radius: 5px; background: var(--ta-hover-strong); color: var(--ta-secondary); font-size: 11px; font-weight: 500; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: 1px; }
+.ta-cwd-chip .ta-host-tag { margin: 0 0 0 2px; }
+.ta-cwd-chip .ta-ellipsis { min-width: 0; }
+/* What ssh asks, and the line while a host connects */
+.ta-remote-prompt { width: min(440px, 100%); gap: 12px; }
+.ta-remote-prompt .ta-confirm-title { display: flex; align-items: center; gap: 8px; }
+.ta-remote-message { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ta-hover); color: var(--ta-body); font-family: var(--ta-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; }
+.ta-remote-status { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top) + var(--ta-titlebar, 0px)); z-index: 65; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--ta-border); background: var(--ta-side); box-shadow: var(--ta-shadow-pop); color: var(--ta-secondary); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ta-fade 160ms ease-out; }
+/* The picker says it itself */
+body:has(.ta-folder) .ta-remote-status { display: none; }
 @media (max-width: 860px) {
     .ta-modal-scrim { align-items: flex-end; padding: 0; }
     .ta-modal { max-height: 88dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: ta-up 260ms var(--ta-ease); }

package/src/browser/style/shell.ts

@@ -133,6 +133,7 @@ export const SHELL_STYLE = `
 .ta-toast-message { color: var(--ta-text); overflow-wrap: anywhere; white-space: pre-wrap; }
 .ta-toast-count { margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--ta-chip); color: var(--ta-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
 .ta-toast-detail { color: var(--ta-secondary); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
+.ta-toast-art { align-self: flex-start; width: 200px; height: auto; margin-top: 8px; border-radius: 10px; }
 .ta-toast-action { align-self: flex-start; margin-top: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ta-border-field); background: transparent; font-size: 12px; font-weight: 500; transition: background 120ms; }
 .ta-toast-action:hover { background: var(--ta-hover); }
 .ta-toast .ta-toast-close { width: 24px; height: 24px; margin-top: -1px; color: var(--ta-muted); }

package/src/browser/terminal/canvas-font.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test';
+import { CanvasFontFix } from './canvas-font';
+
+/** A context that, as Chromium 156, keeps its font when the new one starts with a space. */
+class StrictContext {
+    protected value = '10px sans-serif';
+    get font(): string {
+        return this.value;
+    }
+    set font(font: string) {
+        if (!/^\s/.test(font)) {
+            this.value = font.replace(/^(normal )+/, '');
+        }
+    }
+}
+
+describe('CanvasFontFix', () => {
+    it('sets the font xterm.js meant, and leaves a valid one as it is', () => {
+        const context = new StrictContext();
+        context.font = ' normal 24px Menlo';
+        expect(context.font).toBe('10px sans-serif');
+        CanvasFontFix.install([StrictContext.prototype, undefined]);
+        CanvasFontFix.install([StrictContext.prototype]);
+        context.font = ' normal 24px Menlo';
+        expect(context.font).toBe('24px Menlo');
+        context.font = 'italic bold 12px monospace';
+        expect(context.font).toBe('italic bold 12px monospace');
+    });
+});