@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/ports.d.ts

@@ -0,0 +1,222 @@
+import type { AssetRef, CollaborationSubscriptionHandlers, CommandResponse, DayUsageResponse, ImageVariant, IngestProgress, MetaSubscriptionHandlers, SearchBuildProgress, SearchReadiness, SearchResponse, SessionSubscriptionHandlers, TimelineEntry, TimelineMetaPlanSource, TimelinePage, UsageResponse } from "@vibefield/rosetta-protocol";
+import type { ProjectStats } from "./lib/model.js";
+/** A live subscription the room can end. */
+export interface Closable {
+    close(): void;
+}
+/** The index's own state, as the room reads it. */
+export interface CatalogStatus {
+    /** Canonical publication: the cross-session figures are served. */
+    readonly canonicalReady: boolean;
+    readonly searchReadiness: SearchReadiness;
+    readonly searchProgress: SearchBuildProgress | null;
+    /** The cold-start board; null from an index that keeps none. */
+    readonly ingest: IngestProgress | null;
+    readonly startedAt: number | null;
+    readonly uptimeMs: number;
+}
+/** The window the figures are folded over: since when, in which timezone. */
+export interface FigureWindow {
+    readonly sinceMs: number;
+    readonly offsetMinutes: number;
+}
+/** One settled search, as the room's sheet asks it. */
+export interface CatalogSearch {
+    readonly q: string;
+    readonly limit: number;
+    readonly project: string | null;
+    readonly kind: string | null;
+    readonly agent: string | null;
+}
+/**
+ * The index's catalog: who and what exists, the figures a panel draws,
+ * search, and the index's own state — never a transcript body.
+ *
+ * A project's sessions and the unassigned pseudo-project are the room's own
+ * reading of the meta rows; a session's facts (tokens, messages, cost) are
+ * its row in its project's `contribution`.
+ */
+export interface CatalogPort {
+    /** Runtimes, projects and every session row, live: one snapshot, then
+     * mutations. */
+    subscribeMeta(handlers: MetaSubscriptionHandlers): Closable;
+    /** Liveness, publication, search readiness and the cold-start board.
+     * Rejects when the index cannot answer. */
+    status(signal?: AbortSignal): Promise<CatalogStatus>;
+    /** Fires when the host's route to the index changes; the room re-asks status. */
+    onConnectionChange?(listener: () => void): () => void;
+    /** The host's own sentence for why the index cannot answer, or null. */
+    unavailable?(): string | null;
+    /** One project's per-day heat over the window, and its sessions' facts. */
+    projectStats(projectId: string, window: FigureWindow, signal?: AbortSignal): Promise<ProjectStats>;
+    /** Every listed project's figures in one ask, for a host whose figures
+     * fan out per call or that already holds them. Optional: present, the
+     * room asks this once per refresh instead of `projectStats` per project;
+     * a project missing from the answer counts as failed and is asked again. */
+    projectStatsBatch?(projectIds: readonly string[], window: FigureWindow, signal?: AbortSignal): Promise<ReadonlyMap<string, ProjectStats>>;
+    /** The selected project's usage by model and hour over the same window. */
+    usage(projectId: string, window: FigureWindow, signal?: AbortSignal): Promise<UsageResponse>;
+    /** One day of that project, hour by hour. */
+    dayUsage(projectId: string, day: string, offsetMinutes: number, signal?: AbortSignal): Promise<DayUsageResponse>;
+    search(request: CatalogSearch, signal?: AbortSignal): Promise<SearchResponse>;
+    /** Advisory: read this still-queued session next. Optional — a grant never
+     * opens a write, so only a host that holds the daemon's bearer offers it;
+     * without it the index keeps its own order. */
+    boost?(sessionId: string, signal?: AbortSignal): Promise<unknown>;
+}
+/** One session's live transcript, as the room reads it. */
+export interface SessionFeed extends Closable {
+    entries(): TimelineEntry[];
+    fetchPage(cursor: string, limit?: number, signal?: AbortSignal): Promise<TimelinePage>;
+    reveal(entries: readonly TimelineEntry[]): void;
+    loadEntry(timelineId: string, signal?: AbortSignal): Promise<boolean>;
+}
+/** One team member's delivered conversation. */
+export interface CollaborationFeed extends Closable {
+    restart(): void;
+}
+/**
+ * What the room asks of ONE session: its live subscription and the reads that
+ * hang off its rows. A `RosettaClient` is one; a host whose daemon wants a
+ * per-session credential hands a client that carries it.
+ */
+export interface SessionClient {
+    subscribeSession(sessionId: string, handlers: SessionSubscriptionHandlers): SessionFeed;
+    subscribeCollaboration(sessionId: string, handlers: CollaborationSubscriptionHandlers): CollaborationFeed;
+    timelineEntry(sessionId: string, timelineId: string, signal?: AbortSignal): Promise<TimelineEntry>;
+    reportWork(sessionId: string, timelineId: string, signal?: AbortSignal): Promise<TimelineEntry[]>;
+    command(sessionId: string, timelineId: string, signal?: AbortSignal): Promise<CommandResponse>;
+    readFileTarget(sessionId: string, timelineId: string, targetIndex: number, signal?: AbortSignal): Promise<Uint8Array>;
+    readPlan(sessionId: string, source: TimelineMetaPlanSource, signal?: AbortSignal): Promise<Uint8Array>;
+    readTextAsset(asset: AssetRef, signal?: AbortSignal): Promise<string>;
+    readAsset(asset: AssetRef, signal?: AbortSignal): Promise<Uint8Array>;
+}
+/**
+ * Opens one session's body. The room opens a session at most once at a time
+ * and follows every `open` with exactly one `close`, when nothing in the room
+ * reads that session any more. `open` may answer at once or with a promise
+ * (a host that must ask for a credential first).
+ */
+export interface SessionPort {
+    open(sessionId: string): SessionClient | PromiseLike<SessionClient>;
+    close(sessionId: string): void;
+}
+/** One checkout of the repository a root belongs to. */
+export interface GitWorktree {
+    readonly path: string;
+    /** Absent on a detached HEAD. */
+    readonly branch: string | null;
+}
+/** Read-only git facts for one root. Every field is nullable because a folder
+ * without a repository is a fact, not a failure: the room says less rather
+ * than something untrue. */
+export interface GitFacts {
+    readonly branch: string | null;
+    readonly dirty: number | null;
+    readonly worktrees: readonly GitWorktree[];
+}
+/** An accepted request to start a new worktree engine generation. */
+export type WorktreeOpenResult = {
+    readonly ok: true;
+    readonly generation: number;
+} | {
+    readonly ok: false;
+    readonly error: string;
+};
+export interface WorktreeFileActionRequest {
+    readonly root: string;
+    readonly generation: number;
+    readonly action: "copyPath" | "revealInFileManager";
+    /** POSIX paths below the displayed root; empty string names the root. */
+    readonly paths: readonly string[];
+}
+export type WorktreeFileActionResult = {
+    readonly ok: true;
+} | {
+    readonly ok: false;
+    readonly error: string;
+};
+/** What the host's worktree engine says, in the order it says it: a
+ * generation starting or failing, and — once it is up — the two transferred
+ * ports for the tree (mille's) and git. A port is a one-owner capability:
+ * the room is its only consumer. */
+export type WorktreeHostEvent = {
+    readonly type: "ports";
+    readonly root: string;
+    readonly generation: number;
+    readonly treePort: MessagePort;
+    readonly gitPort: MessagePort;
+} | {
+    readonly type: "status";
+    readonly root: string;
+    readonly generation: number;
+    readonly state: "starting" | "error";
+    readonly message?: string;
+};
+/** The worktree guest's engine, which only a desktop host can run. */
+export interface WorktreeHostPort {
+    /** Point the engine at a project root. Each accepted request starts a fresh
+     * generation, including an explicit retry of the same root. */
+    open(root: string): Promise<WorktreeOpenResult>;
+    /** Branch · dirty count · worktrees for the open root, or null when the
+     * folder is not a repository. */
+    gitFacts(root: string, generation: number): Promise<GitFacts | null>;
+    /** Copy absolute path text or reveal one entry in the native file manager. */
+    fileAction(request: WorktreeFileActionRequest): Promise<WorktreeFileActionResult>;
+    /** The engine's events. A host replays what arrived before the room
+     * listened; the returned function stops listening. */
+    ports(listener: (event: WorktreeHostEvent) => void): () => void;
+}
+/** An installed browser offered by the host. The id is opaque to the room;
+ * executable paths and launch arguments stay inside the desktop host. */
+export interface InstalledBrowser {
+    readonly id: string;
+    readonly name: string;
+    readonly icon: string | null;
+}
+/** What the room asks a desktop. A browser tab has none, and the room says
+ * so: no worktree guest, a globe for every site icon, no "open in browser". */
+export interface HostPort {
+    /** The user's home directory, for writing paths as `~/…`; null when unknown. */
+    readonly homeDir: string | null;
+    /** The desktop's platform (`darwin`, …), for the names of its own acts. */
+    readonly platform: string | null;
+    /** Hand the exact HTML/SVG bytes to the chosen installed browser. Omitting
+     * the id retains the default-browser action for hosts without discovery. */
+    openInBrowser(name: string, bytes: Uint8Array, browserId?: string): Promise<boolean>;
+    /** Re-read installed browsers. Absent on hosts with only a default action. */
+    browsers?(): Promise<readonly InstalledBrowser[]>;
+    /** One site's own icon as an image URL, or null for every honest no — a
+     * refused host, no icon, a timeout. The room draws the globe for all. */
+    favicon(host: string): Promise<string | null>;
+    /** Absent: the worktree guest stays closed and says why. */
+    readonly worktree?: WorktreeHostPort | undefined;
+}
+/** An address an `<img>` can load: now, later, or not at all. */
+export type AssetUrl = string | null | PromiseLike<string | null>;
+/** Where every stored image and attachment is addressed. */
+export interface AssetSource {
+    /**
+     * One recorded image rendition's address, or null for the image's
+     * "could not load" face. A host whose daemon wants no credential answers
+     * the daemon's own URL (rosetta's app). A host whose daemon wants one cannot
+     * put it in an `<img src>`: it fetches the bytes through a session's client
+     * and answers an object URL — a promise while it fetches — bounding and
+     * revoking what it made. The room asks on every mount and every retry, so
+     * an evicted URL is asked for again, never reused, and a host must not
+     * keep a failure.
+     */
+    imageAssetUrl(asset: AssetRef, variant: ImageVariant): AssetUrl;
+    /** The address that names one stored attachment member, or null when the
+     * room should not offer it. The room uses it as the attachment's identity
+     * and to decide it can be opened; it never loads it. */
+    attachmentAssetUrl(asset: AssetRef): string | null;
+}
+/** Everything a host hands the room. */
+export interface RoomPorts {
+    readonly catalog: CatalogPort;
+    readonly sessions: SessionPort;
+    readonly assets: AssetSource;
+    /** Absent: a browser tab, which the room states rather than papers over. */
+    readonly host?: HostPort | null;
+}

package/dist/ports.js

@@ -0,0 +1,3 @@
+const rosettaClientIsASessionClient = true;
+void rosettaClientIsASessionClient;
+export {};

package/dist/room-context.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import type { AssetSource, CatalogPort, HostPort, RoomPorts } from "./ports.js";
+import type { SessionLeases } from "./lib/session-leases.js";
+import type { FaviconStore } from "./lib/transcript/favicons.js";
+import type { KeyValueStore, RoomStorage } from "./lib/room-storage.js";
+import type { TintDealer } from "./lib/tint.js";
+import type { FoldPreference } from "./components/transcript/fold-preference.js";
+/** The two faces the project panel's chart can open on. */
+export type SummaryTab = "activity" | "models";
+/** What a host decides about the room beyond its ports. */
+export interface RoomOptions {
+    /** The chart the project panel opens on (rosetta's app reads `?tab=`). */
+    readonly initialSummaryTab?: SummaryTab | undefined;
+    /** Where the room's dialogs and its sheet are portalled; the document's
+     * body when absent. */
+    readonly portalContainer?: HTMLElement | null | undefined;
+    /** Every name the room stores goes under this prefix. Default `ah.`. */
+    readonly storagePrefix?: string | undefined;
+    /** The host's store: the browser's localStorage when absent; null keeps
+     * nothing across runs. */
+    readonly storage?: KeyValueStore | null | undefined;
+}
+/** How many of the room's dialogs are open: the root recedes while any is. */
+export interface OverlayCount {
+    hold(): () => void;
+    subscribe(listener: () => void): () => void;
+    count(): number;
+}
+export interface Room {
+    readonly catalog: CatalogPort;
+    readonly sessions: SessionLeases;
+    readonly assets: AssetSource;
+    readonly host: HostPort | null;
+    readonly initialSummaryTab: SummaryTab;
+    /** The room's site icons, asked of its host. */
+    readonly favicons: FaviconStore;
+    readonly portalContainer: HTMLElement | null;
+    readonly overlays: OverlayCount;
+    /** The host's store under the host's prefix. */
+    readonly storage: RoomStorage;
+    /** The room's project colours, dealt once each and remembered. */
+    readonly tints: TintDealer;
+    /** The room's fold: conversation or every run open. */
+    readonly fold: FoldPreference;
+}
+export declare function RoomProvider({ ports, options, children, }: {
+    readonly ports: RoomPorts;
+    readonly options?: RoomOptions;
+    readonly children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRoom(): Room;
+/** Mark the room's root while one of its dialogs is open. A part mounted
+ * outside any room (a harness) marks nothing. */
+export declare function useRoomOverlay(open: boolean): void;
+/** Whether any of the room's dialogs is open. */
+export declare function useRoomOverlayOpen(): boolean;
+/** Where the room portals its dialogs: the host's container, or the body. */
+export declare function useRoomPortal(): HTMLElement | undefined;
+export declare const ReadingSessionProvider: import("react").Provider<string | null>;
+export declare function useReadingSession(): string | null;

package/dist/room-context.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The ports, as the room's parts read them. `HistoryRoom` provides them; a
+// harness that mounts one column on its own wraps it in `RoomProvider`.
+import { createContext, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { createSessionLeases } from "./lib/session-leases.js";
+import { createFaviconStore } from "./lib/transcript/favicons.js";
+import { browserStorage, createRoomStorage, DEFAULT_STORAGE_PREFIX } from "./lib/room-storage.js";
+import { createTintDealer } from "./lib/tint.js";
+import { createFoldPreference } from "./components/transcript/fold-preference.js";
+function createOverlayCount() {
+    let open = 0;
+    const listeners = new Set();
+    const announce = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    return {
+        hold() {
+            open += 1;
+            announce();
+            let released = false;
+            return () => {
+                if (released)
+                    return;
+                released = true;
+                open -= 1;
+                announce();
+            };
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        count: () => open,
+    };
+}
+const RoomContext = createContext(null);
+export function RoomProvider({ ports, options = {}, children, }) {
+    const { catalog, sessions: sessionPort, assets } = ports;
+    const host = ports.host ?? null;
+    const initialSummaryTab = options.initialSummaryTab ?? "activity";
+    const portalContainer = options.portalContainer ?? null;
+    const prefix = options.storagePrefix ?? DEFAULT_STORAGE_PREFIX;
+    const backend = options.storage === undefined ? browserStorage() : options.storage;
+    const storage = useMemo(() => createRoomStorage(prefix, backend), [prefix, backend]);
+    const overlays = useMemo(createOverlayCount, []);
+    const sessions = useMemo(() => createSessionLeases(sessionPort), [sessionPort]);
+    const favicons = useMemo(() => createFaviconStore(host === null ? null : (site) => host.favicon(site), storage), [host, storage]);
+    const tints = useMemo(() => createTintDealer(storage), [storage]);
+    const fold = useMemo(() => createFoldPreference(storage), [storage]);
+    const room = useMemo(() => ({
+        catalog, sessions, assets, host, initialSummaryTab, favicons, portalContainer, overlays,
+        storage, tints, fold,
+    }), [catalog, sessions, assets, host, initialSummaryTab, favicons, portalContainer, overlays, storage, tints, fold]);
+    return _jsx(RoomContext.Provider, { value: room, children: children });
+}
+export function useRoom() {
+    const room = useContext(RoomContext);
+    if (room === null) {
+        throw new Error("The History room's parts read their ports from <HistoryRoom> or <RoomProvider>.");
+    }
+    return room;
+}
+/** Mark the room's root while one of its dialogs is open. A part mounted
+ * outside any room (a harness) marks nothing. */
+export function useRoomOverlay(open) {
+    const overlays = useContext(RoomContext)?.overlays ?? null;
+    useEffect(() => (open && overlays !== null ? overlays.hold() : undefined), [open, overlays]);
+}
+/** Whether any of the room's dialogs is open. */
+export function useRoomOverlayOpen() {
+    const { overlays } = useRoom();
+    return useSyncExternalStore(overlays.subscribe, () => overlays.count() > 0, () => false);
+}
+/** Where the room portals its dialogs: the host's container, or the body. */
+export function useRoomPortal() {
+    return useContext(RoomContext)?.portalContainer ?? undefined;
+}
+/** The session whose document is being read here. Reads that name no session
+ * of their own — a stored text member, an attachment's bytes — ride its client. */
+const ReadingSessionContext = createContext(null);
+export const ReadingSessionProvider = ReadingSessionContext.Provider;
+export function useReadingSession() {
+    return useContext(ReadingSessionContext);
+}

package/dist/styles/activity-chart.css

@@ -0,0 +1,127 @@
+/* The small calendar is one launch target. The cursor repeats the app's
+   fullscreen corners, with contrasting strokes that stay visible in both themes. */
+.ah-chart-launcher { position: relative; }
+.ah-chart-launcher--models { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ah-chart-launcher__button {
+  position: absolute; inset: 0; width: 100%; padding: 0;
+  border: 0; border-radius: 6px; background: transparent;
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 6H6v6M20 6h6v6M12 26H6v-6M20 26h6v-6' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6H6v6M20 6h6v6M12 26H6v-6M20 26h6v-6' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, zoom-in;
+}
+.ah-chart-launcher__button:disabled { cursor: default; }
+.ah-chart-launcher__button:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 4px; }
+.ah-chart-launcher__hint {
+  position: absolute; top: -3px; right: 0; display: flex; align-items: center; gap: 4px;
+  padding: 3px 6px; border-radius: 5px; background: var(--vf-chrome-solid);
+  color: var(--vf-text-secondary); font-size: 9px; opacity: 0;
+  transition: opacity 160ms ease; pointer-events: none;
+}
+.ah-chart-launcher__hint svg { width: 11px; height: 11px; }
+.ah-chart-launcher__button:not(:disabled):hover .ah-chart-launcher__hint,
+.ah-chart-launcher__button:focus-visible .ah-chart-launcher__hint { opacity: 1; }
+@media (hover: none) { .ah-chart-launcher__button:not(:disabled) .ah-chart-launcher__hint { opacity: 1; } }
+
+/* The calendar is a compact date picker; the hourly plot uses the remaining
+   dialog height. Overflow remains available as a fallback, never as clipping. */
+.ah-activity {
+  --activity-run-current: var(--vf-foreground);
+  --activity-run-best: color-mix(in srgb, var(--vf-foreground) 45%, var(--vf-chrome-solid));
+  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: 14px 16px; color: var(--vf-text-primary);
+}
+.ah-activity__calendar { flex: none; min-width: 0; }
+.ah-activity__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+.ah-activity h2 { margin: 0 0 3px; font-size: 15px; font-weight: 550; letter-spacing: -.02em; }
+.ah-activity__toolbar p, .ah-activity__dayhead p { margin: 0; font-size: 10px; line-height: 1.4; color: var(--vf-text-tertiary); }
+.ah-activity__calendar-nav, .ah-daychart__modelnav { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-activity__calendar-nav { flex: none; }
+.ah-activity__calendar-nav button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: var(--vf-fill); color: var(--vf-text-secondary); font: inherit; font-size: 12px; }
+.ah-activity__calendar-nav button:disabled, .ah-daychart__modelnav button:disabled { opacity: .3; cursor: default; }
+.ah-activity__calendar-scroll { min-width: 0; }
+.ah-activity__calendar-layout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; max-width: 100%; margin: 0 auto; }
+.ah-activity__weekdays { display: grid; grid-template-rows: repeat(7, 1fr); margin-top: 19px; margin-bottom: 21px; align-items: center; font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-activity .ah-calendar-heatmap { width: min(100%, calc(var(--activity-weeks) * 16px - 2px)); }
+.ah-activity .ah-calendar-heatmap__axis { margin: 0 0 5px; height: 14px; }
+.ah-activity .ah-calendar-heatmap__axis span { font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-activity .ah-calendar-heatmap__grid, .ah-activity .ah-calendar-heatmap__week { gap: 2px; }
+.ah-activity .ah-calendar-heatmap__cell { position: relative; border: 0; padding: 0; border-radius: 2px; min-height: 0; max-height: 14px; }
+.ah-activity .ah-calendar-heatmap__cell[data-run]::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 2px; border-radius: 1px; background: var(--activity-run-current); }
+.ah-activity .ah-calendar-heatmap__cell[data-run="best"]::after { background: var(--activity-run-best); }
+.ah-activity .ah-calendar-heatmap__cell[data-run="both"]::after { background: linear-gradient(90deg, var(--activity-run-current) 50%, var(--activity-run-best) 50%); }
+.ah-activity .ah-calendar-heatmap__cell[aria-pressed="true"] { outline: 2px solid var(--vf-foreground); outline-offset: 1px; }
+.ah-activity .ah-calendar-heatmap__cell:hover, .ah-activity .ah-calendar-heatmap__cell:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 1px; }
+.ah-activity .ah-calendar-heatmap__footer { width: var(--activity-footer-width); min-width: 0; margin-top: 8px; font-size: 9px; min-height: 13px; }
+.ah-activity .ah-calendar-heatmap__legend { gap: 3px; }
+.ah-activity .ah-calendar-heatmap__legend i { width: 8px; height: 8px; }
+.ah-activity__runs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 18px; margin-top: 8px; min-height: 24px; }
+.ah-activity__run { display: grid; grid-template-columns: 11px auto auto; align-items: center; gap: 5px; padding: 3px 0; border: 0; background: transparent; color: var(--vf-text-secondary); font: inherit; font-size: 10px; text-align: left; }
+.ah-activity__run > i { width: 9px; height: 3px; border-radius: 2px; background: var(--activity-run-current); }
+.ah-activity__run > i[data-kind="best"] { background: var(--activity-run-best); }
+.ah-activity__run > i[data-kind="both"] { background: linear-gradient(90deg, var(--activity-run-current) 50%, var(--activity-run-best) 50%); }
+.ah-activity__run b { font-weight: 500; margin-left: 3px; }
+.ah-activity__run small { font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-activity__run:hover span { text-decoration: underline; }
+.ah-activity__jump { margin-left: auto; display: flex; gap: 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: var(--vf-fill); color: var(--vf-text-secondary); font: inherit; font-size: 10px; text-align: left; }
+.ah-activity__jump span { color: var(--vf-text-tertiary); }
+.ah-activity__day { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vf-hairline); }
+.ah-activity__dayhead { flex: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
+.ah-activity__daynav { display: flex; gap: 5px; flex: none; }
+.ah-activity__daynav button, .ah-activity__empty button { border: 0; border-radius: 6px; background: var(--vf-fill); color: var(--vf-text-secondary); padding: 5px 8px; font: inherit; font-size: 12px; }
+.ah-activity__daynav button:disabled { opacity: .3; cursor: default; }
+.ah-activity__empty { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: var(--vf-text-tertiary); font-size: 11px; text-align: center; }
+.ah-activity__empty strong { font-weight: 500; color: var(--vf-text-secondary); }
+.ah-activity__updated { flex: none; margin: 4px 0 0; font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-daychart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ah-daychart__readout { flex: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; min-height: 14px; font-size: 10px; }
+.ah-daychart__readout strong { font-weight: 500; }
+.ah-daychart__readout span { color: var(--vf-text-tertiary); }
+.ah-daychart__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(146px, 20vw, 210px); grid-template-rows: minmax(0, 1fr); gap: 16px; }
+.ah-daychart__graph { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 20px 12px 21px 38px; position: relative; }
+.ah-daychart__unit { position: absolute; top: 0; left: 0; font-size: 9px; color: var(--vf-text-tertiary); cursor: help; }
+.ah-daychart__plot { flex: 1; position: relative; min-height: 80px; }
+.ah-daychart__gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--vf-hairline); }
+.ah-daychart__gridline > span { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: 9px; color: var(--vf-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ah-daychart__plot svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; cursor: crosshair; }
+.ah-daychart__area { opacity: .65; pointer-events: none; }
+.ah-daychart__glow { opacity: .2; filter: blur(3px); pointer-events: none; }
+.dark .ah-daychart__area { opacity: 1; }
+.dark .ah-daychart__glow { opacity: .4; }
+.ah-daychart__line, .ah-daychart__glow, .ah-daychart__pending { stroke-linecap: round; stroke-linejoin: round; }
+.ah-daychart__pending { stroke-dasharray: 3 6; opacity: .4; }
+.ah-daychart__point { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border: 2px solid var(--model-color); border-radius: 50%; background: var(--vf-chrome-solid); box-shadow: 0 0 8px color-mix(in srgb, var(--model-color) 45%, transparent); transform: translate(-50%, -50%); pointer-events: none; }
+.ah-daychart__peak { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--vf-text-faint); opacity: .5; }
+.ah-daychart__crosshair { stroke: var(--vf-text-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
+.ah-daychart__axis { position: relative; margin-top: 10px; font-size: 9px; color: var(--vf-text-tertiary); }
+.ah-daychart__axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+.ah-daychart__future { position: absolute; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--vf-fill)); pointer-events: none; }
+.ah-daychart__future-label { position: absolute; top: -20px; right: 0; max-width: calc(100% - 12px); text-align: right; font-size: 9px; color: var(--vf-text-tertiary); pointer-events: none; }
+.ah-daychart__legendhead { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 9px; line-height: 14px; color: var(--vf-text-tertiary); }
+.ah-daychart__models { min-width: 0; min-height: 0; }
+.ah-daychart__models > button { display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-rows: 13px 3px; gap: 4px 8px; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--vf-text-secondary); font: inherit; font-size: 10px; text-align: left; }
+.ah-daychart__models > button[aria-pressed="false"] { opacity: .4; }
+.ah-daychart__modelname { display: flex; align-items: center; gap: 5px; min-width: 0; }
+.ah-daychart__modelname > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--model-color); }
+.ah-daychart__modelname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ah-daychart__models b, .ah-daychart__models small { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
+.ah-daychart__models small { font-size: 8px; line-height: 3px; color: var(--vf-text-tertiary); }
+.ah-daychart__share { height: 3px; margin-left: 11px; background: var(--vf-fill); border-radius: 2px; align-self: center; overflow: hidden; }
+.ah-daychart__share > i { display: block; height: 100%; background: var(--model-color); border-radius: inherit; }
+.ah-daychart__modelnav { justify-content: flex-end; height: 22px; margin-top: 4px; }
+.ah-daychart__modelnav button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: var(--vf-fill); color: var(--vf-text-secondary); font: inherit; font-size: 12px; }
+.ah-activity button:focus-visible, .ah-daychart__plot svg:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 3px; }
+.ah-activity__jump:hover, .ah-activity__calendar-nav button:not(:disabled):hover, .ah-daychart__modelnav button:not(:disabled):hover, .ah-activity__daynav button:not(:disabled):hover, .ah-activity__empty button:hover { background: var(--vf-fill-hover); }
+@media (max-width: 760px) {
+  .ah-activity { padding: 12px; }
+  .ah-activity__toolbar { flex-wrap: wrap; gap: 8px; }
+  .ah-activity__runs { gap: 5px 12px; }
+  .ah-activity__run small { display: none; }
+  .ah-activity__jump { margin-left: 0; }
+  .ah-activity__dayhead h2 { font-size: 14px; }
+  .ah-daychart__body { gap: 12px; }
+}
+@media (max-width: 500px) {
+  .ah-daychart__body { grid-template-columns: minmax(0, 1fr) 126px; gap: 8px; }
+  .ah-daychart__graph { padding-left: 32px; padding-right: 10px; }
+  .ah-daychart__legendhead { font-size: 8px; gap: 4px; }
+  .ah-daychart__models > button { font-size: 9px; gap: 4px; grid-template-columns: minmax(0, 1fr) 30px; }
+  .ah-daychart__axis span:nth-child(2), .ah-daychart__axis span:nth-child(4) { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { .ah-chart-launcher__hint { transition: none; } }

package/dist/styles/attachments.css

@@ -0,0 +1,29 @@
+/* §06A: image strips sit below authored text and outside both activity folds. */
+.tr-prompt-message { min-width: 0; max-width: 100%; width: 100%; }
+.tr-attachments { container-type: inline-size; position: relative; margin-top: 10px; min-width: 0; max-width: 100%; }
+.tr-att { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px; margin: -4px; scroll-padding-inline: 4px; }
+.tr-att::-webkit-scrollbar { display: none; }
+.tr-att figure { flex: 0 0 144px; width: 144px; min-width: 0; margin: 0; }
+.tr-att__tile { display: grid; place-items: center; position: relative; width: 100%; aspect-ratio: 1; box-sizing: border-box; overflow: hidden; border-radius: 16px; background: var(--vf-fill); box-shadow: inset 0 0 0 1px var(--vf-hairline); }
+button.tr-att__tile { padding: 0; border: 0; color: inherit; cursor: pointer; appearance: none; }
+.tr-att__tile img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.tr-att__tile--missing, .tr-att__tile--loading { align-content: center; gap: 6px; padding: 12px; color: var(--vf-text-tertiary); font-size: 11px; line-height: 1.4; text-align: center; }
+.tr-att__tile--missing { border: 1px dashed var(--vf-hairline-strong); box-shadow: none; }
+.tr-att__tile--loading { color: var(--vf-text-faint); }
+.tr-att__retry { appearance: none; border: 0; padding: 3px 6px; background: transparent; color: var(--vf-text-secondary); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.tr-att__nav { position: absolute; top: calc(50% - 15px); width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--vf-hairline-strong); border-radius: 50%; background: var(--vf-chrome-solid); color: var(--vf-text-secondary); box-shadow: var(--vf-shadow-island); font: 24px/1 var(--vf-font-sans); padding: 0 0 2px; cursor: pointer; }
+.tr-att__nav[data-edge] { visibility: hidden; }
+.tr-att__nav[data-edge]:focus-visible { visibility: visible; opacity: 0.5; }
+.tr-att__nav--previous { left: 6px; }
+.tr-att__nav--next { right: 6px; }
+.tr-att__tile:focus-visible, .tr-att__nav:focus-visible, .tr-att__retry:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+@media (hover: hover) {
+  .tr-att__nav { opacity: 0; transition: opacity 120ms; }
+  .tr-attachments:hover .tr-att__nav, .tr-attachments:focus-within .tr-att__nav { opacity: 1; }
+  button.tr-att__tile:hover { outline: 1px solid var(--vf-hairline-strong); outline-offset: 2px; }
+}
+@media (prefers-reduced-motion: reduce) { .tr-att__nav { transition: none; } }
+@container (max-width: 440px) { .tr-att figure { flex-basis: 112px; width: 112px; } .tr-att { gap: 8px; } }
+@container (max-width: 300px) { .tr-att__tile--missing svg, .tr-att__tile--loading svg { display: none; } .tr-att__tile--missing, .tr-att__tile--loading { padding: 10px; } .tr-att figure { flex-basis: 96px; width: 96px; } .tr-att__tile { border-radius: 13px; } }
+.tr-ledger > .tr-attachments { margin-top: 8px; margin-bottom: 12px; }
+.tr-prompt-message + .tr-prompt-message:has(.tr-attachments), .tr-prompt-message:has(.tr-attachments) + .tr-prompt-message { margin-top: 8px; }

package/dist/styles/favicon.css

@@ -0,0 +1,73 @@
+/* SITE ICONS — the design record's `.fav` rules, ported to this app's tokens
+   and kept under the transcript's `tr-` prefix.
+
+   A search's sources are the one place identity should carry colour: a site's
+   own icon is content, like a widget's committed surface, and it is the
+   fastest way to tell GitHub from MDN from a blog. So the icon keeps its
+   colour — but it lives in the detail and in a small stack at the line's
+   edge, NEVER in the glyph slot, which stays monoline. State and identity do
+   not share a place.
+
+   A site whose icon was not fetched — refused, 404, setting off, no bridge —
+   wears the globe: no ring, no plate, on the tertiary ramp, because the globe
+   is a glyph and not a site's mark. */
+
+.tr-fav {
+  --tr-fav-size: 14px;
+  display: inline-flex;
+  flex: none;
+  width: var(--tr-fav-size);
+  height: var(--tr-fav-size);
+  border-radius: 4px;
+  overflow: hidden;
+  /* A hairline RING rather than a border: it costs no layout box, so a 14px
+     icon stays 14px in a row whose height is already spoken for. */
+  box-shadow: 0 0 0 1px var(--vf-hairline);
+  background: var(--vf-chrome-solid);
+}
+
+.tr-fav > svg,
+.tr-fav > img {
+  display: block;
+  width: var(--tr-fav-size);
+  height: var(--tr-fav-size);
+  /* Icons arrive at whatever size the site drew them; letterboxing a
+     non-square one is honest, cropping it is not. */
+  object-fit: contain;
+}
+
+/* The globe is a glyph, so it obeys the glyph rules: no plate, no ring, and
+   the tertiary ramp — never hue. */
+.tr-fav--globe {
+  box-shadow: none;
+  background: none;
+  color: var(--vf-text-tertiary);
+}
+
+/* While the shell is being asked, the plate is the whole state: a ring and an
+   empty surface. Nothing spins — a 14px spinner for a 2KB icon is machinery
+   louder than what it is waiting for. */
+.tr-fav--loading {
+  background: var(--vf-fill);
+  box-shadow: 0 0 0 1px var(--vf-hairline);
+}
+
+/* THE STACK — the first three sites of a search, at the line's right edge.
+   They overlap by 4px, and each carries a ring in the SURFACE colour rather
+   than the hairline so the overlap reads as depth instead of as a smudge. */
+.tr-favs {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tr-favs .tr-fav {
+  box-shadow: 0 0 0 1.5px var(--ah-plate);
+}
+
+.tr-favs .tr-fav--globe {
+  box-shadow: none;
+}
+
+.tr-favs .tr-fav + .tr-fav {
+  margin-left: -4px;
+}

package/dist/styles/history-room.css

@@ -0,0 +1,18 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   @vibefield/rosetta-room's stylesheet (`@vibefield/rosetta-room/styles/room.css`). Import it once,
+   after the host's tokens: the room reads the VibeField design-kit's --vf-*
+   names and brings its own (--ah-*, --tr-*, the --tint-* band). Every rule is
+   scoped to the room's root (.ah-frame) and to the layers it portals
+   (.ah-layer); the page itself is the host's. A few parts import their own
+   sheets beside them, which the bundler brings along.
+   ═══════════════════════════════════════════════════════════════════════ */
+@import "./room.css";
+@import "./ingest.css";
+@import "./transcript.css";
+@import "./search.css";
+@import "./reader.css";
+@import "./host-inputs.css";
+/* The worktree guest's tree: mille's token surface and the VibeField theme,
+   which reads the host's --vf-* tokens live. */
+@import "@vibecook/mille-ui/tokens.css";
+@import "@vibecook/mille-ui/theme/vibefield.css";