@archastro/astroshot-review 0.2.1

package/dist/ui/chrome.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { ReviewState } from "../data/model.js";
+export declare function WorktreeChip({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+export declare function ReviewBadge({ state, stale }: {
+    state: ReviewState;
+    stale?: boolean;
+}): import("react").JSX.Element;
+export declare function MovieBadge({ duration }: {
+    duration: string | null;
+}): import("react").JSX.Element;
+export declare function StatusPill({ label }: {
+    label: string | null;
+}): import("react").JSX.Element | null;
+export declare function ExecutionPill({ status }: {
+    status: string | null;
+}): import("react").JSX.Element | null;
+export interface KeyHint {
+    key: string;
+    label: string;
+}
+export declare function HintBar({ hints, width }: {
+    hints: KeyHint[];
+    width: number;
+}): import("react").JSX.Element;
+export declare function Toast({ message, width }: {
+    message: string | null;
+    width: number;
+}): import("react").JSX.Element | null;
+/** One terminal row that never collapses when its column overflows. */
+export declare function Line({ children, width }: {
+    children: ReactNode;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function SectionLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Rule({ width, color }: {
+    width: number;
+    color?: string;
+}): import("react").JSX.Element;
+export declare function MetaRow({ label, value, width }: {
+    label: string;
+    value: string;
+    width: number;
+}): import("react").JSX.Element;
+export declare function EmptyState({ title, body, action, width, }: {
+    title: string;
+    body: string;
+    action?: string;
+    width: number;
+}): import("react").JSX.Element;

package/dist/ui/chrome.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme, truncate } from "./theme.js";
+export function WorktreeChip({ label }) {
+    return (_jsx(Text, { backgroundColor: theme.selection, color: theme.purple, children: ` ${label} ` }));
+}
+export function ReviewBadge({ state, stale }) {
+    if (state === "seen")
+        return _jsx(Text, { color: theme.blue, children: "\u25CF Seen" });
+    return _jsx(Text, { color: theme.amber, children: stale ? "● Unseen · changed" : "● Unseen" });
+}
+export function MovieBadge({ duration }) {
+    return (_jsx(Text, { backgroundColor: "#3b2f6e", color: theme.purple, children: duration ? ` Movie · ${duration} ` : " Movie " }));
+}
+export function StatusPill({ label }) {
+    if (!label)
+        return null;
+    const color = label === "Complete"
+        ? theme.green
+        : label === "Running"
+            ? theme.amber
+            : label === "Failed"
+                ? theme.red
+                : label === "Ready"
+                    ? theme.blue
+                    : theme.muted;
+    return _jsx(Text, { color: color, children: label });
+}
+export function ExecutionPill({ status }) {
+    if (!status)
+        return null;
+    const color = status === "pass" ? theme.green : status === "fail" ? theme.red : status === "running" ? theme.amber : theme.muted;
+    return _jsxs(Text, { color: color, children: ["\u00B7 run ", status] });
+}
+export function HintBar({ hints, width }) {
+    const parts = [];
+    let used = 0;
+    hints.forEach((hint, index) => {
+        const length = hint.key.length + 1 + hint.label.length + 3;
+        if (used + length > width)
+            return;
+        used += length;
+        parts.push(_jsxs(Text, { children: [_jsx(Text, { color: theme.brand, bold: true, children: hint.key }), _jsxs(Text, { color: theme.muted, children: [" ", hint.label, "   "] })] }, `${hint.key}-${index}`));
+    });
+    return (_jsx(Box, { flexShrink: 0, width: width, height: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", children: parts }) }));
+}
+export function Toast({ message, width }) {
+    if (!message)
+        return null;
+    const text = ` ${truncate(message, Math.max(8, width - 6))} `;
+    return (_jsx(Box, { flexShrink: 0, width: width, justifyContent: "center", height: 1, children: _jsx(Text, { backgroundColor: "#2e3140", color: theme.text, bold: true, children: text }) }));
+}
+/** One terminal row that never collapses when its column overflows. */
+export function Line({ children, width }) {
+    return (_jsx(Box, { flexShrink: 0, height: 1, width: width, overflow: "hidden", children: children }));
+}
+export function SectionLabel({ children }) {
+    return (_jsx(Text, { color: theme.muted, bold: true, children: children }));
+}
+export function Rule({ width, color }) {
+    return _jsx(Text, { color: color ?? theme.faint, children: "─".repeat(Math.max(0, width)) });
+}
+export function MetaRow({ label, value, width }) {
+    const labelWidth = 10;
+    return (_jsxs(Box, { flexShrink: 0, width: width, height: 1, children: [_jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { color: theme.muted, children: label }) }), _jsx(Box, { flexGrow: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate-start", children: value }) })] }));
+}
+export function EmptyState({ title, body, action, width, }) {
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, paddingX: 2, width: width, children: [_jsx(Text, { bold: true, children: title }), _jsx(Box, { width: Math.min(width - 4, 60), justifyContent: "center", children: _jsx(Text, { color: theme.muted, wrap: "wrap", children: body }) }), action ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.brand, children: action }) })) : null] }));
+}

package/dist/ui/context.d.ts

@@ -0,0 +1,16 @@
+import type { ReviewStore } from "../data/store.js";
+import type { ImageService } from "../images/service.js";
+import type { ImageLayer } from "../terminal/image-layer.js";
+import type { TerminalCapabilities } from "../terminal/probe.js";
+import type { FfmpegInfo } from "../video/ffmpeg.js";
+export interface AppServices {
+    store: ReviewStore;
+    layer: ImageLayer;
+    service: ImageService;
+    capabilities: TerminalCapabilities;
+    ffmpeg: FfmpegInfo;
+    rootsSource: "app" | "cli" | "cwd";
+    version: string;
+}
+export declare const ServicesContext: import("react").Context<AppServices | null>;
+export declare function useServices(): AppServices;

package/dist/ui/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export const ServicesContext = createContext(null);
+export function useServices() {
+    const services = useContext(ServicesContext);
+    if (!services)
+        throw new Error("ServicesContext is missing");
+    return services;
+}

package/dist/ui/detail.d.ts

@@ -0,0 +1,33 @@
+import type { Shot } from "../data/model.js";
+import { type PlaybackState } from "./movie-player.js";
+export interface DetailPaneProps {
+    shot: Shot;
+    position: {
+        index: number;
+        count: number;
+    };
+    width: number;
+    height: number;
+    /** `page` shows the back/paging header; `pane` is the split-view column. */
+    mode: "pane" | "page";
+    composer: boolean;
+    onComposerSubmit: (text: string) => void;
+    onComposerCancel: () => void;
+    inlinePlayer: boolean;
+    playback: PlaybackState;
+    onPlayback: (patch: Partial<PlaybackState>) => void;
+    busy: boolean;
+    error: string | null;
+    /** 1 shows the whole image; above magnifies. */
+    zoom: number;
+    /** Pan center as a fraction of the image, [0,1]. */
+    panX: number;
+    panY: number;
+}
+export declare function previewHeight(height: number): number;
+export declare function CommentList({ shot, width, max }: {
+    shot: Shot;
+    width: number;
+    max: number;
+}): import("react").JSX.Element;
+export declare function DetailPane(props: DetailPaneProps): import("react").JSX.Element;

package/dist/ui/detail.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Shot detail: preview, heading, movie actions, chapters, feedback, Seen,
+ * and the metadata card — the tray's Detail pane, in the app's order.
+ */
+import path from "node:path";
+import { Box, Text } from "ink";
+import { chapterTimeLabel, durationLabel } from "../data/manifest.js";
+import { Line, MetaRow, MovieBadge, ReviewBadge, Rule, SectionLabel } from "./chrome.js";
+import { useServices } from "./context.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, isoDateTime, theme, truncate } from "./theme.js";
+export function previewHeight(height) {
+    return Math.max(6, Math.min(22, Math.round(height * 0.4)));
+}
+export function CommentList({ shot, width, max }) {
+    const comments = shot.review?.comments ?? [];
+    if (comments.length === 0) {
+        return (_jsx(Line, { width: width, children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: "No comments yet \u00B7 leave concise, actionable feedback for this frame." }) }));
+    }
+    const visible = comments.slice(-max);
+    const hidden = comments.length - visible.length;
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, children: [hidden > 0 ? (_jsx(Line, { width: width, children: _jsxs(Text, { color: theme.faint, children: ["\u2026 ", hidden, " earlier"] }) })) : null, visible.map((comment) => (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, children: [_jsx(Line, { width: width, children: _jsxs(Text, { color: theme.muted, wrap: "truncate", children: [_jsx(Text, { color: theme.purple, children: "Reviewer" }), " \u00B7 ", abbreviatedDateTime(comment.createdAt)] }) }), _jsx(Box, { flexShrink: 0, width: width, height: Math.min(3, Math.max(1, Math.ceil(comment.body.length / Math.max(10, width)))), overflow: "hidden", children: _jsx(Text, { wrap: "wrap", children: truncate(comment.body, width * 3) }) })] }, comment.id)))] }));
+}
+export function DetailPane(props) {
+    const { shot, position, width, height, mode, composer, inlinePlayer, playback, onPlayback, busy, error } = props;
+    const { ffmpeg } = useServices();
+    const state = reviewStateOf(shot);
+    const inner = Math.max(20, width - 2);
+    const preview = previewHeight(height);
+    const heading = shot.sequence ? `${shot.sequence} · ${shot.slug}` : shot.slug;
+    const canPlay = shot.isMovie && shot.videoPath !== null;
+    const commentCount = shot.review?.comments.length ?? 0;
+    const chapters = shot.chapters.slice(0, 3);
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, paddingX: 1, overflow: "hidden", children: [mode === "page" ? (_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: [position.index, " / ", position.count, "  ", _jsx(Text, { color: theme.blue, children: "\u2039" }), " older \u00B7 newer ", _jsx(Text, { color: theme.blue, children: "\u203A" })] })] })) : (_jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: theme.muted, children: "Detail" }), _jsxs(Text, { color: theme.muted, children: [position.index, " / ", position.count] })] })), _jsx(Box, { width: inner, height: preview, justifyContent: "center", flexShrink: 0, children: inlinePlayer && canPlay ? (_jsx(MoviePlayer, { videoPath: shot.videoPath, posterPath: shot.path, posterVersion: shot.mtimeMs, width: inner, height: preview, playback: playback, onPlayback: onPlayback })) : (_jsx(Picture, { src: shot.path, version: shot.mtimeMs, width: inner, height: preview, maxUpscale: 8, zoom: props.zoom, panX: props.panX, panY: props.panY, label: shot.isMovie ? "▶ movie poster" : "still" })) }), inlinePlayer && canPlay ? (_jsx(ProgressBar, { positionMs: playback.positionMs, durationMs: playback.durationMs ?? shot.durationMs, chapters: shot.chapters, width: inner, playing: playback.playing })) : null, _jsxs(Box, { height: 1, width: inner, justifyContent: "space-between", flexShrink: 0, children: [_jsx(Text, { bold: true, wrap: "truncate", children: truncate(heading, Math.max(8, inner - 24)) }), _jsxs(Text, { children: [shot.isMovie ? (_jsxs(_Fragment, { children: [_jsx(MovieBadge, { duration: durationLabel(shot.durationMs) }), _jsx(Text, { children: " " })] })) : null, _jsx(ReviewBadge, { state: state, stale: shot.review?.isStale })] })] }), _jsx(Line, { width: inner, children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(shot.description || shot.fileName, inner) }) }), shot.isMovie ? (_jsxs(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: [_jsx(Line, { width: inner, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: canPlay ? theme.green : theme.faint, bold: true, children: " p " }), _jsx(Text, { color: canPlay ? theme.text : theme.faint, children: inlinePlayer ? "Hide player" : "Play in tray" }), _jsx(Text, { color: canPlay ? theme.blue : theme.faint, bold: true, children: "   O " }), _jsx(Text, { color: canPlay ? theme.text : theme.faint, children: "Open movie" }), !ffmpeg.ffmpeg && canPlay ? _jsx(Text, { color: theme.amber, children: "   ffmpeg missing \u00B7 install to play here" }) : null] }) }), shot.videoFileName && !shot.videoPath ? (_jsx(Line, { width: inner, children: _jsx(Text, { color: theme.amber, children: "Video missing on disk" }) })) : !shot.videoFileName ? (_jsx(Line, { width: inner, children: _jsx(Text, { color: theme.muted, children: "Poster only \u2014 no video path in manifest" }) })) : null, chapters.length > 0 ? (_jsxs(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: [_jsx(Line, { width: inner, children: _jsx(SectionLabel, { children: "CHAPTERS" }) }), chapters.map((chapter, index) => (_jsx(Line, { width: inner, children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.purple, children: chapterTimeLabel(chapter.tMs).padStart(6) }), "  ", truncate(chapter.title ?? chapter.slug ?? "chapter", inner - 8)] }) }, `${chapter.slug ?? index}`))), shot.chapters.length > chapters.length ? (_jsx(Line, { width: inner, children: _jsxs(Text, { color: theme.faint, children: ["       \u2026 ", shot.chapters.length - chapters.length, " more"] }) })) : null] })) : null] })) : null, _jsx(Rule, { width: inner }), _jsxs(Box, { height: 1, width: inner, justifyContent: "space-between", flexShrink: 0, children: [_jsxs(SectionLabel, { children: ["FEEDBACK ", commentCount] }), busy ? _jsx(Text, { color: theme.muted, children: "Saving review\u2026" }) : error ? _jsx(Text, { color: theme.red, children: truncate(error, inner - 12) }) : null] }), _jsx(Box, { flexShrink: 0, width: inner, children: _jsx(CommentList, { shot: shot, width: inner, max: composer ? 2 : 3 }) }), composer ? (_jsx(Box, { flexShrink: 0, width: inner, children: _jsx(TextInput, { placeholder: "Share feedback\u2026", width: inner, onSubmit: props.onComposerSubmit, onCancel: props.onComposerCancel, submitLabel: "Send Feedback" }) })) : (_jsx(Line, { width: inner, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.blue, bold: true, children: " c " }), _jsx(Text, { color: theme.muted, children: "Send Feedback" }), _jsx(Text, { color: theme.green, bold: true, children: "   s " }), _jsx(Text, { color: theme.muted, children: "Seen" }), _jsx(Text, { color: theme.purple, bold: true, children: "   f " }), _jsx(Text, { color: theme.muted, children: "Full screen" }), _jsx(Text, { color: theme.blue, bold: true, children: "   +/- " }), _jsx(Text, { color: theme.muted, children: "zoom" })] }) })), _jsx(Line, { width: inner, children: _jsx(Rule, { width: inner }) }), _jsxs(Box, { flexDirection: "column", width: inner, overflow: "hidden", flexGrow: 1, flexShrink: 100, minHeight: 0, children: [_jsx(MetaRow, { label: "Tree", value: shot.worktree, width: inner }), _jsx(MetaRow, { label: "Feature", value: shot.feature, width: inner }), _jsx(MetaRow, { label: "File", value: shot.fileName, width: inner }), shot.isMovie ? _jsx(MetaRow, { label: "Kind", value: "Movie", width: inner }) : null, shot.isMovie ? _jsx(MetaRow, { label: "Video", value: shot.videoFileName ?? "—", width: inner }) : null, shot.isMovie ? _jsx(MetaRow, { label: "Duration", value: durationLabel(shot.durationMs) ?? "—", width: inner }) : null, shot.isMovie && shot.source ? _jsx(MetaRow, { label: "Source", value: shot.source, width: inner }) : null, shot.isMovie && shot.chapters.length > 0 ? _jsx(MetaRow, { label: "Chapters", value: String(shot.chapters.length), width: inner }) : null, _jsx(MetaRow, { label: "Time", value: isoDateTime(shot.capturedAt), width: inner }), shot.url ? _jsx(MetaRow, { label: "URL", value: shot.url, width: inner }) : null, shot.runId ? _jsx(MetaRow, { label: "Run", value: shot.runId, width: inner }) : null, shot.status ? _jsx(MetaRow, { label: "Execution", value: shot.status.charAt(0).toUpperCase() + shot.status.slice(1), width: inner }) : null, _jsx(MetaRow, { label: "Review", value: state === "seen" ? "Seen" : "Unseen", width: inner }), _jsx(MetaRow, { label: "Path", value: path.dirname(shot.path), width: inner })] })] }));
+}

package/dist/ui/friction.d.ts

@@ -0,0 +1,42 @@
+import type { FrictionLog, FrictionRun } from "../data/model.js";
+import type { StreamFilter } from "./selectors.js";
+export declare const FRICTION_ROW_HEIGHT = 4;
+export interface FrictionListProps {
+    logs: FrictionLog[];
+    cursor: number;
+    scrollTop: number;
+    width: number;
+    height: number;
+    filter: StreamFilter;
+    counts: {
+        pending: number;
+        seen: number;
+    };
+    focused: boolean;
+    total: number;
+    now: number;
+}
+export declare function FrictionFilterBar({ filter, counts, width }: Pick<FrictionListProps, "filter" | "counts" | "width">): import("react").JSX.Element;
+export declare function frictionScroll(count: number, cursor: number, scrollTop: number, height: number): number;
+export declare function FrictionList(props: FrictionListProps): import("react").JSX.Element;
+export interface FrictionLogDetailProps {
+    log: FrictionLog;
+    run: FrictionRun | null;
+    stepCursor: number;
+    promptOpen: boolean;
+    prompt: string | null;
+    width: number;
+    height: number;
+}
+export declare function FrictionLogDetail({ log, run, stepCursor, promptOpen, prompt, width, height }: FrictionLogDetailProps): import("react").JSX.Element;
+export interface FrictionStepDetailProps {
+    log: FrictionLog;
+    run: FrictionRun;
+    stepIndex: number;
+    imageIndex: number;
+    width: number;
+    height: number;
+    mode: "page" | "takeover";
+}
+export declare function FrictionStepDetail({ log, run, stepIndex, imageIndex, width, height }: FrictionStepDetailProps): import("react").JSX.Element;
+export declare function FrictionStepTakeover({ log, run, stepIndex, imageIndex, width, height }: FrictionStepDetailProps): import("react").JSX.Element;

package/dist/ui/friction.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Friction Logs: scenario list, scenario detail with run picker and steps,
+ * step detail, and the step takeover.
+ */
+import path from "node:path";
+import { Box, Text } from "ink";
+import { frictionStatusLabel, runDisplayTitle, stepCountLabel } from "../data/friction.js";
+import { EmptyState, MetaRow, Rule, SectionLabel, StatusPill, WorktreeChip } from "./chrome.js";
+import { Picture } from "./picture.js";
+import { frictionState, frictionSummary, latestRun } from "./selectors.js";
+import { relativeTime, theme, truncate } from "./theme.js";
+export const FRICTION_ROW_HEIGHT = 4;
+export function FrictionFilterBar({ filter, counts, width }) {
+    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: [filter === "unseen" && counts.pending > 0 ? _jsx(Text, { color: theme.green, children: " S Seen all " }) : null, _jsx(Text, { color: theme.blue, children: filter === "unseen" ? " u History " : " u Unseen " })] })] }));
+}
+function FrictionRow({ log, selected, width, now }) {
+    const run = latestRun(log);
+    const inner = width - 3;
+    const status = frictionStatusLabel(log.status);
+    const footer = run
+        ? log.runs.length > 1
+            ? `${log.runs.length} runs · ${runDisplayTitle(run.runId)}`
+            : runDisplayTitle(run.runId)
+        : "Prompt only · no runs yet";
+    return (_jsxs(Box, { flexShrink: 0, width: width, height: FRICTION_ROW_HEIGHT, flexDirection: "row", backgroundColor: selected ? theme.selection : undefined, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: theme.brand, children: selected ? "▎" : " " }) }), _jsxs(Box, { flexDirection: "column", width: inner, marginLeft: 1, overflow: "hidden", children: [_jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(Text, { bold: true, wrap: "truncate", children: truncate(log.title, Math.max(8, inner - 12)) }), _jsx(StatusPill, { label: status })] }), _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(log.description, inner) }), _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(WorktreeChip, { label: log.worktreeShort }), _jsxs(Text, { color: theme.muted, children: [" ", log.slug] })] }), _jsx(Text, { color: theme.muted, children: frictionSummary(log) })] }), _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: theme.muted, wrap: "truncate", children: footer }), _jsxs(Text, { color: frictionState(log) === "seen" ? theme.blue : theme.amber, children: [frictionState(log) === "seen" ? "Seen" : "Unseen", run ? _jsxs(Text, { color: theme.muted, children: [" \u00B7 ", relativeTime(run.capturedAt, now)] }) : null] })] })] })] }));
+}
+export function frictionScroll(count, cursor, scrollTop, height) {
+    const perPage = Math.max(1, Math.floor(height / FRICTION_ROW_HEIGHT));
+    let top = Math.min(scrollTop, Math.max(0, count - 1));
+    if (cursor < top)
+        top = cursor;
+    if (cursor >= top + perPage)
+        top = cursor - perPage + 1;
+    return Math.max(0, top);
+}
+export function FrictionList(props) {
+    const { logs, cursor, scrollTop, width, height, filter, focused, total, now } = props;
+    if (total === 0) {
+        return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, children: [_jsx(EmptyState, { width: width, title: "No friction logs yet", body: "Author a scenario with the friction-log skill, then run it. Results land under .astroshot/friction-logs/." }), _jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsxs(Text, { color: theme.muted, children: [".astroshot/friction-logs/", "<slug>", "/prompt.md"] }), _jsxs(Text, { color: theme.muted, children: ["runs/", "<run-id>", "/log.jsonl + screenshots"] })] })] }));
+    }
+    if (logs.length === 0) {
+        return filter === "unseen" ? (_jsx(EmptyState, { width: width, title: "You\u2019re all caught up", body: "Every friction log has been seen.", action: "u View history" })) : (_jsx(EmptyState, { width: width, title: "No history yet", body: "Logs you mark Seen will appear here.", action: "u Back to unseen" }));
+    }
+    const perPage = Math.max(1, Math.floor(height / FRICTION_ROW_HEIGHT));
+    const visible = logs.slice(scrollTop, scrollTop + perPage);
+    return (_jsx(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, overflow: "hidden", children: visible.map((log, offset) => (_jsx(FrictionRow, { log: log, selected: focused && scrollTop + offset === cursor, width: width, now: now }, log.id))) }));
+}
+export function FrictionLogDetail({ log, run, stepCursor, promptOpen, prompt, width, height }) {
+    const inner = width - 2;
+    const runIndex = run ? log.runs.indexOf(run) : -1;
+    const improve = run ? run.steps.flatMap((step) => step.improve.map((note) => ({ step: step.step, note }))) : [];
+    const headerLines = 6 + (promptOpen ? 6 : 0) + (improve.length > 0 ? Math.min(improve.length, 3) + 1 : 0);
+    const stepsHeight = Math.max(3, height - headerLines - 2);
+    const perPage = Math.max(1, Math.floor(stepsHeight / 2));
+    const stepsTop = Math.max(0, Math.min(stepCursor - perPage + 1, run ? run.steps.length - perPage : 0));
+    const steps = run ? run.steps.slice(Math.max(0, Math.min(stepsTop, stepCursor)), Math.max(0, Math.min(stepsTop, stepCursor)) + perPage) : [];
+    const firstIndex = Math.max(0, Math.min(stepsTop, stepCursor));
+    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 Logs" }), _jsxs(Text, { color: theme.muted, children: [run ? stepCountLabel(run.steps.length) : "no runs", frictionState(log) !== "seen" && run ? _jsx(Text, { color: theme.green, children: "   s Seen" }) : null] })] }), _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(Text, { bold: true, wrap: "truncate", children: truncate(log.title, inner - 12) }), _jsx(StatusPill, { label: frictionStatusLabel(log.status) })] }), _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(log.description, inner) }), _jsxs(Text, { wrap: "truncate", children: [_jsx(WorktreeChip, { label: log.worktreeShort }), _jsxs(Text, { color: theme.muted, children: [" ", log.slug] }), log.promptPath ? (_jsxs(Text, { color: theme.blue, children: ["   p ", promptOpen ? "Hide prompt" : "Prompt"] })) : null] }), promptOpen && prompt !== null ? (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: inner, height: 6, overflow: "hidden", borderStyle: "round", borderColor: theme.faint, paddingX: 1, children: [_jsx(SectionLabel, { children: "SCENARIO PROMPT" }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: truncate(prompt, (inner - 4) * 4) })] })) : null, _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: log.runs.length > 1 ? `Runs ${log.runs.length}` : "Run" }), run ? (_jsxs(Text, { color: theme.muted, children: ["  ", runDisplayTitle(run.runId), runIndex === 0 ? _jsx(Text, { color: theme.purple, children: " Latest" }) : null, "  ", run.runId] })) : null] }), log.runs.length > 1 ? _jsx(Text, { color: theme.blue, children: "[ ] switch run" }) : null] }), improve.length > 0 ? (_jsxs(Box, { flexDirection: "column", width: inner, children: [_jsxs(Text, { color: theme.amber, bold: true, children: ["Improve rollup \u00B7 ", improve.length] }), improve.slice(0, 3).map((item, index) => (_jsxs(Text, { color: theme.amber, wrap: "truncate", children: [String(item.step).padStart(2, "0"), " ", truncate(item.note, inner - 3)] }, `${item.step}-${index}`)))] })) : null, _jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: inner, children: [_jsx(SectionLabel, { children: "STEPS" }), _jsx(Text, { color: theme.muted, children: "\u23CE open step \u00B7 \u2191\u2193 move" })] }), !run ? (_jsxs(Box, { flexDirection: "column", width: inner, children: [_jsx(Text, { bold: true, children: "No runs yet" }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: "This scenario has a prompt but no log.jsonl run. Use the friction-log skill to execute it; steps will appear here as the agent writes them." })] })) : run.steps.length === 0 ? (_jsx(Text, { color: theme.muted, children: "No JSONL steps in this run" })) : (_jsx(Box, { flexDirection: "column", width: inner, overflow: "hidden", flexGrow: 1, children: steps.map((step, offset) => (_jsx(StepRow, { step: step, selected: firstIndex + offset === stepCursor, width: inner }, step.id))) }))] }));
+}
+function StepRow({ step, selected, width }) {
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: 2, backgroundColor: selected ? theme.selection : undefined, children: [_jsxs(Box, { flexShrink: 0, height: 1, justifyContent: "space-between", width: width, children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: selected ? theme.brand : theme.purple, children: String(step.step).padStart(2, "0") }), "  ", _jsx(Text, { bold: true, children: truncate(step.title, width - 16) })] }), _jsxs(Text, { children: [step.transcript ? _jsx(Text, { color: theme.purple, children: "\u270E " }) : null, step.screenshots.length > 0 ? _jsx(Text, { color: theme.muted, children: "\u25EB " }) : null, step.good.length > 0 ? _jsxs(Text, { color: theme.green, children: [step.good.length, "+ "] }) : null, step.improve.length > 0 ? _jsxs(Text, { color: theme.amber, children: [step.improve.length, "! "] }) : null] })] }), _jsxs(Text, { color: theme.muted, wrap: "truncate", children: ["    ", truncate(step.description, width - 4)] })] }));
+}
+function NoteCard({ title, color, items, empty, width }) {
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { color: color, bold: true, children: [title, items.length > 0 ? _jsxs(Text, { color: theme.muted, children: [" ", items.length] }) : null] }), items.length === 0 ? (_jsx(Text, { color: theme.muted, children: empty })) : (items.slice(0, 4).map((item, index) => (_jsxs(Text, { wrap: "truncate", children: ["• ", truncate(item, width - 2)] }, index))))] }));
+}
+export function FrictionStepDetail({ log, run, stepIndex, imageIndex, width, height }) {
+    const step = run.steps[stepIndex];
+    const inner = width - 2;
+    const preview = Math.max(6, Math.min(20, Math.round(height * 0.38)));
+    const screenshot = step.screenshots[Math.min(imageIndex, step.screenshots.length - 1)] ?? null;
+    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 Steps" }), _jsxs(Text, { color: theme.muted, children: [stepIndex + 1, " / ", run.steps.length, "   ← → step"] })] }), _jsx(Box, { flexShrink: 0, width: inner, height: preview, children: _jsx(Picture, { src: screenshot, width: inner, height: preview, maxUpscale: 8, label: "No screenshot for this step" }) }), step.screenshots.length > 1 ? (_jsxs(Text, { color: theme.muted, children: [step.screenshots.map((_, index) => (index === imageIndex ? "● " : "○ ")), imageIndex + 1, " of ", step.screenshots.length, " \u00B7 [ ] image"] })) : null, _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.purple, bold: true, children: String(step.step).padStart(2, "0") }), "  ", _jsx(Text, { bold: true, children: truncate(step.title, inner - 4) })] }), step.description ? (_jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(step.description, inner) })) : null, step.url ? _jsx(Text, { color: theme.blue, children: step.url }) : null, _jsxs(Box, { flexDirection: "column", width: inner, overflow: "hidden", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [step.transcript ? (_jsxs(Box, { flexDirection: "column", width: inner, children: [_jsx(Text, { color: theme.purple, bold: true, children: "Transcript" }), _jsx(Text, { wrap: "wrap", children: truncate(step.transcript, inner * 3) })] })) : null, _jsx(NoteCard, { title: "Looks good", color: theme.green, items: step.good, empty: "No positives noted for this step", width: inner }), _jsx(NoteCard, { title: "Can improve", color: theme.amber, items: step.improve, empty: "No friction found for this step", width: inner }), _jsx(Rule, { width: inner }), _jsx(MetaRow, { label: "Log", value: log.slug, width: inner }), _jsx(MetaRow, { label: "Run", value: run.runId, width: inner }), _jsx(MetaRow, { label: "Tree", value: log.worktree, width: inner }), _jsx(MetaRow, { label: "File", value: screenshot ? path.basename(screenshot) : "—", width: inner })] })] }));
+}
+export function FrictionStepTakeover({ log, run, stepIndex, imageIndex, width, height }) {
+    const step = run.steps[stepIndex];
+    const railWidth = width >= 100 ? 42 : Math.max(28, Math.floor(width * 0.38));
+    const stageWidth = Math.max(10, width - railWidth - 1);
+    const stageHeight = Math.max(4, height - 3);
+    const screenshot = step.screenshots[Math.min(imageIndex, step.screenshots.length - 1)] ?? null;
+    const meta = [log.title, log.worktreeShort, run.runId, step.url ?? ""].filter(Boolean).join(" · ");
+    const railInner = railWidth - 2;
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, children: [_jsxs(Box, { flexShrink: 0, height: 1, paddingX: 1, justifyContent: "space-between", width: width, children: [_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { backgroundColor: theme.selection, color: theme.purple, children: [" ", String(step.step).padStart(2, "0"), " "] }), "  ", _jsx(Text, { bold: true, children: truncate(step.title, width - 40) })] }), _jsxs(Text, { color: theme.muted, children: [_jsx(Text, { color: theme.blue, children: "\u2039" }), " ", stepIndex + 1, " / ", run.steps.length, " ", _jsx(Text, { color: theme.blue, children: "\u203A" }), "   esc close"] })] }), _jsx(Box, { flexShrink: 0, height: 1, paddingX: 1, width: width, children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: truncate(meta, width - 2) }) }), _jsx(Box, { flexShrink: 0, height: 1, paddingX: 1, width: width, 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: [_jsx(Picture, { src: screenshot, width: stageWidth, height: step.screenshots.length > 1 ? stageHeight - 1 : stageHeight, maxUpscale: 8, label: "No screenshot for this step" }), step.screenshots.length > 1 ? (_jsxs(Text, { color: theme.muted, children: ["Image ", imageIndex + 1, " / ", step.screenshots.length, " \u00B7 [ ] switch"] })) : 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: [_jsx(Text, { bold: true, children: "Step notes" }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: truncate(step.description || "—", railInner * 3) }), step.url ? _jsx(Text, { color: theme.blue, children: step.url }) : null, _jsx(Rule, { width: railInner }), _jsx(Text, { color: theme.purple, bold: true, children: "Transcript" }), _jsx(Text, { wrap: "wrap", children: truncate(step.transcript || "—", railInner * 5) }), _jsx(Rule, { width: railInner }), _jsx(NoteCard, { title: "Looks good", color: theme.green, items: step.good, empty: "No positives noted", width: railInner }), _jsx(NoteCard, { title: "Can improve", color: theme.amber, items: step.improve, empty: "No friction found", width: railInner })] })] })] }));
+}

package/dist/ui/help.d.ts

@@ -0,0 +1,4 @@
+export declare function HelpOverlay({ width, height }: {
+    width: number;
+    height: number;
+}): import("react").JSX.Element;

package/dist/ui/help.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+const SECTIONS = [
+    {
+        title: "Everywhere",
+        keys: [
+            ["1 / 2", "Shots · Friction Logs"],
+            ["tab", "next tab"],
+            [",", "settings"],
+            ["r", "rescan"],
+            ["?", "this help"],
+            ["q", "quit"],
+        ],
+    },
+    {
+        title: "Stream",
+        keys: [
+            ["↑↓ j k", "move"],
+            ["⏎", "open detail"],
+            ["f", "full-screen review"],
+            ["u", "Unseen ⇄ History"],
+            ["m", "Movies only"],
+            ["s", "mark Seen"],
+            ["S", "mark all visible Seen"],
+            ["A", "mark this worktree Seen"],
+            ["c", "send feedback"],
+            ["z", "collapse worktree"],
+            ["o", "reveal in Finder"],
+            ["O", "open movie in player"],
+            ["y", "copy image"],
+        ],
+    },
+    {
+        title: "Detail / Review",
+        keys: [
+            ["← →", "older · newer"],
+            ["+ / -", "zoom in / out"],
+            ["0", "reset zoom"],
+            ["p", "play in tray"],
+            ["space", "play / pause"],
+            [", .", "seek −5s / +5s"],
+            ["[ ]", "previous / next chapter"],
+            ["esc", "back / close"],
+        ],
+    },
+    {
+        title: "Friction Logs",
+        keys: [
+            ["⏎", "open log · open step"],
+            ["[ ]", "switch run · switch image"],
+            ["p", "toggle prompt"],
+            ["← →", "previous / next step"],
+        ],
+    },
+];
+export function HelpOverlay({ width, height }) {
+    const columns = width >= 100 ? 2 : 1;
+    const columnWidth = Math.floor((width - 4) / columns);
+    return (_jsxs(Box, { flexShrink: 0, flexDirection: "column", width: width, height: height, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Keyboard" }), _jsx(Text, { color: theme.muted, children: "Press ? or esc to close" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", marginTop: 1, children: SECTIONS.map((section) => (_jsxs(Box, { flexDirection: "column", width: columnWidth, marginBottom: 1, children: [_jsx(Text, { color: theme.brand, bold: true, children: section.title }), section.keys.map(([key, label]) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.blue, children: key.padEnd(10) }), _jsx(Text, { color: theme.text, children: label })] }, key)))] }, section.title))) })] }));
+}

package/dist/ui/hooks.d.ts

@@ -0,0 +1,9 @@
+import type { StoreState } from "../data/store.js";
+export declare function useStoreState(): StoreState;
+export interface TerminalSize {
+    columns: number;
+    rows: number;
+}
+export declare function useTerminalSize(): TerminalSize;
+/** Re-render every `intervalMs` so relative times stay fresh. */
+export declare function useClock(intervalMs: number): number;

package/dist/ui/hooks.js

@@ -0,0 +1,32 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { useStdout } from "ink";
+import { useServices } from "./context.js";
+export function useStoreState() {
+    const { store } = useServices();
+    return useSyncExternalStore((listener) => store.subscribe(listener), () => store.getState(), () => store.getState());
+}
+export function useTerminalSize() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState({
+        columns: stdout.columns || 80,
+        rows: stdout.rows || 24,
+    });
+    useEffect(() => {
+        const onResize = () => setSize({ columns: stdout.columns || 80, rows: stdout.rows || 24 });
+        stdout.on("resize", onResize);
+        return () => {
+            stdout.off("resize", onResize);
+        };
+    }, [stdout]);
+    return size;
+}
+/** Re-render every `intervalMs` so relative times stay fresh. */
+export function useClock(intervalMs) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), intervalMs);
+        timer.unref();
+        return () => clearInterval(timer);
+    }, [intervalMs]);
+    return now;
+}

package/dist/ui/movie-player.d.ts

@@ -0,0 +1,29 @@
+export interface PlaybackState {
+    playing: boolean;
+    positionMs: number;
+    durationMs: number | null;
+    /** Bumped by the parent to request a seek to `positionMs`. */
+    seekToken: number;
+    error: string | null;
+    ended: boolean;
+}
+export interface MoviePlayerProps {
+    videoPath: string;
+    posterPath: string;
+    posterVersion?: number;
+    width: number;
+    height: number;
+    playback: PlaybackState;
+    onPlayback: (patch: Partial<PlaybackState>) => void;
+}
+export declare function MoviePlayer({ videoPath, posterPath, posterVersion, width, height, playback, onPlayback }: MoviePlayerProps): import("react").JSX.Element;
+export declare function formatClock(ms: number): string;
+export declare function ProgressBar({ positionMs, durationMs, chapters, width, playing, }: {
+    positionMs: number;
+    durationMs: number | null;
+    chapters: Array<{
+        tMs?: number;
+    }>;
+    width: number;
+    playing: boolean;
+}): import("react").JSX.Element;