@celljs/ta-web 4.6.1 → 4.7.0

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

@@ -5,7 +5,7 @@ import { useT } from '../i18n/use-t';
 import type { TaNotices } from '../notices/notices-protocol';
 import { ComposerUtil } from '../util/composer';
 import { ComposerBox } from './composer-box';
-import { DirectoryButton } from './folder-picker';
+import { DirectoryButton, type FolderPickerRemote } from './folder-picker';
 
 export interface WebComposerHostProps extends WebComposerProps {
     /** Where a failure to send goes. */
@@ -14,10 +14,24 @@ export interface WebComposerHostProps extends WebComposerProps {
     listDirectory?(directory: string): Promise<TaDirEntry[]>;
     /** The directory of ta serve: that of a `cwd` left empty. */
     serverCwd?: string;
+    /** The hosts of ssh, which the button offers too. */
+    remote?: FolderPickerRemote;
 }
 
 /** The message box as web extensions get it (`pi.ui.Composer`): text only, `@` for the names they give; a failure is a notice of the page. */
-export function WebComposer({ notices, placeholder, onSend, mentions, mentionLabel, actions, cwd, onPickCwd, listDirectory, serverCwd }: WebComposerHostProps) {
+export function WebComposer({
+    notices,
+    placeholder,
+    onSend,
+    mentions,
+    mentionLabel,
+    actions,
+    cwd,
+    onPickCwd,
+    listDirectory,
+    serverCwd,
+    remote,
+}: WebComposerHostProps) {
     const t = useT();
     const [query, setQuery] = React.useState<string>();
     return (
@@ -40,7 +54,7 @@ export function WebComposer({ notices, placeholder, onSend, mentions, mentionLab
             }
             mentionLabel={mentions ? mentionLabel : undefined}
             actions={actions}
-            beside={onPickCwd && listDirectory && <DirectoryButton cwd={cwd || serverCwd || ''} list={listDirectory} onPick={onPickCwd} />}
+            beside={onPickCwd && listDirectory && <DirectoryButton cwd={cwd || serverCwd || ''} list={listDirectory} remote={remote} onPick={onPickCwd} />}
             onError={cause => notices.error(cause)}
         />
     );

package/src/browser/components/working-directory.tsx

@@ -18,5 +18,5 @@ export function WorkingDirectoryPicker({ onClose }: { onClose(): void }) {
             notices.error(error);
         }
     };
-    return <FolderPicker list={list} initial={workbench.server?.cwd ?? '.'} onPick={pick} onClose={onClose} />;
+    return <FolderPicker list={list} initial={workbench.server?.cwd ?? '.'} remote={bench} onPick={pick} onClose={onClose} />;
 }

package/src/browser/extension/icons.ts

@@ -62,11 +62,13 @@ import {
     Save,
     ScrollText,
     Search,
+    Server,
     Sparkles,
     Square,
     SquareMinus,
     SquarePlus,
     SquareTerminal,
+    Store,
     Text,
     Trash2,
     Undo2,
@@ -144,11 +146,13 @@ export const WEB_ICONS: Readonly<Record<string, WebIcon>> = Object.freeze({
     Save,
     ScrollText,
     Search,
+    Server,
     Sparkles,
     Square,
     SquareMinus,
     SquarePlus,
     SquareTerminal,
+    Store,
     Text,
     Trash2,
     Undo2,

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

@@ -1,4 +1,4 @@
-import type { TaEvent, TaPackageServer, TaServer, TaSessionInfo, TaTerminalServer, TaWorkspaceServer } from '@celljs/ta-protocol';
+import type { TaEvent, TaPackageServer, TaRemoteServer, TaServer, TaSessionInfo, 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';
@@ -13,12 +13,14 @@ export interface WebExtensionAPI {
     readonly React: typeof React;
     /** The sessions of ta serve, for what the rest of the API does not do: the commands of pi's RPC mode. */
     readonly server: TaServer;
-    /** The files and programs of a directory on the machine of ta serve. */
+    /** The files and programs of a directory, on the machine of ta serve or of an `ssh://` directory. */
     readonly workspace: TaWorkspaceServer;
     /** Shells; their output comes by {@link onTerminalData}. */
     readonly terminals: TaTerminalServer;
     /** The packages pi loads; for the data of the extension's own package, {@link storage}. */
     readonly packages: TaPackageServer;
+    /** The other machines of `ssh://` directories (TaLocation): their ports, for a page served there. */
+    readonly remote: TaRemoteServer;
     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;

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

@@ -1,5 +1,5 @@
 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, TaTerminalServer, TaWebExtensionInfo, TaWorkspaceServer } from '@celljs/ta-protocol';
 import * as React from 'react';
 import { CodeEditor } from '../components/code-editor';
 import { DiffEditor } from '../components/diff-editor';
@@ -474,11 +474,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 +515,9 @@ export class TaWebExtensionsImpl implements TaWebExtensions {
             get packages(): TaPackageServer {
                 return workbench.packages;
             },
+            get remote(): TaRemoteServer {
+                return workbench.remote;
+            },
             ui: {
                 setWidget: (key, component, options = {}) =>
                     register(() => (component ? run.widgets.set(key, { component, options }) : run.widgets.delete(key))),

package/src/browser/i18n/messages.ts

@@ -44,15 +44,15 @@ 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.connection.notDoneHint': 'Try again once the connection is back.',
     'ta.notices': 'Notifications',
     'ta.packages.removeDetail': 'Its pages, cards and commands go with it.',
@@ -62,10 +62,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 +197,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.',
@@ -286,6 +316,7 @@ export const EN_MESSAGES = {
     '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 +334,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})',
@@ -475,14 +506,14 @@ 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.connection.notDoneHint': '连接恢复后再试一次。',
     'ta.notices': '通知',
     'ta.packages.removeDetail': '它的页面、卡片和命令也会一起移除。',
@@ -492,10 +523,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 +657,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': '没有匹配的对话。',
@@ -715,6 +776,7 @@ export const ZH_MESSAGES: Record<MessageId, string> = {
     '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 +794,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.spec.ts

@@ -55,7 +55,7 @@ describe('TaNoticesImpl', () => {
         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: '连接恢复后再试一次。', level: 'error', count: 2 },
         ]);
     });
 

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/layout.ts

@@ -169,20 +169,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 +255,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 +263,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/util/message.spec.ts

@@ -26,6 +26,8 @@ describe('MessageUtil', () => {
         expect(MessageUtil.basename('/home/me/project/')).toBe('project');
         expect(MessageUtil.shortPath('/home/me/work/project')).toBe('…/work/project');
         expect(MessageUtil.shortPath('/srv')).toBe('/srv');
+        expect(MessageUtil.shortPath('ssh://dev/data/my/workspace')).toBe('dev:…/my/workspace');
+        expect(MessageUtil.shortPath('ssh://dev/srv')).toBe('dev:/srv');
     });
 
     it('finds the entry of a message by its role and time, the newest first', () => {

package/src/browser/util/message.ts

@@ -1,4 +1,5 @@
 import type { SessionMessage, ToolRun } from '@celljs/ta-client';
+import { TaLocation } from '@celljs/ta-protocol';
 
 export interface ContentBlock {
     type: string;
@@ -177,12 +178,14 @@ export namespace MessageUtil {
 
     /** The last two parts of a path: enough to recognize a project. */
     export function shortPath(path: string): string {
-        const parts = path.split(/[\\/]/).filter(Boolean);
-        return parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : path;
+        const remote = TaLocation.parse(path);
+        const parts = (remote ? remote.path : path).split(/[\\/]/).filter(Boolean);
+        const short = parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : remote ? remote.path || '~' : path;
+        return remote ? `${remote.host}:${short}` : short;
     }
 
+    /** The last name of a path, or of an `ssh://` location (TaLocation). */
     export function basename(path: string): string {
-        const parts = path.split(/[\\/]/).filter(Boolean);
-        return parts[parts.length - 1] ?? path;
+        return TaLocation.basename(path);
     }
 }

package/src/browser/workbench-protocol.ts

@@ -4,6 +4,8 @@ import type {
     TaAuthServer,
     TaPackageServer,
     TaRelayServer,
+    TaRemoteEvent,
+    TaRemoteServer,
     TaServer,
     TaServerInfo,
     TaSessionInfo,
@@ -42,6 +44,7 @@ export interface TaWorkbench {
     readonly packages: TaPackageServer;
     readonly auth: TaAuthServer;
     readonly relay: TaRelayServer;
+    readonly remote: TaRemoteServer;
     subscribe(listener: (state: WorkbenchState) => void): () => void;
     /** Signs in with the token of the URL fragment (`ta serve --web`) or the one this page used before. */
     start(): Promise<void>;
@@ -63,4 +66,9 @@ export interface TaWorkbench {
     onExtensionData(listener: (name: string, keys: string[], cwd?: string) => void): () => void;
     /** What happens during the sign-ins of this page (TaAuthServer.login); the listener stays across reconnections. */
     onAuthEvent(listener: (loginId: string, event: TaAuthEvent) => void): () => void;
+    /**
+     * What happens with the remote machines (TaRemoteServer.watch, which the page calls on each connection):
+     * the prompts that wait come again as `prompt` events after a reconnection. The listener stays.
+     */
+    onRemoteEvent(listener: (event: TaRemoteEvent) => void): () => void;
 }

package/src/browser/workbench.ts

@@ -6,6 +6,8 @@ import {
     type TaAuthServer,
     type TaPackageServer,
     type TaRelayServer,
+    type TaRemoteEvent,
+    type TaRemoteServer,
     type TaServer,
     type TaSettingsServer,
     type TaTerminalServer,
@@ -83,6 +85,7 @@ export class TaWorkbenchImpl implements TaWorkbench {
     protected readonly terminalListeners = new Set<(terminalId: string, data: string, exitCode?: number) => void>();
     protected readonly extensionDataListeners = new Set<(name: string, keys: string[], cwd?: string) => void>();
     protected readonly authListeners = new Set<(loginId: string, event: TaAuthEvent) => void>();
+    protected readonly remoteListeners = new Set<(event: TaRemoteEvent) => void>();
 
     get state(): WorkbenchState {
         return this.current;
@@ -116,6 +119,10 @@ export class TaWorkbenchImpl implements TaWorkbench {
         return this.signedIn().relay;
     }
 
+    get remote(): TaRemoteServer {
+        return this.signedIn().remote;
+    }
+
     protected signedIn(): TaConnection {
         if (!this.connection) {
             throw new Error('Not signed in to ta serve.');
@@ -138,6 +145,11 @@ export class TaWorkbenchImpl implements TaWorkbench {
         return () => this.authListeners.delete(listener);
     }
 
+    onRemoteEvent(listener: (event: TaRemoteEvent) => void): () => void {
+        this.remoteListeners.add(listener);
+        return () => this.remoteListeners.delete(listener);
+    }
+
     async setWorkingDirectory(cwd: string): Promise<void> {
         this.update({ server: await this.server.setWorkingDirectory(cwd) });
     }
@@ -239,12 +251,15 @@ export class TaWorkbenchImpl implements TaWorkbench {
                 listener(loginId, event);
             }
         });
+        connection.onRemoteEvent(event => this.emitRemote(event));
         connection.onClose(() => this.update({ status: 'offline' }));
         connection.onReconnecting(delayMs => this.update({ retryAt: Date.now() + delayMs }));
         connection.onOpen(() => {
             this.update({ status: 'online', retryAt: undefined });
             void this.refresh();
+            void this.watchRemote(connection);
         });
+        void this.watchRemote(connection);
         this.update({ status: 'online', error: undefined, retryAt: undefined, server: await connection.server.getServerInfo() });
         await this.refresh();
     }
@@ -280,6 +295,20 @@ export class TaWorkbenchImpl implements TaWorkbench {
         return new SessionStore(this.connection, sessionId, options);
     }
 
+    /** The prompts of ssh that wait for an answer, from now and those already there. */
+    protected async watchRemote(connection: TaConnection): Promise<void> {
+        const prompts = await connection.remote.watch().catch(() => []);
+        for (const prompt of prompts) {
+            this.emitRemote({ type: 'prompt', prompt });
+        }
+    }
+
+    protected emitRemote(event: TaRemoteEvent): void {
+        for (const listener of this.remoteListeners) {
+            listener(event);
+        }
+    }
+
     protected stopRetrying(): void {
         this.generation++;
         clearTimeout(this.retryTimer);