@knpkv/herdr-work 0.10.0 → 0.12.0

package/dist/view.js

@@ -1,16 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, StateLabel, Text } from "@knpkv/rly/primitives";
-import { DecisionBar, Hero, Region, StageRail, TimelineRow } from "@knpkv/rly/patterns";
+import { Icon } from "@knpkv/rly/foundations";
+import { DecisionBar, Hero, HeroWord, Region } from "@knpkv/rly/patterns";
 import { useEffect, useRef, useState } from "react";
-import { activityShownOf, finishedNotShown, goalsNotShown } from "./model.js";
+import { activityShownOf } from "./model.js";
 import { decodeWorkBoardNavigationGoal, encodeWorkBoardNavigationGoal } from "./navigation.js";
 import { workRequestClockText, workRequestDecidability } from "./request-decision.js";
 import { displayStateOf, observedFor } from "./display-state.js";
-import { workTriage, workTriageGroups, workTriageGroupTitle, workTriageSentence } from "./work-triage.js";
+import { workGoalFinishedAt, workTriage, workTriageGroups, workTriageGroupTitle, workTriageSentence } from "./work-triage.js";
 /** The request clock's wording ("52s", "4m 12s", "11m", "expiring"), shared with hosts that show the same clocks. */
 export { workRequestClockText } from "./request-decision.js";
 const windows = ["now", "day", "week", "month"];
-const stageOrder = ["local", "review", "pull_request", "merged", "deployed"];
 const initialVisibleGoalCount = 10;
 const selectedGoalFragment = "work-selected-goal";
 const goalStates = [
@@ -67,17 +67,30 @@ const agentStatusLabel = {
     gone: "gone"
 };
 const deliveryLabel = {
-    local: "Local",
-    review: "Review",
+    local: "In progress",
+    review: "In review",
     pull_request: "Pull request",
     merged: "Merged",
     deployed: "Deployed"
 };
 const reviewPresentation = {
-    not_requested: { label: "Not requested", tone: "neutral" },
-    requested: { label: "Requested", tone: "caution" },
-    changes_requested: { label: "Changes requested", tone: "critical" },
-    approved: { label: "Approved", tone: "positive" }
+    not_requested: { label: "Not requested", evidence: "no review yet", tone: "neutral" },
+    requested: { label: "Requested", evidence: "review requested", tone: "caution" },
+    changes_requested: { label: "Changes requested", evidence: "changes requested", tone: "critical" },
+    approved: { label: "Approved", evidence: "approved", tone: "positive" }
+};
+const checksPresentation = {
+    none: { label: "no checks", tone: "neutral" },
+    pending: { label: "checks running", tone: "progress" },
+    passing: { label: "checks passing", tone: "positive" },
+    failing: { label: "checks failing", tone: "critical" }
+};
+const stateIcon = {
+    neutral: "minus",
+    positive: "check",
+    critical: "alert",
+    caution: "clock",
+    progress: "loader"
 };
 const requestPresentation = {
     open: { label: "Open", tone: "caution" },
@@ -89,6 +102,17 @@ const formatTimestamp = (timestamp) => new Intl.DateTimeFormat("en-GB", {
     dateStyle: "medium",
     timeStyle: "short"
 }).format(timestamp);
+/** The board's timestamp formatter also supplies compact clocks. */
+const formatClock = (timestamp) => formatTimestamp(timestamp).split(", ").at(-1) ?? formatTimestamp(timestamp);
+const ageOf = (timestamp, asOf) => {
+    const minutes = Math.max(0, Math.floor((asOf - timestamp) / 60_000));
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (minutes < 1_440)
+        return `${Math.floor(minutes / 60)}h ago`;
+    const days = Math.floor(minutes / 1_440);
+    return `${days} ${days === 1 ? "day" : "days"} ago`;
+};
 const formatSpend = (goal) => goal.spend === null
     ? "Not recorded"
     : new Intl.NumberFormat("en", {
@@ -102,12 +126,6 @@ const blockersFor = (goal) => {
 };
 const activityFor = (goal) => goal.activity ?? [];
 const requestsFor = (goal) => goal.requests ?? [];
-const hierarchyLabel = (goal) => {
-    const hierarchy = goal.agentHierarchy;
-    if (hierarchy === undefined || hierarchy === null)
-        return "No agent hierarchy recorded";
-    return `${hierarchy.agent.host} / ${hierarchy.agent.name}`;
-};
 /** Renders the persisted approval deep link after its origin is bound at ingress. */
 const exactLink = (target, label) => (_jsx("a", { className: "work-exact-link", href: target.url, children: label }));
 /** Renders the persisted review destination without rewriting its credential-free URL. */
@@ -118,24 +136,37 @@ const reviewLabel = (review) => {
     }
     return (_jsx(StateLabel, { label: reviewPresentation[review.state].label, size: "compact", tone: reviewPresentation[review.state].tone }));
 };
-/** Delivery as words: past stages are done, the current one is "now" in the goal's state ink. */
-const stagesFor = (goal, shown) => {
-    const current = stageOrder.indexOf(goal.delivery);
-    return stageOrder.map((stage, index) => ({
-        id: `${goal.id}-${stage}`,
-        name: deliveryLabel[stage],
-        state: index < current ? "done" : index === current ? "now" : "not yet",
-        tone: index === current ? displayPresentation[shown].tone : "neutral"
-    }));
+/** PR delivery includes review; local work includes it only when recorded. Abandoned work stops at its last step. */
+const GoalProgress = ({ goal, observed }) => {
+    const shown = observed?.displayState ?? goal.state;
+    const merged = observed?.pullRequest?.fact.state === "merged" || goal.delivery === "merged";
+    const hasPullRequest = merged || observed?.pullRequest != null || goal.delivery === "pull_request";
+    const hasReview = hasPullRequest ||
+        goal.delivery === "review" ||
+        shown === "review" ||
+        (goal.review != null && goal.review.state !== "not_requested");
+    const finished = !hasPullRequest && (shown === "completed" || shown === "deployed");
+    const names = hasReview
+        ? ["Planned", "In progress", "In review", hasPullRequest ? "Merged" : "Done"]
+        : ["Planned", "In progress", "Done"];
+    const finalStep = names.length - 1;
+    const current = merged || finished ? finalStep : hasReview ? 2 : shown === "planned" ? 0 : 1;
+    const abandoned = shown === "abandoned";
+    return (_jsxs("section", { "aria-labelledby": "work-delivery-title", className: "work-delivery", children: [_jsx("h3", { className: "work-group-title", id: "work-delivery-title", children: "Delivery" }), _jsx("ol", { "aria-label": `Delivery of ${goal.title}`, className: "work-row-progress", "data-steps": names.length, role: "list", children: names.map((name, index) => (_jsxs("li", { "aria-current": !abandoned && index === current ? "step" : undefined, "aria-label": abandoned && index === current ? `${name}, abandoned here` : undefined, "data-reached": index < current || (!abandoned && index === current), "data-stopped": abandoned && index === current, "data-tone": displayPresentation[shown].tone, children: [_jsx("span", { "aria-hidden": "true", className: "work-step-number", children: index + 1 }), _jsx("span", { className: "work-step-name", children: name }), abandoned && index === current ? (_jsx("span", { className: "work-step-status", children: "Abandoned" })) : !abandoned && index === current && current !== finalStep ? (_jsx(StateLabel, { icon: stateIcon[displayPresentation[shown].tone], label: "Now", size: "compact", tone: displayPresentation[shown].tone })) : (_jsx("span", { className: "work-step-status", children: index < current || (!abandoned && index === current) ? "Done" : "Not yet" }))] }, name))) }), hasPullRequest ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: "No pull request" }))] }));
+};
+/** CI and review come only from an observed PR. Its confirmation time says when those facts were last read. */
+const GoalEvidence = ({ goal, observed }) => {
+    const pullRequest = observed?.pullRequest;
+    if (pullRequest == null && goal.delivery !== "pull_request" && goal.delivery !== "merged")
+        return null;
+    const ci = pullRequest == null
+        ? { label: "checks unknown", tone: "neutral" }
+        : checksPresentation[pullRequest.fact.checks];
+    const review = pullRequest == null
+        ? { evidence: "review unknown", tone: "neutral" }
+        : reviewPresentation[pullRequest.fact.review];
+    return (_jsxs("div", { className: "work-row-evidence", children: [_jsxs("span", { className: "work-evidence-chip", children: [_jsx(StateLabel, { className: "work-ci-fact", icon: stateIcon[ci.tone], label: ci.label, size: "compact", tone: ci.tone }), _jsx("span", { className: "work-row-read", children: pullRequest == null ? (" · Not read") : (_jsxs(_Fragment, { children: [observed?.unknown?.source === "github" ? " · last read " : " · read ", _jsx("time", { dateTime: new Date(pullRequest.confirmedAt).toISOString(), title: formatTimestamp(pullRequest.confirmedAt), children: formatClock(pullRequest.confirmedAt) })] })) })] }), _jsxs("span", { className: "work-evidence-chip", children: [_jsx(StateLabel, { className: "work-review-fact", icon: stateIcon[review.tone], label: review.evidence, size: "compact", tone: review.tone }), _jsx("span", { className: "work-row-read", children: pullRequest == null ? (" · Not read") : (_jsxs(_Fragment, { children: [observed?.unknown?.source === "github" ? " · last read" : " · read", " ", _jsx("time", { dateTime: new Date(pullRequest.confirmedAt).toISOString(), title: formatTimestamp(pullRequest.confirmedAt), children: formatClock(pullRequest.confirmedAt) })] })) })] })] }));
 };
-/**
- * The repository as a row names it: its last path segment ("npm" for a checkout at
- * /home/…/knpkv.dev/npm, or for "knpkv/npm"). The detail keeps the full value.
- */
-const repositoryName = (repository) => repository
-    .split("/")
-    .filter((segment) => segment.length > 0)
-    .at(-1) ?? repository;
 const rowCaption = (goal, observed, decisions) => {
     const open = requestsFor(goal).filter(({ state }) => state === "open");
     if (open.length > 0) {
@@ -151,16 +182,14 @@ const rowCaption = (goal, observed, decisions) => {
             : `, ${workRequestClockText(soonest.expiresAt, decisions.now)}${soonest.expiresAt > decisions.now ? " left" : ""}`;
         return {
             blocking: false,
-            text: open.length === 1
-                ? `Needs approval: ${open[0]?.summary ?? ""}${clock}`
-                : `${open.length} requests need approval${clock}`
+            text: open.length === 1 ? `${open[0]?.summary ?? ""}${clock}` : `${open.length} requests need approval${clock}`
         };
     }
     const blockers = blockersFor(goal);
     if (blockers.length > 0)
         return { blocking: true, text: blockers[0]?.summary ?? "Blocked" };
     if (observed?.stale === true && observed.agent !== null) {
-        return { blocking: false, text: `Owner gone since ${formatTimestamp(observed.agent.observedAt)}` };
+        return { blocking: false, text: `Owner gone since ${formatClock(observed.agent.observedAt)}` };
     }
     if (observed?.unknown != null) {
         return {
@@ -174,24 +203,29 @@ const rowCaption = (goal, observed, decisions) => {
     return { blocking: false, text: `${goal.owner.name}, ${deliveryLabel[goal.delivery].toLowerCase()}` };
 };
 /** The caption under the hero: the request waiting longest, or the latest change. */
-const summaryCaption = (summary, tense) => {
+const summaryCaption = (summary, tense, snapshot) => {
     switch (summary._tag) {
         case "Attention":
             return summary.oldestRequest === null
                 ? undefined
-                : `${tense === "present" ? "Waiting longest" : "Waiting longest then"}: ${summary.oldestRequest.request.summary} on ${summary.oldestRequest.goal.title}, requested ${formatTimestamp(summary.oldestRequest.request.requestedAt)}.`;
-        case "Clear":
-            return summary.latest === null
-                ? undefined
-                : `${summary.moving} moving. Last change: ${summary.latest.title}, ${formatTimestamp(summary.latest.updatedAt)}.`;
+                : `${tense === "present" ? "Waiting longest" : "Waiting longest then"}: ${summary.oldestRequest.request.summary} on ${summary.oldestRequest.goal.title}${tense === "past" ? "." : `, requested ${ageOf(summary.oldestRequest.request.requestedAt, snapshot.asOf)}.`}`;
+        case "Clear": {
+            const rows = workTriage(snapshot).rows;
+            const planned = rows.filter((row) => row.group === "planned").length;
+            const finished = rows
+                .filter((row) => row.group === "done" || row.group === "earlier")
+                .map(({ goal }) => ({ goal, at: workGoalFinishedAt(goal, observedFor(snapshot, goal.id)) }))
+                .toSorted((left, right) => right.at - left.at)[0];
+            return `${summary.moving} ${summary.moving === 1 ? "goal" : "goals"} ${tense === "past" ? "were " : ""}moving, ${planned} planned.${finished === undefined ? "" : ` Last finished: ${finished.goal.title}, ${ageOf(finished.at, snapshot.asOf)}.`}`;
+        }
         case "Empty":
-            return "Delegate work to an agent and its goal appears here once the hub admits it.";
+            return undefined;
     }
 };
 /**
  * What the timeline shows for one goal, newest first: the owner's recorded activity, plus what the
  * reconciler observed (a pull request, the owner's agent) and any source it could not read. Observed
- * events carry their provenance as a shape and words; an unreadable source is drawn hatched.
+ * events keep source detail and provenance in their accessible descriptions beside terse visible titles.
  */
 const timelineFor = (goal, observed) => {
     const recorded = activityFor(goal).map((entry) => ({
@@ -199,7 +233,7 @@ const timelineFor = (goal, observed) => {
         dateTime: new Date(entry.occurredAt).toISOString(),
         detail: activityKindLabel[entry.kind],
         id: entry.id,
-        time: formatTimestamp(entry.occurredAt),
+        time: formatClock(entry.occurredAt),
         title: entry.summary
     }));
     const seen = [];
@@ -212,7 +246,7 @@ const timelineFor = (goal, observed) => {
             detail: `${checksLabel[fact.checks]}, last read ${formatTimestamp(confirmedAt)}`,
             id: `observed-pull-request-${fact.repository}-${fact.pullRequest}`,
             provenance: { kind: "auto", label: "Observed on GitHub" },
-            time: formatTimestamp(at),
+            time: formatClock(at),
             title: `Pull request #${fact.pullRequest} ${pullRequestStateLabel[fact.state]}`
         });
     }
@@ -224,7 +258,7 @@ const timelineFor = (goal, observed) => {
             detail: `${fact.host}, last read ${formatTimestamp(confirmedAt)}`,
             id: `observed-agent-${fact.host}-${fact.agentId}`,
             provenance: { kind: "auto", label: "Observed in herdr" },
-            time: formatTimestamp(observedAt),
+            time: formatClock(observedAt),
             title: `Agent ${agentStatusLabel[fact.status]}`
         });
     }
@@ -239,13 +273,20 @@ const timelineFor = (goal, observed) => {
                 kind: "unknown",
                 label: lastGoodAt === null ? "Never read" : `Last good read ${formatTimestamp(lastGoodAt)}`
             },
-            time: formatTimestamp(since),
+            time: formatClock(since),
             title: `Couldn't read ${sourceLabel[source]}`
         });
     }
     return [...recorded, ...seen].toSorted((left, right) => Date.parse(right.dateTime) - Date.parse(left.dateTime));
 };
-const requestDecisionFor = (request, decisions) => {
+const requestDecisionFor = (request, decisions, historical) => {
+    // A recorded open request is never a live approval target; no current queue, clock or handler reaches this bar.
+    if (historical && request.state === "open" && request.approvalTarget !== null) {
+        return {
+            _tag: "Bar",
+            bar: (_jsx(DecisionBar, { onApprove: () => undefined, onReject: () => undefined, state: { _tag: "off", reason: "Decisions are off in the past." }, target: request.summary }))
+        };
+    }
     const decidability = workRequestDecidability(request, decisions);
     if (decidability._tag === "Elsewhere" || decisions === undefined)
         return { _tag: "Elsewhere" };
@@ -284,17 +325,21 @@ const requestDecisionFor = (request, decisions) => {
     };
 };
 /** One request in a goal's detail: its title once, then the bar, the hub link or the outcome. */
-const RequestItem = ({ decisions, externalLinks, request }) => {
-    const decision = requestDecisionFor(request, externalLinks === "enabled" ? decisions : undefined);
+const RequestItem = ({ asOf, decisions, externalLinks, historical, request }) => {
+    const decision = requestDecisionFor(request, externalLinks === "enabled" ? decisions : undefined, historical && externalLinks === "enabled");
     const presentation = requestPresentation[request.state];
-    return (_jsxs("li", { children: [decision._tag === "Bar" ? null : (_jsxs("span", { className: "work-request-heading", children: [_jsx(Text, { children: request.summary }), _jsx("span", { className: "work-row-state", "data-tone": presentation.tone, children: presentation.label })] })), decision._tag === "Bar" ? (decision.bar) : decision._tag === "Settled" ? (decision.refusal === null ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: decision.refusal }))) : request.state !== "open" ? null : request.approvalTarget === null ? (_jsx(Text, { tone: "secondary", variant: "meta", children: "No approval link recorded." })) : externalLinks === "disabled" ? (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Approve this on the hub (", request.approvalTarget.host, ")."] })) : (exactLink(request.approvalTarget, `Approve on ${request.approvalTarget.host}`)), decision._tag === "Elsewhere" ? null : (_jsx("p", { "aria-atomic": "true", className: "work-request-announcement", role: "status", children: decision._tag === "Settled" ? decision.announcement : "" }))] }));
+    return (_jsxs("li", { children: [decision._tag === "Bar" ? null : (_jsxs("span", { className: "work-request-heading", children: [_jsx(StateLabel, { className: "work-row-state", icon: request.state === "rejected" ? "close" : stateIcon[presentation.tone], label: presentation.label, size: "compact", tone: presentation.tone }), _jsx(Text, { as: "strong", variant: "meta", children: request.summary }), request.state === "open" ? null : (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["requested ", ageOf(request.requestedAt, asOf)] }))] })), request.state === "open" ? (_jsxs("div", { className: "work-request-meta", children: [decision._tag === "Bar" ? _jsx(StateLabel, { icon: "clock", label: "Open", size: "compact", tone: "caution" }) : null, _jsxs(Text, { tone: "secondary", variant: "meta", children: ["requested ", ageOf(request.requestedAt, asOf)] })] })) : null, decision._tag === "Bar" ? (decision.bar) : decision._tag === "Settled" ? (decision.refusal === null ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: decision.refusal }))) : request.state !== "open" ? null : request.approvalTarget === null ? (_jsx(Text, { tone: "secondary", variant: "meta", children: "No approval link recorded." })) : externalLinks === "disabled" ? (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Approve this on the hub (", request.approvalTarget.host, ")."] })) : (exactLink(request.approvalTarget, `Approve on ${request.approvalTarget.host}`)), decision._tag === "Elsewhere" ? null : (_jsx("p", { "aria-atomic": "true", className: "work-request-announcement", role: "status", children: decision._tag === "Settled" ? decision.announcement : "" }))] }));
 };
 /** Everything about one goal, in reading order: what it is, where it is, what blocks it, what happened. */
-const GoalDetail = ({ decisions, externalLinks, goal, snapshot }) => {
+const GoalDetail = ({ closeControl, decisions, externalLinks, goal, snapshot }) => {
     const family = familyForGoal(snapshot, goal.id);
     const observed = observedFor(snapshot, goal.id);
     const shown = observed?.displayState ?? goal.state;
     const activity = timelineFor(goal, observed);
+    const readDay = new Date(snapshot.observedAt).toDateString();
+    const agent = goal.agentHierarchy?.agent;
+    const agentName = agent?.name ?? goal.owner.name;
+    const agentIdentity = agent === undefined ? agentName : `${agent.host} / ${agentName}`;
     // Only the live window carries the overlay; there "nothing observed" is itself a reading.
     const overlay = snapshot.observed !== undefined;
     // A goal-level approval target (older checkpoints carry one without requests); skipped when a
@@ -304,16 +349,23 @@ const GoalDetail = ({ decisions, externalLinks, goal, snapshot }) => {
         requestsFor(goal).some(({ approvalTarget }) => approvalTarget?.url === goal.approvalTarget?.url)
         ? null
         : goal.approvalTarget;
-    return (_jsxs("div", { className: "work-detail", children: [_jsx(Text, { tone: "secondary", children: goal.detail }), _jsx(StageRail, { heading: `Delivery of ${goal.title}`, size: "words", stages: stagesFor(goal, shown) }), _jsxs("dl", { className: "work-facts", children: [_jsxs("div", { children: [_jsx("dt", { children: "State" }), _jsxs("dd", { children: [displayPresentation[shown].label, shown === goal.state ? null : (_jsxs(Text, { as: "p", className: "work-fact-note", tone: "secondary", variant: "meta", children: ["Observed; recorded as ", statePresentation[goal.state].label.toLowerCase()] }))] })] }), overlay ? (_jsxs("div", { children: [_jsx("dt", { children: "Pull request" }), _jsx("dd", { children: observed?.pullRequest == null
-                                    ? observed === null && snapshot.observedOmitted !== undefined
-                                        ? "Not in this read: live state was trimmed to the most recently updated goals"
-                                        : "None known"
-                                    : `#${observed.pullRequest.fact.pullRequest} ${pullRequestStateLabel[observed.pullRequest.fact.state]}, ${checksLabel[observed.pullRequest.fact.checks]}` })] })) : null, _jsxs("div", { children: [_jsx("dt", { children: "Owner" }), _jsx("dd", { children: goal.owner.name })] }), _jsxs("div", { children: [_jsx("dt", { children: "Agent" }), _jsxs("dd", { children: [hierarchyLabel(goal), goal.agentHierarchy?.agent.relationship === undefined || goal.agentHierarchy === null
+    return (_jsxs("div", { className: "work-detail", children: [_jsxs("div", { className: "work-detail-heading", children: [_jsx(Text, { as: "h3", variant: "card-title", children: goal.title }), _jsx(StateLabel, { icon: stateIcon[displayPresentation[shown].tone], label: displayPresentation[shown].label, size: "compact", tone: displayPresentation[shown].tone }), shown === goal.state ? null : (_jsxs(Text, { className: "work-fact-note", tone: "secondary", variant: "meta", children: ["Observed; recorded as ", statePresentation[goal.state].label.toLowerCase()] }))] }), observed?.stale === true && observed.agent !== null ? (_jsxs("p", { className: "work-note", "data-tone": "held", children: [_jsx("b", { children: "Owner gone" }), " since ", formatClock(observed.agent.observedAt), ": this unfinished goal has no live agent."] })) : null, _jsx(GoalProgress, { goal: goal, observed: observed }), overlay ? _jsx(GoalEvidence, { goal: goal, observed: observed }) : null, _jsxs("dl", { className: "work-facts", children: [_jsxs("div", { children: [_jsx("dt", { children: "Pull request" }), _jsxs("dd", { children: [observed?.pullRequest == null
+                                        ? observed === null && snapshot.observedOmitted !== undefined
+                                            ? "Not in this read: live state was trimmed to the most recently updated goals"
+                                            : "None yet"
+                                        : `#${observed.pullRequest.fact.pullRequest} ${pullRequestStateLabel[observed.pullRequest.fact.state]}${observed.stale ? `, ${checksLabel[observed.pullRequest.fact.checks]}` : ""}`, observed?.pullRequest == null ? null : (_jsx(Text, { as: "p", className: "work-fact-note", tone: "secondary", variant: "meta", children: "Observed on GitHub" }))] })] }), goal.review == null ? null : (_jsxs("div", { children: [_jsx("dt", { children: "Review" }), _jsxs("dd", { children: [reviewLabel(goal.review), overlay ? null : ", as recorded", goal.review?.url === null || goal.review?.url === undefined ? null : externalLinks ===
+                                        "disabled" ? null : (_jsxs(_Fragment, { children: [" ", reviewLink(goal.review.url)] })), goal.review?.summary === null || goal.review?.summary === undefined ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: goal.review.summary }))] })] })), _jsxs("div", { children: [_jsx("dt", { children: "Repository" }), _jsx("dd", { children: goal.repository.repository })] }), _jsxs("div", { children: [_jsx("dt", { children: "Branch" }), _jsx("dd", { children: goal.repository.branch })] }), goal.owner.name === agentName ? null : (_jsxs("div", { children: [_jsx("dt", { children: "Owner" }), _jsx("dd", { children: goal.owner.name })] })), _jsxs("div", { children: [_jsx("dt", { children: "Agent" }), _jsxs("dd", { children: [observed?.agent == null
+                                        ? `${agentIdentity}, as recorded`
+                                        : `${agentIdentity}, ${agentStatusLabel[observed.agent.fact.status]}${observed.agent.fact.status === "gone" ? ` since ${formatClock(observed.agent.observedAt)}` : ""}`, observed?.agent == null ? null : (_jsx(Text, { as: "p", className: "work-fact-note", tone: "secondary", variant: "meta", children: "Observed in herdr" })), goal.agentHierarchy?.agent.relationship === undefined || goal.agentHierarchy === null
                                         ? null
-                                        : `, ${goal.agentHierarchy.agent.relationship.relation} from ${goal.agentHierarchy.agent.relationship.parentAgentId}`] })] }), _jsxs("div", { children: [_jsx("dt", { children: "Repository" }), _jsxs("dd", { children: [goal.repository.repository, ", ", _jsx("code", { children: goal.repository.branch })] })] }), _jsxs("div", { children: [_jsx("dt", { children: "Review" }), _jsxs("dd", { children: [reviewLabel(goal.review), goal.review?.url === null || goal.review?.url === undefined ? null : externalLinks ===
-                                        "disabled" ? null : (_jsxs(_Fragment, { children: [" ", reviewLink(goal.review.url)] })), goal.review?.summary === null || goal.review?.summary === undefined ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: goal.review.summary }))] })] }), _jsxs("div", { children: [_jsx("dt", { children: "Spend" }), _jsx("dd", { children: formatSpend(goal) })] })] }), observed?.stale === true && observed.agent !== null ? (_jsxs("p", { className: "work-note", "data-tone": "held", children: [_jsx("b", { children: "Owner gone" }), " since ", formatTimestamp(observed.agent.observedAt), ": this unfinished goal has no live agent."] })) : null, observed?.unknown == null ? null : (_jsxs("p", { className: "work-note", "data-tone": "unknown", children: [_jsxs("b", { children: ["Couldn't read ", sourceLabel[observed.unknown.source]] }), " since ", formatTimestamp(observed.unknown.since), ":", " ", observed.unknown.reason, ".", " ", observed.unknown.lastGoodAt === null
+                                        : `, ${goal.agentHierarchy.agent.relationship.relation} from ${goal.agentHierarchy.agent.relationship.parentAgentId}`] })] }), goal.spend === null ? null : (_jsxs("div", { children: [_jsx("dt", { children: "Spend" }), _jsx("dd", { children: formatSpend(goal) })] }))] }), goal.detail === goal.title ? null : _jsx(Text, { tone: "secondary", children: goal.detail }), observed?.unknown == null ? null : (_jsxs("p", { className: "work-note", "data-tone": "unknown", children: [_jsxs("b", { children: ["Couldn't read ", sourceLabel[observed.unknown.source]] }), " since ", formatTimestamp(observed.unknown.since), ":", " ", observed.unknown.reason, ".", " ", observed.unknown.lastGoodAt === null
                         ? "It has never been read, so nothing here comes from it."
-                        : `Facts from it are as of ${formatTimestamp(observed.unknown.lastGoodAt)}.`] })), blockersFor(goal).map((blocker) => (_jsxs("p", { className: "work-note", "data-tone": "blocked", children: [_jsx("b", { children: "Blocked" }), " since ", formatTimestamp(blocker.since), ": ", blocker.summary] }, `${blocker.since}-${blocker.summary}`))), _jsxs("section", { "aria-labelledby": "work-requests-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-requests-title", children: "Requests" }), requestsFor(goal).length === 0 ? (_jsx(Text, { tone: "secondary", children: goal.requests === undefined ? "No requests recorded." : "No outstanding requests." })) : (_jsx("ul", { className: "work-detail-list", children: requestsFor(goal).map((request) => (_jsx(RequestItem, { decisions: decisions, externalLinks: externalLinks, request: request }, request.id))) }))] }), _jsxs("section", { "aria-labelledby": "work-activity-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-activity-title", children: "Activity" }), activityOmittedFor(snapshot, goal) === 0 ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: activityShownOf(goal.activity?.length ?? 0, activityOmittedFor(snapshot, goal)) })), activity.length === 0 ? (_jsx(Text, { tone: "secondary", children: goal.activity === undefined ? "No activity recorded." : "Activity is clear." })) : (_jsx("ol", { "aria-label": `Activity on ${goal.title}`, className: "work-activity", children: activity.map((event, index) => (_jsx(TimelineRow, { continued: index < activity.length - 1, event: event }, event.id))) }))] }), family === null ? null : (_jsxs("section", { "aria-labelledby": "work-family-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-family-title", children: "Superseded history" }), _jsxs("details", { className: "work-family-history", children: [_jsxs("summary", { children: ["Show ", family.superseded.length, " superseded"] }), _jsx("ul", { className: "work-detail-list", children: family.superseded.map((entry) => (_jsxs("li", { children: [_jsxs("span", { className: "work-request-heading", children: [_jsx(Text, { children: entry.title }), _jsx("span", { className: "work-row-state", "data-tone": statePresentation[entry.state].tone, children: statePresentation[entry.state].label })] }), _jsxs(Text, { tone: "secondary", variant: "meta", children: [entry.summary, ", ", formatTimestamp(entry.updatedAt)] }), blockersFor(entry).map((blocker) => (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Blocked since ", formatTimestamp(blocker.since), ": ", blocker.summary] }, `${blocker.since}-${blocker.summary}`))), entry.review === undefined || entry.review === null ? null : (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Review ", reviewPresentation[entry.review.state].label.toLowerCase(), entry.review.summary === null ? "" : `: ${entry.review.summary}`] }))] }, entry.id))) })] })] })), _jsxs("div", { className: "work-links", children: [goal.connectTarget === null ? (_jsx(Text, { tone: "secondary", children: "No exact Connect target recorded." })) : externalLinks === "disabled" ? (_jsx(Text, { tone: "secondary", variant: "meta", children: "Connect target recorded." })) : (_jsx("a", { className: "work-connect-link", href: goal.connectTarget.url, children: "Open the agent in Connect" })), goalApproval === null ? null : externalLinks === "disabled" ? (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Approval target recorded on ", goalApproval.host, "."] })) : (exactLink(goalApproval, `Open ${goalApproval.host} approval`))] })] }));
+                        : `Facts from it are as of ${formatTimestamp(observed.unknown.lastGoodAt)}.`] })), blockersFor(goal).map((blocker) => (_jsxs("p", { className: "work-note", "data-tone": "blocked", children: [_jsx("b", { children: "Blocked" }), " since ", formatTimestamp(blocker.since), ": ", blocker.summary] }, `${blocker.since}-${blocker.summary}`))), _jsxs("section", { "aria-labelledby": "work-requests-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-requests-title", children: "Requests" }), requestsFor(goal).length === 0 ? (_jsx(Text, { tone: "secondary", children: goal.requests === undefined ? "No requests recorded." : "No outstanding requests." })) : (_jsx("ul", { className: "work-detail-list", children: requestsFor(goal).map((request) => (_jsx(RequestItem, { asOf: snapshot.asOf, decisions: decisions, externalLinks: externalLinks, historical: snapshot.window !== "now", request: request }, request.id))) }))] }), _jsxs("section", { "aria-labelledby": "work-activity-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-activity-title", children: "Activity" }), activityOmittedFor(snapshot, goal) === 0 ? null : (_jsx(Text, { tone: "secondary", variant: "meta", children: activityShownOf(goal.activity?.length ?? 0, activityOmittedFor(snapshot, goal)) })), activity.length === 0 ? (_jsx(Text, { tone: "secondary", children: goal.activity === undefined ? "No activity recorded." : "Activity is clear." })) : (_jsx("ol", { "aria-label": `Activity on ${goal.title}`, className: "work-activity", children: activity.map((event) => {
+                            const descriptionId = `work-activity-${goal.id}-${event.id}`;
+                            const eventAt = Date.parse(event.dateTime);
+                            const date = new Date(eventAt).toDateString() === readDay ? null : formatTimestamp(eventAt);
+                            return (_jsxs("li", { "aria-describedby": descriptionId, className: "work-activity-row", "data-rly-timeline-event-id": event.id, children: [_jsx("time", { dateTime: event.dateTime, children: event.time }), _jsx("span", { children: event.title }), _jsxs("span", { className: "work-accessible-detail", "data-rly-timeline-provenance": event.provenance?.kind, id: descriptionId, children: [event.detail, event.provenance === undefined ? "" : `. ${event.provenance.label}`, date === null ? "" : `. ${date}`] })] }, event.id));
+                        }) }))] }), family === null ? null : (_jsxs("section", { "aria-labelledby": "work-family-title", className: "work-detail-section", children: [_jsx("h3", { className: "work-group-title", id: "work-family-title", children: "Superseded history" }), _jsxs("details", { className: "work-family-history", children: [_jsxs("summary", { children: ["Show ", family.superseded.length, " superseded"] }), _jsx("ul", { className: "work-detail-list", children: family.superseded.map((entry) => (_jsxs("li", { children: [_jsxs("span", { className: "work-request-heading", children: [_jsx(Text, { children: entry.title }), _jsx("span", { className: "work-row-state", "data-tone": statePresentation[entry.state].tone, children: statePresentation[entry.state].label })] }), _jsxs(Text, { tone: "secondary", variant: "meta", children: [entry.summary, ", ", formatTimestamp(entry.updatedAt)] }), blockersFor(entry).map((blocker) => (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Blocked since ", formatTimestamp(blocker.since), ": ", blocker.summary] }, `${blocker.since}-${blocker.summary}`))), entry.review === undefined || entry.review === null ? null : (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Review ", reviewPresentation[entry.review.state].label.toLowerCase(), entry.review.summary === null ? "" : `: ${entry.review.summary}`] }))] }, entry.id))) })] })] })), _jsxs("div", { className: "work-links", children: [goal.connectTarget === null ? (_jsx(Text, { tone: "secondary", children: "No exact Connect target recorded." })) : externalLinks === "disabled" ? (_jsx(Text, { tone: "secondary", variant: "meta", children: "Connect target recorded." })) : (_jsxs("a", { className: "work-connect-link", href: `${goal.connectTarget.url}&open=stage`, children: [observed?.stale === true ? "Find" : "Open", " ", agentName, " in Connect", _jsx(Icon, { decorative: true, name: "arrow-right", size: "small" })] })), goalApproval === null ? null : externalLinks === "disabled" ? (_jsxs(Text, { tone: "secondary", variant: "meta", children: ["Approval target recorded on ", goalApproval.host, "."] })) : (exactLink(goalApproval, `Open ${goalApproval.host} approval`)), closeControl] })] }));
 };
 const activityKindLabel = {
     note: "Note",
@@ -326,25 +378,19 @@ const activityKindLabel = {
 const snapshotFor = (snapshots, window) => snapshots[window];
 /** How many older activities the snapshot left out of this goal's timeline. */
 const activityOmittedFor = (snapshot, goal) => snapshot.activityOmitted?.[goal.id] ?? 0;
-/**
- * The board header's line, as whole sentences joined by a space, so each piece ends in exactly one period:
- * the window and its time, then what the live window could not show, then any finished or older goals it left out.
- */
-const headerSentences = (window, snapshot) => {
-    const when = `${window === "now" ? "Live" : windowLabel[window]}, as of ${formatTimestamp(snapshot.asOf)}.`;
+/** Header read time and live-read limitations. Omitted goal counts belong to the board. */
+const headerSentences = (window, snapshot, host) => {
+    const when = `Durable goals${host === undefined ? "" : ` on ${host}`}, read ${formatClock(snapshot.observedAt)}.`;
     const live = window !== "now"
         ? []
         : snapshot.observed === undefined
             ? [
-                "Live state not available: this hub sends no observed facts (its herdr-work predates the reconciler, or the overlay did not fit the response), so states are as recorded.",
-                "Update herdr-work on the hub to see them."
+                "Live state not available: this hub sends no observed facts, so owner and pull request lines show only what each goal recorded. Update herdr-work on the hub to see them."
             ]
             : snapshot.observedOmitted === undefined
                 ? []
                 : [`Live state shown for the most recently updated goals; ${String(snapshot.observedOmitted)} left out.`];
-    const finished = snapshot.finishedOmitted === undefined ? [] : [`${finishedNotShown(snapshot.finishedOmitted)}.`];
-    const cut = snapshot.goalsOmitted === undefined ? [] : [`${goalsNotShown(snapshot.goalsOmitted)}.`];
-    return [when, ...live, ...finished, ...cut];
+    return [when, ...live];
 };
 const familyForGoal = (snapshot, goalId) => (snapshot.families ?? []).find((group) => group.canonicalGoalId === goalId) ?? null;
 const familyLabelForGoal = (snapshot, goal) => {
@@ -358,8 +404,9 @@ const withFragment = (href, fragment) => {
     const fragmentIndex = href.indexOf("#");
     return `${fragmentIndex === -1 ? href : href.slice(0, fragmentIndex)}#${fragment}`;
 };
-export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId, initialWindow = "now", navigation, snapshots }) => {
-    const [window, setWindow] = useState(initialWindow);
+export const WorkBoard = ({ decisions, externalLinks = "enabled", host, initialGoalId, initialWindow = "now", navigation, snapshots }) => {
+    const [localWindow, setWindow] = useState(initialWindow);
+    const window = navigation === undefined ? localWindow : initialWindow;
     const snapshot = snapshotFor(snapshots, window);
     const directInitialGoal = snapshot.goals.find(({ id }) => id === initialGoalId);
     const boardNavigation = directInitialGoal === undefined ? decodeWorkBoardNavigationGoal(initialGoalId ?? null) : null;
@@ -372,15 +419,24 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
         ? requestedInitialSelectedGoal
         : undefined;
     const initialSelectedId = initialSelectedGoal?.id ?? null;
-    const [selectedId, setSelectedId] = useState(initialSelectedId);
-    const [detailsOpen, setDetailsOpen] = useState(initialSelectedGoal !== undefined &&
-        (boardNavigation?.detailsOpen ?? (initialGoalId !== undefined && initialGoalId !== null)));
-    const [statusFilter, setStatusFilter] = useState(initialStatusFilter);
-    const [visibleGoalCount, setVisibleGoalCount] = useState(boardNavigation?.visibleGoalCount ?? initialVisibleGoalCount);
+    const initialDetailsOpen = initialSelectedGoal !== undefined &&
+        (boardNavigation?.detailsOpen ?? (initialGoalId !== undefined && initialGoalId !== null));
+    const [localSelectedId, setSelectedId] = useState(initialSelectedId);
+    const [localDetailsOpen, setDetailsOpen] = useState(initialDetailsOpen);
+    const [localStatusFilter, setStatusFilter] = useState(initialStatusFilter);
+    const [localVisibleGoalCount, setVisibleGoalCount] = useState(boardNavigation?.visibleGoalCount ?? initialVisibleGoalCount);
+    const selectedId = navigation === undefined ? localSelectedId : initialSelectedId;
+    const detailsOpen = navigation === undefined ? localDetailsOpen : initialDetailsOpen;
+    const statusFilter = navigation === undefined ? localStatusFilter : initialStatusFilter;
+    const visibleGoalCount = navigation === undefined ? localVisibleGoalCount : (boardNavigation?.visibleGoalCount ?? initialVisibleGoalCount);
     const detailsRef = useRef(null);
     const selectedLinkRowRef = useRef(null);
     const selectedRowRef = useRef(null);
+    const previousDetailsOpen = useRef(detailsOpen);
     const triage = workTriage(snapshot);
+    const finishedGoalCount = triage.rows.filter(({ displayState }) => displayState === "completed" || displayState === "deployed" || displayState === "abandoned").length;
+    const hasGoalOmissions = (snapshot.goalsOmitted ?? 0) > 0 || (snapshot.finishedOmitted ?? 0) > 0;
+    const finishedCount = finishedGoalCount > 0 || (snapshot.finishedOmitted ?? 0) > 0 ? (_jsxs(Text, { className: "work-finished-count", tone: "secondary", variant: "meta", children: [finishedGoalCount, " finished ", finishedGoalCount === 1 ? "goal" : "goals", (snapshot.finishedOmitted ?? 0) > 0 ? ` · ${snapshot.finishedOmitted} older not shown` : null] })) : null;
     // The overlay by goal, built once per snapshot: rows, captions and filters all read it.
     const overlay = new Map((snapshot.observed ?? []).map((entry) => [entry.goalId, entry]));
     const observedOf = (goal) => overlay.get(goal.id) ?? null;
@@ -388,9 +444,7 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
     // A historical window is the state as of its time; say so, never in the present tense.
     const tense = window === "now" ? "present" : "past";
     const sentence = workTriageSentence(triage.summary, tense);
-    const heroFact = tense === "present"
-        ? sentence
-        : `As of ${formatTimestamp(snapshot.asOf)}, ${sentence.charAt(0).toLowerCase()}${sentence.slice(1)}`;
+    const heroFact = triage.summary._tag === "Attention" && triage.summary.blocked > 0 ? (_jsxs(_Fragment, { children: [sentence.slice(0, -`${triage.summary.blocked} blocked`.length), _jsx(HeroWord, { tone: "blocked", children: `${triage.summary.blocked} blocked` })] })) : tense === "past" && triage.summary._tag === "Attention" ? (_jsxs(_Fragment, { children: [sentence.split("needed you")[0], _jsx(HeroWord, { tone: "held", children: "needed you" })] })) : triage.summary._tag === "Empty" && tense === "past" ? ("Nothing needed you") : (sentence);
     const groupById = new Map(triage.rows.map((row) => [row.goal.id, row.group]));
     const ordered = triage.rows.map((row) => row.goal);
     // Filters match what each row shows: the observed state where there is one.
@@ -408,24 +462,42 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
             detailsRef.current?.querySelector("h2")?.focus();
     }, [detailsOpen, selectedId]);
     useEffect(() => {
+        const closing = previousDetailsOpen.current && !detailsOpen;
+        previousDetailsOpen.current = detailsOpen;
         if (navigation !== undefined &&
             !detailsOpen &&
             selectedId !== null &&
-            document.location.hash === `#${selectedGoalFragment}`) {
+            (closing || document.location.hash === `#${selectedGoalFragment}`)) {
             selectedLinkRowRef.current?.focus();
         }
     }, [detailsOpen, navigation, selectedId]);
     useEffect(() => {
-        if (selectedId === null || selectedFilteredGoalIndex !== -1)
+        if (navigation !== undefined || selectedId === null || selectedFilteredGoalIndex !== -1)
             return;
         setDetailsOpen(false);
         setSelectedId(null);
         setVisibleGoalCount(initialVisibleGoalCount);
-    }, [selectedFilteredGoalIndex, selectedId]);
+    }, [navigation, selectedFilteredGoalIndex, selectedId]);
     const goalRow = (goal) => {
-        const caption = rowCaption(goal, observedOf(goal), externalLinks === "enabled" ? decisions : undefined);
-        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "work-row-title", children: [_jsxs("span", { className: "work-row-meta", children: [repositoryName(goal.repository.repository), ", ", _jsx("code", { children: goal.repository.branch })] }), goal.title] }), _jsx("span", { className: "work-row-state", "data-tone": displayPresentation[shownOf(goal)].tone, children: displayPresentation[shownOf(goal)].label }), _jsxs("span", { className: "work-row-caption", "data-blocking": caption.blocking, children: [caption.text, familyLabelForGoal(snapshot, goal) === null ? null : `, ${familyLabelForGoal(snapshot, goal)}`] })] }));
-        return navigation === undefined ? (_jsx("button", { "aria-controls": detailsOpen && selected?.id === goal.id ? "work-goal-details" : undefined, "aria-expanded": detailsOpen && selected?.id === goal.id, "aria-pressed": selected?.id === goal.id, className: "work-board-row", id: selected?.id === goal.id ? selectedGoalFragment : undefined, onClick: () => {
+        const observed = observedOf(goal);
+        const shown = shownOf(goal);
+        const caption = rowCaption(goal, observed, externalLinks === "enabled" && window === "now" ? decisions : undefined);
+        const open = requestsFor(goal).filter((request) => request.state === "open");
+        const host = observed?.agent?.fact.host ?? goal.connectTarget?.host ?? goal.agentHierarchy?.agent.host;
+        const agentName = goal.agentHierarchy?.agent.name ?? goal.owner.name;
+        const pr = observed?.pullRequest?.fact;
+        const terminal = shown === "completed" || shown === "deployed" || shown === "abandoned";
+        const stage = pr === undefined
+            ? `Stage: ${deliveryLabel[goal.delivery]}`
+            : `PR #${pr.pullRequest} ${pullRequestStateLabel[pr.state]}, ${checksLabel[pr.checks]}${pr.review === "not_requested" ? "" : ` · Review ${reviewPresentation[pr.review].label.toLowerCase()}`}`;
+        const metadata = goal.owner.name === "Unassigned"
+            ? `Unassigned · ${goal.repository.repository}`
+            : terminal
+                ? `${agentName} · ${shown === "abandoned" ? "" : goal.delivery === "merged" || pr?.state === "merged" ? "Merged · " : "Done · "}${displayPresentation[shown].label} ${ageOf(pr?.closedAt ?? goal.updatedAt, snapshot.asOf)}`
+                : `${agentName}${host === undefined ? "" : ` on ${host}`} · ${stage}${blockersFor(goal).length === 0 || open.length > 0 ? "" : ` · ${blockersFor(goal)[0]?.summary ?? "Blocked"}`}`;
+        const hasCaption = open.length > 0 || observed?.stale === true || observed?.unknown != null;
+        const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "work-row-title", children: goal.title }), _jsx(StateLabel, { className: "work-row-state", icon: stateIcon[displayPresentation[shown].tone], label: displayPresentation[shown].label, size: "compact", tone: displayPresentation[shown].tone }), _jsxs("span", { className: "work-row-meta", children: [metadata, familyLabelForGoal(snapshot, goal) === null ? null : ` · ${familyLabelForGoal(snapshot, goal)}`] }), hasCaption ? (_jsx("span", { className: "work-row-caption", "data-blocking": caption.blocking, children: open.length === 0 ? (caption.text) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "work-request-line", children: [_jsx(StateLabel, { className: "work-row-state", icon: "clock", label: "Open", size: "compact", tone: "caution" }), " ", _jsx("span", { className: "work-request-title", children: caption.text })] }), " ", _jsx("span", { className: "work-request-age", children: window === "now" ? ageOf(open[0]?.requestedAt ?? snapshot.asOf, snapshot.asOf) : "was open then" })] })) })) : null] }));
+        const control = navigation === undefined ? (_jsx("button", { "aria-controls": detailsOpen && selected?.id === goal.id ? "work-goal-details" : undefined, "aria-expanded": detailsOpen && selected?.id === goal.id, "aria-pressed": selected?.id === goal.id, className: "work-board-row", id: selected?.id === goal.id ? selectedGoalFragment : undefined, onClick: () => {
                 setDetailsOpen(true);
                 setSelectedId(goal.id);
             }, ref: selected?.id === goal.id ? selectedRowRef : undefined, type: "button", children: content })) : (_jsx("a", { "aria-current": selected?.id === goal.id ? "true" : undefined, className: "work-board-row", href: navigation({
@@ -439,6 +511,7 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
                     }),
                 window
             }), id: selected?.id === goal.id ? selectedGoalFragment : undefined, ref: selected?.id === goal.id ? selectedLinkRowRef : undefined, children: content }));
+        return control;
     };
     const timeTravel = (_jsx("div", { "aria-label": "Choose work snapshot", className: "work-time-controls", role: "group", children: windows.map((option) => {
             if (navigation === undefined) {
@@ -472,12 +545,12 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
         }) }));
     const statusFilterControls = (_jsx("div", { "aria-label": "Filter goals by status", className: "work-status-filters", role: "group", children: statusFilters.map((state) => {
             const label = state === "all" ? "All" : statePresentation[state].label;
-            return navigation === undefined ? (_jsx("button", { "aria-pressed": statusFilter === state, className: "work-status-filter", onClick: () => {
+            return navigation === undefined ? (_jsx("button", { "aria-pressed": statusFilter === state, className: "work-status-filter", onFocus: ({ currentTarget }) => currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }), onClick: () => {
                     setDetailsOpen(false);
                     setSelectedId(null);
                     setStatusFilter(state);
                     setVisibleGoalCount(initialVisibleGoalCount);
-                }, type: "button", children: label }, state)) : (_jsx("a", { "aria-current": statusFilter === state ? "page" : undefined, className: "work-status-filter", href: navigation({
+                }, type: "button", children: label }, state)) : (_jsx("a", { "aria-current": statusFilter === state ? "page" : undefined, className: "work-status-filter", onFocus: ({ currentTarget }) => currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }), href: navigation({
                     goalId: encodeWorkBoardNavigationGoal({
                         detailsOpen: false,
                         goalId: null,
@@ -487,7 +560,35 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
                     window
                 }), children: label }, state));
         }) }));
-    return (_jsxs("section", { className: "work-page", "aria-labelledby": "work-board-title", children: [_jsxs("header", { className: "work-page-intro", children: [_jsx(Text, { as: "h1", id: "work-board-title", variant: "card-title", children: "Work" }), _jsx(Text, { tone: "secondary", variant: "meta", children: headerSentences(window, snapshot).join(" ") })] }), _jsx(Hero, { caption: summaryCaption(triage.summary, tense), fact: heroFact, label: "Work summary" }), timeTravel, snapshot.goals.length === 0 ? (_jsx(Region, { title: "Goals", children: _jsx(Text, { tone: "secondary", children: window === "now" ? (_jsxs(_Fragment, { children: ["No goals yet. Delegate work to an agent with", " ", _jsx("code", { children: "fleetctl submit HOST agent.delegate work REPOSITORY PROMPT" }), " (HOST is a name from", " ", _jsx("code", { children: "fleetctl hosts" }), "); its goal appears here once the hub admits it."] })) : ("No goals at this checkpoint.") }) })) : (_jsxs("div", { className: "work-board-layout", "data-has-detail": selected !== null && detailsOpen, children: [_jsxs(Region, { actions: statusFilterControls, className: "work-board-list", count: filteredGoals.length, title: "Goals", children: [_jsxs(Text, { "aria-live": "polite", tone: "secondary", variant: "meta", children: ["Showing ", visibleGoals.length, " of ", filteredGoals.length, " goals"] }), filteredGoals.length === 0 ? _jsx(Text, { tone: "secondary", children: "No goals match this status." }) : null, visibleGroups.map(({ goals, group }) => (_jsxs("section", { "aria-labelledby": `work-group-${group}`, className: "work-group", children: [_jsxs("h3", { className: "work-group-title", id: `work-group-${group}`, children: [workTriageGroupTitle[group], " ", _jsxs("span", { className: "work-group-count", children: ["(", goals.length, ")"] })] }), _jsx("ul", { className: "work-rows", children: goals.map((goal) => (_jsx("li", { children: goalRow(goal) }, goal.id))) })] }, group))), visibleGoals.length < filteredGoals.length ? (navigation === undefined ? (_jsx(Button, { onClick: () => setVisibleGoalCount((count) => Math.min(count + initialVisibleGoalCount, filteredGoals.length)), children: "Load 10 more" })) : (_jsx("a", { className: "work-load-more-link", href: navigation({
+    const closeControl = (label) => navigation === undefined ? (_jsx(Button, { onClick: () => {
+            setDetailsOpen(false);
+            (selectedRowRef.current ?? selectedLinkRowRef.current)?.focus();
+        }, className: label === "Close" ? "work-close-heading" : undefined, variant: label === "Close" ? "quiet" : "secondary", children: label })) : (_jsx("a", { className: `work-exact-link work-close-control${label === "Close" ? " work-close-heading" : ""}`, href: withFragment(navigation({
+            goalId: encodeWorkBoardNavigationGoal({
+                detailsOpen: false,
+                goalId: selectedId,
+                statusFilter,
+                visibleGoalCount
+            }),
+            window
+        }), selectedGoalFragment), children: label }));
+    return (_jsxs("section", { className: "work-page", "aria-labelledby": "work-board-title", children: [_jsxs("header", { className: "work-page-intro", children: [_jsx(Text, { as: "h1", id: "work-board-title", variant: "section-title", children: "Work" }), _jsx(Text, { tone: "secondary", variant: "meta", children: headerSentences(window, snapshot, host)[0] })] }), headerSentences(window, snapshot, host)
+                .slice(1)
+                .map((sentence) => (_jsxs("p", { className: "work-note work-overlay-note", "data-tone": "held", children: [_jsx(Icon, { decorative: true, name: "clock", size: "small" }), _jsx("span", { children: sentence })] }, sentence))), externalLinks === "disabled" ? (_jsx("p", { className: "work-note", children: "Read-only on the local network. Requests are decided on the hub." })) : null, window === "now" ? null : (_jsxs("div", { className: "work-note work-history-note", children: [_jsxs("span", { children: ["Work as it was ", windowLabel[window].toLowerCase(), ", ", formatTimestamp(snapshot.asOf), ". Decisions are off in the past."] }), navigation === undefined ? (_jsx(Button, { onClick: () => {
+                            setWindow("now");
+                            setDetailsOpen(false);
+                            setSelectedId(null);
+                            setStatusFilter("all");
+                            setVisibleGoalCount(initialVisibleGoalCount);
+                        }, variant: "secondary", children: "Back to now" })) : (_jsx("a", { className: "work-exact-link", href: navigation({ goalId: null, window: "now" }), children: "Back to now" }))] })), snapshot.goals.length === 0 && (window === "now" || hasGoalOmissions) ? null : (_jsx(Hero, { caption: summaryCaption(triage.summary, tense, snapshot), fact: heroFact, label: "Work summary", size: "heading" })), _jsxs("div", { className: "work-board-controls", children: [timeTravel, statusFilterControls] }), snapshot.goals.length === 0 ? (_jsx(Region, { actions: (snapshot.goalsOmitted ?? 0) > 0 ? (_jsxs(Text, { "aria-live": "polite", tone: "secondary", variant: "meta", children: ["Showing 0 of ", snapshot.goalsOmitted, " goals"] })) : undefined, className: "work-empty-board", count: snapshot.goalsOmitted ?? 0, title: "Goals", children: _jsxs("div", { className: "work-empty-copy", children: [hasGoalOmissions ? (_jsx(Text, { as: "strong", children: "No goals in this read." })) : window === "now" ? (_jsx(Text, { as: "strong", children: "No goals yet." })) : null, hasGoalOmissions ? null : (_jsx(Text, { tone: "secondary", children: window === "now" ? (_jsxs(_Fragment, { children: ["Delegate work to an agent with", " ", _jsx("code", { children: "fleetctl submit HOST agent.delegate work REPOSITORY PROMPT" }), " (HOST is a name from", " ", _jsx("code", { children: "fleetctl hosts" }), "); its goal appears here once the hub admits it."] })) : ("No goals at this checkpoint.") })), finishedCount] }) })) : (_jsxs("div", { className: "work-board-layout", "data-has-detail": selected !== null && detailsOpen, children: [selected === null || !detailsOpen ? null : (_jsx(Region, { actions: closeControl("Close"), "aria-label": "Goal details", className: "work-inspector", headingId: "work-goal-details-title", id: "work-goal-details", ref: detailsRef, title: "Goal details", children: _jsx(GoalDetail, { closeControl: closeControl("Close details"), decisions: snapshot.window === "now" ? decisions : undefined, externalLinks: externalLinks, goal: selected, snapshot: snapshot }) })), _jsxs(Region, { actions: filteredGoals.length === 0 ? undefined : (_jsxs(Text, { "aria-live": "polite", tone: "secondary", variant: "meta", children: ["Showing ", visibleGoals.length, " of", " ", filteredGoals.length + (statusFilter === "all" ? (snapshot.goalsOmitted ?? 0) : 0), " goals"] })), className: "work-board-list", count: statusFilter === "all"
+                            ? filteredGoals.length + (snapshot.goalsOmitted ?? 0)
+                            : filteredGoals.length === 0
+                                ? `0 of ${snapshot.goals.length + (snapshot.goalsOmitted ?? 0)}`
+                                : filteredGoals.length, title: "Goals", children: [filteredGoals.length === 0 ? (_jsxs("div", { className: "work-filter-empty", children: [_jsx(Text, { tone: "secondary", children: "No goals match this status." }), navigation === undefined ? (_jsx(Button, { onClick: () => setStatusFilter("all"), variant: "secondary", children: "Show all" })) : (_jsx("a", { className: "work-exact-link", href: navigation({ goalId: null, window }), children: "Show all" }))] })) : null, visibleGroups.map(({ goals, group }) => (_jsxs("section", { "aria-labelledby": `work-group-${group}`, className: "work-group", children: [_jsxs("h3", { className: "work-group-title", id: `work-group-${group}`, children: [group === "planned"
+                                                ? "Planned"
+                                                : group === "needs-you" && tense === "past"
+                                                    ? "Needed you"
+                                                    : workTriageGroupTitle[group], " ", _jsxs("span", { className: "work-group-count", children: ["(", goals.length, ")"] })] }), _jsx("ul", { className: "work-rows", children: goals.map((goal) => (_jsx("li", { children: goalRow(goal) }, goal.id))) })] }, group))), filteredGoals.length > 0 ? finishedCount : null, visibleGoals.length < filteredGoals.length ? (navigation === undefined ? (_jsx(Button, { onClick: () => setVisibleGoalCount((count) => Math.min(count + initialVisibleGoalCount, filteredGoals.length)), children: "Load 10 more" })) : (_jsx("a", { className: "work-load-more-link", href: navigation({
                                     goalId: encodeWorkBoardNavigationGoal({
                                         detailsOpen,
                                         goalId: selectedId,
@@ -495,18 +596,6 @@ export const WorkBoard = ({ decisions, externalLinks = "enabled", initialGoalId,
                                         visibleGoalCount: Math.min(visibleGoalCount + initialVisibleGoalCount, filteredGoals.length)
                                     }),
                                     window
-                                }), children: "Load 10 more" }))) : null] }), selected === null || !detailsOpen ? null : (_jsx(Region, { actions: navigation === undefined ? (_jsx(Button, { onClick: () => {
-                                setDetailsOpen(false);
-                                const selectedRow = selectedRowRef.current ?? selectedLinkRowRef.current;
-                                selectedRow?.focus();
-                            }, variant: "secondary", children: "Close details" })) : (_jsx("a", { className: "work-exact-link", href: withFragment(navigation({
-                                goalId: encodeWorkBoardNavigationGoal({
-                                    detailsOpen: false,
-                                    goalId: selectedId,
-                                    statusFilter,
-                                    visibleGoalCount
-                                }),
-                                window
-                            }), selectedGoalFragment), children: "Close details" })), "aria-label": "Goal details", className: "work-inspector", headingId: "work-goal-details-title", id: "work-goal-details", ref: detailsRef, title: selected.title, children: _jsx(GoalDetail, { decisions: decisions, externalLinks: externalLinks, goal: selected, snapshot: snapshot }) }))] }))] }));
+                                }), children: "Load 10 more" }))) : null] })] }))] }));
 };
 //# sourceMappingURL=view.js.map