@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/views/Home.js

@@ -0,0 +1,192 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, ContextMenu, EmptyState, IconButton, PageShell, cx } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { pickFolder } from "../lib/dialog.js";
+import { errorCode, errorMessage, revealPath } from "../lib/engine.js";
+import { SETTINGS_CHANGED, mediaScopeAllow, projectsList, thumbnails, } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { baseName, projectShow } from "../lib/project.js";
+import { createHostSettingsBackend } from "../lib/settingsBackend.js";
+import { ErrorPanel, Thumbnail, timecode, Icon } from "../ui/index.js";
+const recentSettings = createHostSettingsBackend();
+let recentQueue = Promise.resolve();
+const recentDirs = (value) => Array.isArray(value) ? value.filter((dir) => typeof dir === "string").slice(0, 8) : [];
+function recentProjects(update) {
+    const run = recentQueue.then(async () => {
+        for (let attempt = 0;; attempt += 1) {
+            const snapshot = await recentSettings.load();
+            let dirs = recentDirs(snapshot.values.recent_projects);
+            if (!update)
+                return dirs;
+            dirs = update(dirs);
+            try {
+                await recentSettings.patch({ recent_projects: dirs }, snapshot.revision);
+                return dirs;
+            }
+            catch (error) {
+                if (attempt > 0 || errorCode(error) !== "revision_conflict")
+                    throw error;
+            }
+        }
+    });
+    recentQueue = run.catch(() => undefined);
+    return run;
+}
+export const loadRecent = () => recentProjects();
+export const rememberProject = (dir) => recentProjects((dirs) => [dir, ...dirs.filter((d) => d !== dir)].slice(0, 8));
+export const forgetProject = (dir) => recentProjects((dirs) => dirs.filter((d) => d !== dir));
+const STATUS = {
+    finished: { label: "Finished", tone: "ok" },
+    needs_review: { label: "Needs review", tone: "accent" },
+    media_only: { label: "Media only", tone: "neutral" },
+    missing_media: { label: "Missing media", tone: "warn" },
+};
+function editedAgo(edited) {
+    if (!edited)
+        return "";
+    const s = Math.max(0, Date.now() / 1000 - edited);
+    if (s < 90)
+        return "edited just now";
+    if (s < 3600)
+        return `edited ${Math.round(s / 60)}m ago`;
+    if (s < 86400)
+        return `edited ${Math.round(s / 3600)}h ago`;
+    return `edited ${Math.round(s / 86400)}d ago`;
+}
+function metaLine(p) {
+    const parts = [];
+    if (p.duration_ms)
+        parts.push(timecode(p.duration_ms));
+    if (p.aspect)
+        parts.push(p.aspect);
+    if (p.sources !== undefined)
+        parts.push(`${p.sources} clip${p.sources === 1 ? "" : "s"}`);
+    const ago = editedAgo(p.edited);
+    if (ago)
+        parts.push(ago);
+    return parts.join(" · ");
+}
+/** Owner review: stored `project.json` name, then the folder name de-slugged
+ *  (`finding-your-voice` → `Finding your voice`). */
+function displayName(p) {
+    if (p.name)
+        return p.name;
+    const folder = baseName(p.dir).replace(/\.cutright$/, "");
+    const words = folder.replace(/[-_]+/g, " ").trim();
+    return words.length > 0 ? words[0].toUpperCase() + words.slice(1) : folder;
+}
+function ProjectCardView({ card, onOpen, onRemove, }) {
+    const [thumb, setThumb] = useState();
+    const [menu, setMenu] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        let live = true;
+        setThumb(undefined);
+        const t = card.thumb;
+        if (!t)
+            return;
+        const target = t.render ? { render: t.render } : t.source ? { source: t.source } : null;
+        if (!target)
+            return;
+        // Render targets have no engine-side duration; frame the render at 20% of
+        // the card duration (per owner review), sources default to 20% inside.
+        const at_ms = t.render && card.duration_ms ? Math.round(card.duration_ms / 5) : undefined;
+        thumbnails(card.dir, target, { width: 480, ...(at_ms ? { at_ms } : {}) })
+            .then((r) => {
+            if (live && r.frames[0])
+                setThumb(assetUrl(r.frames[0].path));
+        })
+            .catch(() => undefined);
+        return () => {
+            live = false;
+        };
+    }, [card]);
+    const st = STATUS[card.status ?? ""] ?? (card.error ? STATUS.missing_media : STATUS.media_only);
+    const name = displayName(card);
+    return (_jsxs("div", { className: "Home-cardWrap", children: [_jsxs(Card, { flush: true, className: "Home-card", onClick: () => onOpen(card), label: `Open ${name}`, children: [_jsx(Thumbnail, { src: thumb, badge: card.duration_ms ? timecode(card.duration_ms) : undefined }), _jsxs("div", { className: "Home-cardBody", children: [_jsx("div", { className: "Home-cardName", children: name }), _jsx("div", { className: "Home-cardMeta", title: card.dir, children: metaLine(card) }), _jsx(Badge, { tone: st.tone, children: st.label })] })] }), _jsxs("div", { className: cx("Home-cardMenu", menu && "Home-cardMenu--open"), ref: menuRef, children: [_jsx(IconButton, { label: "Project actions", onClick: () => setMenu((m) => !m), children: _jsx(Icon, { name: "more-horizontal" }) }), menu && menuRef.current && (_jsx(ContextMenu, { anchor: menuRef.current, placement: "bottom-end", label: "Project actions", itemAs: "button", keyboard: "escape-only", autoFocus: false, showLead: false, onClose: () => setMenu(false), items: [
+                            { id: "reveal", label: "Reveal in Finder", run: () => void revealPath(card.dir).catch(() => undefined) },
+                            { id: "remove", label: "Remove from list", run: () => onRemove(card.dir) },
+                        ] }))] })] }));
+}
+export function Home({ ready, dropActive, onOpen, onCreate, onOpenFolder, onImportBundle, onFiles, }) {
+    const [cards, setCards] = useState(null);
+    const [error, setError] = useState(null);
+    const [broken, setBroken] = useState(null);
+    const [importError, setImportError] = useState(null);
+    const load = useCallback(async () => {
+        try {
+            setError(null);
+            const recents = await loadRecent();
+            if (recents.length === 0) {
+                setCards([]);
+                return;
+            }
+            const r = await projectsList(recents);
+            const byDir = new Map(r.projects.map((p) => [p.dir, p]));
+            // Recents the engine did not return (folder deleted) stay as warn cards.
+            const merged = recents.map((dir) => byDir.get(dir) ??
+                { dir, name: baseName(dir), status: "missing_media", error: "Folder not found" });
+            // Plus anything else discovered under the recent roots (subfolders).
+            for (const p of r.projects)
+                if (!merged.some((m) => m.dir === p.dir))
+                    merged.push(p);
+            // Card thumbnails stream through the asset protocol — grant scope
+            // before the cards mount so their <img> requests aren't refused.
+            await mediaScopeAllow(merged.filter((c) => !c.error).map((c) => c.dir), true).catch(() => undefined);
+            setCards(merged);
+        }
+        catch (e) {
+            setError(errorMessage(e));
+            setCards([]);
+        }
+    }, []);
+    useEffect(() => {
+        if (!ready)
+            return;
+        void load();
+        const changed = () => void load();
+        window.addEventListener(SETTINGS_CHANGED, changed);
+        return () => window.removeEventListener(SETTINGS_CHANGED, changed);
+    }, [load, ready]);
+    const openCard = (card) => {
+        setBroken(null);
+        if (card.error || card.status === "missing_media") {
+            void projectShow(card.dir)
+                .then(() => onOpen(card.dir))
+                .catch(() => setBroken(card));
+            return;
+        }
+        onOpen(card.dir);
+    };
+    const locate = async () => {
+        const dir = await pickFolder("Locate the project folder");
+        if (!dir)
+            return;
+        void projectShow(dir)
+            .then(async () => {
+            await rememberProject(dir);
+            setBroken(null);
+            onOpen(dir);
+        })
+            .catch((e) => setError(errorMessage(e)));
+    };
+    const remove = (dir) => {
+        void forgetProject(dir).then(() => {
+            if (broken?.dir === dir)
+                setBroken(null);
+            return load();
+        }).catch((e) => setError(errorMessage(e)));
+    };
+    const pickFiles = async () => {
+        const { pickMedia } = await import("../lib/dialog.js");
+        const files = await pickMedia();
+        if (files.length > 0)
+            onFiles(files);
+    };
+    const importBundle = () => {
+        setImportError(null);
+        void onImportBundle().then((message) => setImportError(message));
+    };
+    const grid = (cards?.length ?? 0) > 0;
+    return (_jsx(PageShell, { title: "Projects", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: importBundle, disabled: !ready, children: "Import bundle\u2026" }), _jsxs(Button, { variant: "secondary", onClick: onOpenFolder, disabled: !ready, children: [_jsx(Icon, { name: "folder-open" }), "Open folder\u2026"] }), _jsxs(Button, { variant: "primary", onClick: onCreate, disabled: !ready, children: [_jsx(Icon, { name: "plus" }), "New project"] })] }), maxWidth: 0, children: _jsxs("div", { className: cx("Home-body", dropActive && "Home-body--drop"), children: [!ready && _jsx("p", { className: "Home-dim", children: "Waiting for the engine\u2026" }), error && _jsx(ErrorPanel, { title: "Something went wrong", detail: error }), importError && _jsx(ErrorPanel, { title: "Couldn't import the bundle", message: importError }), broken && (_jsx(ErrorPanel, { title: `Can't open ${broken.name ?? baseName(broken.dir)}`, detail: broken.error ?? "The project folder or media is missing.", actions: _jsx(Button, { onClick: () => void locate(), children: "Locate folder\u2026" }) })), !grid && cards !== null && (_jsx("div", { className: "Home-dropzone", children: _jsx(EmptyState, { title: "Drop footage to start", action: _jsx(Button, { variant: "primary", onClick: () => void pickFiles(), disabled: !ready, children: "Choose files\u2026" }), icon: _jsx(Icon, { name: "clapperboard", width: 28, height: 28 }), children: "Talking head, screen recordings or any clips. Originals are never modified." }) })), grid && (_jsx("div", { className: "Home-grid", children: cards.map((c) => (_jsx(ProjectCardView, { card: c, onOpen: openCard, onRemove: remove }, c.dir))) }))] }) }));
+}

package/dist/views/Media.css

@@ -0,0 +1,65 @@
+/* Media screen — docs/design/app-ui.md §3.2. Tokens only. */
+
+.media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--s4);
+}
+
+.media-card { display: flex; flex-direction: column; gap: var(--s2); }
+.media-card__name {
+  font: 500 13px/1.3 var(--rk-font-body);
+  color: var(--rk-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.media-card__meta {
+  font-size: 12px;
+  color: var(--rk-ink-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.media-card__chips { display: flex; flex-wrap: nowrap; gap: var(--s1); overflow: hidden; }
+.media-card__missing {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--rk-warn);
+}
+
+.media-drop {
+  position: fixed;
+  inset: var(--s4);
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--rk-accent);
+  border-radius: var(--r-xl);
+  background: color-mix(in srgb, var(--rk-plane) 82%, transparent);
+  pointer-events: none;
+}
+.media-drop span {
+  font: 600 15px/1 var(--rk-font-body);
+  color: var(--rk-accent);
+}
+
+.media-meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--s1) var(--s4);
+  font-size: 12px;
+}
+.media-meta dt { color: var(--rk-ink-2); margin: 0; }
+.media-meta dd { margin: 0; color: var(--rk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-meta dd.mono { font-family: var(--rk-font-mono); font-size: 11px; }
+
+.media-excerpt {
+  font-size: 12px;
+  line-height: 1.65;
+  color: var(--rk-ink-2);
+  max-height: 120px;
+  overflow: auto;
+}

package/dist/views/OnboardingGate.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/**
+ * First-run gate: @rightkit/onboarding owns the legal agreement (documents expand inline
+ * in the shared gate) and the model step. The workspace mounts only after the current legal
+ * documents are accepted and setup is completed or skipped; a changed document re-prompts.
+ * A broken settings store never wedges the app.
+ */
+export declare function OnboardingGate({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/views/OnboardingGate.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Onboarding, isLegalAccepted, onboardingStateKey } from "@rightkit/onboarding";
+import { useEffect, useMemo, useState } from "react";
+import { LEGAL_MATERIAL_SHA256, REQUIRED_LEGAL_ACCEPTANCE_VERSION, legalStepConfig } from "../legal/legalConfig.js";
+import { createModelsBackend } from "../lib/modelsBackend.js";
+import { createHostSettingsBackend } from "../lib/settingsBackend.js";
+/**
+ * First-run gate: @rightkit/onboarding owns the legal agreement (documents expand inline
+ * in the shared gate) and the model step. The workspace mounts only after the current legal
+ * documents are accepted and setup is completed or skipped; a changed document re-prompts.
+ * A broken settings store never wedges the app.
+ */
+export function OnboardingGate({ children }) {
+    const [phase, setPhase] = useState("loading");
+    const settings = useMemo(() => createHostSettingsBackend(), []);
+    const models = useMemo(() => createModelsBackend(), []);
+    const legal = useMemo(() => legalStepConfig(), []);
+    useEffect(() => {
+        let live = true;
+        // One failed read must not send a set-up user back through first-run setup, so the
+        // read is tried again before the gate gives up and shows setup.
+        void (async () => {
+            for (let attempt = 0;; attempt += 1) {
+                try {
+                    const snap = await settings.load();
+                    if (!live)
+                        return;
+                    const st = snap.values[onboardingStateKey()];
+                    const done = st && isLegalAccepted(st, REQUIRED_LEGAL_ACCEPTANCE_VERSION, undefined, LEGAL_MATERIAL_SHA256)
+                        && (st.skipped === true || (st.completed ?? []).includes("models") || (st.skippedSteps ?? []).includes("models"));
+                    setPhase(done ? "done" : "setup");
+                    return;
+                }
+                catch {
+                    if (!live)
+                        return;
+                    if (attempt === 2) {
+                        setPhase("setup");
+                        return;
+                    }
+                    await new Promise((next) => setTimeout(next, 1000));
+                }
+            }
+        })();
+        return () => {
+            live = false;
+        };
+    }, [settings]);
+    if (phase === "loading")
+        return null;
+    if (phase === "done")
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(Onboarding, { settings: settings, legal: legal, models: models, requiredVersion: REQUIRED_LEGAL_ACCEPTANCE_VERSION, requiredDocumentsHash: LEGAL_MATERIAL_SHA256, documentsHash: LEGAL_MATERIAL_SHA256, onComplete: () => setPhase("done"), onSkip: () => setPhase("done") }));
+}

package/dist/views/Phrases.css

@@ -0,0 +1,45 @@
+/* Find phrases — docs/design/app-ui.md §3.6 */
+
+.phrases-body { display: flex; flex-direction: column; gap: var(--s4); }
+
+.phrases-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s3);
+}
+.phrases-controls .rk-field:first-child { flex: 1; }
+.phrases-controls .rk-field:nth-child(2) { width: 200px; flex: none; }
+
+.phrases-results { display: flex; flex-direction: column; gap: var(--s2); }
+.phrases-row {
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+  padding: var(--s3) var(--s4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+}
+.phrases-row__top { display: flex; align-items: center; gap: var(--s2); }
+.phrases-row__top > .cr-mono { font-size: 11px; }
+.phrases-row__spacer { flex: 1; }
+.phrases-row__ctx { margin: 0; font-size: 13px; line-height: 1.5; }
+.phrases-mark { background: var(--rk-accent-soft); color: var(--rk-ink); border-radius: 2px; padding: 0 1px; }
+
+.phrases-pop {
+  margin-top: var(--s2);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+  box-shadow: var(--rk-pop);
+  padding: var(--s2);
+  max-width: 420px;
+}
+.phrases-pop__head { display: flex; align-items: center; justify-content: space-between; }
+.phrases-pop video {
+  width: 100%;
+  max-height: 240px;
+  background: var(--cr-stage);
+  border-radius: var(--r-sm);
+  display: block;
+}

package/dist/views/PhrasesView.d.ts

@@ -0,0 +1,4 @@
+export declare function PhrasesView({ dir, onChanged }: {
+    dir: string;
+    onChanged: () => Promise<void>;
+}): import("react").JSX.Element;

package/dist/views/PhrasesView.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Find phrases — docs/design/app-ui.md §3.6.
+import { Badge, Button, EmptyState, Field, IconButton, Input, PageShell, SearchIcon, useShortcuts, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { clipExport, phraseSearch, sourceList } from "../lib/media.js";
+import { appendClip } from "../lib/project.js";
+import { RangePreview } from "../components/RangePreview.js";
+import { ErrorPanel, timecode, Icon } from "../ui/index.js";
+/** Inline preview popover: plays the match's context range on the real file. */
+function PreviewPop({ path, startMs, endMs, onClose }) {
+    return (_jsxs("div", { className: "phrases-pop", children: [_jsxs("div", { className: "phrases-pop__head", children: [_jsx("span", { className: "cr-overline", children: "Preview" }), _jsx(IconButton, { label: "Close preview", onClick: onClose, children: _jsx(Icon, { name: "x" }) })] }), _jsx(RangePreview, { path: path, startMs: startMs, endMs: endMs })] }));
+}
+/** Highlight the query inside the context sentence (`--accent-soft` mark). */
+function Context({ text, query }) {
+    const i = text.toLowerCase().indexOf(query.toLowerCase());
+    if (i < 0 || !query.trim())
+        return _jsx("span", { children: text });
+    return (_jsxs("span", { children: [text.slice(0, i), _jsx("mark", { className: "phrases-mark", children: text.slice(i, i + query.length) }), text.slice(i + query.length)] }));
+}
+export function PhrasesView({ dir, onChanged }) {
+    const toast = useToast();
+    const [sources, setSources] = useState([]);
+    const [filter, setFilter] = useState("");
+    const [query, setQuery] = useState("");
+    const [matches, setMatches] = useState(null);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        sourceList(dir)
+            .then((s) => setSources(s.sources))
+            .catch((e) => setError(errorMessage(e)));
+    }, [dir]);
+    // ⌘F focuses the search field.
+    useShortcuts([
+        {
+            id: "cr.phrases.search",
+            chord: "mod+f",
+            label: "Search phrases",
+            group: "Find phrases",
+            run: () => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            },
+        },
+    ]);
+    const search = useCallback(async () => {
+        if (!query.trim())
+            return;
+        setBusy("search");
+        setError(null);
+        try {
+            const r = await phraseSearch(dir, query.trim());
+            setMatches(r.matches);
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [dir, query]);
+    const insert = async (m) => {
+        setBusy(`${m.source}:${m.word_index}`);
+        try {
+            await appendClip(dir, m.source, m.context.start_ms, m.context.end_ms);
+            toast("Added to the timeline", { kind: "success" });
+            await onChanged();
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const exportClip = async (m) => {
+        setBusy(`export-${m.source}:${m.word_index}`);
+        try {
+            const r = await clipExport(dir, {
+                source: m.source,
+                start_ms: m.context.start_ms,
+                end_ms: m.context.end_ms,
+            });
+            toast(`Exported ${r.name} — find it under Exports`, { kind: "success" });
+            await onChanged();
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const srcById = new Map(sources.map((s) => [s.id, s]));
+    const shown = (matches ?? []).filter((m) => !filter || m.source === filter);
+    return (_jsx(PageShell, { title: "Find phrases", maxWidth: 0, subtitle: "Search spoken words across this project's transcripts", children: _jsxs("div", { className: "phrases-body", children: [_jsxs("div", { className: "phrases-controls", children: [_jsx(Field, { label: "Search", note: "Local search — indexes your own footage only.", children: (ids) => (_jsx(Input, { ...ids, ref: inputRef, placeholder: "Find spoken words\u2026", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => e.key === "Enter" && void search() })) }), _jsx(Field, { label: "Source", children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: filter, onChange: (e) => setFilter(e.target.value), children: [_jsx("option", { value: "", children: "All sources" }), sources.map((s) => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })) }), _jsxs(Button, { variant: "primary", onClick: () => void search(), disabled: (!query.trim()) || (busy === "search"), "aria-busy": (busy === "search") || undefined, children: [!(busy === "search") && _jsx("span", { className: "cr-glyph", children: _jsx(SearchIcon, {}) }), busy === "search" ? "Searching…" : "Search"] })] }), error && _jsx(ErrorPanel, { title: "Search failed", detail: error }), matches !== null && shown.length === 0 && (_jsx(EmptyState, { title: "No matches", icon: _jsx("span", { className: "cr-glyph cr-glyph--lg", children: _jsx(SearchIcon, {}) }), children: "Nothing in this project's transcripts matches that phrase." })), matches === null && !error && (_jsx(EmptyState, { title: "Find what's said", icon: _jsx(Icon, { name: "text-quote", width: 28, height: 28 }), children: "Search every transcript for a phrase, then preview or drop it on the timeline." })), _jsx("div", { className: "phrases-results", children: shown.map((m, i) => {
+                        const src = srcById.get(m.source);
+                        const key = `${m.source}:${m.word_index}:${i}`;
+                        return (_jsxs("div", { className: "phrases-row", children: [_jsxs("div", { className: "phrases-row__top", children: [_jsx("span", { className: "cr-mono cr-muted", children: timecode(m.start_ms) }), _jsx(Badge, { children: src?.name ?? m.source }), _jsx("span", { className: "phrases-row__spacer" }), src?.path ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPreview(preview === m ? null : m), children: "Preview" })) : null, _jsx(Button, { size: "sm", variant: "ghost", title: "Render this phrase range to Exports", onClick: () => void exportClip(m), disabled: (busy === `export-${m.source}:${m.word_index}`), "aria-busy": (busy === `export-${m.source}:${m.word_index}`) || undefined, children: busy === `export-${m.source}:${m.word_index}` ? "Exporting…" : "Export clip" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => void insert(m), disabled: (busy === `${m.source}:${m.word_index}`), "aria-busy": (busy === `${m.source}:${m.word_index}`) || undefined, children: busy === `${m.source}:${m.word_index}` ? "Adding…" : "Add to timeline" })] }), _jsxs("p", { className: "phrases-row__ctx cr-muted", children: ["\u2026", _jsx(Context, { text: m.context.text, query: query }), "\u2026"] }), preview === m && src?.path && (_jsx(PreviewPop, { path: src.path, startMs: m.context.start_ms, endMs: m.context.end_ms, onClose: () => setPreview(null) }))] }, key));
+                    }) })] }) }));
+}

package/dist/views/ProgressView.d.ts

@@ -0,0 +1,19 @@
+import { type ProgressState } from "../hooks/useProgress.js";
+/** Inline render bar kept for screens that embed it (Finished edit). */
+export declare function RenderBar({ progress }: {
+    progress: ProgressState;
+}): import("react").JSX.Element | null;
+export declare function ProgressView({ progress, jobError, onCancel, assembling, resumable, renderMissing, recovered, onResume, }: {
+    progress: ProgressState;
+    jobError: string | null;
+    onCancel: () => void;
+    assembling: boolean;
+    /** An unfinished assemble exists for this project (engine says running/failed/cancelled). */
+    resumable: boolean;
+    /** The recovered run's stored render file is gone; it must run again. */
+    renderMissing?: boolean;
+    /** Labels of the recovered assemble's jobs (shot prompts) when the engine
+     *  has no seeded request rows to show. */
+    recovered?: string[];
+    onResume: () => void;
+}): import("react").JSX.Element;

package/dist/views/ProgressView.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, EmptyState, PageShell } from "@rightkit/react-shell/react";
+import { ErrorPanel, ProgressRow, timecode, Icon } from "../ui/index.js";
+import { hostAppName } from "../appName.js";
+function elapsedOf(progress) {
+    // Frames don't carry start times; show the render's out-time as elapsed.
+    const r = progress.render;
+    if (r?.out_time_ms !== undefined)
+        return timecode(r.out_time_ms);
+    return undefined;
+}
+/** Inline render bar kept for screens that embed it (Finished edit). */
+export function RenderBar({ progress }) {
+    const r = progress.render;
+    if (!r)
+        return null;
+    const pct = r.total_ms && r.out_time_ms !== undefined
+        ? Math.max(0, Math.min(1, r.out_time_ms / r.total_ms))
+        : undefined;
+    return (_jsx(ProgressRow, { label: "Render", status: pct === undefined ? "Rendering" : `${Math.round(pct * 100)}%`, tone: "info", fraction: pct, elapsed: r.frame !== undefined ? `frame ${r.frame}` : undefined }));
+}
+export function ProgressView({ progress, jobError, onCancel, assembling, resumable, renderMissing, recovered, onResume, }) {
+    const jobs = Object.values(progress.jobs);
+    const error = progress.error?.message ?? jobError;
+    const running = progress.running || assembling;
+    // Recovered run: resumable and not currently executing (owner review: show
+    // recovered jobs as ProgressRows with a `Recovered` chip, never "Nothing
+    // running" + a floating Resume).
+    const showRecovered = resumable && !running && !progress.done;
+    const recoveredLabels = jobs.length > 0 ? jobs.map((j) => j.label) : (recovered ?? []);
+    const idle = !running && !showRecovered && jobs.length === 0 && !progress.render && !error && !progress.done && !progress.cancelled;
+    const renderPct = progress.render?.total_ms && progress.render.out_time_ms !== undefined
+        ? Math.max(0, Math.min(1, progress.render.out_time_ms / progress.render.total_ms))
+        : undefined;
+    return (_jsx(PageShell, { title: "Progress", actions: _jsxs(_Fragment, { children: [running && (_jsx(Button, { variant: "secondary", onClick: onCancel, children: progress.render ? "Cancel render" : "Cancel assembly" })), showRecovered && (_jsxs(Button, { variant: "secondary", onClick: onResume, children: [_jsx(Icon, { name: "rotate-ccw" }), "Resume"] }))] }), maxWidth: 0, subtitle: running ? "Generation running" : progress.done ? "Finished" : showRecovered ? "Recovered job" : undefined, children: _jsxs("div", { className: "shell-stack", children: [idle && (_jsx(EmptyState, { title: "Nothing running", icon: _jsx(Icon, { name: "check", width: 28, height: 28 }), children: "Generation and render jobs show up here while they run." })), showRecovered && (_jsx(Card, { children: recoveredLabels.length === 0 ? (_jsx(ProgressRow, { label: "Assembly", status: "Recovered", tone: "info", fraction: null })) : (recoveredLabels.map((label, i) => (_jsx(ProgressRow, { label: label, status: "Recovered", tone: "info", fraction: null }, i)))) })), renderMissing && !running && (_jsx(ErrorPanel, { title: "This render is missing", detail: "The export file no longer exists. Resume to render it again." })), error && (_jsx(ErrorPanel, { title: "The job failed", detail: error, actions: resumable && !running ? (_jsxs(Button, { variant: "secondary", onClick: onResume, children: [_jsx(Icon, { name: "rotate-ccw" }), "Resume"] })) : undefined })), progress.done && (_jsx("div", { children: _jsx(Badge, { tone: "ok", children: "Assembly complete" }) })), progress.cancelled && (_jsxs("p", { className: "m-0 text-[13px]", style: { color: "var(--rk-ink-2)" }, children: ["Cancelled. Finished ", hostAppName(), " jobs are kept; Resume continues with the same assemble id and does not submit them again."] })), progress.resumed && (_jsx("p", { className: "m-0 text-[12px]", style: { color: "var(--rk-ink-2)" }, children: "Resumed an earlier run: existing jobs are reused." })), progress.stages.length > 0 && (_jsx(Card, { children: progress.stages.map((s, i) => (_jsx(ProgressRow, { label: s, status: i === progress.stages.length - 1 && running ? "Running" : "Done", tone: i === progress.stages.length - 1 && running ? "info" : "ok", fraction: i === progress.stages.length - 1 && running ? undefined : null }, s))) })), jobs.length > 0 && !showRecovered && (_jsx(Card, { children: jobs.map((j) => (_jsx(ProgressRow, { label: j.label, status: j.status ?? j.request ?? "queued", tone: j.status === "failed" ? "danger" : j.imported ? "ok" : "info", elapsed: j.stage ?? undefined, error: j.status === "failed" ? (j.message ?? "failed") : undefined }, j.id))) })), progress.render && (_jsx(Card, { children: _jsx(ProgressRow, { label: "Render", status: renderPct === undefined ? "Rendering" : `${Math.round(renderPct * 100)}%`, tone: "info", fraction: renderPct, elapsed: elapsedOf(progress) }) })), progress.timeline && (_jsxs("p", { className: "m-0 text-[12px]", style: { color: "var(--rk-ink-2)" }, children: ["Timeline built: ", progress.timeline.video_clips ?? 0, " clips,", " ", progress.timeline.titles ?? 0, " titles"] })), progress.imports > 0 && (_jsxs("p", { className: "m-0 text-[13px]", "aria-live": "polite", children: ["Imported ", progress.imports, " asset", progress.imports === 1 ? "" : "s"] }))] }) }));
+}

package/dist/views/Prompt.css

@@ -0,0 +1,84 @@
+/* From prompt — app-ui.md §3.8 */
+
+.Prompt {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  max-width: 720px;
+}
+
+.Prompt .rk-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+
+/* Header controls sit left-aligned after the title (owner review). */
+.Prompt-cardHead {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+}
+.Prompt-cardHead .rk-seg { margin-left: var(--s2); }
+.Prompt-cardHead > :last-child:not(h2):not(.rk-seg) { margin-left: auto; }
+.Prompt-cardHead h2 {
+  margin: 0;
+  font: 600 15px/1.3 var(--rk-font-body);
+}
+
+.Prompt-grRow {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+}
+.Prompt-label {
+  font: 500 11px/1 var(--rk-font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--rk-ink-2);
+}
+
+.Prompt-error {
+  margin: 0;
+  font-size: 13px;
+  color: var(--rk-warn);
+}
+
+/* One card of shot rows divided by 1px lines (owner review: no nested cards). */
+.Prompt-shotRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  padding: var(--s3) 0;
+}
+.Prompt-shotRow + .Prompt-shotRow { border-top: 1px solid var(--rk-line); }
+
+/* kind | provider | model | duration — the model column stays wide enough
+   that model names don't truncate. */
+.Prompt-shotGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr 120px;
+  gap: var(--s2);
+  align-items: end;
+}
+.Prompt-shotGrid .rk-field { min-width: 0; }
+.Prompt-shotGrid .rk-input, .Prompt-shotGrid .rk-input { width: 100%; }
+
+.Prompt-shotGrid--auto { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+
+.Prompt-titleRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: var(--s2);
+}
+.Prompt-titleRow .rk-field { flex: 1; min-width: 7rem; }
+
+.Prompt-actions {
+  display: flex;
+  gap: var(--s2);
+}
+
+.Prompt-confirm { border-color: var(--rk-accent); }
+.Prompt-confirmInner { display: flex; flex-direction: column; gap: var(--s3); font-size: 13px; }
+.Prompt-confirmInner p { margin: 0; }

package/dist/views/PromptPanel.d.ts

@@ -0,0 +1,8 @@
+import type { ProgressState } from "../hooks/useProgress.js";
+import type { AssembleForm } from "../lib/assemble.js";
+export declare function PromptPanel({ busy, progress, onSubmit, onOpenFinished, }: {
+    busy: boolean;
+    progress?: ProgressState;
+    onSubmit: (form: AssembleForm) => void;
+    onOpenFinished?: () => void;
+}): import("react").JSX.Element;