cloving 1.2.0 → 1.3.0

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

@@ -0,0 +1,116 @@
+import { record } from "../protocol.js";
+import { PhonePanel } from "./watch-phone-view.js";
+import { component, element } from "./watch-element.js";
+import { clockTime, counted } from "./watch-render.js";
+export const clove = {
+    viewBox: "0.6625858545303345 0.6630800366401672 46.674827575683594 46.673831939697266",
+    paths: [
+        "M41.47315,11.48535c-1.20117-0.12305-2.16211-1.08398-2.28418-2.28516c-0.17676-1.7334-1.01758-3.29492-2.36865-4.39648s-3.05078-1.61719-4.7832-1.43359c-3.34277,0.34082-5.86377,3.13086-5.86377,6.49121v14.13867c0,0.27637,0.22363,0.5,0.5,0.5H40.8125c3.59766,0,6.52441-2.92676,6.52441-6.52441C47.33692,14.61523,44.81592,11.82422,41.47315,11.48535z M35.56543,15.81543l-5.85791,5.85742c-0.09766,0.09766-0.22559,0.14648-0.35352,0.14648s-0.25586-0.04883-0.35352-0.14648c-0.19531-0.19531-0.19531-0.51172,0-0.70703l5.85791-5.85742c0.19531-0.19531,0.51172-0.19531,0.70703,0C35.76073,15.30372,35.76074,15.62011,35.56543,15.81543z",
+        "M15.30225,0.66308c-3.36035,0-6.15088,2.52051-6.49121,5.86328C8.68897,7.72852,7.72852,8.68945,6.52686,8.81152c-1.7334,0.17578-3.29492,1.01758-4.396,2.36816s-1.61035,3.0498-1.43408,4.7832c0.34033,3.34277,3.13086,5.86328,6.49121,5.86328h14.13867c0.27637,0,0.5-0.22363,0.5-0.5V7.18751C21.82666,3.58984,18.8999,0.66308,15.30225,0.66308z M18.99951,19.00001c-0.09766,0.09766-0.22559,0.14648-0.35352,0.14648s-0.25586-0.04883-0.35352-0.14648l-5.85742-5.8584c-0.19531-0.19531-0.19531-0.51172,0-0.70703c0.19531-0.19531,0.51172-0.19531,0.70703,0l5.85742,5.8584C19.19482,18.48829,19.19482,18.80469,18.99951,19.00001z",
+        "M24,26.17383H9.86133c-3.59766,0-6.52441,2.92676-6.52441,6.52441c0,3.35938,2.52051,6.14941,5.86377,6.49023c1.20117,0.12207,2.16211,1.08301,2.28418,2.28418c0.17676,1.7334,1.01758,3.29492,2.36865,4.39648c1.17529,0.95801,2.61377,1.46777,4.11035,1.46777c0.22314,0,0.44775-0.01074,0.67285-0.03418C21.97949,46.96189,24.5,44.17186,24.5,40.81248V26.67383C24.5,26.39746,24.27637,26.17383,24,26.17383z M21.67334,29.70704l-5.85791,5.8584c-0.09766,0.09766-0.22559,0.14648-0.35352,0.14648s-0.25586-0.04883-0.35352-0.14648c-0.19531-0.19531-0.19531-0.51172,0-0.70703L20.9663,29c0.19531-0.19531,0.51172-0.19531,0.70703,0S21.86865,29.51172,21.67334,29.70704z",
+        "M47.30322,32.03711c-0.34033-3.34277-3.13086-5.86328-6.49072-5.86328H26.67334c-0.27637,0-0.5,0.22363-0.5,0.5V40.8125c0,3.59766,2.92676,6.52441,6.52442,6.52441c3.36035,0,6.15088-2.52148,6.49121-5.86426c0.12207-1.20117,1.08301-2.16211,2.28418-2.28418c1.7334-0.17578,3.29492-1.01758,4.396-2.36816S47.47949,33.7705,47.30322,32.03711z M35.56543,35.56543c-0.09766,0.09766-0.22559,0.14648-0.35352,0.14648s-0.25586-0.04883-0.35352-0.14648l-5.85791-5.8584c-0.19531-0.19531-0.19531-0.51172,0-0.70703s0.51172-0.19531,0.70703,0l5.85791,5.8584C35.76074,35.05371,35.76074,35.37011,35.56543,35.56543z",
+    ],
+};
+export function queueLanes(model) {
+    const queue = model.queue;
+    if (queue === undefined)
+        return null;
+    return `Queue: ${String(queue["busy"])} of ${String(queue["lanes"])} lanes busy`;
+}
+export function skippedText(value) {
+    const ticket = record(value) ?? {};
+    const name = `#${String(ticket["ticketId"])}`;
+    const dependencies = ticket["dependencies"];
+    if (ticket["reason"] === "ticket-dependency-open" &&
+        Array.isArray(dependencies))
+        return `${name} waits for ${dependencies.map((item) => `#${String(item)}`).join(", ")}`;
+    if (ticket["reason"] === "ticket-active")
+        return `${name} is in work`;
+    return `${name}: ${String(ticket["reason"])}`;
+}
+export function Queue(props) {
+    const skipped = props.model.queue?.["skipped"];
+    if (!Array.isArray(skipped) || skipped.length === 0)
+        return null;
+    return element("details", {
+        class: "queue-waiting",
+        children: [
+            element("summary", {
+                children: `${counted(skipped.length, "ticket")} skipped`,
+            }),
+            element("ul", {
+                children: skipped.map((value) => element("li", { children: skippedText(value) })),
+            }),
+        ],
+    });
+}
+export function Brand() {
+    return element("strong", {
+        class: "brand",
+        children: [
+            element("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                focusable: "false",
+                viewBox: clove.viewBox,
+                children: clove.paths.map((d) => element("path", { fill: "currentColor", d })),
+            }),
+            "cloving",
+        ],
+    });
+}
+export function HeaderStatus(props) {
+    const { model, stale } = props;
+    const updated = model === null ? "" : `updated ${clockTime(model.updatedAt)}`;
+    const stamp = stale
+        ? element("span", {
+            class: "bad",
+            children: "The watch tool does not answer.",
+        })
+        : element("span", { children: updated });
+    const lanes = model === null ? null : queueLanes(model);
+    return element("div", {
+        class: "header-status",
+        children: [
+            stamp,
+            lanes === null
+                ? null
+                : element("span", { class: "queue-lanes", children: lanes }),
+        ],
+    });
+}
+export function HeaderActions(props) {
+    const { start, phone } = props;
+    if (start === undefined && phone === undefined)
+        return null;
+    return element("div", {
+        class: "header-actions",
+        children: [
+            start === undefined
+                ? null
+                : element("button", {
+                    type: "button",
+                    class: "start-toggle",
+                    "aria-controls": "start-run",
+                    "aria-expanded": String(start.shown),
+                    onClick: start.onToggle,
+                    children: "Start a run",
+                }),
+            phone === undefined
+                ? null
+                : component(PhonePanel, {
+                    phone,
+                    now: props.now ?? props.model?.updatedAt ?? "",
+                }),
+        ],
+    });
+}
+export function Header(props) {
+    return element("header", {
+        children: [
+            component(Brand, {}),
+            component(HeaderStatus, props),
+            component(HeaderActions, props),
+        ],
+    });
+}

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

@@ -3,13 +3,14 @@ import { workflowRefusals, } from "../workflow-refusals.js";
 import { isTicketStatus } from "../ticket-status.js";
 import { isPromotionId } from "../workflow-contracts.js";
 import { priceFields, statusTurns } from "./watch-usage.js";
-import { priceOf, usageOf } from "../worker-usage.js";
+import { priceOf, usageOf, attemptFields } from "../worker-usage.js";
 import { priceText } from "./usage-render.js";
 import { boardsOf, currentStepOf, roundOf, stagesFor, startWorkflowOf, } from "./watch-board.js";
 import { decisionOf, phasesOf } from "./watch-phases.js";
 import { pullOf } from "./watch-pull-request.js";
 import { establishedIssue } from "./watch-pr-identity.js";
 import { displayRun } from "./watch-paths.js";
+import { shownCommands } from "./command-effects.js";
 const textLimit = 600;
 const activityLimit = 400;
 function record(value) {
@@ -119,7 +120,10 @@ export function turnOf(records) {
     const result = record(records.result);
     const outcome = text(result["outcome"]);
     const report = record(parsed(text(result["result"])));
+    const harness = text(started["harness"]) || text(report["harness"]);
     return {
+        ...attemptFields(report["attempts"]),
+        ...(harness === "" ? {} : { harness }),
         key: records.key,
         operationId: text(started["operationId"]),
         usage: usageOf(report["usage"]),
@@ -186,6 +190,14 @@ function outcomeOf(value) {
         ...(issueUpdate === "failed" ? { issueUpdate } : {}),
     };
 }
+function runLinksOf(status) {
+    return {
+        parentRunId: stamp(status["parentRunId"]),
+        chainId: stamp(status["chainId"]) ?? text(status["runId"]),
+        childRunIds: texts(status["childRunIds"]),
+        awaitedRunId: stamp(status["awaitedRunId"]),
+    };
+}
 function runOf(inputs, value) {
     const status = record(record(value)["status"]);
     const runId = text(status["runId"]);
@@ -198,9 +210,7 @@ function runOf(inputs, value) {
     return {
         runId,
         workflowId,
-        parentRunId: stamp(status["parentRunId"]),
-        chainId: stamp(status["chainId"]) ?? runId,
-        childRunIds: texts(status["childRunIds"]),
+        ...runLinksOf(status),
         ticketId: ticketId === "" ? null : ticketId,
         ...(issue === null ? {} : { issueIdentity: issue }),
         title: stamp(status["title"]),
@@ -224,6 +234,9 @@ function runOf(inputs, value) {
             .map((decision) => decisionCommands(operationalDecision(record(decision), workflowId), inputs.client)),
         events: list(record(value)["events"]).map(eventOf),
         turns: statusTurns(inputs.turns, status),
+        ...(status["commandEffects"] === undefined
+            ? {}
+            : { commandEffects: shownCommands(status["commandEffects"]) }),
         phases: phasesOf(list(record(value)["events"]), workflowId),
         decision: decisionOf(list(record(value)["events"])),
         feedback: list(status["feedback"]).map(feedbackOf),

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

@@ -1,19 +1,30 @@
 import { cardReply } from "./watch-card-reply.js";
 import { record } from "../protocol.js";
+import { Commands, commandText } from "./command-effects.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 { watchPhoneClient } from "./watch-phone-client.js";
+import { PhoneAsk, PhoneCode, PhoneList, PhonePanel, phoneButton, phoneNotices, refusalText, timeLeft, } from "./watch-phone-view.js";
 import { priceOf, tokenCount, usageOf } from "../worker-usage.js";
-import { priceText, usageText, totalsSuffix } from "./usage-render.js";
+import { priceText, usageText, attemptText, totalsSuffix, } from "./usage-render.js";
 import { startPrompts, StartCard, StartRun } from "./watch-start-view.js";
 import { Board, boardSizing, Card, HandoffLinks, Column, columnCollapsed, CardReview, WorkflowList, cardReview, cardStep, completionMark, observationText, staleObservation, } 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, RefusedWorkflows, Queue, Run, } from "./watch-view.js";
+import { Banner, BannerDetail, BoardPage, Page, Phases, PullRequest, Review, RefusedWorkflows, Run, } from "./watch-view.js";
+import { Brand, clove, Header, HeaderActions, HeaderStatus, Queue, queueLanes, skippedText, } from "./watch-header-view.js";
 const functions = [
     record,
+    commandText,
+    Commands,
+    queueLanes,
+    skippedText,
     Queue,
+    Brand,
+    HeaderStatus,
+    HeaderActions,
     cardReply,
     cardSubmitKey,
     cardKey,
@@ -24,6 +35,7 @@ const functions = [
     usageOf,
     priceText,
     usageText,
+    attemptText,
     totalsSuffix,
     watchHash,
     watchLocation,
@@ -70,6 +82,14 @@ const functions = [
     PullRequest,
     Review,
     Run,
+    timeLeft,
+    refusalText,
+    phoneButton,
+    phoneNotices,
+    PhoneCode,
+    PhoneAsk,
+    PhoneList,
+    PhonePanel,
     Header,
     RefusedWorkflows,
     BoardPage,
@@ -130,7 +150,20 @@ body:has(.board-page) { padding-bottom: 0; overflow: hidden; }
 .workflow-refusals { flex-shrink: 0; max-height: 25dvh; overflow-y: auto; overflow-wrap: anywhere; }
 .workflow-refusals h2 { margin: 8px 0; }
 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; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.header-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.queue-lanes { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
+.header-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.queue-waiting { flex-shrink: 0; margin: 0 0 4px; color: var(--muted); font-size: 12px; }
+.queue-waiting ul { margin: 6px 0 0; padding: 0 0 0 18px; columns: 220px; column-gap: 24px; max-height: 25dvh; overflow-y: auto; }
+.phone { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
+.phone-pairing { flex-basis: 100%; }
+.phone-pairing div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.phone-qr { width: 196px; height: 196px; border-radius: 8px; }
+.phone-ask { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.phone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.phone-list li { display: flex; gap: 8px; align-items: center; color: var(--ink); }
+header { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px 0 12px; 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); }
@@ -147,43 +180,45 @@ h2, h3 { font-family: var(--heading-font); font-weight: 700; }
 .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 { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin: 0; padding: 4px 0 10px; color: var(--muted); font: 600 13px/1.5 var(--body-font); }
+.column-count { font-variant-numeric: tabular-nums; }
 .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, .add-card:hover, .add-card-form button:hover { background: var(--surface); }
+header button, .phone button, .column-name button, .add-card, .add-card-form button, .start-card button { font: 500 13px/1.4 var(--body-font); color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin: 0; }
+header button:hover, .phone button:hover, .column-name button:hover, .add-card:hover, .add-card-form button:hover, .start-card button:hover { background: var(--surface-2); }
 .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 { width: 100%; text-align: left; margin: 4px 0; }
 .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 { display: grid; gap: 6px; margin-bottom: 10px; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); 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, .card-cost { font: 400 12px/1.6 var(--body-font); font-variant-numeric: tabular-nums; }
+.card small { font: 400 11px/1.6 var(--code-font); }
 .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); }
+.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: 600 12px/1.6 var(--body-font); }
 .column.stopped { background: var(--surface); box-shadow: inset 0 0 0 1px var(--bad), inset 0 0 0 100vmax var(--bad-tint); }
+.column.stopped.collapsed { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
 .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); }
+.stopped .card { background: linear-gradient(var(--bad-tint), var(--bad-tint)), var(--surface); box-shadow: inset 0 0 0 1px var(--bad); }
 .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); }
@@ -261,6 +296,7 @@ export function pageDocument(actionToken = null) {
         `const actionToken = ${JSON.stringify(actionToken)};`,
         ...functions.map((item) => item.toString()),
         watchCardClient,
+        watchPhoneClient,
         watchClient,
     ].join("\n");
     return [

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

@@ -0,0 +1 @@
+export declare const watchPhoneClient = "\nasync function phoneLoad() {\n  const sent = Date.now();\n  const sequence = ++state.phoneSequence;\n  try {\n    const reply = await fetch(\"phone.json\", { cache: \"no-store\" });\n    const phone = reply.ok ? await reply.json() : null;\n    if (phone !== null && sequence > state.phoneApplied) {\n      state.phoneApplied = sequence;\n      state.phone = phone;\n      state.phoneLoadedAt = sent;\n    }\n  } catch {}\n  draw();\n}\nasync function phonePost(action, body = {}) {\n  state.phoneBusy = true;\n  state.phoneMessage = \"\";\n  draw();\n  let reply;\n  try {\n    const response = await fetch(\"actions/phone/\" + action, {\n      method: \"POST\",\n      headers: { \"content-type\": \"application/json\", \"x-cloving-token\": actionToken },\n      body: JSON.stringify(body),\n    });\n    reply = response.ok ? await response.json() : { error: { detail: \"The watch page refused the request. Refresh the page.\" } };\n  } catch {\n    reply = { error: { detail: \"The watch tool does not answer.\" } };\n  }\n  state.phoneBusy = false;\n  state.phoneMessage = reply.error?.detail ?? reply.warning ?? \"\";\n  return reply;\n}\nfunction phoneSession(now) {\n  const pairing = state.phonePairing;\n  const live = state.phone?.pairing ?? null;\n  const ended = live === null && state.phoneLoadedAt > (pairing?.at ?? 0);\n  if (pairing !== null && (ended || Date.parse(pairing.expiresAt) <= Date.parse(now))) state.phonePairing = null;\n  const accepted = state.phoneAccepted;\n  const device = (state.phone?.devices ?? []).find((item) => item.deviceId === accepted?.deviceId);\n  const shown = device?.state === \"connected\" && device.removedAt === null;\n  return { live, connected: shown ? device.name : null };\n}\nfunction phoneControls(now) {\n  if (actionToken === null) return undefined;\n  const { live, connected } = phoneSession(now);\n  return {\n    pairing: state.phonePairing,\n    request: live?.request ?? null,\n    stage: live?.stage ?? null,\n    connected,\n    refusal: state.phone?.refusal ?? null,\n    reason: state.phone?.reason ?? null,\n    devices: state.phone?.devices ?? [],\n    busy: state.phoneBusy,\n    message: state.phoneMessage,\n    async onPair() {\n      state.phoneAccepted = null;\n      const reply = await phonePost(\"pair\");\n      if (!reply.error) state.phonePairing = { ...reply, at: Date.now() };\n      await phoneLoad();\n    },\n    async onCancel() {\n      state.phonePairing = null;\n      await phonePost(\"cancel\");\n      await phoneLoad();\n    },\n    async onAccept() {\n      state.phoneAccepted = live?.request ?? null;\n      await phonePost(\"accept\", { pairingId: live?.pairingId });\n      await phoneLoad();\n    },\n    async onDeny() {\n      await phonePost(\"deny\", { pairingId: live?.pairingId });\n      await phoneLoad();\n    },\n    async onRemove(deviceId) {\n      await phonePost(\"remove\", { deviceId });\n      await phoneLoad();\n    },\n  };\n}\n";

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

@@ -0,0 +1,84 @@
+export const watchPhoneClient = `
+async function phoneLoad() {
+  const sent = Date.now();
+  const sequence = ++state.phoneSequence;
+  try {
+    const reply = await fetch("phone.json", { cache: "no-store" });
+    const phone = reply.ok ? await reply.json() : null;
+    if (phone !== null && sequence > state.phoneApplied) {
+      state.phoneApplied = sequence;
+      state.phone = phone;
+      state.phoneLoadedAt = sent;
+    }
+  } catch {}
+  draw();
+}
+async function phonePost(action, body = {}) {
+  state.phoneBusy = true;
+  state.phoneMessage = "";
+  draw();
+  let reply;
+  try {
+    const response = await fetch("actions/phone/" + action, {
+      method: "POST",
+      headers: { "content-type": "application/json", "x-cloving-token": actionToken },
+      body: JSON.stringify(body),
+    });
+    reply = response.ok ? await response.json() : { error: { detail: "The watch page refused the request. Refresh the page." } };
+  } catch {
+    reply = { error: { detail: "The watch tool does not answer." } };
+  }
+  state.phoneBusy = false;
+  state.phoneMessage = reply.error?.detail ?? reply.warning ?? "";
+  return reply;
+}
+function phoneSession(now) {
+  const pairing = state.phonePairing;
+  const live = state.phone?.pairing ?? null;
+  const ended = live === null && state.phoneLoadedAt > (pairing?.at ?? 0);
+  if (pairing !== null && (ended || Date.parse(pairing.expiresAt) <= Date.parse(now))) state.phonePairing = null;
+  const accepted = state.phoneAccepted;
+  const device = (state.phone?.devices ?? []).find((item) => item.deviceId === accepted?.deviceId);
+  const shown = device?.state === "connected" && device.removedAt === null;
+  return { live, connected: shown ? device.name : null };
+}
+function phoneControls(now) {
+  if (actionToken === null) return undefined;
+  const { live, connected } = phoneSession(now);
+  return {
+    pairing: state.phonePairing,
+    request: live?.request ?? null,
+    stage: live?.stage ?? null,
+    connected,
+    refusal: state.phone?.refusal ?? null,
+    reason: state.phone?.reason ?? null,
+    devices: state.phone?.devices ?? [],
+    busy: state.phoneBusy,
+    message: state.phoneMessage,
+    async onPair() {
+      state.phoneAccepted = null;
+      const reply = await phonePost("pair");
+      if (!reply.error) state.phonePairing = { ...reply, at: Date.now() };
+      await phoneLoad();
+    },
+    async onCancel() {
+      state.phonePairing = null;
+      await phonePost("cancel");
+      await phoneLoad();
+    },
+    async onAccept() {
+      state.phoneAccepted = live?.request ?? null;
+      await phonePost("accept", { pairingId: live?.pairingId });
+      await phoneLoad();
+    },
+    async onDeny() {
+      await phonePost("deny", { pairingId: live?.pairingId });
+      await phoneLoad();
+    },
+    async onRemove(deviceId) {
+      await phonePost("remove", { deviceId });
+      await phoneLoad();
+    },
+  };
+}
+`;

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

@@ -0,0 +1,56 @@
+import { type Shown } from "./watch-element.ts";
+export interface PhonePicture {
+    readonly size: number;
+    readonly path: string;
+}
+export interface PhonePairing {
+    readonly link: string;
+    readonly expiresAt: string;
+    readonly picture: PhonePicture;
+}
+export interface PhoneRequest {
+    readonly deviceId: string;
+    readonly name: string;
+    readonly platform: string;
+    readonly code: string;
+}
+export interface PhoneDevice {
+    readonly deviceId: string;
+    readonly name: string;
+    readonly platform: string;
+    readonly state: string;
+    readonly removedAt: string | null;
+}
+export interface PhoneControls {
+    readonly pairing: PhonePairing | null;
+    readonly request: PhoneRequest | null;
+    readonly stage: string | null;
+    readonly connected: string | null;
+    readonly refusal: string | null;
+    readonly reason: string | null;
+    readonly devices: readonly PhoneDevice[];
+    readonly busy: boolean;
+    readonly message: string;
+    readonly onPair: () => void;
+    readonly onCancel: () => void;
+    readonly onAccept: () => void;
+    readonly onDeny: () => void;
+    readonly onRemove: (deviceId: string) => void;
+}
+export declare function timeLeft(expiresAt: string, now: string): string;
+export declare function refusalText(code: string): string;
+export declare function PhoneCode(props: {
+    readonly picture: PhonePicture;
+}): Shown;
+export declare function phoneButton(label: string, onClick: () => void): Shown;
+export declare function PhoneAsk(props: {
+    readonly phone: PhoneControls;
+}): Shown;
+export declare function PhoneList(props: {
+    readonly phone: PhoneControls;
+}): Shown;
+export declare function phoneNotices(phone: PhoneControls): Shown;
+export declare function PhonePanel(props: {
+    readonly phone: PhoneControls;
+    readonly now: string;
+}): Shown;

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

@@ -0,0 +1,113 @@
+import { component, element } from "./watch-element.js";
+export function timeLeft(expiresAt, now) {
+    const seconds = Math.max(0, Math.ceil((Date.parse(expiresAt) - Date.parse(now)) / 1000));
+    return `${String(Math.floor(seconds / 60))}:${String(seconds % 60).padStart(2, "0")} left`;
+}
+export function refusalText(code) {
+    const texts = {
+        "pairing-mac-invalid": "The phone sent a request that does not agree with the QR code.",
+        "pairing-key-invalid": "The phone sent a key that is not valid.",
+        "pairing-request-invalid": "The phone sent a request that is not valid.",
+        "pairing-device-revoked": "This phone was removed. Connect it again as a new phone.",
+        "pairing-expired": "The connection request expired. Click Connect a phone again.",
+        "pairing-check-invalid": "The phone did not confirm the connection. Remove it and connect again.",
+    };
+    return texts[code] ?? `The connection did not work (${code}).`;
+}
+export function PhoneCode(props) {
+    const { size, path } = props.picture;
+    return element("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "phone-qr",
+        viewBox: `0 0 ${String(size)} ${String(size)}`,
+        role: "img",
+        "aria-label": "Pairing QR code",
+        "shape-rendering": "crispEdges",
+        children: [
+            element("rect", { width: size, height: size, fill: "#ffffff" }),
+            element("path", { d: path, fill: "#000000" }),
+        ],
+    });
+}
+export function phoneButton(label, onClick) {
+    return element("button", { type: "button", onClick, children: label });
+}
+export function PhoneAsk(props) {
+    const { phone } = props;
+    const request = phone.request;
+    if (request === null)
+        return null;
+    if (phone.stage === "checking")
+        return element("p", { children: `Checking ${request.name}` });
+    return element("div", {
+        class: "phone-ask",
+        children: [
+            element("strong", {
+                children: `Connect "${request.name}" (${request.platform})? Code ${request.code}`,
+            }),
+            phoneButton("Accept", phone.onAccept),
+            phoneButton("Deny", phone.onDeny),
+        ],
+    });
+}
+export function PhoneList(props) {
+    const { phone } = props;
+    if (phone.devices.length === 0)
+        return null;
+    return element("ul", {
+        class: "phone-list",
+        children: phone.devices.map((device) => element("li", {
+            key: device.deviceId,
+            children: [
+                `${device.name} (${device.platform}) ${device.removedAt === null ? device.state : "removed"}`,
+                device.removedAt === null
+                    ? phoneButton("Remove", () => {
+                        phone.onRemove(device.deviceId);
+                    })
+                    : null,
+            ],
+        })),
+    });
+}
+export function phoneNotices(phone) {
+    const lines = [
+        phone.reason === "registration-lost" ? "Connect your phones again." : null,
+        phone.connected === null ? null : `Connected: ${phone.connected}`,
+        phone.refusal === null ? null : refusalText(phone.refusal),
+        phone.message === "" ? null : phone.message,
+    ];
+    return lines.map((line) => line === null ? null : element("p", { role: "status", children: line }));
+}
+export function PhonePanel(props) {
+    const { phone, now } = props;
+    const waiting = phone.request === null ? phone.pairing : null;
+    return element("section", {
+        class: waiting === null ? "phone" : "phone phone-pairing",
+        children: [
+            waiting === null
+                ? null
+                : component(PhoneCode, { picture: waiting.picture }),
+            element("div", {
+                children: [
+                    waiting === null
+                        ? null
+                        : [
+                            element("strong", { children: "Scan with your phone camera" }),
+                            element("span", { children: timeLeft(waiting.expiresAt, now) }),
+                        ],
+                    component(PhoneAsk, { phone }),
+                    phone.pairing === null
+                        ? element("button", {
+                            type: "button",
+                            disabled: phone.busy,
+                            onClick: phone.onPair,
+                            children: "Connect a phone",
+                        })
+                        : phoneButton("Cancel", phone.onCancel),
+                    phoneNotices(phone),
+                ],
+            }),
+            component(PhoneList, { phone }),
+        ],
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { IncomingMessage } from "node:http";
+import { type WatchActions } from "./watch-actions.ts";
+export declare function isPhoneAction(path: string): boolean;
+export declare function phoneAction(actions: WatchActions, request: IncomingMessage): Promise<string | null>;
+export declare function phoneRead(runtimeDirectory: string): Promise<string>;

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

@@ -0,0 +1,53 @@
+import { qrMatrix } from "../phone/qr-matrix.js";
+import { qrPicture } from "../phone/qr-picture.js";
+import { phoneRequest } from "./phone-client.js";
+import { actionAllowed, actionBody, } from "./watch-actions.js";
+const operations = {
+    "/actions/phone/pair": "phone-pair-start",
+    "/actions/phone/cancel": "phone-pair-cancel",
+    "/actions/phone/accept": "phone-pair-accept",
+    "/actions/phone/deny": "phone-pair-deny",
+    "/actions/phone/remove": "phone-remove",
+};
+export function isPhoneAction(path) {
+    return Object.hasOwn(operations, path);
+}
+function withPicture(result) {
+    const link = result["link"];
+    return typeof link === "string"
+        ? { ...result, picture: qrPicture(qrMatrix(link).modules) }
+        : result;
+}
+export async function phoneAction(actions, request) {
+    const operation = operations[new URL(String(request.url), "http://localhost").pathname];
+    if (operation === undefined || !actionAllowed(actions, request))
+        return null;
+    const body = await actionBody(request);
+    if (typeof body !== "object" || body === null || Array.isArray(body))
+        return null;
+    const reply = await phoneRequest(actions.runtimeDirectory, {
+        operation,
+        parameters: { ...body },
+    });
+    if (reply === undefined)
+        return JSON.stringify({
+            error: {
+                code: "phone-relay-off",
+                detail: "The phone relay is off or not started.",
+            },
+        });
+    return JSON.stringify(reply.kind === "result"
+        ? withPicture(reply.result)
+        : { error: reply.error });
+}
+export async function phoneRead(runtimeDirectory) {
+    const reply = await phoneRequest(runtimeDirectory, {
+        operation: "phone-state",
+        parameters: {},
+    });
+    if (reply === undefined)
+        return JSON.stringify({ relay: "off" });
+    return JSON.stringify(reply.kind === "result"
+        ? { relay: "on", ...reply.result }
+        : { relay: "on", error: reply.error });
+}

package/dist/src/cli/watch-pull-request.d.ts

@@ -1,10 +1,12 @@
+import type { CiRerunNotice } from "./github-ci-progress.ts";
 import type { WatchRun } from "./watch-render.ts";
 import { type PrRepository } from "./watch-pr-identity.ts";
 export interface GithubRecords {
     readonly started: unknown;
     readonly result: unknown;
+    readonly ciReruns?: readonly CiRerunNotice[];
 }
 export declare function pullOf(inputs: {
     readonly records: readonly GithubRecords[];
     readonly repository: PrRepository | null;
-}, runId: string): Pick<WatchRun, "pullRequest" | "reviews" | "mergeCommit" | "mergeProof">;
+}, runId: string): Pick<WatchRun, "pullRequest" | "reviews" | "mergeCommit" | "mergeProof" | "ciReruns">;