@cmodjs/core 0.3.0 → 1.5.0

package/runtime/toaster.js

@@ -0,0 +1,286 @@
+import { Box, Button, drawWith, Link, Text } from '../ui/elements.js';
+import { coreVersion, isObject } from '../records.js';
+import { firstLine, messageOf } from '../utils/text.js';
+const githubRepository = /^https:\/\/github\.com\/([^/]+\/[^/#?]+?)(?:\.git)?(?:\/issues)?\/?$/;
+const linkLimit = 2048;
+const hiddenKey = 'cmod:hidden-failures';
+const defaultDuration = 4000;
+const visibleToasts = 3;
+const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const spinnerMs = 100;
+const icons = {
+    default: { glyph: ' ' },
+    success: { glyph: '✓', color: 'success' },
+    info: { glyph: 'ℹ', color: 'suggestion' },
+    warning: { glyph: '⚠', color: 'warning' },
+    error: { glyph: '✗', color: 'error' },
+};
+export function createToaster(claude, name, version) {
+    const entries = new Map();
+    const hidden = new Map();
+    void claude.store.get(hiddenKey).then((saved) => {
+        if (typeof saved !== 'object' || saved === null)
+            return;
+        for (const [id, hides] of Object.entries(saved))
+            if (typeof hides === 'string' && !hidden.has(id))
+                hidden.set(id, hides);
+    }, (error) => claude.ui.log(`${name}: could not read the failures you hid: ${messageOf(error)}`, { to: 'debug' }));
+    let lastId = 0;
+    let frame = 0;
+    let spinning;
+    let isHeld = false;
+    let showsAll = false;
+    let bandId;
+    const changed = () => {
+        const isLoading = [...entries.values()].some((entry) => entry.type === 'loading');
+        if (isLoading && spinning === undefined) {
+            spinning = claude.clock.every(spinnerMs, () => {
+                frame += 1;
+                claude.ui.invalidate('ui.render');
+            });
+        }
+        if (!isLoading && spinning !== undefined) {
+            spinning.cancel();
+            spinning = undefined;
+        }
+        if (entries.size <= visibleToasts)
+            showsAll = false;
+        claude.ui.invalidate('ui.render');
+    };
+    const disarm = (entry) => {
+        entry.timer?.cancel();
+        entry.timer = undefined;
+    };
+    const arm = (entry) => {
+        const duration = entry.options.duration ?? defaultDuration;
+        if (entry.timer !== undefined || entry.type === 'loading' || entry.isOpen || !Number.isFinite(duration))
+            return;
+        entry.timer = claude.clock.after(duration, () => {
+            entry.timer = undefined;
+            if (isHeld)
+                arm(entry);
+            else
+                dismiss(entry.id);
+        });
+    };
+    const dismiss = (id) => {
+        for (const entry of entries.values()) {
+            if (id !== undefined && entry.id !== id)
+                continue;
+            disarm(entry);
+            entries.delete(entry.id);
+        }
+        changed();
+    };
+    const put = (type, message, options, actions, hides) => {
+        const id = options.id ?? (lastId += 1);
+        const previous = entries.get(id);
+        if (previous !== undefined)
+            disarm(previous);
+        const reporting = hides !== undefined && previous?.hides === hides ? previous.reporting : undefined;
+        const entry = { id, type, message, options, actions, ...(hides === undefined ? {} : { hides }), isOpen: previous?.isOpen ?? false, reporting, timer: undefined };
+        if (type === 'error' && previous?.message !== message)
+            claude.ui.log(`${name}: ${message}${typeof options.description === 'string' ? `: ${options.description}` : ''}`, { to: 'debug' });
+        entries.set(id, entry);
+        changed();
+        return id;
+    };
+    const show = (type) => (message, options = {}) => put(type, message, options, options.action === undefined ? [] : [options.action]);
+    const hide = (entry) => {
+        dismiss(entry.id);
+        if (entry.hides === undefined)
+            return;
+        hidden.set(String(entry.id), entry.hides);
+        void claude.store.set(hiddenKey, Object.fromEntries(hidden)).catch((error) => claude.ui.log(`${name}: could not remember the failure you hid: ${messageOf(error)}`, { to: 'debug' }));
+    };
+    const toast = Object.assign(show('default'), {
+        success: show('success'),
+        info: show('info'),
+        warning: show('warning'),
+        error: show('error'),
+        loading: show('loading'),
+        dismiss,
+        promise(task, messages) {
+            const id = show('loading')(messages.loading);
+            const settled = Promise.resolve()
+                .then(() => (typeof task === 'function' ? task() : task))
+                .then((value) => {
+                show('success')(typeof messages.success === 'function' ? messages.success(value) : messages.success, { id });
+                return value;
+            }, (error) => {
+                show('error')(typeof messages.error === 'function' ? messages.error(error) : messages.error, { id });
+                throw error;
+            });
+            settled.catch(() => undefined);
+            return { unwrap: () => settled };
+        },
+    });
+    const copy = async (text) => {
+        const copied = await claude.ui.copy({ text });
+        if (!copied.isCopied)
+            throw new Error(copied.reason);
+    };
+    const press = (entry, run) => () => void Promise.resolve()
+        .then(run)
+        .catch((error) => fail({ id: `press:${entry.id}`, message: `${entry.message}: the press failed`, error }));
+    const fail = ({ id, message, error, description = error === undefined ? undefined : describe(error), retry }) => {
+        const hides = `${version() ?? ''}\n${message}\n${error === undefined ? '' : describe(error)}`;
+        if (hidden.get(id) === hides)
+            return id;
+        hidden.delete(id);
+        const stack = error instanceof Error && error.stack !== undefined ? `\n\n${error.stack}` : '';
+        const details = async () => {
+            const modVersion = await claude.fs
+                .read(`${claude.plugin.root}/.claude-plugin/plugin.json`)
+                .then((text) => String(JSON.parse(text).version))
+                .catch((failure) => `unknown (${messageOf(failure)})`);
+            return `${name} ${modVersion}, @cmodjs/core ${coreVersion}\n${message}${description === undefined ? '' : `\n${description}`}${stack}`;
+        };
+        const startReporting = async () => {
+            const shown = entries.get(id);
+            if (shown === undefined)
+                return;
+            shown.reporting = { contact: await contactOf(claude), details: await details() };
+            disarm(shown);
+            changed();
+            if (bandId === undefined)
+                return;
+            const focused = await claude.ui.focus({ requestId: bandId, key: `toast:${id}:ask-claude` });
+            if ('deny' in focused)
+                claude.ui.log(`${name}: the Report choices did not take the keys: ${String(focused.deny)}`, { to: 'debug' });
+        };
+        const actions = [...(retry === undefined ? [] : [{ label: 'Retry', onClick: retry }]), { label: 'Report', onClick: startReporting }];
+        return put('error', message, { id, ...(description === undefined ? {} : { description }), duration: Infinity }, actions, hides);
+    };
+    const toggle = (entry) => () => {
+        entry.isOpen = !entry.isOpen;
+        disarm(entry);
+        changed();
+    };
+    const row = (entry) => {
+        const { description } = entry.options;
+        const isText = typeof description === 'string';
+        const icon = entry.type === 'loading' ? { glyph: spinner[frame % spinner.length], color: 'claude' } : icons[entry.type];
+        const message = isText ? Button({ plain: true, key: `toast:${entry.id}:open`, label: entry.message, onPress: toggle(entry) }) : Text({ children: entry.message });
+        const details = !isText ? description : Text({ dimColor: true, wrap: entry.isOpen ? 'wrap' : 'truncate-end', children: entry.isOpen ? description : firstLine(description) });
+        const fixed = (child) => Box({ flexShrink: 0, children: child });
+        const close = Button({ plain: true, dimColor: true, key: `toast:${entry.id}:close`, label: entry.hides === undefined ? '✕' : 'Hide', onPress: () => hide(entry) });
+        const actions = entry.actions.map((action, index) => Button({ plain: true, key: `toast:${entry.id}:${index === 0 ? 'action' : `action-${index}`}`, label: action.label, onPress: press(entry, action.onClick) }));
+        const text = details === undefined ? [message] : [message, details];
+        const under = entry.reporting === undefined ? [Box({ gap: 2, flexWrap: 'wrap', children: [...actions, close] })] : reportChoices(entry, entry.reporting);
+        return Box({
+            gap: 2,
+            children: [
+                fixed(Text({ ...(icon.color === undefined ? {} : { color: icon.color }), children: icon.glyph })),
+                fixed(Text({ dimColor: true, children: name })),
+                Box({ flexDirection: 'column', flexGrow: 1, flexShrink: 1, children: entry.hides === undefined ? text : [...text, ...under] }),
+                ...(entry.hides === undefined ? [...actions.map(fixed), fixed(close)] : []),
+            ],
+        });
+    };
+    const reportChoices = (entry, { contact, details, status }) => {
+        const say = (said) => {
+            entry.reporting = { contact, details, status: said };
+            changed();
+        };
+        const back = () => {
+            entry.reporting = undefined;
+            changed();
+        };
+        const askClaude = async () => {
+            await claude.prompt.submit({ text: reportPrompt(name, contact, details), asUser: true });
+            back();
+        };
+        const copyError = async () => {
+            const copied = await claude.ui.copy({ text: details });
+            say(copied.isCopied ? 'Copied the error.' : `Could not copy it: ${copied.reason}`);
+        };
+        const report = contact === undefined ? [] : [Link({ href: reportLink(contact, name, entry.message, details), label: contact.kind === 'github' ? 'Report it on GitHub (opens your browser)' : 'Email the author (opens your mail app)' })];
+        return [
+            Text({ dimColor: true, children: 'Claude writes up the problem and files it with your tools. You approve each step before anything is posted.' }),
+            Box({
+                gap: 2,
+                flexWrap: 'wrap',
+                children: [
+                    Button({ plain: true, key: `toast:${entry.id}:ask-claude`, label: 'Ask Claude to report it', onPress: press(entry, askClaude) }),
+                    ...report,
+                    Button({ plain: true, key: `toast:${entry.id}:copy`, label: 'Copy the error', onPress: press(entry, copyError) }),
+                    Button({ plain: true, dimColor: true, key: `toast:${entry.id}:back`, label: 'Back', onPress: back }),
+                ],
+            }),
+            ...(status === undefined ? [] : [Text({ dimColor: true, children: status })]),
+        ];
+    };
+    return {
+        toast,
+        copy,
+        fail,
+        get shown() {
+            return [...entries.values()].map(({ type, message, options }) => ({ type, message, ...(typeof options.description === 'string' ? { description: options.description } : {}) }));
+        },
+        draw(drawn, table, band, drawnIn) {
+            bandId = drawnIn;
+            isHeld = band.hasSurvey === true;
+            if (isHeld || entries.size === 0)
+                return drawn;
+            const all = [...entries.values()];
+            const hidden = showsAll ? 0 : Math.max(all.length - visibleToasts, 0);
+            for (const entry of all.slice(hidden))
+                arm(entry);
+            const more = Button({
+                plain: true,
+                dimColor: true,
+                key: 'toasts:more',
+                label: `+${hidden} more`,
+                onPress: () => {
+                    showsAll = true;
+                    changed();
+                },
+            });
+            return drawWith(table, () => Box({ flexDirection: 'column', children: [drawn, ...(hidden > 0 ? [more] : []), ...all.slice(hidden).map(row)] }));
+        },
+    };
+}
+function describe(error) {
+    const messages = [];
+    for (let cause = error; cause !== undefined; cause = cause instanceof Error ? cause.cause : undefined) {
+        const text = messageOf(cause);
+        if (!messages.some((earlier) => earlier.includes(text) || text.includes(earlier)))
+            messages.push(text);
+    }
+    return messages.join('\n');
+}
+async function contactOf(claude) {
+    const manifest = await claude.fs
+        .read(`${claude.plugin.root}/.claude-plugin/plugin.json`)
+        .then((text) => JSON.parse(text))
+        .catch((error) => {
+        claude.ui.log(`${claude.plugin.name}: could not read whom to report to: ${messageOf(error)}`, { to: 'debug' });
+        return {};
+    });
+    const repositoryUrl = isObject(manifest['repository']) ? manifest['repository']['url'] : manifest['repository'];
+    const repository = [manifest['supportUrl'], repositoryUrl].map((url) => (typeof url === 'string' ? githubRepository.exec(url)?.[1] : undefined)).find((found) => found !== undefined);
+    if (repository !== undefined)
+        return { kind: 'github', repository };
+    const author = manifest['author'];
+    const address = isObject(author) ? author['email'] : undefined;
+    return typeof address === 'string' && address !== '' ? { kind: 'email', address } : undefined;
+}
+function reportLink(contact, name, message, details) {
+    const title = `${name}: ${message}`.slice(0, 120);
+    const linkOf = (body) => contact.kind === 'github'
+        ? `https://github.com/${contact.repository}/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`
+        : `mailto:${contact.address}?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`;
+    let body = details;
+    while (linkOf(body).length > linkLimit && body.length > 0)
+        body = `${body.slice(0, Math.floor(body.length * 0.8))}…`;
+    return linkOf(body);
+}
+function reportPrompt(name, contact, details) {
+    const where = contact === undefined
+        ? `${name} names no place to report it, so find its author from its plugin.json or its marketplace.`
+        : contact.kind === 'github'
+            ? `Report it as an issue on https://github.com/${contact.repository}.`
+            : `Email it to ${contact.address}.`;
+    return `The ${name} mod failed. Report it to its author. ${where} First check whether it is reported already, and add to that report instead of filing a new one. Show me the report before you post it.\n\n${details}`;
+}

package/runtime/ui.d.ts

@@ -1,31 +1,20 @@
-import type { ElementTable, RenderElement } from 'claude-code';
-import type { Mod, ProgressStep } from '../mod.js';
+import type { Mod } from '../mod.js';
 import type { Claude } from './claude.js';
 import type { Router } from './router.js';
-export type ProgressLine = {
-    report(step: ProgressStep): void;
-    wait(text: string): void;
-    fail(reason: string, fix: string): void;
-    end(): void;
-};
-export type Progress = {
-    readonly isShown: boolean;
-    start(title: string): ProgressLine;
-    draw(drawn: RenderElement, table: ElementTable, columns: number | undefined): RenderElement;
-};
-export declare function createProgress(claude: Claude): Progress;
+import type { Failure, Toaster } from './toaster.js';
 export type UiOptions<State extends object> = {
     readonly name: string;
     readonly claude: Claude;
     readonly router: Router;
-    readonly progress: Progress;
+    readonly toaster: Toaster;
+    readonly report: (failure: Failure) => void;
     readonly announce: (feature: string) => void;
     readonly mod: () => Mod<State>;
 };
 export type UiArea<State extends object> = {
-    readonly ui: Mod<State>['ui'];
+    readonly ui: Omit<Mod<State>['ui'], 'notice'>;
     changed(): void;
     restorePanes(): Promise<void>;
 };
-export declare function createUi<State extends object>({ name, claude, router, progress, announce, mod }: UiOptions<State>): UiArea<State>;
+export declare function createUi<State extends object>({ name, claude, router, toaster, report, announce, mod }: UiOptions<State>): UiArea<State>;
 //# sourceMappingURL=ui.d.ts.map

package/runtime/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/runtime/ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAA+B,aAAa,EAAS,MAAM,aAAa,CAAA;AAClG,OAAO,KAAK,EAAE,GAAG,EAAc,YAAY,EAAE,MAAM,WAAW,CAAA;AAO9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAA;IAChC,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IACvC,GAAG,IAAI,IAAI,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,CAAA;CAC5F,CAAA;AAkBD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAqDvD;AAsGD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,MAAM,IAAI;IAC5C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,MAAM,CAAC,KAAK,SAAS,MAAM,IAAI;IACzC,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAA;IAC7B,OAAO,IAAI,IAAI,CAAA;IACf,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9B,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAmNjI"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/runtime/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,GAAG,EAAc,MAAM,WAAW,CAAA;AAM5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAgFpD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,MAAM,IAAI;IAC5C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,MAAM,CAAC,KAAK,SAAS,MAAM,IAAI;IACzC,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC7C,OAAO,IAAI,IAAI,CAAA;IACf,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9B,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CA8OxI"}

package/runtime/ui.js

@@ -1,92 +1,8 @@
-import { ProgressBar } from '../ui/components.js';
 import { Box, drawWith, Text } from '../ui/elements.js';
+import { componentOf, nameOf } from '../ui/places.js';
 import { messageOf } from '../utils/text.js';
-const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-const spinnerMs = 100;
 const bullet = '⏺';
-const widestBar = 30;
-const narrowestBar = 10;
 const sizeKeys = ['columns', 'rows'];
-export function createProgress(claude) {
-    const lines = [];
-    let frame = 0;
-    let timer;
-    const changed = () => {
-        const isSpinning = lines.some((line) => line.failure === undefined && line.waiting === undefined);
-        if (isSpinning && timer === undefined) {
-            timer = claude.clock.every(spinnerMs, () => {
-                frame += 1;
-                claude.ui.invalidate('ui.render');
-            });
-        }
-        if (!isSpinning && timer !== undefined) {
-            timer.cancel();
-            timer = undefined;
-        }
-        claude.ui.invalidate('ui.render');
-    };
-    return {
-        get isShown() {
-            return lines.length > 0;
-        },
-        start(title) {
-            const line = { title, step: undefined, waiting: undefined, failure: undefined };
-            lines.push(line);
-            changed();
-            return {
-                report(step) {
-                    line.step = step;
-                    line.waiting = undefined;
-                    changed();
-                },
-                wait(text) {
-                    line.waiting = text;
-                    changed();
-                },
-                fail(reason, fix) {
-                    line.failure = { reason, fix };
-                    changed();
-                },
-                end() {
-                    const index = lines.indexOf(line);
-                    if (index >= 0)
-                        lines.splice(index, 1);
-                    changed();
-                },
-            };
-        },
-        draw(drawn, table, columns) {
-            return drawWith(table, () => Box({ flexDirection: 'column', children: [drawn, ...lines.map((line) => drawLine(line, frame, columns))] }));
-        },
-    };
-}
-function drawLine(line, frame, columns) {
-    const title = Text({ bold: true, children: line.title });
-    if (line.failure !== undefined) {
-        return Box({
-            flexDirection: 'column',
-            children: [
-                Box({ children: [Box({ minWidth: 2, children: Text({ color: 'error', children: '✗' }) }), Text({ children: [title, '  ', Text({ color: 'error', children: line.failure.reason })] })] }),
-                Box({ paddingLeft: 2, children: Text({ dimColor: true, children: line.failure.fix }) }),
-            ],
-        });
-    }
-    if (line.waiting !== undefined) {
-        return Text({ wrap: 'truncate-end', children: [Text({ color: 'warning', children: '◌' }), ' ', title, '  ', Text({ dimColor: true, children: line.waiting })] });
-    }
-    const glyph = Text({ color: 'claude', children: spinner[frame % spinner.length] });
-    if (line.step === undefined)
-        return Text({ wrap: 'truncate-end', children: [glyph, ' ', title, Text({ dimColor: true, children: '…' })] });
-    const { done, total, label = '' } = line.step;
-    const width = barWidth(columns, `${line.title}${done}/${total}${label}`.length);
-    return Text({ wrap: 'truncate-end', children: [glyph, ' ', title, '  ', ProgressBar({ done, total, width }), ...(label === '' ? [] : ['  ', label])] });
-}
-function barWidth(columns, textLength) {
-    if (columns === undefined)
-        return widestBar;
-    const spacing = 2 + 2 + 2 + 2;
-    return Math.max(narrowestBar, Math.min(widestBar, columns - textLength - spacing));
-}
 function paneSize(pane, state) {
     const size = {};
     for (const key of sizeKeys) {
@@ -149,10 +65,21 @@ function drawPieces(pieces, place) {
         return Box({ children: [Box({ minWidth: 2, children: Text({ color: 'text', children: bullet }) }), column(spaced)] });
     return column([opening, Box({ paddingLeft: 2, children: column(rest) })]);
 }
-export function createUi({ name, claude, router, progress, announce, mod }) {
+export function createUi({ name, claude, router, toaster, report, announce, mod }) {
     const panes = new Map();
     const paneLogs = new Map();
     const openPanes = new Set();
+    const paneStates = new Map();
+    const syncPanes = async () => {
+        for (const open of await claude.ui.panes()) {
+            if (!panes.has(open.id))
+                continue;
+            if (open.isPlaced)
+                openPanes.add(open.id);
+            paneStates.set(open.id, { isShown: open.isShown, isFocused: open.isFocused });
+        }
+    };
+    const readPanes = () => void syncPanes().catch((error) => claude.ui.log(`${name} keeps its panes' shown and focused state from before: ${messageOf(error)}`, { to: 'debug' }));
     const requestedSizes = new Map();
     const renders = new Set();
     const markdownRenders = new Map();
@@ -163,7 +90,7 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
         let hasLogged = false;
         return (failure) => {
             if (!hasLogged)
-                claude.ui.log(`${name}: the ${what} render ${failure}`);
+                report({ id: `render:${what}`, message: `The ${what} render failed`, description: failure });
             hasLogged = true;
         };
     };
@@ -192,10 +119,10 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
             return drawPieces(drawings.map((drawing) => ({ drawing, isClaudesRow: false })), 'pane');
         };
     };
-    const routeMarkdown = (kind) => {
+    const routeMarkdown = (createReader) => {
         if (read !== undefined)
             return;
-        const reader = kind.createReader();
+        const reader = createReader();
         read = reader;
         router.add('ui.render', async (e, next) => {
             if (e.component !== 'AssistantMessage')
@@ -244,6 +171,8 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
             if (pane === undefined || e.component !== 'Pane')
                 return next(e);
             openPanes.add(pane.id);
+            paneStates.set(pane.id, { isShown: true, isFocused: e.props.isFocused });
+            readPanes();
             const table = claude.ui.resolve(e);
             try {
                 return drawWith(table, () => pane.render(mod(), e.props), markdownIn(table));
@@ -263,6 +192,8 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
         });
         router.add('ui.close', async (e, next) => {
             openPanes.delete(e.id);
+            paneStates.delete(e.id);
+            readPanes();
             const closed = await next(e);
             const pane = panes.get(e.id);
             if (pane?.onClose !== undefined)
@@ -275,7 +206,7 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
             await run();
         }
         catch (error) {
-            claude.ui.log(`${name}: the ${pane.title} pane's ${handler} threw: ${messageOf(error)}`);
+            report({ id: `pane:${pane.id}:${handler}`, message: `The ${pane.title} pane's ${handler} threw`, error });
         }
     };
     return {
@@ -291,35 +222,53 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
                     get isOpen() {
                         return openPanes.has(pane.id);
                     },
+                    get isShown() {
+                        return paneStates.get(pane.id)?.isShown ?? false;
+                    },
+                    get isFocused() {
+                        return paneStates.get(pane.id)?.isFocused ?? false;
+                    },
                     async open(options) {
                         const { isPlaced } = await openAt(pane, paneSize(pane, mod().state), options?.focus);
                         if (isPlaced)
                             openPanes.add(pane.id);
+                        await syncPanes();
                     },
                     async close() {
                         await claude.ui.close({ id: pane.id });
                         openPanes.delete(pane.id);
+                        paneStates.delete(pane.id);
+                        await syncPanes();
                     },
                     toggle: (options) => (openPanes.has(pane.id) ? handle.close() : handle.open(options)),
                 };
                 return handle;
             },
-            render(slot, Component) {
-                const place = slot;
-                const feature = 'markdown' in place ? `a render of markdown ${place.markdown.name}` : `a render of ${place.component}`;
+            render(place, Component) {
+                const target = place;
+                const markdown = typeof target === 'string' ? undefined : target;
+                const component = componentOf(place);
+                if (markdown === undefined && component === undefined)
+                    throw new Error(`${name}: ${String(place)} is not a place render draws, such as ToolCall or CodeBlock.`);
+                const feature = `a render of ${nameOf(place)}`;
                 if (renders.has(feature))
-                    throw new Error(`${name}: ${feature} is already added. Render each slot once.`);
+                    throw new Error(`${name}: ${feature} is already added. Render each place once.`);
                 renders.add(feature);
                 announce(feature);
-                if ('markdown' in place) {
-                    const kind = place.markdown;
-                    markdownRenders.set(kind.type, { Component: Component, log: logOnce(`markdown ${kind.name}`) });
-                    routeMarkdown(kind);
-                    return;
+                if (markdown !== undefined) {
+                    const markdownType = markdown.markdown;
+                    markdownRenders.set(markdownType, { Component: Component, log: logOnce(nameOf(place)) });
+                    routeMarkdown(markdown.createReader);
+                    return {
+                        dispose() {
+                            markdownRenders.delete(markdownType);
+                            renders.delete(feature);
+                            claude.ui.invalidate('ui.render');
+                        },
+                    };
                 }
-                const { component } = place;
-                const log = logOnce(component);
-                router.add('ui.render', async (e, next) => {
+                const log = logOnce(nameOf(place));
+                const drawing = router.add('ui.render', async (e, next) => {
                     if (e.component !== component)
                         return next(e);
                     const table = claude.ui.resolve(e);
@@ -332,17 +281,16 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
                         return drawn.drawing;
                     return drawWith(table, () => drawPieces([drawn], e.props.isFirstOfReply ? 'opensReply' : 'inReply'));
                 });
+                return {
+                    dispose() {
+                        drawing.dispose();
+                        renders.delete(feature);
+                        claude.ui.invalidate('ui.render');
+                    },
+                };
             },
-            toast: (text, options) => claude.ui.toast(text, options),
-            async progress(title, task) {
-                const line = progress.start(title);
-                try {
-                    return await task((step) => line.report(step));
-                }
-                finally {
-                    line.end();
-                }
-            },
+            toast: toaster.toast,
+            copy: toaster.copy,
             ask: (question, options) => claude.ui.ask(question, options),
             scroll: (args) => claude.ui.scroll(args),
         },
@@ -362,12 +310,8 @@ export function createUi({ name, claude, router, progress, announce, mod }) {
             });
         },
         async restorePanes() {
-            if (panes.size === 0)
-                return;
-            for (const open of await claude.ui.panes()) {
-                if (open.isPlaced && panes.has(open.id))
-                    openPanes.add(open.id);
-            }
+            if (panes.size > 0)
+                await syncPanes();
         },
     };
 }

package/session/context/context.d.ts

@@ -0,0 +1,12 @@
+import type { RecordPart } from '../session.js';
+import type { Turn } from './turn/turn.js';
+export declare const ContextStart = "contextStart";
+export declare const ContextEnd = "contextEnd";
+export type Context = RecordPart & {
+    readonly number: number;
+    readonly openedAt: string;
+    readonly closedAt?: string;
+    readonly task?: string;
+    turns(): Promise<Turn[]>;
+};
+//# sourceMappingURL=context.d.ts.map

package/session/context/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/session/context/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAE1C,eAAO,MAAM,YAAY,iBAAiB,CAAA;AAE1C,eAAO,MAAM,UAAU,eAAe,CAAA;AAEtC,MAAM,MAAM,OAAO,GAAG,UAAU,GAAG;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,CAAA;CACzB,CAAA"}

package/session/context/context.js

@@ -0,0 +1,2 @@
+export const ContextStart = 'contextStart';
+export const ContextEnd = 'contextEnd';

package/session/context/turn/message/document.d.ts

@@ -0,0 +1,7 @@
+import type { MessageOf } from './message.js';
+export declare const Document = "document";
+export type Document = MessageOf<typeof Document> & {
+    readonly path: string;
+    readonly text: string;
+};
+//# sourceMappingURL=document.d.ts.map

package/session/context/turn/message/document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../../src/session/context/turn/message/document.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,QAAQ,aAAa,CAAA;AAElC,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,QAAQ,CAAC,GAAG;IAClD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA"}

package/session/context/turn/message/document.js

@@ -0,0 +1 @@
+export const Document = 'document';