@celljs/ta-web 0.0.0-stage → 4.6.0

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

@@ -0,0 +1,421 @@
+import type { TaAuthEvent, TaAuthPrompt, TaAuthProvider } from '@celljs/ta-protocol';
+import { ArrowLeft, Check, ChevronRight, Copy, ExternalLink, KeyRound, LogOut, Search, 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 { type AuthKind, AuthPicture } from './auth-pictures';
+import { Callout } from './callout';
+import { Icon, IconButton } from './icon';
+import { TaAvatar } from './ta-avatar';
+
+export namespace AuthUtil {
+    export function key(provider: TaAuthProvider): string {
+        return `${provider.id}:${provider.type}`;
+    }
+
+    /** Some provider is signed in, one way or another: Ta has models. */
+    export function signedIn(providers: TaAuthProvider[]): boolean {
+        return providers.some(provider => provider.configured);
+    }
+
+    /** What can be signed in to from here, matching `words`: accounts first (subscriptions before the rest), then keys; by name. */
+    export function offered(providers: TaAuthProvider[], words = ''): { accounts: TaAuthProvider[]; keys: TaAuthProvider[] } {
+        const query = words.trim().toLowerCase();
+        const shown = providers.filter(provider => provider.interactive && (!query || `${provider.name} ${provider.id}`.toLowerCase().includes(query)));
+        const byName = (a: TaAuthProvider, b: TaAuthProvider) => Number(b.subscription) - Number(a.subscription) || a.name.localeCompare(b.name);
+        return {
+            accounts: shown.filter(provider => provider.type === 'oauth').sort(byName),
+            keys: shown.filter(provider => provider.type === 'api_key').sort(byName),
+        };
+    }
+
+    /** What the user sees of a sign-in so far, from its events. */
+    export interface FlowState {
+        url?: { url: string; instructions?: string };
+        device?: { userCode: string; verificationUri: string };
+        progress?: string;
+        infos: { message: string; links?: { url: string; label?: string }[] }[];
+        prompt?: { promptId: string; prompt: TaAuthPrompt };
+        result?: 'done' | 'failed' | 'cancelled';
+        error?: string;
+    }
+
+    export function reduce(state: FlowState, event: TaAuthEvent): FlowState {
+        switch (event.type) {
+            case 'auth_url':
+                return { ...state, url: { url: event.url, instructions: event.instructions } };
+            case 'device_code':
+                return { ...state, device: { userCode: event.userCode, verificationUri: event.verificationUri } };
+            case 'progress':
+                return { ...state, progress: event.message };
+            case 'info':
+                return { ...state, infos: [...state.infos, { message: event.message, links: event.links }] };
+            case 'prompt':
+                return { ...state, prompt: { promptId: event.promptId, prompt: event.prompt } };
+            case 'prompt_closed':
+                return state.prompt?.promptId === event.promptId ? { ...state, prompt: undefined } : state;
+            case 'done':
+                return { ...state, prompt: undefined, result: 'done' };
+            case 'failed':
+                return { ...state, prompt: undefined, result: event.cancelled ? 'cancelled' : 'failed', error: event.message };
+        }
+    }
+}
+
+/** The ways to sign in to providers of models, read again with `reload`; undefined until read. */
+export function useAuthProviders(online: boolean): [TaAuthProvider[] | undefined, () => void] {
+    const [, bench] = useWorkbench();
+    const [providers, setProviders] = React.useState<TaAuthProvider[]>();
+    const [round, setRound] = React.useState(0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: round asks for another read
+    React.useEffect(() => {
+        if (!online) {
+            return;
+        }
+        let live = true;
+        bench.auth.listProviders().then(
+            list => live && setProviders(list),
+            () => live && setProviders(undefined),
+        );
+        return () => {
+            live = false;
+        };
+    }, [bench, online, round]);
+    return [providers, React.useCallback(() => setRound(value => value + 1), [])];
+}
+
+function copy(text: string): void {
+    void navigator.clipboard?.writeText(text).catch(() => undefined);
+}
+
+function open(url: string): void {
+    window.open(url, '_blank', 'noopener,noreferrer');
+}
+
+/** One sign-in, run on the server: what it shows, and what it asks. */
+function AuthFlow({ provider, onDone, onBack }: { provider: TaAuthProvider; onDone(): void; onBack(): void }) {
+    const t = useT();
+    const [, bench] = useWorkbench();
+    const [state, dispatch] = React.useReducer(AuthUtil.reduce, { infos: [] });
+    const [answer, setAnswer] = React.useState('');
+    const loginId = React.useRef<string | undefined>(undefined);
+    React.useEffect(() => {
+        // Events can come before the id does: they wait for it.
+        const early: [string, TaAuthEvent][] = [];
+        const off = bench.onAuthEvent((id, event) => {
+            if (loginId.current === undefined) {
+                early.push([id, event]);
+            } else if (id === loginId.current) {
+                dispatch(event);
+            }
+        });
+        bench.auth.login(provider.id, provider.type).then(
+            id => {
+                loginId.current = id;
+                for (const [earlyId, event] of early.splice(0)) {
+                    if (earlyId === id) {
+                        dispatch(event);
+                    }
+                }
+            },
+            error => dispatch({ type: 'failed', message: error instanceof Error ? error.message : String(error) }),
+        );
+        return () => {
+            off();
+            // Leaving before it ends stops it on the server too.
+            if (loginId.current) {
+                void bench.auth.cancel(loginId.current).catch(() => undefined);
+            }
+        };
+    }, [bench, provider]);
+    React.useEffect(() => {
+        if (state.result === 'done') {
+            loginId.current = undefined;
+            onDone();
+        } else if (state.result === 'cancelled') {
+            loginId.current = undefined;
+            onBack();
+        }
+    }, [state.result, onDone, onBack]);
+    const prompt = state.prompt;
+    const send = (value: string) => {
+        if (prompt && loginId.current) {
+            void bench.auth.answer(loginId.current, prompt.promptId, value).catch(() => undefined);
+            setAnswer('');
+        }
+    };
+    const kind = provider.type === 'api_key' ? t('ta.auth.apiKey') : provider.subscription ? t('ta.auth.subscription') : t('ta.auth.account');
+    return (
+        <div className="ta-auth-flow">
+            <div className="ta-auth-flow-head">
+                <IconButton icon={ArrowLeft} label={t('ta.auth.back')} onClick={onBack} />
+                <span className="ta-auth-flow-title">{provider.name}</span>
+                <span className="ta-auth-kind">{kind}</span>
+            </div>
+            {state.url && (
+                <div className="ta-auth-step">
+                    <p>{state.url.instructions || t('ta.auth.openHint')}</p>
+                    <div className="ta-auth-actions">
+                        <button type="button" className="ta-button ta-primary" onClick={() => open(state.url?.url ?? '')}>
+                            <Icon icon={ExternalLink} size={15} /> {t('ta.auth.openPage')}
+                        </button>
+                        <button type="button" className="ta-button" onClick={() => copy(state.url?.url ?? '')}>
+                            <Icon icon={Copy} size={15} /> {t('ta.auth.copyLink')}
+                        </button>
+                    </div>
+                </div>
+            )}
+            {state.device && (
+                <div className="ta-auth-step">
+                    <p>{t('ta.auth.deviceHint')}</p>
+                    <code className="ta-auth-code">{state.device.userCode}</code>
+                    <div className="ta-auth-actions">
+                        <button
+                            type="button"
+                            className="ta-button ta-primary"
+                            onClick={() => {
+                                copy(state.device?.userCode ?? '');
+                                open(state.device?.verificationUri ?? '');
+                            }}
+                        >
+                            <Icon icon={ExternalLink} size={15} /> {t('ta.auth.copyAndOpen')}
+                        </button>
+                        <button type="button" className="ta-button" onClick={() => copy(state.device?.userCode ?? '')}>
+                            <Icon icon={Copy} size={15} /> {t('ta.auth.copyCode')}
+                        </button>
+                    </div>
+                </div>
+            )}
+            {state.infos.map((info, index) => (
+                <Callout key={index}>
+                    {info.message}
+                    {info.links?.map(link => (
+                        <a key={link.url} href={link.url} target="_blank" rel="noreferrer" className="ta-auth-link">
+                            {link.label ?? link.url}
+                        </a>
+                    ))}
+                </Callout>
+            ))}
+            {prompt &&
+                (prompt.prompt.type === 'select' ? (
+                    <div className="ta-auth-step">
+                        <p>{prompt.prompt.message}</p>
+                        <div className="ta-auth-options">
+                            {prompt.prompt.options.map(option => (
+                                <button key={option.id} type="button" className="ta-auth-item" onClick={() => send(option.id)}>
+                                    <span className="ta-auth-name">{option.label}</span>
+                                    {option.description && <span className="ta-auth-note">{option.description}</span>}
+                                    <Icon icon={ChevronRight} size={15} />
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <form
+                        className="ta-auth-step"
+                        onSubmit={event => {
+                            event.preventDefault();
+                            if (answer.trim()) {
+                                send(answer.trim());
+                            }
+                        }}
+                    >
+                        <p>
+                            {prompt.prompt.type === 'manual_code'
+                                ? t('ta.auth.manualCode')
+                                : prompt.prompt.type === 'secret'
+                                  ? t('ta.auth.enterKey', { name: provider.name })
+                                  : prompt.prompt.message}
+                        </p>
+                        <label className="ta-field">
+                            <KeyRound size={16} strokeWidth={1.75} aria-hidden="true" />
+                            <input
+                                type={prompt.prompt.type === 'secret' ? 'password' : 'text'}
+                                autoFocus
+                                autoComplete="off"
+                                spellCheck={false}
+                                placeholder={prompt.prompt.placeholder ?? (prompt.prompt.type === 'secret' ? t('ta.auth.apiKey') : '')}
+                                value={answer}
+                                onChange={event => setAnswer(event.target.value)}
+                            />
+                        </label>
+                        <button type="submit" className="ta-button ta-primary ta-wide" disabled={!answer.trim()}>
+                            {t('ta.auth.continue')}
+                        </button>
+                    </form>
+                ))}
+            {!state.result && !prompt && (
+                <div className="ta-auth-progress">
+                    <span className="ta-spinner" /> {state.progress ?? t('ta.auth.waiting')}
+                </div>
+            )}
+            {state.result === 'failed' && (
+                <Callout
+                    level="error"
+                    action={
+                        <button type="button" className="ta-button" onClick={onBack}>
+                            {t('ta.auth.back')}
+                        </button>
+                    }
+                >
+                    {t('ta.auth.failed', { message: state.error ?? '' })}
+                </Callout>
+            )}
+        </div>
+    );
+}
+
+function ProviderRow({ provider, onPick, onSignOut, plain }: { provider: TaAuthProvider; onPick(): void; onSignOut?(): void; plain?: boolean }) {
+    const t = useT();
+    const kind = provider.type === 'api_key' ? t('ta.auth.apiKey') : provider.subscription ? t('ta.auth.subscription') : t('ta.auth.account');
+    const signedIn = provider.configured?.type === provider.type;
+    const source = provider.configured?.source;
+    return (
+        <div className="ta-auth-row">
+            <button type="button" className="ta-auth-item" onClick={onPick}>
+                <span className="ta-auth-name">{provider.name}</span>
+                {(!plain || provider.subscription) && <span className="ta-auth-kind">{kind}</span>}
+                {signedIn && (
+                    <span className="ta-auth-on" title={source}>
+                        <Icon icon={Check} size={13} /> {source && !/credential|OAuth/i.test(source) ? source : t('ta.auth.signedIn')}
+                    </span>
+                )}
+                <Icon icon={ChevronRight} size={15} />
+            </button>
+            {onSignOut && provider.stored && signedIn && <IconButton icon={LogOut} label={t('ta.auth.signOut')} onClick={onSignOut} />}
+        </div>
+    );
+}
+
+/** The providers and a sign-in to one of them, in one place: the page, the dialog and the settings show it. */
+export function AuthPanel({ onSignedIn, kinds }: { onSignedIn?(): void; kinds?: boolean }) {
+    const t = useT();
+    const [workbench, bench] = useWorkbench();
+    const [, notices] = useNotices();
+    const [providers, reload] = useAuthProviders(workbench.status === 'online');
+    const [picked, setPicked] = React.useState<TaAuthProvider>();
+    const [words, setWords] = React.useState('');
+    /** On the first page: which way the user chose, before the providers of that way. */
+    const [kind, setKind] = React.useState<AuthKind>();
+    const back = React.useCallback(() => setPicked(undefined), []);
+    const done = React.useCallback(() => {
+        if (picked) {
+            notices.notify(t('ta.auth.done', { name: picked.name }), { level: 'success' });
+        }
+        setPicked(undefined);
+        reload();
+        onSignedIn?.();
+    }, [picked, notices, t, reload, onSignedIn]);
+    if (picked) {
+        return <AuthFlow provider={picked} onDone={done} onBack={back} />;
+    }
+    if (!providers) {
+        return (
+            <div className="ta-auth-progress">
+                <span className="ta-spinner" />
+            </div>
+        );
+    }
+    const signOut = async (provider: TaAuthProvider) => {
+        if (await notices.confirm({ title: t('ta.auth.signOutConfirm', { name: provider.name }), confirmLabel: t('ta.auth.signOut'), danger: true })) {
+            await bench.auth.logout(provider.id).catch(error => notices.error(error));
+            reload();
+        }
+    };
+    if (kinds && !kind) {
+        const card = (value: AuthKind, label: string, example: string) => (
+            <button type="button" className="ta-auth-kind-card" onClick={() => setKind(value)}>
+                <AuthPicture kind={value} />
+                <span className="ta-auth-kind-label">
+                    <strong>{label}</strong>
+                    <span>{example}</span>
+                </span>
+            </button>
+        );
+        return (
+            <div className="ta-auth-kinds">
+                {card('oauth', t('ta.auth.accounts'), t('ta.auth.accountsExample'))}
+                {card('api_key', t('ta.auth.keys'), t('ta.auth.keysExample'))}
+            </div>
+        );
+    }
+    const offered = AuthUtil.offered(providers, words);
+    const accounts = kind === 'api_key' ? [] : offered.accounts;
+    const keys = kind === 'oauth' ? [] : offered.keys;
+    const group = (title: string, list: TaAuthProvider[]) =>
+        list.length > 0 && (
+            <section className="ta-auth-group">
+                {title && <h3>{title}</h3>}
+                {list.map(provider => (
+                    <ProviderRow
+                        key={AuthUtil.key(provider)}
+                        provider={provider}
+                        plain={kind !== undefined}
+                        onPick={() => setPicked(provider)}
+                        onSignOut={() => void signOut(provider)}
+                    />
+                ))}
+            </section>
+        );
+    return (
+        <div className="ta-auth-panel">
+            {kind && (
+                <div className="ta-auth-flow-head">
+                    <IconButton icon={ArrowLeft} label={t('ta.auth.back')} onClick={() => setKind(undefined)} />
+                    <span className="ta-auth-flow-title">{kind === 'oauth' ? t('ta.auth.accounts') : t('ta.auth.keys')}</span>
+                </div>
+            )}
+            <label className="ta-field ta-field-small">
+                <Search size={15} strokeWidth={1.75} aria-hidden="true" />
+                <input placeholder={t('ta.auth.search')} value={words} onChange={event => setWords(event.target.value)} />
+            </label>
+            <div className="ta-auth-list">
+                {group(kind ? '' : t('ta.auth.accounts'), accounts)}
+                {group(kind ? '' : t('ta.auth.keys'), keys)}
+                {accounts.length + keys.length === 0 && <div className="ta-folder-note">{t('ta.auth.none')}</div>}
+            </div>
+        </div>
+    );
+}
+
+/** The model accounts, over the page (the gear menu). */
+export function AuthDialog({ onClose }: { onClose(): void }) {
+    const t = useT();
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    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-auth-dialog" role="dialog" aria-modal="true" aria-label={t('ta.auth.accountsTitle')}>
+                <div className="ta-modal-head">
+                    <span className="ta-modal-title">{t('ta.auth.accountsTitle')}</span>
+                    <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
+                </div>
+                <AuthPanel />
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+/** The first page while no provider of models is signed in: Ta can do nothing without one. */
+export function LoginPage({ onLater, onSignedIn }: { onLater(): void; onSignedIn(): void }) {
+    const t = useT();
+    return (
+        <div className="ta-signin ta-login">
+            <div className="ta-card ta-login-card">
+                <TaAvatar size={72} />
+                <h1>{t('ta.auth.title')}</h1>
+                <p>{t('ta.auth.hint')}</p>
+                <AuthPanel kinds onSignedIn={onSignedIn} />
+                <button type="button" className="ta-login-later" onClick={onLater}>
+                    {t('ta.auth.later')}
+                </button>
+            </div>
+        </div>
+    );
+}

package/src/browser/components/callout.tsx

@@ -0,0 +1,33 @@
+import { CircleCheck, CircleX, Info, type LucideIcon, TriangleAlert } from 'lucide-react';
+import * as React from 'react';
+import type { NoticeLevel } from '../notices/notices-protocol';
+import { Icon } from './icon';
+
+export const LEVEL_ICONS: Record<NoticeLevel, LucideIcon> = { info: Info, success: CircleCheck, warning: TriangleAlert, error: CircleX };
+
+export interface CalloutProps {
+    level?: NoticeLevel;
+    children: React.ReactNode;
+    /** A second, quieter line. */
+    detail?: React.ReactNode;
+    /** At the end: a button. */
+    action?: React.ReactNode;
+    className?: string;
+}
+
+/**
+ * A message that belongs to its place and stays there, as long as what it says holds: a turn that failed,
+ * a view that did not load, a token that was refused. What the user did elsewhere is a notice instead.
+ */
+export function Callout({ level = 'info', children, detail, action, className = '' }: CalloutProps) {
+    return (
+        <div className={`ta-callout ta-level-${level} ${className}`} role={level === 'error' ? 'alert' : undefined}>
+            <Icon icon={LEVEL_ICONS[level]} size={16} className="ta-level-icon" />
+            <div className="ta-callout-text">
+                <div className="ta-callout-message">{children}</div>
+                {detail && <div className="ta-callout-detail">{detail}</div>}
+            </div>
+            {action}
+        </div>
+    );
+}

package/src/browser/components/chat-list.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'bun:test';
+import type { TaSessionInfo } from '@celljs/ta-protocol';
+import { ChatListUtil } from './chat-list';
+
+function session(sessionId: string, options: Partial<TaSessionInfo> = {}): TaSessionInfo {
+    return { sessionId, piSessionId: sessionId, cwd: '/w', isStreaming: false, messageCount: 1, attached: 0, createdAt: 0, updatedAt: 0, ...options };
+}
+
+const t = ((id: string) => id) as Parameters<typeof ChatListUtil.title>[1];
+const DAY = 24 * 60 * 60_000;
+
+describe('ChatListUtil', () => {
+    const sessions = [
+        session('a', { cwd: '/w/ta', updatedAt: 1, firstMessage: 'Fix the login page' }),
+        session('p1', { group: '@celljs/ta-channels', updatedAt: 9 }),
+        session('b', { cwd: '/w/docs', updatedAt: 5, sessionName: 'Release notes' }),
+        session('c', { cwd: '/w/ta', updatedAt: 3 }),
+    ];
+
+    it('names the directories and packages of the conversations, the latest first, with a color each', () => {
+        const sources = ChatListUtil.sources(sessions);
+        expect(sources.map(s => [s.key, s.label, s.cwd, s.count])).toEqual([
+            ['pkg:@celljs/ta-channels', 'ta-channels', undefined, 1],
+            ['dir:/w/docs', 'docs', '/w/docs', 1],
+            ['dir:/w/ta', 'ta', '/w/ta', 2],
+        ]);
+        expect(sources.map(s => s.initial)).toEqual(['C', 'D', 'T']);
+        expect(new Set(sources.map(s => s.tone)).size).toBe(3);
+        expect(ChatListUtil.sources(sessions.slice(0, 2)).find(s => s.key === 'dir:/w/ta')?.tone).toBe(sources.find(s => s.key === 'dir:/w/ta')?.tone);
+    });
+
+    it('filters by source and by words of the title or the place, the latest first', () => {
+        expect(ChatListUtil.filter(sessions, '', '', t).map(s => s.sessionId)).toEqual(['p1', 'b', 'c', 'a']);
+        expect(ChatListUtil.filter(sessions, 'dir:/w/ta', '', t).map(s => s.sessionId)).toEqual(['c', 'a']);
+        expect(ChatListUtil.filter(sessions, '', 'LOGIN', t).map(s => s.sessionId)).toEqual(['a']);
+        expect(ChatListUtil.filter(sessions, '', 'docs', t).map(s => s.sessionId)).toEqual(['b']);
+    });
+
+    it('groups by the local day', () => {
+        const now = new Date(2026, 10, 10, 15).getTime();
+        const at = (days: number) => session(String(days), { updatedAt: now - days * DAY });
+        const sections = ChatListUtil.sections([at(0), at(1), at(3), at(30)], now);
+        expect(sections.map(s => [s.id, s.sessions.map(x => x.sessionId)])).toEqual([
+            ['ta.time.today', ['0']],
+            ['ta.time.yesterday', ['1']],
+            ['ta.time.week', ['3']],
+            ['ta.time.earlier', ['30']],
+        ]);
+    });
+
+    it('tells the time of today and the day of before', () => {
+        const now = new Date(2026, 10, 10, 20).getTime();
+        expect(ChatListUtil.clock(new Date(2026, 10, 10, 9, 5).getTime(), now)).toBe('09:05');
+        expect(ChatListUtil.clock(new Date(2026, 10, 8, 9, 5).getTime(), now)).toBe('11/8');
+    });
+
+    it('titles a conversation by its name, else its first message, and marks it by the first letter of its place', () => {
+        expect(ChatListUtil.title(session('a', { sessionName: 'Login', firstMessage: 'Fix it' }), t)).toBe('Login');
+        expect(ChatListUtil.title(session('a', { firstMessage: 'Fix it' }), t)).toBe('Fix it');
+        expect(ChatListUtil.title(session('a'), t)).toBe('ta.chat.new');
+        expect(ChatListUtil.initial('ta')).toBe('T');
+        expect(ChatListUtil.initial('.config')).toBe('C');
+        expect(ChatListUtil.initial('工作区')).toBe('工');
+        expect(ChatListUtil.label('@celljs/ta-channels')).toBe('ta-channels');
+    });
+});