cloving 1.0.1 → 1.1.0

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

@@ -1,5 +1,22 @@
+import { AddCard } from "./watch-card-view.js";
+import { priceText } from "./usage-render.js";
 import { component, element } from "./watch-element.js";
 import { watchHash } from "./watch-navigation.js";
+export const boardSizing = {
+    minimumColumnWidth: 200,
+    collapsedColumnWidth: 44,
+    gap: 12,
+};
+export function boardLayout(input) {
+    const { contentWidth, openColumns, collapsedColumns } = input;
+    const fixedWidth = collapsedColumns * boardSizing.collapsedColumnWidth +
+        Math.max(0, openColumns + collapsedColumns - 1) * boardSizing.gap;
+    const columnWidth = Math.max(boardSizing.minimumColumnWidth, (contentWidth - fixedWidth) / Math.max(1, openColumns));
+    return {
+        columnWidth: openColumns === 0 ? boardSizing.minimumColumnWidth : columnWidth,
+        totalWidth: openColumns * columnWidth + fixedWidth,
+    };
+}
 export function cardStep(card, now) {
     if (card.endedAt !== null)
         return new Date(card.endedAt).toLocaleString();
@@ -42,8 +59,14 @@ export function completionMark(card, workflowId) {
     const mark = card.completionMark;
     if (mark === null)
         return null;
+    let text = mark.text;
+    const status = card.pullRequestObservation?.status;
+    if (text === "Needs attention" && status === "merged")
+        text = `PR merged #${String(card.pullRequestNumber)}`;
+    if (text === "Needs attention" && status === "unavailable")
+        text = "PR status unavailable";
     if (mark.laterRunId === null)
-        return element("span", { class: "completion-mark", children: mark.text });
+        return element("span", { class: "completion-mark", children: text });
     return element("a", {
         class: "completion-mark",
         href: watchHash({ workflowId, runId: mark.laterRunId }),
@@ -58,8 +81,11 @@ export function Card(props) {
             element("a", {
                 class: "card-run",
                 href: watchHash({ workflowId, runId: card.runId }),
+                title: card.runId,
                 children: [
-                    element("strong", { children: card.title ?? card.runId }),
+                    element("strong", {
+                        children: card.title ?? card.runId.slice(0, 12),
+                    }),
                     element("span", {
                         class: card.endedAt === null && card.currentStep !== null
                             ? "card-step active"
@@ -69,7 +95,7 @@ export function Card(props) {
                     component(CardReview, { card, workflowId }),
                     element("span", {
                         class: "card-cost",
-                        children: `${card.claudeCostUsd.toFixed(2)} USD`,
+                        children: `${card.currentStep === null ? "Totals" : "Totals so far"} · ${priceText(card.claudeCostUsd, card.estimatedCostUsd)}`,
                     }),
                     card.decisionWaiting
                         ? element("span", {
@@ -77,7 +103,7 @@ export function Card(props) {
                             children: "! Decision waiting",
                         })
                         : null,
-                    element("small", { children: card.runId }),
+                    element("small", { children: card.runId.slice(0, 12) }),
                 ],
             }),
             completionMark(card, workflowId),
@@ -101,6 +127,53 @@ export function WorkflowList(props) {
         })),
     });
 }
+export function columnCollapsed(choices, name) {
+    const value = choices !== null && Object.hasOwn(choices, name)
+        ? choices[name]
+        : undefined;
+    return value ?? ["Done", "Stopped"].includes(name);
+}
+export function Column(props) {
+    const { column, workflowId, now, controls } = props;
+    const collapsed = columnCollapsed(controls?.choices ?? null, column.name);
+    const tone = column.name === "Stopped" ? "column stopped" : "column";
+    return element("section", {
+        class: `${tone}${collapsed ? " collapsed" : ""}`,
+        onMouseEnter: () => controls?.onHover?.(column.name),
+        onMouseLeave: () => controls?.onHover?.(null),
+        onFocusIn: () => controls?.onFocus?.(column.name),
+        onFocusOut: () => controls?.onFocus?.(null),
+        children: [
+            element("h3", {
+                class: "column-name",
+                children: [
+                    element("span", { children: column.name }),
+                    " ",
+                    element("span", {
+                        class: "column-count",
+                        children: String(column.cards.length),
+                    }),
+                    element("button", {
+                        type: "button",
+                        "aria-label": `${collapsed ? "Expand" : "Collapse"} ${column.name}`,
+                        "aria-expanded": String(!collapsed),
+                        onClick: () => controls?.onToggle(column.name),
+                        children: collapsed ? "+" : "−",
+                    }),
+                ],
+            }),
+            collapsed
+                ? null
+                : element("div", {
+                    class: "column-cards",
+                    children: [
+                        column.cards.map((card) => component(Card, { key: card.runId, card, workflowId, now })),
+                        props.addCard,
+                    ],
+                }),
+        ],
+    });
+}
 export function Board(props) {
     const { workflow, now } = props;
     return element("main", {
@@ -109,18 +182,18 @@ export function Board(props) {
             element("h2", { children: workflow.workflowId }),
             element("div", {
                 class: "columns",
-                children: workflow.columns.map((column) => element("section", {
+                children: workflow.columns.map((column, index) => component(Column, {
                     key: column.name,
-                    class: column.name === "Stopped" ? "column stopped" : "column",
-                    children: [
-                        element("h3", { class: "column-name", children: column.name }),
-                        column.cards.map((card) => component(Card, {
-                            key: card.runId,
-                            card,
-                            workflowId: workflow.workflowId,
-                            now,
-                        })),
-                    ],
+                    column,
+                    workflowId: workflow.workflowId,
+                    now,
+                    controls: props.controls,
+                    addCard: index === 0
+                        ? component(AddCard, {
+                            form: props.cardForm,
+                            controls: props.cards,
+                        })
+                        : null,
                 })),
             }),
         ],

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

@@ -20,7 +20,9 @@ export function completionMarkOf(run, candidates) {
         candidate.runId !== run.runId &&
         candidate.workflowId === "develop-issue" &&
         candidate.state === "completed" &&
-        candidate.outcome === "handoff_requested")
+        candidate.outcome === "handoff_requested" &&
+        candidate.ticketStatus !== "partial" &&
+        candidate.issueUpdate !== "failed")
         .map((candidate) => ({
         runId: candidate.runId,
         createdAt: eventTime(candidate, "run.created"),
@@ -100,7 +102,10 @@ function cardOf(run, runs) {
         runId: run.runId,
         title: run.title,
         completionMark: completionMarkOf(run, runs),
+        pullRequestObservation: null,
         claudeCostUsd: run.claudeCostUsd,
+        estimatedCostUsd: run.estimatedCostUsd,
+        usage: run.usage,
         currentStep: activeRun(run.state) ? run.currentStep : null,
         endedAt: activeRun(run.state) ? null : run.latestAt,
         decisionWaiting: run.decisions.length > 0,

package/dist/src/cli/watch-card-client.d.ts

@@ -0,0 +1 @@
+export declare const watchCardClient = "\nasync function submitCard(workflowId) {\n  const draft = state.cards[workflowId];\n  if (!draft || draft.pending || draft.admitted) return;\n  state.cards[workflowId] = { ...draft, pending: true, message: \"\" };\n  draw();\n  let result;\n  try {\n    const response = await fetch(\"actions/run\", {\n      method: \"POST\",\n      headers: { \"content-type\": \"application/json\", \"x-cloving-token\": actionToken },\n      body: JSON.stringify({ workflowId, fields: draft.fields, commandId: draft.commandId }),\n    });\n    result = response.ok ? cardReply(await response.json()) : { admitted: false, message: \"request-refused: Refresh the page and check the input (16 KiB maximum).\" };\n  } catch {\n    result = cardReply({ kind: \"error\", error: { code: \"outcome-unknown\" } });\n  }\n  if (state.cards[workflowId]?.commandId !== draft.commandId) return;\n  state.cards[workflowId] = { ...draft, ...result, pending: false };\n  draw();\n}\n\nfunction cardControls(model, workflowId) {\n  if (actionToken === null || workflowId === null) return undefined;\n  const form = model?.cardForms?.find((item) => item.workflowId === workflowId);\n  if (form === undefined) return undefined;\n  const draft = state.cards[workflowId] ?? null;\n  return { draft, onOpen() {\n    state.cards[workflowId] = { commandId: crypto.randomUUID(), fields: {}, pending: false, admitted: false, message: \"\" };\n    draw();\n    document.querySelector(\".add-card-form input, .add-card-form textarea, .add-card-form button\")?.focus();\n  }, onCancel() {\n    delete state.cards[workflowId];\n    draw();\n    document.querySelector(\".add-card\")?.focus();\n  },\n  onChange(name, value) {\n    const fields = { ...state.cards[workflowId].fields, [name]: value };\n    if (form.fields.find((field) => field.name === name)?.optional && !value.trim())\n      delete fields[name];\n    state.cards[workflowId] = { ...state.cards[workflowId], fields };\n  }, onSubmit() { submitCard(workflowId); } };\n}\n";

package/dist/src/cli/watch-card-client.js

@@ -0,0 +1,44 @@
+export const watchCardClient = `
+async function submitCard(workflowId) {
+  const draft = state.cards[workflowId];
+  if (!draft || draft.pending || draft.admitted) return;
+  state.cards[workflowId] = { ...draft, pending: true, message: "" };
+  draw();
+  let result;
+  try {
+    const response = await fetch("actions/run", {
+      method: "POST",
+      headers: { "content-type": "application/json", "x-cloving-token": actionToken },
+      body: JSON.stringify({ workflowId, fields: draft.fields, commandId: draft.commandId }),
+    });
+    result = response.ok ? cardReply(await response.json()) : { admitted: false, message: "request-refused: Refresh the page and check the input (16 KiB maximum)." };
+  } catch {
+    result = cardReply({ kind: "error", error: { code: "outcome-unknown" } });
+  }
+  if (state.cards[workflowId]?.commandId !== draft.commandId) return;
+  state.cards[workflowId] = { ...draft, ...result, pending: false };
+  draw();
+}
+
+function cardControls(model, workflowId) {
+  if (actionToken === null || workflowId === null) return undefined;
+  const form = model?.cardForms?.find((item) => item.workflowId === workflowId);
+  if (form === undefined) return undefined;
+  const draft = state.cards[workflowId] ?? null;
+  return { draft, onOpen() {
+    state.cards[workflowId] = { commandId: crypto.randomUUID(), fields: {}, pending: false, admitted: false, message: "" };
+    draw();
+    document.querySelector(".add-card-form input, .add-card-form textarea, .add-card-form button")?.focus();
+  }, onCancel() {
+    delete state.cards[workflowId];
+    draw();
+    document.querySelector(".add-card")?.focus();
+  },
+  onChange(name, value) {
+    const fields = { ...state.cards[workflowId].fields, [name]: value };
+    if (form.fields.find((field) => field.name === name)?.optional && !value.trim())
+      delete fields[name];
+    state.cards[workflowId] = { ...state.cards[workflowId], fields };
+  }, onSubmit() { submitCard(workflowId); } };
+}
+`;

package/dist/src/cli/watch-card-forms.d.ts

@@ -0,0 +1,2 @@
+import { type CardForm } from "./watch-run-input.ts";
+export declare function watchCardForms(directory: string): Promise<readonly CardForm[]>;

package/dist/src/cli/watch-card-forms.js

@@ -0,0 +1,33 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { isWorkflowDeclaration } from "../workflow-declaration.js";
+import { builtinCardForms } from "./watch-run-input.js";
+export async function watchCardForms(directory) {
+    const forms = [...builtinCardForms()];
+    const files = await readdir(directory).catch(() => []);
+    for (const file of files
+        .filter((name) => name.endsWith(".declaration.json"))
+        .sort()) {
+        const value = await readFile(join(directory, file), "utf8")
+            .then((text) => JSON.parse(text))
+            .catch(() => null);
+        if (!isWorkflowDeclaration(value))
+            continue;
+        const entries = Object.entries(value.input.fields);
+        if (!entries.every(([, rule]) => rule === "string" || rule.type === "string"))
+            continue;
+        if (forms.some((form) => form.workflowId === value.workflowId))
+            continue;
+        forms.push({
+            workflowId: value.workflowId,
+            source: "input",
+            fields: entries.map(([name, rule]) => ({
+                name,
+                label: name,
+                multiline: false,
+                optional: rule !== "string" && rule.optional === true,
+            })),
+        });
+    }
+    return forms;
+}

package/dist/src/cli/watch-card-reply.d.ts

@@ -0,0 +1,5 @@
+import type { Reply } from "../protocol.ts";
+export declare function cardReply(reply: Reply): {
+    readonly admitted: boolean;
+    readonly message: string;
+};

package/dist/src/cli/watch-card-reply.js

@@ -0,0 +1,34 @@
+export function cardReply(reply) {
+    if (reply.kind === "result")
+        return {
+            admitted: true,
+            message: `Run ${String(reply.result["runId"])} is admitted`,
+        };
+    const explanations = {
+        "workflow-active": "Add the label cloving: ready to the issue to put it in the queue.",
+        "unknown-workflow": "This workflow is no longer registered. Refresh the page.",
+        "workflow-unavailable": "A required workflow capability is unavailable.",
+        "invalid-submission": "Check the workflow fields.",
+        "input-too-large": "Shorten the input and try again.",
+        "invalid-request": "The service could not read this run request.",
+        "conflicting-command": "This form was already sent with different fields. Open a new form.",
+        "service-unavailable": "Start the Cloving service and retry this form.",
+        "authority-unavailable": "The service authority is unavailable. Retry this form later.",
+        "permission-denied": "The service refused access to this account.",
+        "outcome-unknown": "The reply was lost. Retry this form with the same command ID.",
+        "resolver-timeout": "The input resolver timed out. Retry this form.",
+        "resolver-failure": "The input resolver failed. Check the service before retrying.",
+        "invalid-ticket-id": "Enter a valid issue number or ticket ID.",
+        "ticket-source-not-configured": "Configure the daemon ticket command first.",
+        "ticket-not-available": "The ticket could not be read.",
+        "next-source-not-configured": "Configure the daemon next-ticket command first.",
+        "next-ticket-not-available": "The next ticket could not be read.",
+        "no-ready-ticket": "There is no ready ticket in the queue.",
+        "unsupported-prompt": "This workflow requires declared input fields.",
+    };
+    const { code } = reply.error;
+    return {
+        admitted: false,
+        message: `${code}: ${explanations[code] ?? "The service refused this run."}`,
+    };
+}

package/dist/src/cli/watch-card-view.d.ts

@@ -0,0 +1,40 @@
+import { type Shown } from "./watch-element.ts";
+import type { CardField, CardForm } from "./watch-run-input.ts";
+export interface CardDraft {
+    readonly commandId: string;
+    readonly fields: Readonly<Record<string, string>>;
+    readonly pending: boolean;
+    readonly admitted: boolean;
+    readonly message: string;
+}
+export interface CardControls {
+    readonly draft: CardDraft | null;
+    readonly onOpen: () => void;
+    readonly onCancel: () => void;
+    readonly onChange: (name: string, value: string) => void;
+    readonly onSubmit: () => void;
+}
+export interface CardKeyEvent {
+    readonly key: string;
+    readonly defaultPrevented?: boolean;
+    readonly isComposing?: boolean;
+    readonly repeat?: boolean;
+    readonly ctrlKey?: boolean;
+    readonly metaKey?: boolean;
+    readonly target?: {
+        readonly localName?: string;
+    };
+    readonly currentTarget: object;
+    readonly preventDefault: () => void;
+}
+export declare function cardSubmitKey(event: CardKeyEvent): boolean;
+export declare function cardKey(event: CardKeyEvent, controls: CardControls): void;
+export declare function CardInput(props: {
+    readonly field: CardField;
+    readonly controls: CardControls;
+    readonly draft: CardDraft;
+}): Shown;
+export declare function AddCard(props: {
+    readonly form: CardForm | undefined;
+    readonly controls: CardControls | undefined;
+}): Shown;

package/dist/src/cli/watch-card-view.js

@@ -0,0 +1,86 @@
+import { component, element } from "./watch-element.js";
+export function cardSubmitKey(event) {
+    const name = event.target?.localName;
+    return (name === "input" ||
+        (name === "textarea" && Boolean(event.ctrlKey || event.metaKey)));
+}
+export function cardKey(event, controls) {
+    if (event.defaultPrevented || event.isComposing || event.repeat)
+        return;
+    if (event.key === "Escape") {
+        event.preventDefault();
+        controls.onCancel();
+        return;
+    }
+    if (event.key !== "Enter")
+        return;
+    if (!cardSubmitKey(event))
+        return;
+    event.preventDefault();
+    const prototype = Reflect.getPrototypeOf(event.currentTarget);
+    if (prototype === null)
+        return;
+    const requestSubmit = Reflect.get(prototype, "requestSubmit");
+    if (typeof requestSubmit === "function")
+        Reflect.apply(requestSubmit, event.currentTarget, []);
+}
+export function CardInput(props) {
+    const { field, controls, draft } = props;
+    return element("label", {
+        children: [
+            field.label,
+            element(field.multiline ? "textarea" : "input", {
+                name: field.name,
+                type: field.multiline ? undefined : "text",
+                rows: field.multiline ? 5 : undefined,
+                value: draft.fields[field.name] ?? "",
+                required: !field.optional,
+                disabled: draft.pending || draft.admitted,
+                onInput: (event) => {
+                    controls.onChange(field.name, event.currentTarget.value);
+                },
+            }),
+        ],
+    });
+}
+export function AddCard(props) {
+    const { form, controls } = props;
+    if (form === undefined || controls === undefined)
+        return null;
+    const { draft } = controls;
+    if (draft === null)
+        return element("button", {
+            class: "add-card",
+            type: "button",
+            onClick: controls.onOpen,
+            children: "+ Add a card",
+        });
+    return element("form", {
+        class: "add-card-form",
+        onKeyDown: (event) => {
+            cardKey(event, controls);
+        },
+        onSubmit: (event) => {
+            event.preventDefault();
+            controls.onSubmit();
+        },
+        children: [
+            form.fields.map((field) => component(CardInput, { key: field.name, field, controls, draft })),
+            element("button", {
+                type: "submit",
+                disabled: draft.pending || draft.admitted,
+                children: draft.pending ? "Adding…" : "Add card",
+            }),
+            element("button", {
+                type: "button",
+                onClick: controls.onCancel,
+                children: "Cancel",
+            }),
+            element("p", {
+                role: "status",
+                "aria-live": "polite",
+                children: draft.message,
+            }),
+        ],
+    });
+}

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

@@ -0,0 +1 @@
+export declare const watchClient = "\nconst state = { model: null, stale: false, copied: \"\", label: \"\", run: \"\", loading: false, again: false, columns: {}, cards: {}, start: null, hovered: null, focused: null };\nfunction readPreference(key) {\n  try { return JSON.parse(localStorage.getItem(key)); }\n  catch { return null; }\n}\nfunction readColumnChoices(key) {\n  const value = readPreference(key);\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) return null;\n  return Object.fromEntries(Object.entries(value).filter(([, choice]) => typeof choice === \"boolean\"));\n}\nfunction savePreference(key, value) {\n  try { localStorage.setItem(key, JSON.stringify(value)); }\n  catch {}\n}\nfunction startControls() {\n  if (state.start === null) state.start = readPreference(\"cloving.watch.start\") === true;\n  return { shown: state.start, onToggle() {\n    state.start = !state.start;\n    savePreference(\"cloving.watch.start\", state.start);\n    draw();\n  } };\n}\nfunction columnControls(model, selected) {\n  const workflowId = model === null ? null : boardWorkflow(model, watchLocation(selected).workflowId);\n  if (workflowId === null) return undefined;\n  const key = \"cloving.watch.columns:\" + workflowId;\n  if (!Object.hasOwn(state.columns, workflowId))\n    state.columns = { ...state.columns, [workflowId]: readColumnChoices(key) };\n  const choices = state.columns[workflowId];\n  return { choices, onHover(name) { state.hovered = name; }, onFocus(name) { state.focused = name; }, onToggle(name) {\n    const changed = { ...choices, [name]: !columnCollapsed(choices, name) };\n    state.columns = { ...state.columns, [workflowId]: changed };\n    savePreference(key, changed);\n    draw();\n  } };\n}\nfunction moved(next, followed) {\n  const arrived = next === \"waiting_gate\" && next !== state.run;\n  state.run = next;\n  if (arrived) scrollTo(0, 0);\n  else if (followed && next === \"running\") scrollTo(0, document.body.scrollHeight);\n}\nfunction copy(command) {\n  const shown = (label) => {\n    state.copied = command;\n    state.label = label;\n    draw();\n  };\n  navigator.clipboard.writeText(command).then(\n    () => { shown(\"Copied\"); },\n    () => { shown(\"Copy failed\"); },\n  );\n}\nfunction draw() {\n  const { model, stale } = state;\n  const selected = location.hash.slice(1);\n  const followed = innerHeight + scrollY >= document.body.scrollHeight - 80;\n  const copying = { command: state.copied, label: state.label, onCopy: copy };\n  const now = new Date().toISOString();\n  const columns = columnControls(model, selected);\n  const start = model === null ? undefined : startControls();\n  const cards = cardControls(model, model === null ? null : boardWorkflow(model, watchLocation(selected).workflowId));\n  const page = component(Page, { model, selected, now, stale, copying, columns, start, cards });\n  render(page, document.getElementById(\"app\"));\n  if (model === null) return;\n  document.title = watchTitle(model, selected);\n  const { runId } = watchLocation(selected);\n  moved(model.runs.find((run) => run.runId === runId)?.state ?? \"\", followed);\n}\nasync function withSelectedRun(model) {\n  const { runId } = watchLocation(location.hash);\n  if (runId === null || model.runs.some((run) => run.runId === runId)) return model;\n  const detail = await fetch(\"data.json?runId=\" + encodeURIComponent(runId), { cache: \"no-store\" });\n  if (detail.status === 404) return model;\n  if (!detail.ok) throw new Error(\"watch-run-not-available\");\n  const { run } = await detail.json();\n  if (run?.runId !== runId) throw new Error(\"watch-run-mismatch\");\n  return { ...model, runs: [...model.runs, run] };\n}\nasync function load() {\n  state.again = state.loading;\n  if (state.loading) return;\n  state.loading = true;\n  try {\n    const reply = await fetch(\"data.json\", { cache: \"no-store\" });\n    if (!reply.ok) throw new Error(\"watch-not-available\");\n    state.model = await withSelectedRun(await reply.json());\n    state.stale = false;\n  } catch {\n    state.stale = true;\n  }\n  state.loading = false;\n  draw();\n  if (state.again) load();\n}\nfunction listen() {\n  const source = new EventSource(\"events\");\n  source.onmessage = () => { load(); };\n  source.onerror = () => { state.stale = true; draw(); };\n}\naddEventListener(\"keydown\", (event) => {\n  if (event.key !== String.fromCharCode(92) || event.defaultPrevented || event.repeat || event.isComposing) return;\n  if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;\n  if (event.target?.closest?.(\"input, textarea, select, [contenteditable]\")) return;\n  const target = state.hovered ?? state.focused;\n  if (target === null || watchLocation(location.hash).runId !== null) return;\n  const controls = columnControls(state.model, location.hash);\n  if (controls === undefined) return;\n  event.preventDefault();\n  controls.onToggle(target);\n});\naddEventListener(\"hashchange\", () => { state.run = \"\"; state.hovered = null; state.focused = null; draw(); load(); });\ndraw();\nlisten();\nsetInterval(draw, 1000);\nsetInterval(load, 15000);\n";

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

@@ -0,0 +1,118 @@
+export const watchClient = `
+const state = { model: null, stale: false, copied: "", label: "", run: "", loading: false, again: false, columns: {}, cards: {}, start: null, hovered: null, focused: null };
+function readPreference(key) {
+  try { return JSON.parse(localStorage.getItem(key)); }
+  catch { return null; }
+}
+function readColumnChoices(key) {
+  const value = readPreference(key);
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+  return Object.fromEntries(Object.entries(value).filter(([, choice]) => typeof choice === "boolean"));
+}
+function savePreference(key, value) {
+  try { localStorage.setItem(key, JSON.stringify(value)); }
+  catch {}
+}
+function startControls() {
+  if (state.start === null) state.start = readPreference("cloving.watch.start") === true;
+  return { shown: state.start, onToggle() {
+    state.start = !state.start;
+    savePreference("cloving.watch.start", state.start);
+    draw();
+  } };
+}
+function columnControls(model, selected) {
+  const workflowId = model === null ? null : boardWorkflow(model, watchLocation(selected).workflowId);
+  if (workflowId === null) return undefined;
+  const key = "cloving.watch.columns:" + workflowId;
+  if (!Object.hasOwn(state.columns, workflowId))
+    state.columns = { ...state.columns, [workflowId]: readColumnChoices(key) };
+  const choices = state.columns[workflowId];
+  return { choices, onHover(name) { state.hovered = name; }, onFocus(name) { state.focused = name; }, onToggle(name) {
+    const changed = { ...choices, [name]: !columnCollapsed(choices, name) };
+    state.columns = { ...state.columns, [workflowId]: changed };
+    savePreference(key, changed);
+    draw();
+  } };
+}
+function moved(next, followed) {
+  const arrived = next === "waiting_gate" && next !== state.run;
+  state.run = next;
+  if (arrived) scrollTo(0, 0);
+  else if (followed && next === "running") scrollTo(0, document.body.scrollHeight);
+}
+function copy(command) {
+  const shown = (label) => {
+    state.copied = command;
+    state.label = label;
+    draw();
+  };
+  navigator.clipboard.writeText(command).then(
+    () => { shown("Copied"); },
+    () => { shown("Copy failed"); },
+  );
+}
+function draw() {
+  const { model, stale } = state;
+  const selected = location.hash.slice(1);
+  const followed = innerHeight + scrollY >= document.body.scrollHeight - 80;
+  const copying = { command: state.copied, label: state.label, onCopy: copy };
+  const now = new Date().toISOString();
+  const columns = columnControls(model, selected);
+  const start = model === null ? undefined : startControls();
+  const cards = cardControls(model, model === null ? null : boardWorkflow(model, watchLocation(selected).workflowId));
+  const page = component(Page, { model, selected, now, stale, copying, columns, start, cards });
+  render(page, document.getElementById("app"));
+  if (model === null) return;
+  document.title = watchTitle(model, selected);
+  const { runId } = watchLocation(selected);
+  moved(model.runs.find((run) => run.runId === runId)?.state ?? "", followed);
+}
+async function withSelectedRun(model) {
+  const { runId } = watchLocation(location.hash);
+  if (runId === null || model.runs.some((run) => run.runId === runId)) return model;
+  const detail = await fetch("data.json?runId=" + encodeURIComponent(runId), { cache: "no-store" });
+  if (detail.status === 404) return model;
+  if (!detail.ok) throw new Error("watch-run-not-available");
+  const { run } = await detail.json();
+  if (run?.runId !== runId) throw new Error("watch-run-mismatch");
+  return { ...model, runs: [...model.runs, run] };
+}
+async function load() {
+  state.again = state.loading;
+  if (state.loading) return;
+  state.loading = true;
+  try {
+    const reply = await fetch("data.json", { cache: "no-store" });
+    if (!reply.ok) throw new Error("watch-not-available");
+    state.model = await withSelectedRun(await reply.json());
+    state.stale = false;
+  } catch {
+    state.stale = true;
+  }
+  state.loading = false;
+  draw();
+  if (state.again) load();
+}
+function listen() {
+  const source = new EventSource("events");
+  source.onmessage = () => { load(); };
+  source.onerror = () => { state.stale = true; draw(); };
+}
+addEventListener("keydown", (event) => {
+  if (event.key !== String.fromCharCode(92) || event.defaultPrevented || event.repeat || event.isComposing) return;
+  if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;
+  if (event.target?.closest?.("input, textarea, select, [contenteditable]")) return;
+  const target = state.hovered ?? state.focused;
+  if (target === null || watchLocation(location.hash).runId !== null) return;
+  const controls = columnControls(state.model, location.hash);
+  if (controls === undefined) return;
+  event.preventDefault();
+  controls.onToggle(target);
+});
+addEventListener("hashchange", () => { state.run = ""; state.hovered = null; state.focused = null; draw(); load(); });
+draw();
+listen();
+setInterval(draw, 1000);
+setInterval(load, 15000);
+`;