cloving 1.1.0 → 1.3.0

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

@@ -1,10 +1,16 @@
+import { operationalDecision } from "../decision-visibility.js";
+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, startWorkflowOf, } from "./watch-board.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) {
@@ -114,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"]),
@@ -156,54 +165,6 @@ export function decisionCommands(decision, client) {
         deny: `${client} deny ${decisionId} --text "<feedback>" ${binding}`,
     };
 }
-function githubOf(records) {
-    const started = record(records.started);
-    const operation = list(parsed(text(started["operationId"])));
-    const result = record(records.result);
-    const completed = result["outcome"] === "completed";
-    return {
-        runId: text(operation[2]),
-        round: Number(operation[1]),
-        method: text(started["method"]),
-        report: completed ? record(parsed(text(result["result"]))) : {},
-    };
-}
-function pullRequestOf(results) {
-    const opened = results
-        .filter((item) => item.method === "open-pr")
-        .map((item) => item.report)
-        .findLast((report) => text(report["url"]).startsWith("https://"));
-    if (opened === undefined)
-        return null;
-    return { number: Number(opened["number"]), url: text(opened["url"]) };
-}
-function reviewsOf(results) {
-    return results
-        .filter((item) => item.method === "wait-review")
-        .flatMap(({ round, report }) => {
-        const score = count(report["score"]);
-        if (score === null)
-            return [];
-        return [{ round, commit: text(report["commit"]), score }];
-    });
-}
-function mergeCommitOf(results) {
-    const merged = results
-        .filter((item) => item.method === "merge")
-        .map((item) => stamp(item.report["merged"]));
-    return merged.find((commit) => commit !== null) ?? null;
-}
-function pullOf(inputs, runId) {
-    const results = inputs.githubRecords
-        .map(githubOf)
-        .filter((item) => item.runId === runId)
-        .toSorted((first, second) => first.round - second.round);
-    return {
-        pullRequest: pullRequestOf(results),
-        reviews: reviewsOf(results),
-        mergeCommit: mergeCommitOf(results),
-    };
-}
 function feedbackOf(value) {
     const fields = record(value);
     return {
@@ -219,28 +180,49 @@ function eventOf(value) {
         type: text(fields["type"]),
     };
 }
+function outcomeOf(value) {
+    const fields = record(value);
+    const { promotionId, ticketStatus, issueUpdate } = fields;
+    return {
+        outcome: stamp(fields["kind"]),
+        ...(isPromotionId(promotionId) ? { promotionId } : {}),
+        ...(isTicketStatus(ticketStatus) ? { ticketStatus } : {}),
+        ...(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"]);
     const workflowId = text(status["workflowId"]);
     const budget = record(status["budget"]);
     const ticketId = text(status["ticketId"]);
-    const ticketStatus = record(status["outcome"])["ticketStatus"];
+    const issue = workflowId === "develop-issue"
+        ? establishedIssue(inputs.repository ?? null, status["issueIdentity"])
+        : null;
     return {
         runId,
         workflowId,
+        ...runLinksOf(status),
         ticketId: ticketId === "" ? null : ticketId,
+        ...(issue === null ? {} : { issueIdentity: issue }),
         title: stamp(status["title"]),
-        outcome: stamp(record(status["outcome"])["kind"]),
-        ...(isTicketStatus(ticketStatus) ? { ticketStatus } : {}),
-        ...(record(status["outcome"])["issueUpdate"] === "failed"
-            ? { issueUpdate: "failed" }
-            : {}),
+        ...outcomeOf(status["outcome"]),
         latestAt: stamp(status["latestAt"]),
         claudeCostUsd: priceOf(status["claudeCostUsd"]),
         estimatedCostUsd: priceOf(status["estimatedCostUsd"]),
         usage: usageOf(status["usage"]),
-        currentStep: currentStepOf(list(record(value)["events"]), workflowId),
+        currentStep: currentStepOf(list(record(value)["events"]), {
+            workflowId,
+            stages: stagesFor(inputs.workflowStages, workflowId),
+        }),
         round: roundOf(list(record(value)["events"])),
         state: text(status["state"]),
         code: text(record(status["reason"])["code"]),
@@ -249,13 +231,19 @@ function runOf(inputs, value) {
         limit: count(budget["limit"]),
         decisions: inputs.decisions
             .filter((decision) => record(decision)["runId"] === runId)
-            .map((decision) => decisionCommands(decision, inputs.client)),
+            .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),
-        ...pullOf(inputs, runId),
+        ...pullOf({
+            records: inputs.githubRecords,
+            repository: workflowId === "develop-issue" ? (inputs.repository ?? null) : null,
+        }, runId),
     };
 }
 function began(run) {
@@ -270,6 +258,8 @@ export function watchModel(inputs) {
     const workflows = boardsOf({ ...inputs, completionCandidates: candidates }, runs);
     return {
         workflows,
+        ...(inputs.queue === undefined ? {} : { queue: inputs.queue }),
+        workflowRefusals: workflowRefusals(inputs.workflowRefusals),
         startWorkflowId: startWorkflowOf(workflows),
         updatedAt: inputs.updatedAt,
         service: inputs.service,

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

@@ -1,16 +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, Column, columnCollapsed, CardReview, WorkflowList, cardReview, cardStep, completionMark, } from "./watch-board-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, 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,
@@ -21,6 +35,7 @@ const functions = [
     usageOf,
     priceText,
     usageText,
+    attemptText,
     totalsSuffix,
     watchHash,
     watchLocation,
@@ -29,8 +44,11 @@ const functions = [
     cardReview,
     cardStep,
     completionMark,
+    observationText,
+    staleObservation,
     CardReview,
     Card,
+    HandoffLinks,
     Column,
     columnCollapsed,
     WorkflowList,
@@ -64,7 +82,16 @@ const functions = [
     PullRequest,
     Review,
     Run,
+    timeLeft,
+    refusalText,
+    phoneButton,
+    phoneNotices,
+    PhoneCode,
+    PhoneAsk,
+    PhoneList,
+    PhonePanel,
     Header,
+    RefusedWorkflows,
     BoardPage,
     Page,
 ];
@@ -93,6 +120,15 @@ const dark = `
   --bad: #FF7B72; --bad-tint: rgba(255,123,114,0.14);
 `;
 const style = `
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400; font-display: swap; src: url("/watch-fonts-v1/fira-code-latin-400-normal.woff2") format("woff2"); }
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 500; font-display: swap; src: url("/watch-fonts-v1/fira-code-latin-500-normal.woff2") format("woff2"); }
+@font-face { font-family: "Heebo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/watch-fonts-v1/heebo-latin-500-normal.woff2") format("woff2"); }
+@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/watch-fonts-v1/heebo-latin-700-normal.woff2") format("woff2"); }
+@font-face { font-family: "Heebo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/watch-fonts-v1/heebo-latin-800-normal.woff2") format("woff2"); }
+@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/watch-fonts-v1/space-grotesk-latin-400-normal.woff2") format("woff2"); }
+@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/watch-fonts-v1/space-grotesk-latin-500-normal.woff2") format("woff2"); }
+@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/watch-fonts-v1/space-grotesk-latin-600-normal.woff2") format("woff2"); }
+@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/watch-fonts-v1/space-grotesk-latin-700-normal.woff2") format("woff2"); }
 :root {${light}
   --heading-font: "Heebo", system-ui, sans-serif;
   --body-font: "Space Grotesk", system-ui, sans-serif;
@@ -111,8 +147,23 @@ body:has(.board-page) { padding-bottom: 0; overflow: hidden; }
 .board-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
 .board-page > header, .board-page > .down { flex-shrink: 0; }
 .start-run { flex-shrink: 0; max-height: 45dvh; overflow-y: auto; }
+.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); }
@@ -129,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 { 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); }
@@ -243,13 +296,13 @@ export function pageDocument(actionToken = null) {
         `const actionToken = ${JSON.stringify(actionToken)};`,
         ...functions.map((item) => item.toString()),
         watchCardClient,
+        watchPhoneClient,
         watchClient,
     ].join("\n");
     return [
         "<!doctype html>",
         '<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Cloving</title>',
         `<link rel="icon" href="data:image/svg+xml,${encodeURIComponent(icon)}">`,
-        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&amp;family=Heebo:wght@500;700;800&amp;family=Space+Grotesk:wght@400..700&amp;display=swap" media="print" onload="this.media=\'all\'">',
         `<style>${style}</style></head><body>`,
         '<div id="app"></div>',
         `<script type="module">${script}</script></body></html>`,

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

@@ -8,9 +8,9 @@ const effect = { open: "effect.requested", close: "effect.reported" };
 const issueWorkflow = "develop-issue";
 export const issueSteps = [
     { name: "Work tree", operation: "github-prepare" },
-    { name: "Claude turn", operation: "claude-turn" },
+    { name: "Agent turn", operation: "claude-turn" },
     { name: "Pull request", operation: "github-open-pr" },
-    { name: "Greptile review", operation: "github-wait-review" },
+    { name: "Code review", operation: "github-wait-review" },
     { name: "Merge", operation: "github-merge" },
 ];
 const verdicts = {
@@ -56,7 +56,7 @@ function ticketSpans(events) {
     return [
         ...admission(events),
         {
-            name: "Claude turn",
+            name: "Agent turn",
             startedAt: firstAt(events, effect.open),
             endedAt: closedAt(events, effect),
             ending: "done",

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