cloving 1.1.0 → 1.3.0

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

@@ -55,21 +55,45 @@ export function CardReview(props) {
         ]),
     });
 }
-export function completionMark(card, workflowId) {
+export function staleObservation(card, now) {
+    const observation = card.pullRequestObservation;
+    const lastSuccess = observation?.lastSuccess;
+    if (observation?.status === "merged" ||
+        lastSuccess?.status !== "unmerged" ||
+        !(Date.parse(now) - lastSuccess.readAt > 120000))
+        return null;
+    return [
+        " ",
+        element("span", { class: "completion-stale", children: "Stale" }),
+    ];
+}
+export function observationText(card, fallback) {
+    if (fallback !== "Needs attention")
+        return fallback;
+    const status = card.pullRequestObservation?.status;
+    if (status === "merged")
+        return `PR merged · #${String(card.pullRequestNumber)}`;
+    if (status === "pending")
+        return "Checking PR";
+    if (status === "unavailable")
+        return "PR status unavailable";
+    return fallback;
+}
+export function completionMark(card, context) {
     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";
+    const text = observationText(card, mark.text);
     if (mark.laterRunId === null)
-        return element("span", { class: "completion-mark", children: text });
+        return [
+            element("span", { class: "completion-mark", children: text }),
+            mark.text === "Needs attention"
+                ? staleObservation(card, context.now)
+                : null,
+        ];
     return element("a", {
         class: "completion-mark",
-        href: watchHash({ workflowId, runId: mark.laterRunId }),
+        href: watchHash({ workflowId: context.workflowId, runId: mark.laterRunId }),
         children: mark.text,
     });
 }
@@ -106,10 +130,28 @@ export function Card(props) {
                     element("small", { children: card.runId.slice(0, 12) }),
                 ],
             }),
-            completionMark(card, workflowId),
+            completionMark(card, { workflowId, now: props.observationNow ?? now }),
+            component(HandoffLinks, { run: card }),
         ],
     });
 }
+export function HandoffLinks(props) {
+    const { parentRunId, childRunIds, awaitedRunId } = props.run;
+    const links = [
+        ...(awaitedRunId == null
+            ? []
+            : [{ label: "Waiting for run", runId: awaitedRunId }]),
+        ...(parentRunId == null
+            ? []
+            : [{ label: "Parent run", runId: parentRunId }]),
+        ...(childRunIds ?? []).map((runId) => ({ label: "Child run", runId })),
+    ];
+    return links.map(({ label, runId }) => element("a", {
+        class: "meta",
+        href: watchHash({ workflowId: null, runId }),
+        children: `${label}: ${runId}`,
+    }));
+}
 export function WorkflowList(props) {
     return element("nav", {
         class: "workflows",
@@ -167,7 +209,13 @@ export function Column(props) {
                 : element("div", {
                     class: "column-cards",
                     children: [
-                        column.cards.map((card) => component(Card, { key: card.runId, card, workflowId, now })),
+                        column.cards.map((card) => component(Card, {
+                            key: card.runId,
+                            card,
+                            workflowId,
+                            now,
+                            observationNow: props.observationNow,
+                        })),
                         props.addCard,
                     ],
                 }),
@@ -179,7 +227,10 @@ export function Board(props) {
     return element("main", {
         class: "board",
         children: [
-            element("h2", { children: workflow.workflowId }),
+            element("h2", {
+                class: "visually-hidden",
+                children: workflow.workflowId,
+            }),
             element("div", {
                 class: "columns",
                 children: workflow.columns.map((column, index) => component(Column, {
@@ -187,6 +238,7 @@ export function Board(props) {
                     column,
                     workflowId: workflow.workflowId,
                     now,
+                    observationNow: props.observationNow,
                     controls: props.controls,
                     addCard: index === 0
                         ? component(AddCard, {

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

@@ -1,11 +1,17 @@
+import type { WorkflowStage, WorkflowStages } from "../workflow-declaration.ts";
 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 stagesFor(metadata: WorkflowStages | undefined, workflowId: string): readonly WorkflowStage[] | undefined;
+export declare function currentStepOf(events: readonly unknown[], workflow: {
+    readonly workflowId: string;
+    readonly stages: readonly WorkflowStage[] | undefined;
+}): WatchStep;
 export declare function roundOf(events: readonly unknown[]): number;
 interface BoardInputs {
     readonly workflows: readonly string[];
+    readonly workflowStages?: WorkflowStages;
     readonly updatedAt: string;
     readonly summaries?: readonly unknown[];
     readonly completionCandidates?: readonly WatchRun[];

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

@@ -1,6 +1,8 @@
+import { linksOf } from "../authority/handoff-chain.js";
 import { record } from "../protocol.js";
 import { isInstant } from "../authority/instants.js";
 import { issueSteps } from "./watch-phases.js";
+import { sameIssue } from "./watch-pr-identity.js";
 const weekMilliseconds = 7 * 24 * 60 * 60 * 1000;
 const terminalStates = ["completed", "failed", "cancelled"];
 function eventTime(run, type) {
@@ -12,11 +14,15 @@ export function completionMarkOf(run, candidates) {
         run.state !== "completed" ||
         run.outcome !== "blocked")
         return null;
+    if (run.mergeProof != null)
+        return {
+            text: `PR merged · #${String(run.mergeProof.number)}`,
+            laterRunId: null,
+        };
     const completedAt = eventTime(run, "run.completed");
     const later = candidates
-        .filter((candidate) => typeof run.ticketId === "string" &&
-        run.ticketId !== "" &&
-        candidate.ticketId === run.ticketId &&
+        .filter((candidate) => sameIssue(run.issueIdentity, candidate.issueIdentity) &&
+        candidate.mergeProof != null &&
         candidate.runId !== run.runId &&
         candidate.workflowId === "develop-issue" &&
         candidate.state === "completed" &&
@@ -32,7 +38,7 @@ export function completionMarkOf(run, candidates) {
         (first.runId < second.runId ? -1 : 1))[0];
     return later === undefined
         ? { text: "Needs attention", laterRunId: null }
-        : { text: "Done in a later run", laterRunId: later.runId };
+        : { text: "Ticket completed by later run", laterRunId: later.runId };
 }
 export function activeRun(state) {
     return !terminalStates.includes(state);
@@ -41,10 +47,17 @@ export function recentRun(latestAt, now) {
     const age = Date.parse(now) - Date.parse(latestAt ?? "");
     return age >= 0 && age <= weekMilliseconds;
 }
-function stepNames(workflowId) {
+export function stagesFor(metadata, workflowId) {
+    return metadata !== undefined && Object.hasOwn(metadata, workflowId)
+        ? metadata[workflowId]
+        : undefined;
+}
+function stepNames(workflowId, stages) {
+    if (workflowId !== "develop-issue" && stages !== undefined)
+        return [...stages.map((stage) => stage.label), "Other"];
     return workflowId === "develop-issue"
         ? issueSteps.map((step) => step.name)
-        : ["Claude turn", "Your review"];
+        : ["Agent turn", "Your review"];
 }
 function operationOf(event) {
     const payload = record(record(event)?.["payload"]);
@@ -63,7 +76,7 @@ function stepName(event, workflowId) {
     if (type !== "effect.requested")
         return undefined;
     if (workflowId !== "develop-issue")
-        return "Claude turn";
+        return "Agent turn";
     return issueSteps.find((step) => step.operation === operationOf(event)[4])
         ?.name;
 }
@@ -74,10 +87,30 @@ function startedAt(event) {
 function chronological(events) {
     return events.toSorted((first, second) => Date.parse(startedAt(first) ?? "") - Date.parse(startedAt(second) ?? ""));
 }
-export function currentStepOf(events, workflowId) {
+function declaredStage(event, stages) {
+    if (record(event)?.["type"] === "effect.requested") {
+        const operation = operationOf(event)[4];
+        return stages.find((stage) => stage.operations?.some((name) => name === operation));
+    }
+    const payload = record(record(event)?.["payload"]);
+    return (stages.find((stage) => stage.gateIds?.some((name) => name === payload?.["gateId"])) ??
+        stages.find((stage) => stage.gateKinds?.some((name) => name === payload?.["gateKind"])));
+}
+function declaredStep(events, stages) {
+    const event = events
+        .filter((item) => ["effect.requested", "gate.opened"].includes(String(record(item)?.["type"])))
+        .toSorted((first, second) => Number(record(second)?.["sequence"]) -
+        Number(record(first)?.["sequence"]))[0];
+    const stage = declaredStage(event, stages);
+    return { name: stage?.label ?? "Other", startedAt: startedAt(event) };
+}
+export function currentStepOf(events, workflow) {
+    const { workflowId, stages } = workflow;
+    if (workflowId !== "develop-issue" && stages !== undefined)
+        return declaredStep(events, stages);
     const event = chronological(events).findLast((item) => stepName(item, workflowId) !== undefined);
     return {
-        name: stepName(event, workflowId) ?? stepNames(workflowId)[0] ?? "Claude turn",
+        name: stepName(event, workflowId) ?? stepNames(workflowId)[0] ?? "Agent turn",
         startedAt: startedAt(event),
     };
 }
@@ -96,11 +129,20 @@ function columnOf(run, now) {
         return "Stopped";
     return run.outcome === "handoff_requested" ? "Done" : null;
 }
-function cardOf(run, runs) {
+function issueCardDetails(run) {
     const issue = run.workflowId === "develop-issue";
+    return {
+        round: issue ? run.round : null,
+        greptileScore: issue ? (run.reviews.at(-1)?.score ?? null) : null,
+        pullRequestNumber: issue ? (run.pullRequest?.number ?? null) : null,
+    };
+}
+function cardOf(run, runs) {
     return {
         runId: run.runId,
         title: run.title,
+        ...linksOf(run),
+        ...(run.awaitedRunId == null ? {} : { awaitedRunId: run.awaitedRunId }),
         completionMark: completionMarkOf(run, runs),
         pullRequestObservation: null,
         claudeCostUsd: run.claudeCostUsd,
@@ -109,9 +151,7 @@ function cardOf(run, runs) {
         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,
+        ...issueCardDetails(run),
     };
 }
 function stepOrder(first, second) {
@@ -133,7 +173,8 @@ function summaryOf(value) {
     const latest = fields?.["latestAt"];
     return {
         state: String(fields?.["state"]),
-        waiting: Array.isArray(pending) && pending.length > 0,
+        waiting: (Array.isArray(pending) && pending.length > 0) ||
+            typeof fields?.["awaitedRunId"] === "string",
         latestAt: typeof latest === "string" ? latest : null,
     };
 }
@@ -143,13 +184,17 @@ export function boardsOf(inputs, runs) {
         const summaries = inputs.summaries === undefined
             ? own.map((run) => ({
                 state: run.state,
-                waiting: run.decisions.length > 0,
+                waiting: run.decisions.length > 0 || run.awaitedRunId != null,
                 latestAt: run.latestAt,
             }))
             : inputs.summaries
                 .filter((value) => record(value)?.["workflowId"] === workflowId)
                 .map(summaryOf);
-        const columns = [...stepNames(workflowId), "Done", "Stopped"].map((name) => {
+        const columns = [
+            ...stepNames(workflowId, stagesFor(inputs.workflowStages, workflowId)),
+            "Done",
+            "Stopped",
+        ].map((name) => {
             const cards = own
                 .filter((run) => columnOf(run, inputs.updatedAt) === name)
                 .map((run) => cardOf(run, inputs.completionCandidates ?? runs));

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

@@ -14,7 +14,7 @@ export async function watchCardForms(directory) {
         if (!isWorkflowDeclaration(value))
             continue;
         const entries = Object.entries(value.input.fields);
-        if (!entries.every(([, rule]) => rule === "string" || rule.type === "string"))
+        if (!entries.every(([, rule]) => rule === "string" || rule.type === "string" || rule.type === "ticket"))
             continue;
         if (forms.some((form) => form.workflowId === value.workflowId))
             continue;
@@ -23,7 +23,7 @@ export async function watchCardForms(directory) {
             source: "input",
             fields: entries.map(([name, rule]) => ({
                 name,
-                label: name,
+                label: rule !== "string" && rule.type === "ticket" ? "Ticket ID" : name,
                 multiline: false,
                 optional: rule !== "string" && rule.optional === true,
             })),

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

@@ -1 +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";
+export declare const watchClient = "\nconst state = { model: null, receivedAt: 0, stale: false, copied: \"\", label: \"\", run: \"\", loading: false, again: false, columns: {}, cards: {}, start: null, hovered: null, focused: null, phonePairing: null, phoneBusy: false, phoneMessage: \"\", phone: null, phoneLoadedAt: 0, phoneAccepted: null, phoneSequence: 0, phoneApplied: 0 };\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 observationNow = model === null ? now : new Date(Date.parse(model.updatedAt) + performance.now() - state.receivedAt).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 phone = model === null ? undefined : phoneControls(now);\n  const page = component(Page, { model, selected, now, observationNow, stale, copying, columns, start, cards, phone });\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    const model = await reply.json();\n    const receivedAt = performance.now();\n    state.model = await withSelectedRun(model);\n    state.receivedAt = receivedAt;\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);\nif (actionToken !== null) {\n  phoneLoad();\n  setInterval(phoneLoad, 2000);\n}\n";

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

@@ -1,5 +1,5 @@
 export const watchClient = `
-const state = { model: null, stale: false, copied: "", label: "", run: "", loading: false, again: false, columns: {}, cards: {}, start: null, hovered: null, focused: null };
+const state = { model: null, receivedAt: 0, stale: false, copied: "", label: "", run: "", loading: false, again: false, columns: {}, cards: {}, start: null, hovered: null, focused: null, phonePairing: null, phoneBusy: false, phoneMessage: "", phone: null, phoneLoadedAt: 0, phoneAccepted: null, phoneSequence: 0, phoneApplied: 0 };
 function readPreference(key) {
   try { return JSON.parse(localStorage.getItem(key)); }
   catch { return null; }
@@ -58,10 +58,12 @@ function draw() {
   const followed = innerHeight + scrollY >= document.body.scrollHeight - 80;
   const copying = { command: state.copied, label: state.label, onCopy: copy };
   const now = new Date().toISOString();
+  const observationNow = model === null ? now : new Date(Date.parse(model.updatedAt) + performance.now() - state.receivedAt).toISOString();
   const columns = columnControls(model, selected);
   const start = model === null ? undefined : startControls();
   const cards = cardControls(model, model === null ? null : boardWorkflow(model, watchLocation(selected).workflowId));
-  const page = component(Page, { model, selected, now, stale, copying, columns, start, cards });
+  const phone = model === null ? undefined : phoneControls(now);
+  const page = component(Page, { model, selected, now, observationNow, stale, copying, columns, start, cards, phone });
   render(page, document.getElementById("app"));
   if (model === null) return;
   document.title = watchTitle(model, selected);
@@ -85,7 +87,10 @@ async function load() {
   try {
     const reply = await fetch("data.json", { cache: "no-store" });
     if (!reply.ok) throw new Error("watch-not-available");
-    state.model = await withSelectedRun(await reply.json());
+    const model = await reply.json();
+    const receivedAt = performance.now();
+    state.model = await withSelectedRun(model);
+    state.receivedAt = receivedAt;
     state.stale = false;
   } catch {
     state.stale = true;
@@ -115,4 +120,8 @@ draw();
 listen();
 setInterval(draw, 1000);
 setInterval(load, 15000);
+if (actionToken !== null) {
+  phoneLoad();
+  setInterval(phoneLoad, 2000);
+}
 `;

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

@@ -0,0 +1,27 @@
+import { type PhoneControls } from "./watch-phone-view.ts";
+import { type Shown } from "./watch-element.ts";
+import { type WatchModel } from "./watch-render.ts";
+export interface StartControls {
+    readonly shown: boolean;
+    readonly onToggle: () => void;
+}
+export interface HeaderProps {
+    readonly model: WatchModel | null;
+    readonly stale: boolean;
+    readonly start?: StartControls;
+    readonly phone?: PhoneControls | undefined;
+    readonly now?: string;
+}
+export declare const clove: {
+    viewBox: string;
+    paths: string[];
+};
+export declare function queueLanes(model: WatchModel): string | null;
+export declare function skippedText(value: unknown): string;
+export declare function Queue(props: {
+    readonly model: WatchModel;
+}): Shown;
+export declare function Brand(): Shown;
+export declare function HeaderStatus(props: HeaderProps): Shown;
+export declare function HeaderActions(props: HeaderProps): Shown;
+export declare function Header(props: HeaderProps): Shown;

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.d.ts

@@ -1,4 +1,10 @@
+import type { WorkflowStages } from "../workflow-declaration.ts";
+import { type WorkflowRefusal } from "../workflow-refusals.ts";
 import type { WatchDecision, WatchItem, WatchModel, WatchTurn } from "./watch-render.ts";
+import { type GithubRecords } from "./watch-pull-request.ts";
+export type { GithubRecords } from "./watch-pull-request.ts";
+import { type PrRepository } from "./watch-pr-identity.ts";
+type Fields = Readonly<Record<string, unknown>>;
 export declare function activityOf(line: string): WatchItem[];
 export interface TurnRecords {
     readonly key: string;
@@ -10,7 +16,11 @@ export interface TurnRecords {
 export declare function turnOf(records: TurnRecords): WatchTurn;
 export declare function decisionCommands(decision: unknown, client: string): WatchDecision;
 export interface WatchInputs {
+    readonly queue?: Fields;
+    readonly repository?: PrRepository | null;
     readonly workflows: readonly string[];
+    readonly workflowRefusals?: readonly WorkflowRefusal[];
+    readonly workflowStages?: WorkflowStages;
     readonly summaries?: readonly unknown[];
     readonly home: string;
     readonly client: string;
@@ -22,8 +32,4 @@ export interface WatchInputs {
     readonly turns: readonly WatchTurn[];
     readonly githubRecords: readonly GithubRecords[];
 }
-export interface GithubRecords {
-    readonly started: unknown;
-    readonly result: unknown;
-}
 export declare function watchModel(inputs: WatchInputs): WatchModel;