@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/ta-avatar.spec.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'bun:test';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { frame } from '../avatar/dino-avatar';
+import { DinoMotion } from '../avatar/dino-motion';
+import { TaAvatar } from './ta-avatar';
+
+describe('TaAvatar', () => {
+    it('is the logo alone without a mark', () => {
+        const html = renderToStaticMarkup(<TaAvatar mood="working" size={24} />);
+        expect(html.startsWith('<svg')).toBe(true);
+        expect(html).toContain('ta-avatar-working');
+        expect(html).not.toContain('ta-avatar-mark');
+    });
+
+    it('starts in the first pose of its mood, and of its walk when it roams', () => {
+        expect(renderToStaticMarkup(<TaAvatar mood="working" />)).toContain(frame(DinoMotion.pose('working', 0)).skin);
+        expect(renderToStaticMarkup(<TaAvatar roam />)).toContain(frame(DinoMotion.pose('idle', 0, true)).skin);
+    });
+
+    it('writes the mark as text, never as markup', () => {
+        const html = renderToStaticMarkup(<TaAvatar size={40} mark="<b" />);
+        expect(html).toContain('ta-avatar-mark');
+        expect(html).toContain('&lt;b');
+        expect(html).not.toContain('<b<');
+    });
+});

package/src/browser/components/ta-avatar.tsx

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import { AVATAR_VIEWBOX, DinoAvatar, frame, headAt, type Mood, type Pose } from '../avatar/dino-avatar';
+import { DinoMotion } from '../avatar/dino-motion';
+
+let next = 0;
+
+/** How long a change of mood takes to blend into the new motion, in seconds. */
+const BLEND = 0.45;
+/** How quickly ta turns to the pointer, in seconds (the time to get most of the way). */
+const FOLLOW = 0.18;
+/** From how many pixels on a ta is drawn in full detail. */
+const FINE = 48;
+/** Units of the drawing (its viewBox is 272 wide) from its left and top edge to its origin. */
+const ORIGIN = 8;
+const SPAN = 272;
+
+interface Player {
+    svg: SVGSVGElement;
+    /** Drawn large enough to sweep its side in full detail. */
+    fine: boolean;
+    mood: Mood;
+    roam: boolean;
+    /** When the mood began, and the pose it started from. */
+    since: number;
+    from?: Pose;
+    pose?: Pose;
+    visible: boolean;
+    /** Where it looks, eased toward the pointer, and when it was last drawn. */
+    look: DinoMotion.Look;
+    last: number;
+    /** When it was last poked. */
+    poked: number;
+    /** Where it is on the page, read before any of them is drawn. */
+    box?: DOMRect;
+}
+
+/** One loop of animation frames for every ta on the page; only those on screen move, and none when motion is reduced. */
+const players = new Set<Player>();
+let loop = 0;
+let watcher: IntersectionObserver | undefined;
+/** Where the mouse is on the page; undefined when it is off the page or the device has none. */
+let pointer: { x: number; y: number } | undefined;
+let listening = false;
+
+function listen(): void {
+    if (listening) {
+        return;
+    }
+    listening = true;
+    window.addEventListener(
+        'pointermove',
+        event => {
+            pointer = event.pointerType === 'touch' ? undefined : { x: event.clientX, y: event.clientY };
+        },
+        { passive: true },
+    );
+    document.documentElement.addEventListener('pointerleave', () => {
+        pointer = undefined;
+    });
+    window.addEventListener('blur', () => {
+        pointer = undefined;
+    });
+}
+
+/** Where the pointer is from the head of `player` in units of its drawing, and how much it minds it. */
+function target(player: Player, pose: Pose): DinoMotion.Look {
+    const box = player.box;
+    if (!pointer || !box?.width) {
+        return { x: 0, y: 0, weight: 0 };
+    }
+    const scale = SPAN / box.width;
+    const head = headAt(pose);
+    const x = (pointer.x - box.left) * scale - ORIGIN - head.x;
+    const y = (pointer.y - box.top) * scale - ORIGIN - head.y;
+    // It minds the pointer within a few times its size around it, on the page at least 320 pixels.
+    const reach = Math.max(320, box.width * 3.5) * scale;
+    const distance = Math.hypot(x, y);
+    return { x, y, weight: 1 - Math.min(1, Math.max(0, (distance - reach * 0.5) / (reach * 0.5))) };
+}
+
+function draw(player: Player, now: number): void {
+    const t = (now - player.since) / 1000;
+    let pose = DinoMotion.pose(player.mood, t, player.roam);
+    if (player.from && t < BLEND) {
+        pose = DinoMotion.blend(player.from, pose, t / BLEND);
+    }
+    // Asleep it minds nothing; otherwise it eases toward where the pointer is.
+    const goal = player.mood === 'sleeping' ? { x: 0, y: 0, weight: 0 } : target(player, pose);
+    const dt = Math.min(0.1, Math.max(0, (now - player.last) / 1000));
+    const k = 1 - Math.exp(-dt / FOLLOW);
+    const look = player.look;
+    look.weight += (goal.weight - look.weight) * k;
+    if (goal.weight > 0) {
+        look.x += (goal.x - look.x) * k;
+        look.y += (goal.y - look.y) * k;
+    }
+    player.last = now;
+    pose = DinoMotion.poke(DinoMotion.look(pose, look), (now - player.poked) / 1000);
+    player.pose = pose;
+    const f = frame(pose, player.fine);
+    const svg = player.svg;
+    const set = (part: string, name: string, value: string) => {
+        const element = svg.querySelector(`.ta-dino-${part}`);
+        if (element && element.getAttribute(name) !== value) {
+            element.setAttribute(name, value);
+        }
+    };
+    set('skin', 'd', f.skin);
+    set('far', 'd', f.far);
+    set('wall', 'd', f.wall);
+    set('front', 'transform', f.front);
+    set('arm', 'transform', f.arm);
+    set('eye', 'transform', f.eye);
+    // The slit of the pupil turns to the pointer within the eye, in the eye's own terms.
+    const distance = Math.hypot(look.x, look.y) || 1;
+    const reach = 2.8 * look.weight;
+    set(
+        'pupil',
+        'transform',
+        `translate(${Math.round(((look.x * Math.sign(pose.face || 1)) / distance) * reach * 10) / 10} ${Math.round((look.y / distance) * reach * 10) / 10})`,
+    );
+}
+
+function tick(now: number): void {
+    loop = 0;
+    if (document.documentElement.hasAttribute('data-reduce-motion')) {
+        // Still: the pose each one has now stays; check again in a while.
+        if (players.size) {
+            loop = window.setTimeout(() => requestAnimationFrame(tick), 500);
+        }
+        return;
+    }
+    // Read where they all are first, then draw them all, so the page is laid out once a frame.
+    for (const player of players) {
+        player.box = player.visible && pointer ? player.svg.getBoundingClientRect() : undefined;
+    }
+    for (const player of players) {
+        if (player.visible) {
+            draw(player, now);
+        }
+    }
+    if (players.size) {
+        loop = requestAnimationFrame(tick);
+    }
+}
+
+function start(player: Player): () => void {
+    players.add(player);
+    listen();
+    watcher ??= new IntersectionObserver(entries => {
+        for (const entry of entries) {
+            for (const p of players) {
+                if (p.svg === entry.target) {
+                    p.visible = entry.isIntersecting;
+                }
+            }
+        }
+    });
+    watcher.observe(player.svg);
+    // Poked, it roars; whatever the ta is in (a button, a row) still gets the click.
+    const poke = () => {
+        player.poked = performance.now();
+    };
+    player.svg.addEventListener('pointerdown', poke);
+    if (!loop) {
+        loop = requestAnimationFrame(tick);
+    }
+    return () => {
+        players.delete(player);
+        watcher?.unobserve(player.svg);
+        player.svg.removeEventListener('pointerdown', poke);
+    };
+}
+
+/**
+ * ta, drawn for its mood and moving with it (dino-motion.ts); `size` in pixels; `mark` (one or two
+ * characters) tells agents apart; `roam` lets the big ta of an empty page walk to and fro.
+ */
+export function TaAvatar({
+    mood = 'idle',
+    size = 40,
+    mark,
+
+    className = '',
+    roam = false,
+}: {
+    mood?: Mood;
+    size?: number;
+    mark?: string;
+    className?: string;
+    roam?: boolean;
+}) {
+    const id = React.useMemo(() => `ta-${++next}`, []);
+    const svgRef = React.useRef<SVGSVGElement>(null);
+    const player = React.useRef<Player | undefined>(undefined);
+    // The markup changes with the mood only (the eye, the mark); the frames move what is in it.
+    const markup = React.useMemo(() => DinoAvatar.render(mood, id, player.current?.pose ?? DinoMotion.pose(mood, 0, roam)), [mood, id, roam]);
+    const label = DinoAvatar.markText(mark);
+
+    React.useLayoutEffect(() => {
+        const svg = svgRef.current;
+        if (!svg || typeof requestAnimationFrame === 'undefined' || typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const current = player.current;
+        const now = performance.now();
+        if (current) {
+            current.svg = svg;
+            current.fine = size >= FINE;
+            if (current.mood !== mood || current.roam !== roam) {
+                current.from = current.pose;
+                current.mood = mood;
+                current.roam = roam;
+                current.since = now;
+            }
+            draw(current, now);
+            return;
+        }
+        player.current = { svg, fine: size >= FINE, mood, roam, since: now, visible: true, look: { x: 0, y: 0, weight: 0 }, last: now, poked: -Infinity };
+    }, [mood, roam, size]);
+
+    React.useEffect(() => {
+        const current = player.current;
+        return current ? start(current) : undefined;
+    }, []);
+
+    const svg = (
+        <svg
+            ref={svgRef}
+            className={`ta-avatar ta-avatar-${mood} ${label ? '' : className}`}
+            width={size}
+            height={size}
+            viewBox={AVATAR_VIEWBOX}
+            aria-hidden="true"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: markup made here from constants, nothing from outside
+            dangerouslySetInnerHTML={{ __html: markup }}
+        />
+    );
+    if (!label) {
+        return svg;
+    }
+    // The mark is text from outside (a name of an agent): React writes it, never the markup above.
+    return (
+        <span className={`ta-avatar-marked ${className}`} style={{ width: size, height: size }}>
+            {svg}
+            <span className="ta-avatar-mark" style={{ fontSize: Math.max(8, Math.round(size * 0.26)) }}>
+                {label}
+            </span>
+        </span>
+    );
+}

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

@@ -0,0 +1,186 @@
+import type { ToolRun } from '@celljs/ta-client';
+import { ChevronRight, ChevronUp, FileCode2 } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { MessageUtil, type ToolOutput } from '../util/message';
+import { type CallStatus, type NestedCall, ToolUtil } from '../util/tool';
+import { DiffView } from './diff-view';
+import { Icon } from './icon';
+import { CodeBlock } from './markdown';
+
+const OUTPUT_LINES = 12;
+
+export interface ToolViewProps {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+    /** The live run, while this client watched it. */
+    run?: ToolRun;
+    /** The tool result message. */
+    message?: ToolOutput;
+    /** Every run of the session by tool call id: the nested calls of a codemode script are among them. */
+    runs: Record<string, ToolRun>;
+}
+
+/** The state of a call as the color of a dot: it pulses while the call runs. */
+function StatusDot({ status }: { status: CallStatus }) {
+    return <span className={`ta-status ta-status-${status}`} />;
+}
+
+function Output({ text }: { text: string }) {
+    const t = useT();
+    const [open, setOpen] = React.useState(false);
+    // The new line at the end of an output is not a line to show.
+    const trimmed = text.replace(/\n+$/, '');
+    const { text: shown, hidden } = open ? { text: trimmed, hidden: 0 } : MessageUtil.tail(trimmed, OUTPUT_LINES);
+    return (
+        <div className="ta-output">
+            {hidden > 0 && (
+                <button type="button" className="ta-link ta-more" onClick={() => setOpen(true)}>
+                    <Icon icon={ChevronUp} size={13} /> {t('ta.tool.earlier', { count: hidden })}
+                </button>
+            )}
+            <pre>{shown}</pre>
+        </div>
+    );
+}
+
+interface ToolRowProps {
+    name: string;
+    args: Record<string, unknown>;
+    status: CallStatus;
+    /** At the end of the line. */
+    trailing?: React.ReactNode;
+    /** What opens under the line; none: the line does not open. */
+    details?: React.ReactNode;
+}
+
+/** One step in one line: a dot for its state and what it does; a click opens what it did. */
+function ToolRow({ name, args, status, trailing, details }: ToolRowProps) {
+    const t = useT();
+    const [open, setOpen] = React.useState(false);
+    const summary = ToolUtil.summary(name, args);
+    const line = (
+        <>
+            <StatusDot status={status} />
+            <span className="ta-tool-verb">{summary.verb ? t(summary.verb) : name}</span>
+            {summary.target && <span className={`ta-tool-target ${summary.code ? 'ta-mono' : ''}`}>{summary.target}</span>}
+            {details ? <Icon icon={ChevronRight} size={13} className="ta-tool-chevron" /> : <span className="ta-tool-chevron" />}
+        </>
+    );
+    return (
+        <div className={`ta-tool ta-tool-${status}`}>
+            <div className="ta-tool-line">
+                {details ? (
+                    <button type="button" className="ta-tool-title" aria-expanded={open} onClick={() => setOpen(!open)}>
+                        {line}
+                    </button>
+                ) : (
+                    <div className="ta-tool-title">{line}</div>
+                )}
+                {/* The same slot on every line, so that the lines end alike. */}
+                <span className="ta-tool-trailing">{trailing}</span>
+            </div>
+            {details && open && <div className="ta-tool-body">{details}</div>}
+        </div>
+    );
+}
+
+/** What a call of a tool did, under its line once opened: the output, the diff, the file it wrote. */
+function details(name: string, args: Record<string, unknown>, output: ToolOutput | undefined, status: CallStatus): React.ReactNode {
+    const text = MessageUtil.text(output?.content);
+    if (status === 'error') {
+        return text && <Output text={text} />;
+    }
+    switch (name) {
+        case 'edit': {
+            const diff = typeof output?.details?.diff === 'string' ? output.details.diff : '';
+            return diff && <DiffView diff={diff} />;
+        }
+        case 'write':
+            return typeof args.content === 'string' && args.content && <Output text={args.content} />;
+        default:
+            return text && <Output text={text} />;
+    }
+}
+
+/** One call of a tool, in one line that opens to what it did. */
+export const ToolView = React.memo(
+    ToolCall,
+    // Only a codemode script shows other runs (its nested calls); the rest draw again when their own run or result changes.
+    (previous, next) =>
+        previous.id === next.id &&
+        previous.name === next.name &&
+        previous.args === next.args &&
+        previous.run === next.run &&
+        previous.message === next.message &&
+        (next.name !== 'codemode' || previous.runs === next.runs),
+);
+
+function ToolCall({ id, name, args, run, message, runs }: ToolViewProps) {
+    const output = MessageUtil.output(run, message);
+    const status = MessageUtil.status(run, output);
+    if (name === 'codemode') {
+        return <CodemodeView id={id} args={args} output={output} status={status} runs={runs} />;
+    }
+    return <ToolRow name={name} args={args} status={status} details={details(name, args, output, status) || undefined} />;
+}
+
+interface CodemodeViewProps {
+    id: string;
+    args: Record<string, unknown>;
+    output?: ToolOutput;
+    status: CallStatus;
+    runs: Record<string, ToolRun>;
+}
+
+/**
+ * A codemode script shows as the calls it made, each a step of its own; the script and what it returned
+ * open from a small button. Before its first call, or without calls, it is one step: the script.
+ */
+function CodemodeView({ id, args, output, status, runs }: CodemodeViewProps) {
+    const t = useT();
+    const [showScript, setShowScript] = React.useState(false);
+    const code = typeof args.code === 'string' ? args.code : '';
+    const result = MessageUtil.scriptOutput(MessageUtil.text(output?.content)).trim();
+    const calls = ToolUtil.nestedCalls(id, output, runs);
+    const script = (
+        <>
+            <CodeBlock code={code} language="js" />
+            {result && <Output text={result} />}
+        </>
+    );
+    if (!calls.length) {
+        return <ToolRow name="codemode" args={args} status={status} details={script} />;
+    }
+    const label = t(showScript ? 'ta.tool.hideScript' : 'ta.tool.showScript');
+    const toggle = (
+        <button
+            type="button"
+            className={`ta-tool-script ${showScript ? 'ta-on' : ''}`}
+            title={label}
+            aria-label={label}
+            aria-pressed={showScript}
+            onClick={() => setShowScript(!showScript)}
+        >
+            <Icon icon={FileCode2} size={13} />
+        </button>
+    );
+    // A script that failed after its calls went well: one more step, the script, whose output says what went wrong.
+    const failedAlone = status === 'error' && !calls.some(call => call.status === 'error');
+    return (
+        <div className="ta-tool-group">
+            {calls.map((call, index) => (
+                <NestedRow key={call.key} call={call} trailing={index === 0 ? toggle : undefined} />
+            ))}
+            {failedAlone && <ToolRow name="codemode" args={{ code }} status="error" details={result && <Output text={result} />} />}
+            {showScript && <div className="ta-tool-body">{script}</div>}
+        </div>
+    );
+}
+
+function NestedRow({ call, trailing }: { call: NestedCall; trailing?: React.ReactNode }) {
+    const shown = details(call.name, call.args, call.run?.result as ToolOutput | undefined, call.status);
+    const error = call.status === 'error' && call.error ? <Output text={call.error} /> : undefined;
+    return <ToolRow name={call.name} args={call.args} status={call.status} trailing={trailing} details={shown || error || undefined} />;
+}

package/src/browser/components/trusted-domains.tsx

@@ -0,0 +1,60 @@
+import { Plus, Trash2 } from 'lucide-react';
+import * as React from 'react';
+import { useSettings } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { Icon, IconButton } from './icon';
+import { Row } from './settings-controls';
+
+/** The hosts whose pages open outside of Ta without asking (Settings.trustedDomains). */
+export function TrustedDomains() {
+    const t = useT();
+    const [{ settings }, store] = useSettings();
+    const [text, setText] = React.useState('');
+    const domains = settings.trustedDomains;
+    const add = () => {
+        const domain = text
+            .trim()
+            .toLowerCase()
+            .replace(/^[a-z]+:\/\//, '')
+            .replace(/\/.*$/, '');
+        if (domain && !domains.includes(domain)) {
+            store.update({ trustedDomains: [...domains, domain] });
+        }
+        setText('');
+    };
+    return (
+        <>
+            <Row label={t('ta.settings.trustedDomains')} description={t('ta.settings.trustedDomainsHint')} stacked>
+                <form
+                    className="ta-trusted-add"
+                    onSubmit={event => {
+                        event.preventDefault();
+                        add();
+                    }}
+                >
+                    <input
+                        className="ta-input"
+                        value={text}
+                        placeholder="github.com"
+                        aria-label={t('ta.settings.trustedDomains')}
+                        spellCheck={false}
+                        onChange={event => setText(event.target.value)}
+                    />
+                    <button type="submit" className="ta-button" disabled={!text.trim()}>
+                        <Icon icon={Plus} size={14} /> {t('ta.settings.trustedDomainsAdd')}
+                    </button>
+                </form>
+            </Row>
+            {domains.length === 0 && <Row label={t('ta.settings.trustedDomainsEmpty')} />}
+            {domains.map(domain => (
+                <Row key={domain} label={domain}>
+                    <IconButton
+                        icon={Trash2}
+                        label={t('ta.settings.trustedDomainsRemove', { host: domain })}
+                        onClick={() => store.update({ trustedDomains: domains.filter(other => other !== domain) })}
+                    />
+                </Row>
+            ))}
+        </>
+    );
+}

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

@@ -0,0 +1,47 @@
+import type { TaDirEntry } from '@celljs/ta-protocol';
+import * as React from 'react';
+import type { WebComposerProps } from '../extension/web-extension-api';
+import { useT } from '../i18n/use-t';
+import type { TaNotices } from '../notices/notices-protocol';
+import { ComposerUtil } from '../util/composer';
+import { ComposerBox } from './composer-box';
+import { DirectoryButton } from './folder-picker';
+
+export interface WebComposerHostProps extends WebComposerProps {
+    /** Where a failure to send goes. */
+    notices: TaNotices;
+    /** The entries of a directory of the server, for the button of `onPickCwd`. */
+    listDirectory?(directory: string): Promise<TaDirEntry[]>;
+    /** The directory of ta serve: that of a `cwd` left empty. */
+    serverCwd?: string;
+}
+
+/** The message box as web extensions get it (`pi.ui.Composer`): text only, `@` for the names they give; a failure is a notice of the page. */
+export function WebComposer({ notices, placeholder, onSend, mentions, mentionLabel, actions, cwd, onPickCwd, listDirectory, serverCwd }: WebComposerHostProps) {
+    const t = useT();
+    const [query, setQuery] = React.useState<string>();
+    return (
+        <ComposerBox
+            placeholder={placeholder ?? t('ta.composer.label')}
+            onSend={async text => {
+                await onSend(text);
+            }}
+            onMentionQuery={mentions ? setQuery : undefined}
+            mentions={
+                mentions && query !== undefined
+                    ? {
+                          items: ComposerUtil.commands(mentions, query).map(mention => ({
+                              key: mention.name,
+                              label: `@${mention.name}`,
+                              detail: mention.detail,
+                          })),
+                      }
+                    : undefined
+            }
+            mentionLabel={mentions ? mentionLabel : undefined}
+            actions={actions}
+            beside={onPickCwd && listDirectory && <DirectoryButton cwd={cwd || serverCwd || ''} list={listDirectory} onPick={onPickCwd} />}
+            onError={cause => notices.error(cause)}
+        />
+    );
+}

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

@@ -0,0 +1,29 @@
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import type { WebDialogProps } from '../extension/web-extension-api';
+import { useT } from '../i18n/use-t';
+import { IconButton } from './icon';
+
+/** A dialog of a web extension (`pi.ui.Dialog`), over the whole page whatever column it is opened from. */
+export function WebDialog({ title, onClose, children }: WebDialogProps): React.ReactElement {
+    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-web-dialog" role="dialog" aria-modal="true" aria-label={title}>
+                <div className="ta-modal-head">
+                    <span className="ta-modal-title">{title}</span>
+                    <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
+                </div>
+                {children}
+            </div>
+        </div>,
+        document.body,
+    );
+}

package/src/browser/components/workbench-toggle.spec.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { SidebarLeft, SidebarRight } from './icon';
+import { WorkbenchToggle, WorkbenchToggleContext, type WorkbenchToggleState } from './workbench-toggle';
+
+const shape = (html: string) => html.match(/<rect[^>]*>.*<\/g>/)?.[0];
+
+function toggle(state: WorkbenchToggleState | undefined) {
+    return renderToStaticMarkup(
+        <WorkbenchToggleContext.Provider value={state}>
+            <WorkbenchToggle />
+        </WorkbenchToggleContext.Provider>,
+    );
+}
+
+describe('WorkbenchToggle', () => {
+    it('shows the workbench only while it is hidden', () => {
+        const hidden = toggle({ open: false, toggle: () => undefined });
+        expect(hidden).toContain('aria-label="Show the panel"');
+        expect(hidden).not.toContain('ta-on');
+        expect(toggle({ open: true, toggle: () => undefined })).toBe('');
+        expect(toggle(undefined)).toBe('');
+    });
+
+    it('draws the shape of the sidebar, mirrored and with no arrow', () => {
+        const left = renderToStaticMarkup(<SidebarLeft />);
+        const right = renderToStaticMarkup(<SidebarRight />);
+        expect(shape(left)).toBe(shape(right));
+        expect(left).not.toContain('matrix');
+        expect(right).toContain('matrix(-1 0 0 1 24 0)');
+        expect(left).toContain('aria-hidden="true"');
+        expect(shape(toggle({ open: false, toggle: () => undefined }))).toBe(shape(right));
+    });
+});

package/src/browser/components/workbench-toggle.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { IconButton, SidebarRight } from './icon';
+
+/** The workbench on the right is the page's, one for all of it: whether it shows, and the button that shows or hides it. */
+export interface WorkbenchToggleState {
+    open: boolean;
+    toggle(): void;
+}
+
+export const WorkbenchToggleContext = React.createContext<WorkbenchToggleState | undefined>(undefined);
+
+/**
+ * The button that shows the workbench, for the head of the conversation or of a page. Only while it is
+ * hidden: once shown, the same button on top of the workbench hides it.
+ */
+export function WorkbenchToggle() {
+    const t = useT();
+    const state = React.useContext(WorkbenchToggleContext);
+    if (!state || state.open) {
+        return null;
+    }
+    return <IconButton icon={SidebarRight} label={t('ta.panel.show')} onClick={state.toggle} />;
+}