cloving 0.3.20 → 1.1.0

package/dist/src/cli/watch-page.js

@@ -0,0 +1,258 @@
+import { cardReply } from "./watch-card-reply.js";
+import { watchCardClient } from "./watch-card-client.js";
+import { AddCard, CardInput, cardKey, cardSubmitKey, } from "./watch-card-view.js";
+import { watchClient } from "./watch-client.js";
+import { priceOf, tokenCount, usageOf } from "../worker-usage.js";
+import { priceText, usageText, totalsSuffix } from "./usage-render.js";
+import { startPrompts, StartCard, StartRun } from "./watch-start-view.js";
+import { Board, boardSizing, Card, Column, columnCollapsed, CardReview, WorkflowList, cardReview, cardStep, completionMark, } from "./watch-board-view.js";
+import { boardWorkflow, watchHash, watchLocation, watchTitle, } from "./watch-navigation.js";
+import { clockTime, completedDetail, counted, elapsed, groupActivity, pageTitle, phaseTime, runName, runTone, selectedRun, toneOf, turnTime, waitingDetail, } from "./watch-render.js";
+import { Command, Decision, Events, Group, Item, Turn, Work, } from "./watch-turn.js";
+import { clove, Banner, BannerDetail, BoardPage, Header, Page, Phases, PullRequest, Review, Run, } from "./watch-view.js";
+const functions = [
+    cardReply,
+    cardSubmitKey,
+    cardKey,
+    AddCard,
+    CardInput,
+    priceOf,
+    tokenCount,
+    usageOf,
+    priceText,
+    usageText,
+    totalsSuffix,
+    watchHash,
+    watchLocation,
+    boardWorkflow,
+    watchTitle,
+    cardReview,
+    cardStep,
+    completionMark,
+    CardReview,
+    Card,
+    Column,
+    columnCollapsed,
+    WorkflowList,
+    Board,
+    counted,
+    elapsed,
+    clockTime,
+    groupActivity,
+    turnTime,
+    toneOf,
+    runTone,
+    runName,
+    waitingDetail,
+    completedDetail,
+    phaseTime,
+    selectedRun,
+    pageTitle,
+    Item,
+    Group,
+    Turn,
+    Work,
+    Command,
+    Decision,
+    Events,
+    startPrompts,
+    StartCard,
+    StartRun,
+    BannerDetail,
+    Banner,
+    Phases,
+    PullRequest,
+    Review,
+    Run,
+    Header,
+    BoardPage,
+    Page,
+];
+const light = `
+  color-scheme: light;
+  --bg: #D6E7DF; --surface: #F4FAF6; --surface-2: #E4F0E9;
+  --ink: #0E2310; --muted: #405C4C; --line: #B7D2C4;
+  --accent: #0BBF64; --accent-strong: #026B3B;
+  --accent-tint: rgba(11,191,100,0.14); --on-accent: #052213;
+  --warn: #8A5A00; --warn-tint: rgba(214,150,20,0.16);
+  --code-bg: #0F1D16; --code-head: #15271E; --code-fg: #D5E6DC;
+  --code-line: #24392E; --code-muted: #86A394;
+  --shadow: 0 18px 50px rgba(14,35,16,0.16);
+  --bad: #C02B2B; --bad-tint: rgba(192,43,43,0.14);
+`;
+const dark = `
+  color-scheme: dark;
+  --bg: #141C18; --surface: #1B2520; --surface-2: #22302A;
+  --ink: #E6F2EB; --muted: #A2BAAD; --line: #2E4037;
+  --accent: #0BBF64; --accent-strong: #45DD92;
+  --accent-tint: rgba(11,191,100,0.18); --on-accent: #052213;
+  --warn: #F0C062; --warn-tint: rgba(240,192,98,0.14);
+  --code-bg: #0A1410; --code-head: #112019; --code-fg: #D5E6DC;
+  --code-line: #1F3329; --code-muted: #86A394;
+  --shadow: 0 18px 50px rgba(0,0,0,0.45);
+  --bad: #FF7B72; --bad-tint: rgba(255,123,114,0.14);
+`;
+const style = `
+:root {${light}
+  --heading-font: "Heebo", system-ui, sans-serif;
+  --body-font: "Space Grotesk", system-ui, sans-serif;
+  --code-font: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font: 14px/1.5 var(--body-font);
+  background: var(--bg); color: var(--ink);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {${dark}}
+}
+:root[data-theme="light"] {${light}}
+:root[data-theme="dark"] {${dark}}
+* { box-sizing: border-box; }
+body { margin: 0 auto; max-width: 1800px; padding: 0 20px 96px; }
+body:has(.board-page) { padding-bottom: 0; overflow: hidden; }
+.board-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
+.board-page > header, .board-page > .down { flex-shrink: 0; }
+.start-run { flex-shrink: 0; max-height: 45dvh; overflow-y: auto; }
+a { color: var(--accent-strong); }
+header { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 22px 0 10px; color: var(--muted); font-size: 12px; }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 800 26px/1.2 var(--heading-font); }
+.brand svg { width: 30px; height: 30px; color: var(--accent); }
+a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--code-bg); }
+h2, h3 { font-family: var(--heading-font); font-weight: 700; }
+.start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 12px; }
+.start-card { min-width: 0; padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
+.start-card h3 { margin: 0; }
+.start-card p { margin: 6px 0 12px; }
+.start-card .command { grid-template-columns: minmax(0, 1fr); margin: 0; }
+.start-card button { justify-self: end; }
+.workspace { display: flex; width: 100%; margin-top: 12px; flex: 1; min-height: 0; }
+.workflows { display: flex; flex-direction: row; flex-shrink: 0; gap: 8px; min-width: 0; margin-top: 12px; padding: 6px; overflow-x: auto; overflow-y: hidden; }
+.workflows a { display: grid; flex-shrink: 0; white-space: nowrap; gap: 2px; border-bottom: 3px solid transparent; padding: 10px; color: inherit; text-decoration: none; }
+.workflows a[aria-current="page"] { border-bottom-color: var(--accent); background: var(--surface); border-radius: 8px 8px 0 0; }
+.workflows span, .card small { color: var(--muted); font-size: 12px; }
+.board { width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.board h2 { margin: 0 0 8px; font-size: 24px; flex-shrink: 0; }
+.columns { display: flex; align-items: flex-start; gap: ${String(boardSizing.gap)}px; flex: 1; min-height: 0; overflow-x: scroll; overflow-y: hidden; padding: 6px 6px 12px; scrollbar-color: var(--muted) var(--surface-2); }
+@supports selector(::-webkit-scrollbar) { .columns { scrollbar-color: auto; } }
+.columns::-webkit-scrollbar { height: 12px; }
+.columns::-webkit-scrollbar-track { background: var(--surface-2); }
+.columns::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 6px; }
+.column { flex: 1 0 ${String(boardSizing.minimumColumnWidth)}px; min-width: ${String(boardSizing.minimumColumnWidth)}px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
+.column-name { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin: 0; padding: 4px 0 10px; color: var(--muted); font: 500 12px/1.5 var(--code-font); }
+.column-name > span:first-child { flex: 1; }
+.column-cards { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
+.column.collapsed { flex: 0 0 ${String(boardSizing.collapsedColumnWidth)}px; min-width: ${String(boardSizing.collapsedColumnWidth)}px; padding: 6px; }
+.collapsed .column-name { writing-mode: vertical-rl; padding: 0; }
+.column-name button, .start-toggle { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); margin: 0; }
+.column-name button:hover, .start-toggle:hover { background: var(--surface); }
+.add-card, .add-card-form button { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); margin: 4px 8px 4px 0; }
+.add-card { width: 100%; text-align: left; }
+.add-card-form { padding: 8px 0; overflow-wrap: anywhere; }
+.add-card-form label { display: block; color: var(--ink); margin-bottom: 8px; }
+.add-card-form input, .add-card-form textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink); background: var(--surface); }
+.add-card-form textarea { resize: vertical; }
+.add-card-form button:disabled { opacity: 0.6; cursor: default; }
+.add-card-form p { font-size: 12px; margin: 8px 0; }
+.card { display: grid; gap: 6px; margin-bottom: 10px; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); color: var(--ink); overflow-wrap: anywhere; background: var(--surface); }
+.card:hover { outline: 1px solid var(--accent-strong); }
+.card-run { display: grid; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
+.card-run strong { font-family: var(--heading-font); font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.completion-mark { font-size: 12px; }
+.card-step, .card-review, .card-cost, .card small { font: 400 12px/1.6 var(--code-font); font-variant-numeric: tabular-nums; }
+.card-step, .card-review { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card-step { color: var(--muted); }
+.card-step.active { color: var(--accent-strong); }
+.card-review { color: var(--muted); }
+.review-pill { display: inline-block; padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); }
+.decision-mark { width: fit-content; padding: 3px 7px; border-radius: 6px; background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--surface); color: var(--warn); font: 500 12px/1.6 var(--code-font); }
+.column.stopped { background: var(--surface); box-shadow: inset 0 0 0 1px var(--bad), inset 0 0 0 100vmax var(--bad-tint); }
+.stopped .column-name { color: var(--bad); background: var(--surface); border-radius: 6px; }
+.stopped .card { background: linear-gradient(var(--bad-tint), var(--bad-tint)), var(--surface); box-shadow: inset 0 0 0 1px var(--bad), var(--shadow); }
+.back { display: block; width: fit-content; margin: 16px 0; }
+.icon { font-weight: 700; color: var(--muted); }
+.good .icon, .phase.done .mark, p.good { color: var(--accent-strong); }
+.bad .icon, .phase.failed .mark, .bad, .down { color: var(--bad); }
+.attention .icon { color: var(--warn); }
+.working .icon, .phase.active .mark, .banner.working h2 { color: var(--accent-strong); }
+.banner { position: sticky; top: 0; z-index: 1; display: flex; gap: 12px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: 14px; padding: 14px; }
+.banner.good, .banner.working { border-left-color: var(--accent-strong); }
+.banner.bad { border-left-color: var(--bad); }
+.banner.attention { border-left-color: var(--warn); }
+.banner div { min-width: 0; flex: 1; }
+.banner .icon { font-size: 22px; line-height: 1.2; }
+.banner h2 { margin: 0; font-size: 20px; line-height: 1.45; }
+.banner .name { font: 400 13px/1.5 var(--body-font); color: var(--muted); margin-left: 6px; }
+.banner p { margin: 2px 0 0; }
+.now { display: block; color: var(--muted); font: 12px/1.6 var(--code-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.banner p, .phase .time, h3 { font-variant-numeric: tabular-nums; }
+.phases { display: flex; gap: 8px; list-style: none; margin: 18px 0 4px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
+.phase { flex: 1; min-width: 110px; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; border-top: 2px solid var(--line); padding-top: 10px; color: var(--muted); font: 400 12px/1.6 var(--code-font); }
+.phase .mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
+.phase.done, .phase.active, .phase.failed { color: var(--ink); }
+.phase.done, .phase.active { border-top-color: var(--accent-strong); }
+.phase.active { font-weight: 500; }
+.phase.active .mark { background: var(--accent-tint); }
+.phase.failed { border-top-color: var(--bad); }
+.phase .time { grid-column: 2; color: var(--muted); font-weight: 400; min-height: 18px; }
+h3 { margin: 22px 0 6px; font-size: 16px; }
+.meta { color: var(--muted); margin: 2px 0; font-size: 12px; overflow-wrap: anywhere; }
+.foot { margin-top: 18px; }
+.decision { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--warn); border-radius: 14px; padding: 2px 14px 12px; margin-top: 18px; }
+.decision h3 { margin-top: 10px; }
+.review { border-left: 3px solid var(--bad); padding: 0 12px; margin-top: 10px; }
+.review p { white-space: pre-wrap; }
+.fact, p.good, p.bad { margin: 8px 0 4px; }
+.report { white-space: pre-wrap; margin: 6px 0; max-height: 300px; overflow: auto; border-left: 3px solid var(--line); padding-left: 10px; }
+pre, code, .activity, .events { font: 400 12px/1.6 var(--code-font); }
+pre { background: var(--code-bg); color: var(--code-fg); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--code-line); border-radius: 8px; padding: 10px; margin: 4px 0; }
+details { margin: 6px 0; }
+summary { cursor: pointer; color: var(--muted); }
+.code-window { background: var(--code-bg); color: var(--code-fg); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--code-line), var(--shadow); overflow-wrap: anywhere; }
+.code-head { background: var(--code-head); color: var(--code-fg); padding: 10px 12px; border-bottom: 1px solid var(--code-line); border-radius: 14px 14px 0 0; font: 500 12px/1.6 var(--code-font); }
+.turn { margin-top: 22px; }
+.turn h3 { margin: 0; }
+.turn .meta { padding: 8px 12px; color: var(--code-muted); }
+.activity { padding: 4px 12px 12px; }
+.code-window summary, .code-window .event, .code-window .item.tool { color: var(--code-muted); }
+.code-window .bad, .code-window .item.error { color: #FF7B72; }
+.code-window .item.error { border-left-color: #FF7B72; }
+.code-window .item.result { color: var(--accent); border-left-color: var(--accent); }
+.command { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 10px 0; padding-bottom: 10px; }
+.command .label { grid-column: 1 / -1; }
+.command code { min-width: 0; padding-left: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
+button { font: 500 12px/1.6 var(--code-font); border: 0; border-radius: 6px; background: transparent; color: var(--code-fg); box-shadow: inset 0 0 0 2px var(--code-line); padding: 5px 10px; margin-right: 10px; cursor: pointer; }
+button:hover { background: var(--code-head); }
+.item { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0 1px 10px; border-left: 3px solid transparent; }
+.item.say { border-left-color: var(--code-line); margin: 8px 0; font: 14px/1.5 var(--body-font); }
+.item.tool { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item.result { margin: 8px 0; font: 500 14px/1.5 var(--body-font); }
+.tools summary { display: flex; gap: 10px; }
+.tools summary::before { content: "▸"; }
+.tools[open] summary::before { content: "▾"; }
+.last { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tools[open] .last { display: none; }
+.event { padding: 1px 12px; }
+.events { margin-top: 18px; padding-bottom: 10px; }
+.events > summary { color: var(--code-fg); }
+.down { font-weight: 600; }
+@media (max-width: 700px) { body { padding-inline: 12px; } }
+`;
+export function pageDocument(actionToken = null) {
+    const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${clove.viewBox}">${clove.paths.map((d) => `<path fill="#0BBF64" d="${d}"/>`).join("")}</svg>`;
+    const script = [
+        'import { h as element, h as component, render } from "./preact.mjs";',
+        `const clove = ${JSON.stringify(clove)};`,
+        `const actionToken = ${JSON.stringify(actionToken)};`,
+        ...functions.map((item) => item.toString()),
+        watchCardClient,
+        watchClient,
+    ].join("\n");
+    return [
+        "<!doctype html>",
+        '<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Cloving</title>',
+        `<link rel="icon" href="data:image/svg+xml,${encodeURIComponent(icon)}">`,
+        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&amp;family=Heebo:wght@500;700;800&amp;family=Space+Grotesk:wght@400..700&amp;display=swap" media="print" onload="this.media=\'all\'">',
+        `<style>${style}</style></head><body>`,
+        '<div id="app"></div>',
+        `<script type="module">${script}</script></body></html>`,
+        "",
+    ].join("\n");
+}

package/dist/src/cli/watch-paths.d.ts

@@ -0,0 +1,2 @@
+import type { WatchRun } from "./watch-render.ts";
+export declare function displayRun(run: WatchRun, home: string): WatchRun;

package/dist/src/cli/watch-paths.js

@@ -0,0 +1,52 @@
+import { basename } from "node:path";
+function folderPattern(folder) {
+    const escaped = folder.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp(`(?<![^\\s'"\`([{<,:;=])(?:file://)?${escaped}(?=$|[/\\s'"),:;]|\\.(?=\\s|$))`, "g");
+}
+function homePaths(text, home) {
+    if (home === "")
+        return text;
+    return text.replace(folderPattern(home), "~");
+}
+function relativePath(path, following) {
+    if (!path.endsWith("/"))
+        return ".";
+    return /^(?:$|[\s'"),:;]|\.(?=\s|$))/.test(following) ? "." : "";
+}
+function turnPaths(turn, shown) {
+    return {
+        ...turn,
+        worktree: basename(turn.worktree),
+        activity: turn.activity.map((item) => ({
+            ...item,
+            text: shown(item.text),
+        })),
+        summary: shown(turn.summary),
+        commits: turn.commits.map(shown),
+        files: turn.files.map(shown),
+        uncommitted: turn.uncommitted.map(shown),
+    };
+}
+export function displayRun(run, home) {
+    const worktrees = [...new Set(run.turns.map((turn) => turn.worktree))]
+        .filter((folder) => folder !== "")
+        .toSorted((left, right) => right.length - left.length)
+        .map((folder) => new RegExp(`${folderPattern(folder).source}/?`, "g"));
+    const shown = (text) => homePaths(worktrees.reduce((value, pattern) => value.replace(pattern, (path, offset) => relativePath(path, value.slice(offset + path.length))), text), home);
+    return {
+        ...run,
+        title: run.title === null ? null : shown(run.title),
+        detail: shown(run.detail),
+        turns: run.turns.map((turn) => turnPaths(turn, shown)),
+        decisions: run.decisions.map((decision) => ({
+            ...decision,
+            prompt: shown(decision.prompt),
+            approve: homePaths(decision.approve, home),
+            deny: homePaths(decision.deny, home),
+        })),
+        feedback: run.feedback.map((feedback) => ({
+            ...feedback,
+            text: shown(feedback.text),
+        })),
+    };
+}

package/dist/src/cli/watch-phases.d.ts

@@ -0,0 +1,7 @@
+import type { WatchPhase } from "./watch-render.ts";
+export declare const issueSteps: {
+    name: string;
+    operation: string;
+}[];
+export declare function decisionOf(events: readonly unknown[]): string;
+export declare function phasesOf(events: readonly unknown[], workflowId?: string): WatchPhase[];

package/dist/src/cli/watch-phases.js

@@ -0,0 +1,148 @@
+const endings = [
+    { type: "run.completed", name: "Completed", state: "done" },
+    { type: "run.failed", name: "Failed", state: "failed" },
+    { type: "run.cancelled", name: "Dropped", state: "failed" },
+];
+const review = { open: "gate.opened", close: "gate.decided" };
+const effect = { open: "effect.requested", close: "effect.reported" };
+const issueWorkflow = "develop-issue";
+export const issueSteps = [
+    { name: "Work tree", operation: "github-prepare" },
+    { name: "Claude turn", operation: "claude-turn" },
+    { name: "Pull request", operation: "github-open-pr" },
+    { name: "Greptile review", operation: "github-wait-review" },
+    { name: "Merge", operation: "github-merge" },
+];
+const verdicts = {
+    approved: "Approved",
+    denied: "Denied",
+};
+const unfinished = ["failed", "stopped"];
+const roundOperations = ["claude-turn", "github-open-pr", "github-wait-review"];
+function record(value) {
+    return typeof value === "object" && value !== null ? { ...value } : {};
+}
+function timeOf(event) {
+    const recordedAt = event?.["recordedAt"];
+    return typeof recordedAt === "string" ? recordedAt : null;
+}
+function firstAt(events, type) {
+    return timeOf(events.find((event) => event["type"] === type));
+}
+function closedAt(events, pair) {
+    const types = events.map((event) => event["type"]);
+    const closed = types.lastIndexOf(pair.close);
+    return closed > types.lastIndexOf(pair.open) ? timeOf(events[closed]) : null;
+}
+export function decisionOf(events) {
+    const known = events.map(record);
+    const types = known.map((event) => event["type"]);
+    const closed = types.lastIndexOf(review.close);
+    if (closed <= types.lastIndexOf(review.open))
+        return "";
+    const decision = record(known[closed]?.["payload"])["decision"];
+    return typeof decision === "string" ? decision : "";
+}
+function admission(events) {
+    const created = firstAt(events, "run.created");
+    const started = firstAt(events, "run.started");
+    return [
+        { name: "Admitted", startedAt: created, endedAt: created, ending: "done" },
+        { name: "Started", startedAt: started, endedAt: started, ending: "done" },
+    ];
+}
+function ticketSpans(events) {
+    const decision = decisionOf(events);
+    return [
+        ...admission(events),
+        {
+            name: "Claude turn",
+            startedAt: firstAt(events, effect.open),
+            endedAt: closedAt(events, effect),
+            ending: "done",
+        },
+        {
+            name: verdicts[decision] ?? "Your review",
+            startedAt: firstAt(events, review.open),
+            endedAt: closedAt(events, review),
+            ending: decision === "denied" ? "failed" : "done",
+        },
+    ];
+}
+function operationOf(event) {
+    const operationId = record(event?.["payload"])["operationId"];
+    try {
+        const scope = JSON.parse(String(operationId));
+        return Array.isArray(scope) ? scope : [];
+    }
+    catch {
+        return [];
+    }
+}
+function currentRound(events) {
+    const requested = events.findLast((event) => event["type"] === effect.open && operationOf(event)[4] === "claude-turn");
+    const round = operationOf(requested)[1];
+    return typeof round === "number" ? round : 1;
+}
+function spans(events, workflowId) {
+    if (workflowId !== issueWorkflow)
+        return ticketSpans(events);
+    const effects = events.filter((event) => [effect.open, effect.close].includes(String(event["type"])));
+    const round = currentRound(effects);
+    return [
+        ...admission(events),
+        ...issueSteps.map((step) => {
+            const repeated = roundOperations.includes(step.operation);
+            const own = effects.filter((event) => {
+                const scope = operationOf(event);
+                return scope[4] === step.operation && (!repeated || scope[1] === round);
+            });
+            const last = own.findLast((event) => event["type"] === effect.close);
+            const outcome = String(record(last?.["payload"])["outcome"]);
+            return {
+                name: repeated && round > 1
+                    ? `${step.name}, round ${String(round)}`
+                    : step.name,
+                startedAt: firstAt(own, effect.open),
+                endedAt: closedAt(own, effect),
+                ending: unfinished.includes(outcome) ? "failed" : "done",
+            };
+        }),
+    ];
+}
+function phase(span, open) {
+    const { ending, ...shown } = span;
+    if (span.endedAt !== null)
+        return { ...shown, state: ending };
+    return { ...shown, state: span.startedAt === null ? "pending" : open };
+}
+function ends(events) {
+    return endings.flatMap(({ type, name, state }) => {
+        const event = events.findLast((item) => item["type"] === type);
+        if (event === undefined)
+            return [];
+        const recordedAt = timeOf(event);
+        return [{ name, state, startedAt: recordedAt, endedAt: recordedAt }];
+    });
+}
+function advanced(phases) {
+    const next = phases.findLastIndex((item) => item.state === "done") + 1;
+    const idle = phases.every((item) => item.state !== "active");
+    return phases.map((item, index) => idle && next > 0 && index === next && item.state === "pending"
+        ? { ...item, state: "active" }
+        : item);
+}
+export function phasesOf(events, workflowId = "") {
+    const known = events.map(record);
+    const steps = spans(known, workflowId);
+    const [end] = ends(known);
+    if (end !== undefined)
+        return [...steps.map((span) => phase(span, "failed")), end];
+    const open = {
+        name: "Completed",
+        startedAt: null,
+        endedAt: null,
+        ending: "done",
+    };
+    return advanced([...steps, open].map((span) => phase(span, "active")));
+}

package/dist/src/cli/watch-pr-board.d.ts

@@ -0,0 +1,3 @@
+import type { PrObserver } from "./watch-pr-observer.ts";
+import type { WatchModel } from "./watch-render.ts";
+export declare function observedBoard(model: WatchModel, observer: PrObserver): WatchModel;

package/dist/src/cli/watch-pr-board.js

@@ -0,0 +1,26 @@
+function observedCard(context, card) {
+    if (card.completionMark?.text !== "Needs attention")
+        return card;
+    const run = context.model.runs.find((run) => run.runId === card.runId);
+    if (run?.workflowId !== "develop-issue" ||
+        run.state !== "completed" ||
+        run.outcome !== "blocked" ||
+        run.pullRequest === null)
+        return card;
+    return {
+        ...card,
+        pullRequestObservation: context.observer.observe(run.pullRequest),
+    };
+}
+export function observedBoard(model, observer) {
+    return {
+        ...model,
+        workflows: model.workflows.map((workflow) => ({
+            ...workflow,
+            columns: workflow.columns.map((column) => ({
+                ...column,
+                cards: column.cards.map((card) => observedCard({ model, observer }, card)),
+            })),
+        })),
+    };
+}

package/dist/src/cli/watch-pr-command.d.ts

@@ -0,0 +1,15 @@
+import { type PrIdentity, type PrObservation } from "./watch-pr-identity.ts";
+export interface WatchCommandOutput {
+    readonly stdout: string;
+    readonly stderr: string;
+    readonly status: number | null;
+    readonly errorCode: string | null;
+}
+export interface WatchCommandRequest {
+    readonly command: readonly string[];
+    readonly directory: string;
+    readonly signal: AbortSignal;
+}
+export type WatchCommandRunner = (request: WatchCommandRequest) => Promise<WatchCommandOutput>;
+export declare function prArguments(identity: PrIdentity): readonly string[];
+export declare function prCommandResult(identity: PrIdentity, output: WatchCommandOutput): PrObservation;

package/dist/src/cli/watch-pr-command.js

@@ -0,0 +1,37 @@
+import { prResponse, } from "./watch-pr-identity.js";
+export function prArguments(identity) {
+    return [
+        "api",
+        "--method",
+        "GET",
+        "--hostname",
+        identity.host,
+        `repos/${identity.owner}/${identity.repository}/pulls/${String(identity.number)}`,
+        "--include",
+    ];
+}
+function commandFailure(output) {
+    const status = Number(/\(HTTP (\d{3})\)/.exec(output.stderr)?.[1] ??
+        /^HTTP\/[^ ]+ (\d{3})/m.exec(output.stdout)?.[1]);
+    if (status === 429 ||
+        /rate limit/i.test(output.stderr) ||
+        /x-ratelimit-remaining: 0\s*$/im.test(output.stdout))
+        return "rate-limit";
+    if (output.status === 4 || [401, 403, 404].includes(status))
+        return "access";
+    return "command";
+}
+export function prCommandResult(identity, output) {
+    if (output.status !== 0 || output.errorCode !== null)
+        return { status: "unavailable", failure: commandFailure(output) };
+    const envelope = /^HTTP\/[^ ]+ 200[^\n]*\r?\n[\s\S]*?\r?\n\r?\n([\s\S]*)$/.exec(output.stdout);
+    if (envelope?.[1] === undefined)
+        return { status: "unavailable", failure: "response" };
+    try {
+        const response = JSON.parse(envelope[1]);
+        return prResponse(identity, response);
+    }
+    catch {
+        return { status: "unavailable", failure: "response" };
+    }
+}

package/dist/src/cli/watch-pr-identity.d.ts

@@ -0,0 +1,20 @@
+export interface PrIdentity {
+    readonly host: string;
+    readonly owner: string;
+    readonly repository: string;
+    readonly number: number;
+}
+export type PrFailure = "configuration" | "identity" | "command" | "access" | "rate-limit" | "response" | "timeout";
+export type PrObservation = {
+    readonly status: "merged" | "unmerged";
+} | {
+    readonly status: "unavailable";
+    readonly failure: PrFailure;
+};
+export declare function prResponse(identity: PrIdentity, value: unknown): PrObservation;
+export type PrRepository = Omit<PrIdentity, "number">;
+export declare function prRepository(origin: string): PrRepository | null;
+export declare function prIdentity(repository: PrRepository, pullRequest: {
+    readonly number: number;
+    readonly url: string;
+}): PrIdentity | null;

package/dist/src/cli/watch-pr-identity.js

@@ -0,0 +1,62 @@
+import { record } from "../protocol.js";
+function responseNames(fields) {
+    const repository = record(record(fields["base"])?.["repo"]) ?? {};
+    return [
+        fields["html_url"],
+        repository["html_url"],
+        repository["full_name"],
+        repository["name"],
+        record(repository["owner"])?.["login"],
+    ];
+}
+export function prResponse(identity, value) {
+    const fields = record(value) ?? {};
+    const expected = `https://${identity.host}/${identity.owner}/${identity.repository}`;
+    const strings = responseNames(fields);
+    if (typeof fields["number"] !== "number" ||
+        strings.some((part) => typeof part !== "string"))
+        return { status: "unavailable", failure: "response" };
+    const wanted = [
+        `${expected}/pull/${String(identity.number)}`,
+        expected,
+        `${identity.owner}/${identity.repository}`,
+        identity.repository,
+        identity.owner,
+    ];
+    if (fields["number"] !== identity.number ||
+        strings.some((part, index) => String(part).toLowerCase() !== String(wanted[index]).toLowerCase()))
+        return { status: "unavailable", failure: "identity" };
+    const merged = fields["merged"];
+    if (typeof merged !== "boolean")
+        return { status: "unavailable", failure: "response" };
+    return { status: merged ? "merged" : "unmerged" };
+}
+export function prRepository(origin) {
+    const address = origin
+        .replace(/^git@([^:/]+):/, "ssh://git@$1/")
+        .replace(/\r?\n$/, "");
+    const matched = /^(?:https:\/\/|ssh:\/\/git@)([a-zA-Z0-9.-]+)\/([a-zA-Z0-9-]+)\/([a-zA-Z0-9_.-]+)$/.exec(address);
+    const [, host, owner, name] = matched ?? [];
+    if (host === undefined || owner === undefined || name === undefined)
+        return null;
+    if (host
+        .split(".")
+        .some((label) => !/^[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/.test(label)))
+        return null;
+    const repository = name.replace(/\.git$/, "");
+    if (![host, owner].every((part) => /^[a-zA-Z0-9][a-zA-Z0-9_.-]*$/.test(part)) ||
+        ["", ".", ".."].includes(repository))
+        return null;
+    return {
+        host: host.toLowerCase(),
+        owner: owner.toLowerCase(),
+        repository: repository.toLowerCase(),
+    };
+}
+export function prIdentity(repository, pullRequest) {
+    const { number, url } = pullRequest;
+    if (!Number.isSafeInteger(number) || number <= 0)
+        return null;
+    const expected = `https://${repository.host}/${repository.owner}/${repository.repository}/pull/${String(number)}`;
+    return url.toLowerCase() === expected ? { ...repository, number } : null;
+}

package/dist/src/cli/watch-pr-observer.d.ts

@@ -0,0 +1,19 @@
+import type { WatchPullRequest } from "./watch-render.ts";
+import { type WatchCommandRunner } from "./watch-pr-command.ts";
+import { type PrObservation, type PrRepository } from "./watch-pr-identity.ts";
+export interface PrObserver {
+    readonly observe: (pullRequest: WatchPullRequest) => PrObservation | null;
+    readonly close: () => void;
+}
+export interface PrClock {
+    readonly now: () => number;
+    readonly after: (expired: () => void, milliseconds: number) => () => void;
+}
+export interface PrObserverSettings {
+    readonly clock?: PrClock;
+    readonly repository: PrRepository | null;
+    readonly directory: string;
+    readonly command: readonly string[] | null;
+    readonly execute: WatchCommandRunner;
+}
+export declare function prObserver(settings: PrObserverSettings): PrObserver;