@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/components/Player.js

@@ -0,0 +1,335 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconButton, Select, Slider } from "@rightkit/react-shell/react";
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { playbackClose, playbackControl, playbackFrame, playbackOpen, PLAYBACK_REFRESHED, } from "../lib/media.js";
+import { formatSeconds } from "../lib/project.js";
+import { Icon, timecode } from "../ui/index.js";
+/**
+ * Preview-only output gain (0.0..=1.0, 0 mutes). Drives the native transport's
+ * audio callback; export/render code never reads it.
+ */
+const playbackSetGain = (value) => invoke("playback_set_gain", { value });
+/** Draw one binary frame reply onto the canvas; returns the decoded header. */
+function drawFrame(canvas, buf) {
+    const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
+    if (bytes.length < 24)
+        return null;
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const w = view.getUint32(0, true);
+    const h = view.getUint32(4, true);
+    const frame = view.getUint32(8, true);
+    const total = view.getUint32(12, true);
+    const pts = view.getFloat64(16, true);
+    const rgba = new Uint8ClampedArray(w * h * 4);
+    rgba.set(bytes.subarray(24, 24 + w * h * 4));
+    if (canvas.width !== w)
+        canvas.width = w;
+    if (canvas.height !== h)
+        canvas.height = h;
+    canvas.getContext("2d")?.putImageData(new ImageData(rgba, w, h), 0, 0);
+    return { frame, total, pts };
+}
+/**
+ * Native playback surface: frames are decoded and composited in Rust (FFmpeg +
+ * wgpu) and delivered here as RGBA; the browser never decodes the timeline.
+ * `dir` plays the canonical project revision.
+ */
+export function NativePlayer({ dir, label, seekRequest, onStatus, onError, }) {
+    const canvasRef = useRef(null);
+    const [meta, setMeta] = useState(null);
+    const [state, setState] = useState("loading");
+    const [error, setError] = useState(null);
+    const drawing = useRef(false);
+    const apply = useCallback((m) => {
+        setMeta(m);
+        onStatus?.(m);
+    }, [onStatus]);
+    const draw = useCallback(async () => {
+        if (drawing.current)
+            return;
+        drawing.current = true;
+        try {
+            const buf = await playbackFrame();
+            const canvas = canvasRef.current;
+            if (canvas)
+                drawFrame(canvas, buf);
+        }
+        catch {
+            // transient (session replaced mid-frame); the status loop surfaces errors
+        }
+        finally {
+            drawing.current = false;
+        }
+    }, []);
+    // Open/replace the session for this source.
+    useEffect(() => {
+        let cancelled = false;
+        setState("loading");
+        setError(null);
+        (async () => {
+            try {
+                const m = await playbackOpen({ dir });
+                if (cancelled)
+                    return;
+                apply(m);
+                setState("ready");
+                await draw();
+            }
+            catch (e) {
+                if (!cancelled) {
+                    const msg = errorMessage(e);
+                    setError(msg);
+                    setState("error");
+                    onError?.(msg);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+            void playbackClose().catch(() => undefined);
+        };
+    }, [dir, apply, draw, onError]);
+    // External seek requests (e.g. timeline scrub).
+    useEffect(() => {
+        if (!seekRequest || state !== "ready")
+            return;
+        void playbackControl("seek", seekRequest.ms)
+            .then(apply)
+            .then(() => draw())
+            .catch(() => undefined);
+    }, [seekRequest, state, apply, draw]);
+    // The session was rebuilt under a paused player (a colour grade changed): repaint.
+    useEffect(() => {
+        if (state !== "ready")
+            return;
+        const repaint = () => void draw().catch((e) => setError(errorMessage(e)));
+        window.addEventListener(PLAYBACK_REFRESHED, repaint);
+        return () => window.removeEventListener(PLAYBACK_REFRESHED, repaint);
+    }, [state, draw]);
+    // Frame pump while playing.
+    useEffect(() => {
+        if (state !== "ready" || !meta?.playing)
+            return;
+        let live = true;
+        const pump = async () => {
+            const { playbackStatus } = await import("../lib/media.js");
+            while (live) {
+                await draw();
+                const still = await playbackStatus().catch(() => null);
+                if (!still || !still.playing) {
+                    if (still)
+                        apply(still);
+                    return;
+                }
+                apply(still);
+                if (!live)
+                    return;
+                await new Promise((r) => setTimeout(r, 8));
+            }
+        };
+        void pump();
+        return () => {
+            live = false;
+        };
+    }, [state, meta?.playing, draw, apply]);
+    const control = (cmd, value, value2) => playbackControl(cmd, value, value2)
+        .then(apply)
+        .then(() => draw())
+        .catch((e) => setError(errorMessage(e)));
+    if (state === "error") {
+        return (_jsxs("p", { role: "alert", className: "cr-muted m-0 text-sm", children: [label ?? dir, ": native playback failed \u2014 ", error] }));
+    }
+    const pos = (meta?.position_ms ?? 0) / 1000;
+    const dur = (meta?.duration_ms ?? 0) / 1000;
+    return (_jsxs("div", { className: "cr-player", children: [_jsx("canvas", { ref: canvasRef, style: {
+                    display: "block",
+                    width: "100%",
+                    maxHeight: "420px",
+                    background: "black",
+                    opacity: state === "loading" ? 0.3 : 1,
+                } }), state === "loading" && (_jsx("p", { role: "status", className: "cr-muted m-0 text-sm", children: "Preparing native playback\u2026" })), _jsxs("div", { className: "seek-row cr-dim cr-mono", style: { alignItems: "center", gap: 8 }, children: [_jsx(Button, { type: "button", disabled: state !== "ready", onClick: () => void control("toggle"), children: meta?.playing ? "Pause" : "Play" }), _jsx(Button, { type: "button", disabled: state !== "ready", onClick: () => void control("step", -1), children: "-1f" }), _jsx(Button, { type: "button", disabled: state !== "ready", onClick: () => void control("step", 1), children: "+1f" }), _jsx(Slider, { label: "Seek", min: 0, max: Math.max(dur, 0.001), step: 0.001, value: pos, disabled: state !== "ready", onChange: (value) => void control("seek", value * 1000), className: "flex-1" }), _jsx(Select, { label: "Speed", value: String(meta?.speed ?? 1), disabled: state !== "ready", onChange: (value) => void control("speed", Number(value)), options: [0.5, 1, 1.5, 2, 4].map((speed) => ({
+                            value: String(speed),
+                            label: `${speed}x`,
+                        })) }), _jsx(Button, { type: "button", disabled: state !== "ready", "aria-pressed": !!meta?.loop, onClick: () => void control("loop", meta?.loop ? -1 : 0, meta?.loop ? 0 : (meta?.duration_ms ?? 0)), children: "Loop" })] }), _jsxs("div", { className: "seek-row cr-dim cr-mono", children: [_jsx("span", { className: "truncate", title: dir, children: label ?? "Timeline preview" }), _jsxs("span", { children: [formatSeconds(pos), " / ", formatSeconds(dur), meta ? ` · f${meta.frame}/${meta.total_frames}` : "", meta && meta.audio !== "on" && meta.kind === "timeline" ? " · muted" : ""] })] })] }));
+}
+/**
+ * Preview host for the editor: revision-bound native playback of the project
+ * timeline. `seek(revisionCursor, timeS)` scrubs to `timeS`.
+ */
+export function useTimelinePreview(dir, revision) {
+    const [seekRequest, setSeekRequest] = useState(null);
+    const host = {
+        seek: (_revisionCursor, timeS) => setSeekRequest({ ms: timeS * 1000, n: Date.now() }),
+        slot: dir ? (_jsx(NativePlayer, { dir: dir, label: "Timeline preview", seekRequest: seekRequest }, `${dir}:${revision}`)) : null,
+    };
+    return host;
+}
+/**
+ * Stage player for the Finished edit screen (§3.4): a letterboxed canvas fed
+ * by the Rust compositor playback session for the CURRENT project revision,
+ * plus the spec transport (play circle, ±1f, mono timecode, speed, loop,
+ * scrubber). While the session opens — or if playback fails — it shows the
+ * caller-provided fallback frame (`media.thumbnail`), never a black box.
+ */
+export function StagePlayer({ dir, revision, seekRequest, captionsOn, caption, aspect, fallback, onPosition, onToggleCaptions, }) {
+    const canvasRef = useRef(null);
+    const [meta, setMeta] = useState(null);
+    const [state, setState] = useState("loading");
+    const [error, setError] = useState(null);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    /** Bumped by the Retry control to reopen the playback session for the same revision. */
+    const [attempt, setAttempt] = useState(0);
+    const drawing = useRef(false);
+    const draw = useCallback(async () => {
+        if (drawing.current)
+            return;
+        drawing.current = true;
+        try {
+            const buf = await playbackFrame();
+            const canvas = canvasRef.current;
+            if (canvas)
+                drawFrame(canvas, buf);
+        }
+        finally {
+            drawing.current = false;
+        }
+    }, []);
+    const apply = useCallback((m) => {
+        setMeta(m);
+        onPosition?.(m.position_ms);
+    }, [onPosition]);
+    // Gain is process-wide in the native transport, so it survives session reopen.
+    // A failed call leaves the previous gain in place; the stage keeps playing.
+    const setGain = (gain) => {
+        void playbackSetGain(gain).catch(() => undefined);
+    };
+    const onVolume = (v) => {
+        setVolume(v);
+        setMuted(false);
+        setGain(v);
+    };
+    const toggleMute = () => {
+        if (muted) {
+            const restored = volume > 0 ? volume : 1;
+            setVolume(restored);
+            setMuted(false);
+            setGain(restored);
+        }
+        else {
+            setMuted(true);
+            setGain(0);
+        }
+    };
+    // One session per (dir, revision, attempt): an applied edit changes the programme,
+    // and Retry reopens the session after a playback error.
+    useEffect(() => {
+        let cancelled = false;
+        setState("loading");
+        setError(null);
+        (async () => {
+            try {
+                const m = await playbackOpen({ dir, height: 720 });
+                if (cancelled)
+                    return;
+                apply(m);
+                setState("ready");
+                await draw();
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(errorMessage(e));
+                    setState("error");
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+            void playbackClose().catch(() => undefined);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dir, revision, attempt]);
+    // Seeks run in request order, and only the newest one's reply moves the playhead:
+    // a late reply from an earlier keystroke must not snap it back.
+    const seekChain = useRef(Promise.resolve());
+    const latestSeek = useRef(null);
+    useEffect(() => {
+        if (!seekRequest || state !== "ready")
+            return;
+        latestSeek.current = seekRequest;
+        seekChain.current = seekChain.current
+            .catch(() => undefined)
+            .then(() => playbackControl("seek", seekRequest.ms))
+            .then(async (m) => {
+            if (latestSeek.current !== seekRequest)
+                return;
+            apply(m);
+            await draw();
+        })
+            .catch((e) => setError(errorMessage(e)));
+    }, [seekRequest, state, apply, draw]);
+    // The session was rebuilt under a paused player (a colour grade changed): repaint.
+    useEffect(() => {
+        if (state !== "ready")
+            return;
+        const repaint = () => void draw().catch((e) => setError(errorMessage(e)));
+        window.addEventListener(PLAYBACK_REFRESHED, repaint);
+        return () => window.removeEventListener(PLAYBACK_REFRESHED, repaint);
+    }, [state, draw]);
+    // Frame pump while playing.
+    useEffect(() => {
+        if (state !== "ready" || !meta?.playing)
+            return;
+        let live = true;
+        const pump = async () => {
+            const { playbackStatus } = await import("../lib/media.js");
+            while (live) {
+                try {
+                    await draw();
+                }
+                catch (e) {
+                    // A persistent decode failure (e.g. missing media) is honest UI:
+                    // surface it rather than leaving a black canvas.
+                    if (live) {
+                        setError(errorMessage(e));
+                        setState("error");
+                    }
+                    return;
+                }
+                const still = await playbackStatus().catch(() => null);
+                if (!still || !still.playing) {
+                    if (still)
+                        apply(still);
+                    return;
+                }
+                apply(still);
+                if (!live)
+                    return;
+                await new Promise((r) => setTimeout(r, 8));
+            }
+        };
+        void pump();
+        return () => {
+            live = false;
+        };
+    }, [state, meta?.playing, draw, apply]);
+    const control = (cmd, value, value2) => playbackControl(cmd, value, value2)
+        .then(apply)
+        .then(() => draw())
+        .catch((e) => setError(errorMessage(e)));
+    const pos = (meta?.position_ms ?? 0) / 1000;
+    const dur = (meta?.duration_ms ?? 0) / 1000;
+    const ready = state === "ready";
+    const tidyError = (e) => {
+        if (!e)
+            return "unknown error";
+        const last = e.split("\n").filter(Boolean).pop() ?? e;
+        return last.replace(/\S*\/([^\s/]+)/g, "$1");
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fe-stage", "data-preview-state": state, "data-preview-error": error ?? undefined, children: [fallback && state !== "ready" && (_jsx("img", { className: "fe-stage-fallback", src: fallback, alt: "", draggable: false })), _jsx("canvas", { ref: canvasRef, style: { display: ready ? "block" : fallback ? "none" : "block" } }), state === "loading" && !fallback && (_jsx("div", { className: "fe-stage__loading", children: _jsx("span", { role: "status", className: "cr-muted", children: "Loading preview\u2026" }) })), state === "error" && (_jsxs("div", { className: "fe-stage__loading", role: "alert", title: error ?? undefined, children: ["Preview failed \u2014 ", tidyError(error)] })), state === "error" && (_jsx(Button, { type: "button", style: { position: "absolute", left: "50%", bottom: 12, transform: "translateX(-50%)" }, onClick: () => setAttempt((n) => n + 1), children: "Retry" })), _jsx("span", { className: "fe-stage__tag", children: "Final edit" }), _jsxs("span", { className: "fe-stage__chips", children: [_jsxs("button", { type: "button", className: "rk-badge", "aria-pressed": captionsOn, onClick: () => onToggleCaptions(!captionsOn), children: ["Captions ", captionsOn ? "on" : "off"] }), aspect && _jsx("span", { className: "rk-badge", children: aspect })] }), captionsOn && caption && _jsx("div", { className: "fe-stage__caption", children: caption })] }), _jsxs("div", { className: "fe-transport", children: [_jsxs("div", { className: "fe-transport__row", children: [_jsx(IconButton, { label: "-1 frame", disabled: !ready, onClick: () => void control("step", -1), children: _jsx(Icon, { name: "step-back" }) }), _jsx("button", { type: "button", className: "fe-play", "aria-label": meta?.playing ? "Pause" : "Play", disabled: !ready, onClick: () => void control("toggle"), children: _jsx(Icon, { name: meta?.playing ? "pause" : "play" }) }), _jsx(IconButton, { label: "+1 frame", disabled: !ready, onClick: () => void control("step", 1), children: _jsx(Icon, { name: "step-forward" }) }), _jsxs("span", { className: "fe-transport__tc", children: [_jsx("strong", { children: timecode(meta?.position_ms ?? 0) }), " / ", timecode(meta?.duration_ms ?? 0)] }), _jsxs("span", { className: "fe-transport__right", children: [_jsx(Select, { className: "w-auto h-[26px]!", label: "Playback speed", value: String(meta?.speed ?? 1), disabled: !ready, onChange: (value) => void control("speed", Number(value)), options: [0.5, 1, 1.5, 2].map((speed) => ({
+                                            value: String(speed),
+                                            label: `${speed}×`,
+                                        })) }), _jsx(IconButton, { label: "Loop", pressed: !!meta?.loop, disabled: !ready, onClick: () => void control("loop", meta?.loop ? -1 : 0, meta?.loop ? 0 : meta?.duration_ms ?? 0), children: _jsx(Icon, { name: "repeat" }) }), _jsx(IconButton, { label: "Mute", pressed: muted, onClick: toggleMute, children: _jsx(Icon, { name: muted || volume === 0 ? "volume-x" : "volume" }) }), _jsx(Slider, { label: "Volume", min: 0, max: 1, step: 0.01, value: muted ? 0 : volume, onChange: onVolume, className: "w-[72px]!" })] })] }), _jsx(Slider, { label: "Scrub", min: 0, max: Math.max(dur, 0.001), step: 0.001, value: pos, disabled: !ready, onChange: (value) => void control("seek", value * 1000) })] })] }));
+}

package/dist/components/RangePreview.d.ts

@@ -0,0 +1,9 @@
+/** @rightkit/media-ui player confined to [startMs, endMs] of a real file: starts
+ *  at the range start and either loops it (shorts) or stops at its end (phrases). */
+export declare function RangePreview({ path, startMs, endMs, loop, title, }: {
+    path: string;
+    startMs: number;
+    endMs: number;
+    loop?: boolean;
+    title?: string;
+}): import("react").JSX.Element;

package/dist/components/RangePreview.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { MediaPlayer } from "@rightkit/media-ui";
+import { mediaKind, useMediaPlaybackId } from "../lib/mediaAdapters.js";
+/** @rightkit/media-ui player confined to [startMs, endMs] of a real file: starts
+ *  at the range start and either loops it (shorts) or stops at its end (phrases). */
+export function RangePreview({ path, startMs, endMs, loop, title, }) {
+    const el = useRef(null);
+    const playbackId = useMediaPlaybackId(path);
+    return (_jsx(MediaPlayer, { src: path, playbackId: playbackId, kind: mediaKind(path), title: title, autoPlay: true, compact: true, mediaRef: el, onReady: () => {
+            if (el.current)
+                el.current.currentTime = startMs / 1000;
+        }, onTimeChange: (s) => {
+            const m = el.current;
+            if (!m || s * 1000 < endMs)
+                return;
+            if (loop)
+                m.currentTime = startMs / 1000;
+            else
+                m.pause();
+        } }, `${path}:${startMs}:${playbackId ?? ""}`));
+}

package/dist/components/Workspace.css

@@ -0,0 +1,15 @@
+/* Workspace pieces inside @rightkit/react-shell's frame. */
+.ws-plane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ws-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rk-ink-2); }
+.ws-crumb strong { font-weight: 500; color: var(--rk-ink); }
+.ws-crumb__link { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
+.ws-crumb__link:hover { color: var(--rk-ink); }
+.ws-count { font: 500 11px/1 var(--rk-font-body); color: var(--rk-ink-2); padding: 2px 6px; border-radius: 6px; background: var(--rk-fill-2); }
+.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rk-ink-3); margin: 0 4px; }
+.ws-dot--cur { background: var(--rk-accent); }
+.ws-dot--missing { background: var(--rk-warn-dot); }
+.ws-wordmark { font-family: var(--rk-wordmark-font); font-size: 24px; line-height: 1; color: var(--rk-ink); }
+.ws-wordmark span { color: var(--rk-accent); }
+.ws-foot-note { margin: 0 0 var(--s2); font-size: 11px; line-height: 1.4; color: var(--rk-ink-2); }
+.ws-status { border: 0; background: none; padding: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; }
+.ws-side-top { padding: 4px 10px 8px; }

package/dist/demo/DemoSettings.d.ts

@@ -0,0 +1 @@
+export declare function DemoSettings(): import("react").JSX.Element;

package/dist/demo/DemoSettings.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, Toggle } from "@rightkit/react-shell/react";
+import { useEffect, useState } from "react";
+import { SettingRow, SettingsGroup } from "@rightkit/settings-ui";
+import { demoBeginPerson, demoBundleDiscard, demoBundleReveal, demoCatalog, demoErrorMessage, demoPrepare, demoSetEnabled, phaseLabel, } from "./bindings.js";
+import { useDemo } from "./useDemo.js";
+import { hostAppName } from "../appName.js";
+export function DemoSettings() {
+    const { status, state, refresh } = useDemo();
+    const [catalog, setCatalog] = useState([]);
+    const [app, setApp] = useState("");
+    const [prep, setPrep] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        demoCatalog()
+            .then((c) => {
+            setCatalog(c);
+            setApp((cur) => cur || c[0]?.id || "");
+        })
+            .catch(() => setCatalog([]));
+    }, []);
+    if (!status) {
+        return (_jsx(SettingsGroup, { children: _jsx(SettingRow, { id: "demo-unavailable", label: "Agent demos", description: "Not part of this build.", children: _jsx("span", {}) }) }));
+    }
+    const run = async (f) => {
+        setBusy(true);
+        setError(null);
+        try {
+            await f();
+            await refresh();
+        }
+        catch (e) {
+            setError(demoErrorMessage(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const lastBundle = state.bundle?.name;
+    const active = state.phase === "armed" || state.phase === "recording" || state.phase === "stopping" || state.phase === "awaiting_consent";
+    return (_jsxs(_Fragment, { children: [_jsxs(SettingsGroup, { title: "Agent demos", children: [_jsx(SettingRow, { id: "demo-enabled", label: "Allow agent demos", description: `Off by default. When on, an agent you run on this computer can ask to drive one app while ${hostAppName()} records that app's window. You approve every session. Nothing leaves this computer.`, children: _jsx(Toggle, { label: "Allow agent demos", checked: status.enabled, onChange: (v) => void run(() => demoSetEnabled(v)) }) }), status.enabled && (_jsx(SettingRow, { id: "demo-kill", label: "Kill control", description: "Stops the agent and the recording at once, from anywhere.", children: _jsx("kbd", { children: status.hotkey }) }))] }), status.enabled && (_jsxs(SettingsGroup, { title: "Permissions", children: [_jsx(SettingRow, { id: "demo-permissions", label: "Accessibility and Screen Recording", description: `${hostAppName()} needs both to drive and record another app. It never asks by itself.`, children: _jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => void run(async () => setPrep(await demoPrepare())), children: "Check" }) }), prep && (_jsx(SettingRow, { id: "demo-permissions-result", label: "Result", description: `${prep.recorder}${prep.notes.length ? `. ${prep.notes.join(" ")}` : ""}`, children: _jsxs("span", { children: ["Accessibility: ", prep.accessibility ? "granted" : "missing", ". Screen Recording: ", prep.screen_recording ? "granted" : "missing", "."] }) }))] })), status.enabled && (_jsx(SettingsGroup, { title: "Record myself", children: _jsxs(SettingRow, { id: "demo-person", label: "Record an app", description: "Records one app's window with the badge and the kill control, without an agent.", children: [_jsx(Select, { label: "App to record", value: app, onChange: setApp, disabled: busy || active, options: catalog.map((c) => ({ value: c.id, label: c.name })) }), _jsx(Button, { size: "sm", disabled: busy || active || !app, onClick: () => void run(() => demoBeginPerson(app)), children: "Start recording" })] }) })), status.enabled && (_jsx(SettingsGroup, { title: "Current state", children: _jsx(SettingRow, { id: "demo-state", label: phaseLabel(state.phase), description: state.message ?? undefined, children: lastBundle ? (_jsxs("span", { className: "cr-demo-inline", children: [_jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => void run(() => demoBundleReveal(lastBundle)), children: "Show last recording" }), _jsx(Button, { size: "sm", variant: "danger", disabled: busy || active, onClick: () => void run(() => demoBundleDiscard(lastBundle)), children: "Delete it" })] })) : (_jsx("span", {})) }) })), error && (_jsx("p", { role: "alert", className: "cr-demo-error", children: error }))] }));
+}

package/dist/demo/bindings.d.ts

@@ -0,0 +1,121 @@
+import { type UnlistenFn } from "@tauri-apps/api/event";
+export type DemoErrorCode = "demo_disabled" | "consent_denied" | "invalid_token" | "session_ended" | "session_killed" | "unknown_app" | "not_armed" | "permission_missing" | "target_blocked" | "capture_unsafe" | "invalid_arguments" | "service_unavailable" | "malformed_response";
+export type ElementOp = "click" | "type" | "press";
+export type WireStep = {
+    ref: string;
+    op: ElementOp;
+    text?: string;
+    key?: string;
+};
+export type WireApp = {
+    id: string;
+    name: string;
+};
+export type WireSnapshotElement = {
+    ref: string;
+    role: string;
+    label: string;
+    ops: ElementOp[];
+};
+export type WireSnapshotResult = {
+    capture_state: "safe";
+    elements: WireSnapshotElement[];
+};
+export type WireBatchResult = {
+    completed: number;
+    results: {
+        receipt_id: string;
+    }[];
+    failed_step: number | null;
+    error_code: DemoErrorCode | null;
+};
+export type WireEndResult = {
+    ended: boolean;
+    bundle_id: string;
+    bundle_state: "complete" | "killed";
+};
+export declare const DEMO_SERVICE = "rightkit.agent.demo";
+export declare const MAX_BATCH_STEPS = 20;
+export type Phase = "idle" | "awaiting_consent" | "armed" | "recording" | "stopping" | "sealed" | "killed";
+export type DemoSession = {
+    id: string;
+    kind: "agent" | "person";
+    app: string;
+    app_name: string;
+    agent_name: string | null;
+    started_ms: number | null;
+};
+export type DemoBundle = {
+    /** Folder name; what reveal and discard take. */
+    name: string;
+    id: string;
+    dir: string;
+    state: "complete" | "killed" | "quarantined" | "invalid";
+    verified: boolean;
+    problems: string[];
+    reason: string | null;
+};
+export type DemoState = {
+    phase: Phase;
+    session: DemoSession | null;
+    bundle: DemoBundle | null;
+    message: string | null;
+    hotkey: string;
+};
+/** What the consent dialog shows. `agent_exe` and `agent_pid` come from the OS; `agent_name` is a claim. */
+export type DemoConsent = {
+    session: string;
+    app: string;
+    app_name: string;
+    agent_name: string;
+    agent_exe: string | null;
+    agent_pid: number | null;
+    will_do: string;
+};
+/** Content-free: no typed text, no element label, no value. */
+export type DemoReceipt = {
+    receipt_id: string;
+    session: string;
+    action: string;
+    result: "done" | "blocked" | "failed";
+    denied_by: string | null;
+    tier: string | null;
+    ts_ms: number;
+};
+export type DemoStatus = {
+    compiled: boolean;
+    enabled: boolean;
+    hotkey: string;
+    state: DemoState;
+    pending_consent: DemoConsent | null;
+};
+export type DemoPrepare = {
+    accessibility: boolean;
+    screen_recording: boolean;
+    recorder: string;
+    notes: string[];
+};
+export type DemoCatalogItem = {
+    id: string;
+    name: string;
+};
+export declare const EVENT_STATE = "demo://state";
+export declare const EVENT_CONSENT = "demo://consent";
+export declare const EVENT_RECEIPT = "demo://receipt";
+export declare const demoStatus: () => Promise<DemoStatus>;
+export declare const demoSetEnabled: (enabled: boolean) => Promise<DemoStatus>;
+export declare const demoCatalog: () => Promise<DemoCatalogItem[]>;
+export declare const demoPrepare: () => Promise<DemoPrepare>;
+export declare const demoConsentRespond: (session: string, approve: boolean) => Promise<void>;
+export declare const demoBeginPerson: (app: string) => Promise<void>;
+export declare const demoStop: () => Promise<DemoBundle | null>;
+export declare const demoKill: () => Promise<void>;
+export declare const demoBundleReveal: (name: string) => Promise<void>;
+export declare const demoBundleDiscard: (name: string) => Promise<void>;
+export declare const onDemoState: (f: (s: DemoState) => void) => Promise<UnlistenFn>;
+export declare const onDemoConsent: (f: (c: DemoConsent) => void) => Promise<UnlistenFn>;
+export declare const onDemoReceipt: (f: (r: DemoReceipt) => void) => Promise<UnlistenFn>;
+/** Tauri rejects with the command's `{code, message}`, or a string for a missing command. */
+export declare function demoErrorMessage(e: unknown): string;
+/** One-line wording for a phase, shared by the badge and the settings page. */
+export declare function phaseLabel(p: Phase): string;

package/dist/demo/bindings.js

@@ -0,0 +1,57 @@
+// Agent demo mode: TypeScript bindings.
+//
+// Two layers, both derived from Rust:
+//  1. The agent wire contract (`demo.*` tools). The source of truth is rightkit-agent-tools
+//     (`src/backends/demo.rs`, `docs/demo-contract.md`). These types mirror it field for field; the UI
+//     never sends them, but the shapes are kept here so the contract has one TypeScript home.
+//  2. The Tauri commands and events of the the host app host (`src-tauri/src/demo/`).
+//
+// Nothing here carries the session token: it never leaves the host.
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+export const DEMO_SERVICE = "rightkit.agent.demo";
+export const MAX_BATCH_STEPS = 20;
+export const EVENT_STATE = "demo://state";
+export const EVENT_CONSENT = "demo://consent";
+export const EVENT_RECEIPT = "demo://receipt";
+// ---------------------------------------------------------------- commands
+export const demoStatus = () => invoke("demo_status");
+export const demoSetEnabled = (enabled) => invoke("demo_set_enabled", { enabled });
+export const demoCatalog = () => invoke("demo_catalog");
+export const demoPrepare = () => invoke("demo_prepare");
+export const demoConsentRespond = (session, approve) => invoke("demo_consent_respond", { session, approve });
+export const demoBeginPerson = (app) => invoke("demo_begin_person", { app });
+export const demoStop = () => invoke("demo_stop");
+export const demoKill = () => invoke("demo_kill");
+export const demoBundleReveal = (name) => invoke("demo_bundle_reveal", { name });
+export const demoBundleDiscard = (name) => invoke("demo_bundle_discard", { name });
+export const onDemoState = (f) => listen(EVENT_STATE, (e) => f(e.payload));
+export const onDemoConsent = (f) => listen(EVENT_CONSENT, (e) => f(e.payload));
+export const onDemoReceipt = (f) => listen(EVENT_RECEIPT, (e) => f(e.payload));
+/** Tauri rejects with the command's `{code, message}`, or a string for a missing command. */
+export function demoErrorMessage(e) {
+    if (typeof e === "string")
+        return e;
+    if (e && typeof e === "object" && "message" in e)
+        return String(e.message);
+    return "Something went wrong.";
+}
+/** One-line wording for a phase, shared by the badge and the settings page. */
+export function phaseLabel(p) {
+    switch (p) {
+        case "awaiting_consent":
+            return "Waiting for your answer";
+        case "armed":
+            return "Ready, not recording yet";
+        case "recording":
+            return "Recording";
+        case "stopping":
+            return "Saving the recording";
+        case "sealed":
+            return "Recording saved";
+        case "killed":
+            return "Stopped by the kill control";
+        default:
+            return "Off";
+    }
+}