@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/lib/transcript/workflow.js

@@ -0,0 +1,133 @@
+function attemptFact(row, action) {
+    const timing = row.body.type === "tool_use" ? row.body.tool.timing : null;
+    const status = row.body.type === "tool_use" ? row.body.tool.status.value : "unknown";
+    const at = timing?.started_at ?? row.at;
+    const completedAt = timing?.completed_at ?? null;
+    return {
+        timelineId: row.timeline_id,
+        attempt: action.attempt ?? 1,
+        taskId: action.task_id,
+        runId: action.run_id,
+        resumed: (action.attempt ?? 1) > 1 || action.resume_id !== null,
+        status,
+        at,
+        completedAt,
+        durationMs: timing?.duration_ms ??
+            (at !== null && completedAt !== null && completedAt >= at ? completedAt - at : null),
+        summary: action.callback_summary,
+    };
+}
+function hydratedAttemptFact(attempt) {
+    return {
+        timelineId: attempt.timeline_id,
+        attempt: attempt.attempt,
+        taskId: attempt.task_id,
+        runId: null,
+        resumed: attempt.resumed,
+        status: attempt.status,
+        at: attempt.at,
+        completedAt: attempt.completed_at,
+        durationMs: attempt.duration_ms,
+        summary: attempt.summary,
+    };
+}
+export function workflowAttemptIndex(rows) {
+    const mutableByRunId = new Map();
+    const byTimelineId = new Map();
+    for (const row of rows) {
+        if (row.body.type !== "tool_use" || row.body.tool.action.type !== "workflow")
+            continue;
+        const action = row.body.tool.action;
+        const fact = attemptFact(row, action);
+        byTimelineId.set(row.timeline_id, fact);
+        if (action.run_id === null)
+            continue;
+        const attempts = mutableByRunId.get(action.run_id);
+        if (attempts === undefined)
+            mutableByRunId.set(action.run_id, [fact]);
+        else
+            attempts.push(fact);
+    }
+    const byRunId = new Map();
+    for (const [runId, attempts] of mutableByRunId) {
+        byRunId.set(runId, attempts.sort((left, right) => left.at === right.at ? left.attempt - right.attempt : (left.at ?? Number.MAX_SAFE_INTEGER) - (right.at ?? Number.MAX_SAFE_INTEGER)));
+    }
+    return { byRunId, byTimelineId };
+}
+export function workflowAttemptsFor(index, row) {
+    if (row.body.type !== "tool_use" || row.body.tool.action.type !== "workflow")
+        return [];
+    const action = row.body.tool.action;
+    const runId = action.run_id;
+    if (runId !== null) {
+        const attempts = new Map((action.run?.attempts ?? []).map((attempt) => {
+            const fact = hydratedAttemptFact(attempt);
+            return [fact.timelineId, { ...fact, runId }];
+        }));
+        // Rows already loaded by the client carry fresher live lifecycle facts
+        // than the read-time run join. Overlay them without making pagination the
+        // source of the attempt list.
+        for (const fact of index.byRunId.get(runId) ?? [])
+            attempts.set(fact.timelineId, fact);
+        return [...attempts.values()].sort((left, right) => left.at === right.at
+            ? left.attempt - right.attempt
+            : (left.at ?? Number.MAX_SAFE_INTEGER) - (right.at ?? Number.MAX_SAFE_INTEGER));
+    }
+    const attempt = index.byTimelineId.get(row.timeline_id);
+    return attempt === undefined ? [] : [attempt];
+}
+/** Observed child-response metadata wins. A sidecar configuration is a
+ * labelled fallback, never presented as observation. */
+export function workflowRuntime(worker, defaultModel) {
+    const observedModels = [...new Set(worker.observed_models ?? [])];
+    const observedEfforts = [...new Set(worker.observed_efforts ?? [])];
+    if (observedModels.length > 1 || observedEfforts.length > 1) {
+        return {
+            basis: "varies",
+            model: observedModels.length > 1 ? `varies (${observedModels.length})` : (observedModels[0] ?? "model varies"),
+            effort: observedEfforts.length > 1 ? `varies (${observedEfforts.length})` : (observedEfforts[0] ?? "unknown"),
+        };
+    }
+    if (observedModels.length === 1 || observedEfforts.length === 1) {
+        return {
+            basis: "observed",
+            model: observedModels[0] ?? "unknown",
+            effort: observedEfforts[0] ?? "unknown",
+        };
+    }
+    const model = worker.configured_model ?? defaultModel;
+    const effort = worker.configured_effort;
+    if (model !== null || effort !== null) {
+        return {
+            basis: "configured",
+            model: model ?? "unknown",
+            effort: effort ?? "unknown",
+        };
+    }
+    return { basis: "unknown", model: "unknown", effort: "unknown" };
+}
+/** Terminal run state refines unfinished worker rows without falsifying the
+ * native worker outcome. Cached completion is called reused and claims no
+ * fresh accounting. */
+export function workflowWorkerState(worker, runStatus) {
+    if (worker.cached && worker.state === "done")
+        return "reused";
+    if (["killed", "cancelled", "stopped"].includes(runStatus)) {
+        if (worker.state === "progress")
+            return "interrupted";
+        if (worker.state === "start")
+            return "never started";
+    }
+    switch (worker.state) {
+        case "done":
+            return "done";
+        case "error":
+            return "error";
+        case "progress":
+            return "running";
+        case "start":
+            return "queued";
+        case "unknown":
+            return "status unknown";
+    }
+}

package/dist/lib/use-activity-order.d.ts

@@ -0,0 +1,2 @@
+import type { MetaState } from "@vibefield/rosetta-protocol";
+export declare function useActivityOrder(meta: MetaState | null, snapshotVersion: number, live: boolean, bootstrapping: boolean, now: number): import("./activity-order.js").ActivityOrder;

package/dist/lib/use-activity-order.js

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { advanceActivityOrder } from "./activity-order.js";
+export function useActivityOrder(meta, snapshotVersion, live, bootstrapping, now) {
+    const [state, setState] = useState(() => ({
+        meta, snapshotVersion, live, bootstrapping,
+        order: advanceActivityOrder(null, meta?.sessions ?? [], { now, live: false, bootstrapping }),
+    }));
+    if (state.meta !== meta || state.snapshotVersion !== snapshotVersion ||
+        state.live !== live || state.bootstrapping !== bootstrapping) {
+        const next = {
+            meta, snapshotVersion, live, bootstrapping,
+            order: advanceActivityOrder(state.order, meta?.sessions ?? [], {
+                now, bootstrapping,
+                live: live && state.live && state.snapshotVersion === snapshotVersion,
+            }),
+        };
+        // Pure render-time adjustment keeps ordering and rows in the same commit;
+        // no effect publishes a stale intermediate order or mutates a render ref.
+        setState(next);
+        return next.order;
+    }
+    return state.order;
+}

package/dist/lib/use-day-usage.d.ts

@@ -0,0 +1,8 @@
+import type { DayUsageResponse } from "@vibefield/rosetta-protocol";
+/** Requests follow selection, not hover. Superseded requests cannot replace
+ * the day being read, including during retry or project changes. */
+export declare function useDayUsage(projectId: string, day: string | null, offsetMinutes: number): {
+    status: "ready" | "error" | "loading";
+    data: DayUsageResponse | null;
+    retry: () => void;
+};

package/dist/lib/use-day-usage.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useRoom } from "../room-context.js";
+/** Requests follow selection, not hover. Superseded requests cannot replace
+ * the day being read, including during retry or project changes. */
+export function useDayUsage(projectId, day, offsetMinutes) {
+    const key = JSON.stringify([projectId, day, offsetMinutes]);
+    const [result, setResult] = useState(null);
+    const [revision, setRevision] = useState(0);
+    const { catalog } = useRoom();
+    useEffect(() => {
+        if (!day)
+            return;
+        let cancelled = false;
+        const controller = new AbortController();
+        setResult({ key, status: "loading", data: null });
+        catalog.dayUsage(projectId, day, offsetMinutes, controller.signal).then(data => {
+            if (!cancelled)
+                setResult({ key, status: data.day === day ? "ready" : "error",
+                    data: data.day === day ? data : null });
+        }).catch(() => {
+            if (!cancelled)
+                setResult({ key, status: "error", data: null });
+        });
+        return () => { cancelled = true; controller.abort(); };
+    }, [catalog, projectId, day, offsetMinutes, key, revision]);
+    return {
+        status: result?.key === key ? result.status : "loading",
+        data: result?.key === key ? result.data : null,
+        retry: () => setRevision(value => value + 1),
+    };
+}

package/dist/lib/use-deferred-list-order.d.ts

@@ -0,0 +1,26 @@
+import type { FocusEvent, PointerEvent, UIEvent } from "react";
+export interface ListPosition {
+    readonly id: string;
+    readonly day: number | null;
+    /** Which of a host's sections the row is drawn in (R3); absent without them. */
+    readonly section?: number;
+}
+/** Hold geometry, never row data. Pointer, keyboard and scroll activity all
+ * protect the same snapshot, including day membership and new insertions. */
+export declare function useDeferredListOrder(desired: readonly ListPosition[], scope: string): {
+    items: readonly ListPosition[];
+    pending: boolean;
+    scrollRef: import("react").RefObject<HTMLDivElement | null>;
+    hostProps: {
+        onPointerEnter: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: () => void;
+        onPointerDownCapture: () => void;
+        onPointerUpCapture: () => void;
+        onPointerCancel: () => void;
+        onFocusCapture: () => void;
+        onBlurCapture: (event: FocusEvent<HTMLDivElement>) => void;
+        onWheelCapture: () => void;
+    };
+    onScroll: (event: UIEvent<HTMLDivElement>) => void;
+    apply: () => void;
+};

package/dist/lib/use-deferred-list-order.js

@@ -0,0 +1,142 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+const idle = (scope) => ({
+    scope, hovered: false, focused: false, pressed: false, away: false, scrolling: false,
+});
+const signature = (items) => JSON.stringify(items);
+/** Hold geometry, never row data. Pointer, keyboard and scroll activity all
+ * protect the same snapshot, including day membership and new insertions. */
+export function useDeferredListOrder(desired, scope) {
+    const wanted = signature(desired);
+    const [view, setView] = useState({ scope, items: desired, signature: wanted });
+    const [interaction, setInteraction] = useState(() => idle(scope));
+    const scrollRef = useRef(null);
+    const timer = useRef(null);
+    const reveal = useRef(false);
+    const focusAfterReveal = useRef(false);
+    const anchor = useRef(null);
+    const held = interaction.scope === scope && (interaction.hovered || interaction.focused || interaction.pressed ||
+        interaction.away || interaction.scrolling);
+    let current = view;
+    if (view.scope !== scope || (!held && view.signature !== wanted)) {
+        current = { scope, items: desired, signature: wanted };
+        setView(current);
+        if (interaction.scope !== scope)
+            setInteraction(idle(scope));
+    }
+    else if (held && view.signature !== wanted) {
+        // Authoritative removals cannot leave clickable ghosts behind. Preserve
+        // the first surviving visible row when removing something above it.
+        const present = new Set(desired.map(item => item.id));
+        const remaining = view.items.filter(item => present.has(item.id));
+        if (remaining.length !== view.items.length) {
+            current = { scope, items: remaining, signature: signature(remaining) };
+            setView(current);
+        }
+    }
+    const mark = (patch) => setInteraction(previous => {
+        const base = previous.scope === scope ? previous : idle(scope);
+        return base === previous && Object.keys(patch).every(key => base[key] === patch[key])
+            ? previous : { ...base, ...patch };
+    });
+    const rememberAnchor = () => {
+        const container = scrollRef.current;
+        if (!container || container.scrollTop <= 2) {
+            anchor.current = null;
+            return;
+        }
+        const elements = container.querySelectorAll("[data-motion-key]");
+        let low = 0;
+        let high = elements.length;
+        // The search keeps low < high <= elements.length, so mid names an
+        // element, and the window below stops at elements.length.
+        const elementAt = (index) => elements[index];
+        while (low < high) {
+            const mid = (low + high) >>> 1;
+            const row = elementAt(mid);
+            if (row.offsetTop + row.offsetHeight <= container.scrollTop)
+                low = mid + 1;
+            else
+                high = mid;
+        }
+        const rows = [];
+        for (let index = low; index < Math.min(low + 3, elements.length); index++) {
+            const row = elementAt(index);
+            rows.push({ id: row.dataset.motionKey, offset: row.offsetTop - container.scrollTop });
+        }
+        anchor.current = { scope, rows };
+    };
+    useLayoutEffect(() => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        if (reveal.current) {
+            reveal.current = false;
+            container.scrollTop = 0;
+            if (focusAfterReveal.current) {
+                container.querySelector("[data-motion-key]")?.focus({ preventScroll: true });
+            }
+            focusAfterReveal.current = false;
+        }
+        else if (anchor.current?.scope === scope) {
+            const rows = new Map(Array.from(container.querySelectorAll("[data-motion-key]"), row => [row.dataset.motionKey, row]));
+            for (const saved of anchor.current.rows) {
+                const row = rows.get(saved.id);
+                if (!row)
+                    continue;
+                container.scrollTop = row.offsetTop - saved.offset;
+                break;
+            }
+        }
+        rememberAnchor();
+    });
+    useLayoutEffect(() => {
+        if (scrollRef.current)
+            scrollRef.current.scrollTop = 0;
+        anchor.current = null;
+    }, [scope]);
+    useEffect(() => () => {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, [scope]);
+    const scrollActivity = () => {
+        mark({ scrolling: true });
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            setInteraction(previous => previous.scope === scope ? { ...previous, scrolling: false } : previous);
+            timer.current = null;
+        }, 180);
+    };
+    return {
+        items: current.items,
+        pending: current.signature !== wanted,
+        scrollRef,
+        hostProps: {
+            onPointerEnter: (event) => {
+                if (event.pointerType !== "touch")
+                    mark({ hovered: true });
+            },
+            onPointerLeave: () => mark({ hovered: false, pressed: false }),
+            onPointerDownCapture: () => mark({ pressed: true }),
+            onPointerUpCapture: () => mark({ pressed: false }),
+            onPointerCancel: () => mark({ pressed: false }),
+            onFocusCapture: () => mark({ focused: true }),
+            onBlurCapture: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    mark({ focused: false });
+            },
+            onWheelCapture: scrollActivity,
+        },
+        onScroll: (event) => {
+            mark({ away: event.currentTarget.scrollTop > 2 });
+            rememberAnchor();
+            scrollActivity();
+        },
+        apply: () => {
+            focusAfterReveal.current = document.activeElement?.hasAttribute("data-list-updates") ?? false;
+            reveal.current = true;
+            setView({ scope, items: desired, signature: wanted });
+            mark({ away: false });
+        },
+    };
+}

package/dist/lib/use-ingest-activity.d.ts

@@ -0,0 +1,2 @@
+import type { ActivityFeed, IngestActivity } from "./ingest-activity.js";
+export declare function useIngestActivity(feed: ActivityFeed): IngestActivity | null;

package/dist/lib/use-ingest-activity.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react";
+import { activityPhase, progressBytes, progressDuration, sampleActivity } from "./ingest-activity.js";
+export function useIngestActivity(feed) {
+    const phase = activityPhase(feed);
+    const [samples, setSamples] = useState(null);
+    const [now, setNow] = useState(Date.now);
+    const sawWork = useRef(false);
+    const [showCompletion, setShowCompletion] = useState(false);
+    const key = phase?.key;
+    useEffect(() => {
+        const current = activityPhase(feed);
+        if (current)
+            setSamples((previous) => sampleActivity(previous, feed, current));
+        setNow(Date.now());
+    }, [feed]);
+    useEffect(() => {
+        if (key && key !== "ready" && key !== "paused")
+            sawWork.current = true;
+        if (key !== "ready")
+            return;
+        setShowCompletion(sawWork.current);
+        const timer = window.setTimeout(() => { setShowCompletion(false); sawWork.current = false; }, 5_000);
+        return () => window.clearTimeout(timer);
+    }, [key]);
+    useEffect(() => {
+        if (!key || (key === "ready" && !showCompletion))
+            return;
+        const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+        return () => window.clearInterval(timer);
+    }, [key, showCompletion]);
+    if (!phase || (key === "ready" && !showCompletion))
+        return null;
+    const sinceAnswer = Math.max(0, now - (feed.receivedAt ?? now));
+    const elapsed = `${progressDuration(feed.uptimeMs + (phase.active ? sinceAnswer : 0))} elapsed`;
+    const sinceChange = Math.max(0, now - (samples?.changedAt ?? now));
+    const rate = sinceChange < 4_000 && samples?.identity === `${feed.startedAt}:${phase.key}:${phase.unit}`
+        ? samples.rate : null;
+    let footer = "Connected";
+    if (feed.connectionError)
+        footer = `Last update ${progressDuration(sinceAnswer)} ago`;
+    else if (rate && phase.unit)
+        footer = phase.unit === "bytes"
+            ? `${progressBytes(rate)}/s` : `${Math.round(rate).toLocaleString()} ${phase.unit === "documents" ? "messages" : phase.unit === "records" ? "items" : phase.unit}/s`;
+    else if (phase.unit && sinceChange >= 10_000)
+        footer = `Connected · No new counts for ${progressDuration(sinceChange)}`;
+    else if (!phase.active)
+        footer = key === "ready" ? "Complete" : key === "paused" ? "Paused" : "Ready to browse";
+    return { phase, feed, footer, elapsed };
+}

package/dist/lib/use-list-motion.d.ts

@@ -0,0 +1,4 @@
+import type { RefObject } from "react";
+/** Call after rendering stable, sibling rows with data-motion-key identities.
+ * `order` includes group labels so crossing a day boundary also moves rows. */
+export declare function useListMotion(order: string, scope: string, externalRef?: RefObject<HTMLDivElement | null>): RefObject<HTMLDivElement | null>;

package/dist/lib/use-list-motion.js

@@ -0,0 +1,67 @@
+import { useLayoutEffect, useRef } from "react";
+import { ListMotion, REDUCED_MOTION_QUERY } from "./motion.js";
+/** Call after rendering stable, sibling rows with data-motion-key identities.
+ * `order` includes group labels so crossing a day boundary also moves rows. */
+export function useListMotion(order, scope, externalRef) {
+    const ownRef = useRef(null);
+    const ref = externalRef ?? ownRef;
+    const refresh = useRef(null);
+    useLayoutEffect(() => {
+        const container = ref.current;
+        if (container === null)
+            return;
+        const instance = new ListMotion();
+        const preference = window.matchMedia(REDUCED_MOTION_QUERY);
+        const sizes = new Map();
+        const observed = new Set();
+        const resize = new ResizeObserver((entries) => {
+            let changed = false;
+            for (const { target, contentRect } of entries) {
+                const previous = sizes.get(target);
+                if (previous &&
+                    (Math.abs(previous.width - contentRect.width) > 0.5 ||
+                        Math.abs(previous.height - contentRect.height) > 0.5))
+                    changed = true;
+                sizes.set(target, { width: contentRect.width, height: contentRect.height });
+            }
+            // Progress labels, font metrics and window resizing can change row
+            // heights without a reorder. Keep the next animation's origin current.
+            if (changed)
+                instance.update(container, preference.matches);
+        });
+        refresh.current = () => {
+            const current = new Set([
+                container,
+                ...container.querySelectorAll("[data-motion-key]"),
+            ]);
+            for (const element of observed) {
+                if (current.has(element))
+                    continue;
+                resize.unobserve(element);
+                observed.delete(element);
+                sizes.delete(element);
+            }
+            for (const element of current) {
+                if (!observed.has(element))
+                    resize.observe(element);
+                observed.add(element);
+            }
+            instance.update(container, preference.matches);
+        };
+        const changed = () => {
+            if (preference.matches)
+                instance.cancel();
+        };
+        preference.addEventListener("change", changed);
+        return () => {
+            instance.cancel();
+            resize.disconnect();
+            preference.removeEventListener("change", changed);
+            refresh.current = null;
+        };
+    }, [scope]);
+    useLayoutEffect(() => {
+        refresh.current?.();
+    }, [order, scope]);
+    return ref;
+}