@celljs/ta-web 4.6.1 → 4.8.0

package/src/browser/chat/chat.ts

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

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

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

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

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

package/src/browser/components/account-menu.tsx

@@ -2,7 +2,6 @@ import { Download, LogOut, User } from 'lucide-react';
 import * as React from 'react';
 import { usePwa, useWorkbench } from '../hooks';
 import { useT } from '../i18n/use-t';
-import { MessageUtil } from '../util/message';
 import { Icon } from './icon';
 
 /** Closes on Escape and on a click outside; the focus goes back to the button. */
@@ -31,9 +30,16 @@ export function useDismiss(open: boolean, close: () => void, root: React.RefObje
     }, [open, close, root, button]);
 }
 
+/** The round figure of the account: the first letter of the user, or a figure before Ta has said who. */
+function AccountFigure({ user, className }: { user?: string; className: string }) {
+    const letter = user?.trim().charAt(0).toUpperCase();
+    return <span className={className}>{letter || <Icon icon={User} size={16} />}</span>;
+}
+
 /**
- * The account at the foot of the navigation: who is signed in to which ta serve. A round figure with the
- * state of the connection as a dot; how the page looks is under the gear above it.
+ * The account at the foot of the navigation: the user and the machine whose Ta this page is signed in
+ * to, and whether the page is connected to it (a dot on the figure while it is not). How the page looks
+ * is under the gear above it.
  */
 export function AccountMenu() {
     const t = useT();
@@ -47,6 +53,7 @@ export function AccountMenu() {
     useDismiss(open, close, root, button);
     const online = status === 'online';
     const state = online ? t('ta.online') : t('ta.reconnecting');
+    const name = server?.user ?? t('ta.account');
 
     return (
         <div className="ta-account" ref={root}>
@@ -54,34 +61,30 @@ export function AccountMenu() {
                 ref={button}
                 type="button"
                 className={`ta-account-button ${open ? 'ta-on' : ''}`}
-                title={`${t('ta.account')} · ${state}`}
-                aria-label={t('ta.account')}
+                title={`${name} · ${state}`}
+                aria-label={`${t('ta.account')} · ${state}`}
                 aria-haspopup="menu"
                 aria-expanded={open}
                 aria-controls={open ? id : undefined}
                 onClick={() => setOpen(!open)}
             >
-                <Icon icon={User} size={17} />
-                <span className={`ta-account-dot ${online ? 'ta-ok' : 'ta-warn'}`} />
+                <AccountFigure user={server?.user} className="ta-account-figure" />
+                {!online && <span className="ta-account-dot" />}
             </button>
             {open && (
                 <div className="ta-account-menu" id={id} role="menu" aria-label={t('ta.account')}>
                     <div className="ta-account-head">
-                        <span className="ta-account-figure">
-                            <Icon icon={User} size={16} />
-                        </span>
+                        <AccountFigure user={server?.user} className="ta-account-figure ta-large" />
                         <div className="ta-account-text">
-                            <span className="ta-account-title">
-                                ta serve
-                                <span className={`ta-account-state ${online ? 'ta-ok' : 'ta-warn'}`}>
-                                    <span className="ta-dot" /> {state}
-                                </span>
-                            </span>
-                            <span className="ta-account-sub ta-ellipsis" title={server?.cwd}>
-                                {server ? `v${server.version} · ${MessageUtil.shortPath(server.cwd)}` : '…'}
-                            </span>
+                            <span className="ta-account-title ta-ellipsis">{name}</span>
+                            {server && <span className="ta-account-sub ta-ellipsis">{server.host}</span>}
                         </div>
                     </div>
+                    <div className="ta-account-service" title={server ? `Ta v${server.version}` : undefined}>
+                        <span className={`ta-account-state ${online ? 'ta-ok' : 'ta-warn'}`} />
+                        <span className="ta-account-service-name">{t('ta.account.service')}</span>
+                        <span className="ta-account-service-state">{server && online ? `${state} · v${server.version}` : state}</span>
+                    </div>
                     {installable && !standalone && (
                         <button
                             type="button"
@@ -99,7 +102,7 @@ export function AccountMenu() {
                     <button
                         type="button"
                         role="menuitem"
-                        className="ta-account-item ta-danger"
+                        className="ta-account-item"
                         onClick={() => {
                             close();
                             workbench.signOut();

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

@@ -24,6 +24,7 @@ import { LinkDialog } from './link-dialog';
 import { ManageMenu } from './manage-menu';
 import { FileUrls } from './media';
 import { NoticeCenter } from './notice-center';
+import { RemotePrompts } from './remote-prompts';
 import { type SettingsSection, SettingsView } from './settings-view';
 import { paneStyle, Sash, usePane } from './split-pane';
 import { WorkbenchToggle, WorkbenchToggleContext } from './workbench-toggle';
@@ -287,7 +288,7 @@ export function AppView() {
     const closeSettings = React.useCallback(() => setSettings(undefined), []);
     const [rightOpen, toggleRight, revealRight] = useRight();
     const [maximized, setMaximized] = React.useState(false);
-    const [{ theme }, settingsStore] = useSettings();
+    const [{ theme, language }, settingsStore] = useSettings();
     const sidebar = usePane(SIDEBAR);
     const editor = usePane(EDITOR);
     const online = workbench.status === 'online';
@@ -296,6 +297,12 @@ export function AppView() {
     const openLink = useOpenLink(undefined);
     useDocument();
     useRefresh(online);
+    // What the server and its packages say (errors, questions) is in the language of the page.
+    React.useEffect(() => {
+        if (online) {
+            bench.settings.setLanguage(language).catch(() => undefined);
+        }
+    }, [online, language, bench]);
     React.useEffect(() => {
         void bench.start();
     }, [bench]);
@@ -333,14 +340,15 @@ export function AppView() {
     // biome-ignore lint/correctness/useExhaustiveDependencies: follows what the main area shows
     React.useEffect(() => setSettings(undefined), [page, shownSession]);
     // Another conversation shown that no sidebar view lists (not that of an agent, which is in a group), by a page,
-    // a link or a fork: the sidebar turns to the chats, where it is selected, to be found again. Not the one the page opens with.
+    // a link or a fork: the sidebar turns to the chats, where it is selected, to be found again. Not the one the page opens with,
+    // nor one the list does not have yet: it may be an agent's.
     // biome-ignore lint/correctness/useExhaustiveDependencies: follows the conversation shown
     React.useEffect(() => {
         if (!shownSession || !started.current) {
             return;
         }
         const info = workbench.sessions.find(session => session.sessionId === shownSession);
-        if (!info?.group) {
+        if (info && !info.group) {
             setSideId('');
         }
     }, [shownSession]);
@@ -540,6 +548,7 @@ export function AppView() {
                         )}
                         <NoticeCenter />
                         <LinkDialog />
+                        <RemotePrompts />
                     </div>
                 </WorkbenchToggleContext.Provider>
             </SessionAvatars.Provider>

package/src/browser/components/chat-list.tsx

@@ -1,4 +1,4 @@
-import type { TaSessionInfo } from '@celljs/ta-protocol';
+import { TaLocation, type TaSessionInfo } from '@celljs/ta-protocol';
 import { Plus, Search, Trash2, X } from 'lucide-react';
 import * as React from 'react';
 import type { TaChat } from '../chat/chat-protocol';
@@ -16,6 +16,8 @@ export interface ChatSource {
     title: string;
     /** The directory a new chat of this source opens in; none for a package. */
     cwd?: string;
+    /** The host of a directory of another machine (TaLocation). */
+    host?: string;
     count: number;
     /** The letter of its avatar. */
     initial: string;
@@ -66,6 +68,7 @@ export namespace ChatListUtil {
                 label: name,
                 title: session.group ?? session.cwd,
                 cwd: session.group ? undefined : session.cwd,
+                host: session.group ? undefined : TaLocation.host(session.cwd),
                 count: 1,
                 initial: initial(session.group ? name.replace(/^ta-/, '') : name),
                 tone: 0,
@@ -167,7 +170,10 @@ function ChatItem({ session, source, selected, now, onSelect, onClose }: ItemPro
                         <span className="ta-chat-time">{ChatListUtil.clock(session.updatedAt, now)}</span>
                     </span>
                     <span className="ta-chat-line">
-                        <span className="ta-chat-sub">{source.label}</span>
+                        <span className="ta-chat-sub">
+                            {source.host && <span className="ta-host-tag">{source.host}</span>}
+                            {source.label}
+                        </span>
                         {session.isStreaming && <span className="ta-spinner" />}
                     </span>
                 </span>
@@ -244,6 +250,7 @@ export function ChatList({ tabs, sessions, selected, chat, onPicked }: ChatListP
                             onClick={() => setFilter(candidate === source ? '' : candidate.key)}
                         >
                             <span className={`ta-chip-dot ta-tone-${candidate.tone}`} />
+                            {candidate.host && <span className="ta-host-tag">{candidate.host}</span>}
                             {candidate.label}
                             <span className="ta-chip-count">{candidate.count}</span>
                         </button>

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

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

package/src/browser/components/composer.tsx

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

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

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

package/src/browser/components/folder-picker.spec.ts

@@ -18,6 +18,23 @@ describe('FolderPickerUtil', () => {
         expect(FolderPickerUtil.child('C:\\a', 'b')).toBe('C:\\a\\b');
     });
 
+    it('goes up and down the directories of a host, and not above its root', () => {
+        expect(FolderPickerUtil.parent('ssh://dev/srv/app')).toBe('ssh://dev/srv');
+        expect(FolderPickerUtil.parent('ssh://dev/srv')).toBe('ssh://dev/');
+        expect(FolderPickerUtil.parent('ssh://dev/')).toBeUndefined();
+        expect(FolderPickerUtil.child('ssh://dev/', 'srv')).toBe('ssh://dev/srv');
+    });
+
+    it('reads a path typed in as one of the machine shown', () => {
+        expect(FolderPickerUtil.typed(' /srv/app ', 'dev')).toBe('ssh://dev/srv/app');
+        expect(FolderPickerUtil.typed('srv', 'dev')).toBe('ssh://dev/srv');
+        expect(FolderPickerUtil.typed('ssh://prod/x', 'dev')).toBe('ssh://prod/x');
+        expect(FolderPickerUtil.typed('/work', undefined)).toBe('/work');
+        expect(FolderPickerUtil.localStart('ssh://dev/x', '/home/me')).toBe('/home/me');
+        expect(FolderPickerUtil.localStart('ssh://dev/x', 'ssh://dev/y')).toBe('/');
+        expect(FolderPickerUtil.localStart('/work', '/home/me')).toBe('/work');
+    });
+
     it('offers folders only, without the hidden ones', () => {
         expect(
             FolderPickerUtil.folders([