@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/components/message-list.spec.tsx

@@ -0,0 +1,321 @@
+import { describe, expect, it } from 'bun:test';
+import { SessionReducer } from '@celljs/ta-client';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { SessionAvatars } from '../extension/extension-view';
+import { MessageActions } from './message-footer';
+import { ConversationSession, MessageList } from './message-list';
+
+const state = (messages: unknown[], tools = {}, working = true) => ({ ...SessionReducer.initial(), messages: messages as never, tools, working });
+
+describe('MessageList', () => {
+    it('shows the conversation while ta works, with each tool result at its call', () => {
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state([
+                    { role: 'user', content: 'fix it' },
+                    {
+                        role: 'assistant',
+                        content: [
+                            { type: 'text', text: 'On **it**.' },
+                            { type: 'toolCall', id: 'c1', name: 'edit', arguments: { path: 'a.ts' } },
+                        ],
+                    },
+                    { role: 'toolResult', toolCallId: 'c1', content: [{ type: 'text', text: 'Edited' }], details: { diff: '-1 old\n+1 new' } },
+                ])}
+            />,
+        );
+        expect(html).toContain('fix it');
+        expect(html).toContain('<strong>it</strong>');
+        expect(html).toContain('a.ts');
+        // The diff opens on a click.
+        expect(html).not.toContain('ta-diff-add');
+        expect(html.match(/Edited/g)).toBeNull();
+    });
+
+    it('shows the calls of a codemode script as steps of their own, in one line each', () => {
+        const calls = [
+            { id: 'c1/1', name: 'edit', args: '{"path":"b.ts"}', status: 'ok', durationMs: 12 },
+            { id: 'c1/?', name: 'bash', args: '{"command":"npm test"}', status: 'running' },
+        ];
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state(
+                    [{ role: 'assistant', content: [{ type: 'toolCall', id: 'c1', name: 'codemode', arguments: { code: 'await tools.edit({})' } }] }],
+                    {
+                        c1: {
+                            toolName: 'codemode',
+                            args: {},
+                            status: 'running',
+                            result: { content: [], details: { calls } },
+                        },
+                        'c1/1': {
+                            toolName: 'edit',
+                            args: { path: 'b.ts' },
+                            status: 'done',
+                            parentToolCallId: 'c1',
+                            result: { content: [], details: { diff: '+3 added' } },
+                        },
+                        'c1/2': {
+                            toolName: 'bash',
+                            args: { command: 'npm test' },
+                            status: 'running',
+                            parentToolCallId: 'c1',
+                            result: { content: [{ type: 'text', text: 'one\ntwo' }] },
+                        },
+                    },
+                )}
+            />,
+        );
+        expect(html).not.toContain('codemode');
+        expect(html).toContain('Working · 2 steps');
+        expect(html).toContain('Edit');
+        expect(html).toContain('b.ts');
+        // Only what each call does, and a dot for its state: no times, no output until opened.
+        expect(html).not.toContain('12ms');
+        expect(html).not.toContain('ta-diff-add');
+        expect(html).toContain('npm test');
+        expect(html).not.toContain('one\ntwo');
+        expect(html).toContain('ta-status-done');
+        expect(html).toContain('ta-status-running');
+        expect(html).toContain('Show the script');
+    });
+
+    it('shows a script without calls as one step, titled by its first comment', () => {
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state(
+                    [{ role: 'assistant', content: [{ type: 'toolCall', id: 'c1', name: 'codemode', arguments: { code: '// count the files\nreturn 1' } }] }],
+                    {
+                        c1: {
+                            toolName: 'codemode',
+                            args: {},
+                            status: 'done',
+                            result: { content: [{ type: 'text', text: 'Script completed\nWall time 0.1 seconds\nOutput:\n1' }] },
+                        },
+                    },
+                )}
+            />,
+        );
+        expect(html).toContain('Run script');
+        expect(html).toContain('count the files');
+        expect(html).not.toContain('Wall time');
+    });
+
+    it('folds the work of a finished turn into one line and shows the reply', () => {
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state(
+                    [
+                        { role: 'user', content: 'fix it' },
+                        {
+                            role: 'assistant',
+                            content: [
+                                { type: 'thinking', thinking: 'hmm' },
+                                { type: 'toolCall', id: 'c1', name: 'edit', arguments: { path: 'a.ts' } },
+                            ],
+                        },
+                        { role: 'toolResult', toolCallId: 'c1', content: [{ type: 'text', text: 'failed' }], isError: true },
+                        { role: 'assistant', content: [{ type: 'text', text: 'Could **not** fix it.' }], stopReason: 'stop' },
+                    ],
+                    {},
+                    false,
+                )}
+            />,
+        );
+        expect(html).toContain('Ran 1 step');
+        expect(html).toContain('1 failed');
+        // A failed step does not open the work: the head says it, quietly.
+        expect(html).toContain('aria-expanded="false"');
+        expect(html).not.toContain('a.ts');
+        expect(html.match(/ta-turn-head/g)).toHaveLength(1);
+        expect(html).toContain('ta-avatar-done');
+        expect(html).toContain('<strong>not</strong>');
+    });
+
+    it('folds a finished turn without failures, and says once that ta waits for the model before it answers', () => {
+        const done = renderToStaticMarkup(
+            <MessageList
+                state={state(
+                    [
+                        { role: 'user', content: 'go' },
+                        { role: 'assistant', content: [{ type: 'toolCall', id: 'c1', name: 'read', arguments: { path: 'b.ts' } }] },
+                        { role: 'toolResult', toolCallId: 'c1', content: [{ type: 'text', text: 'ok' }] },
+                        { role: 'assistant', content: [{ type: 'text', text: 'Read it.' }], stopReason: 'stop' },
+                    ],
+                    {},
+                    false,
+                )}
+            />,
+        );
+        expect(done).toContain('aria-expanded="false"');
+        expect(done).not.toContain('b.ts');
+        const waiting = renderToStaticMarkup(<MessageList state={state([{ role: 'user', content: 'go' }])} />);
+        expect(waiting).toContain('ta-avatar-thinking');
+        expect(waiting.match(/>Waiting for the model</g)).toHaveLength(1);
+    });
+
+    it('shows a command in one line, its output and its failure only once opened', () => {
+        const turn = (isError: boolean) =>
+            renderToStaticMarkup(
+                <MessageList
+                    state={state([
+                        { role: 'user', content: 'go' },
+                        { role: 'assistant', content: [{ type: 'toolCall', id: 'c1', name: 'bash', arguments: { command: 'npm test' } }] },
+                        { role: 'toolResult', toolCallId: 'c1', content: [{ type: 'text', text: 'line 1\nline 2' }], isError, durationMs: 2300 },
+                    ])}
+                />,
+            );
+        const done = turn(false);
+        expect(done).toContain('npm test');
+        expect(done).toContain('ta-status-done');
+        expect(done).not.toContain('2.3s');
+        expect(done).not.toContain('line 1');
+        const failed = turn(true);
+        expect(failed).toContain('ta-status-error');
+        expect(failed).not.toContain('line 1');
+    });
+
+    it('shows images the user sent', () => {
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state([
+                    {
+                        role: 'user',
+                        content: [
+                            { type: 'text', text: 'this' },
+                            { type: 'image', data: 'AAAA', mimeType: 'image/png' },
+                        ],
+                    },
+                ])}
+            />,
+        );
+        expect(html).toContain('src="data:image/png;base64,AAAA"');
+        expect(html).toContain('this');
+    });
+
+    it('never turns text of the model into markup', () => {
+        const html = renderToStaticMarkup(
+            <MessageList state={state([{ role: 'assistant', content: [{ type: 'text', text: '<img src=x onerror=alert(1)>' }] }])} />,
+        );
+        expect(html).not.toContain('<img');
+    });
+
+    it('says what ta does while it works, with the tokens of the run up and down', () => {
+        const waiting = renderToStaticMarkup(
+            <MessageList
+                state={{
+                    ...state([
+                        { role: 'user', content: 'hi' },
+                        { role: 'assistant', content: [{ type: 'text', text: 'Hello.' }], usage: { input: 2000, output: 10 } },
+                        { role: 'user', content: 'again' },
+                    ]),
+                    runStart: 2,
+                }}
+            />,
+        );
+        expect(waiting).toContain('>Waiting for the model<');
+        // The context of before, its answer and the new message.
+        expect(waiting).toContain('2k');
+        const html = renderToStaticMarkup(
+            <MessageList
+                state={state(
+                    [
+                        { role: 'user', content: 'hi' },
+                        {
+                            role: 'assistant',
+                            content: [{ type: 'toolCall', id: 'c1', name: 'bash', arguments: { command: 'npm test' } }],
+                            usage: { input: 1200, output: 40 },
+                        },
+                    ],
+                    { c1: { toolName: 'bash', args: { command: 'npm test' }, status: 'running' } },
+                )}
+            />,
+        );
+        expect(html).toContain('ta-run-line');
+        expect(html).toMatch(/ta-run-phase[^>]*>Run npm test</);
+        expect(html).toContain('1.2k');
+        expect(html).toContain('40');
+        // Nothing of the kind once it is done.
+        expect(renderToStaticMarkup(<MessageList state={state([{ role: 'user', content: 'hi' }], {}, false)} />)).not.toContain('ta-run-status');
+    });
+
+    it('leaves the context of a message out, and draws who answers in a session by the extension of its group', () => {
+        const messages = [
+            { role: 'user', content: '<context>\n[#test] A channel\nuser to you:\n</context>\n@tester hi' },
+            { role: 'assistant', content: [{ type: 'text', text: 'Hello.' }] },
+        ];
+        const session = { sessionId: 's1', group: 'team', sessionName: 'tester' } as never;
+        const Face = ({ session, mood, size }: { session: { sessionName: string }; mood: string; size: number }) => (
+            <i className={`face-${session.sessionName}-${mood}-${size}`} />
+        );
+        const html = renderToStaticMarkup(
+            <SessionAvatars.Provider value={{ team: Face as never }}>
+                <ConversationSession.Provider value={session}>
+                    <MessageList state={state(messages, {}, false)} />
+                </ConversationSession.Provider>
+            </SessionAvatars.Provider>,
+        );
+        expect(html).toContain('>@tester hi<');
+        expect(html).not.toContain('[#test]');
+        expect(html).toContain('face-tester-done-24');
+        expect(html).not.toContain('ta-avatar');
+        // Another group, or none: ta.
+        const other = renderToStaticMarkup(
+            <SessionAvatars.Provider value={{ team: Face as never }}>
+                <MessageList state={state(messages, {}, false)} />
+            </SessionAvatars.Provider>,
+        );
+        expect(other).toContain('ta-avatar');
+    });
+
+    describe('the footer of a message', () => {
+        const messages = [
+            { role: 'user', content: 'fix it', timestamp: 1 },
+            {
+                role: 'assistant',
+                content: [{ type: 'text', text: 'Fixed.' }],
+                stopReason: 'stop',
+                timestamp: 2,
+                usage: { input: 1200, output: 34, cost: { total: 0.02 } },
+            },
+        ];
+        const actions = (working: boolean) => ({ working, fork: () => undefined, rewind: () => undefined });
+
+        it('copies, and tells what a finished turn took', () => {
+            const html = renderToStaticMarkup(<MessageList state={state(messages, {}, false)} />);
+            expect(html.match(/aria-label="Copy"/g)).toHaveLength(2);
+            expect(html).toContain('Copy debug info');
+            expect(html).toContain('1.2k');
+            expect(html).toContain('$0.02');
+            // Without a conversation that can branch, no fork and no rewind.
+            expect(html).not.toContain('New conversation');
+            expect(html).not.toContain('Rewind to here');
+        });
+
+        it('forks and rewinds where the conversation can, but not while ta works', () => {
+            const idle = renderToStaticMarkup(
+                <MessageActions.Provider value={actions(false)}>
+                    <MessageList state={state(messages, {}, false)} />
+                </MessageActions.Provider>,
+            );
+            expect(idle).toContain('New conversation from here, beside');
+            expect(idle).toContain('New conversation from this reply, beside');
+            expect(idle).toContain('Rewind to here');
+            const working = renderToStaticMarkup(
+                <MessageActions.Provider value={actions(true)}>
+                    <MessageList state={state(messages.slice(0, 1), {}, true)} />
+                </MessageActions.Provider>,
+            );
+            expect(working).not.toContain('New conversation');
+            expect(working).not.toContain('Rewind to here');
+        });
+
+        it('has none under a turn that is not done', () => {
+            const html = renderToStaticMarkup(
+                <MessageList state={state([messages[0], { role: 'assistant', content: [{ type: 'text', text: 'Fix' }] }], {}, true)} />,
+            );
+            expect(html).not.toContain('Copy debug info');
+        });
+    });
+});

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

@@ -0,0 +1,328 @@
+import type { SessionMessage, SessionState, ToolRun } from '@celljs/ta-client';
+import { TaMessageContext, type TaSessionInfo } from '@celljs/ta-protocol';
+import { ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import type { Mood } from '../avatar/dino-avatar';
+import { CustomMessage, ExtensionBoundary, SessionAvatars } from '../extension/extension-view';
+import type { WebCustomMessage } from '../extension/web-extension-api';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { MessageUtil, type ToolOutput } from '../util/message';
+import { type MessageItem, type ProcessStep, ProcessUtil, type ThreadItem, type TurnItem } from '../util/process';
+import { ToolUtil } from '../util/tool';
+import { Callout } from './callout';
+import { ASK_CLASS } from './conversation-scroll';
+import { Icon } from './icon';
+import { Markdown } from './markdown';
+import { TurnFooter, UserFooter } from './message-footer';
+import { RunStatus } from './run-status';
+import { TaAvatar } from './ta-avatar';
+import { ToolView } from './tool-view';
+
+/** The session of the conversation: who answers in it may be drawn by the extension of its group. */
+export const ConversationSession = React.createContext<TaSessionInfo | undefined>(undefined);
+
+/** Who answers, at the head of a turn: ta, or the avatar the extension of the session's group draws. */
+export function TurnAvatar({ mood }: { mood: Mood }) {
+    const session = React.useContext(ConversationSession);
+    const avatars = React.useContext(SessionAvatars);
+    const Avatar = session?.group ? avatars[session.group] : undefined;
+    const ta = <TaAvatar mood={mood} size={24} />;
+    if (!session || !Avatar) {
+        return ta;
+    }
+    return (
+        <ExtensionBoundary name={session.group ?? ''} resetKey={Avatar} fallback={ta}>
+            <Avatar session={session} mood={mood} size={24} />
+        </ExtensionBoundary>
+    );
+}
+
+const TASK_UPDATE = /^<task_update id="[^"]+" title="([^"]*)" status="(\w+)">\n?([\s\S]*?)\n?<\/task_update>$/;
+
+/** What the double of the web client told ta about a task that ended: a note, not something the user said. */
+function TaskUpdate({ title, status, result }: { title: string; status: string; result: string }) {
+    const t = useT();
+    return (
+        <details className="ta-summary">
+            <summary>
+                {title} · {t(`ta.task.${status}` as MessageId)}
+            </summary>
+            <Markdown text={result} />
+        </details>
+    );
+}
+
+/** The images of a message of the user, as thumbnails. */
+export function UserImages({ blocks }: { blocks: ReturnType<typeof MessageUtil.blocks> }) {
+    const images = blocks.filter(block => block.type === 'image' && block.data && block.mimeType?.startsWith('image/'));
+    return images.length > 0 ? (
+        <div className="ta-user-images">
+            {images.map((block, index) => (
+                <img key={index} className="ta-thumb" src={`data:${block.mimeType};base64,${block.data}`} alt="" />
+            ))}
+        </div>
+    ) : null;
+}
+
+function UserMessage({ message }: { message: SessionMessage }) {
+    const blocks = MessageUtil.blocks(message);
+    const update = TASK_UPDATE.exec(MessageUtil.text(blocks).trim());
+    if (update) {
+        return <TaskUpdate title={update[1]} status={update[2]} result={update[3]} />;
+    }
+    const text = TaMessageContext.strip(MessageUtil.text(blocks));
+    return (
+        <div className="ta-message ta-user">
+            <UserImages blocks={blocks} />
+            {text && <div className="ta-bubble">{text}</div>}
+            <UserFooter message={message} text={text} />
+        </div>
+    );
+}
+
+/** A thought folded into one line; it opens to the whole text. Drawn again only when its text changes. */
+const ThinkingStep = React.memo(function ThinkingStep({ text, tagged = true }: { text: string; tagged?: boolean }) {
+    const t = useT();
+    const [open, setOpen] = React.useState(false);
+    return (
+        <div className="ta-step-thinking">
+            <button type="button" className="ta-step-toggle" aria-expanded={open} onClick={() => setOpen(!open)}>
+                <span className="ta-status ta-status-thought" />
+                {tagged && <span className="ta-step-tag">{t('ta.message.thinking')}</span>}
+                {!open && <span className="ta-step-preview">{ProcessUtil.preview(text)}</span>}
+            </button>
+            {open && <div className="ta-thinking-text">{text}</div>}
+        </div>
+    );
+});
+
+const TextStep = React.memo(function TextStep({ text }: { text: string }) {
+    return (
+        <div className="ta-step-text">
+            <span className="ta-status ta-status-thought" />
+            <Markdown text={text} />
+        </div>
+    );
+});
+
+function Step({ step, results, tools, tagged }: { step: ProcessStep; results: Map<string, ToolOutput>; tools: Record<string, ToolRun>; tagged: boolean }) {
+    switch (step.kind) {
+        case 'thinking':
+            return <ThinkingStep text={step.text} tagged={tagged} />;
+        case 'text':
+            return <TextStep text={step.text} />;
+        default: {
+            const { id = '', name = '', arguments: args } = step.call;
+            return (
+                <ToolView
+                    id={id}
+                    name={name}
+                    args={(args as Record<string, unknown>) ?? {}}
+                    run={id ? tools[id] : undefined}
+                    message={id ? results.get(id) : undefined}
+                    runs={tools}
+                />
+            );
+        }
+    }
+}
+
+/**
+ * The head of a turn and its work: the work in one line, "N steps", open while ta is at it, then folded,
+ * so that a long conversation reads as what was asked and what came of it. Before the first step the
+ * line says what ta does. The avatar stays the same element from the turn's first frame to its last.
+ */
+export function Process({
+    steps,
+    active,
+    results,
+    tools,
+    leading,
+    status,
+}: {
+    steps: ProcessStep[];
+    active: boolean;
+    results: Map<string, ToolOutput>;
+    tools: Record<string, ToolRun>;
+    /** Before the head, on its line: the avatar of the turn. */
+    leading?: React.ReactNode;
+    /** On the line while there is no step yet: what ta does. */
+    status?: React.ReactNode;
+}) {
+    const t = useT();
+    const [manual, setManual] = React.useState<boolean>();
+    const [showAll, setShowAll] = React.useState(false);
+    const id = React.useId();
+    const { steps: count, failed } = ToolUtil.count(ProcessUtil.tools(steps), results, tools);
+    // Open while it works, then folded; a failed step says so on the head, quietly.
+    const open = manual ?? active;
+    const folded = ProcessUtil.fold(steps, active, showAll);
+    // Only thoughts: the head already says so, the steps need not say it again.
+    const thoughtOnly = steps.every(step => step.kind === 'thinking');
+    const title = count ? t(active ? 'ta.process.running' : 'ta.process.done', { count }) : t(active ? 'ta.process.thinking' : 'ta.process.thought');
+    return (
+        <div className={`ta-process ${active ? 'ta-process-active' : ''}`}>
+            <div className="ta-turn-head">
+                {leading}
+                {steps.length > 0 ? (
+                    <button type="button" className="ta-process-head" aria-expanded={open} aria-controls={id} onClick={() => setManual(!open)}>
+                        <span>{title}</span>
+                        {failed > 0 && <span className="ta-process-failed">· {t('ta.process.failed', { count: failed })}</span>}
+                        <Icon icon={ChevronRight} size={14} className="ta-process-chevron" />
+                    </button>
+                ) : (
+                    status
+                )}
+            </div>
+            {open && steps.length > 0 && (
+                <div id={id} className="ta-process-steps">
+                    {folded.hidden > 0 && (
+                        <button type="button" className="ta-link ta-more" onClick={() => setShowAll(true)}>
+                            {t('ta.process.earlier', { count: folded.hidden })}
+                        </button>
+                    )}
+                    {folded.steps.map(step => (
+                        <Step key={step.key} step={step} results={results} tools={tools} tagged={!thoughtOnly} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/** A turn that has shown nothing yet: what ta does goes on its head. */
+export function quiet(item: ThreadItem | undefined): boolean {
+    return item?.kind === 'turn' && item.active && !item.steps.length && !item.reply.some(text => text.trim());
+}
+
+function Turn({ item, tools, mood, status }: { item: TurnItem; tools: Record<string, ToolRun>; mood: Mood; status?: React.ReactNode }) {
+    const t = useT();
+    const session = React.useContext(ConversationSession);
+    const results = MessageUtil.results(item.messages);
+    const { errorMessage, stopReason } = (item.last ?? {}) as { errorMessage?: string; stopReason?: string };
+    return (
+        <div className={`ta-message ta-assistant ${item.active ? 'ta-turn-live' : ''}`}>
+            <Process steps={item.steps} active={item.active} results={results} tools={tools} leading={<TurnAvatar mood={mood} />} status={status} />
+            {item.reply.map((text, index) => (
+                <Markdown key={index} text={text} />
+            ))}
+            {!item.active && stopReason === 'error' && errorMessage && <Callout level="error">{errorMessage}</Callout>}
+            {!item.active && stopReason === 'aborted' && <div className="ta-muted ta-small">{t('ta.message.stopped')}</div>}
+            {!item.active && <TurnFooter messages={item.messages} last={item.last} reply={item.reply.join('\n\n').trim()} session={session} />}
+        </div>
+    );
+}
+
+/** `!command` of a user, which pi records as its own kind of message. */
+function BashMessage({ message }: { message: SessionMessage }) {
+    const { command, output, exitCode } = message as unknown as { command: string; output?: string; exitCode?: number };
+    return (
+        <div className="ta-message ta-assistant">
+            <div className={`ta-tool ${exitCode ? 'ta-tool-error' : 'ta-tool-done'}`}>
+                <div className="ta-tool-title">
+                    <code>! {command}</code>
+                </div>
+                {output && (
+                    <div className="ta-tool-body">
+                        <pre className="ta-output">{output}</pre>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function SummaryMessage({ title, text }: { title: MessageId; text: string }) {
+    const t = useT();
+    return (
+        <details className="ta-summary">
+            <summary>{t(title)}</summary>
+            <Markdown text={text} />
+        </details>
+    );
+}
+
+function Message({ item }: { item: MessageItem }) {
+    const { message } = item;
+    switch ((message as { role: string }).role) {
+        case 'user':
+            return <UserMessage message={message} />;
+        case 'bashExecution':
+            return <BashMessage message={message} />;
+        case 'custom':
+            return <CustomMessage message={message as unknown as WebCustomMessage} />;
+        case 'compactionSummary':
+            return <SummaryMessage title="ta.message.compacted" text={(message as { summary?: string }).summary ?? ''} />;
+        case 'branchSummary':
+            return <SummaryMessage title="ta.message.branch" text={(message as { summary?: string }).summary ?? ''} />;
+        default:
+            return null;
+    }
+}
+
+/**
+ * One item of the conversation. The store replaces only the message that changed, so an item draws
+ * again only when one of its messages did, or, while ta is at it, when a tool run did.
+ */
+const ThreadRow = React.memo(
+    function ThreadRow({ item, tools, mood, status }: { item: ThreadItem; tools: Record<string, ToolRun>; mood: Mood; status?: React.ReactNode }) {
+        return item.kind === 'turn' ? <Turn item={item} tools={tools} mood={mood} status={status} /> : <Message item={item} />;
+    },
+    (previous, next) =>
+        previous.mood === next.mood &&
+        previous.status === next.status &&
+        ProcessUtil.same(previous.item, next.item) &&
+        (next.item.kind === 'message' || !next.item.active || previous.tools === next.tools),
+);
+
+/** The last rows, which change and are in view, are always laid out. */
+const SETTLED_AFTER = 4;
+
+/** The conversation; tool results show with the calls they answer. */
+export function MessageList({ state }: { state: SessionState }) {
+    const items = React.useMemo(() => ProcessUtil.items(state.messages, state.working), [state.messages, state.working]);
+    // Rows that come after the list is drawn come in with a motion; those of a conversation opened or loaded again, still.
+    const still = React.useRef(items.length);
+    const count = React.useRef(items.length);
+    if (items.length < still.current || items.length > count.current + 2) {
+        still.current = items.length;
+    }
+    count.current = items.length;
+    let lastTurn = items.length - 1;
+    while (lastTurn >= 0 && items[lastTurn].kind !== 'turn') {
+        lastTurn--;
+    }
+    const waiting = state.pendingUi.length > 0;
+    const last = items[items.length - 1];
+    // What ta does while it works: on the head of a turn that shows nothing yet, else under all it has shown.
+    const status = state.working || state.compacting ? <RunStatus state={state} /> : undefined;
+    const onHead = status && quiet(last);
+    return (
+        <>
+            {items.map((item, index) => (
+                // Rows far up are not laid out or painted until they scroll into view (content-visibility).
+                <div
+                    key={item.key}
+                    className={[
+                        'ta-thread-item',
+                        index < items.length - SETTLED_AFTER && 'ta-settled',
+                        index === items.length - 1 && 'ta-thread-last',
+                        index >= still.current && 'ta-thread-new',
+                        item.kind === 'message' && (item.message as { role: string }).role === 'user' && ASK_CLASS,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                >
+                    <ThreadRow
+                        item={item}
+                        tools={state.tools}
+                        mood={item.kind === 'turn' ? ProcessUtil.mood(item, index === lastTurn, waiting) : 'idle'}
+                        status={onHead && item === last ? status : undefined}
+                    />
+                </div>
+            ))}
+            {status && !onHead && <div className="ta-run-line">{status}</div>}
+        </>
+    );
+}