+
+ );
+ }
+
+ const section =
+ route.name === "flow" || route.name === "flows"
+ ? "flows"
+ : route.name === "run" || route.name === "runs"
+ ? "runs"
+ : route.name === "demo" || route.name === "demos"
+ ? "demos"
+ : route.name;
+
+ return (
+
+
+ Nothing here
++ + Go to flows + +
+
+ {
+ writePref(RAIL_KEY, !collapsed);
+ setCollapsed(!collapsed);
+ }}
+ />
+ {page}
+
+ );
+}
+
+function Rail({
+ section,
+ collapsed,
+ projectName,
+ onToggle,
+}: {
+ section: string;
+ collapsed: boolean;
+ projectName: string | null;
+ onToggle: () => void;
+}) {
+ const live = useLiveRunIds();
+ const liveCount = live ? live.split(",").length : 0;
+ const conn = useConnection();
+ const link = (to: string, id: string, label: string, icon: ReactNode, extra?: ReactNode) => (
+
+ {icon}
+ {label}
+ {extra}
+
+ );
+ return (
+
+ );
+}
diff --git a/ui/src/api.ts b/ui/src/api.ts
new file mode 100644
index 0000000..f4a79f1
--- /dev/null
+++ b/ui/src/api.ts
@@ -0,0 +1,76 @@
+// Calls to the Lest server. The page is served same-origin with the auth
+// cookie already set, so plain fetch works.
+
+import type { FlowDetail, FlowsResponse, RunResponse, RunsResponse, StateResponse } from "./types";
+
+export class ApiError extends Error {
+ constructor(
+ public status: number,
+ message: string,
+ ) {
+ super(message);
+ }
+}
+
+async function call
+
+ );
+}
diff --git a/ui/src/components/RunControls.tsx b/ui/src/components/RunControls.tsx
new file mode 100644
index 0000000..0f04f0e
--- /dev/null
+++ b/ui/src/components/RunControls.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { api } from "../api";
+import { isLive } from "../store/runState";
+import { noteStarted, useRun } from "../store/store";
+import type { FlowSummary, Scalar } from "../types";
+import { IconPlay, IconRecord, IconStop } from "./icons";
+import { Switch } from "./ui";
+
+function defaultValue(v: Scalar | undefined): string {
+ return v === undefined ? "" : String(v);
+}
+
+/** Environment, inputs, live view and Run/Cancel for one flow. */
+export function RunControls({
+ flow,
+ runId,
+ record = false,
+ onStarted,
+}: {
+ flow: FlowSummary;
+ /** The run shown under the controls; Cancel acts on it while it is live. */
+ runId: string | null;
+ record?: boolean;
+ onStarted?: (runId: string) => void;
+}) {
+ const [env, setEnv] = useState(flow.defaultEnvironment ?? flow.environments[0] ?? "");
+ const [inputs, setInputs] = useState
+ ![Live view of the browser step]()
+ {message &&
+ {message}
}
+
+ {badge}
+ {phase === "ended" && hasFrame && Last frame}
+ {browser.url}
+
+ {failed ? `Run ${runId} could not be loaded.` : "Loading run"}
;
+ }
+ const ctx: Ctx = { run, now, live, projectRoot, flowPath, openImage: setImage };
+ return (
+
+ setImage(null)} />}
+
+ );
+}
+
+interface Ctx {
+ run: RunState;
+ now: number;
+ live: boolean;
+ projectRoot: string | null;
+ flowPath?: string;
+ openImage: (img: OpenImage) => void;
+}
+
+function runStatus(run: RunState): StepStatus | RunReport["result"] {
+ return run.finished ? run.finished.result : "running";
+}
+
+function SummaryStrip({ ctx }: { ctx: Ctx }) {
+ const { run, now } = ctx;
+ const status = runStatus(run);
+ const duration = run.finished ? run.finished.durationMs : run.startedAtMs ? now - run.startedAtMs : null;
+ const warnings = run.report?.warnings?.length ?? 0;
+ return (
+
+
+ {showSide &&
+
+ )}
+
+
+ The run could not complete
+ {run.finished.error}
+
+
+ );
+}
+
+const toolStatusText: Record
+ Result
+
+
+
+ Duration
+ {formatDuration(duration) || "0ms"}
+
+ {run.startedAtMs && (
+
+ Started
+
+ {timeAgo(run.startedAtMs, Math.max(now, Date.now()))}
+
+
+ )}
+ {run.environment && (
+
+ Environment
+ {run.environment}
+
+ )}
+
+ Run
+
+ {run.runId}
+
+ {run.report?.resumedFrom && (
+
+ Resumed from
+
+ {run.report.resumedFrom.step} of {run.report.resumedFrom.runId}
+
+
+ )}
+
+ {warnings > 0 && (
+
+ Warnings
+
+
+ )}
+
+
+ );
+}
+
+function ToolRow({ tool, signIn }: { tool: ToolReport; signIn?: string }) {
+ const [result, setResult] = useState{tools.length ? "Preflight" : "Setup"}
+
+ {tools.map((t) => (
+
+
+
+ ))}
+ {services.map((s) => (
+
+
+ ))}
+
+
+ {result && (
+
+
+ {result}
+
+
+ )}
+
+ );
+}
+
+// Step tree
+
+function autoOpen(s: StepState, live: boolean): boolean {
+ if (s.children.length) {
+ if (s.status === "running" || s.status === "failed" || s.status === "errored") return true;
+ return live && s.status === "pending";
+ }
+ return (s.status === "failed" || s.status === "errored") && !s.report?.tolerated;
+}
+
+function StepTree({ ctx }: { ctx: Ctx }) {
+ const { run } = ctx;
+ const [toggles, setToggles] = useState
+
+ );
+ }
+ const node = (id: string, depth: number) => (
+ {run.finished ? "This run executed no steps." : "Waiting for the first step"}
+
+
+ );
+}
+
+function stepCounts(run: RunState): string {
+ const leaves = allStepIds(run)
+ .map((id) => run.steps[id])
+ .filter((s): s is StepState => !!s && s.children.length === 0);
+ const done = leaves.filter((s) => s.status !== "pending" && s.status !== "running").length;
+ return `${done} of ${leaves.length}`;
+}
+
+function StepNode({
+ id,
+ depth,
+ ctx,
+ toggles,
+ onToggle,
+}: {
+ id: string;
+ depth: number;
+ ctx: Ctx;
+ toggles: Record
+ Steps
+ {stepCounts(run)}
+
+
+ {run.roots.map((id) => node(id, 0))}
+ {run.finallyRoots.length > 0 && (
+ <>
+
+ Finally
+ {run.finallyRoots.map((id) => node(id, 0))}
+
+ )}
+
+
+ {open && isContainer && (
+
+ );
+}
+
+function Attempts({ s, now }: { s: StepState; now: number }) {
+ if (s.retry && s.status === "running") {
+ const wait = Math.max(0, s.retry.nextAtMs - now);
+ return (
+
+ attempt {s.retry.attempt + 1} of {s.retry.maxAttempts}, next in {Math.ceil(wait / 1000)}s
+
+ );
+ }
+ const max = s.maxAttempts;
+ if (s.status === "running" && max && s.attempt > 1) {
+ return (
+
+ attempt {s.attempt} of {max}
+
+ );
+ }
+ if (s.status !== "running" && s.attempt > 1) {
+ return {plural(s.attempt, "attempt")};
+ }
+ return null;
+}
+
+type Tab = "output" | "details" | "artifacts";
+
+function StepBody({ s, depth, ctx }: { s: StepState; depth: number; ctx: Ctx }) {
+ const [tab, setTab] = useState
+ {s.children.map((c) => (
+
+ )}
+ {open && !isContainer &&
+ {failedHere &&
+ );
+}
+
+const MAX_RENDERED_LINES = 2000;
+
+function prettyIfJson(text: string): string {
+ const t = text.trim();
+ if (t.length > 200_000 || !(t.startsWith("{") || t.startsWith("["))) return text;
+ try {
+ return JSON.stringify(JSON.parse(t), null, 2);
+ } catch {
+ return text;
+ }
+}
+
+function tail(text: string): { text: string; dropped: number } {
+ const lines = text.replace(/\n+$/, "").split("\n");
+ if (lines.length <= MAX_RENDERED_LINES) return { text: lines.join("\n"), dropped: 0 };
+ return { text: lines.slice(-MAX_RENDERED_LINES).join("\n"), dropped: lines.length - MAX_RENDERED_LINES };
+}
+
+function OutputPane({ s, live }: { s: StepState; live: boolean }) {
+ const pre = useRef
+ {tabs.map((t) => (
+
+ ))}
+
+
+ {tab === "output" &&
+ This step saved no artifacts.
+ ))}
+
+ {both && {stream}}
+ {dropped > 0 &&
,
+ );
+ }
+ return <>{parts};
+ }
+ if (!lines.length) {
+ return (
+ Showing the last {MAX_RENDERED_LINES} lines; {dropped} earlier lines are in the report.
}
+
+ {text.split("\n").map((l, i) => (
+
+ {l}
+ {"\n"}
+
+ ))}
+
+
+ {s.status === "running" ? "Waiting for output" : s.status === "pending" ? "Not run yet." : "No output."}
+
+ );
+ }
+ const shown = lines.slice(-MAX_RENDERED_LINES);
+ const dropped = s.droppedLines + lines.length - shown.length;
+ return (
+ <>
+ {dropped > 0 && {dropped} earlier lines are not shown.
}
+
+ {shown.map((l) => (
+
+ {l.line}
+ {"\n"}
+
+ ))}
+
+
+ );
+}
+
+function DetailsPane({ s }: { s: StepState }) {
+ const r: StepReport | null = s.report;
+ const rows: [string, ReactNode][] = [];
+ if (r?.resolved) rows.push(["Resolved", {r.resolved.trimEnd()}]);
+ rows.push(["Status", s.status + (r?.tolerated ? " (failure tolerated by continueOnError)" : "")]);
+ if (r?.exitCode !== undefined && r?.exitCode !== null) rows.push(["Exit code", {r.exitCode}]);
+ if (r?.httpStatus) rows.push(["HTTP status", {r.httpStatus}]);
+ if (s.attempt) rows.push(["Attempts", s.maxAttempts ? `${s.attempt} of up to ${s.maxAttempts}` : String(s.attempt)]);
+ if (r?.startedAt) rows.push(["Started", formatTime(r.startedAt)]);
+ if (s.durationMs !== null) rows.push(["Duration", formatDuration(s.durationMs)]);
+ if (r?.error && r.error !== r.headline) rows.push(["Error", {r.error}]);
+ if (r?.error && r.error === r.headline && !(s.status === "failed" || s.status === "errored"))
+ rows.push(["Error", {r.error}]);
+ if (s.notes) rows.push(["Notes", s.notes]);
+ const outputs = Object.entries(r?.outputs ?? {});
+ if (outputs.length) {
+ rows.push([
+ "Outputs",
+ | {k} | +
+ {typeof v === "string" ? v : JSON.stringify(v, null, 2)}
+ |
+
+ {rows.map(([k, v], i) => (
+
+ );
+}
+
+function KvRow({ k, v }: { k: string; v: ReactNode }) {
+ return (
+ <>
+ {k}
+ {v}
+
+ );
+}
+
+/** The failure explanation slot. The primary line holds the deterministic
+ * headline today; the marker and secondary lines keep their place so a
+ * different primary text can fill it without moving anything. */
+function FailedCard({ s, ctx }: { s: StepState; ctx: Ctx }) {
+ const r = s.report as StepReport;
+ const { run } = ctx;
+ const top = topLevelOf(run, s.id);
+ const flowId = run.flowId ?? run.report?.flowId ?? "";
+ const report = run.report ?? syntheticReport(run, ctx);
+ const rerun = rerunCommand({
+ flowId,
+ fromStep: top,
+ runId: run.runId,
+ environment: run.environment,
+ inputs: report.inputs,
+ });
+ const headline = r.headline ?? r.error ?? `${s.name} ${s.status}`;
+ return (
+
+
+ );
+}
+
+/** A report-shaped view of a run whose report has not loaded yet. */
+function syntheticReport(run: RunState, ctx: Ctx): RunReport {
+ const toReport = (id: string): StepReport => {
+ const s = run.steps[id]!;
+ return (
+ s.report ?? {
+ id,
+ name: s.name,
+ kind: s.kind,
+ status: s.status,
+ attempts: s.attempt,
+ durationMs: s.durationMs ?? 0,
+ children: s.children.map(toReport),
+ }
+ );
+ };
+ return {
+ schemaVersion: 1,
+ runId: run.runId,
+ flowId: run.flowId ?? "",
+ flowName: run.flowName ?? "",
+ flowPath: ctx.flowPath ?? "",
+ projectDir: ctx.projectRoot ?? "",
+ environment: run.environment ?? undefined,
+ startedAt: new Date(run.startedAtMs ?? Date.now()).toISOString(),
+ durationMs: run.finished?.durationMs ?? 0,
+ result: run.finished?.result ?? "failed",
+ inputs: {},
+ steps: run.roots.map(toReport),
+ finally: run.finallyRoots.map(toReport),
+ };
+}
+
+// Artifacts
+
+export function ArtifactGrid({
+ runId,
+ artifacts,
+ report,
+ onOpen,
+ compact = false,
+}: {
+ runId: string;
+ artifacts: Artifact[];
+ report: RunReport | null;
+ onOpen: (img: OpenImage) => void;
+ compact?: boolean;
+}) {
+ return (
+
+
+ {s.notes && {headline}
+
+ {s.notes}
}
+
+
+
+
+
+ {artifacts.map((a) => {
+ const url = fileUrl(runId, a.path);
+ if (a.mime.startsWith("image/")) {
+ return (
+
+ );
+ }
+ if (a.mime.startsWith("video/")) {
+ const chapters =
+ report?.demo?.chaptersVtt && report.demo.video === a.path
+ ? fileUrl(runId, report.demo.chaptersVtt)
+ : null;
+ return (
+
+ );
+}
+
+// Side panel
+
+function SidePanel({ ctx }: { ctx: Ctx }) {
+ const { run, live } = ctx;
+ const groups = runArtifacts(run);
+ const cleanups = cleanupRows(run);
+ const warnings = run.report?.warnings ?? [];
+ const showLive = live && run.browser;
+ return (
+
+ );
+}
+
+function cleanupRows(run: RunState) {
+ const rows: { stepId: string; command: string; dot: StepStatus; label: string }[] = [];
+ const seen = new Set
+
+
+ {a.label}
+
+ {formatBytes(a.bytes)}
+
+
+
+ );
+ }
+ return (
+
+
+ {msg}
+
+ ) : null;
+}
+
+export async function copyWithToast(text: string, what: string) {
+ const ok = await copyText(text);
+ toast(ok ? `Copied ${what}` : `Could not copy ${what}`);
+}
+
+export function CopyButton({ text, label }: { text: string; label: string }) {
+ return (
+
+ );
+}
+
+export interface MenuItem {
+ label: string;
+ icon?: ReactNode;
+ onSelect: () => void;
+}
+
+export function OverflowMenu({ items, label = "More actions" }: { items: MenuItem[]; label?: string }) {
+ const [open, setOpen] = useState(false);
+ const wrap = useRef
+
+ {open && (
+
+ );
+}
+
+export function Lightbox({ src, caption, onClose }: { src: string; caption: string; onClose: () => void }) {
+ const closeRef = useRef
+ {items.map((it) => (
+
+ ))}
+
+ )}
+
+
+ e.stopPropagation()}>
+ 
+ {caption}
+
+
+ );
+}
+
+export function Switch({
+ checked,
+ onChange,
+ label,
+}: {
+ checked: boolean;
+ onChange: (v: boolean) => void;
+ label: string;
+}) {
+ return (
+
+ );
+}
diff --git a/ui/src/lib/context.ts b/ui/src/lib/context.ts
new file mode 100644
index 0000000..f781bdc
--- /dev/null
+++ b/ui/src/lib/context.ts
@@ -0,0 +1,122 @@
+// Text a person can paste into a terminal or hand to someone (or to their own
+// agent) to pick up a failure: built from the run report, client-side.
+
+import type { RunReport, StepReport } from "../types";
+import { shellQuote } from "./format";
+
+export interface RerunOptions {
+ flowId: string;
+ fromStep: string;
+ runId?: string;
+ environment?: string | null;
+ inputs?: Record{n.text};
+ case "strong":
+ return {renderInline(n.children)};
+ case "em":
+ return {renderInline(n.children)};
+ case "link":
+ return (
+
+ {renderInline(n.children)}
+
+ );
+ }
+ });
+}
+
+export function Markdown({ text, className }: { text: string; className?: string }) {
+ return (
+
+ {parseBlocks(text).map((b, i) =>
+ b.type === "p" ? (
+
+ );
+}
+
+/** Plain text of the first paragraph, with inline markup removed. */
+export function plainFirstLine(src: string | null | undefined): string {
+ if (!src) return "";
+ const first = parseBlocks(src)[0];
+ if (!first) return "";
+ const text = first.type === "p" ? first.text : (first.items[0] ?? "");
+ const flat = (nodes: Inline[]): string =>
+ nodes.map((n) => (n.type === "text" || n.type === "code" ? n.text : flat(n.children))).join("");
+ return flat(parseInline(text));
+}
diff --git a/ui/src/lib/project.ts b/ui/src/lib/project.ts
new file mode 100644
index 0000000..2a5c003
--- /dev/null
+++ b/ui/src/lib/project.ts
@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import type { StateResponse } from "../types";
+
+let cached: StateResponse | null = null;
+let pending: Promise{renderInline(parseInline(b.text))}
+ ) : b.type === "ul" ? ( +-
+ {b.items.map((it, j) => (
+
- {renderInline(parseInline(it))} + ))} +
-
+ {b.items.map((it, j) => (
+
- {renderInline(parseInline(it))} + ))} +
+
+ );
+ }
+ if (!flow) return
+
+ Demo not found
+{error}
+Loading demo
+
+ );
+}
+
+function DemoBody({ flow, runId }: { flow: FlowDetail; runId: string | null }) {
+ const { run } = useRun(runId);
+ const [image, setImage] = useState<{ src: string; caption: string } | null>(null);
+ const videoRef = useRef
+
+ );
+ } else if (run && d?.video) {
+ stage = (
+
+ Preparing the recording
+ {run.progress.length ? run.progress[run.progress.length - 1]!.message : "Running the steps before the recording"}
+
+
+
+
+ );
+ } else {
+ stage = (
+
+
+ );
+ }
+
+ return (
+
+ No recording yet
+ {run
+ ? `The latest run (${run.finished?.result ?? "unknown"}) saved no recording.`
+ : "Press Record to run the flow and record the walkthrough."}
+
+
+ setImage(null)} />}
+
+ );
+}
diff --git a/ui/src/pages/Demos.tsx b/ui/src/pages/Demos.tsx
new file mode 100644
index 0000000..1004961
--- /dev/null
+++ b/ui/src/pages/Demos.tsx
@@ -0,0 +1,93 @@
+import { api, fileUrl } from "../api";
+import { StatusDot } from "../components/status";
+import { formatTime, timeAgo } from "../lib/format";
+import { plainFirstLine } from "../lib/markdown";
+import { useLoad } from "../lib/project";
+import { linkHandler } from "../lib/router";
+import { useFinishedCount } from "../store/store";
+import type { FlowSummary, RunReport, StepReport } from "../types";
+
+export function isDemo(f: FlowSummary): boolean {
+ return !!f.demo || f.tags.includes("demo");
+}
+
+function walk(steps: StepReport[]): StepReport[] {
+ return steps.flatMap((s) => [s, ...walk(s.children ?? [])]);
+}
+
+/** A still for a demo card: the beat sheet, else the recording step's last
+ * screenshot, else any screenshot. */
+export function coverOf(report: RunReport): string | null {
+ if (report.demo?.beatSheet) return report.demo.beatSheet;
+ const steps = walk([...report.steps, ...(report.finally ?? [])]);
+ const rec = steps.find((s) => s.artifacts?.some((a) => a.label === "Recording"));
+ const pick = (s?: StepReport) => s?.artifacts?.filter((a) => a.mime.startsWith("image/")).pop()?.path ?? null;
+ return pick(rec) ?? steps.map(pick).filter(Boolean).pop() ?? null;
+}
+
+export function DemosPage() {
+ const finished = useFinishedCount();
+ const { data, error } = useLoad(() => api.flows(), [finished]);
+ if (error) return
+
+
+ {image &&
+
+ {run && !live && d && (d.extras.length > 0 || d.stills.length > 0) && (
+
+ {live ? "Recording" : "Recording"}
+
+ {run && d?.video && !live && (
+
+
+ {stage}
+
+
+ )}
+ Extras
+ {d.extras.length > 0 && (
+ -
+ {d.extras.map((e) => (
+
-
+
+ + {e.label} + + {e.bytes ? formatBytes(e.bytes) : ""} +
+ ))}
+
Could not load flows: {error}
Loading demos
+
+ );
+}
+
+function DemoCard({ flow }: { flow: FlowSummary }) {
+ const last = flow.lastRun;
+ const { data } = useLoad(() => (last ? api.run(last.runId) : Promise.resolve(null)), [last?.runId]);
+ const cover = data?.report ? coverOf(data.report) : null;
+ const href = `/demos/${encodeURIComponent(flow.id)}`;
+ const status = last?.result ?? "none";
+ return (
+
+
+
+ {demos.length === 0 ? (
+
+
+ Demos
+Flows that record a walkthrough. Recording one runs the flow.
+
+
+ ) : (
+ No demos in this project
+
+ A demo is a flow with a demo: block (title, summary, beat labels) and a browser step with{" "}
+ record: true. Flows tagged demo are listed here too.
+
+ {demos.map((f) => (
+
+ )}
+
+ {cover && last ? 
: No recording yet}
+
+
+
+
+ );
+}
diff --git a/ui/src/pages/Flow.tsx b/ui/src/pages/Flow.tsx
new file mode 100644
index 0000000..494cd75
--- /dev/null
+++ b/ui/src/pages/Flow.tsx
@@ -0,0 +1,113 @@
+import { api } from "../api";
+import { RunControls } from "../components/RunControls";
+import { RunView } from "../components/RunView";
+import { IconWarning } from "../components/icons";
+import { Markdown } from "../lib/markdown";
+import { useLoad, useProject } from "../lib/project";
+import { linkHandler } from "../lib/router";
+import { useLatestRunOf } from "../store/store";
+import type { FlowDetail } from "../types";
+
+export function FlowHeader({ flow, section = "flows" }: { flow: FlowDetail; section?: "flows" | "demos" }) {
+ return (
+ {flow.demo?.title ?? flow.name}
+
+ {flow.demo?.summary ?? plainFirstLine(flow.description)}
+
+ {flow.demo?.beats && flow.demo.beats.length > 0 && (
+ -
+ {flow.demo.beats.map((b) => (
+
- {b.label} + ))} +
+
+
+
+ );
+}
+
+export function FlowDiagnostics({ flow }: { flow: FlowDetail }) {
+ if (!flow.diagnostics.length) return null;
+ const errors = flow.diagnostics.some((d) => d.severity === "error");
+ return (
+
+
+
+ {section === "demos" ? (flow.demo?.title ?? flow.name) : flow.name}
+
+ {flow.id}
+
+ {flow.path}
+ {flow.tags.length > 0 && (
+ <>
+
+ {flow.tags.map((t) => (
+
+ {t}
+
+ ))}
+
+ )}
+
+ {section === "demos" && flow.demo?.summary ? (
+ {flow.demo.summary}
+ ) : (
+ flow.description &&
+
+ );
+}
+
+/** The run a flow page shows: one started since the page loaded, else one in
+ * progress on the server, else the latest stored run. */
+export function useShownRun(flowId: string): { runId: string | null; loaded: boolean } {
+ const started = useLatestRunOf(flowId);
+ const { data } = useLoad(() => api.runs(flowId, 1), [flowId]);
+ const initial = data ? (data.running[0]?.runId ?? data.runs[0]?.runId ?? null) : null;
+ return { runId: started ?? initial, loaded: !!data || !!started };
+}
+
+export function FlowPage({ id }: { id: string }) {
+ const { data: flow, error } = useLoad(() => api.flow(id), [id]);
+ const project = useProject();
+ const shown = useShownRun(id);
+
+ if (error) {
+ return (
+
+
+ {errors ? "This flow cannot run until these are fixed" : "Warnings in this flow"}
+ -
+ {flow.diagnostics.map((d, i) => (
+
- + {d.at && {d.at}} + {d.message} + + ))} +
+
+
+ );
+ }
+ if (!flow) return Loading flow
+
+ );
+}
diff --git a/ui/src/pages/Flows.tsx b/ui/src/pages/Flows.tsx
new file mode 100644
index 0000000..5deb622
--- /dev/null
+++ b/ui/src/pages/Flows.tsx
@@ -0,0 +1,215 @@
+import { useMemo, useState } from "react";
+import { api } from "../api";
+import { IconSearch, IconWarning, IconX } from "../components/icons";
+import { StatusDot, type AnyStatus } from "../components/status";
+import { useNow } from "../components/ui";
+import { formatDuration, timeAgo } from "../lib/format";
+import { plainFirstLine } from "../lib/markdown";
+import { useLoad } from "../lib/project";
+import { linkHandler } from "../lib/router";
+import { getRun, useFinishedCount, useLiveRunIds } from "../store/store";
+import type { Diagnostic, FlowSummary } from "../types";
+
+/** Flow ids with a run in progress that this page has seen. */
+export function useRunningFlows(): Set
+
+ ) : null}
+ No runs yet
+Press Run to start this flow. Steps, output and artifacts appear here as it runs.
+Could not load flows: {error}
Loading flows
+ }
+ {[...folders.entries()]
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([folder, flows]) => (
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+function FlowCard({
+ flow,
+ now,
+ running,
+ problems,
+}: {
+ flow: FlowSummary;
+ now: number;
+ running: boolean;
+ problems: Diagnostic[];
+}) {
+ const status: AnyStatus = running ? "running" : (flow.lastRun?.result ?? "none");
+ const href = `/flows/${encodeURIComponent(flow.id)}`;
+ return (
+
+
+
+
+ {data.diagnostics.length > 0 && !dismissed && (
+
+
+ Flows
+
+ {data.flows.length} {data.flows.length === 1 ? "flow" : "flows"} in this project
+
+ d.severity === "error") ? "banner-error" : "banner-warning"}`} role="alert">
+
+ )}
+
+ {data.flows.length === 0 ? (
+
+
+
+
+ {data.diagnostics.length === 1 ? "1 problem" : `${data.diagnostics.length} problems`} in flow files
+
+ -
+ {data.diagnostics.map((d, i) => (
+
- + {d.file} + + {d.at ? {d.at}: : null} + {d.message} + + + ))} +
+
+ ) : (
+ <>
+ No flows yet
+
+ Lest looks for *.lest.yaml files in the folders listed under flows: in{" "}
+ lest.yaml at the project root.
+
+ Run lest init in your project to create lest.yaml and a first flow, then reload
+ this page.
+
+
+ {allTags.length > 0 && (
+
+ {visible.length === 0 &&
+ {allTags.map((t) => (
+
+ ))}
+
+ )}
+ No flow matches.
+ {folder || "top level"} {flows.length}
+
+
+ {flows.map((f) => (
+
+
+
+ {plainFirstLine(flow.description) || No description}
+
+
+
+ );
+}
diff --git a/ui/src/pages/Run.tsx b/ui/src/pages/Run.tsx
new file mode 100644
index 0000000..4edcb13
--- /dev/null
+++ b/ui/src/pages/Run.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { api } from "../api";
+import { RunView } from "../components/RunView";
+import { IconRefresh, IconStop } from "../components/icons";
+import { useProject } from "../lib/project";
+import { linkHandler, navigate } from "../lib/router";
+import { isLive } from "../store/runState";
+import { noteStarted, useRun } from "../store/store";
+
+export function RunPage({ runId }: { runId: string }) {
+ const { run } = useRun(runId);
+ const project = useProject();
+ const [error, setError] = useState
+ {flow.tags.map((t) => (
+
+ {t}
+
+ ))}
+
+
+ {running ? (
+ running
+ ) : flow.lastRun ? (
+ <>
+ {timeAgo(flow.lastRun.startedAt, now)}
+ {formatDuration(flow.lastRun.durationMs)}
+
+ ) : (
+ never run
+ )}
+
+
+
+ );
+}
diff --git a/ui/src/pages/Runs.tsx b/ui/src/pages/Runs.tsx
new file mode 100644
index 0000000..70ebc63
--- /dev/null
+++ b/ui/src/pages/Runs.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import { IconWarning } from "../components/icons";
+import { StatusDot, statusLabel } from "../components/status";
+import { useNow } from "../components/ui";
+import { formatDuration, formatTime, timeAgo } from "../lib/format";
+import { useLoad } from "../lib/project";
+import { linkHandler, navigate } from "../lib/router";
+import { getRun, hydrate, useFinishedCount, useLiveRunIds } from "../store/store";
+import type { RunResult } from "../types";
+
+const RESULTS: RunResult[] = ["passed", "failed", "errored", "cancelled"];
+
+export function RunsPage() {
+ const finished = useFinishedCount();
+ const liveIds = useLiveRunIds();
+ const { data, error } = useLoad(() => Promise.all([api.runs(undefined, 200), api.flows()]), [finished, liveIds]);
+ const [flow, setFlow] = useState("");
+ const [results, setResults] = useState
+
+
+
+
+
+ Runs
+
+
+ {runId}
+
+ + {flowId ? ( + + {flowName} + + ) : ( + flowName + )} +
+ {run?.report && ( +
+ {run.report.flowId}
+
+ {run.report.flowPath}
+
+ )}
+
+ {live ? (
+
+ ) : (
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+ Could not load runs: {error}
Loading runs
+
+ );
+}
diff --git a/ui/src/pages/Settings.tsx b/ui/src/pages/Settings.tsx
new file mode 100644
index 0000000..5842b7c
--- /dev/null
+++ b/ui/src/pages/Settings.tsx
@@ -0,0 +1,76 @@
+import { useState, type ReactNode } from "react";
+import { IconDisplay, IconMoon, IconSun } from "../components/icons";
+import { CopyButton } from "../components/ui";
+import { readTheme, saveTheme, useProject, type Theme } from "../lib/project";
+
+const THEMES: { id: Theme; label: string; icon: ReactNode }[] = [
+ { id: "system", label: "System", icon:
+
+
+
+ Runs
+Newest first. Reports are kept in the data directory.
+
+
+
+ {running.length === 0 && stored.length === 0 ? (
+
+ {RESULTS.map((r) => (
+
+ ))}
+
+
+
+ ) : (
+ {runs.runs.length ? "No run matches" : "No runs yet"}
+{runs.runs.length ? "Change the filters to see more runs." : "Start a flow from the Flows page or with lest run."}
+
+
+
+
+
+ )}
+ | Status | +Flow | +Run | +Environment | +Started | +Duration | +Warnings | +
|---|---|---|---|---|---|---|
|
+
+ |
+ + + {names.get(r.flowId) ?? r.flowId} + + | +{r.runId} | +{live?.environment ?? r.environment ?? ""} | +{started ? timeAgo(started, now) : ""} | +{started ? formatDuration(now - started) : ""} | ++ |
|
+
+ |
+ + + {r.flowName} + + | +{r.runId} | +{r.environment ?? ""} | +{timeAgo(r.startedAt, now)} | +{formatDuration(r.durationMs)} | +
+ {r.warnings > 0 ? (
+
+ |
+
+
+ );
+}
diff --git a/ui/src/store/runState.ts b/ui/src/store/runState.ts
new file mode 100644
index 0000000..4f03348
--- /dev/null
+++ b/ui/src/store/runState.ts
@@ -0,0 +1,432 @@
+// Pure run state: folds a run's events (and, once it exists, its report) into
+// a step tree the UI renders. No I/O here; store.ts owns fetching and SSE.
+
+import type {
+ Artifact,
+ Beat,
+ OutputStream,
+ PlanNode,
+ RunEvent,
+ RunReport,
+ RunResult,
+ StepKind,
+ StepReport,
+ StepStatus,
+ ToolReport,
+} from "../types";
+
+/** Per step, only the newest lines are kept in memory. */
+export const MAX_LINES_PER_STEP = 5000;
+
+export interface OutputLine {
+ seq: number;
+ stream: OutputStream;
+ line: string;
+}
+
+export interface RetryState {
+ attempt: number;
+ maxAttempts: number;
+ reason: string;
+ /** Server clock (ms since epoch) when the next attempt starts. */
+ nextAtMs: number;
+}
+
+export interface StepState {
+ id: string;
+ name: string;
+ kind: StepKind;
+ notes?: string;
+ parent: string | null;
+ children: string[];
+ status: StepStatus;
+ /** The attempt in progress or the last one made; 0 before the first. */
+ attempt: number;
+ maxAttempts: number | null;
+ retry: RetryState | null;
+ startedAtMs: number | null;
+ finishedAtMs: number | null;
+ durationMs: number | null;
+ output: OutputLine[];
+ droppedLines: number;
+ artifacts: Artifact[];
+ beats: Beat[];
+ report: StepReport | null;
+}
+
+export interface BrowserState {
+ stepId: string;
+ cdpPort: number;
+ targetId: string;
+ url: string;
+ active: boolean;
+}
+
+export interface FinishedState {
+ result: RunResult;
+ durationMs: number;
+ error: string | null;
+ atMs: number;
+}
+
+export interface RunState {
+ runId: string;
+ flowId: string | null;
+ flowName: string | null;
+ environment: string | null;
+ /** The highest event seq applied; -1 before any. */
+ lastSeq: number;
+ /** An event arrived after a missing one; the store refetches the run. */
+ gap: boolean;
+ /** Events that arrived during a gap, applied after the refetched
+ * snapshot so nothing newer than the snapshot is lost. */
+ pending: RunEvent[];
+ startedAtMs: number | null;
+ steps: Record
+
+
+
+ Settings
+Saved in this browser.
+
+
+
+
+
+
+
+ Appearance
+
+
+
+
+
+ Theme
+ System follows your operating system's light or dark setting.
+
+ {THEMES.map((t) => (
+
+ ))}
+
+
+ Project
+
+ {state ? (
+
+
+ ) : (
+ Name
+ {state.project.name}
+ Root
+
+ {state.project.root}
+ Config
+ {state.project.hasConfig ? lest.yaml : "No lest.yaml; defaults apply"}
+ Lest version
+ {state.version}
+ Loading
+ )}
+