@archastro/astroshot-review 0.2.1

package/dist/ui/movie-player.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plays a movie into a cell box using ffmpeg frames and the graphics layer.
+ * The poster stays underneath until the first frame lands.
+ */
+import { Box, Text } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { FramePlayer, probeVideo } from "../video/ffmpeg.js";
+import { useServices } from "./context.js";
+import { Picture } from "./picture.js";
+import { theme } from "./theme.js";
+const MAX_FRAME_WIDTH = 1024;
+export function MoviePlayer({ videoPath, posterPath, posterVersion = 0, width, height, playback, onPlayback }) {
+    const { layer, capabilities, ffmpeg } = useServices();
+    const stageRef = useRef(null);
+    const handleRef = useRef(null);
+    const playerRef = useRef(null);
+    const [info, setInfo] = useState(null);
+    const [hasFrame, setHasFrame] = useState(false);
+    const enabled = capabilities.graphics === "kitty" || capabilities.graphics === "herdr";
+    const positionRef = useRef(playback.positionMs);
+    positionRef.current = playback.positionMs;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handle = layer.registerFrames({ z: 1 });
+        handle.setNode(stageRef.current);
+        handleRef.current = handle;
+        layer.scheduleFlush();
+        return () => {
+            handle.unregister();
+            handleRef.current = null;
+        };
+    }, [enabled, layer]);
+    useEffect(() => {
+        let cancelled = false;
+        setInfo(null);
+        void probeVideo(videoPath, ffmpeg).then((result) => {
+            if (cancelled)
+                return;
+            setInfo(result);
+            if (result?.durationMs && !playback.durationMs)
+                onPlayback({ durationMs: result.durationMs });
+            if (!result)
+                onPlayback({ error: ffmpeg.ffmpeg ? "Could not read this movie" : "Install ffmpeg to play movies" });
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoPath]);
+    // Start/stop/seek the decoder.
+    useEffect(() => {
+        playerRef.current?.stop();
+        playerRef.current = null;
+        if (!enabled || !info || !playback.playing)
+            return;
+        if (!ffmpeg.ffmpeg) {
+            onPlayback({ playing: false, error: "Install ffmpeg to play movies (brew install ffmpeg)" });
+            return;
+        }
+        const bounds = {
+            width: Math.min(MAX_FRAME_WIDTH, width * capabilities.cellWidth),
+            height: Math.min(Math.round((MAX_FRAME_WIDTH * 3) / 4), height * capabilities.cellHeight),
+        };
+        let lastReport = 0;
+        const player = new FramePlayer({
+            videoPath,
+            bounds,
+            sourceSize: { width: info.width, height: info.height },
+            startMs: positionRef.current,
+            ffmpegPath: ffmpeg.ffmpeg,
+            onFrame: (frame) => {
+                handleRef.current?.pushFrame({ png: frame.png, width: frame.width, height: frame.height });
+                if (!hasFrame)
+                    setHasFrame(true);
+                if (frame.tMs - lastReport >= 250) {
+                    lastReport = frame.tMs;
+                    onPlayback({ positionMs: frame.tMs });
+                }
+            },
+            onEnd: () => onPlayback({ playing: false, ended: true, positionMs: playback.durationMs ?? positionRef.current }),
+            onError: (error) => onPlayback({ playing: false, error: error.message }),
+        });
+        playerRef.current = player;
+        player.start();
+        return () => {
+            player.stop();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, info, playback.playing, playback.seekToken, width, height, videoPath]);
+    useEffect(() => () => handleRef.current?.clearFrame(), []);
+    return (_jsxs(Box, { ref: stageRef, width: width, height: height, flexShrink: 0, alignItems: "center", justifyContent: "center", overflow: "hidden", children: [!hasFrame ? _jsx(Picture, { src: posterPath, version: posterVersion, width: width, height: height, label: "\u25B6 movie" }) : null, !enabled ? (_jsx(Box, { position: "absolute", children: _jsx(Text, { color: theme.muted, children: "Poster shown \u00B7 press O to open the movie" }) })) : null] }));
+}
+export function formatClock(ms) {
+    const total = Math.max(0, Math.round(ms / 1000));
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
+    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+export function ProgressBar({ positionMs, durationMs, chapters, width, playing, }) {
+    const clock = `${formatClock(positionMs)} / ${durationMs ? formatClock(durationMs) : "--:--"}`;
+    const barWidth = Math.max(4, width - clock.length - 6);
+    const ratio = durationMs ? Math.min(1, positionMs / durationMs) : 0;
+    const filled = Math.round(ratio * barWidth);
+    const markers = new Set(chapters
+        .filter((chapter) => chapter.tMs !== undefined && durationMs)
+        .map((chapter) => Math.min(barWidth - 1, Math.round((chapter.tMs / durationMs) * barWidth))));
+    let bar = "";
+    for (let index = 0; index < barWidth; index += 1) {
+        if (index === filled)
+            bar += "●";
+        else if (markers.has(index))
+            bar += "┼";
+        else
+            bar += index < filled ? "━" : "─";
+    }
+    return (_jsxs(Box, { flexShrink: 0, width: width, height: 1, children: [_jsx(Text, { color: playing ? theme.green : theme.muted, children: playing ? "▶ " : "⏸ " }), _jsx(Text, { color: theme.purple, children: bar }), _jsxs(Text, { color: theme.muted, children: [" ", clock] })] }));
+}

package/dist/ui/picture.d.ts

@@ -0,0 +1,19 @@
+export interface PictureProps {
+    src: string | null;
+    /** Changes when the file's bytes change (mtime), so a re-capture refreshes. */
+    version?: number;
+    width: number;
+    height: number;
+    /** Text shown when the terminal cannot draw pictures. */
+    label?: string;
+    border?: boolean;
+    z?: number;
+    /** Allow the image to scale up to this multiple of native to fill its box (default 1 = never upscale). */
+    maxUpscale?: number;
+    /** Magnification: 1 shows the whole image; >1 crops in. */
+    zoom?: number;
+    /** Pan center as a fraction of the image, [0,1]. */
+    panX?: number;
+    panY?: number;
+}
+export declare function Picture({ src, version, width, height, label, border, z, maxUpscale, zoom, panX, panY }: PictureProps): import("react").JSX.Element;

package/dist/ui/picture.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shows an image in a reserved cell box. With the Kitty protocol the graphics
+ * layer paints real pixels; otherwise (mosh, tmux, herdr, or a plain terminal)
+ * it renders the picture as truecolor half-block text, which survives any
+ * transport. Falls back to a labeled placeholder when nothing can be drawn.
+ */
+import { Box, Text } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { rgbToHalfBlockLines } from "../images/halfblocks.js";
+import { useServices } from "./context.js";
+import { theme, truncate } from "./theme.js";
+export function Picture({ src, version = 0, width, height, label, border = false, z, maxUpscale = 1, zoom = 1, panX = 0.5, panY = 0.5 }) {
+    const { layer, service, capabilities } = useServices();
+    const ref = useRef(null);
+    const handleRef = useRef(null);
+    const [failure, setFailure] = useState(null);
+    const mode = capabilities.graphics;
+    // Both Kitty and herdr paint through the out-of-band layer.
+    const kitty = mode === "kitty" || mode === "herdr";
+    const innerWidth = Math.max(1, width - (border ? 2 : 0));
+    const innerHeight = Math.max(1, height - (border ? 2 : 0));
+    // ---- Kitty: reserve the box and let the out-of-band layer paint it. ----
+    useEffect(() => {
+        if (!kitty)
+            return;
+        const handle = layer.register({ src, version, z, maxUpscale, zoom });
+        handleRef.current = handle;
+        handle.setNode(ref.current);
+        // Ink already painted this commit before the effect ran; measure now so
+        // the picture is requested without waiting for an unrelated re-render.
+        layer.scheduleFlush();
+        return () => {
+            handle.unregister();
+            handleRef.current = null;
+        };
+        // The layer handle lives for the component; src changes go through setSource.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [kitty, layer]);
+    useEffect(() => {
+        if (!kitty)
+            return;
+        handleRef.current?.setSource(src, version);
+        setFailure(null);
+    }, [kitty, src, version]);
+    useEffect(() => {
+        if (!kitty)
+            return;
+        handleRef.current?.setView({ zoom, panX, panY, maxUpscale });
+    }, [kitty, zoom, panX, panY, maxUpscale]);
+    useEffect(() => {
+        if (!kitty || !handleRef.current)
+            return;
+        const id = handleRef.current.id;
+        const timer = setInterval(() => {
+            const problem = layer.failure(id);
+            if (problem !== failure)
+                setFailure(problem);
+        }, 400);
+        timer.unref();
+        return () => clearInterval(timer);
+    }, [kitty, layer, failure]);
+    // ---- Half-blocks: decode to a tiny RGB buffer and draw two pixels per cell. ----
+    const [lines, setLines] = useState(null);
+    useEffect(() => {
+        if (mode !== "halfblocks")
+            return;
+        let cancelled = false;
+        setFailure(null);
+        if (!src) {
+            setLines(null);
+            return;
+        }
+        // One cell is one pixel wide and two pixels tall.
+        const target = { width: innerWidth, height: innerHeight * 2 };
+        void service.prepare(src, target, "rgb").then((prepared) => {
+            if (cancelled)
+                return;
+            setLines(rgbToHalfBlockLines({ width: prepared.width, height: prepared.height, rgb: prepared.data }));
+        }, (error) => {
+            if (cancelled)
+                return;
+            setLines(null);
+            setFailure(error instanceof Error ? error.message : String(error));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mode, service, src, version, innerWidth, innerHeight]);
+    const art = mode === "halfblocks" && src && lines && lines.length > 0 && !failure;
+    const placeholder = !art && (!kitty || !src || failure);
+    const caption = failure
+        ? truncate(`Preview unavailable · ${failure}`, innerWidth)
+        : !src
+            ? "No image"
+            : mode === "halfblocks"
+                ? "Rendering…"
+                : truncate(label ?? "Preview needs a graphics terminal", innerWidth);
+    return (_jsx(Box, { ref: ref, width: width, height: height, flexShrink: 0, borderStyle: border ? "round" : undefined, borderColor: theme.faint, alignItems: "center", justifyContent: "center", overflow: "hidden", children: art ? (_jsx(Box, { flexDirection: "column", flexShrink: 0, alignItems: "center", children: lines.slice(0, innerHeight).map((line, index) => (_jsx(Text, { wrap: "truncate-end", children: line }, index))) })) : placeholder ? (_jsx(Box, { flexShrink: 0, width: innerWidth, height: innerHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { color: theme.muted, children: caption }) })) : null }));
+}

package/dist/ui/selectors.d.ts

@@ -0,0 +1,26 @@
+import type { FrictionLog, FrictionRun, ReviewState, Shot } from "../data/model.js";
+export type StreamFilter = "unseen" | "history";
+export declare function reviewStateOf(shot: Shot): ReviewState;
+export declare function filterShots(shots: Shot[], filter: StreamFilter, moviesOnly: boolean): Shot[];
+export interface StreamCounts {
+    pending: number;
+    seen: number;
+    movies: number;
+}
+export declare function streamCounts(shots: Shot[], moviesOnly: boolean): StreamCounts;
+export interface StreamGroup {
+    /** Path of the last shot in the group: a stable anchor. */
+    id: string;
+    worktreePath: string;
+    worktree: string;
+    worktreeShort: string;
+    shots: Shot[];
+}
+/** Contiguous runs of the same worktree, exactly like the app's stream. */
+export declare function contiguousGroups(shots: Shot[]): StreamGroup[];
+/** Same worktree, feature, and run; oldest first by sequence, else capture time. */
+export declare function reviewSiblings(all: Shot[], shot: Shot): Shot[];
+export declare function latestRun(log: FrictionLog): FrictionRun | null;
+export declare function frictionState(log: FrictionLog): ReviewState;
+export declare function filterFrictionLogs(logs: FrictionLog[], filter: StreamFilter): FrictionLog[];
+export declare function frictionSummary(log: FrictionLog): string;

package/dist/ui/selectors.js

@@ -0,0 +1,69 @@
+export function reviewStateOf(shot) {
+    return shot.review?.state ?? "pending";
+}
+export function filterShots(shots, filter, moviesOnly) {
+    const pool = moviesOnly ? shots.filter((shot) => shot.isMovie) : shots;
+    return pool.filter((shot) => (filter === "unseen" ? reviewStateOf(shot) !== "seen" : reviewStateOf(shot) === "seen"));
+}
+export function streamCounts(shots, moviesOnly) {
+    const pool = moviesOnly ? shots.filter((shot) => shot.isMovie) : shots;
+    return {
+        pending: pool.filter((shot) => reviewStateOf(shot) !== "seen").length,
+        seen: pool.filter((shot) => reviewStateOf(shot) === "seen").length,
+        movies: shots.filter((shot) => shot.isMovie).length,
+    };
+}
+/** Contiguous runs of the same worktree, exactly like the app's stream. */
+export function contiguousGroups(shots) {
+    const groups = [];
+    for (const shot of shots) {
+        const last = groups.at(-1);
+        if (last && last.worktreePath === shot.worktreePath) {
+            last.shots.push(shot);
+            last.id = shot.path;
+        }
+        else {
+            groups.push({
+                id: shot.path,
+                worktreePath: shot.worktreePath,
+                worktree: shot.worktree,
+                worktreeShort: shot.worktreeShort,
+                shots: [shot],
+            });
+        }
+    }
+    return groups;
+}
+/** Same worktree, feature, and run; oldest first by sequence, else capture time. */
+export function reviewSiblings(all, shot) {
+    return all
+        .filter((candidate) => candidate.worktreePath === shot.worktreePath &&
+        candidate.feature === shot.feature &&
+        candidate.runId === shot.runId)
+        .sort((a, b) => {
+        if (a.sequence && b.sequence && a.sequence !== b.sequence) {
+            return a.sequence < b.sequence ? -1 : 1;
+        }
+        return a.capturedAt - b.capturedAt;
+    });
+}
+export function latestRun(log) {
+    return log.runs[0] ?? null;
+}
+export function frictionState(log) {
+    return latestRun(log)?.review?.state ?? "pending";
+}
+export function filterFrictionLogs(logs, filter) {
+    return logs.filter((log) => (filter === "unseen" ? frictionState(log) !== "seen" : frictionState(log) === "seen"));
+}
+export function frictionSummary(log) {
+    const run = latestRun(log);
+    const steps = run?.steps.length ?? 0;
+    const improve = run?.steps.reduce((total, step) => total + step.improve.length, 0) ?? 0;
+    const parts = [];
+    if (steps > 0)
+        parts.push(steps === 1 ? "1 step" : `${steps} steps`);
+    if (improve > 0)
+        parts.push(`${improve} improve`);
+    return parts.join(" · ");
+}

package/dist/ui/settings.d.ts

@@ -0,0 +1,5 @@
+export declare function SettingsPane({ roots, width, height }: {
+    roots: string[];
+    width: number;
+    height: number;
+}): import("react").JSX.Element;

package/dist/ui/settings.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import os from "node:os";
+import { Box, Text } from "ink";
+import { indexCachePath } from "../data/index-cache.js";
+import { abbreviateHome } from "../data/paths.js";
+import { MetaRow, Rule, SectionLabel } from "./chrome.js";
+import { useServices } from "./context.js";
+import { theme } from "./theme.js";
+export function SettingsPane({ roots, width, height }) {
+    const { capabilities, ffmpeg, rootsSource, version } = useServices();
+    const inner = width - 2;
+    const home = os.homedir();
+    const sourceLabel = rootsSource === "app" ? "from the Astroshots app preferences" : rootsSource === "cli" ? "from --root" : "current directory";
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, paddingX: 1, overflow: "hidden", children: [_jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: theme.blue, children: "\u2039 Stream" }), _jsxs(Text, { color: theme.muted, children: ["astroshot review ", version] })] }), _jsx(SectionLabel, { children: "WATCHED FOLDERS" }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: roots.length === 0
+                    ? "Pick the directories that contain your projects. Nothing is watched until you choose at least one."
+                    : `Every worktree below any of these folders streams into one feed (${sourceLabel}).` }), roots.length === 0 ? (_jsx(Text, { color: theme.faint, children: "No folders yet \u00B7 astroshot review --root ~/projects" })) : (roots.map((root) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.green, children: "\u25CF " }), abbreviateHome(root, home)] }, root)))), _jsx(Rule, { width: inner }), _jsx(SectionLabel, { children: "GRAPHICS" }), _jsx(MetaRow, { label: "Images", value: capabilities.graphics === "kitty" ? "Kitty graphics (pixel-perfect)" : capabilities.graphics === "herdr" ? "herdr pane graphics (pixel-perfect)" : capabilities.graphics === "halfblocks" ? `half-block text · ${capabilities.reason ?? ""}`.trim() : `off · ${capabilities.reason ?? "unsupported"}`, width: inner }), _jsx(MetaRow, { label: "Cell", value: `${capabilities.cellWidth}×${capabilities.cellHeight} px (${capabilities.cellSource})`, width: inner }), _jsx(MetaRow, { label: "Transport", value: capabilities.fileMedium ? "file path (local)" : "inline bytes", width: inner }), _jsx(MetaRow, { label: "Session", value: [capabilities.insideSsh ? "ssh" : "local", capabilities.insideMosh ? "mosh" : null, capabilities.insideHerdr ? "herdr" : null, capabilities.insideTmux ? "tmux" : null].filter(Boolean).join(" · ") || "local", width: inner }), _jsx(Rule, { width: inner }), _jsx(SectionLabel, { children: "MOVIES" }), _jsx(MetaRow, { label: "ffmpeg", value: ffmpeg.ffmpeg ? `${ffmpeg.ffmpeg}${ffmpeg.version ? ` (${ffmpeg.version})` : ""}` : "not found · brew install ffmpeg", width: inner }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: "Movies play in the tray only with Kitty graphics. Otherwise the poster shows and O opens the file in your default player." }), _jsx(Rule, { width: inner }), _jsx(SectionLabel, { children: "HARNESS LAYOUT" }), _jsx(Text, { color: theme.muted, children: "Write frames here so Astroshots can find them:" }), _jsx(Text, { color: theme.muted, children: "  .astroshot/<feature>/" }), _jsx(Text, { color: theme.muted, children: "    manifest.json" }), _jsx(Text, { color: theme.muted, children: "    0001-slug.png" }), _jsx(Rule, { width: inner }), _jsx(MetaRow, { label: "Index", value: abbreviateHome(indexCachePath(), home), width: inner })] }));
+}

package/dist/ui/stream.d.ts

@@ -0,0 +1,38 @@
+import type { Shot } from "../data/model.js";
+import type { StreamCounts, StreamFilter, StreamGroup } from "./selectors.js";
+export type StreamItem = {
+    kind: "header";
+    group: StreamGroup;
+    height: 1;
+} | {
+    kind: "shot";
+    shot: Shot;
+    group: StreamGroup;
+    height: number;
+};
+export declare const SHOT_ROW_HEIGHT = 4;
+export declare function flattenStream(groups: StreamGroup[], collapsed: Set<string>): StreamItem[];
+/** Headers of expanded groups are labels, not stops; collapsed ones stay reachable. */
+export declare function isNavigable(item: StreamItem, collapsed: Set<string>): boolean;
+/** Nearest navigable index at or after `from` (direction +1) or before it (−1). */
+export declare function nextNavigable(items: StreamItem[], collapsed: Set<string>, from: number, direction: 1 | -1): number;
+/** First item index so the cursor item is fully visible within `height` lines. */
+export declare function scrollWindow(items: StreamItem[], cursor: number, scrollTop: number, height: number): number;
+export interface StreamProps {
+    items: StreamItem[];
+    collapsed: Set<string>;
+    cursor: number;
+    scrollTop: number;
+    width: number;
+    height: number;
+    filter: StreamFilter;
+    moviesOnly: boolean;
+    counts: StreamCounts;
+    focused: boolean;
+    scanning: boolean;
+    hasRoots: boolean;
+    totalShots: number;
+    bulkBusy: boolean;
+}
+export declare function FilterBar({ filter, moviesOnly, counts, width, bulkBusy }: Pick<StreamProps, "filter" | "moviesOnly" | "counts" | "width" | "bulkBusy">): import("react").JSX.Element;
+export declare function StreamList(props: StreamProps): import("react").JSX.Element;

package/dist/ui/stream.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The Shots stream: filter bar, contiguous worktree groups, and one row per
+ * image with a live thumbnail.
+ */
+import { Box, Text } from "ink";
+import { durationLabel } from "../data/manifest.js";
+import { EmptyState, ExecutionPill, MovieBadge, ReviewBadge, WorktreeChip } from "./chrome.js";
+import { useServices } from "./context.js";
+import { Picture } from "./picture.js";
+import { reviewStateOf } from "./selectors.js";
+import { clockTime, theme, truncate } from "./theme.js";
+export const SHOT_ROW_HEIGHT = 4;
+export function flattenStream(groups, collapsed) {
+    const items = [];
+    for (const group of groups) {
+        items.push({ kind: "header", group, height: 1 });
+        if (collapsed.has(group.id))
+            continue;
+        for (const shot of group.shots)
+            items.push({ kind: "shot", shot, group, height: SHOT_ROW_HEIGHT });
+    }
+    return items;
+}
+/** Headers of expanded groups are labels, not stops; collapsed ones stay reachable. */
+export function isNavigable(item, collapsed) {
+    return item.kind === "shot" || collapsed.has(item.group.id);
+}
+/** Nearest navigable index at or after `from` (direction +1) or before it (−1). */
+export function nextNavigable(items, collapsed, from, direction) {
+    let index = from;
+    while (index >= 0 && index < items.length) {
+        if (isNavigable(items[index], collapsed))
+            return index;
+        index += direction;
+    }
+    // Fall back to the nearest navigable item in the other direction.
+    index = from - direction;
+    while (index >= 0 && index < items.length) {
+        if (isNavigable(items[index], collapsed))
+            return index;
+        index -= direction;
+    }
+    return Math.max(0, Math.min(from, items.length - 1));
+}
+/** First item index so the cursor item is fully visible within `height` lines. */
+export function scrollWindow(items, cursor, scrollTop, height) {
+    if (items.length === 0)
+        return 0;
+    const clampedCursor = Math.max(0, Math.min(cursor, items.length - 1));
+    let top = Math.max(0, Math.min(scrollTop, items.length - 1));
+    if (clampedCursor < top)
+        top = clampedCursor;
+    const fits = (start) => {
+        let used = 0;
+        for (let index = start; index <= clampedCursor; index += 1) {
+            used += items[index].height;
+            if (used > height)
+                return false;
+        }
+        return true;
+    };
+    while (!fits(top) && top < clampedCursor)
+        top += 1;
+    return top;
+}
+function thumbnailCols(cellWidth, cellHeight) {
+    const rows = SHOT_ROW_HEIGHT - 1;
+    const heightPx = rows * cellHeight;
+    return Math.max(6, Math.min(16, Math.round((heightPx * (88 / 56)) / cellWidth)));
+}
+export function FilterBar({ filter, moviesOnly, counts, width, bulkBusy }) {
+    const title = filter === "unseen" ? `Unseen (${counts.pending})` : `History (${counts.seen})`;
+    return (_jsxs(Box, { flexShrink: 0, width: width, height: 1, paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { bold: true, children: title }), _jsxs(Text, { children: [counts.movies > 0 ? (_jsx(Text, { color: moviesOnly ? theme.purple : theme.muted, inverse: moviesOnly, children: " m Movies " })) : null, filter === "unseen" && counts.pending > 0 ? (_jsx(Text, { color: bulkBusy ? theme.muted : theme.green, children: bulkBusy ? " S Marking… " : " S Seen all " })) : null, _jsx(Text, { color: theme.blue, children: filter === "unseen" ? " u History " : " u Unseen " })] })] }));
+}
+function GroupHeader({ group, collapsed, selected, width }) {
+    const unseen = group.shots.filter((shot) => reviewStateOf(shot) !== "seen").length;
+    return (_jsxs(Box, { flexShrink: 0, width: width, height: 1, paddingLeft: 1, backgroundColor: selected ? theme.selection : undefined, children: [_jsx(Text, { color: selected ? theme.brand : theme.muted, children: collapsed ? "▸ " : "▾ " }), _jsx(WorktreeChip, { label: group.worktreeShort }), _jsxs(Text, { color: theme.muted, wrap: "truncate", children: [" ", group.worktree !== group.worktreeShort ? `${truncate(group.worktree, Math.max(8, width - 26))} · ` : "", group.shots.length, " ", group.shots.length === 1 ? "frame" : "frames", unseen > 0 ? _jsxs(Text, { color: theme.amber, children: [" \u00B7 ", unseen, " unseen"] }) : null] })] }));
+}
+function ShotRow({ shot, selected, width, thumbCols, inGroup }) {
+    const state = reviewStateOf(shot);
+    const textWidth = Math.max(12, width - thumbCols - 4);
+    const time = clockTime(shot.capturedAt);
+    const titleWidth = Math.max(8, textWidth - time.length - 2);
+    const rowHeight = SHOT_ROW_HEIGHT - 1;
+    return (_jsx(Box, { flexShrink: 0, width: width, height: SHOT_ROW_HEIGHT, flexDirection: "column", children: _jsxs(Box, { flexShrink: 0, width: width, height: rowHeight, flexDirection: "row", children: [_jsx(Box, { flexShrink: 0, width: 1, height: rowHeight, backgroundColor: selected ? theme.green : undefined }), _jsx(Picture, { src: shot.path, version: shot.mtimeMs, width: thumbCols, height: rowHeight, label: shot.isMovie ? "▶ movie" : "still" }), _jsxs(Box, { flexDirection: "column", width: textWidth, marginLeft: 1, height: rowHeight, overflow: "hidden", flexShrink: 0, backgroundColor: selected ? theme.selection : undefined, children: [_jsxs(Box, { flexShrink: 0, width: textWidth, height: 1, justifyContent: "space-between", children: [_jsxs(Text, { wrap: "truncate", children: [inGroup ? null : _jsx(WorktreeChip, { label: shot.worktreeShort }), shot.status === "fail" ? _jsx(Text, { color: theme.red, children: "\u25CF " }) : null, _jsx(Text, { bold: true, children: truncate(`${shot.feature} · ${shot.title}`, titleWidth) })] }), _jsx(Text, { color: theme.muted, children: time })] }), _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(shot.description || shot.fileName, textWidth) }), _jsxs(Text, { wrap: "truncate", children: [shot.isMovie ? (_jsxs(_Fragment, { children: [_jsx(MovieBadge, { duration: durationLabel(shot.durationMs) }), _jsx(Text, { children: " " })] })) : null, _jsx(ReviewBadge, { state: state, stale: shot.review?.isStale }), shot.status ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(ExecutionPill, { status: shot.status })] })) : null] })] })] }) }));
+}
+export function StreamList(props) {
+    const { capabilities } = useServices();
+    const { items, collapsed, cursor, scrollTop, width, height, filter, hasRoots, scanning, totalShots } = props;
+    const thumbCols = thumbnailCols(capabilities.cellWidth, capabilities.cellHeight);
+    if (!hasRoots) {
+        return (_jsx(EmptyState, { width: width, title: "Choose folders to watch", body: "Pick the directories that contain your projects. Astroshots watches them for .astroshot/ screenshots.", action: "astroshot review --root <dir>" }));
+    }
+    if (totalShots === 0) {
+        return scanning ? (_jsx(EmptyState, { width: width, title: "Scanning watched folders\u2026", body: "First scan of a large folder can take a bit. Results stream in as they are found." })) : (_jsx(EmptyState, { width: width, title: "Waiting for frames", body: "When any project under a watched folder writes to .astroshot/, shots land here.", action: "r Rescan" }));
+    }
+    if (items.length === 0) {
+        return filter === "unseen" ? (_jsx(EmptyState, { width: width, title: "You\u2019re all caught up", body: "Every current frame has been seen.", action: "u View history" })) : (_jsx(EmptyState, { width: width, title: "No history yet", body: "Frames you mark Seen will appear here.", action: "u Back to unseen" }));
+    }
+    const rows = [];
+    let used = 0;
+    for (let index = scrollTop; index < items.length; index += 1) {
+        const item = items[index];
+        if (used + item.height > height)
+            break;
+        used += item.height;
+        const selected = props.focused && index === cursor;
+        if (item.kind === "header") {
+            rows.push(_jsx(GroupHeader, { group: item.group, collapsed: collapsed.has(item.group.id), selected: selected, width: width }, `h:${item.group.id}`));
+        }
+        else {
+            rows.push(_jsx(ShotRow, { shot: item.shot, selected: selected, width: width, thumbCols: thumbCols, inGroup: true }, item.shot.path));
+        }
+    }
+    const remaining = items.length - (scrollTop + rows.length);
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, overflow: "hidden", children: [rows, remaining > 0 && used < height ? (_jsxs(Text, { color: theme.faint, children: ["  \u2193 ", remaining, " more"] })) : null] }));
+}

package/dist/ui/system.d.ts

@@ -0,0 +1,4 @@
+export declare function revealInFileManager(target: string): Promise<void>;
+export declare function openWithDefaultApp(target: string): Promise<void>;
+/** Put the image itself (not its path) on the clipboard, like the app's Copy Image. */
+export declare function copyImageToClipboard(imagePath: string): Promise<void>;

package/dist/ui/system.js

@@ -0,0 +1,34 @@
+/** Desktop integrations: reveal, open, and copy — best effort per platform. */
+import { execFile } from "node:child_process";
+import path from "node:path";
+function run(command, args) {
+    return new Promise((resolve, reject) => {
+        execFile(command, args, (error) => (error ? reject(error) : resolve()));
+    });
+}
+export async function revealInFileManager(target) {
+    if (process.platform === "darwin")
+        return run("open", ["-R", target]);
+    if (process.platform === "win32")
+        return run("explorer", [`/select,${target}`]);
+    return run("xdg-open", [path.dirname(target)]);
+}
+export async function openWithDefaultApp(target) {
+    if (process.platform === "darwin")
+        return run("open", [target]);
+    if (process.platform === "win32")
+        return run("cmd", ["/c", "start", "", target]);
+    return run("xdg-open", [target]);
+}
+/** Put the image itself (not its path) on the clipboard, like the app's Copy Image. */
+export async function copyImageToClipboard(imagePath) {
+    if (process.platform === "darwin") {
+        const escaped = imagePath.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        const kind = /\.png$/i.test(imagePath) ? "«class PNGf»" : "JPEG picture";
+        return run("osascript", ["-e", `set the clipboard to (read (POSIX file "${escaped}") as ${kind})`]);
+    }
+    if (process.platform === "linux") {
+        return run("sh", ["-c", `xclip -selection clipboard -t image/png -i "${imagePath.replace(/"/g, '\\"')}"`]);
+    }
+    throw new Error("Copy image is not supported on this platform");
+}

package/dist/ui/takeover.d.ts

@@ -0,0 +1,26 @@
+import type { Shot } from "../data/model.js";
+import { type PlaybackState } from "./movie-player.js";
+export declare const RAIL_WIDTH = 42;
+export interface ReviewTakeoverProps {
+    shot: Shot;
+    position: {
+        index: number;
+        count: number;
+    };
+    width: number;
+    height: number;
+    composer: boolean;
+    onComposerSubmit: (text: string) => void;
+    onComposerCancel: () => void;
+    playback: PlaybackState;
+    onPlayback: (patch: Partial<PlaybackState>) => void;
+    playing: boolean;
+    busy: boolean;
+    error: string | null;
+    /** 1 shows the whole image; above magnifies (crops in). */
+    zoom: number;
+    /** Pan center as a fraction of the image, [0,1]. */
+    panX: number;
+    panY: number;
+}
+export declare function ReviewTakeover(props: ReviewTakeoverProps): import("react").JSX.Element;

package/dist/ui/takeover.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Full-screen review: header, image stage, and the feedback rail.
+ * Pages over run siblings, oldest → newest.
+ */
+import { Box, Text } from "ink";
+import { CommentList } from "./detail.js";
+import { Line, ReviewBadge, Rule, SectionLabel } from "./chrome.js";
+import { MoviePlayer, ProgressBar } from "./movie-player.js";
+import { Picture } from "./picture.js";
+import { reviewStateOf } from "./selectors.js";
+import { TextInput } from "./text-input.js";
+import { abbreviatedDateTime, theme, truncate } from "./theme.js";
+export const RAIL_WIDTH = 42;
+export function ReviewTakeover(props) {
+    const { shot, position, width, height, composer, playback, onPlayback, playing, busy, error, zoom, panX, panY } = props;
+    const railWidth = width >= 100 ? RAIL_WIDTH : Math.max(28, Math.floor(width * 0.38));
+    const stageWidth = Math.max(10, width - railWidth - 1);
+    const headerHeight = 3;
+    const footerHeight = 1;
+    const stageHeight = Math.max(4, height - headerHeight - footerHeight);
+    const canPlay = shot.isMovie && shot.videoPath !== null;
+    const showPlayer = canPlay && (playing || playback.positionMs > 0);
+    const meta = [shot.worktree, shot.feature, shot.url ?? "", abbreviatedDateTime(shot.capturedAt)].filter(Boolean).join("  ·  ");
+    const state = reviewStateOf(shot);
+    const railInner = railWidth - 2;
+    const imageHeight = showPlayer ? stageHeight - 1 : stageHeight;
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, children: [_jsxs(Box, { flexShrink: 0, height: 1, width: width, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { bold: true, children: truncate(shot.title, Math.max(8, width - 40)) }), shot.sequence ? (_jsxs(Text, { color: theme.muted, children: ["  ", _jsxs(Text, { backgroundColor: theme.selection, children: [" ", shot.sequence, " "] })] })) : null] }), _jsxs(Text, { color: theme.muted, children: [_jsx(Text, { color: theme.blue, children: "\u2039" }), " ", position.index, " / ", position.count, " ", _jsx(Text, { color: theme.blue, children: "\u203A" }), "   esc close"] })] }), _jsx(Box, { flexShrink: 0, height: 1, width: width, paddingX: 1, children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(meta, width - 2) }) }), _jsx(Box, { flexShrink: 0, height: 1, width: width, paddingX: 1, children: _jsx(Rule, { width: width - 2 }) }), _jsxs(Box, { flexShrink: 0, flexDirection: "row", width: width, height: stageHeight, children: [_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: stageWidth, height: stageHeight, alignItems: "center", justifyContent: "center", children: [showPlayer ? (_jsx(MoviePlayer, { videoPath: shot.videoPath, posterPath: shot.path, posterVersion: shot.mtimeMs, width: stageWidth, height: imageHeight, playback: playback, onPlayback: onPlayback })) : (_jsx(Picture, { src: shot.path, version: shot.mtimeMs, width: stageWidth, height: imageHeight, maxUpscale: 8, zoom: zoom, panX: panX, panY: panY, label: shot.isMovie ? "▶ movie poster" : "Screenshot unavailable" })), showPlayer ? (_jsx(ProgressBar, { positionMs: playback.positionMs, durationMs: playback.durationMs ?? shot.durationMs, chapters: shot.chapters, width: stageWidth - 2, playing: playback.playing })) : null] }), _jsx(Box, { flexShrink: 0, width: 1, height: stageHeight, flexDirection: "column", children: Array.from({ length: stageHeight }, (_, index) => (_jsx(Text, { color: theme.faint, children: "\u2502" }, index))) }), _jsxs(Box, { flexShrink: 0, flexDirection: "column", width: railWidth, height: stageHeight, paddingX: 1, overflow: "hidden", children: [_jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: railInner, children: [_jsx(Text, { bold: true, children: "Review" }), _jsx(ReviewBadge, { state: state, stale: shot.review?.isStale })] }), shot.review?.isStale ? (_jsx(Box, { flexShrink: 0, width: railInner, height: 2, children: _jsx(Text, { color: theme.amber, wrap: "wrap", children: "A newer image was captured since this was seen." }) })) : null, _jsx(Box, { flexShrink: 0, width: railInner, height: Math.min(3, Math.max(1, Math.ceil((shot.description || shot.fileName).length / railInner))), overflow: "hidden", children: _jsx(Text, { color: theme.muted, wrap: "wrap", children: truncate(shot.description || shot.fileName, railInner * 3) }) }), _jsx(Line, { width: railInner, children: _jsx(Rule, { width: railInner }) }), _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: railInner, children: [_jsx(SectionLabel, { children: "FEEDBACK" }), _jsx(Text, { color: theme.muted, children: shot.review?.comments.length ?? 0 })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 100, minHeight: 0, overflow: "hidden", width: railInner, children: _jsx(CommentList, { shot: shot, width: railInner, max: Math.max(2, Math.floor((stageHeight - 12) / 3)) }) }), _jsx(Line, { width: railInner, children: _jsx(Rule, { width: railInner }) }), busy ? (_jsx(Line, { width: railInner, children: _jsx(Text, { color: theme.muted, children: "Saving review\u2026" }) })) : null, error ? (_jsx(Line, { width: railInner, children: _jsx(Text, { color: theme.red, children: truncate(error, railInner) }) })) : null, composer ? (_jsx(TextInput, { placeholder: "Share feedback\u2026", width: railInner, onSubmit: props.onComposerSubmit, onCancel: props.onComposerCancel, submitLabel: "Send Feedback" })) : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Line, { width: railInner, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.blue, bold: true, children: " c " }), _jsx(Text, { children: "Send Feedback" }), _jsx(Text, { color: theme.green, bold: true, children: "   s " }), _jsx(Text, { children: "Seen" })] }) }), _jsx(Line, { width: railInner, children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: zoom > 1 ? "← ↑ → ↓ pan · +/- zoom · 0 reset · esc close" : canPlay ? "← → page · space play · +/- zoom · [ ] chapter" : "← → page · +/- zoom · c send · s seen" }) })] }))] })] })] }));
+}

package/dist/ui/text-input.d.ts

@@ -0,0 +1,8 @@
+export interface TextInputProps {
+    placeholder: string;
+    width: number;
+    onSubmit: (value: string) => void;
+    onCancel: () => void;
+    submitLabel?: string;
+}
+export declare function TextInput({ placeholder, width, onSubmit, onCancel, submitLabel }: TextInputProps): import("react").JSX.Element;