cloving 0.3.20 → 1.1.0

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

@@ -0,0 +1,201 @@
+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();
+    const step = card.currentStep;
+    if (step === null)
+        return "";
+    if (step.startedAt === null)
+        return step.name;
+    const minutes = Math.max(0, Math.floor((Date.parse(now) - Date.parse(step.startedAt)) / 60000));
+    return `${step.name} · ${String(minutes)} min`;
+}
+export function cardReview(card) {
+    return [
+        card.round === null ? null : `round ${String(card.round)}`,
+        card.greptileScore === null ? null : `${String(card.greptileScore)}/5`,
+        card.pullRequestNumber === null
+            ? null
+            : `#${String(card.pullRequestNumber)}`,
+    ]
+        .filter((part) => part !== null)
+        .join(" · ");
+}
+export function CardReview(props) {
+    if (props.workflowId !== "develop-issue")
+        return null;
+    const review = cardReview(props.card);
+    if (review === "")
+        return null;
+    return element("span", {
+        class: "card-review",
+        children: review
+            .split(" · ")
+            .map((part, index) => [
+            index === 0 ? "" : " · ",
+            element("span", { class: "review-pill", children: part }),
+        ]),
+    });
+}
+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: text });
+    return element("a", {
+        class: "completion-mark",
+        href: watchHash({ workflowId, runId: mark.laterRunId }),
+        children: mark.text,
+    });
+}
+export function Card(props) {
+    const { card, workflowId, now } = props;
+    return element("article", {
+        class: "card",
+        children: [
+            element("a", {
+                class: "card-run",
+                href: watchHash({ workflowId, runId: card.runId }),
+                title: card.runId,
+                children: [
+                    element("strong", {
+                        children: card.title ?? card.runId.slice(0, 12),
+                    }),
+                    element("span", {
+                        class: card.endedAt === null && card.currentStep !== null
+                            ? "card-step active"
+                            : "card-step",
+                        children: cardStep(card, now),
+                    }),
+                    component(CardReview, { card, workflowId }),
+                    element("span", {
+                        class: "card-cost",
+                        children: `${card.currentStep === null ? "Totals" : "Totals so far"} · ${priceText(card.claudeCostUsd, card.estimatedCostUsd)}`,
+                    }),
+                    card.decisionWaiting
+                        ? element("span", {
+                            class: "decision-mark",
+                            children: "! Decision waiting",
+                        })
+                        : null,
+                    element("small", { children: card.runId.slice(0, 12) }),
+                ],
+            }),
+            completionMark(card, workflowId),
+        ],
+    });
+}
+export function WorkflowList(props) {
+    return element("nav", {
+        class: "workflows",
+        "aria-label": "Workflows",
+        children: props.workflows.map((workflow) => element("a", {
+            key: workflow.workflowId,
+            href: watchHash({ workflowId: workflow.workflowId, runId: null }),
+            "aria-current": workflow.workflowId === props.selected ? "page" : undefined,
+            children: [
+                element("strong", { children: workflow.workflowId }),
+                element("span", {
+                    children: `${String(workflow.activeCount)} active · ${String(workflow.waitingCount)} waiting`,
+                }),
+            ],
+        })),
+    });
+}
+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", {
+        class: "board",
+        children: [
+            element("h2", { children: workflow.workflowId }),
+            element("div", {
+                class: "columns",
+                children: workflow.columns.map((column, index) => component(Column, {
+                    key: column.name,
+                    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.d.ts

@@ -0,0 +1,15 @@
+import type { WatchCompletionMark, WatchRun, WatchStep, WatchWorkflow } from "./watch-render.ts";
+export declare function completionMarkOf(run: WatchRun, candidates: readonly WatchRun[]): WatchCompletionMark | null;
+export declare function activeRun(state: string): boolean;
+export declare function recentRun(latestAt: string | null, now: string): boolean;
+export declare function currentStepOf(events: readonly unknown[], workflowId: string): WatchStep;
+export declare function roundOf(events: readonly unknown[]): number;
+interface BoardInputs {
+    readonly workflows: readonly string[];
+    readonly updatedAt: string;
+    readonly summaries?: readonly unknown[];
+    readonly completionCandidates?: readonly WatchRun[];
+}
+export declare function boardsOf(inputs: BoardInputs, runs: readonly WatchRun[]): WatchWorkflow[];
+export declare function startWorkflowOf(workflows: readonly WatchWorkflow[]): string | null;
+export {};

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

@@ -0,0 +1,179 @@
+import { record } from "../protocol.js";
+import { isInstant } from "../authority/instants.js";
+import { issueSteps } from "./watch-phases.js";
+const weekMilliseconds = 7 * 24 * 60 * 60 * 1000;
+const terminalStates = ["completed", "failed", "cancelled"];
+function eventTime(run, type) {
+    const recordedAt = run.events.find((event) => event.type === type)?.recordedAt;
+    return isInstant(recordedAt) ? Date.parse(recordedAt) : NaN;
+}
+export function completionMarkOf(run, candidates) {
+    if (run.workflowId !== "develop-issue" ||
+        run.state !== "completed" ||
+        run.outcome !== "blocked")
+        return null;
+    const completedAt = eventTime(run, "run.completed");
+    const later = candidates
+        .filter((candidate) => typeof run.ticketId === "string" &&
+        run.ticketId !== "" &&
+        candidate.ticketId === run.ticketId &&
+        candidate.runId !== run.runId &&
+        candidate.workflowId === "develop-issue" &&
+        candidate.state === "completed" &&
+        candidate.outcome === "handoff_requested" &&
+        candidate.ticketStatus !== "partial" &&
+        candidate.issueUpdate !== "failed")
+        .map((candidate) => ({
+        runId: candidate.runId,
+        createdAt: eventTime(candidate, "run.created"),
+    }))
+        .filter((candidate) => candidate.createdAt > completedAt)
+        .toSorted((first, second) => first.createdAt - second.createdAt ||
+        (first.runId < second.runId ? -1 : 1))[0];
+    return later === undefined
+        ? { text: "Needs attention", laterRunId: null }
+        : { text: "Done in a later run", laterRunId: later.runId };
+}
+export function activeRun(state) {
+    return !terminalStates.includes(state);
+}
+export function recentRun(latestAt, now) {
+    const age = Date.parse(now) - Date.parse(latestAt ?? "");
+    return age >= 0 && age <= weekMilliseconds;
+}
+function stepNames(workflowId) {
+    return workflowId === "develop-issue"
+        ? issueSteps.map((step) => step.name)
+        : ["Claude turn", "Your review"];
+}
+function operationOf(event) {
+    const payload = record(record(event)?.["payload"]);
+    try {
+        const operation = JSON.parse(String(payload?.["operationId"]));
+        return Array.isArray(operation) ? operation : [];
+    }
+    catch {
+        return [];
+    }
+}
+function stepName(event, workflowId) {
+    const type = record(event)?.["type"];
+    if (workflowId !== "develop-issue" && type === "gate.opened")
+        return "Your review";
+    if (type !== "effect.requested")
+        return undefined;
+    if (workflowId !== "develop-issue")
+        return "Claude turn";
+    return issueSteps.find((step) => step.operation === operationOf(event)[4])
+        ?.name;
+}
+function startedAt(event) {
+    const value = record(event)?.["recordedAt"];
+    return typeof value === "string" ? value : null;
+}
+function chronological(events) {
+    return events.toSorted((first, second) => Date.parse(startedAt(first) ?? "") - Date.parse(startedAt(second) ?? ""));
+}
+export function currentStepOf(events, workflowId) {
+    const event = chronological(events).findLast((item) => stepName(item, workflowId) !== undefined);
+    return {
+        name: stepName(event, workflowId) ?? stepNames(workflowId)[0] ?? "Claude turn",
+        startedAt: startedAt(event),
+    };
+}
+export function roundOf(events) {
+    const event = chronological(events).findLast((item) => record(item)?.["type"] === "effect.requested" &&
+        operationOf(item)[4] === "claude-turn");
+    const round = operationOf(event)[1];
+    return typeof round === "number" ? round : 1;
+}
+function columnOf(run, now) {
+    if (activeRun(run.state))
+        return run.currentStep.name;
+    if (!recentRun(run.latestAt, now))
+        return null;
+    if (run.state !== "completed" || run.outcome === "blocked")
+        return "Stopped";
+    return run.outcome === "handoff_requested" ? "Done" : null;
+}
+function cardOf(run, runs) {
+    const issue = run.workflowId === "develop-issue";
+    return {
+        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,
+        round: issue ? run.round : null,
+        greptileScore: issue ? (run.reviews.at(-1)?.score ?? null) : null,
+        pullRequestNumber: issue ? (run.pullRequest?.number ?? null) : null,
+    };
+}
+function stepOrder(first, second) {
+    const waiting = Number(second.decisionWaiting) - Number(first.decisionWaiting);
+    if (waiting !== 0)
+        return waiting;
+    return (Date.parse(first.currentStep?.startedAt ?? "1970-01-01") -
+        Date.parse(second.currentStep?.startedAt ?? "1970-01-01"));
+}
+function latestTime(times) {
+    return (times
+        .filter((time) => time !== null)
+        .toSorted((first, second) => Date.parse(second) - Date.parse(first))[0] ??
+        null);
+}
+function summaryOf(value) {
+    const fields = record(value);
+    const pending = fields?.["pendingDecisions"];
+    const latest = fields?.["latestAt"];
+    return {
+        state: String(fields?.["state"]),
+        waiting: Array.isArray(pending) && pending.length > 0,
+        latestAt: typeof latest === "string" ? latest : null,
+    };
+}
+export function boardsOf(inputs, runs) {
+    return inputs.workflows.map((workflowId) => {
+        const own = runs.filter((run) => run.workflowId === workflowId);
+        const summaries = inputs.summaries === undefined
+            ? own.map((run) => ({
+                state: run.state,
+                waiting: run.decisions.length > 0,
+                latestAt: run.latestAt,
+            }))
+            : inputs.summaries
+                .filter((value) => record(value)?.["workflowId"] === workflowId)
+                .map(summaryOf);
+        const columns = [...stepNames(workflowId), "Done", "Stopped"].map((name) => {
+            const cards = own
+                .filter((run) => columnOf(run, inputs.updatedAt) === name)
+                .map((run) => cardOf(run, inputs.completionCandidates ?? runs));
+            return {
+                name,
+                cards: ["Done", "Stopped"].includes(name)
+                    ? cards
+                        .toSorted((first, second) => Date.parse(second.endedAt ?? "") -
+                        Date.parse(first.endedAt ?? ""))
+                        .slice(0, 20)
+                    : cards.toSorted(stepOrder),
+            };
+        });
+        return {
+            workflowId,
+            activeCount: summaries.filter((run) => activeRun(run.state)).length,
+            waitingCount: summaries.filter((run) => run.waiting).length,
+            latestAt: latestTime(summaries.map((run) => run.latestAt)),
+            columns,
+        };
+    });
+}
+export function startWorkflowOf(workflows) {
+    const waiting = workflows.filter((workflow) => workflow.waitingCount > 0);
+    return ((waiting.length > 0 ? waiting : workflows).toSorted((first, second) => Date.parse(second.latestAt ?? "1970-01-01") -
+        Date.parse(first.latestAt ?? "1970-01-01"))[0]?.workflowId ?? null);
+}

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";