@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/components/file-viewer/views/BinaryView.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// A file nothing here can read as a document. The honest answer is not an
+// error and not an empty frame: it is the file's first bytes, which is the
+// only thing anyone can truthfully say about it.
+import { useMemo } from "react";
+/** How much of the file the dump shows. A hex view is for identifying a
+ * file — a magic number, a header, an encoding — not for reading it. */
+const DUMP_BYTES = 4096;
+const COLUMNS = 16;
+const HEX = Array.from({ length: 256 }, (_, byte) => byte.toString(16).padStart(2, "0"));
+function dump(bytes) {
+    const rows = [];
+    const end = Math.min(bytes.length, DUMP_BYTES);
+    for (let at = 0; at < end; at += COLUMNS) {
+        let hex = "";
+        let text = "";
+        for (let column = 0; column < COLUMNS; column += 1) {
+            const byte = at + column < end ? bytes[at + column] : null;
+            hex += byte === null ? "   " : `${HEX[byte]} `;
+            // Printable ASCII only; everything else is a dot, the way every hex
+            // dump since 1970 has drawn it.
+            text += byte === null ? " " : byte >= 0x20 && byte < 0x7f ? String.fromCharCode(byte) : ".";
+        }
+        rows.push({ offset: at.toString(16).padStart(8, "0"), hex, text });
+    }
+    return rows;
+}
+export function BinaryView({ file }) {
+    const rows = useMemo(() => dump(file.bytes), [file]);
+    const shown = Math.min(file.bytes.length, DUMP_BYTES);
+    return (_jsxs("div", { className: "ah-fileview__scroll ah-hex", children: [_jsxs("p", { className: "ah-hex__note", children: ["Nothing here reads this format.", " ", shown < file.handle.size
+                        ? `These are the first ${shown.toLocaleString()} bytes of ${file.handle.size.toLocaleString()}.`
+                        : `All ${shown.toLocaleString()} bytes are here.`] }), rows.map((row) => (_jsxs("div", { className: "ah-hex__row", children: [_jsx("span", { className: "ah-hex__offset", children: row.offset }), _jsx("span", { className: "ah-hex__bytes", children: row.hex }), _jsx("span", { className: "ah-hex__text", children: row.text })] }, row.offset)))] }));
+}

package/dist/components/file-viewer/views/CodeView.d.ts

@@ -0,0 +1,2 @@
+import type { ViewBodyProps } from "../types.js";
+export declare function CodeView({ file }: ViewBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/CodeView.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Source, with a gutter and highlighting.
+//
+// Virtualized, because a viewer that will open any file in a worktree will be
+// handed a 60,000-line lockfile eventually, and 60,000 rows of spans is a
+// frozen window. Nineteen pixels is the estimate and minimum row pitch; the
+// virtualizer measures wrapped rows from their DOM boxes and corrects every
+// following offset when the available width changes.
+import { useCallback, useMemo, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { CodeMinimap } from "../minimap/CodeMinimap.js";
+import { highlight, PLAIN_TEXT } from "../syntax/index.js";
+/** One visual row's minimum and unmeasured estimate, in CSS px. */
+const LINE_HEIGHT = 19;
+/** Rows drawn beyond the viewport, so a flick does not show blank bands. */
+const OVERSCAN = 30;
+/** A tab uses the same stop width in the source listing and minimap. */
+const TAB_COLUMNS = 2;
+export function CodeView({ file }) {
+    const scrollerRef = useRef(null);
+    const lines = useMemo(() => {
+        const source = file.text ?? "";
+        const highlighted = highlight(source, file.kind.language ?? PLAIN_TEXT);
+        // A file that ends in a newline is not a file with a blank last line;
+        // every editor counts it the same way.
+        return highlighted.length > 1 && highlighted[highlighted.length - 1].length === 0
+            ? highlighted.slice(0, -1)
+            : highlighted;
+    }, [file]);
+    // Handed to CSS as a variable so the wrapped source measure begins at one
+    // stable gutter edge regardless of the number of lines in the file.
+    const digits = `${String(lines.length).length}ch`;
+    const virtualizer = useVirtualizer({
+        count: lines.length,
+        getScrollElement: () => scrollerRef.current,
+        estimateSize: () => LINE_HEIGHT,
+        overscan: OVERSCAN,
+    });
+    const scrollToLine = useCallback((lineIndex) => {
+        virtualizer.scrollToIndex(lineIndex, { align: "center" });
+    }, [virtualizer]);
+    return (_jsxs("div", { className: "ah-code-shell", children: [_jsx("div", { className: "ah-fileview__scroll ah-code", ref: scrollerRef, style: { "--ah-code-digits": digits }, children: _jsx("div", { className: "ah-code__sizer", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((row) => (_jsxs("div", { className: "ah-code__line", "data-index": row.index, ref: virtualizer.measureElement, style: { transform: `translateY(${row.start}px)` }, children: [_jsx("span", { className: "ah-code__num", children: row.index + 1 }), _jsx("code", { children: lines[row.index].map((token, at) => token.kind === "plain" ? (token.text) : (
+                                // eslint-disable-next-line react/no-array-index-key -- the
+                                // token list is derived from immutable text; index IS its id.
+                                _jsx("span", { "data-t": token.kind, children: token.text }, at))) })] }, row.key))) }) }), _jsx(CodeMinimap, { lines: lines, lineHeight: LINE_HEIGHT, tabColumns: TAB_COLUMNS, scrollerRef: scrollerRef, scrollToLine: scrollToLine })] }));
+}

package/dist/components/file-viewer/views/DiffBody.d.ts

@@ -0,0 +1,7 @@
+export interface DiffBodyProps {
+    /** git's own unified diff for one file. */
+    readonly unified: string;
+    /** The file's name, which is how the lines get their language. */
+    readonly name: string;
+}
+export declare function DiffBody({ unified, name }: DiffBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/DiffBody.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// A file's change, as git described it — the pane itself, so that both the
+// file viewer (which reaches it through the registry) and the commit viewer
+// (which lays two of these out side by side) draw exactly the same thing.
+//
+// Unified rather than side-by-side: this dialog is 1080px at most and a
+// split view halves the measure twice over — once for the gutter, once for
+// the second pane — and the room's own transcript already argues that a
+// narrow column of code is the thing that suffers first.
+//
+// The line hues are §2.5's, and they are not an exception: DESIGN.md defines
+// `--vf-green` as "positive delta" and `--vf-red` as "negative delta"
+// outright. What stays neutral is the diffstat FIGURE — §8's rule that hue
+// says which project or which state, and `+214 −38` is neither.
+import { useMemo, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { parseDiff } from "../diff/index.js";
+import { highlight, languageFor, PLAIN_TEXT } from "../syntax/index.js";
+/** Matches `--ah-code-line`; the virtualizer scrolls by it. */
+const LINE_HEIGHT = 19;
+const OVERSCAN = 24;
+const MARK = {
+    add: "+",
+    del: "−",
+    context: " ",
+    note: "",
+};
+export function DiffBody({ unified, name }) {
+    const scrollerRef = useRef(null);
+    const { rows, parsed } = useMemo(() => {
+        const diff = parseDiff(unified);
+        // Every line is highlighted in the file's own language — a diff of Rust
+        // should read as Rust. The tokenizer runs per line here rather than over
+        // the file, so a block comment that opens outside the hunk is not known
+        // to be open; that is the honest cost of only having the hunks.
+        const language = languageFor(name) ?? PLAIN_TEXT;
+        const out = [];
+        for (const hunk of diff.hunks) {
+            out.push({
+                kind: "hunk",
+                header: hunk.header,
+                range: hunk.oldStart === null || hunk.newStart === null
+                    ? "@@"
+                    : `@@ −${hunk.oldStart} +${hunk.newStart} @@`,
+            });
+            for (const line of hunk.lines) {
+                out.push({
+                    kind: "line",
+                    line,
+                    tokens: line.kind === "note" ? [] : (highlight(line.text, language)[0] ?? []),
+                });
+            }
+        }
+        return { rows: out, parsed: diff };
+    }, [unified, name]);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollerRef.current,
+        estimateSize: () => LINE_HEIGHT,
+        overscan: OVERSCAN,
+    });
+    if (rows.length === 0) {
+        const why = parsed.absence === "binary"
+            ? "git will not diff a binary file, and neither will this."
+            : parsed.absence === "mode-only"
+                ? "Only the file's mode changed. Its content is identical."
+                : parsed.renamedFrom !== null
+                    ? `Renamed from ${parsed.renamedFrom}, with no change to its content.`
+                    : "The two sides are identical.";
+        return (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "No lines changed" }), _jsx("span", { children: why })] }));
+    }
+    const gutter = `${String(Math.max(...rows.map((row) => row.kind === "line" ? Math.max(row.line.oldNumber ?? 0, row.line.newNumber ?? 0) : 0))).length}ch`;
+    return (_jsxs("div", { className: "ah-fileview__scroll ah-code ah-diff", ref: scrollerRef, style: { "--ah-code-digits": gutter }, children: [_jsxs("p", { className: "ah-diff__stat", children: [_jsxs("span", { className: "tnum", children: ["+", parsed.added, " \u2212", parsed.deleted] }), parsed.renamedFrom !== null && (_jsxs("span", { className: "ah-diff__renamed", title: parsed.renamedFrom, children: ["renamed from ", parsed.renamedFrom] }))] }), _jsx("div", { className: "ah-code__sizer", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((item) => {
+                    const row = rows[item.index];
+                    return (_jsx("div", { className: "ah-code__line", "data-diff": row.kind === "line" ? row.line.kind : "hunk", style: { height: LINE_HEIGHT, transform: `translateY(${item.start}px)` }, children: row.kind === "hunk" ? (_jsxs("span", { className: "ah-diff__hunk", children: [_jsx("span", { className: "ah-diff__range tnum", children: row.range }), row.header !== "" && _jsx("span", { className: "ah-diff__context", children: row.header })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "ah-code__num", children: row.line.oldNumber ?? "" }), _jsx("span", { className: "ah-code__num", children: row.line.newNumber ?? "" }), _jsx("span", { className: "ah-diff__mark", children: MARK[row.line.kind] }), _jsx("code", { children: row.line.kind === "note" ? (_jsx("em", { children: row.line.text })) : (row.tokens.map((token, at) => token.kind === "plain" ? (token.text) : (_jsx("span", { "data-t": token.kind, children: token.text }, at)))) })] })) }, item.key));
+                }) })] }));
+}

package/dist/components/file-viewer/views/DiffView.d.ts

@@ -0,0 +1,2 @@
+import type { ViewBodyProps } from "../types.js";
+export declare function DiffView({ file }: ViewBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/DiffView.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The registry's way in to the diff pane.
+//
+// A `ViewerDefinition` renders one `OpenFile`; `DiffBody` renders one
+// unified diff. Keeping them apart is what lets the commit viewer lay two
+// panes out without pretending its selection is a file the registry
+// resolved.
+import { DiffBody } from "./DiffBody.js";
+export function DiffView({ file }) {
+    return _jsx(DiffBody, { unified: file.unified ?? "", name: file.handle.name });
+}

package/dist/components/file-viewer/views/ImageView.d.ts

@@ -0,0 +1,9 @@
+import type { ViewBodyProps } from "../types.js";
+export declare const IMAGE_MODES: readonly [{
+    readonly id: "fit";
+    readonly label: "Fit";
+}, {
+    readonly id: "actual";
+    readonly label: "1:1";
+}];
+export declare function ImageView({ file, mode, onRetry }: ViewBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/ImageView.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useImageUrl } from "../image-resource.js";
+export const IMAGE_MODES = [
+    { id: "fit", label: "Fit" },
+    { id: "actual", label: "1:1" },
+];
+export function ImageView({ file, mode, onRetry }) {
+    const [natural, setNatural] = useState(null);
+    const [failedUrl, setFailedUrl] = useState(null);
+    const [loadedUrl, setLoadedUrl] = useState(null);
+    // Byte-only sources retain the generic viewer seam. Transcript images use
+    // shared HTTP resources and allocate no Blob.
+    const blob = useMemo(() => file.image ? null : URL.createObjectURL(new Blob([file.bytes], { type: file.kind.mime ?? "application/octet-stream" })), [file]);
+    useEffect(() => () => { if (blob)
+        URL.revokeObjectURL(blob); }, [blob]);
+    const addressed = useImageUrl(file.image, mode === "actual" ? "full" : "preview", file.imageAttempt);
+    const url = file.image ? addressed.url : blob;
+    const dimensions = file.image?.width && file.image.height ? file.image : natural;
+    if (url === null && addressed.pending)
+        return _jsx("div", { className: "ah-image", "data-mode": mode, "aria-busy": "true", children: _jsx("span", { className: "ah-image__loading", role: "status", children: "Loading image\u2026" }) });
+    if (url === null || failedUrl === url)
+        return _jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "Could not load this image" }), _jsx("span", { children: "The image could not be read or decoded." }), onRetry && _jsx("button", { className: "ah-fileview__retry", type: "button", onClick: onRetry, children: "Retry" })] });
+    return _jsxs("div", { className: "ah-image", "data-mode": mode, "aria-busy": loadedUrl !== url, children: [loadedUrl !== url && _jsx("span", { className: "ah-image__loading", role: "status", children: "Loading image\u2026" }), _jsx("div", { className: "ah-image__frame ah-fileview__scroll", children: _jsx("img", { src: url, alt: file.handle.name, decoding: "async", onLoad: event => {
+                        setLoadedUrl(url);
+                        setNatural({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight });
+                    }, onError: () => setFailedUrl(url) }, url) }), dimensions && _jsxs("span", { className: "ah-image__facts tnum", children: [dimensions.width, " \u00D7 ", dimensions.height] })] });
+}

package/dist/components/file-viewer/views/MarkdownView.d.ts

@@ -0,0 +1,9 @@
+import type { ViewBodyProps } from "../types.js";
+export declare const MARKDOWN_MODES: readonly [{
+    readonly id: "rendered";
+    readonly label: "Rendered";
+}, {
+    readonly id: "source";
+    readonly label: "Source";
+}];
+export declare function MarkdownView(props: ViewBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/MarkdownView.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A markdown file, rendered — or read as its own source, which is the one
+// switch this view offers. Both readings are true, and a viewer that only
+// offers the pretty one is hiding the file from the person who came to see
+// the file.
+import { useMemo } from "react";
+import { parseMarkdown } from "../markdown/index.js";
+import { MarkdownBlocks } from "../markdown/render.js";
+import { CodeView } from "./CodeView.js";
+export const MARKDOWN_MODES = [
+    { id: "rendered", label: "Rendered" },
+    { id: "source", label: "Source" },
+];
+export function MarkdownView(props) {
+    const { file, mode, renderMarkdown } = props;
+    const blocks = useMemo(() => (mode === "source" || renderMarkdown !== undefined ? [] : parseMarkdown(file.text ?? "")), [file, mode, renderMarkdown]);
+    if (mode === "source")
+        return _jsx(CodeView, { ...props });
+    return (_jsx("div", { className: "ah-fileview__scroll ah-md", children: _jsx("div", { className: "ah-md__measure ah-markdown", children: renderMarkdown === undefined ? _jsx(MarkdownBlocks, { blocks: blocks }) : renderMarkdown(file.text ?? "") }) }));
+}

package/dist/components/file-viewer/views/SvgView.d.ts

@@ -0,0 +1,9 @@
+import type { ViewBodyProps } from "../types.js";
+export declare const SVG_MODES: readonly [{
+    readonly id: "rendered";
+    readonly label: "Rendered";
+}, {
+    readonly id: "source";
+    readonly label: "Source";
+}];
+export declare function SvgView(props: ViewBodyProps): import("react").JSX.Element;

package/dist/components/file-viewer/views/SvgView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeView } from "./CodeView.js";
+import { ImageView } from "./ImageView.js";
+export const SVG_MODES = [
+    { id: "rendered", label: "Rendered" },
+    { id: "source", label: "Source" },
+];
+export function SvgView(props) {
+    return props.mode === "source" ? _jsx(CodeView, { ...props }) : _jsx(ImageView, { ...props });
+}

package/dist/components/git/ChangeTree.d.ts

@@ -0,0 +1,20 @@
+import type { StatusLetter } from "./types.js";
+import type { TreeRow } from "./path-tree.js";
+export interface ChangeTreeProps {
+    readonly rows: readonly TreeRow[];
+    /** The letter each path earned, by path. */
+    readonly letters: ReadonlyMap<string, StatusLetter>;
+    /** Paths the open session touched. Empty until the typed tool projection
+     * ships, which draws no marks rather than guessing at them. */
+    readonly sessionPaths: ReadonlySet<string>;
+    readonly selectedPath: string | null;
+    readonly onSelect: (row: TreeRow) => void;
+    /** The act offered on each row — staging or unstaging, depending on which
+     * group this is. `null` while no client can serve it. */
+    readonly action: {
+        readonly label: string;
+        readonly run: (row: TreeRow) => void;
+    } | null;
+    readonly onDiscard: ((row: TreeRow) => void) | null;
+}
+export declare function ChangeTree({ rows, letters, sessionPaths, selectedPath, onSelect, action, onDiscard, }: ChangeTreeProps): import("react").JSX.Element;

package/dist/components/git/ChangeTree.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// One group's worth of changed files, as a subtree.
+//
+// The row is column ③'s row, with git's letter in front of the name: same
+// glyph set, same 26px height, same indent, same order — because these are
+// two views of ONE repository, and two lists that drew it differently would
+// be two repositories as far as the eye is concerned. The glyph comes from
+// mille's own `FileIcon`, which needs nothing but a name and a kind, so the
+// two columns cannot drift apart as the theme changes.
+//
+// The letter is git's own, in the §2.5 hue its meaning earns: added is a
+// positive delta, deleted a negative one, and everything else is a state the
+// ramp can carry without a colour. A file this session touched wears a mark
+// before its glyph — the one fact a general git client cannot show, and the
+// reason column ⑤ is in a room about agent sessions at all.
+import { FileIcon } from "@vibecook/mille-ui/icons";
+import { vibefieldIconTheme } from "@vibecook/mille-ui/icons/vibefield";
+/** What each of git's letters means, in words, for a tooltip. */
+const MEANING = {
+    M: "modified",
+    A: "added",
+    D: "deleted",
+    R: "renamed",
+    C: "copied",
+    T: "type changed",
+    "?": "untracked",
+    U: "conflicted",
+};
+export function ChangeTree({ rows, letters, sessionPaths, selectedPath, onSelect, action, onDiscard, }) {
+    return (_jsx("div", { className: "ah-changetree", role: "list", children: rows.map((row) => {
+            const letter = letters.get(row.path) ?? null;
+            const touched = sessionPaths.has(row.path);
+            return (_jsxs("div", { className: "ah-changerow", role: "listitem", "data-kind": row.kind, "data-selected": row.path === selectedPath ? "" : undefined, style: { paddingLeft: `${8 + row.depth * 14}px` }, children: [_jsxs("button", { type: "button", className: "ah-changerow__name", title: row.path, onClick: () => onSelect(row), children: [_jsx("i", { className: "ah-changerow__mark", "data-touched": touched ? "" : undefined, title: touched ? "this session touched this file" : undefined }), _jsx(FileIcon, { className: "ah-changerow__icon", entry: { name: row.label, kind: row.kind === "directory" ? 1 : 0 }, theme: vibefieldIconTheme, expanded: row.kind === "directory" }), _jsx("code", { className: "ah-changerow__letter", "data-letter": letter ?? undefined, title: letter === null ? undefined : MEANING[letter], children: letter ?? "" }), _jsx("span", { children: row.label })] }), _jsxs("span", { className: "ah-changerow__acts", children: [onDiscard !== null && row.kind === "file" && (_jsx("button", { type: "button", title: "Discard changes to this file", onClick: () => onDiscard(row), children: "\u21A9" })), action !== null && (_jsx("button", { type: "button", title: action.label, onClick: () => action.run(row), children: action.label === "Stage" ? "+" : "−" }))] })] }, `${row.kind}:${row.path}`));
+        }) }));
+}

package/dist/components/git/CommitViewer.d.ts

@@ -0,0 +1,12 @@
+import type { Commit, CommitFile, GitClient } from "./types.js";
+export interface CommitViewerProps {
+    readonly commit: Commit;
+    /** `null` while git is still being asked what it touched. */
+    readonly files: readonly CommitFile[] | null;
+    readonly client: GitClient | null;
+    readonly sessionPaths: ReadonlySet<string>;
+    readonly currentTimestamp: number;
+    readonly onClose: () => void;
+    readonly onReceipt: (text: string) => void;
+}
+export declare function CommitViewer({ commit, files, client, sessionPaths, currentTimestamp, onClose, onReceipt, }: CommitViewerProps): import("react").JSX.Element;

package/dist/components/git/CommitViewer.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// One commit, opened over the room.
+//
+// This is the shape a commit actually wants and a 280px column could never
+// give it: the files on the left, the change on the right, both at once. It
+// is the same surface the file viewer uses — same shell, same material, same
+// Escape — because a reader opening a commit and a reader opening a file are
+// doing the same kind of thing, and the room should not have two answers for
+// "something opened over what I was reading".
+//
+// The left pane is the Changes view's own subtree, so a path learned in the
+// column still holds here; the right pane is the file viewer's own diff, so
+// a change looks the same wherever it is read.
+import { useEffect, useMemo, useState } from "react";
+import { DiffBody } from "../file-viewer/index.js";
+import { AgentMark } from "../../lib/agents.js";
+import { clockShort, dayLabel } from "../../lib/format.js";
+import { CopyGlyph, CloseGlyph } from "../../lib/icons.js";
+import { DialogShell } from "../ui/index.js";
+import { ChangeTree } from "./ChangeTree.js";
+import { creditedAgents } from "./co-author.js";
+import { buildPathTree } from "./path-tree.js";
+export function CommitViewer({ commit, files, client, sessionPaths, currentTimestamp, onClose, onReceipt, }) {
+    const rows = useMemo(() => buildPathTree((files ?? []).map((file) => file.path)), [files]);
+    const letters = useMemo(() => {
+        const out = new Map();
+        for (const file of files ?? [])
+            out.set(file.path, file.status);
+        return out;
+    }, [files]);
+    // The first file, chosen for the reader: a commit viewer that opens on an
+    // empty right pane makes them click twice to see what they came for.
+    const [selected, setSelected] = useState(null);
+    const firstPath = files?.[0]?.path ?? null;
+    useEffect(() => {
+        setSelected((current) => (current === null ? firstPath : current));
+    }, [firstPath]);
+    const [diff, setDiff] = useState({ status: "reading" });
+    useEffect(() => {
+        if (selected === null || client === null)
+            return;
+        let cancelled = false;
+        setDiff({ status: "reading" });
+        void client
+            .diff({ path: selected, sha: commit.sha })
+            .then((answer) => {
+            if (cancelled)
+                return;
+            if (answer.error !== null)
+                setDiff({ status: "failed", reason: answer.error });
+            else
+                setDiff({ status: "ready", unified: answer.text });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            setDiff({
+                status: "failed",
+                reason: error instanceof Error ? error.message : "the diff failed",
+            });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [selected, client, commit.sha]);
+    const agents = creditedAgents(commit.coAuthors);
+    const drawn = new Set(agents.map((agent) => agent.label));
+    const people = [commit.author, ...commit.coAuthors.map((author) => author.name)].filter((name) => name !== "" && !drawn.has(name));
+    const selectedName = selected === null ? null : selected.slice(selected.lastIndexOf("/") + 1);
+    return (_jsxs(DialogShell, { title: `${commit.short} — ${commit.subject}`, onClose: onClose, wide: true, children: [_jsxs("header", { className: "ah-fileview__head ah-commitview__head", children: [_jsx("div", { className: "ah-fileview__title", children: _jsx("strong", { className: "ah-commitview__subject", title: commit.subject, children: commit.subject }) }), _jsxs("div", { className: "ah-fileview__acts", children: [_jsx("button", { type: "button", className: "ah-iconbtn", title: "Copy the full sha", "aria-label": "Copy the full sha", onClick: () => {
+                                    void navigator.clipboard
+                                        .writeText(commit.sha)
+                                        .then(() => onReceipt("sha copied"))
+                                        .catch(() => onReceipt("the clipboard refused"));
+                                }, children: _jsx(CopyGlyph, {}) }), _jsx("button", { type: "button", className: "ah-iconbtn", title: "Close (Esc)", "aria-label": "Close", onClick: onClose, children: _jsx(CloseGlyph, {}) })] }), _jsxs("p", { className: "ah-commitview__meta", children: [people.map((name) => (_jsx("span", { children: name }, name))), agents.map((agent) => (_jsx(AgentMark, { kind: agent.kind, note: agent.label }, agent.kind))), _jsx("code", { children: commit.short }), !commit.merge && (_jsxs("span", { className: "tnum", children: ["+", commit.added, " \u2212", commit.deleted] })), _jsxs("time", { className: "tnum", dateTime: new Date(commit.timestampMs).toISOString(), children: [dayLabel(commit.timestampMs, currentTimestamp), " ", clockShort(commit.timestampMs)] })] })] }), _jsxs("div", { className: "ah-commitview", children: [_jsxs("div", { className: "ah-commitview__files", children: [_jsx("div", { className: "ah-group", children: files === null
+                                    ? "Files"
+                                    : `${files.length} changed ${files.length === 1 ? "file" : "files"}` }), _jsx("div", { className: "ah-commitview__list", children: _jsx(ChangeTree, { rows: rows, letters: letters, sessionPaths: sessionPaths, selectedPath: selected, onSelect: (row) => row.kind === "file" && setSelected(row.path), 
+                                    // A commit is history: nothing here stages, unstages or
+                                    // discards, because those act on the working tree.
+                                    action: null, onDiscard: null }) })] }), _jsx("div", { className: "ah-commitview__diff", children: selected === null ? (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: files === null ? "Reading the commit" : "This commit touched no files" }), _jsx("span", { children: files === null
+                                        ? "Asking git what it changed."
+                                        : commit.merge
+                                            ? "It is a merge, and its parents carry the work."
+                                            : "An empty commit." })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ah-commitview__path ah-idname", title: selected, children: _jsx("bdi", { children: selected }) }), diff.status === "ready" ? (_jsx(DiffBody, { unified: diff.unified, name: selectedName ?? selected })) : diff.status === "failed" ? (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "Could not read that change" }), _jsx("span", { children: diff.reason })] })) : (_jsxs("div", { className: "ah-fileview__state", "data-waiting": true, children: [_jsx("b", { children: "Reading" }), _jsx("span", { children: "Asking git for this file's change." })] }))] })) })] })] }));
+}

package/dist/components/git/GitChanges.d.ts

@@ -0,0 +1,17 @@
+import type { StatusEntry } from "./types.js";
+/** `2 added · 5 modified · 1 deleted` — what git would say about this set in
+ * one line, counted off the entries the column is drawing. */
+export declare function changeShapeOf(entries: readonly StatusEntry[]): string;
+export interface GitChangesProps {
+    readonly entries: readonly StatusEntry[];
+    readonly sessionPaths: ReadonlySet<string>;
+    readonly selection: {
+        readonly path: string;
+        readonly staged: boolean;
+    } | null;
+    readonly onSelect: (path: string, staged: boolean) => void;
+    readonly onStage: ((paths: readonly string[]) => void) | null;
+    readonly onUnstage: ((paths: readonly string[]) => void) | null;
+    readonly onDiscard: ((paths: readonly string[]) => void) | null;
+}
+export declare function GitChanges({ entries, sessionPaths, selection, onSelect, onStage, onUnstage, onDiscard, }: GitChangesProps): import("react").JSX.Element;

package/dist/components/git/GitChanges.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The Changes view: what the index holds, and what the working tree holds.
+//
+// Two groups, not a mark on every row — "it is the shape `git status` itself
+// has… and position is the quietest way to say a binary" (design record §8).
+// A file with staged changes AND further edits appears in both, because it is
+// in both, and the two rows open two different diffs.
+import { useMemo } from "react";
+import { EmptyState } from "../ui/index.js";
+import { ChangeTree } from "./ChangeTree.js";
+import { buildPathTree, filesUnder } from "./path-tree.js";
+/** `2 added · 5 modified · 1 deleted` — what git would say about this set in
+ * one line, counted off the entries the column is drawing. */
+export function changeShapeOf(entries) {
+    const tally = { added: 0, modified: 0, deleted: 0, untracked: 0, conflicted: 0 };
+    for (const entry of entries) {
+        // One file, one word: the index's letter is what a commit would record,
+        // so it speaks first.
+        const letter = entry.index ?? entry.worktree;
+        if (letter === "A")
+            tally.added += 1;
+        else if (letter === "D")
+            tally.deleted += 1;
+        else if (letter === "?")
+            tally.untracked += 1;
+        else if (letter === "U")
+            tally.conflicted += 1;
+        else if (letter !== null)
+            tally.modified += 1;
+    }
+    return [
+        [tally.conflicted, "conflicted"],
+        [tally.added, "added"],
+        [tally.modified, "modified"],
+        [tally.deleted, "deleted"],
+        [tally.untracked, "untracked"],
+    ]
+        .filter(([count]) => count > 0)
+        .map(([count, word]) => `${count} ${word}`)
+        .join(" · ");
+}
+function group(entries, slot) {
+    const letters = new Map();
+    for (const entry of entries) {
+        const letter = entry[slot];
+        if (letter !== null)
+            letters.set(entry.path, letter);
+    }
+    return {
+        rows: buildPathTree([...letters.keys()]),
+        letters,
+        count: letters.size,
+    };
+}
+export function GitChanges({ entries, sessionPaths, selection, onSelect, onStage, onUnstage, onDiscard, }) {
+    const staged = useMemo(() => group(entries, "index"), [entries]);
+    const unstaged = useMemo(() => group(entries, "worktree"), [entries]);
+    if (staged.count === 0 && unstaged.count === 0) {
+        return (_jsx(EmptyState, { title: "Nothing to commit", description: "The working tree matches HEAD. Every change this branch has is in its history." }));
+    }
+    return (_jsxs("div", { className: "ah-scroll", children: [staged.count > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ah-group", children: ["Staged", _jsx("span", { className: "ah-hitcount tnum", children: staged.count })] }), _jsx(ChangeTree, { rows: staged.rows, letters: staged.letters, sessionPaths: sessionPaths, selectedPath: selection?.staged === true ? selection.path : null, onSelect: (row) => row.kind === "file" && onSelect(row.path, true), action: onUnstage === null
+                            ? null
+                            : { label: "Unstage", run: (row) => onUnstage(filesUnder(staged.rows, row)) }, onDiscard: null })] })), unstaged.count > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ah-group", children: ["Unstaged", _jsx("span", { className: "ah-hitcount tnum", children: unstaged.count })] }), _jsx(ChangeTree, { rows: unstaged.rows, letters: unstaged.letters, sessionPaths: sessionPaths, selectedPath: selection?.staged === false ? selection.path : null, onSelect: (row) => row.kind === "file" && onSelect(row.path, false), action: onStage === null
+                            ? null
+                            : { label: "Stage", run: (row) => onStage(filesUnder(unstaged.rows, row)) }, 
+                        // Discard is the one act here that destroys work, so it is offered
+                        // only on the unstaged side — the side where "throw this away" is
+                        // the whole of what it means.
+                        onDiscard: onDiscard === null ? null : (row) => onDiscard(filesUnder(unstaged.rows, row)) })] }))] }));
+}

package/dist/components/git/GitHistory.d.ts

@@ -0,0 +1,9 @@
+import type { Commit } from "./types.js";
+export interface GitHistoryProps {
+    readonly commits: readonly Commit[];
+    /** The commit the column has opened, so the row it came from stays lit. */
+    readonly selectedSha: Commit | null;
+    readonly onSelect: (commit: Commit) => void;
+    readonly currentTimestamp: number;
+}
+export declare function GitHistory({ commits, selectedSha, onSelect, currentTimestamp, }: GitHistoryProps): import("react").JSX.Element;

package/dist/components/git/GitHistory.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The History view: what this branch has committed.
+//
+// The commit row is the session row one object down — message on top, the
+// byline and diffstat in the middle, sha bottom-left and age bottom-right —
+// with two rules from the design record §8:
+//
+//   · the diffstat is NEUTRAL, never git's green and red. Hue in this room
+//     says which project or which state; a direction of change is neither;
+//   · only one git state is drawn — not pushed yet — because it is the one
+//     the reader can still act on.
+//
+// The record's third rule was that the row carries no agent mark, because
+// "which one ran this session is already on the session row". That held for
+// the column it described, which was scoped to ONE session. This one is a
+// view of the PROJECT's repository and lists commits from sessions that are
+// not in this room at all — most of them from no session it has ever seen.
+// The session row cannot speak for them, so the redundancy the rule guarded
+// against does not exist here, and the mark is the fastest way to read a
+// history for who built it. It follows §2.6's rule for provider identity:
+// monochrome, at `currentColor`, carrying no hue of its own.
+//
+// The record also says the row is not pressable, "this proposal has no diff
+// view, and a hover fill would be promising one". There is a diff view now,
+// so the row is pressable and the promise is kept.
+import { EmptyState } from "../ui/index.js";
+import { AgentMark } from "../../lib/agents.js";
+import { lastActive } from "../../lib/format.js";
+import { creditedAgents } from "./co-author.js";
+/**
+ * Everyone git says wrote this commit, minus the agents the row is already
+ * drawing as marks.
+ *
+ * A recognised agent is a glyph at the end of the message line; naming it
+ * here as well would spend a 280px row saying the same thing twice. An
+ * UNRECOGNISED co-author is a person, and keeps their name.
+ */
+function byline(commit) {
+    const drawn = new Set(creditedAgents(commit.coAuthors).map((agent) => agent.label));
+    return [commit.author, ...commit.coAuthors.map((author) => author.name)]
+        .filter((name) => name !== "" && !drawn.has(name))
+        .join(", ");
+}
+/** The unpushed mark: an arrow out, in the row's marker column. */
+function PushMark() {
+    return (_jsx("i", { className: "ah-push", title: "not pushed yet", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 13V3.6" }), _jsx("path", { d: "M3.8 7.8 8 3.4l4.2 4.4" })] }) }));
+}
+export function GitHistory({ commits, selectedSha, onSelect, currentTimestamp, }) {
+    if (commits.length === 0) {
+        return (_jsx(EmptyState, { title: "No commits yet", description: "This branch has no history of its own to show." }));
+    }
+    return (_jsx("div", { className: "ah-scroll", children: commits.map((commit) => {
+            const agents = creditedAgents(commit.coAuthors);
+            return (_jsxs("button", { type: "button", className: "ah-commit", "data-selected": commit.sha === selectedSha?.sha ? "" : undefined, onClick: () => onSelect(commit), children: [commit.pushed === false && _jsx(PushMark, {}), _jsxs("span", { className: "ah-commit__l1", children: [_jsx("strong", { title: commit.subject, children: commit.subject }), agents.length > 0 && (_jsx("span", { className: "ah-agents ah-commit__agents", children: agents.map((agent) => (_jsx(AgentMark, { kind: agent.kind, note: agent.label }, agent.kind))) }))] }), _jsxs("span", { className: "ah-commit__meta", children: [_jsx("span", { className: "ah-commit__who", title: byline(commit), children: byline(commit) }), _jsx("span", { children: "\u00B7" }), commit.merge ? (
+                            // A merge's diffstat is not a fact about one person's work.
+                            _jsx("span", { children: "merge" })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "tnum", children: ["+", commit.added, " \u2212", commit.deleted] }), _jsx("span", { children: "\u00B7" }), _jsxs("span", { className: "tnum", children: [commit.files, " ", commit.files === 1 ? "file" : "files"] })] }))] }), _jsxs("span", { className: "ah-commit__l3", children: [_jsx("code", { children: commit.short }), _jsx("span", { className: "ah-last", children: lastActive(commit.timestampMs, currentTimestamp) })] })] }, commit.sha));
+        }) }));
+}

package/dist/components/git/co-author.d.ts

@@ -0,0 +1,14 @@
+import type { CoAuthor } from "./types.js";
+/** The runtime kind this co-author is, or `null` when nothing recognises it —
+ * which is how a human co-author stays a human. */
+export declare function agentKindOf(author: CoAuthor): string | null;
+export interface CreditedAgent {
+    readonly kind: string;
+    /** The trailer's own name — `Claude Opus 5 (1M context)` is more than the
+     * kind knows, and it is what the reader recognises. */
+    readonly label: string;
+}
+/** The agents credited on a commit, deduplicated by kind and in trailer
+ * order. Two trailers for one agent is one mark, because the row is saying
+ * WHICH agent, not how many times it signed. */
+export declare function creditedAgents(coAuthors: readonly CoAuthor[]): readonly CreditedAgent[];