+ {trace.name} +
++ {metaLine(trace)} +
+
+
+
+ {messages.map((message) => (
+
+
+ ))}
+
+
+
+ On the card
Spills onto black
Also on black
${markup}
On the chip
Spills onto black
Also on black
Generating 2 images
`, + ), + ], + [ + "a pointer-events:none wash over an image", + page( + `Caption
`,
+ ),
+ ],
+] as const;
+
+for (const [name, html] of NOT_VOUCHED)
+ test(`the contrast fallback does not pass ${name}`, async ({ page: tab }) => {
+ const { incomplete, verdict } = await verdictFor(tab, html);
+ expect(incomplete).toBe(true);
+ expect(verdict).not.toMatchObject({ kind: "measured", pass: true });
+ });
+
+// The inset shadow paints #000 over the white the text would be judged on.
+// Axe settles this page itself, so only the fallback's verdict is pinned.
+test("the contrast fallback does not pass text on an opaque ground under an inset shadow", async ({
+ page: tab,
+}) => {
+ const { verdict } = await verdictFor(
+ tab,
+ page(
+ `Pending approval
`, + ), + ); + expect(verdict).not.toMatchObject({ kind: "measured", pass: true }); +}); + +// Controls: the same shapes with legible text still measure, so the +// fixtures above fail for the reason they name. +const VOUCHED = [ + [ + "text that stays on its card", + page( + `On the card
Still on the card
Also on the card
Generating 2 images
`, + ), + ], + [ + "text under an empty stretched button", + page( + `quarter-plan.pdf
`,
+ ),
+ ],
+] as const;
+
+for (const [name, html] of VOUCHED)
+ test(`the contrast fallback measures ${name}`, async ({ page: tab }) => {
+ const { verdict } = await verdictFor(tab, html);
+ expect(verdict).toMatchObject({ kind: "measured", pass: true });
+ });
+
+// The verdict does not depend on where the text starts: every geometry read
+// happens where the sampler scrolled it to.
+const SAME_ANYWHERE = [
+ ["text overflowing its card", SPILL],
+ [
+ "text on its own faint wash",
+ `Caption on a wash
`,
+ ],
+ [
+ "text that stays on its card",
+ `On the card
Still on the card
Also on the card
+ {SWATCH_TOKENS.map((token) => (
+
+ ))}
+
+ );
+}
+
+type ScenarioRow = {
+ readonly id: string;
+ readonly from: "reader" | "agent";
+ /** Height in 24px lines, so positions are exact on every platform. */
+ readonly lines: number;
+};
+
+function historyRows(prefix: string, count: number): ScenarioRow[] {
+ return Array.from({ length: count }, (_, index) => ({
+ id: `${prefix}${index}`,
+ from: index % 2 === 0 ? "reader" : "agent",
+ lines: 1 + (index % 3),
+ }));
+}
+
+function ConversationControls({
+ onSend,
+ onWrite,
+ onEarlier,
+ onTrim,
+ onUnsend,
+ onRemount,
+}: {
+ onSend: () => void;
+ onWrite: () => void;
+ onEarlier: () => void;
+ onTrim: () => void;
+ onUnsend: () => void;
+ onRemount: () => void;
+}) {
+ const { captureAnchor, restoreAnchor } = useConversation();
+ const [loads, setLoads] = useState(0);
+ useLayoutEffect(() => {
+ if (loads > 0) restoreAnchor();
+ }, [loads, restoreAnchor]);
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+/** History arrives after mount, as it does from a server. */
+function ConversationScenario({
+ policy,
+}: {
+ policy: ConversationScrollPolicy;
+}) {
+ const [rows, setRows] = useState
+
+
+ {rows.map((row) => (
+
+
+ ))}
+
+ {
+ const id = `s${sends}`;
+ setSends(sends + 1);
+ setRows((previous) => [
+ ...previous,
+ { id, from: "reader", lines: 1 },
+ { id: `a${sends}`, from: "agent", lines: 1 },
+ ]);
+ setSentId(id);
+ }}
+ onWrite={() =>
+ setRows((previous) =>
+ previous.map((row, index) =>
+ index === previous.length - 1
+ ? { ...row, lines: row.lines + 3 }
+ : row,
+ ),
+ )
+ }
+ onEarlier={() => {
+ setPages(pages + 1);
+ setRows((previous) => [
+ ...historyRows(`p${pages}-`, 10),
+ ...previous,
+ ]);
+ }}
+ onTrim={() => setRows((previous) => previous.slice(5))}
+ onUnsend={() =>
+ setRows((previous) => previous.filter((row) => row.id !== sentId))
+ }
+ onRemount={() => setMounts(mounts + 1)}
+ />
+
+
+ );
+}
+
+/** One frame of a recorded glide: where the tracked item's top sits below
+ * the top of the view, after the glide has written that frame. */
+type GlideFrame = { readonly t: number; readonly offset: number };
+
+type GlideLog = {
+ readonly frames: GlideFrame[];
+ /** When the content above changed, on the frames' clock. */
+ changedAt: number | null;
+ done: boolean;
+};
+
+/** Records `item`'s offset every frame until the view has been still for ten
+ * frames. Started after the glide, so each frame runs after the glide's. */
+function recordGlide(scroller: HTMLElement, item: HTMLElement): GlideLog {
+ const log: GlideLog = { frames: [], changedAt: null, done: false };
+ let still = 0;
+ let last = Number.NaN;
+ const tick = (t: number) => {
+ log.frames.push({
+ t,
+ offset:
+ item.getBoundingClientRect().top - scroller.getBoundingClientRect().top,
+ });
+ still = scroller.scrollTop === last ? still + 1 : 0;
+ last = scroller.scrollTop;
+ if (still < 10 && log.frames.length < 300) requestAnimationFrame(tick);
+ else log.done = true;
+ };
+ requestAnimationFrame(tick);
+ Object.assign(window, { glideLog: log });
+ return log;
+}
+
+function GlideControls({
+ onLoad,
+ onTrim,
+}: {
+ onLoad: () => void;
+ onTrim: () => void;
+}) {
+ const {
+ items,
+ scrollContainer,
+ scrollToItem,
+ scrollToEnd,
+ captureAnchor,
+ restoreAnchor,
+ } = useConversation();
+ const [loads, setLoads] = useState(0);
+ useLayoutEffect(() => {
+ if (loads > 0) restoreAnchor();
+ }, [loads, restoreAnchor]);
+ /** Glides, then changes the content above while the glide is in flight. */
+ const glideThen = (glide: () => void, id: string, change: () => void) => {
+ const scroller = scrollContainer();
+ const item = items.get(id);
+ if (scroller === null || item === undefined) return;
+ glide();
+ const log = recordGlide(scroller, item);
+ setTimeout(() => {
+ log.changedAt = performance.now();
+ change();
+ }, 120);
+ };
+ const topmostInView = () => {
+ const top = scrollContainer()?.getBoundingClientRect().top ?? 0;
+ return (
+ items
+ .ids()
+ .find(
+ (id) =>
+ (items.get(id)?.getBoundingClientRect().bottom ?? 0) > top + 1,
+ ) ?? ""
+ );
+ };
+ return (
+ + {row.from === "reader" ? "Reader" : "Agent"} {row.id} +
+
+
+
+
+ );
+}
+
+/** Content changing above the view while a glide is in flight. */
+function ConversationGlideScenario() {
+ const [rows, setRows] = useState(() => historyRows("h", 30));
+ return (
+
+
+
+ {rows.map((row) => (
+
+
+ ))}
+
+
+ setRows((previous) => [...historyRows("p", 10), ...previous])
+ }
+ onTrim={() => setRows((previous) => previous.slice(12))}
+ />
+
+
+ );
+}
+
+/** A conversation with nothing in it yet. */
+function ConversationEmptyScenario() {
+ return (
+ + {row.from === "reader" ? "Reader" : "Agent"} {row.id} +
+
+
+
+
+
+
+ );
+}
+
+const PROMPT_TOKENS: PromptToken[] = [
+ { id: "ada", kind: "mention", token: "@Ada", detail: "Research agent" },
+ { id: "adam", kind: "mention", token: "@Adam", detail: "Review agent" },
+ { id: "brief", kind: "command", token: "/brief", detail: "Summarize" },
+];
+
+/** Records every submit with its text, and every stop. "Reply" puts the
+ * prompt into the streaming state a host is in while an agent answers. */
+function Prompt() {
+ const [value, setValue] = useState("");
+ const [status, setStatus] = useState
+ record(`submit:${value}`)}
+ tokens={PROMPT_TOKENS}
+ status={status}
+ >
+ {
+ record("stop");
+ setStatus("ready");
+ }}
+ />
+
+
+ {log}
+
+ );
+}
+
+/** The prompt inside an open Radix dialog, which records when it closes. */
+function PromptInDialog() {
+ const [value, setValue] = useState("");
+ const [open, setOpen] = useState(true);
+ const { log, record } = useEventLog();
+ return (
+ <>
+
+ {log}
+
+ );
+}
+
+/** The usual chat host: a submit clears the draft and starts a reply, which
+ * "Finish reply" ends. That button keeps focus where it is, as a reply
+ * arriving would. Without `stoppable` there is no `onStop`, so Send stays
+ * Send while the reply runs. */
+function PromptChat({ stoppable }: { readonly stoppable: boolean }) {
+ const [value, setValue] = useState("");
+ const [status, setStatus] = useState
+ {
+ record(`submit:${value}`);
+ setValue("");
+ setStatus("submitted");
+ }}
+ status={status}
+ >
+ {
+ record("stop");
+ setStatus("ready");
+ },
+ }
+ : {})}
+ />
+
+
+ {log}
+
+ );
+}
+
+/** A host that sends attachments with the text: "Attach file" toggles one,
+ * and with it attached there is something to send even with no text. */
+function PromptWithAttachment() {
+ const [value, setValue] = useState("");
+ const [attached, setAttached] = useState(false);
+ const { log, record } = useEventLog();
+ return (
+
+
+ record(`submit:${value}${attached ? "+attachment" : ""}`)
+ }
+ canSubmit={value.trim() !== "" || attached}
+ >
+
+
+ {log}
+
+ );
+}
+
+/** Counts React commits on `` without rendering anything. */
+function countCommit() {
+ const body = document.body;
+ body.dataset["commits"] = String(Number(body.dataset["commits"] ?? 0) + 1);
+}
+
+/** A tall filler, so each pane scrolls. */
+function Filler({ label }: { label: string }) {
+ return (
+ -
+ {Array.from({ length: 60 }, (_, index) => (
+
- + {label} line {index + 1} + + ))} +
+
+
+
+
+
+
+ {open ? (
+
+
+
+ setOpen(false)} />
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+ record(`submit:${value}`)}
+ tokens={PROMPT_TOKENS}
+ >
+ {replying ? (
+
+ setReplying(false)}
+ />
+
+ ) : null}
+
+ record("add:files"),
+ },
+ {
+ id: "link",
+ label: "Add a link",
+ disabled: true,
+ onSelect: () => record("add:link"),
+ },
+ {
+ id: "mention",
+ label: "Mention an agent",
+ onSelect: () => record("add:mention"),
+ },
+ ]}
+ />
+ {
+ record(`mode:${id}`);
+ setMode(id);
+ }}
+ />
+ {
+ record(`model:${id}`);
+ setModel(id);
+ }}
+ open={modelOpen}
+ onOpenChange={setModelOpen}
+ />
+ record("voice")}
+ >
+ V
+
+
+ ) : (
+
+ Agents can make mistakes.
+
+
+
+ {log}
+
+ );
+}
+
+/** The toolbar inside an open Radix dialog, which records when it closes.
+ * "Open models" opens the model list the way a host would. */
+function PromptToolbarInDialog() {
+ const [value, setValue] = useState("");
+ const [modelOpen, setModelOpen] = useState(false);
+ const [open, setOpen] = useState(true);
+ const { log, record } = useEventLog();
+ return (
+ <>
+
+ {log}
+
+ );
+}
+
+type TabScenarioItem = { readonly value: string; readonly title: string };
+
+const TAB_ITEMS: readonly TabScenarioItem[] = [
+ { value: "alpha", title: "Alpha" },
+ { value: "beta", title: "Beta" },
+ { value: "gamma", title: "Gamma" },
+ { value: "delta", title: "Delta" },
+];
+
+function PanelTabsScenario() {
+ const { tabs, value, open, close, tabsProps, paneProps } =
+ useTabs
+
+
+
+
+
+ {value === null ? null : (
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.title}
+
+ ))}
+
+ openMore(1)} />
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.title} pane
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+/** A call's execution status once a decision is recorded on it. */
+function decidedStatus(approval: ToolApprovalRecord): PartTool["status"] {
+ if (approval.status === "pending") return "approval-requested";
+ return approval.status === "approved" ? "output-available" : "output-denied";
+}
+
+function pendingApproval(id: string): ToolApprovalRecord {
+ return { id, status: "pending", scope: null, timeoutAt: null };
+}
+
+/** A call that stopped waiting with no decision, as the server reports it. */
+type Lapse = {
+ readonly toolCallId: string;
+ readonly status: "timeout" | "expired";
+};
+
+/**
+ * Calls `onLapse` for each `approval-lapse` event on the window: the specs'
+ * stand-in for the server resolving an approval nobody decided, without
+ * moving focus the way a control on the page would.
+ */
+function useApprovalLapse(onLapse: (lapse: Lapse) => void) {
+ useEffect(() => {
+ const listener = (event: Event) =>
+ onLapse((event as CustomEvent+ {text} +
+ ))} +
+
+ );
+}
+
+/** The same answer inside a conversation, which anchors its own scrolling. */
+function MessageFoldConversationScenario({
+ policy,
+}: {
+ policy: ConversationScrollPolicy;
+}) {
+ return (
+ Before
+After
+
+
+
+ {historyRows("h", 10).map((row) => (
+
+
+ ))}
+
+
+ {historyRows("t", 10).map((row) => (
+
+
+ ))}
+
+
+
+ );
+}
+
+function ActionRow({ record }: { record: (event: string) => void }) {
+ return (
+ Row {row.id}
+Row {row.id}
+
+
+
+
+
+
+
+ );
+}
+
+type HistoryRow = { readonly id: string; readonly lines: number };
+
+/** Rows of fractional heights, so rounding shows up in the positions. */
+function historyWindowRows(from: number, to: number): HistoryRow[] {
+ return Array.from({ length: to - from }, (_, index) => ({
+ id: `r${from + index}`,
+ lines: 1 + ((from + index) % 3),
+ }));
+}
+
+const HISTORY_PAGE = 10;
+
+/** Renders the window; must sit inside the Conversation it follows. */
+function HistoryRows({
+ rows,
+ hasEarlier,
+ onLoadEarlier,
+ distance,
+}: {
+ rows: readonly HistoryRow[];
+ hasEarlier: boolean;
+ onLoadEarlier: () => Promise
+
+
+
+
+
+
+ {log}
+ Row {row.id}
+
+
+
+
+
+ );
+}
+
+/**
+ * `local` rows are loaded; `remote` older ones come from a pretend server a
+ * page at a time, when "Deliver" is pressed. "Deliver nothing" ends a load
+ * with no rows.
+ */
+function HistoryWindowScenario({
+ local,
+ remote,
+ distance,
+}: {
+ local: number;
+ remote: number;
+ distance?: number;
+}) {
+ const [from, setFrom] = useState(remote);
+ const [to, setTo] = useState(remote + local);
+ const [requests, setRequests] = useState(0);
+ const [pending, setPending] = useState<(() => void) | null>(null);
+ const settle = (rows: number) => {
+ if (pending === null) return;
+ setFrom((current) => Math.max(0, current - rows));
+ setPending(null);
+ pending();
+ };
+ return (
+
+
+ 0}
+ onLoadEarlier={() => {
+ setRequests((count) => count + 1);
+ return new Promise((resolve) => setPending(() => resolve));
+ }}
+ distance={distance}
+ />
+
+
+ );
+}
+
+const mapTurns = (length: number): ConversationMapTurn[] =>
+ Array.from({ length }, (_, index) => ({
+ id: `t${index}`,
+ label: `Question ${index}`,
+ preview: `Answer ${index}`,
+ }));
+
+const MAP_TURNS = mapTurns(20);
+
+/** Turns of fixed height: a 24px question, then a 72px answer. Twenty by
+ * default. */
+function ConversationMapScenario({
+ turns = MAP_TURNS,
+}: {
+ turns?: ConversationMapTurn[];
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+ {turns.flatMap((turn) => [
+
+ ,
+
+ ,
+ ])}
+
+
+
+ );
+}
+
+/** How many of each reason, e.g. "too-many 20". */
+function refusals(rejected: readonly AttachmentRejection{turn.label}
+{turn.preview}
+
+ {
+ take(files);
+ setFolders(details.folders.join(","));
+ }}
+ style={{ padding: "96px 16px 16px", width: 640 }}
+ >
+ {attachments.length === 0 ? null : (
+
+ {shown.map((item) => (
+
+
+ setAttachments((previous) =>
+ previous.filter((held) => held.id !== item.id),
+ )
+ }
+ />
+
+ ))}
+ {folded ? (
+
+ )}
+ {expanded ? (
+
+ ) : null}
+
+
+
+
+
+
+ );
+}
+
+/** A flat swatch as an inline SVG, so nothing is fetched. */
+function swatch(index: number): ConversationImage {
+ const shade = 40 + index * 20;
+ const svg = ``;
+ return {
+ id: `swatch-${index}`,
+ mediaType: "image/svg+xml",
+ width: 300,
+ height: 200,
+ alt: `Swatch ${index}`,
+ url: `data:image/svg+xml,${encodeURIComponent(svg)}`,
+ };
+}
+
+const SWATCHES: PartImage = {
+ kind: "image",
+ id: "swatches",
+ prompt: "Three swatches",
+ state: "done",
+ images: [swatch(1), swatch(2), swatch(3)],
+};
+
+/** Starts generating, so landing the images is watched and reveals them. */
+function MediaViewerScenario() {
+ const [landed, setLanded] = useState(false);
+ const part: PartImage = landed
+ ? SWATCHES
+ : {
+ ...SWATCHES,
+ state: "generating",
+ images: [],
+ expected: { count: 3, width: 300, height: 200 },
+ };
+ const viewer = useMediaViewer({ items: generatedImageViewerItems(part) });
+ return (
+
+ Outside the drop zone
+
+
+
+
+ );
+}
+
+const REMOTE: PartImage = {
+ kind: "image",
+ id: "remote",
+ prompt: "Remote swatches",
+ state: "done",
+ images: [1, 2].map((index) => ({
+ id: `remote-${index}`,
+ mediaType: "image/svg+xml",
+ width: 300,
+ height: 200,
+ alt: `Remote ${index}`,
+ url: `https://images.example.test/remote-${index}.svg`,
+ })),
+};
+
+/** Images from another origin inside a scrolling log, on a page that scrolls. */
+function MediaViewerChatScenario() {
+ const viewer = useMediaViewer({ items: generatedImageViewerItems(REMOTE) });
+ return (
+
+
+ );
+}
+
+const THREAD_AGENT: ConversationParticipant = {
+ id: "agent",
+ kind: "agent",
+ name: "Agent",
+};
+
+const THREAD_READER: ConversationParticipant = {
+ id: "reader",
+ kind: "person",
+ name: "Reader",
+};
+
+function threadMessage(
+ id: string,
+ author: ConversationParticipant,
+ text: string,
+): ConversationMessage {
+ return {
+ id,
+ author,
+ at: "2026-03-04T11:00:00.000Z",
+ status: "sent",
+ parts: [{ kind: "text", text }],
+ };
+}
+
+const THREAD_PARENT: ConversationMessage = {
+ ...threadMessage("parent", THREAD_AGENT, "The weekly report is ready."),
+ replies: { count: 12, lastAt: "2026-03-04T11:30:00.000Z" },
+};
+
+const THREAD_REPLIES = Array.from({ length: 12 }, (_, index) =>
+ threadMessage(
+ `reply-${index + 1}`,
+ index % 2 === 0 ? THREAD_READER : THREAD_AGENT,
+ `Reply ${index + 1}: a note on the report, long enough to wrap onto a second line in the panel.`,
+ ),
+);
+
+function ThreadMessage({ message }: { message: ConversationMessage }) {
+ const own = message.author.id === THREAD_READER.id;
+ return (
+
+
+
+
+
+ open({ value: "thread", title: "Thread" })}
+ />
+ )}
+
+ {value === null ? null : (
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.title}
+
+ ))}
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.value === "thread" ?
+ ))}
+
+
+ )}
+
+ );
+}
+
+export const scenarios: RecordUnknown scenario: {name}
}` inside ``: this is the whole page, not a panel on one. A page
- * whose only content is a notice still needs a document outline, and this is it.
- *
- * No illustration slot. The correct thing here is one sentence saying what to
- * do; artwork on a dead end is decoration on someone's bad moment.
- */
-export function AccessNotice({ title, description, actions, brand, className }: AccessNoticeProps) {
- return (
-
- {brand === undefined ? null : (
- {brand}
- )}
-
-
- {title}
- {description}
- {actions === undefined ? null : {actions}}
-
-
-
- );
-}
diff --git a/src/blocks/login/auth-layout.tsx b/src/blocks/login/auth-layout.tsx
index ebc2b2b1..092679a0 100644
--- a/src/blocks/login/auth-layout.tsx
+++ b/src/blocks/login/auth-layout.tsx
@@ -1,16 +1,22 @@
import type { ReactNode } from "react";
import { cn } from "../../lib/utils.js";
-import { DitherCanvas } from "../../ui/dither-canvas.js";
export type AuthLayoutProps = {
/** Your wordmark and product name, top-left. */
readonly brand?: ReactNode;
/** The form column's contents — a sign-in form, a reset form, a code prompt. */
readonly children: ReactNode;
+ /**
+ * The decorative panel's own content — `DitherCanvas`, `DitherBackground`,
+ * a static image, or anything else. Omit it and the panel is bare, which is
+ * a perfectly good outcome.
+ */
+ readonly panel?: ReactNode;
/**
* Laid over the decorative panel — usually a `QuoteCard`. Omit it and the
- * panel is just texture, which is a perfectly good outcome.
+ * panel shows nothing but its own content, which is a perfectly good
+ * outcome.
*/
readonly aside?: ReactNode;
readonly className?: string;
@@ -33,22 +39,37 @@ export type AuthLayoutProps = {
* *without* the retracting toolbar, so a `100vh` sign-in page is reliably a
* little too tall and the button sits just under the fold.
*/
-export function AuthLayout({ brand, children, aside, className }: AuthLayoutProps) {
+export function AuthLayout({
+ brand,
+ children,
+ panel,
+ aside,
+ className,
+}: AuthLayoutProps) {
return (
-
+
{brand === undefined ? null : (
- {brand}
+
+ {brand}
+
)}
{children}
-
- {}} />);
+ expect(mounted.container.querySelector('input[name="name"]')).toBeNull();
+ const password = mounted.container.querySelector('input[name="password"]');
+ expect(password?.getAttribute("autoComplete")).toBe("current-password");
+ mounted.unmount();
+ });
+
+ test("busy reads Signing in…", () => {
+ const mounted = render( {}} busy />);
+ expect(
+ mounted.container.querySelector("button[type=submit]")?.textContent,
+ ).toBe("Signing in…");
+ mounted.unmount();
+ });
+
+ test("mode='sign-in' is equivalent to the default", () => {
+ const mounted = render( {}} />);
+ expect(mounted.container.querySelector('input[name="name"]')).toBeNull();
+ mounted.unmount();
+ });
+});
+
+describe("LoginForm sign-up mode", () => {
+ test("renders a name field", () => {
+ const mounted = render( {}} />);
+ expect(
+ mounted.container.querySelector('input[name="name"]'),
+ ).not.toBeNull();
+ mounted.unmount();
+ });
+
+ test("password uses new-password autocomplete", () => {
+ const mounted = render( {}} />);
+ const password = mounted.container.querySelector('input[name="password"]');
+ expect(password?.getAttribute("autoComplete")).toBe("new-password");
+ mounted.unmount();
+ });
+
+ test("busy reads Signing up…", () => {
+ const mounted = render(
+ {}} busy />,
+ );
+ expect(
+ mounted.container.querySelector("button[type=submit]")?.textContent,
+ ).toBe("Signing up…");
+ mounted.unmount();
+ });
+
+ test("submits the name alongside email and password", () => {
+ const submitted: {
+ credentials: { name?: string; email: string; password: string } | null;
+ } = {
+ credentials: null,
+ };
+ const mounted = render(
+ (submitted.credentials = credentials)}
+ />,
+ );
+ const form = mounted.container.querySelector("form");
+ const name = mounted.container.querySelector(
+ 'input[name="name"]',
+ ) as HTMLInputElement;
+ const email = mounted.container.querySelector(
+ 'input[name="email"]',
+ ) as HTMLInputElement;
+ const password = mounted.container.querySelector(
+ 'input[name="password"]',
+ ) as HTMLInputElement;
+
+ // React controls these inputs; set the native value then dispatch input
+ // through the DOM so React's change handler observes it.
+ const setValue = (input: HTMLInputElement, value: string) => {
+ const setter = Object.getOwnPropertyDescriptor(
+ window.HTMLInputElement.prototype,
+ "value",
+ )?.set;
+ setter?.call(input, value);
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+ };
+ act(() => {
+ setValue(name, "Ada Lovelace");
+ setValue(email, "ada@example.com");
+ setValue(password, "correct horse battery staple");
+ });
+ act(() => {
+ form?.dispatchEvent(
+ new Event("submit", { bubbles: true, cancelable: true }),
+ );
+ });
+
+ expect(submitted.credentials).toEqual({
+ name: "Ada Lovelace",
+ email: "ada@example.com",
+ password: "correct horse battery staple",
+ });
+ mounted.unmount();
+ });
+});
diff --git a/src/blocks/login/login-form.tsx b/src/blocks/login/login-form.tsx
index f174aa72..4b11d42d 100644
--- a/src/blocks/login/login-form.tsx
+++ b/src/blocks/login/login-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { useState } from "react";
import type { ReactNode } from "react";
@@ -20,14 +22,22 @@ export type AuthProvider = {
readonly icon?: ReactNode;
};
+export type LoginFormMode = "sign-in" | "sign-up";
+
export type LoginFormProps = {
+ /** "sign-in" (default) shows email/password. "sign-up" adds a name field. */
+ readonly mode?: LoginFormMode;
readonly heading?: string;
/** Social / SSO options. Empty renders none, and no divider either. */
readonly providers?: readonly AuthProvider[];
readonly onProvider?: (id: string) => void;
/** Omit to render an SSO-only page with no email fields at all. */
- readonly onSubmit?: (credentials: { readonly email: string; readonly password: string }) => void;
- /** True while a sign-in is in flight. Disables every control. */
+ readonly onSubmit?: (credentials: {
+ readonly name?: string;
+ readonly email: string;
+ readonly password: string;
+ }) => void;
+ /** True while a sign-in or sign-up is in flight. Disables every control. */
readonly busy?: boolean;
/** A failure to show. Announced, not just drawn. */
readonly error?: string | null;
@@ -49,15 +59,17 @@ export type LoginFormProps = {
* to happen, and they submit again. It is `aria-live="assertive"` precisely
* because interrupting is correct here.
*
- * `autoComplete="email"` and `"current-password"` are not decoration: they are
- * what lets a password manager fill this form, and a sign-in form password
- * managers cannot fill pushes people toward worse passwords.
+ * `autoComplete="email"` and `"current-password"` (`"new-password"` in
+ * sign-up mode) are not decoration: they are what lets a password manager
+ * fill this form, and a form password managers cannot fill pushes people
+ * toward worse passwords.
*
- * The submit button reads "Signing in…" while busy rather than swapping to a
- * spinner. The label is the status, so it is announced by the same mechanism
- * that announces the button.
+ * The submit button reads "Signing in…" / "Signing up…" while busy rather
+ * than swapping to a spinner. The label is the status, so it is announced by
+ * the same mechanism that announces the button.
*/
export function LoginForm({
+ mode = "sign-in",
heading = "Welcome back",
providers = [],
onProvider,
@@ -67,12 +79,16 @@ export function LoginForm({
footer,
className,
}: LoginFormProps) {
+ const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
+ const isSignUp = mode === "sign-up";
return (
- {heading}
+
+ {heading}
+
{error === null ? null : (
{
event.preventDefault();
- onSubmit({ email, password });
+ onSubmit(
+ isSignUp ? { name, email, password } : { email, password },
+ );
}}
>
+ {!isSignUp ? null : (
+
+ )}
)}
@@ -128,7 +162,9 @@ export function LoginForm({
{onSubmit === undefined || providers.length === 0 ? null : (
- or
+
+ or
+
)}
@@ -147,7 +183,9 @@ export function LoginForm({
))}
- {footer === undefined ? null : {footer}}
+ {footer === undefined ? null : (
+ {footer}
+ )}
);
}
diff --git a/src/blocks/observability/app.tsx b/src/blocks/observability/app.tsx
new file mode 100644
index 00000000..0d899cd7
--- /dev/null
+++ b/src/blocks/observability/app.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { Button } from "../../ui/button.js";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "../../ui/dialog.js";
+import { EmptyState } from "../../ui/empty-state.js";
+import { Input } from "../../ui/input.js";
+import type {
+ SeriesPoint,
+ SessionSummary,
+ Trace,
+} from "../../ui/observability/model.js";
+import { RunList } from "../../ui/observability/elements.js";
+import { Observations } from "../../ui/observability/observations.js";
+import { WeekOverview } from "../../ui/observability/overview.js";
+import { AuditRun } from "./audit-run.js";
+
+export type ObservabilityAppProps = {
+ readonly sessions: readonly SessionSummary[];
+ readonly traces: Readonly>;
+ readonly series: readonly SeriesPoint[];
+ readonly failures?: readonly SeriesPoint[];
+};
+
+type Screen = "week" | "runs" | "steps" | "run";
+
+export function ObservabilityApp({
+ sessions,
+ traces,
+ series,
+ failures,
+}: ObservabilityAppProps) {
+ const [screen, setScreen] = useState("week");
+ const [query, setQuery] = useState("");
+ const [openId, setOpenId] = useState(null);
+ const [focusSpan, setFocusSpan] = useState(undefined);
+ const [adding, setAdding] = useState(false);
+ const [token, setToken] = useState(null);
+
+ const visible = useMemo(
+ () =>
+ sessions.filter((session) => {
+ if (query.length === 0) return true;
+ const haystack =
+ `${session.name} ${session.actor} ${session.model}`.toLowerCase();
+ return haystack.includes(query.toLowerCase());
+ }),
+ [sessions, query],
+ );
+
+ const trace = openId === null ? undefined : traces[openId];
+
+ function openTrace(id: string, spanId?: string) {
+ setOpenId(id);
+ setFocusSpan(spanId);
+ setScreen("run");
+ }
+
+ return (
+
+
+
+ {screen === "week" ? (
+ setScreen("runs")}
+ />
+ ) : null}
+ {screen === "runs" ? (
+
+
+ Runs
+ setQuery(event.target.value)}
+ className="max-w-xs"
+ />
+
+ {visible.length === 0 ? (
+ {
+ const run = traces[session.id];
+ return run === undefined ? [] : [run];
+ })}
+ onOpen={(id) => openTrace(id)}
+ />
+ )}
+
+ ) : null}
+ {screen === "steps" ? (
+ openTrace(traceId, spanId)}
+ />
+ ) : null}
+ {screen === "run" ? (
+ trace === undefined ? (
+
+ {adding ? (
+ setAdding(false)}
+ onMint={(name) => {
+ const slug = name
+ .trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-|-$/g, "");
+ setToken(`obs_${slug}_${Math.random().toString(36).slice(2, 10)}`);
+ }}
+ />
+ ) : null}
+
+ );
+}
+
+function NavButton({
+ current,
+ onClick,
+ children,
+}: {
+ current: boolean;
+ onClick: () => void;
+ children: string;
+}) {
+ return (
+
+ );
+}
+
+function AddAgent({
+ token,
+ onClose,
+ onMint,
+}: {
+ token: string | null;
+ onClose: () => void;
+ onMint: (name: string) => void;
+}) {
+ const [name, setName] = useState("editor");
+ const label = name.trim();
+ return (
+
+ );
+}
diff --git a/src/blocks/observability/audit-run.tsx b/src/blocks/observability/audit-run.tsx
new file mode 100644
index 00000000..85c5f3f3
--- /dev/null
+++ b/src/blocks/observability/audit-run.tsx
@@ -0,0 +1,92 @@
+import {
+ Brief,
+ Compaction,
+ ContextTransform,
+ Grant,
+ Input,
+ Network,
+ Output,
+ Payload,
+ Sidecar,
+ Signal,
+ Thinking,
+ Tool,
+ ToolResultTransform,
+} from "../../ui/observability/elements.js";
+import { TimingBreakdown } from "../../ui/observability/elements.js";
+import type { Trace } from "../../ui/observability/model.js";
+import { TraceHeader } from "../../ui/observability/trace-header.js";
+import { Timing, TraceSteps } from "../../ui/observability/trace-steps.js";
+import { Run } from "../../ui/observability/trace-view.js";
+import { TraceTimeline } from "../../ui/observability/timeline.js";
+
+export function AuditRun({
+ trace,
+ focusSpan,
+}: {
+ readonly trace: Trace;
+ readonly focusSpan?: string;
+}) {
+ return (
+
+ {(state) => (
+ <>
+ (
+
+
+ )}
+
+ );
+}
diff --git a/src/blocks/observability/trace-reading.test.ts b/src/blocks/observability/trace-reading.test.ts
new file mode 100644
index 00000000..37d7c6e5
--- /dev/null
+++ b/src/blocks/observability/trace-reading.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test";
+
+import type { Span } from "../../ui/observability/model.js";
+import { placeSpans } from "../../ui/observability/tree.js";
+import { turnReading } from "./trace-reading.js";
+
+describe("turnReading", () => {
+ test("keeps the first prompt and the last reply", () => {
+ const reading = turnReading([
+ turn("late", 40, "Second ask", "The parser drops the comma."),
+ turn("early", 10, "Review the diff.", "I will look."),
+ tool("grep", 20, "12 matches."),
+ ]);
+ expect(reading.question).toBe("Review the diff.");
+ expect(reading.answer).toBe("The parser drops the comma.");
+ });
+
+ test("skips a turn that has no text", () => {
+ const reading = turnReading([
+ turn("empty", 0, " ", ""),
+ turn("real", 5, "Review the diff.", "Done."),
+ ]);
+ expect(reading.question).toBe("Review the diff.");
+ expect(reading.answer).toBe("Done.");
+ });
+
+ test("a tool reply is not the answer", () => {
+ const reading = turnReading([tool("shell", 0, "1 failed.")]);
+ expect(reading.question).toBeUndefined();
+ expect(reading.answer).toBeUndefined();
+ });
+
+ test("reads turns that share a start in step order", () => {
+ const [left, right] = namesThatTieBreakApart();
+ const spans = [
+ turn(left, 0, `Ask from ${left}`, `Reply from ${left}`),
+ turn(right, 0, `Ask from ${right}`, `Reply from ${right}`),
+ ];
+ const turns = placeSpans(spans).filter((row) => row.span.kind === "turn");
+ const first = turns[0];
+ const last = turns[turns.length - 1];
+ if (first === undefined || last === undefined) {
+ throw new Error("expected two turns");
+ }
+ const reading = turnReading(spans);
+ expect(reading.question).toBe(first.span.input);
+ expect(reading.answer).toBe(last.span.output);
+ });
+});
+
+/** Two names `<` and `localeCompare` order differently. */
+function namesThatTieBreakApart(): readonly [string, string] {
+ const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+ for (const left of letters) {
+ for (const right of letters) {
+ if (left === right) continue;
+ const codeUnit = left < right ? -1 : 1;
+ if (codeUnit !== Math.sign(left.localeCompare(right))) {
+ return [left, right];
+ }
+ }
+ }
+ throw new Error("expected names whose orders disagree");
+}
+
+function turn(
+ id: string,
+ startMs: number,
+ input: string,
+ output: string,
+): Span {
+ return {
+ id,
+ parentId: null,
+ kind: "turn",
+ name: id,
+ status: "ok",
+ startMs,
+ durationMs: 1,
+ input,
+ output,
+ };
+}
+
+function tool(id: string, startMs: number, output: string): Span {
+ return {
+ id,
+ parentId: null,
+ kind: "tool",
+ name: id,
+ status: "ok",
+ startMs,
+ durationMs: 1,
+ output,
+ };
+}
diff --git a/src/blocks/observability/trace-reading.tsx b/src/blocks/observability/trace-reading.tsx
new file mode 100644
index 00000000..795bdb22
--- /dev/null
+++ b/src/blocks/observability/trace-reading.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useRef } from "react";
+
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../../ui/badge.js";
+import { Input, Output, Thinking } from "../../ui/observability/elements.js";
+import { formatDuration } from "../../ui/observability/format.js";
+import type { Span, Trace } from "../../ui/observability/model.js";
+import {
+ STATUS_LABEL,
+ STATUS_TONE,
+} from "../../ui/observability/trace-header.js";
+import { Run } from "../../ui/observability/trace-view.js";
+import { compareSpans, type PlacedSpan } from "../../ui/observability/tree.js";
+import { rowMarker, stepTitle } from "../../ui/observability/wording.js";
+
+/**
+ * A trace as something to read. The question and the model's last reply come
+ * first. The steps follow, and choosing one shows what it was given and what
+ * it returned. Playback stays on `AuditRun`.
+ */
+export function TraceReading({ trace }: { readonly trace: Trace }) {
+ const reading = turnReading(trace.spans);
+ const question = sameText(reading.question, trace.name)
+ ? undefined
+ : reading.question;
+ return (
+
+ {(state) => (
+
+
+
+ {question === undefined ? null : (
+ {question}
+ )}
+ {reading.answer === undefined ? null : (
+ {reading.answer}
+ )}
+
+ )}
+
+ );
+}
+
+/** The first model prompt, and the last model reply, in step order. */
+export function turnReading(spans: readonly Span[]): {
+ question: string | undefined;
+ answer: string | undefined;
+} {
+ const ordered = [...spans].sort(compareSpans);
+ let question: string | undefined;
+ let answer: string | undefined;
+ for (const span of ordered) {
+ if (span.kind !== "turn") continue;
+ const input = textOf(span.input);
+ if (question === undefined && input !== undefined) question = input;
+ const output = textOf(span.output);
+ if (output !== undefined) answer = output;
+ }
+ return { question, answer };
+}
+
+function ReadingBlock({
+ label,
+ children,
+}: {
+ readonly label: string;
+ readonly children: string;
+}) {
+ return (
+
+ {label}
+
+ {children}
+
+
+ );
+}
+
+function ReadingSteps({
+ placed,
+ selected,
+ select,
+}: {
+ readonly placed: readonly PlacedSpan[];
+ readonly selected: Span | undefined;
+ readonly select: (id: string, startMs: number) => void;
+}) {
+ const buttons = useRef(new Map());
+ function onKey(event: {
+ key: string;
+ preventDefault: () => void;
+ target: EventTarget | null;
+ }) {
+ const delta = keyDelta(event.key);
+ if (delta === 0) return;
+ const from = focusedStep(event.target, placed);
+ if (from === undefined) return;
+ const next = neighbor(placed, from, delta);
+ if (next === undefined) return;
+ event.preventDefault();
+ select(next.span.id, next.span.startMs);
+ const node = buttons.current.get(next.span.id);
+ if (node !== undefined) node.focus();
+ }
+ return (
+
+ {placed.map((row, index) => (
+ select(row.span.id, row.span.startMs)}
+ buttonRef={(node) => storeButton(buttons.current, row.span.id, node)}
+ />
+ ))}
+
+ );
+}
+
+function StepRow({
+ span,
+ depth,
+ open,
+ tabIndex,
+ onSelect,
+ buttonRef,
+}: {
+ readonly span: Span;
+ readonly depth: number;
+ readonly open: boolean;
+ readonly tabIndex: number;
+ readonly onSelect: () => void;
+ readonly buttonRef: (node: HTMLButtonElement | null) => void;
+}) {
+ return (
+
+
+ {open ? ,
+ id: string,
+ node: HTMLButtonElement | null,
+) {
+ if (node === null) buttons.delete(id);
+ else buttons.set(id, node);
+}
+
+function keyDelta(key: string): number {
+ if (key === "ArrowDown") return 1;
+ if (key === "ArrowUp") return -1;
+ return 0;
+}
+
+function metaLine(trace: Trace): string {
+ const parts: string[] = [];
+ if (trace.actor.length > 0) parts.push(trace.actor);
+ parts.push(STATUS_LABEL[trace.status]);
+ parts.push(formatDuration(trace.durationMs));
+ return parts.join(" · ");
+}
+
+function sameText(left: string | undefined, right: string): boolean {
+ if (left === undefined) return false;
+ return left === right.trim();
+}
+
+function textOf(value: string | undefined): string | undefined {
+ if (value === undefined) return undefined;
+ const text = value.trim();
+ if (text.length === 0) return undefined;
+ return text;
+}
diff --git a/src/hooks/use-attachments.test.ts b/src/hooks/use-attachments.test.ts
new file mode 100644
index 00000000..da58b3c0
--- /dev/null
+++ b/src/hooks/use-attachments.test.ts
@@ -0,0 +1,377 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import {
+ Activity,
+ StrictMode,
+ Suspense,
+ act,
+ createElement,
+ startTransition,
+ use,
+ useState,
+} from "react";
+import { createRoot } from "react-dom/client";
+
+import type { PartFile } from "../lib/conversation.js";
+import type { AttachmentData } from "../ui/attachments.js";
+import {
+ useAttachments,
+ type AttachmentItem,
+ type UseAttachmentsResult,
+} from "./use-attachments.js";
+
+// What the parts render must take what the hook makes and what a message
+// carries, with no mapping in between.
+const fromHook: (item: AttachmentItem) => AttachmentData = (item) => item;
+const fromMessage: (part: PartFile) => AttachmentData = (part) => part;
+void fromHook;
+void fromMessage;
+
+let created: string[] = [];
+let revoked: string[] = [];
+const realCreate = URL.createObjectURL;
+const realRevoke = URL.revokeObjectURL;
+
+beforeEach(() => {
+ created = [];
+ revoked = [];
+ URL.createObjectURL = () => {
+ const url = `blob:test/${created.length + 1}`;
+ created.push(url);
+ return url;
+ };
+ URL.revokeObjectURL = (url: string) => {
+ revoked.push(url);
+ };
+});
+
+afterEach(() => {
+ URL.createObjectURL = realCreate;
+ URL.revokeObjectURL = realRevoke;
+});
+
+function file(name: string, size = 4, type = "text/plain"): File {
+ return new File(["x".repeat(size)], name, { type });
+}
+
+/** Lets the hook's deferred unmount revoke run. */
+function microtasks(): Promise {
+ return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+type Options = {
+ readonly maxFiles?: number;
+ readonly maxFileBytes?: number;
+ readonly strict?: boolean;
+ readonly initial?: readonly AttachmentItem[];
+};
+
+/** A host that owns the list, as a composer would. */
+function mountHost({ strict = false, initial = [], ...limits }: Options = {}) {
+ const container = document.createElement("div");
+ document.body.appendChild(container);
+ const root = createRoot(container);
+ let hook: UseAttachmentsResult | undefined;
+ let list: readonly AttachmentItem[] = [];
+ let setList: (next: readonly AttachmentItem[]) => void = () => {};
+ let setHidden: (hidden: boolean) => void = () => {};
+
+ function Host() {
+ const [attachments, setAttachments] =
+ useState(initial);
+ list = attachments;
+ setList = setAttachments;
+ hook = useAttachments({ attachments, ...limits });
+ return null;
+ }
+
+ /** Hiding runs the hook's effect cleanups; showing runs them again. */
+ function Shell() {
+ const [hidden, setShellHidden] = useState(false);
+ setHidden = setShellHidden;
+ return createElement(Activity, {
+ mode: hidden ? "hidden" : "visible",
+ children: createElement(Host),
+ });
+ }
+
+ act(() => {
+ root.render(
+ strict
+ ? createElement(StrictMode, null, createElement(Shell))
+ : createElement(Shell),
+ );
+ });
+
+ const api = () => {
+ if (hook === undefined) throw new Error("the hook did not render");
+ return hook;
+ };
+
+ return {
+ get list() {
+ return list;
+ },
+ /** Adds and appends what was accepted, in one update. */
+ drop(files: readonly File[]) {
+ let result: ReturnType | undefined;
+ act(() => {
+ result = api().add(files);
+ const accepted = result.accepted;
+ setList([...list, ...accepted]);
+ });
+ if (result === undefined) throw new Error("add returned nothing");
+ return result;
+ },
+ add(files: readonly File[]) {
+ return api().add(files);
+ },
+ release(ids: readonly string[]) {
+ api().release(ids);
+ },
+ set(next: readonly AttachmentItem[]) {
+ act(() => setList(next));
+ },
+ rerender() {
+ act(() => setList([...list]));
+ },
+ /**
+ * Runs the hook's effect cleanups and then its setups again before any
+ * microtask can run, as Fast Refresh or an effect replay does.
+ */
+ replayEffects() {
+ act(() => setHidden(true));
+ act(() => setHidden(false));
+ },
+ /** Hides the hook in its `Activity` for longer than a tick, then shows it. */
+ async hideAndShow() {
+ act(() => setHidden(true));
+ await act(microtasks);
+ act(() => setHidden(false));
+ await act(microtasks);
+ },
+ unmount() {
+ act(() => root.unmount());
+ container.remove();
+ },
+ };
+}
+
+describe("useAttachments", () => {
+ test("refused files carry a reason; accepted ones a preview URL", () => {
+ const host = mountHost({ maxFiles: 2, maxFileBytes: 10 });
+ const big = file("big.png", 20, "image/png");
+ const notes = file("notes.txt");
+ const again = file("notes.txt");
+ const plan = file("plan.md");
+ const extra = file("extra.md");
+ const { accepted, rejected } = host.drop([big, notes, again, plan, extra]);
+
+ expect(accepted.map((item) => item.name)).toEqual(["notes.txt", "plan.md"]);
+ expect(accepted.map((item) => item.file)).toEqual([notes, plan]);
+ expect(accepted.map((item) => item.url)).toEqual(created);
+ expect(new Set(accepted.map((item) => item.id)).size).toBe(2);
+ expect(rejected).toEqual([
+ { file: big, reason: "too-large" },
+ { file: again, reason: "duplicate" },
+ { file: extra, reason: "too-many" },
+ ]);
+ expect(host.list).toEqual(accepted);
+ host.unmount();
+ });
+
+ test("a file with no type is a generic binary", () => {
+ const host = mountHost();
+ const [item] = host.drop([new File(["abc"], "archive.bin")]).accepted;
+ expect(item?.mediaType).toBe("application/octet-stream");
+ expect(item?.size).toBe(3);
+ host.unmount();
+ });
+
+ test("a nameless file is checked as the Untitled it is held as", () => {
+ const host = mountHost();
+ const [item] = host.drop([file("")]).accepted;
+ if (item === undefined) throw new Error("missing");
+ expect(item.name).toBe("Untitled");
+
+ const nameless = file("");
+ const named = file("Untitled");
+ expect(host.drop([nameless]).rejected).toEqual([
+ { file: nameless, reason: "duplicate" },
+ ]);
+ expect(host.drop([named]).rejected).toEqual([
+ { file: named, reason: "duplicate" },
+ ]);
+ expect(host.list).toEqual([item]);
+ host.unmount();
+ });
+
+ test("two adds before the list updates still respect the limits", () => {
+ const host = mountHost({ maxFiles: 2 });
+ let second: ReturnType | undefined;
+ act(() => {
+ host.add([file("a.txt")]);
+ second = host.add([file("a.txt"), file("b.txt"), file("c.txt")]);
+ });
+ expect(second?.accepted.map((item) => item.name)).toEqual(["b.txt"]);
+ expect(second?.rejected.map((rejection) => rejection.reason)).toEqual([
+ "duplicate",
+ "too-many",
+ ]);
+ host.unmount();
+ });
+
+ // A transition that suspends renders the new list but keeps the old one
+ // on screen until it resolves, here never.
+ test("a list rendered but not yet committed is not checked against", async () => {
+ const container = document.createElement("div");
+ document.body.appendChild(container);
+ const root = createRoot(container);
+ const never = new Promise(() => {});
+ let hook: UseAttachmentsResult | undefined;
+ let show: (list: readonly AttachmentItem[]) => void = () => {};
+
+ function Stall(): null {
+ use(never);
+ return null;
+ }
+
+ function Host() {
+ const [shown, setShown] = useState<{
+ readonly list: readonly AttachmentItem[];
+ readonly stall: boolean;
+ }>({ list: [], stall: false });
+ show = (list) => setShown({ list, stall: true });
+ hook = useAttachments({ attachments: shown.list, maxFiles: 1 });
+ return shown.stall ? createElement(Stall) : null;
+ }
+
+ act(() => {
+ root.render(
+ createElement(Suspense, { fallback: null }, createElement(Host)),
+ );
+ });
+ const held: AttachmentItem = {
+ id: "held-1",
+ name: "a.txt",
+ mediaType: "text/plain",
+ size: 4,
+ };
+ await act(async () => {
+ startTransition(() => show([held]));
+ });
+
+ const { accepted, rejected } = hook?.add([file("a.txt")]) ?? {};
+ expect(rejected).toEqual([]);
+ expect(accepted?.map((item) => item.name)).toEqual(["a.txt"]);
+ act(() => root.unmount());
+ container.remove();
+ });
+
+ test("removing an attachment revokes its preview URL and only its", () => {
+ const host = mountHost();
+ const [first, second] = host.drop([file("a.txt"), file("b.txt")]).accepted;
+ if (first === undefined || second === undefined) throw new Error("missing");
+ expect(revoked).toEqual([]);
+
+ host.set([second]);
+ expect(revoked).toEqual([first.url ?? ""]);
+
+ host.set([]);
+ expect(revoked).toEqual([first.url ?? "", second.url ?? ""]);
+ host.unmount();
+ });
+
+ test("an accepted file the host never appended is revoked and can come back", () => {
+ const host = mountHost();
+ act(() => {
+ host.add([file("a.txt")]);
+ });
+ host.rerender();
+ expect(revoked).toEqual(created);
+
+ const { accepted, rejected } = host.drop([file("a.txt")]);
+ expect(rejected).toEqual([]);
+ expect(accepted).toHaveLength(1);
+ host.unmount();
+ });
+
+ test("a released attachment keeps its URL after it leaves the list", async () => {
+ const host = mountHost();
+ const sent = host.drop([file("a.txt"), file("b.txt")]).accepted;
+ host.release(sent.map((item) => item.id));
+ host.set([]);
+ host.unmount();
+ await microtasks();
+ expect(revoked).toEqual([]);
+ });
+
+ test("unmounting revokes every URL still held", async () => {
+ const host = mountHost();
+ host.drop([file("a.txt"), file("b.txt")]);
+ host.unmount();
+ await microtasks();
+ expect([...revoked].sort()).toEqual([...created].sort());
+ });
+
+ // A drop still being read, or any other late caller.
+ test("an add after unmounting makes no preview URL", async () => {
+ const host = mountHost();
+ host.unmount();
+ await microtasks();
+ const [item] = host.add([file("a.txt")]).accepted;
+ expect(item?.url).toBeUndefined();
+ expect(item?.file).toBeInstanceOf(File);
+ expect(created).toEqual([]);
+ });
+
+ // StrictMode replays effects only at mount, before any URL is made, so
+ // the replay here comes after: the effects are torn down and set up again
+ // while the previews are on screen.
+ test("an effect replay while previews are held revokes nothing", async () => {
+ const host = mountHost({ strict: true });
+ host.drop([file("a.txt"), file("b.txt")]);
+ expect(created).toHaveLength(2);
+
+ host.replayEffects();
+ await microtasks();
+ expect(revoked).toEqual([]);
+
+ host.unmount();
+ await microtasks();
+ expect([...revoked].sort()).toEqual([...created].sort());
+ });
+
+ // Nothing tells a hide from an unmount, so the previews go and the held
+ // items keep their dead URLs; `Attachment` rebuilds the pictures from
+ // `file` (see attachments.test.tsx).
+ test("a hide longer than a tick revokes the held previews", async () => {
+ const host = mountHost();
+ const [item] = host.drop([file("a.png", 4, "image/png")]).accepted;
+ if (item === undefined) throw new Error("missing");
+
+ await host.hideAndShow();
+ expect(revoked).toEqual([item.url ?? ""]);
+ expect(host.list).toEqual([item]);
+ expect(host.list[0]?.file).toBeInstanceOf(File);
+ host.unmount();
+ });
+
+ test("the host's own URLs are never revoked", async () => {
+ const uploaded: AttachmentItem = {
+ id: "uploaded-1",
+ name: "report.pdf",
+ mediaType: "application/pdf",
+ size: 2048,
+ url: "https://files.example.com/report.pdf",
+ };
+ const host = mountHost({ initial: [uploaded] });
+ const { rejected } = host.drop([file("report.pdf", 2048)]);
+ expect(rejected.map((rejection) => rejection.reason)).toEqual([
+ "duplicate",
+ ]);
+ host.set([]);
+ host.unmount();
+ await microtasks();
+ expect(revoked).toEqual([]);
+ });
+});
diff --git a/src/hooks/use-attachments.ts b/src/hooks/use-attachments.ts
new file mode 100644
index 00000000..ab6adee3
--- /dev/null
+++ b/src/hooks/use-attachments.ts
@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+import {
+ checkAttachments,
+ type AttachmentLimits,
+ type AttachmentRejection,
+} from "../lib/attachment-limits.js";
+
+/** A file waiting to be sent, as the host holds it. */
+export type AttachmentItem = {
+ readonly id: string;
+ readonly name: string;
+ readonly mediaType: string;
+ /** In bytes. */
+ readonly size: number;
+ /** Where the bytes are: a preview URL `useAttachments` made, or the host's own. */
+ readonly url?: string;
+ /** The local file, for the host to upload or send. */
+ readonly file?: File;
+};
+
+export type UseAttachmentsOptions = AttachmentLimits & {
+ /** The attachments the host holds now. */
+ readonly attachments: readonly AttachmentItem[];
+};
+
+export type AttachmentIntake = {
+ /** New attachments, each with a preview URL, to append to the host's list. */
+ readonly accepted: readonly AttachmentItem[];
+ /** Files left out, each with why. */
+ readonly rejected: readonly AttachmentRejection[];
+};
+
+export type UseAttachmentsResult = {
+ /** Checks `files` against the limits and the attachments already held. */
+ readonly add: (files: Iterable | ArrayLike) => AttachmentIntake;
+ /**
+ * Hands the preview URLs of `ids` over to the host: the hook stops
+ * tracking them and never revokes them. Call it before moving attachments
+ * out of the list somewhere they are still shown, such as a sent message;
+ * revoking them is then the host's job.
+ */
+ readonly release: (ids: Iterable) => void;
+};
+
+let lastAttachmentId = 0;
+
+/** The name a file is held under. */
+function nameOf(file: File): string {
+ return file.name === "" ? "Untitled" : file.name;
+}
+
+function nextAttachmentId(): string {
+ lastAttachmentId += 1;
+ return `attachment-${lastAttachmentId}`;
+}
+
+/**
+ * Takes files into a host-owned attachment list.
+ *
+ * `add` runs `checkAttachments` against the list (and anything it accepted
+ * since the list last changed, so two drops in one tick cannot both slip
+ * past a limit) and gives each accepted file an object URL for its preview.
+ * The host appends `accepted` to its list in the same update and decides
+ * what to say about `rejected`.
+ *
+ * Every URL the hook makes is revoked at the first commit whose list does
+ * not hold its attachment: once the host removes it, however it does, or
+ * right away if the host never appended it. The rest go when the hook
+ * unmounts, and an `add` after that makes no URL; `Attachment` shows such an
+ * item's picture from its `file`. Only URLs the hook made are revoked; the
+ * host's own are left alone. To keep an attachment on screen after it leaves
+ * the list (sending moves it into a message), `release` it first.
+ *
+ * The unmount revoke waits a microtask and is called off if the hook mounts
+ * again, which is what StrictMode's simulated remount does within one
+ * commit. A hook hidden by `` for longer than that
+ * counts as unmounted: its previews are revoked, and once it shows again
+ * the attachments still held keep URLs that no longer load. `Attachment`
+ * rebuilds their pictures from `file`. Anything else that reads `url`
+ * after such a hide, such as a viewer opened from `AttachmentPreview`'s
+ * `onOpen`, should make its own URL from `file`, or the hook should sit
+ * above the `Activity`.
+ */
+export function useAttachments({
+ attachments,
+ maxFiles,
+ maxFileBytes,
+}: UseAttachmentsOptions): UseAttachmentsResult {
+ const urls = useRef(new Map());
+ const pending = useRef([]);
+ // The committed list and limits, for `add`: a render that never commits,
+ // such as a transition that suspends, must not leave its list here.
+ const latest = useRef({ attachments, maxFiles, maxFileBytes });
+ useLayoutEffect(() => {
+ latest.current = { attachments, maxFiles, maxFileBytes };
+ });
+ // True until the hook unmounts, so an `add` before its effects run still
+ // makes a URL.
+ const mounted = useRef(true);
+
+ // After every commit, not only when the list changes: an accepted file the
+ // host did not append must neither keep its URL nor count as a duplicate
+ // of the same file dropped again.
+ useEffect(() => {
+ pending.current = [];
+ const held = new Set(attachments.map((item) => item.id));
+ for (const [id, url] of urls.current) {
+ if (held.has(id)) continue;
+ URL.revokeObjectURL(url);
+ urls.current.delete(id);
+ }
+ });
+
+ useEffect(() => {
+ mounted.current = true;
+ const owned = urls.current;
+ return () => {
+ mounted.current = false;
+ queueMicrotask(() => {
+ if (mounted.current) return;
+ for (const url of owned.values()) URL.revokeObjectURL(url);
+ owned.clear();
+ });
+ };
+ }, []);
+
+ const add = useCallback((files: Iterable | ArrayLike) => {
+ const {
+ attachments: held,
+ maxFiles: max,
+ maxFileBytes: maxBytes,
+ } = latest.current;
+ const limits: AttachmentLimits = {
+ ...(max === undefined ? {} : { maxFiles: max }),
+ ...(maxBytes === undefined ? {} : { maxFileBytes: maxBytes }),
+ };
+ // Checked under the name each file will be held under, so a nameless
+ // file is a duplicate of the "Untitled" one already held.
+ const { accepted, rejected } = checkAttachments(
+ [...held, ...pending.current],
+ Array.from(files, (file) => ({
+ name: nameOf(file),
+ size: file.size,
+ file,
+ })),
+ limits,
+ );
+ const items = accepted.map(({ name, file }): AttachmentItem => {
+ const id = nextAttachmentId();
+ const item = {
+ id,
+ name,
+ mediaType: file.type === "" ? "application/octet-stream" : file.type,
+ size: file.size,
+ file,
+ };
+ // Past unmount nothing would revoke it.
+ if (!mounted.current) return item;
+ const url = URL.createObjectURL(file);
+ urls.current.set(id, url);
+ return { ...item, url };
+ });
+ pending.current = [...pending.current, ...items];
+ return {
+ accepted: items,
+ rejected: rejected.map(({ file, reason }) => ({
+ file: file.file,
+ reason,
+ })),
+ };
+ }, []);
+
+ const release = useCallback((ids: Iterable) => {
+ for (const id of ids) urls.current.delete(id);
+ }, []);
+
+ return { add, release };
+}
diff --git a/src/hooks/use-chat-dock.ts b/src/hooks/use-chat-dock.ts
deleted file mode 100644
index e5398bef..00000000
--- a/src/hooks/use-chat-dock.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/**
- * The three ways the dock can occupy the screen. `docked` and `fullpage` are
- * both "open" — the difference is size and position only, never a remount —
- * so the transition between them is a plain CSS transition on one element.
- */
-export type ChatDockMode = "closed" | "docked" | "fullpage";
-
-/**
- * Elements whose own Escape handling should win over the dock's step-down —
- * a `
{brand}
- )}
-
-
-
-
- {title}
-{description}
- {actions === undefined ? null :{actions}
}
-
+
{brand === undefined ? null : (
-
- {}} />);
+ expect(mounted.container.querySelector('input[name="name"]')).toBeNull();
+ const password = mounted.container.querySelector('input[name="password"]');
+ expect(password?.getAttribute("autoComplete")).toBe("current-password");
+ mounted.unmount();
+ });
+
+ test("busy reads Signing in…", () => {
+ const mounted = render( {}} busy />);
+ expect(
+ mounted.container.querySelector("button[type=submit]")?.textContent,
+ ).toBe("Signing in…");
+ mounted.unmount();
+ });
+
+ test("mode='sign-in' is equivalent to the default", () => {
+ const mounted = render( {}} />);
+ expect(mounted.container.querySelector('input[name="name"]')).toBeNull();
+ mounted.unmount();
+ });
+});
+
+describe("LoginForm sign-up mode", () => {
+ test("renders a name field", () => {
+ const mounted = render( {}} />);
+ expect(
+ mounted.container.querySelector('input[name="name"]'),
+ ).not.toBeNull();
+ mounted.unmount();
+ });
+
+ test("password uses new-password autocomplete", () => {
+ const mounted = render( {}} />);
+ const password = mounted.container.querySelector('input[name="password"]');
+ expect(password?.getAttribute("autoComplete")).toBe("new-password");
+ mounted.unmount();
+ });
+
+ test("busy reads Signing up…", () => {
+ const mounted = render(
+ {}} busy />,
+ );
+ expect(
+ mounted.container.querySelector("button[type=submit]")?.textContent,
+ ).toBe("Signing up…");
+ mounted.unmount();
+ });
+
+ test("submits the name alongside email and password", () => {
+ const submitted: {
+ credentials: { name?: string; email: string; password: string } | null;
+ } = {
+ credentials: null,
+ };
+ const mounted = render(
+ (submitted.credentials = credentials)}
+ />,
+ );
+ const form = mounted.container.querySelector("form");
+ const name = mounted.container.querySelector(
+ 'input[name="name"]',
+ ) as HTMLInputElement;
+ const email = mounted.container.querySelector(
+ 'input[name="email"]',
+ ) as HTMLInputElement;
+ const password = mounted.container.querySelector(
+ 'input[name="password"]',
+ ) as HTMLInputElement;
+
+ // React controls these inputs; set the native value then dispatch input
+ // through the DOM so React's change handler observes it.
+ const setValue = (input: HTMLInputElement, value: string) => {
+ const setter = Object.getOwnPropertyDescriptor(
+ window.HTMLInputElement.prototype,
+ "value",
+ )?.set;
+ setter?.call(input, value);
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+ };
+ act(() => {
+ setValue(name, "Ada Lovelace");
+ setValue(email, "ada@example.com");
+ setValue(password, "correct horse battery staple");
+ });
+ act(() => {
+ form?.dispatchEvent(
+ new Event("submit", { bubbles: true, cancelable: true }),
+ );
+ });
+
+ expect(submitted.credentials).toEqual({
+ name: "Ada Lovelace",
+ email: "ada@example.com",
+ password: "correct horse battery staple",
+ });
+ mounted.unmount();
+ });
+});
diff --git a/src/blocks/login/login-form.tsx b/src/blocks/login/login-form.tsx
index f174aa72..4b11d42d 100644
--- a/src/blocks/login/login-form.tsx
+++ b/src/blocks/login/login-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { useState } from "react";
import type { ReactNode } from "react";
@@ -20,14 +22,22 @@ export type AuthProvider = {
readonly icon?: ReactNode;
};
+export type LoginFormMode = "sign-in" | "sign-up";
+
export type LoginFormProps = {
+ /** "sign-in" (default) shows email/password. "sign-up" adds a name field. */
+ readonly mode?: LoginFormMode;
readonly heading?: string;
/** Social / SSO options. Empty renders none, and no divider either. */
readonly providers?: readonly AuthProvider[];
readonly onProvider?: (id: string) => void;
/** Omit to render an SSO-only page with no email fields at all. */
- readonly onSubmit?: (credentials: { readonly email: string; readonly password: string }) => void;
- /** True while a sign-in is in flight. Disables every control. */
+ readonly onSubmit?: (credentials: {
+ readonly name?: string;
+ readonly email: string;
+ readonly password: string;
+ }) => void;
+ /** True while a sign-in or sign-up is in flight. Disables every control. */
readonly busy?: boolean;
/** A failure to show. Announced, not just drawn. */
readonly error?: string | null;
@@ -49,15 +59,17 @@ export type LoginFormProps = {
* to happen, and they submit again. It is `aria-live="assertive"` precisely
* because interrupting is correct here.
*
- * `autoComplete="email"` and `"current-password"` are not decoration: they are
- * what lets a password manager fill this form, and a sign-in form password
- * managers cannot fill pushes people toward worse passwords.
+ * `autoComplete="email"` and `"current-password"` (`"new-password"` in
+ * sign-up mode) are not decoration: they are what lets a password manager
+ * fill this form, and a form password managers cannot fill pushes people
+ * toward worse passwords.
*
- * The submit button reads "Signing in…" while busy rather than swapping to a
- * spinner. The label is the status, so it is announced by the same mechanism
- * that announces the button.
+ * The submit button reads "Signing in…" / "Signing up…" while busy rather
+ * than swapping to a spinner. The label is the status, so it is announced by
+ * the same mechanism that announces the button.
*/
export function LoginForm({
+ mode = "sign-in",
heading = "Welcome back",
providers = [],
onProvider,
@@ -67,12 +79,16 @@ export function LoginForm({
footer,
className,
}: LoginFormProps) {
+ const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
+ const isSignUp = mode === "sign-up";
return (
>;
+ readonly series: readonly SeriesPoint[];
+ readonly failures?: readonly SeriesPoint[];
+};
+
+type Screen = "week" | "runs" | "steps" | "run";
+
+export function ObservabilityApp({
+ sessions,
+ traces,
+ series,
+ failures,
+}: ObservabilityAppProps) {
+ const [screen, setScreen] = useState("week");
+ const [query, setQuery] = useState("");
+ const [openId, setOpenId] = useState(null);
+ const [focusSpan, setFocusSpan] = useState(undefined);
+ const [adding, setAdding] = useState(false);
+ const [token, setToken] = useState(null);
+
+ const visible = useMemo(
+ () =>
+ sessions.filter((session) => {
+ if (query.length === 0) return true;
+ const haystack =
+ `${session.name} ${session.actor} ${session.model}`.toLowerCase();
+ return haystack.includes(query.toLowerCase());
+ }),
+ [sessions, query],
+ );
+
+ const trace = openId === null ? undefined : traces[openId];
+
+ function openTrace(id: string, spanId?: string) {
+ setOpenId(id);
+ setFocusSpan(spanId);
+ setScreen("run");
+ }
+
+ return (
+
+ {(state) => (
+ <>
+
+ );
+}
diff --git a/src/blocks/observability/trace-reading.test.ts b/src/blocks/observability/trace-reading.test.ts
new file mode 100644
index 00000000..37d7c6e5
--- /dev/null
+++ b/src/blocks/observability/trace-reading.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test";
+
+import type { Span } from "../../ui/observability/model.js";
+import { placeSpans } from "../../ui/observability/tree.js";
+import { turnReading } from "./trace-reading.js";
+
+describe("turnReading", () => {
+ test("keeps the first prompt and the last reply", () => {
+ const reading = turnReading([
+ turn("late", 40, "Second ask", "The parser drops the comma."),
+ turn("early", 10, "Review the diff.", "I will look."),
+ tool("grep", 20, "12 matches."),
+ ]);
+ expect(reading.question).toBe("Review the diff.");
+ expect(reading.answer).toBe("The parser drops the comma.");
+ });
+
+ test("skips a turn that has no text", () => {
+ const reading = turnReading([
+ turn("empty", 0, " ", ""),
+ turn("real", 5, "Review the diff.", "Done."),
+ ]);
+ expect(reading.question).toBe("Review the diff.");
+ expect(reading.answer).toBe("Done.");
+ });
+
+ test("a tool reply is not the answer", () => {
+ const reading = turnReading([tool("shell", 0, "1 failed.")]);
+ expect(reading.question).toBeUndefined();
+ expect(reading.answer).toBeUndefined();
+ });
+
+ test("reads turns that share a start in step order", () => {
+ const [left, right] = namesThatTieBreakApart();
+ const spans = [
+ turn(left, 0, `Ask from ${left}`, `Reply from ${left}`),
+ turn(right, 0, `Ask from ${right}`, `Reply from ${right}`),
+ ];
+ const turns = placeSpans(spans).filter((row) => row.span.kind === "turn");
+ const first = turns[0];
+ const last = turns[turns.length - 1];
+ if (first === undefined || last === undefined) {
+ throw new Error("expected two turns");
+ }
+ const reading = turnReading(spans);
+ expect(reading.question).toBe(first.span.input);
+ expect(reading.answer).toBe(last.span.output);
+ });
+});
+
+/** Two names `<` and `localeCompare` order differently. */
+function namesThatTieBreakApart(): readonly [string, string] {
+ const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+ for (const left of letters) {
+ for (const right of letters) {
+ if (left === right) continue;
+ const codeUnit = left < right ? -1 : 1;
+ if (codeUnit !== Math.sign(left.localeCompare(right))) {
+ return [left, right];
+ }
+ }
+ }
+ throw new Error("expected names whose orders disagree");
+}
+
+function turn(
+ id: string,
+ startMs: number,
+ input: string,
+ output: string,
+): Span {
+ return {
+ id,
+ parentId: null,
+ kind: "turn",
+ name: id,
+ status: "ok",
+ startMs,
+ durationMs: 1,
+ input,
+ output,
+ };
+}
+
+function tool(id: string, startMs: number, output: string): Span {
+ return {
+ id,
+ parentId: null,
+ kind: "tool",
+ name: id,
+ status: "ok",
+ startMs,
+ durationMs: 1,
+ output,
+ };
+}
diff --git a/src/blocks/observability/trace-reading.tsx b/src/blocks/observability/trace-reading.tsx
new file mode 100644
index 00000000..795bdb22
--- /dev/null
+++ b/src/blocks/observability/trace-reading.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useRef } from "react";
+
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../../ui/badge.js";
+import { Input, Output, Thinking } from "../../ui/observability/elements.js";
+import { formatDuration } from "../../ui/observability/format.js";
+import type { Span, Trace } from "../../ui/observability/model.js";
+import {
+ STATUS_LABEL,
+ STATUS_TONE,
+} from "../../ui/observability/trace-header.js";
+import { Run } from "../../ui/observability/trace-view.js";
+import { compareSpans, type PlacedSpan } from "../../ui/observability/tree.js";
+import { rowMarker, stepTitle } from "../../ui/observability/wording.js";
+
+/**
+ * A trace as something to read. The question and the model's last reply come
+ * first. The steps follow, and choosing one shows what it was given and what
+ * it returned. Playback stays on `AuditRun`.
+ */
+export function TraceReading({ trace }: { readonly trace: Trace }) {
+ const reading = turnReading(trace.spans);
+ const question = sameText(reading.question, trace.name)
+ ? undefined
+ : reading.question;
+ return (
+
+ {(state) => (
+
+
+
+ {question === undefined ? null : (
+ {question}
+ )}
+ {reading.answer === undefined ? null : (
+ {reading.answer}
+ )}
+
+ )}
+
+ );
+}
+
+/** The first model prompt, and the last model reply, in step order. */
+export function turnReading(spans: readonly Span[]): {
+ question: string | undefined;
+ answer: string | undefined;
+} {
+ const ordered = [...spans].sort(compareSpans);
+ let question: string | undefined;
+ let answer: string | undefined;
+ for (const span of ordered) {
+ if (span.kind !== "turn") continue;
+ const input = textOf(span.input);
+ if (question === undefined && input !== undefined) question = input;
+ const output = textOf(span.output);
+ if (output !== undefined) answer = output;
+ }
+ return { question, answer };
+}
+
+function ReadingBlock({
+ label,
+ children,
+}: {
+ readonly label: string;
+ readonly children: string;
+}) {
+ return (
+
+
+ );
+}
+
+function ReadingSteps({
+ placed,
+ selected,
+ select,
+}: {
+ readonly placed: readonly PlacedSpan[];
+ readonly selected: Span | undefined;
+ readonly select: (id: string, startMs: number) => void;
+}) {
+ const buttons = useRef(new Map());
+ function onKey(event: {
+ key: string;
+ preventDefault: () => void;
+ target: EventTarget | null;
+ }) {
+ const delta = keyDelta(event.key);
+ if (delta === 0) return;
+ const from = focusedStep(event.target, placed);
+ if (from === undefined) return;
+ const next = neighbor(placed, from, delta);
+ if (next === undefined) return;
+ event.preventDefault();
+ select(next.span.id, next.span.startMs);
+ const node = buttons.current.get(next.span.id);
+ if (node !== undefined) node.focus();
+ }
+ return (
+ ,
+ id: string,
+ node: HTMLButtonElement | null,
+) {
+ if (node === null) buttons.delete(id);
+ else buttons.set(id, node);
+}
+
+function keyDelta(key: string): number {
+ if (key === "ArrowDown") return 1;
+ if (key === "ArrowUp") return -1;
+ return 0;
+}
+
+function metaLine(trace: Trace): string {
+ const parts: string[] = [];
+ if (trace.actor.length > 0) parts.push(trace.actor);
+ parts.push(STATUS_LABEL[trace.status]);
+ parts.push(formatDuration(trace.durationMs));
+ return parts.join(" · ");
+}
+
+function sameText(left: string | undefined, right: string): boolean {
+ if (left === undefined) return false;
+ return left === right.trim();
+}
+
+function textOf(value: string | undefined): string | undefined {
+ if (value === undefined) return undefined;
+ const text = value.trim();
+ if (text.length === 0) return undefined;
+ return text;
+}
diff --git a/src/hooks/use-attachments.test.ts b/src/hooks/use-attachments.test.ts
new file mode 100644
index 00000000..da58b3c0
--- /dev/null
+++ b/src/hooks/use-attachments.test.ts
@@ -0,0 +1,377 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import {
+ Activity,
+ StrictMode,
+ Suspense,
+ act,
+ createElement,
+ startTransition,
+ use,
+ useState,
+} from "react";
+import { createRoot } from "react-dom/client";
+
+import type { PartFile } from "../lib/conversation.js";
+import type { AttachmentData } from "../ui/attachments.js";
+import {
+ useAttachments,
+ type AttachmentItem,
+ type UseAttachmentsResult,
+} from "./use-attachments.js";
+
+// What the parts render must take what the hook makes and what a message
+// carries, with no mapping in between.
+const fromHook: (item: AttachmentItem) => AttachmentData = (item) => item;
+const fromMessage: (part: PartFile) => AttachmentData = (part) => part;
+void fromHook;
+void fromMessage;
+
+let created: string[] = [];
+let revoked: string[] = [];
+const realCreate = URL.createObjectURL;
+const realRevoke = URL.revokeObjectURL;
+
+beforeEach(() => {
+ created = [];
+ revoked = [];
+ URL.createObjectURL = () => {
+ const url = `blob:test/${created.length + 1}`;
+ created.push(url);
+ return url;
+ };
+ URL.revokeObjectURL = (url: string) => {
+ revoked.push(url);
+ };
+});
+
+afterEach(() => {
+ URL.createObjectURL = realCreate;
+ URL.revokeObjectURL = realRevoke;
+});
+
+function file(name: string, size = 4, type = "text/plain"): File {
+ return new File(["x".repeat(size)], name, { type });
+}
+
+/** Lets the hook's deferred unmount revoke run. */
+function microtasks(): Promise {
+ return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+type Options = {
+ readonly maxFiles?: number;
+ readonly maxFileBytes?: number;
+ readonly strict?: boolean;
+ readonly initial?: readonly AttachmentItem[];
+};
+
+/** A host that owns the list, as a composer would. */
+function mountHost({ strict = false, initial = [], ...limits }: Options = {}) {
+ const container = document.createElement("div");
+ document.body.appendChild(container);
+ const root = createRoot(container);
+ let hook: UseAttachmentsResult | undefined;
+ let list: readonly AttachmentItem[] = [];
+ let setList: (next: readonly AttachmentItem[]) => void = () => {};
+ let setHidden: (hidden: boolean) => void = () => {};
+
+ function Host() {
+ const [attachments, setAttachments] =
+ useState(initial);
+ list = attachments;
+ setList = setAttachments;
+ hook = useAttachments({ attachments, ...limits });
+ return null;
+ }
+
+ /** Hiding runs the hook's effect cleanups; showing runs them again. */
+ function Shell() {
+ const [hidden, setShellHidden] = useState(false);
+ setHidden = setShellHidden;
+ return createElement(Activity, {
+ mode: hidden ? "hidden" : "visible",
+ children: createElement(Host),
+ });
+ }
+
+ act(() => {
+ root.render(
+ strict
+ ? createElement(StrictMode, null, createElement(Shell))
+ : createElement(Shell),
+ );
+ });
+
+ const api = () => {
+ if (hook === undefined) throw new Error("the hook did not render");
+ return hook;
+ };
+
+ return {
+ get list() {
+ return list;
+ },
+ /** Adds and appends what was accepted, in one update. */
+ drop(files: readonly File[]) {
+ let result: ReturnType | undefined;
+ act(() => {
+ result = api().add(files);
+ const accepted = result.accepted;
+ setList([...list, ...accepted]);
+ });
+ if (result === undefined) throw new Error("add returned nothing");
+ return result;
+ },
+ add(files: readonly File[]) {
+ return api().add(files);
+ },
+ release(ids: readonly string[]) {
+ api().release(ids);
+ },
+ set(next: readonly AttachmentItem[]) {
+ act(() => setList(next));
+ },
+ rerender() {
+ act(() => setList([...list]));
+ },
+ /**
+ * Runs the hook's effect cleanups and then its setups again before any
+ * microtask can run, as Fast Refresh or an effect replay does.
+ */
+ replayEffects() {
+ act(() => setHidden(true));
+ act(() => setHidden(false));
+ },
+ /** Hides the hook in its `Activity` for longer than a tick, then shows it. */
+ async hideAndShow() {
+ act(() => setHidden(true));
+ await act(microtasks);
+ act(() => setHidden(false));
+ await act(microtasks);
+ },
+ unmount() {
+ act(() => root.unmount());
+ container.remove();
+ },
+ };
+}
+
+describe("useAttachments", () => {
+ test("refused files carry a reason; accepted ones a preview URL", () => {
+ const host = mountHost({ maxFiles: 2, maxFileBytes: 10 });
+ const big = file("big.png", 20, "image/png");
+ const notes = file("notes.txt");
+ const again = file("notes.txt");
+ const plan = file("plan.md");
+ const extra = file("extra.md");
+ const { accepted, rejected } = host.drop([big, notes, again, plan, extra]);
+
+ expect(accepted.map((item) => item.name)).toEqual(["notes.txt", "plan.md"]);
+ expect(accepted.map((item) => item.file)).toEqual([notes, plan]);
+ expect(accepted.map((item) => item.url)).toEqual(created);
+ expect(new Set(accepted.map((item) => item.id)).size).toBe(2);
+ expect(rejected).toEqual([
+ { file: big, reason: "too-large" },
+ { file: again, reason: "duplicate" },
+ { file: extra, reason: "too-many" },
+ ]);
+ expect(host.list).toEqual(accepted);
+ host.unmount();
+ });
+
+ test("a file with no type is a generic binary", () => {
+ const host = mountHost();
+ const [item] = host.drop([new File(["abc"], "archive.bin")]).accepted;
+ expect(item?.mediaType).toBe("application/octet-stream");
+ expect(item?.size).toBe(3);
+ host.unmount();
+ });
+
+ test("a nameless file is checked as the Untitled it is held as", () => {
+ const host = mountHost();
+ const [item] = host.drop([file("")]).accepted;
+ if (item === undefined) throw new Error("missing");
+ expect(item.name).toBe("Untitled");
+
+ const nameless = file("");
+ const named = file("Untitled");
+ expect(host.drop([nameless]).rejected).toEqual([
+ { file: nameless, reason: "duplicate" },
+ ]);
+ expect(host.drop([named]).rejected).toEqual([
+ { file: named, reason: "duplicate" },
+ ]);
+ expect(host.list).toEqual([item]);
+ host.unmount();
+ });
+
+ test("two adds before the list updates still respect the limits", () => {
+ const host = mountHost({ maxFiles: 2 });
+ let second: ReturnType | undefined;
+ act(() => {
+ host.add([file("a.txt")]);
+ second = host.add([file("a.txt"), file("b.txt"), file("c.txt")]);
+ });
+ expect(second?.accepted.map((item) => item.name)).toEqual(["b.txt"]);
+ expect(second?.rejected.map((rejection) => rejection.reason)).toEqual([
+ "duplicate",
+ "too-many",
+ ]);
+ host.unmount();
+ });
+
+ // A transition that suspends renders the new list but keeps the old one
+ // on screen until it resolves, here never.
+ test("a list rendered but not yet committed is not checked against", async () => {
+ const container = document.createElement("div");
+ document.body.appendChild(container);
+ const root = createRoot(container);
+ const never = new Promise(() => {});
+ let hook: UseAttachmentsResult | undefined;
+ let show: (list: readonly AttachmentItem[]) => void = () => {};
+
+ function Stall(): null {
+ use(never);
+ return null;
+ }
+
+ function Host() {
+ const [shown, setShown] = useState<{
+ readonly list: readonly AttachmentItem[];
+ readonly stall: boolean;
+ }>({ list: [], stall: false });
+ show = (list) => setShown({ list, stall: true });
+ hook = useAttachments({ attachments: shown.list, maxFiles: 1 });
+ return shown.stall ? createElement(Stall) : null;
+ }
+
+ act(() => {
+ root.render(
+ createElement(Suspense, { fallback: null }, createElement(Host)),
+ );
+ });
+ const held: AttachmentItem = {
+ id: "held-1",
+ name: "a.txt",
+ mediaType: "text/plain",
+ size: 4,
+ };
+ await act(async () => {
+ startTransition(() => show([held]));
+ });
+
+ const { accepted, rejected } = hook?.add([file("a.txt")]) ?? {};
+ expect(rejected).toEqual([]);
+ expect(accepted?.map((item) => item.name)).toEqual(["a.txt"]);
+ act(() => root.unmount());
+ container.remove();
+ });
+
+ test("removing an attachment revokes its preview URL and only its", () => {
+ const host = mountHost();
+ const [first, second] = host.drop([file("a.txt"), file("b.txt")]).accepted;
+ if (first === undefined || second === undefined) throw new Error("missing");
+ expect(revoked).toEqual([]);
+
+ host.set([second]);
+ expect(revoked).toEqual([first.url ?? ""]);
+
+ host.set([]);
+ expect(revoked).toEqual([first.url ?? "", second.url ?? ""]);
+ host.unmount();
+ });
+
+ test("an accepted file the host never appended is revoked and can come back", () => {
+ const host = mountHost();
+ act(() => {
+ host.add([file("a.txt")]);
+ });
+ host.rerender();
+ expect(revoked).toEqual(created);
+
+ const { accepted, rejected } = host.drop([file("a.txt")]);
+ expect(rejected).toEqual([]);
+ expect(accepted).toHaveLength(1);
+ host.unmount();
+ });
+
+ test("a released attachment keeps its URL after it leaves the list", async () => {
+ const host = mountHost();
+ const sent = host.drop([file("a.txt"), file("b.txt")]).accepted;
+ host.release(sent.map((item) => item.id));
+ host.set([]);
+ host.unmount();
+ await microtasks();
+ expect(revoked).toEqual([]);
+ });
+
+ test("unmounting revokes every URL still held", async () => {
+ const host = mountHost();
+ host.drop([file("a.txt"), file("b.txt")]);
+ host.unmount();
+ await microtasks();
+ expect([...revoked].sort()).toEqual([...created].sort());
+ });
+
+ // A drop still being read, or any other late caller.
+ test("an add after unmounting makes no preview URL", async () => {
+ const host = mountHost();
+ host.unmount();
+ await microtasks();
+ const [item] = host.add([file("a.txt")]).accepted;
+ expect(item?.url).toBeUndefined();
+ expect(item?.file).toBeInstanceOf(File);
+ expect(created).toEqual([]);
+ });
+
+ // StrictMode replays effects only at mount, before any URL is made, so
+ // the replay here comes after: the effects are torn down and set up again
+ // while the previews are on screen.
+ test("an effect replay while previews are held revokes nothing", async () => {
+ const host = mountHost({ strict: true });
+ host.drop([file("a.txt"), file("b.txt")]);
+ expect(created).toHaveLength(2);
+
+ host.replayEffects();
+ await microtasks();
+ expect(revoked).toEqual([]);
+
+ host.unmount();
+ await microtasks();
+ expect([...revoked].sort()).toEqual([...created].sort());
+ });
+
+ // Nothing tells a hide from an unmount, so the previews go and the held
+ // items keep their dead URLs; `Attachment` rebuilds the pictures from
+ // `file` (see attachments.test.tsx).
+ test("a hide longer than a tick revokes the held previews", async () => {
+ const host = mountHost();
+ const [item] = host.drop([file("a.png", 4, "image/png")]).accepted;
+ if (item === undefined) throw new Error("missing");
+
+ await host.hideAndShow();
+ expect(revoked).toEqual([item.url ?? ""]);
+ expect(host.list).toEqual([item]);
+ expect(host.list[0]?.file).toBeInstanceOf(File);
+ host.unmount();
+ });
+
+ test("the host's own URLs are never revoked", async () => {
+ const uploaded: AttachmentItem = {
+ id: "uploaded-1",
+ name: "report.pdf",
+ mediaType: "application/pdf",
+ size: 2048,
+ url: "https://files.example.com/report.pdf",
+ };
+ const host = mountHost({ initial: [uploaded] });
+ const { rejected } = host.drop([file("report.pdf", 2048)]);
+ expect(rejected.map((rejection) => rejection.reason)).toEqual([
+ "duplicate",
+ ]);
+ host.set([]);
+ host.unmount();
+ await microtasks();
+ expect(revoked).toEqual([]);
+ });
+});
diff --git a/src/hooks/use-attachments.ts b/src/hooks/use-attachments.ts
new file mode 100644
index 00000000..ab6adee3
--- /dev/null
+++ b/src/hooks/use-attachments.ts
@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+import {
+ checkAttachments,
+ type AttachmentLimits,
+ type AttachmentRejection,
+} from "../lib/attachment-limits.js";
+
+/** A file waiting to be sent, as the host holds it. */
+export type AttachmentItem = {
+ readonly id: string;
+ readonly name: string;
+ readonly mediaType: string;
+ /** In bytes. */
+ readonly size: number;
+ /** Where the bytes are: a preview URL `useAttachments` made, or the host's own. */
+ readonly url?: string;
+ /** The local file, for the host to upload or send. */
+ readonly file?: File;
+};
+
+export type UseAttachmentsOptions = AttachmentLimits & {
+ /** The attachments the host holds now. */
+ readonly attachments: readonly AttachmentItem[];
+};
+
+export type AttachmentIntake = {
+ /** New attachments, each with a preview URL, to append to the host's list. */
+ readonly accepted: readonly AttachmentItem[];
+ /** Files left out, each with why. */
+ readonly rejected: readonly AttachmentRejection[];
+};
+
+export type UseAttachmentsResult = {
+ /** Checks `files` against the limits and the attachments already held. */
+ readonly add: (files: Iterable | ArrayLike) => AttachmentIntake;
+ /**
+ * Hands the preview URLs of `ids` over to the host: the hook stops
+ * tracking them and never revokes them. Call it before moving attachments
+ * out of the list somewhere they are still shown, such as a sent message;
+ * revoking them is then the host's job.
+ */
+ readonly release: (ids: Iterable) => void;
+};
+
+let lastAttachmentId = 0;
+
+/** The name a file is held under. */
+function nameOf(file: File): string {
+ return file.name === "" ? "Untitled" : file.name;
+}
+
+function nextAttachmentId(): string {
+ lastAttachmentId += 1;
+ return `attachment-${lastAttachmentId}`;
+}
+
+/**
+ * Takes files into a host-owned attachment list.
+ *
+ * `add` runs `checkAttachments` against the list (and anything it accepted
+ * since the list last changed, so two drops in one tick cannot both slip
+ * past a limit) and gives each accepted file an object URL for its preview.
+ * The host appends `accepted` to its list in the same update and decides
+ * what to say about `rejected`.
+ *
+ * Every URL the hook makes is revoked at the first commit whose list does
+ * not hold its attachment: once the host removes it, however it does, or
+ * right away if the host never appended it. The rest go when the hook
+ * unmounts, and an `add` after that makes no URL; `Attachment` shows such an
+ * item's picture from its `file`. Only URLs the hook made are revoked; the
+ * host's own are left alone. To keep an attachment on screen after it leaves
+ * the list (sending moves it into a message), `release` it first.
+ *
+ * The unmount revoke waits a microtask and is called off if the hook mounts
+ * again, which is what StrictMode's simulated remount does within one
+ * commit. A hook hidden by `` for longer than that
+ * counts as unmounted: its previews are revoked, and once it shows again
+ * the attachments still held keep URLs that no longer load. `Attachment`
+ * rebuilds their pictures from `file`. Anything else that reads `url`
+ * after such a hide, such as a viewer opened from `AttachmentPreview`'s
+ * `onOpen`, should make its own URL from `file`, or the hook should sit
+ * above the `Activity`.
+ */
+export function useAttachments({
+ attachments,
+ maxFiles,
+ maxFileBytes,
+}: UseAttachmentsOptions): UseAttachmentsResult {
+ const urls = useRef(new Map());
+ const pending = useRef([]);
+ // The committed list and limits, for `add`: a render that never commits,
+ // such as a transition that suspends, must not leave its list here.
+ const latest = useRef({ attachments, maxFiles, maxFileBytes });
+ useLayoutEffect(() => {
+ latest.current = { attachments, maxFiles, maxFileBytes };
+ });
+ // True until the hook unmounts, so an `add` before its effects run still
+ // makes a URL.
+ const mounted = useRef(true);
+
+ // After every commit, not only when the list changes: an accepted file the
+ // host did not append must neither keep its URL nor count as a duplicate
+ // of the same file dropped again.
+ useEffect(() => {
+ pending.current = [];
+ const held = new Set(attachments.map((item) => item.id));
+ for (const [id, url] of urls.current) {
+ if (held.has(id)) continue;
+ URL.revokeObjectURL(url);
+ urls.current.delete(id);
+ }
+ });
+
+ useEffect(() => {
+ mounted.current = true;
+ const owned = urls.current;
+ return () => {
+ mounted.current = false;
+ queueMicrotask(() => {
+ if (mounted.current) return;
+ for (const url of owned.values()) URL.revokeObjectURL(url);
+ owned.clear();
+ });
+ };
+ }, []);
+
+ const add = useCallback((files: Iterable | ArrayLike) => {
+ const {
+ attachments: held,
+ maxFiles: max,
+ maxFileBytes: maxBytes,
+ } = latest.current;
+ const limits: AttachmentLimits = {
+ ...(max === undefined ? {} : { maxFiles: max }),
+ ...(maxBytes === undefined ? {} : { maxFileBytes: maxBytes }),
+ };
+ // Checked under the name each file will be held under, so a nameless
+ // file is a duplicate of the "Untitled" one already held.
+ const { accepted, rejected } = checkAttachments(
+ [...held, ...pending.current],
+ Array.from(files, (file) => ({
+ name: nameOf(file),
+ size: file.size,
+ file,
+ })),
+ limits,
+ );
+ const items = accepted.map(({ name, file }): AttachmentItem => {
+ const id = nextAttachmentId();
+ const item = {
+ id,
+ name,
+ mediaType: file.type === "" ? "application/octet-stream" : file.type,
+ size: file.size,
+ file,
+ };
+ // Past unmount nothing would revoke it.
+ if (!mounted.current) return item;
+ const url = URL.createObjectURL(file);
+ urls.current.set(id, url);
+ return { ...item, url };
+ });
+ pending.current = [...pending.current, ...items];
+ return {
+ accepted: items,
+ rejected: rejected.map(({ file, reason }) => ({
+ file: file.file,
+ reason,
+ })),
+ };
+ }, []);
+
+ const release = useCallback((ids: Iterable) => {
+ for (const id of ids) urls.current.delete(id);
+ }, []);
+
+ return { add, release };
+}
diff --git a/src/hooks/use-chat-dock.ts b/src/hooks/use-chat-dock.ts
deleted file mode 100644
index e5398bef..00000000
--- a/src/hooks/use-chat-dock.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/**
- * The three ways the dock can occupy the screen. `docked` and `fullpage` are
- * both "open" — the difference is size and position only, never a remount —
- * so the transition between them is a plain CSS transition on one element.
- */
-export type ChatDockMode = "closed" | "docked" | "fullpage";
-
-/**
- * Elements whose own Escape handling should win over the dock's step-down —
- * a `
{brand}
+
+ {brand}
+
)}
{children}
-
diff --git a/src/blocks/login/login-form.test.tsx b/src/blocks/login/login-form.test.tsx
new file mode 100644
index 00000000..a68ece28
--- /dev/null
+++ b/src/blocks/login/login-form.test.tsx
@@ -0,0 +1,130 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, test } from "bun:test";
+
+import { LoginForm } from "./login-form.js";
+
+type Mounted = {
+ container: HTMLElement;
+ unmount: () => void;
+};
+
+function render(node: React.ReactElement): Mounted {
+ const container = document.createElement("div");
+ document.body.appendChild(container);
+ let root!: Root;
+ act(() => {
+ root = createRoot(container);
+ root.render(node);
+ });
+ return {
+ container,
+ unmount: () => {
+ act(() => root.unmount());
+ container.remove();
+ },
+ };
+}
+
+describe("LoginForm default (sign-in) mode", () => {
+ test("has no name field and password uses current-password", () => {
+ const mounted = render(
+ {panel}
{aside === undefined ? null : (
-
{aside}
+
+ {aside}
+
)}
-
);
}
diff --git a/src/blocks/observability/app.tsx b/src/blocks/observability/app.tsx
new file mode 100644
index 00000000..0d899cd7
--- /dev/null
+++ b/src/blocks/observability/app.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { Button } from "../../ui/button.js";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "../../ui/dialog.js";
+import { EmptyState } from "../../ui/empty-state.js";
+import { Input } from "../../ui/input.js";
+import type {
+ SeriesPoint,
+ SessionSummary,
+ Trace,
+} from "../../ui/observability/model.js";
+import { RunList } from "../../ui/observability/elements.js";
+import { Observations } from "../../ui/observability/observations.js";
+import { WeekOverview } from "../../ui/observability/overview.js";
+import { AuditRun } from "./audit-run.js";
+
+export type ObservabilityAppProps = {
+ readonly sessions: readonly SessionSummary[];
+ readonly traces: Readonly{heading}
++ {heading} +
{error === null ? null : ({ event.preventDefault(); - onSubmit({ email, password }); + onSubmit( + isSignUp ? { name, email, password } : { email, password }, + ); }} > + {!isSignUp ? null : ( + + )} )} @@ -128,7 +162,9 @@ export function LoginForm({ {onSubmit === undefined || providers.length === 0 ? null : (
- or
+
+ or
+
)}
@@ -147,7 +183,9 @@ export function LoginForm({
))}
- {footer === undefined ? null : {footer}
}
+ {footer === undefined ? null : (
+ {footer}
+ )}
+
+
+ {screen === "week" ? (
+ setScreen("runs")}
+ />
+ ) : null}
+ {screen === "runs" ? (
+
+ {
+ const run = traces[session.id];
+ return run === undefined ? [] : [run];
+ })}
+ onOpen={(id) => openTrace(id)}
+ />
+ )}
+
+ ) : null}
+ {screen === "steps" ? (
+ openTrace(traceId, spanId)}
+ />
+ ) : null}
+ {screen === "run" ? (
+ trace === undefined ? (
+
+ {adding ? (
+ setAdding(false)}
+ onMint={(name) => {
+ const slug = name
+ .trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-|-$/g, "");
+ setToken(`obs_${slug}_${Math.random().toString(36).slice(2, 10)}`);
+ }}
+ />
+ ) : null}
+
+ );
+}
+
+function NavButton({
+ current,
+ onClick,
+ children,
+}: {
+ current: boolean;
+ onClick: () => void;
+ children: string;
+}) {
+ return (
+
+ );
+}
+
+function AddAgent({
+ token,
+ onClose,
+ onMint,
+}: {
+ token: string | null;
+ onClose: () => void;
+ onMint: (name: string) => void;
+}) {
+ const [name, setName] = useState("editor");
+ const label = name.trim();
+ return (
+
+ );
+}
diff --git a/src/blocks/observability/audit-run.tsx b/src/blocks/observability/audit-run.tsx
new file mode 100644
index 00000000..85c5f3f3
--- /dev/null
+++ b/src/blocks/observability/audit-run.tsx
@@ -0,0 +1,92 @@
+import {
+ Brief,
+ Compaction,
+ ContextTransform,
+ Grant,
+ Input,
+ Network,
+ Output,
+ Payload,
+ Sidecar,
+ Signal,
+ Thinking,
+ Tool,
+ ToolResultTransform,
+} from "../../ui/observability/elements.js";
+import { TimingBreakdown } from "../../ui/observability/elements.js";
+import type { Trace } from "../../ui/observability/model.js";
+import { TraceHeader } from "../../ui/observability/trace-header.js";
+import { Timing, TraceSteps } from "../../ui/observability/trace-steps.js";
+import { Run } from "../../ui/observability/trace-view.js";
+import { TraceTimeline } from "../../ui/observability/timeline.js";
+
+export function AuditRun({
+ trace,
+ focusSpan,
+}: {
+ readonly trace: Trace;
+ readonly focusSpan?: string;
+}) {
+ return (
+
+
+ {visible.length === 0 ? (
+ Runs
+ setQuery(event.target.value)} + className="max-w-xs" + /> +
+
+ )
+ ) : null}
+
+
+
+
+
+
+ (
+
+
+ )}
+ {label}
++ {children} +
+
+ {placed.map((row, index) => (
+ select(row.span.id, row.span.startMs)}
+ buttonRef={(node) => storeButton(buttons.current, row.span.id, node)}
+ />
+ ))}
+
+ );
+}
+
+function StepRow({
+ span,
+ depth,
+ open,
+ tabIndex,
+ onSelect,
+ buttonRef,
+}: {
+ readonly span: Span;
+ readonly depth: number;
+ readonly open: boolean;
+ readonly tabIndex: number;
+ readonly onSelect: () => void;
+ readonly buttonRef: (node: HTMLButtonElement | null) => void;
+}) {
+ return (
+
+
+ {open ?
+ );
+}
+
+function StepBody({
+ span,
+ depth,
+}: {
+ readonly span: Span;
+ readonly depth: number;
+}) {
+ if (
+ span.input === undefined &&
+ span.output === undefined &&
+ span.thinking === undefined &&
+ span.redacted !== true
+ ) {
+ return null;
+ }
+ return (
+
+
+ );
+}
+
+function focusedStep(
+ target: EventTarget | null,
+ placed: readonly PlacedSpan[],
+): string | undefined {
+ if (!(target instanceof Element)) return undefined;
+ const button = target.closest("button");
+ if (button === null) return undefined;
+ const found = placed.some((row) => row.span.id === button.id);
+ if (!found) return undefined;
+ return button.id;
+}
+
+function neighbor(
+ placed: readonly PlacedSpan[],
+ fromId: string,
+ delta: number,
+): PlacedSpan | undefined {
+ const current = placed.findIndex((row) => row.span.id === fromId);
+ if (current < 0) return undefined;
+ return placed[current + delta];
+}
+
+function stepTab(
+ id: string,
+ selectedId: string | undefined,
+ index: number,
+): number {
+ if (selectedId === undefined) return index === 0 ? 0 : -1;
+ return id === selectedId ? 0 : -1;
+}
+
+function storeButton(
+ buttons: Map