@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/components/markdown.spec.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'bun:test';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { OpenLink } from './link';
+import { Markdown } from './markdown';
+import { FileUrls } from './media';
+
+describe('Markdown', () => {
+    it('shows TeX as written until KaTeX is loaded', () => {
+        const html = renderToStaticMarkup(<Markdown text={'so $x^2$\n\n$$\ny\n$$'} />);
+        expect(html).toContain('<code class="ta-math-source">x^2</code>');
+        expect(html).toContain('<div class="ta-math-block ta-math-source">y</div>');
+    });
+
+    it('shows a diagram as its code until it is drawn', () => {
+        const html = renderToStaticMarkup(<Markdown text={'```mermaid\ngraph TD; A-->B\n```'} />);
+        expect(html).toContain('class="ta-code"');
+        expect(html).toContain('graph TD; A--&gt;B');
+    });
+
+    it('shows links: pages with their address and no way back to the page, files as buttons once they can open', () => {
+        const text = '[docs](https://x.dev/a) [a](src/a.ts#L3) `src/b.ts:4` [x](javascript:alert(1))';
+        const plain = renderToStaticMarkup(<Markdown text={text} />);
+        expect(plain).toContain('<a class="ta-link-web" href="https://x.dev/a" target="_blank" rel="noopener noreferrer" title="https://x.dev/a">docs</a>');
+        expect(plain).not.toContain('ta-link-path');
+        expect(plain).not.toContain('javascript');
+        const linked = renderToStaticMarkup(
+            <OpenLink.Provider value={() => undefined}>
+                <Markdown text={text} />
+            </OpenLink.Provider>,
+        );
+        expect(linked).toContain('<button type="button" class="ta-link-path " title="src/a.ts:3\nClick to open">a</button>');
+        expect(linked).toContain('class="ta-link-path ta-link-code" title="src/b.ts:4\nClick to open"><code>src/b.ts:4</code></button>');
+    });
+
+    it('shows images and videos from the web as they are, and files of the workspace once their URL is known', () => {
+        const html = renderToStaticMarkup(
+            <FileUrls.Provider value={async path => `/api/files/id/${path}`}>
+                <Markdown text={'![chart](https://x.dev/a.png)\n\n![clip](https://x.dev/a.mp4)\n\n![local](out/a.png)'} />
+            </FileUrls.Provider>,
+        );
+        expect(html).toContain('<img src="https://x.dev/a.png" alt="chart" loading="lazy"/>');
+        expect(html).toContain('<video class="ta-media ta-media-video" src="https://x.dev/a.mp4"');
+        expect(html).toContain('class="ta-media-loading ta-media-image" title="local"');
+    });
+});

package/src/browser/components/markdown.tsx

@@ -0,0 +1,155 @@
+import { Check, Copy } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { MermaidUtil } from '../markdown/mermaid';
+import { type MarkdownBlock, type MarkdownInline, MarkdownUtil } from '../util/markdown';
+import { IconButton } from './icon';
+import { CodeLink, LinkView } from './link';
+import { MathView } from './math';
+import { MediaView } from './media';
+import { MermaidView } from './mermaid-view';
+
+function Inline({ nodes }: { nodes: MarkdownInline[] }) {
+    return (
+        <>
+            {nodes.map((node, index) => {
+                switch (node.type) {
+                    case 'code':
+                        return <CodeLink key={index} text={node.text} />;
+                    case 'strong':
+                        return (
+                            <strong key={index}>
+                                <Inline nodes={node.children} />
+                            </strong>
+                        );
+                    case 'em':
+                        return (
+                            <em key={index}>
+                                <Inline nodes={node.children} />
+                            </em>
+                        );
+                    case 'math':
+                        return <MathView key={index} tex={node.tex} display={node.display} />;
+                    case 'media':
+                        return <MediaView key={index} src={node.src} alt={node.alt} />;
+                    case 'link':
+                        return (
+                            <LinkView key={index} href={node.href}>
+                                <Inline nodes={node.children} />
+                            </LinkView>
+                        );
+                    default:
+                        return <React.Fragment key={index}>{node.text}</React.Fragment>;
+                }
+            })}
+        </>
+    );
+}
+
+const Text = React.memo(function Text({ text }: { text: string }) {
+    return <Inline nodes={MarkdownUtil.inline(text)} />;
+});
+
+export function CodeBlock({ code }: { code: string; language?: string }) {
+    const t = useT();
+    const [copied, setCopied] = React.useState(false);
+    const copy = () => {
+        void navigator.clipboard?.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        });
+    };
+    return (
+        <div className="ta-code">
+            <span className="ta-code-actions ta-code-float">
+                <IconButton icon={copied ? Check : Copy} label={t(copied ? 'ta.copied' : 'ta.copy')} onClick={copy} />
+            </span>
+            <pre>
+                <code>{code}</code>
+            </pre>
+        </div>
+    );
+}
+
+const Block = React.memo(function Block({ block }: { block: MarkdownBlock }) {
+    switch (block.type) {
+        case 'heading':
+            return React.createElement(`h${Math.min(block.level + 2, 6)}`, null, <Text text={block.text} />);
+        case 'code':
+            if (MermaidUtil.isDiagram(block.language, block.code)) {
+                return <MermaidView code={block.code} fallback={<CodeBlock code={block.code} language={block.language} />} />;
+            }
+            return <CodeBlock code={block.code} language={block.language} />;
+        case 'math':
+            return <MathView tex={block.tex} display closed={block.closed} />;
+        case 'quote':
+            return (
+                <blockquote>
+                    <Markdown text={block.text} />
+                </blockquote>
+            );
+        case 'list': {
+            const items = block.items.map((item, index) => (
+                <li key={index}>
+                    <Text text={item} />
+                </li>
+            ));
+            return block.ordered ? <ol>{items}</ol> : <ul>{items}</ul>;
+        }
+        case 'table':
+            return (
+                <div className="ta-table">
+                    <table>
+                        <thead>
+                            <tr>
+                                {block.header.map((cell, index) => (
+                                    <th key={index}>
+                                        <Text text={cell} />
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {block.rows.map((row, index) => (
+                                <tr key={index}>
+                                    {row.map((cell, column) => (
+                                        <td key={column}>
+                                            <Text text={cell} />
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            );
+        case 'rule':
+            return <hr />;
+        default:
+            return (
+                <p>
+                    <Text text={block.text} />
+                </p>
+            );
+    }
+}, sameBlock);
+
+function sameBlock(a: { block: MarkdownBlock }, b: { block: MarkdownBlock }): boolean {
+    return a.block === b.block || JSON.stringify(a.block) === JSON.stringify(b.block);
+}
+
+const MarkdownBody = React.memo(function MarkdownBody({ text }: { text: string }) {
+    const blocks = React.useMemo(() => MarkdownUtil.blocks(text), [text]);
+    return (
+        <div className="ta-markdown">
+            {blocks.map((block, index) => (
+                <Block key={index} block={block} />
+            ))}
+        </div>
+    );
+});
+
+/** Markdown as React elements; drawn again only when its text changes, and then only the blocks that did. */
+export function Markdown({ text }: { text: string }) {
+    return <MarkdownBody text={text} />;
+}

package/src/browser/components/math.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useLazy } from '../markdown/hooks';
+import { MathRenderer } from '../markdown/math';
+
+/**
+ * A formula, typeset; its TeX as written until KaTeX is loaded, and when it is not valid TeX (yet),
+ * as while a reply streams it.
+ */
+export const MathView = React.memo(function MathView({ tex, display, closed = true }: { tex: string; display: boolean; closed?: boolean }) {
+    const katex = useLazy(MathRenderer.katex);
+    const html = katex && closed ? MathRenderer.render(katex, tex, display) : null;
+    if (html === null) {
+        return display ? <div className="ta-math-block ta-math-source">{tex}</div> : <code className="ta-math-source">{tex}</code>;
+    }
+    if (display) {
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: KaTeX markup with trust off, which runs nothing
+        return <div className="ta-math-block" dangerouslySetInnerHTML={{ __html: html }} />;
+    }
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: KaTeX markup with trust off, which runs nothing
+    return <span className="ta-math" dangerouslySetInnerHTML={{ __html: html }} />;
+});

package/src/browser/components/media.tsx

@@ -0,0 +1,91 @@
+import { ImageOff } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { MarkdownUtil } from '../util/markdown';
+import { Icon } from './icon';
+
+/**
+ * Where the page loads a file of the workspace from (TaWorkspaceServer.fileUrl), in the directory of the
+ * conversation that shows it; without it, files of the workspace do not show.
+ */
+export const FileUrls = React.createContext<((path: string) => Promise<string>) | undefined>(undefined);
+
+/** The URL of a target: as it is, or for a path, the URL of the file; null when it cannot show. */
+function useUrl(src: string): string | null | undefined {
+    const fileUrl = React.useContext(FileUrls);
+    const path = MarkdownUtil.localPath(src);
+    const [url, setUrl] = React.useState<string | null | undefined>(path === undefined ? src : undefined);
+    React.useEffect(() => {
+        if (path === undefined) {
+            setUrl(src);
+            return;
+        }
+        if (!fileUrl) {
+            setUrl(null);
+            return;
+        }
+        let current = true;
+        fileUrl(path).then(
+            url => current && setUrl(url),
+            () => current && setUrl(null),
+        );
+        return () => {
+            current = false;
+        };
+    }, [fileUrl, path, src]);
+    return url;
+}
+
+/** An image at its full size over the page; a click or Escape closes it. In the top layer, so no container clips it. */
+function Lightbox({ src, alt, onClose }: { src: string; alt: string; onClose(): void }) {
+    const dialog = React.useRef<HTMLDialogElement>(null);
+    React.useEffect(() => {
+        dialog.current?.showModal?.();
+    }, []);
+    return (
+        // biome-ignore lint/a11y/useKeyWithClickEvents: Escape closes the dialog itself
+        <dialog ref={dialog} className="ta-lightbox" onClose={onClose} onClick={() => dialog.current?.close()}>
+            <img src={src} alt={alt} />
+        </dialog>
+    );
+}
+
+/** An image, a video or a sound a reply shows: from the web, a data URL, or a file of the workspace. */
+export function MediaView({ src, alt }: { src: string; alt: string }) {
+    const t = useT();
+    const url = useUrl(src);
+    const [failedUrl, setFailedUrl] = React.useState<string>();
+    const [open, setOpen] = React.useState(false);
+    const failed = !!url && url === failedUrl;
+    const setFailed = () => setFailedUrl(url ?? undefined);
+    const kind = MarkdownUtil.media(src) ?? 'image';
+    if (url === undefined) {
+        return <span className={`ta-media-loading ta-media-${kind}`} title={alt || src} />;
+    }
+    if (url === null || failed) {
+        const name = alt || src.split(/[?#]/)[0].split('/').pop() || src;
+        return (
+            <span className="ta-media-missing" title={src}>
+                <Icon icon={ImageOff} size={14} />
+                {t('ta.markdown.missing', { name })}
+            </span>
+        );
+    }
+    switch (kind) {
+        case 'video':
+            // biome-ignore lint/a11y/useMediaCaption: a video a reply points to, which has no captions to give
+            return <video className="ta-media ta-media-video" src={url} title={alt || undefined} controls playsInline preload="metadata" onError={setFailed} />;
+        case 'audio':
+            // biome-ignore lint/a11y/useMediaCaption: a sound a reply points to, which has no captions to give
+            return <audio className="ta-media ta-media-audio" src={url} title={alt || undefined} controls preload="metadata" onError={setFailed} />;
+        default:
+            return (
+                <>
+                    <button type="button" className="ta-media ta-media-image" title={t('ta.markdown.enlarge')} onClick={() => setOpen(true)}>
+                        <img src={url} alt={alt} loading="lazy" onError={setFailed} />
+                    </button>
+                    {open && <Lightbox src={url} alt={alt} onClose={() => setOpen(false)} />}
+                </>
+            );
+    }
+}

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

@@ -0,0 +1,105 @@
+import { Check, Code2, Copy, Download, Maximize2, Minimize2, Network } from 'lucide-react';
+import * as React from 'react';
+import { useT } from '../i18n/use-t';
+import { usePageTheme } from '../markdown/hooks';
+import { MermaidRenderer, MermaidUtil } from '../markdown/mermaid';
+import { IconButton } from './icon';
+
+/** While a reply streams its source, the diagram waits for it to rest a moment. */
+const DRAW_DELAY_MS = 150;
+
+function download(svg: string): void {
+    const background = getComputedStyle(document.documentElement).getPropertyValue('--ta-code').trim();
+    const url = URL.createObjectURL(new Blob([MermaidUtil.withBackground(svg, background)], { type: 'image/svg+xml' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = MermaidUtil.fileName();
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+/**
+ * A Mermaid diagram in the colours of the page; its code block until it draws, and when its source does
+ * not parse. While a reply streams, the last diagram stays until the longer source draws; a source that
+ * is not a continuation of it is another diagram, and shows as code until it draws.
+ */
+export function MermaidView({ code, fallback }: { code: string; fallback: React.ReactNode }) {
+    const t = useT();
+    const theme = usePageTheme();
+    const [drawn, setDrawn] = React.useState<{ code: string; svg: string } | undefined>(() => {
+        const svg = MermaidRenderer.cached(theme, code);
+        return svg ? { code, svg } : undefined;
+    });
+    const [source, setSource] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const frame = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        let current = true;
+        const cached = MermaidRenderer.cached(theme, code);
+        if (cached) {
+            setDrawn({ code, svg: cached });
+            return;
+        }
+        const timer = setTimeout(() => {
+            MermaidRenderer.render(theme, code).then(svg => current && svg && setDrawn({ code, svg }));
+        }, DRAW_DELAY_MS);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+    }, [theme, code]);
+
+    React.useEffect(() => {
+        const changed = () => setFullscreen(document.fullscreenElement === frame.current);
+        document.addEventListener('fullscreenchange', changed);
+        return () => document.removeEventListener('fullscreenchange', changed);
+    }, []);
+
+    if (!drawn || !code.startsWith(drawn.code)) {
+        return <>{fallback}</>;
+    }
+    const copy = () => {
+        void navigator.clipboard?.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        });
+    };
+    const toggleFullscreen = () => {
+        if (document.fullscreenElement === frame.current) {
+            void document.exitFullscreen();
+        } else {
+            void frame.current?.requestFullscreen?.().catch(() => undefined);
+        }
+    };
+    return (
+        <div ref={frame} className={`ta-code ta-mermaid ${source ? 'ta-mermaid-source' : ''}`}>
+            <div className="ta-code-bar">
+                <span>mermaid</span>
+                <span className="ta-code-actions">
+                    <IconButton
+                        icon={source ? Network : Code2}
+                        label={t(source ? 'ta.markdown.diagram' : 'ta.markdown.source')}
+                        onClick={() => setSource(!source)}
+                    />
+                    <IconButton icon={copied ? Check : Copy} label={t(copied ? 'ta.copied' : 'ta.copy')} onClick={copy} />
+                    <IconButton icon={Download} label={t('ta.markdown.download')} onClick={() => download(drawn.svg)} />
+                    <IconButton
+                        icon={fullscreen ? Minimize2 : Maximize2}
+                        label={t(fullscreen ? 'ta.markdown.exitFullscreen' : 'ta.markdown.fullscreen')}
+                        onClick={toggleFullscreen}
+                    />
+                </span>
+            </div>
+            {source ? (
+                <pre>
+                    <code>{code}</code>
+                </pre>
+            ) : (
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: drawn by Mermaid at its strict security level, which sanitizes the labels
+                <div className="ta-mermaid-diagram" dangerouslySetInnerHTML={{ __html: drawn.svg }} />
+            )}
+        </div>
+    );
+}

package/src/browser/components/message-actions.tsx

@@ -0,0 +1,89 @@
+import { useInject } from '@celljs/react';
+import type { SessionMessage, SessionStore } from '@celljs/ta-client';
+import type { TaServer } from '@celljs/ta-protocol';
+import { GitFork } from 'lucide-react';
+import * as React from 'react';
+import { TaWebExtensions } from '../extension/web-extension-protocol';
+import { useNotices } from '../hooks';
+import { message as text } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { TaSettings } from '../settings/settings-protocol';
+import { MessageUtil } from '../util/message';
+import type { ComposerBoxHandle } from './composer-box';
+import { ForkView } from './fork-view';
+import type { MessageActionHandlers } from './message-footer';
+
+let forks = 0;
+
+/**
+ * What the messages of a conversation can do, with pi's own means. A fork (`/fork`) is a copy of the
+ * conversation up to a message, opened in a tab of the workbench beside it: the conversation shown does
+ * not move. A rewind (`/tree`), once confirmed, goes back to before a message of the user in the same
+ * conversation, and the message comes back into the box.
+ */
+export function useMessageActions(
+    store: SessionStore,
+    server: TaServer,
+    working: boolean,
+    cwd: string | undefined,
+    composer: React.RefObject<ComposerBoxHandle | null>,
+    done: () => void,
+): MessageActionHandlers {
+    const t = useT();
+    const [, notices] = useNotices();
+    const extensions = useInject<TaWebExtensions>(TaWebExtensions);
+    const settings = useInject<TaSettings>(TaSettings);
+    // The latest callback, so that the messages draw again only when `working` changes.
+    const settled = React.useRef(done);
+    settled.current = done;
+    return React.useMemo(() => {
+        const failed = (cause: unknown) => notices.error(cause);
+        const entry = async (message: SessionMessage) => {
+            const { entries } = await server.getEntries(store.sessionId);
+            const id = MessageUtil.entryId(entries, message);
+            if (!id) {
+                throw new Error(t('ta.message.notSaved'));
+            }
+            return id;
+        };
+        return {
+            working,
+            fork: (message, position) => {
+                entry(message)
+                    .then(id => server.forkToFile(store.sessionId, id, position))
+                    .then(({ sessionFile, text: draft }) => {
+                        const source = { sessionFile, cwd: cwd ?? '.', text: draft };
+                        extensions.open({
+                            id: `fork:${++forks}`,
+                            title: () => text(settings.state.language, 'ta.message.forked'),
+                            icon: GitFork,
+                            render: () => <ForkView source={source} />,
+                            extension: '',
+                        });
+                    }, failed);
+            },
+            rewind: message => {
+                notices
+                    .confirm({
+                        title: t('ta.message.rewindConfirm'),
+                        message: t('ta.message.rewindDetail'),
+                        confirmLabel: t('ta.message.rewind'),
+                        danger: true,
+                    })
+                    .then(async confirmed => {
+                        if (!confirmed) {
+                            return;
+                        }
+                        const result = await server.navigateTree(store.sessionId, await entry(message));
+                        if (!result.cancelled) {
+                            if (result.editorText) {
+                                composer.current?.setText(result.editorText);
+                            }
+                            settled.current();
+                        }
+                    })
+                    .catch(failed);
+            },
+        };
+    }, [store, server, working, cwd, composer, t, notices, extensions, settings]);
+}

package/src/browser/components/message-footer.tsx

@@ -0,0 +1,128 @@
+import type { SessionMessage } from '@celljs/ta-client';
+import type { TaSessionInfo } from '@celljs/ta-protocol';
+import { ArrowDown, ArrowUp, Bug, Check, Copy, GitFork, type LucideIcon, Undo2 } from 'lucide-react';
+import * as React from 'react';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { ProgressUtil } from '../util/progress';
+import { Icon } from './icon';
+
+/** What the messages of a conversation can do besides being copied; a conversation without them only copies. */
+export interface MessageActionHandlers {
+    /** While ta works, the conversation stays as it is. */
+    working: boolean;
+    /** A new conversation from a message: `before` a message of the user, without it; `at` a reply, with it. */
+    fork(message: SessionMessage, position: 'before' | 'at'): void;
+    /** Back to before a message of the user, in the same conversation. */
+    rewind(message: SessionMessage): void;
+}
+
+export const MessageActions = React.createContext<MessageActionHandlers | undefined>(undefined);
+
+export namespace MessageFooterUtil {
+    /** What to paste into an issue: where the message is, and what the model said of it. */
+    export function debugInfo(message: SessionMessage, session: TaSessionInfo | undefined): string {
+        const { timestamp, provider, model, stopReason, errorMessage, usage } = message as {
+            timestamp?: number;
+            provider?: string;
+            model?: string;
+            stopReason?: string;
+            errorMessage?: string;
+            usage?: unknown;
+        };
+        const info = {
+            session: session?.sessionId,
+            piSession: session?.piSessionId,
+            sessionFile: session?.sessionFile,
+            cwd: session?.cwd,
+            time: timestamp === undefined ? undefined : new Date(timestamp).toISOString(),
+            model: provider && model ? `${provider}/${model}` : model,
+            stopReason,
+            errorMessage,
+            usage,
+        };
+        return JSON.stringify(info, null, 2);
+    }
+}
+
+function FooterButton({ icon, label, onClick }: { icon: LucideIcon; label: string; onClick(): void }) {
+    return (
+        <button type="button" className="ta-footer-button" title={label} aria-label={label} onClick={onClick}>
+            <Icon icon={icon} size={14} />
+        </button>
+    );
+}
+
+/** Copies, and says so on the button for a moment. */
+function CopyButton({ text, icon, label, done }: { text: () => string; icon: LucideIcon; label: MessageId; done: MessageId }) {
+    const t = useT();
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (copied) {
+            const timer = setTimeout(() => setCopied(false), 1500);
+            return () => clearTimeout(timer);
+        }
+    }, [copied]);
+    const copy = () => void navigator.clipboard?.writeText(text()).then(() => setCopied(true));
+    return <FooterButton icon={copied ? Check : icon} label={t(copied ? done : label)} onClick={copy} />;
+}
+
+function Time({ timestamp }: { timestamp?: number }) {
+    const t = useT();
+    if (timestamp === undefined) {
+        return null;
+    }
+    const { day, time, date } = MessageUtil.when(timestamp);
+    const label = day === 'today' ? time : day === 'date' ? `${date} ${time}` : `${t(day === 'yesterday' ? 'ta.time.yesterday' : 'ta.time.dayBefore')} ${time}`;
+    return (
+        <time className="ta-footer-time" dateTime={new Date(timestamp).toISOString()} title={new Date(timestamp).toLocaleString()}>
+            {label}
+        </time>
+    );
+}
+
+/** Under a message of the user: when, copy, a new conversation from here, back to here. */
+export function UserFooter({ message, text }: { message: SessionMessage; text: string }) {
+    const t = useT();
+    const actions = React.useContext(MessageActions);
+    const branches = actions && !actions.working;
+    return (
+        <div className="ta-footer">
+            <Time timestamp={(message as { timestamp?: number }).timestamp} />
+            {text && <CopyButton text={() => text} icon={Copy} label="ta.copy" done="ta.copied" />}
+            {branches && <FooterButton icon={GitFork} label={t('ta.message.forkBefore')} onClick={() => actions.fork(message, 'before')} />}
+            {branches && <FooterButton icon={Undo2} label={t('ta.message.rewind')} onClick={() => actions.rewind(message)} />}
+        </div>
+    );
+}
+
+/** Under a turn that ended: copy the reply, a new conversation from it, what to report, when, what it took. */
+export function TurnFooter({ messages, last, reply, session }: { messages: SessionMessage[]; last?: SessionMessage; reply: string; session?: TaSessionInfo }) {
+    const t = useT();
+    const actions = React.useContext(MessageActions);
+    const usage = React.useMemo(() => MessageUtil.usage(messages), [messages]);
+    const used = usage.input > 0 || usage.output > 0;
+    return (
+        <div className="ta-footer">
+            {reply && <CopyButton text={() => reply} icon={Copy} label="ta.copy" done="ta.copied" />}
+            {last && actions && !actions.working && <FooterButton icon={GitFork} label={t('ta.message.forkAt')} onClick={() => actions.fork(last, 'at')} />}
+            {last && <CopyButton text={() => MessageFooterUtil.debugInfo(last, session)} icon={Bug} label="ta.message.debug" done="ta.message.debugCopied" />}
+            <Time timestamp={(last as { timestamp?: number } | undefined)?.timestamp} />
+            {used && (
+                <span className="ta-footer-usage" title={t('ta.message.usageTitle', { input: usage.input, output: usage.output })}>
+                    <span>{t('ta.message.used')}</span>
+                    <span>
+                        <Icon icon={ArrowUp} size={12} />
+                        {ProgressUtil.format(usage.input)}
+                    </span>
+                    <span>
+                        <Icon icon={ArrowDown} size={12} />
+                        {ProgressUtil.format(usage.output)}
+                    </span>
+                    {usage.cost > 0 && <span>{MessageUtil.cost(usage.cost)}</span>}
+                </span>
+            )}
+        </div>
+    );
+}