@celljs/ta-web 0.0.0-stage → 4.6.0

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

@@ -0,0 +1,553 @@
+import { LayoutGrid, MessageSquare, PanelTop } from 'lucide-react';
+import * as React from 'react';
+import { ChatView, useChat } from '../chat/chat-view';
+import { ExtensionBoundary, MessageRenderers, SessionAvatars } from '../extension/extension-view';
+import type { WebIcon, WebLabel } from '../extension/web-extension-api';
+import { type WebEditorEntry, WebLabelUtil, type WebViewEntry } from '../extension/web-extension-protocol';
+import { useOpenLink, usePersisted, useSettings, useWebExtensions, useWorkbench } from '../hooks';
+import { message } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { SIGN_IN_EVENT } from '../notices/notices';
+import { THEME_COLORS } from '../settings/settings';
+import type { Theme } from '../settings/settings-protocol';
+import { type StateSpec, StateUtil } from '../state/state-protocol';
+import type { PaneSpec } from '../util/layout';
+import { AccountMenu } from './account-menu';
+import { AuthUtil, LoginPage, useAuthProviders } from './auth-view';
+import { ChatList } from './chat-list';
+import { ConnectionBar } from './connection-bar';
+import { Dino } from './dino';
+import { EditorArea, WorkbenchCards } from './editor-area';
+import { IconButton, SidebarLeft } from './icon';
+import { OpenLink } from './link';
+import { LinkDialog } from './link-dialog';
+import { ManageMenu } from './manage-menu';
+import { FileUrls } from './media';
+import { NoticeCenter } from './notice-center';
+import { type SettingsSection, SettingsView } from './settings-view';
+import { paneStyle, Sash, usePane } from './split-pane';
+import { WorkbenchToggle, WorkbenchToggleContext } from './workbench-toggle';
+import { SignIn, useDocument } from './workbench-view';
+
+/**
+ * What the sidebar shows in this tab: `` for the chats, else the id of a sidebar view. Until the user picks
+ * a tab, the first sidebar view of web extensions (the agents), or the chats if there is none.
+ */
+const FIRST_SIDE = '*';
+/** The user put off signing in to a model, in this tab: the page shows the app until the tab is reopened. */
+const LOGIN_LATER: StateSpec<boolean> = { key: 'login.later', tier: 'tab', initial: false, parse: StateUtil.boolean };
+
+const SIDE: StateSpec<string> = { key: 'side', tier: 'tab', initial: FIRST_SIDE, parse: StateUtil.string };
+/** Whether the workbench on the right shows, in this browser, whose screen decides. */
+const RIGHT: StateSpec<boolean> = { key: 'panel', tier: 'device', initial: true, parse: StateUtil.boolean };
+/** The panel sits beside the conversation from this width; below it, it opens over it. */
+const PANEL_INLINE = '(min-width: 1100px)';
+/** Sessions change with other clients too; while the tab is visible they are read again now and then. */
+const REFRESH_MS = 5000;
+
+/** The cards of web extensions, as a tool of the workbench and its tab. */
+const CARDS_ID = 'ta/cards';
+const CARDS_TAB_ID = `view:${CARDS_ID}`;
+
+function cardsTab(title: WebLabel): WebEditorEntry {
+    return { id: CARDS_TAB_ID, extension: 'ta', title, icon: LayoutGrid, render: WorkbenchCards };
+}
+
+const SIDEBAR: PaneSpec = { key: 'sidebar', initial: 300, min: 200, max: 520 };
+const EDITOR: PaneSpec = { key: 'editor', initial: 480, min: 320, max: 1200 };
+/** The width of the navigation rail, in style.ts. */
+const RAIL = 56;
+
+/** Whether the right of the page (editors and cards) shows; on narrow screens it starts hidden. */
+function useRight(): [boolean, () => void, () => void] {
+    const [kept, keep] = usePersisted(RIGHT);
+    // On a narrow screen it opens over the conversation: only when asked, in this page.
+    const [inline] = React.useState(() => matchMedia(PANEL_INLINE).matches);
+    const [asked, setAsked] = React.useState(false);
+    const open = kept && (inline || asked);
+    const set = React.useCallback(
+        (next: boolean) => {
+            setAsked(next);
+            keep(next);
+        },
+        [keep],
+    );
+    const toggle = React.useCallback(() => set(!open), [set, open]);
+    const reveal = React.useCallback(() => set(true), [set]);
+    // `set` is stable, so `reveal` is too: effects may depend on it.
+    return [open, toggle, reveal];
+}
+
+/** The pages on the rail: the pages a sidebar view lists are reached from it, and show beside it. */
+function railPages(views: WebViewEntry[]): WebViewEntry[] {
+    const listed = new Set(views.flatMap(view => (view.location === 'sidebar' ? (view.pages ?? []) : [])));
+    return views.filter(view => view.location === 'page' && !listed.has(view.id));
+}
+
+/** Cmd/Ctrl+B shows or hides the sidebar and Cmd/Ctrl+, opens the settings, as in an IDE. */
+function useKeys(toggle: () => void, openSettings: () => void) {
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => {
+            if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey) {
+                return;
+            }
+            const key = event.key.toLowerCase();
+            if (key === 'b') {
+                event.preventDefault();
+                toggle();
+            } else if (key === ',') {
+                event.preventDefault();
+                openSettings();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [toggle, openSettings]);
+}
+
+interface RailItemProps {
+    label: string;
+    active: boolean;
+    onClick(): void;
+    children: React.ReactNode;
+}
+
+function RailItem({ label, active, onClick, children }: RailItemProps) {
+    return (
+        <button type="button" className={`ta-rail-item ${active ? 'ta-active' : ''}`} title={label} aria-label={label} aria-pressed={active} onClick={onClick}>
+            {children}
+        </button>
+    );
+}
+
+interface RailProps {
+    views: WebViewEntry[];
+    sideOpen: boolean;
+    onToggleSide(): void;
+    page: string;
+    onPage(id: string): void;
+    onSettings(section?: SettingsSection): void;
+    settingsShown: boolean;
+}
+
+/** The navigation on the left: the sidebar, whose tabs switch between the chats and the sidebar views; the pages; the gear and the account at the bottom. */
+function Rail({ views, sideOpen, onToggleSide, page, onPage, onSettings, settingsShown }: RailProps) {
+    const t = useT();
+    const [{ server }] = useWorkbench();
+    const item = (view: WebViewEntry, active: boolean, onClick: () => void) => {
+        const Glyph = view.icon ?? PanelTop;
+        return (
+            <RailItem key={view.id} label={WebLabelUtil.text(view.title)} active={active} onClick={onClick}>
+                <Glyph size={20} strokeWidth={1.6} />
+            </RailItem>
+        );
+    };
+    const pages = railPages(views);
+    return (
+        <nav className="ta-rail" aria-label={t('ta.menu')}>
+            {/* The logo shows or hides the sidebar. */}
+            <button
+                type="button"
+                className="ta-rail-logo"
+                title={server ? `${t('ta.sidebar')} · Ta v${server.version}` : t('ta.sidebar')}
+                aria-label={t('ta.sidebar')}
+                aria-expanded={sideOpen}
+                onClick={onToggleSide}
+            >
+                <Dino size={26} />
+            </button>
+            <div className="ta-rail-items">{pages.map(view => item(view, !settingsShown && page === view.id, () => onPage(view.id)))}</div>
+            <ManageMenu onSettings={onSettings} active={settingsShown} />
+            <AccountMenu />
+        </nav>
+    );
+}
+
+/** The tabs on top of the sidebar: the sidebar views of web extensions, then the chats. None with only the chats. */
+function SideTabs({ views, side, onSide }: { views: WebViewEntry[]; side: string; onSide(id: string): void }) {
+    const t = useT();
+    if (views.length === 0) {
+        return null;
+    }
+    const tab = (id: string, label: string, Glyph: WebIcon) => (
+        <button
+            key={id}
+            type="button"
+            role="tab"
+            aria-selected={side === id}
+            className={`ta-side-tab${side === id ? ' ta-active' : ''}`}
+            title={label}
+            aria-label={label}
+            onClick={() => onSide(id)}
+        >
+            <Glyph size={18} strokeWidth={1.7} />
+        </button>
+    );
+    return (
+        <div className="ta-side-tabs" role="tablist" aria-label={t('ta.sidebar')}>
+            {views.map(view => tab(view.id, WebLabelUtil.text(view.title), view.icon ?? PanelTop))}
+            {tab('', t('ta.chat'), MessageSquare)}
+        </div>
+    );
+}
+
+/** A sidebar view of a web extension, under the tabs and its title or its own top bar. */
+function SidebarView({ view, tabs }: { view: WebViewEntry; tabs: React.ReactNode }) {
+    const View = view.component;
+    const Head = view.head;
+    const title = WebLabelUtil.text(view.title);
+    return (
+        <section className="ta-side-view" aria-label={title}>
+            <header className="ta-chats-head">
+                {tabs}
+                {Head ? (
+                    <div className="ta-side-view-head">
+                        <ExtensionBoundary key={view.id} name={title} resetKey={Head}>
+                            <Head />
+                        </ExtensionBoundary>
+                    </div>
+                ) : (
+                    <span className="ta-chats-title">{title}</span>
+                )}
+            </header>
+            <div className="ta-side-view-body">
+                <ExtensionBoundary key={view.id} name={title} resetKey={View}>
+                    <View />
+                </ExtensionBoundary>
+            </div>
+        </section>
+    );
+}
+
+/** Reads the open sessions and the web extensions again while the tab is visible: other clients change them too. */
+/**
+ * The installed app with its title bar hidden draws the bar itself (see .ta-titlebar), but the browser
+ * paints the corners of the window's buttons with theme-color: the traffic lights at the left over the
+ * side columns, its own buttons at the right. So the bar is the colour of the side columns throughout, the
+ * conversation below it too. Otherwise the whole title bar has the conversation's colour, as the sign-in page.
+ */
+function useTitlebarColor(signedIn: boolean, theme: Theme) {
+    React.useEffect(() => {
+        const overlay = matchMedia('(display-mode: window-controls-overlay)');
+        const apply = () => {
+            const meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+            if (meta) {
+                meta.content = THEME_COLORS[theme][overlay.matches && signedIn ? 'side' : 'main'];
+            }
+        };
+        apply();
+        overlay.addEventListener('change', apply);
+        return () => overlay.removeEventListener('change', apply);
+    }, [signedIn, theme]);
+}
+
+function useRefresh(online: boolean) {
+    const [, workbench] = useWorkbench();
+    const [, extensions] = useWebExtensions();
+    React.useEffect(() => {
+        if (!online) {
+            return;
+        }
+        const sessions = () => document.visibilityState === 'visible' && workbench.refresh().catch(() => undefined);
+        const shown = () => {
+            sessions();
+            if (document.visibilityState === 'visible') {
+                extensions.refresh().catch(() => undefined);
+            }
+        };
+        const timer = setInterval(sessions, REFRESH_MS);
+        document.addEventListener('visibilitychange', shown);
+        return () => {
+            clearInterval(timer);
+            document.removeEventListener('visibilitychange', shown);
+        };
+    }, [online, workbench, extensions]);
+}
+
+/**
+ * ta on the web, laid out as an IDE: the navigation, a sidebar (the chats, or a sidebar view of a web
+ * extension), the conversation or a page, the workbench (the tools of web extensions and the tabs they
+ * open), and the panel of their cards.
+ * The sidebar, the tabs and the panel can be resized and collapsed; on narrow screens they open over
+ * the conversation instead.
+ */
+export function AppView() {
+    const t = useT();
+    const [workbench, bench] = useWorkbench();
+    const [extensions, host] = useWebExtensions();
+    const [{ store }, chat] = useChat();
+    const [sideId, setSideId] = usePersisted(SIDE);
+    const [navOpen, setNavOpen] = React.useState(false);
+    /** The settings view is shown in place of the conversation or the page, at that section (`''`: the first). */
+    const [settings, setSettings] = React.useState<SettingsSection>();
+    const openSettings = React.useCallback((section?: SettingsSection) => {
+        setSettings(section ?? '');
+        setNavOpen(false);
+    }, []);
+    const closeSettings = React.useCallback(() => setSettings(undefined), []);
+    const [rightOpen, toggleRight, revealRight] = useRight();
+    const [maximized, setMaximized] = React.useState(false);
+    const [{ theme }, settingsStore] = useSettings();
+    const sidebar = usePane(SIDEBAR);
+    const editor = usePane(EDITOR);
+    const online = workbench.status === 'online';
+    // Files named in replies outside a conversation (channels, pages) are in the server's directory.
+    const fileUrl = React.useCallback((path: string) => bench.workspace.fileUrl(path), [bench]);
+    const openLink = useOpenLink(undefined);
+    useDocument();
+    useRefresh(online);
+    React.useEffect(() => {
+        void bench.start();
+    }, [bench]);
+    /** The conversation the page opens with is shown: those shown after are the user's doing. */
+    const started = React.useRef(false);
+    React.useEffect(() => {
+        if (online) {
+            void chat.start().then(() => {
+                started.current = true;
+            });
+        }
+    }, [online, chat]);
+    // A tab a web extension opens is meant to be seen, unless it opens again behind the others as the page loads.
+    const { activeEditor, focus } = extensions;
+    const revealEditor = editor.reveal;
+    React.useEffect(() => {
+        if (focus > 0) {
+            revealRight();
+            revealEditor();
+        }
+    }, [focus, revealRight, revealEditor]);
+    // A web extension shows another conversation: the conversation, not a page or a drawer, is then in front.
+    React.useEffect(() => {
+        host.setSessionSwitcher(async sessionId => {
+            await chat.show(sessionId);
+            setNavOpen(false);
+        });
+        return () => host.setSessionSwitcher(undefined);
+    }, [host, chat]);
+    // A page shown from the sidebar on a phone: the drawer goes; so do the settings, for the page or the conversation shown.
+    const { page } = extensions;
+    const shownSession = store?.sessionId;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: follows the page
+    React.useEffect(() => setNavOpen(false), [page]);
+    // 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.
+    // 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) {
+            setSideId('');
+        }
+    }, [shownSession]);
+    // The cards of web extensions are a tab of the workbench: it opens when the first card comes, if nothing else is open there, and goes with the last.
+    const hasCards = extensions.widgets.some(widget => widget.placement === 'panel');
+    const cardsOpen = extensions.editors.some(candidate => candidate.id === CARDS_TAB_ID);
+    const openCards = React.useCallback(() => host.open(cardsTab(() => message(settingsStore.state.language, 'ta.workbench.cards'))), [host, settingsStore]);
+    const quiet = extensions.editors.length === 0 && rightOpen && !editor.collapsed;
+    // Only when cards come: not when the user closes their tab.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: follows whether there are cards
+    React.useEffect(() => {
+        if (hasCards && !cardsOpen && quiet) {
+            openCards();
+        }
+    }, [hasCards]);
+    React.useEffect(() => {
+        if (!hasCards && cardsOpen) {
+            void host.closeEditor(CARDS_TAB_ID);
+        }
+    }, [hasCards, cardsOpen, host]);
+    const cardsTool: WebViewEntry = {
+        id: CARDS_ID,
+        extension: 'ta',
+        title: () => message(settingsStore.state.language, 'ta.workbench.cards'),
+        component: WorkbenchCards,
+        icon: LayoutGrid,
+        location: 'panel',
+        order: 0,
+    };
+
+    const view = extensions.views.find(candidate => candidate.id === page && candidate.location === 'page');
+    const sideViews = extensions.views.filter(candidate => candidate.location === 'sidebar');
+    const sideView = sideId === FIRST_SIDE ? sideViews[0] : sideViews.find(candidate => candidate.id === sideId);
+    const side = sideView ? sideView.id : '';
+    const showPage = (id: string) => {
+        host.showPage(id);
+        setNavOpen(false);
+        setSettings(undefined);
+    };
+    const showSide = (id: string) => setSideId(id);
+    const tabs = <SideTabs views={sideViews} side={side} onSide={showSide} />;
+    const tools = [...(hasCards ? [cardsTool] : []), ...extensions.views.filter(candidate => candidate.location === 'panel')];
+    const openTool = (id: string) => (id === CARDS_ID ? openCards() : host.openView(id));
+    // The workbench: the tabs open, or the tools that open there.
+    const editors = extensions.editors.length > 0 || tools.length > 0;
+    // The settings take the place of the conversation and of the workbench, as a page of their own.
+    const showEditors = rightOpen && editors && !editor.collapsed && settings === undefined;
+    // The settings and the pages of the rail take the place of the sidebar too, as on their own; in the drawer of a narrow screen the sidebar stays.
+    const full = settings !== undefined || (view !== undefined && railPages(extensions.views).includes(view));
+    const sideShown = navOpen || (!sidebar.collapsed && !full);
+    // Over such a page, the logo (and Mod+B) goes back to the conversation, with the sidebar.
+    const toggleSide = () => {
+        if (navOpen) {
+            setNavOpen(false);
+        } else if (full) {
+            setSettings(undefined);
+            if (view) {
+                host.showPage('');
+            }
+            sidebar.reveal();
+        } else {
+            sidebar.toggle();
+        }
+    };
+    useKeys(toggleSide, openSettings);
+    useTitlebarColor(workbench.status !== 'signed-out', theme);
+    const [providers, reloadProviders] = useAuthProviders(online);
+    const [later, setLater] = usePersisted(LOGIN_LATER);
+    /** A call failed for want of a sign-in (SIGN_IN_EVENT): the page of sign-in, even if the user put it off. */
+    const [asked, setAsked] = React.useState(false);
+    React.useEffect(() => {
+        const ask = () => {
+            setAsked(true);
+            reloadProviders();
+        };
+        window.addEventListener(SIGN_IN_EVENT, ask);
+        return () => window.removeEventListener(SIGN_IN_EVENT, ask);
+    }, [reloadProviders]);
+
+    if (workbench.status === 'signed-out') {
+        return <SignIn workbench={bench} error={workbench.error} />;
+    }
+    if (online && providers && (asked || (!later && !AuthUtil.signedIn(providers)))) {
+        return (
+            <LoginPage
+                onLater={() => {
+                    setLater(true);
+                    setAsked(false);
+                }}
+                onSignedIn={() => {
+                    setAsked(false);
+                    reloadProviders();
+                }}
+            />
+        );
+    }
+    const toggleWorkbench = () => {
+        if (showEditors) {
+            toggleRight();
+        } else {
+            revealRight();
+            editor.reveal();
+        }
+    };
+    const View = view?.component;
+    // What the columns beside the conversation and the editors take, so that the editors never take more than the conversation.
+    const sideWidths = {
+        '--ta-left': `${RAIL + (sideShown ? sidebar.size : 0)}px`,
+    } as React.CSSProperties;
+    const classes = ['ta-app', navOpen && 'ta-nav-open', showEditors && 'ta-editors-open', showEditors && maximized && 'ta-workbench-max'];
+    const toggle = editors ? { open: showEditors, toggle: toggleWorkbench } : undefined;
+    const app = (
+        <MessageRenderers.Provider value={extensions.renderers}>
+            <SessionAvatars.Provider value={extensions.avatars}>
+                <WorkbenchToggleContext.Provider value={toggle}>
+                    <div className={classes.filter(Boolean).join(' ')} style={sideWidths}>
+                        {navOpen && <button type="button" className="ta-scrim" aria-label={t('ta.close')} onClick={() => setNavOpen(false)} />}
+                        <div className="ta-nav">
+                            <Rail
+                                views={extensions.views}
+                                sideOpen={sideShown}
+                                onToggleSide={toggleSide}
+                                page={view ? view.id : ''}
+                                onPage={showPage}
+                                onSettings={openSettings}
+                                settingsShown={settings !== undefined}
+                            />
+                            {sideShown && (
+                                <div className="ta-sidebar" style={paneStyle(sidebar)}>
+                                    {sideView ? (
+                                        <SidebarView view={sideView} tabs={tabs} />
+                                    ) : (
+                                        <ChatList
+                                            tabs={tabs}
+                                            sessions={workbench.sessions}
+                                            selected={view ? undefined : store?.sessionId}
+                                            chat={chat}
+                                            onPicked={() => {
+                                                setNavOpen(false);
+                                                setSettings(undefined);
+                                                if (view) {
+                                                    showPage('');
+                                                }
+                                            }}
+                                        />
+                                    )}
+                                    <Sash pane={sidebar} side="start" label={t('ta.layout.sidebar')} />
+                                </div>
+                            )}
+                        </div>
+                        <main className="ta-main">
+                            <ConnectionBar />
+                            {settings !== undefined ? (
+                                <SettingsView section={settings || undefined} onClose={closeSettings} onMenu={() => setNavOpen(true)} />
+                            ) : View ? (
+                                <>
+                                    {/* The pages of ta draw their own head on wide screens, with the button of the workbench. */}
+                                    <header className={`ta-main-head ${view.extension.startsWith('builtin:') ? 'ta-narrow-only' : ''}`}>
+                                        <IconButton icon={SidebarLeft} label={t('ta.sidebar')} className="ta-narrow-only" onClick={() => setNavOpen(true)} />
+                                        {view.head ? (
+                                            <div className="ta-main-head-view">
+                                                <ExtensionBoundary key={view.id} name={WebLabelUtil.text(view.title)} resetKey={view.head}>
+                                                    <view.head />
+                                                </ExtensionBoundary>
+                                            </div>
+                                        ) : (
+                                            <div className="ta-main-title">
+                                                <span>{WebLabelUtil.text(view.title)}</span>
+                                            </div>
+                                        )}
+                                        <WorkbenchToggle />
+                                    </header>
+                                    <ExtensionBoundary key={view.id} name={WebLabelUtil.text(view.title)} resetKey={View}>
+                                        <View />
+                                    </ExtensionBoundary>
+                                </>
+                            ) : (
+                                <ChatView widgets={extensions.widgets} onMenu={() => setNavOpen(true)} />
+                            )}
+                        </main>
+                        {showEditors && (
+                            <div className="ta-editors-pane" style={paneStyle(editor)}>
+                                <Sash pane={editor} side="end" label={t('ta.layout.editor')} />
+                                <EditorArea
+                                    editors={extensions.editors}
+                                    active={activeEditor}
+                                    views={tools}
+                                    onShow={id => host.showEditor(id)}
+                                    onClose={ids => void host.closeEditors(ids)}
+                                    onPin={id => host.pinEditor(id)}
+                                    onOpenView={openTool}
+                                    onHide={editor.toggle}
+                                    maximized={maximized}
+                                    onMaximize={() => setMaximized(!maximized)}
+                                />
+                            </div>
+                        )}
+                        <NoticeCenter />
+                        <LinkDialog />
+                    </div>
+                </WorkbenchToggleContext.Provider>
+            </SessionAvatars.Provider>
+        </MessageRenderers.Provider>
+    );
+    return (
+        <FileUrls.Provider value={fileUrl}>
+            <OpenLink.Provider value={openLink}>{app}</OpenLink.Provider>
+        </FileUrls.Provider>
+    );
+}

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+/** The two ways to sign in to a provider of models, each with a small picture. */
+export type AuthKind = 'oauth' | 'api_key';
+
+const Frame = () => <rect className="ta-pic-frame" x="1" y="1" width="158" height="94" rx="9" />;
+const Line = ({ x, y, w }: { x: number; y: number; w: number }) => <rect className="ta-pic-line" x={x} y={y} width={w} height="5" rx="2.5" />;
+
+/** An account: the provider's page in a browser, signed in. */
+function Account() {
+    return (
+        <>
+            <Frame />
+            <rect className="ta-pic-pane" x="1" y="1" width="158" height="18" rx="9" />
+            <circle className="ta-pic-line" cx="12" cy="10" r="2.5" />
+            <circle className="ta-pic-line" cx="20" cy="10" r="2.5" />
+            <rect className="ta-pic-box" x="32" y="5" width="96" height="10" rx="5" />
+            <Line x={52} y={32} w={56} />
+            <rect className="ta-pic-accent" x="40" y="46" width="80" height="22" rx="11" />
+            <circle className="ta-pic-mark" cx="56" cy="57" r="6" />
+            <path className="ta-pic-tick" d="M53.3 57l1.9 1.9 3.6-3.8" />
+            <rect className="ta-pic-mark ta-pic-soft" x="68" y="54.5" width="40" height="5" rx="2.5" />
+            <Line x={60} y={78} w={40} />
+        </>
+    );
+}
+
+/** A key: typed in once, kept on this computer. */
+function Key() {
+    return (
+        <>
+            <Frame />
+            <Line x={14} y={18} w={64} />
+            <rect className="ta-pic-accent" x="14" y="34" width="132" height="24" rx="8" />
+            <circle className="ta-pic-mark" cx="30" cy="46" r="5" />
+            <rect className="ta-pic-mark" x="34" y="44.5" width="11" height="3" rx="1.5" />
+            <rect className="ta-pic-mark" x="41" y="44.5" width="3" height="6" rx="1.5" />
+            {[0, 1, 2, 3, 4, 5, 6, 7].map(i => (
+                <circle key={i} className="ta-pic-mark ta-pic-soft ta-pic-dot" cx={58 + i * 10} cy="46" r="2.5" />
+            ))}
+            <rect className="ta-pic-box" x="96" y="68" width="50" height="15" rx="7.5" />
+        </>
+    );
+}
+
+const PICTURES: Record<AuthKind, () => React.ReactElement> = { oauth: Account, api_key: Key };
+
+export function AuthPicture({ kind }: { kind: AuthKind }): React.ReactElement {
+    const Picture = PICTURES[kind];
+    return (
+        <svg className="ta-pic" viewBox="0 0 160 96" aria-hidden="true">
+            <Picture />
+        </svg>
+    );
+}