@celljs/ta-web 0.0.0-stage → 4.6.0

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

@@ -0,0 +1,187 @@
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useNotices } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { NoticesUtil } from '../notices/notices';
+import type { ConfirmRequest, InputRequest, Notice, TaNotices } from '../notices/notices-protocol';
+import { LEVEL_ICONS } from './callout';
+import { Icon, IconButton } from './icon';
+
+/** How long a notice takes to go, in style.ts. */
+const LEAVE_MS = 160;
+
+/**
+ * Goes by itself after its time, which stops while the pointer or the focus is on it, or the page is hidden.
+ * A notice that comes again is a new one (a new id, so a new toast), and starts its time over.
+ */
+function useLifetime(notice: Notice, leave: () => void): { onPointerEnter(): void; onPointerLeave(): void; onFocus(): void; onBlur(): void } {
+    const duration = NoticesUtil.duration(notice);
+    const [held, setHeld] = React.useState(false);
+    const [hidden, setHidden] = React.useState(() => document.visibilityState === 'hidden');
+    const left = React.useRef(duration);
+    React.useEffect(() => {
+        const onVisibility = () => setHidden(document.visibilityState === 'hidden');
+        document.addEventListener('visibilitychange', onVisibility);
+        return () => document.removeEventListener('visibilitychange', onVisibility);
+    }, []);
+    React.useEffect(() => {
+        if (left.current === undefined || held || hidden) {
+            return;
+        }
+        const started = Date.now();
+        const timer = setTimeout(leave, left.current);
+        return () => {
+            clearTimeout(timer);
+            left.current = Math.max(0, (left.current ?? 0) - (Date.now() - started));
+        };
+    }, [held, hidden, leave]);
+    return {
+        onPointerEnter: () => setHeld(true),
+        onPointerLeave: () => setHeld(false),
+        onFocus: () => setHeld(true),
+        onBlur: () => setHeld(false),
+    };
+}
+
+function Toast({ notice, notices }: { notice: Notice; notices: TaNotices }) {
+    const t = useT();
+    const [leaving, setLeaving] = React.useState(false);
+    const leave = React.useCallback(() => {
+        setLeaving(true);
+        setTimeout(() => notices.dismiss(notice.id), LEAVE_MS);
+    }, [notices, notice.id]);
+    const hold = useLifetime(notice, leave);
+    return (
+        <div className={`ta-toast ta-level-${notice.level}${leaving ? ' ta-leaving' : ''}`} role={notice.level === 'error' ? 'alert' : 'status'} {...hold}>
+            <Icon icon={LEVEL_ICONS[notice.level]} size={16} className="ta-level-icon" />
+            <div className="ta-toast-text">
+                <div className="ta-toast-message">
+                    {notice.message}
+                    {notice.count > 1 && <span className="ta-toast-count">×{notice.count}</span>}
+                </div>
+                {notice.detail && <div className="ta-toast-detail">{notice.detail}</div>}
+                {notice.action && (
+                    <button
+                        type="button"
+                        className="ta-toast-action"
+                        onClick={() => {
+                            notice.action?.run();
+                            leave();
+                        }}
+                    >
+                        {notice.action.label}
+                    </button>
+                )}
+            </div>
+            <IconButton icon={X} label={t('ta.dismiss')} className="ta-toast-close" onClick={leave} />
+        </div>
+    );
+}
+
+function ConfirmDialog({ request, notices }: { request: ConfirmRequest; notices: TaNotices }) {
+    const t = useT();
+    const answer = (confirmed: boolean) => notices.answer(request.id, confirmed);
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && notices.answer(request.id, false);
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [notices, request.id]);
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.cancel')} tabIndex={-1} onClick={() => answer(false)} />
+            <div className="ta-modal ta-confirm" role="alertdialog" aria-modal="true" aria-label={request.title}>
+                <div className="ta-confirm-title">{request.title}</div>
+                {request.message && <p className="ta-confirm-message">{request.message}</p>}
+                <div className="ta-dialog-actions">
+                    {/* Something that cannot be undone is not one Enter away. */}
+                    <button type="button" className="ta-button" autoFocus={request.danger} onClick={() => answer(false)}>
+                        {t('ta.cancel')}
+                    </button>
+                    <button
+                        type="button"
+                        className={`ta-button ${request.danger ? 'ta-button-danger' : 'ta-primary'}`}
+                        autoFocus={!request.danger}
+                        onClick={() => answer(true)}
+                    >
+                        {request.confirmLabel ?? t('ta.ok')}
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+/** Asks for a line of text, or several (`multiline`), as pi's `input` and `editor`. */
+function InputDialog({ request, notices }: { request: InputRequest; notices: TaNotices }) {
+    const t = useT();
+    const [value, setValue] = React.useState(request.value ?? '');
+    const cancel = () => notices.answerInput(request.id, undefined);
+    const submit = (event?: React.FormEvent) => {
+        event?.preventDefault();
+        notices.answerInput(request.id, value);
+    };
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.cancel')} tabIndex={-1} onClick={cancel} />
+            <form
+                className="ta-modal ta-confirm ta-ask"
+                role="dialog"
+                aria-modal="true"
+                aria-label={request.title}
+                onSubmit={submit}
+                onKeyDown={event => event.key === 'Escape' && cancel()}
+            >
+                <div className="ta-confirm-title">{request.title}</div>
+                {request.multiline ? (
+                    <textarea
+                        className="ta-input ta-ask-text"
+                        autoFocus
+                        value={value}
+                        placeholder={request.placeholder}
+                        aria-label={request.title}
+                        onChange={event => setValue(event.target.value)}
+                        onKeyDown={event => event.key === 'Enter' && (event.metaKey || event.ctrlKey) && submit()}
+                    />
+                ) : (
+                    <input
+                        className="ta-input"
+                        autoFocus
+                        value={value}
+                        placeholder={request.placeholder}
+                        aria-label={request.title}
+                        onFocus={event => event.currentTarget.select()}
+                        onChange={event => setValue(event.target.value)}
+                    />
+                )}
+                <div className="ta-dialog-actions">
+                    <button type="button" className="ta-button" onClick={cancel}>
+                        {t('ta.cancel')}
+                    </button>
+                    <button type="submit" className="ta-button ta-primary">
+                        {t('ta.ok')}
+                    </button>
+                </div>
+            </form>
+        </div>,
+        document.body,
+    );
+}
+
+/** The notices of the page in a corner, the newest nearest to it, and the question waiting for an answer. */
+export function NoticeCenter() {
+    const t = useT();
+    const [{ notices, confirm, input }, center] = useNotices();
+    return (
+        <>
+            <section className="ta-toasts" aria-label={t('ta.notices')} aria-live="polite">
+                {notices.map(notice => (
+                    <Toast key={notice.id} notice={notice} notices={center} />
+                ))}
+            </section>
+            {confirm && <ConfirmDialog key={confirm.id} request={confirm} notices={center} />}
+            {input && <InputDialog key={input.id} request={input} notices={center} />}
+        </>
+    );
+}

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

@@ -0,0 +1,146 @@
+import type { TaRelayDevice, TaRelayInfo } from '@celljs/ta-protocol';
+import { Copy, Smartphone, Trash2, X } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { QrCode } from '../util/qr-code';
+import { Icon, IconButton } from './icon';
+
+/** A phone and this computer, a relay between them, and a lock on what goes through. */
+function RelayPicture() {
+    return (
+        <svg className="ta-pic ta-relay-pic" viewBox="0 0 240 72" aria-hidden="true">
+            <rect className="ta-pic-frame" x="14" y="10" width="32" height="52" rx="7" />
+            <rect className="ta-pic-accent" x="19" y="17" width="22" height="30" rx="3" />
+            <rect className="ta-pic-line" x="25" y="53" width="10" height="3" rx="1.5" />
+            <rect className="ta-pic-frame" x="168" y="14" width="58" height="38" rx="5" />
+            <rect className="ta-pic-accent" x="173" y="19" width="48" height="28" rx="3" />
+            <rect className="ta-pic-line" x="160" y="54" width="74" height="5" rx="2.5" />
+            <path className="ta-pic-path" d="M52 36h44M144 36h18" />
+            <circle className="ta-pic-frame" cx="120" cy="36" r="20" />
+            <path className="ta-pic-mark" d="M112 34h16v12h-16z" />
+            <path className="ta-pic-shackle" d="M115.5 34v-4a4.5 4.5 0 0 1 9 0v4" />
+            <circle className="ta-pic-dot ta-relay-dot" cx="74" cy="36" r="3" />
+            <circle className="ta-pic-dot ta-relay-dot ta-relay-dot-back" cx="153" cy="36" r="3" />
+        </svg>
+    );
+}
+
+function QrView({ text }: { text: string }) {
+    const code = React.useMemo(() => QrCode.encode(text), [text]);
+    const quiet = 3;
+    const size = code.size + quiet * 2;
+    return (
+        <svg className="ta-qr" viewBox={`${-quiet} ${-quiet} ${size} ${size}`} role="img" aria-label="QR" shapeRendering="crispEdges">
+            <rect x={-quiet} y={-quiet} width={size} height={size} fill="#fff" />
+            <path d={code.path()} fill="#111" />
+        </svg>
+    );
+}
+
+/** Using Ta from a phone: pair it through a relay, see and remove the devices paired. */
+export function RelayDialog({ onClose }: { onClose(): void }) {
+    const t = useT();
+    const [, bench] = useWorkbench();
+    const [, notices] = useNotices();
+    const [info, setInfo] = React.useState<TaRelayInfo>();
+    const [link, setLink] = React.useState<string>();
+    const [name, setName] = React.useState('');
+    const [busy, setBusy] = React.useState(false);
+    const load = React.useCallback(() => {
+        bench.relay.getRelay().then(setInfo, (error: unknown) => notices.error(error));
+    }, [bench, notices]);
+    React.useEffect(() => {
+        load();
+        // Whether ta serve reached the relay shows a moment after pairing.
+        const timer = setInterval(load, 3000);
+        return () => clearInterval(timer);
+    }, [load]);
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    const pair = async () => {
+        if (!info) {
+            return;
+        }
+        setBusy(true);
+        try {
+            const paired = await bench.relay.pair(info.relay ?? info.defaultRelay, name.trim() || t('ta.relay.phone'));
+            setLink(paired.link);
+            setName('');
+            load();
+        } catch (error) {
+            notices.error(error);
+        } finally {
+            setBusy(false);
+        }
+    };
+    const unpair = async (device: TaRelayDevice) => {
+        if (await notices.confirm({ title: t('ta.relay.unpairConfirm', { name: device.name }), confirmLabel: t('ta.relay.unpair'), danger: true })) {
+            await bench.relay.unpair(device.id).catch((error: unknown) => notices.error(error));
+            load();
+        }
+    };
+    const relayHost = (info?.relay ?? info?.defaultRelay ?? '').replace(/^https?:\/\//, '');
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.close')} tabIndex={-1} onClick={onClose} />
+            <div className="ta-modal ta-relay-dialog" role="dialog" aria-modal="true" aria-label={t('ta.relay.title')}>
+                <div className="ta-modal-head">
+                    <span className="ta-modal-title">{t('ta.relay.title')}</span>
+                    <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
+                </div>
+                {link ? (
+                    <div className="ta-relay-pairing">
+                        <QrView text={link} />
+                        <p>{t('ta.relay.scan')}</p>
+                        <div className="ta-auth-actions">
+                            <button type="button" className="ta-button" onClick={() => void navigator.clipboard?.writeText(link).catch(() => undefined)}>
+                                <Icon icon={Copy} size={15} /> {t('ta.auth.copyLink')}
+                            </button>
+                            <button type="button" className="ta-button ta-primary" onClick={() => setLink(undefined)}>
+                                {t('ta.relay.done')}
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="ta-relay-start">
+                        <RelayPicture />
+                        <p>{t('ta.relay.hint')}</p>
+                        <div className="ta-relay-form">
+                            <label className="ta-field ta-field-small">
+                                <Smartphone size={15} strokeWidth={1.75} aria-hidden="true" />
+                                <input placeholder={t('ta.relay.phone')} value={name} onChange={event => setName(event.target.value)} />
+                            </label>
+                            <button type="button" className="ta-button ta-primary" disabled={busy || !info} onClick={() => void pair()}>
+                                {t('ta.relay.pair')}
+                            </button>
+                        </div>
+                    </div>
+                )}
+                {info && info.devices.length > 0 && (
+                    <section className="ta-auth-group">
+                        <h3>
+                            {t('ta.relay.devices')}
+                            <span className={`ta-relay-state${info.online ? ' ta-on' : ''}`}>
+                                {info.online ? t('ta.relay.online', { relay: relayHost }) : t('ta.relay.offline', { relay: relayHost })}
+                            </span>
+                        </h3>
+                        {info.devices.map(device => (
+                            <div key={device.id} className="ta-auth-row ta-relay-device">
+                                <Icon icon={Smartphone} size={16} />
+                                <span className="ta-auth-name">{device.name}</span>
+                                <span className="ta-auth-note">{new Date(device.createdAt).toLocaleDateString()}</span>
+                                <IconButton icon={Trash2} label={t('ta.relay.unpair')} onClick={() => void unpair(device)} />
+                            </div>
+                        ))}
+                    </section>
+                )}
+            </div>
+        </div>,
+        document.body,
+    );
+}

package/src/browser/components/run-status.tsx

@@ -0,0 +1,70 @@
+import type { SessionState } from '@celljs/ta-client';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { type Phase, ProgressUtil } from '../util/progress';
+import { ToolUtil } from '../util/tool';
+import { Icon } from './icon';
+
+function usePhaseText(phase: Phase): string {
+    const t = useT();
+    switch (phase.kind) {
+        case 'waiting':
+            return t('ta.progress.waiting');
+        case 'thinking':
+            return t('ta.session.phase.thinking');
+        case 'writing':
+            return t('ta.session.phase.writing');
+        case 'calling': {
+            const { verb } = ToolUtil.summary(phase.tool, {});
+            return t('ta.progress.calling', { tool: verb ? t(verb) : phase.tool });
+        }
+        case 'tool': {
+            const { verb, name, target } = phase.summary;
+            return [verb ? t(verb) : name, target].filter(Boolean).join(' ');
+        }
+        case 'clientTool':
+            return `${t('ta.session.waitingClientTool')} · ${phase.tool}`;
+        case 'attention':
+            return t('ta.mood.attention');
+        case 'compacting':
+            return t('ta.progress.compacting');
+        case 'retrying':
+            return t('ta.progress.retrying', { seconds: phase.seconds, attempt: phase.attempt, max: phase.maxAttempts });
+    }
+}
+
+/**
+ * What ta does while it works, in one line: the phase it is in (waiting for the model, thinking, writing,
+ * the tool it runs, a retry) and the tokens of the run, sent up and received down.
+ */
+export function RunStatus({ state }: { state: SessionState }) {
+    const t = useT();
+    const phase = ProgressUtil.phase(state);
+    const text = usePhaseText(phase);
+    const { input, output } = ProgressUtil.tokens(state);
+    return (
+        <span className="ta-run-status" role="status">
+            <span className={`ta-status ${phase.kind === 'attention' || phase.kind === 'retrying' ? 'ta-status-waiting' : 'ta-status-running'}`} />
+            <span className={`ta-run-phase ${phase.kind === 'tool' ? 'ta-run-tool' : ''}`} title={text}>
+                {text}
+            </span>
+            {(input > 0 || output > 0) && (
+                <span className="ta-run-tokens">
+                    {input > 0 && (
+                        <span title={t('ta.progress.input')}>
+                            <Icon icon={ArrowUp} size={12} />
+                            {ProgressUtil.format(input)}
+                        </span>
+                    )}
+                    {output > 0 && (
+                        <span title={t('ta.progress.output')}>
+                            <Icon icon={ArrowDown} size={12} />
+                            {ProgressUtil.format(output)}
+                        </span>
+                    )}
+                </span>
+            )}
+        </span>
+    );
+}

package/src/browser/components/session-settings.spec.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'bun:test';
+import type { ThinkingLevel } from '@celljs/ta-protocol';
+import type { Translate } from '../i18n/use-t';
+import { type SessionSettings, SessionSettingsUtil } from './session-settings';
+
+const t: Translate = id => id;
+const models = [
+    { provider: 'p', id: 'a', name: 'Model A' },
+    { provider: 'p', id: 'b', name: '' },
+] as SessionSettings['models'];
+
+function handlers() {
+    const calls: string[] = [];
+    return {
+        calls,
+        handlers: {
+            setModel: (model: { id: string }) => calls.push(`model:${model.id}`),
+            setThinkingLevel: (level: ThinkingLevel) => calls.push(`level:${level}`),
+            compact: () => calls.push('compact'),
+        },
+    };
+}
+
+describe('SessionSettingsUtil', () => {
+    it('lists the model and the thinking level to pick from, then compacting', () => {
+        const settings: SessionSettings = { models, model: 'p/b', thinkingLevel: 'low', levels: ['off', 'low', 'high'], commands: [] };
+        const { calls, handlers: on } = handlers();
+        const [model, thinking, compact] = SessionSettingsUtil.actions(settings, false, on, t);
+        expect([model.key, thinking.key, compact.key]).toEqual(['model', 'thinking', 'compact']);
+        expect(model.detail).toBe('b');
+        expect(model.items?.map(item => [item.label, item.checked])).toEqual([
+            ['Model A', false],
+            ['b', true],
+        ]);
+        expect(thinking.detail).toBe('low');
+        model.items?.[0].run?.();
+        thinking.items?.[2].run?.();
+        compact.run?.();
+        expect(calls).toEqual(['model:a', 'level:high', 'compact']);
+    });
+
+    it('has no thinking level for a model without levels, and does not compact while the agent works', () => {
+        const settings: SessionSettings = { ...SessionSettingsUtil.EMPTY, levels: ['off'] };
+        const actions = SessionSettingsUtil.actions(settings, true, handlers().handlers, t);
+        expect(actions.map(action => action.key)).toEqual(['model', 'compact']);
+        expect(actions[0].detail).toBe('ta.session.noModel');
+        expect(actions[1].disabled).toBe(true);
+    });
+});

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

@@ -0,0 +1,119 @@
+import type { TaCommandResult, TaServer, ThinkingLevel } from '@celljs/ta-protocol';
+import { Archive, Box, Brain } from 'lucide-react';
+import * as React from 'react';
+import type { Translate } from '../i18n/use-t';
+import type { ComposerAction } from './composer-box';
+import { Icon } from './icon';
+
+type Model = TaCommandResult<'get_available_models'>['models'][number];
+type Command = TaCommandResult<'get_commands'>['commands'][number];
+
+/** What a session needs from the server besides its events: models, thinking levels, commands. */
+export interface SessionSettings {
+    models: Model[];
+    model?: string;
+    thinkingLevel?: ThinkingLevel;
+    levels: ThinkingLevel[];
+    commands: Command[];
+}
+
+/** What the settings of a session do, once picked. */
+export interface SessionSettingsHandlers {
+    setModel(model: Model): void;
+    setThinkingLevel(level: ThinkingLevel): void;
+    compact(): void;
+}
+
+export namespace SessionSettingsUtil {
+    export const EMPTY: SessionSettings = { models: [], levels: [], commands: [] };
+
+    export function modelRef(model?: { provider: string; id: string } | null): string {
+        return model ? `${model.provider}/${model.id}` : '';
+    }
+
+    /** The settings of a session in the + of its box: the model and the thinking level as lists to pick from, and compacting. */
+    export function actions(settings: SessionSettings, working: boolean, handlers: SessionSettingsHandlers, t: Translate): ComposerAction[] {
+        const model = settings.models.find(candidate => modelRef(candidate) === settings.model);
+        return [
+            {
+                key: 'model',
+                label: t('ta.session.model'),
+                icon: <Icon icon={Box} size={16} />,
+                detail: model ? model.name || model.id : t('ta.session.noModel'),
+                items: settings.models.map(candidate => ({
+                    key: modelRef(candidate),
+                    label: candidate.name || candidate.id,
+                    detail: candidate.provider,
+                    checked: modelRef(candidate) === settings.model,
+                    run: () => handlers.setModel(candidate),
+                })),
+            },
+            ...(settings.levels.length > 1
+                ? [
+                      {
+                          key: 'thinking',
+                          label: t('ta.message.thinking'),
+                          icon: <Icon icon={Brain} size={16} />,
+                          detail: settings.thinkingLevel,
+                          items: settings.levels.map(level => ({
+                              key: level,
+                              label: level,
+                              checked: level === settings.thinkingLevel,
+                              run: () => handlers.setThinkingLevel(level),
+                          })),
+                      },
+                  ]
+                : []),
+            {
+                key: 'compact',
+                label: t('ta.session.compact'),
+                icon: <Icon icon={Archive} size={16} />,
+                disabled: working,
+                run: handlers.compact,
+            },
+        ];
+    }
+}
+
+/**
+ * The settings of a session, loaded again after each run (an extension or another client may have changed
+ * them), and the entries of the + menu that change them.
+ */
+export function useSessionSettings(
+    server: TaServer,
+    sessionId: string,
+    working: boolean,
+    t: Translate,
+    onError: (error: unknown) => void,
+): { settings: SessionSettings; actions: ComposerAction[] } {
+    const [settings, setSettings] = React.useState(SessionSettingsUtil.EMPTY);
+    const load = React.useCallback(() => {
+        Promise.all([
+            server.getState(sessionId),
+            server.getAvailableModels(sessionId),
+            server.getAvailableThinkingLevels(sessionId),
+            server.getCommands(sessionId),
+        ])
+            .then(([state, { models }, { levels }, { commands }]) =>
+                setSettings({ models, model: SessionSettingsUtil.modelRef(state.model), thinkingLevel: state.thinkingLevel, levels, commands }),
+            )
+            .catch(() => undefined);
+    }, [server, sessionId]);
+    React.useEffect(() => {
+        if (!working) {
+            load();
+        }
+    }, [load, working]);
+    const run = (command: Promise<unknown>) => command.then(load, onError);
+    const actions = SessionSettingsUtil.actions(
+        settings,
+        working,
+        {
+            setModel: model => run(server.setModel(sessionId, model.provider, model.id)),
+            setThinkingLevel: level => run(server.setThinkingLevel(sessionId, level)),
+            compact: () => run(server.compact(sessionId)),
+        },
+        t,
+    );
+    return { settings, actions };
+}