@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/presenter-plan.js

@@ -0,0 +1,186 @@
+import { ScriptStatus } from '@reticlehq/core';
+export const PLAN_ATTR = 'data-reticle-plan';
+const CLOSE_ATTR = 'data-reticle-plan-close';
+const JOURNEY_ATTR = 'data-reticle-plan-journey';
+export const PLAN_HTML = `<div ${PLAN_ATTR} class="reticle-plan" hidden></div>`;
+const TEXT = {
+    TITLE: 'Harness plan',
+    CLOSE: 'Hide the plan',
+    WAITS: 'waits on',
+    AT_ONCE: 'at once',
+    LANE: 'Lane',
+};
+const GLYPH = {
+    [ScriptStatus.PENDING]: '○',
+    [ScriptStatus.RUNNING]: '◐',
+    [ScriptStatus.PASSED]: '✓',
+    [ScriptStatus.FAILED]: '✗',
+    [ScriptStatus.BLOCKED]: '⊘',
+    [ScriptStatus.NOT_TAKEN]: '–',
+    [ScriptStatus.UNDECIDED]: '?',
+};
+export const PLAN_CSS = `
+[data-reticle-page-panel="harness"] .reticle-plan{flex:none;margin:0 10px 8px;padding:8px 10px;border:1px solid var(--reticle-hud-border);border-radius:10px;background:rgba(255,255,255,.03);}
+[data-reticle-page-panel="harness"] .reticle-plan[hidden]{display:none;}
+[data-reticle-page-panel="harness"] .reticle-plan-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+[data-reticle-page-panel="harness"] .reticle-plan-head strong{color:var(--reticle-hud-text);font-size:var(--reticle-hud-size-sm);font-weight:600;}
+[data-reticle-page-panel="harness"] .reticle-plan-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+[data-reticle-page-panel="harness"] .reticle-plan-close{flex:none;border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
+[data-reticle-page-panel="harness"] .reticle-plan-lanes{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;scrollbar-width:none;}
+[data-reticle-page-panel="harness"] .reticle-plan-lanes::-webkit-scrollbar{display:none;}
+[data-reticle-page-panel="harness"] .reticle-plan-lane{display:flex;gap:6px;align-items:flex-start;min-width:0;}
+[data-reticle-page-panel="harness"] .reticle-plan-lane-name{flex:none;width:16px;padding-top:6px;font-size:11px;font-weight:600;text-align:center;color:var(--reticle-hud-text-muted);}
+[data-reticle-page-panel="harness"] .reticle-plan-lane-journeys{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;}
+[data-reticle-page-panel="harness"] .reticle-plan-journey{display:block;width:100%;text-align:left;border:1px solid transparent;border-radius:8px;padding:5px 7px;background:rgba(255,255,255,.04);color:var(--reticle-hud-text);font:inherit;font-size:var(--reticle-hud-size-xs);cursor:pointer;}
+[data-reticle-page-panel="harness"] .reticle-plan-journey[data-status="running"]{border-color:var(--reticle-c-active);box-shadow:0 0 12px -4px var(--reticle-c-active);}
+[data-reticle-page-panel="harness"] .reticle-plan-journey[data-status="blocked"],[data-reticle-page-panel="harness"] .reticle-plan-journey[data-status="not-taken"]{opacity:.55;}
+[data-reticle-page-panel="harness"] .reticle-plan-row{display:flex;gap:6px;align-items:baseline;min-width:0;}
+[data-reticle-page-panel="harness"] .reticle-plan-row b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+[data-reticle-page-panel="harness"] .reticle-plan-glyph{flex:none;width:12px;text-align:center;}
+[data-reticle-page-panel="harness"] [data-status="running"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-page-panel="harness"] .reticle-plan-step[data-status="running"]>.reticle-plan-glyph{color:var(--reticle-c-active);animation:reticle-flow-pulse 1.2s ease-in-out infinite;}
+[data-reticle-page-panel="harness"] [data-status="passed"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-page-panel="harness"] .reticle-plan-step[data-status="passed"]>.reticle-plan-glyph{color:#4ade80;}
+[data-reticle-page-panel="harness"] [data-status="failed"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-page-panel="harness"] .reticle-plan-step[data-status="failed"]>.reticle-plan-glyph{color:#f87171;}
+[data-reticle-page-panel="harness"] .reticle-plan-meta{display:block;margin:2px 0 0 18px;color:var(--reticle-hud-text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+[data-reticle-page-panel="harness"] .reticle-plan-steps{margin:4px 0 0 18px;display:flex;flex-direction:column;gap:2px;}
+[data-reticle-page-panel="harness"] .reticle-plan-step{display:flex;gap:6px;color:var(--reticle-hud-text-muted);font-size:11px;min-width:0;}
+[data-reticle-page-panel="harness"] .reticle-plan-step span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+`;
+const STATUSES = new Set(Object.values(ScriptStatus));
+function statusOf(value) {
+    return 'string' === typeof value && STATUSES.has(value)
+        ? value
+        : ScriptStatus.PENDING;
+}
+function textOf(value) {
+    return 'string' === typeof value ? value : '';
+}
+function listOf(value) {
+    return Array.isArray(value)
+        ? value.filter((v) => 'object' === typeof v && null !== v)
+        : [];
+}
+export function parsePlanView(args) {
+    const lanes = listOf(args['lanes']).map((lane) => ({
+        id: textOf(lane['id']),
+        journeys: listOf(lane['journeys']).map((j) => ({
+            id: textOf(j['id']),
+            title: textOf(j['title']),
+            ...('string' === typeof j['persona'] ? { persona: j['persona'] } : {}),
+            waitsOn: Array.isArray(j['waitsOn']) ? j['waitsOn'].map(textOf) : [],
+            status: statusOf(j['status']),
+            steps: listOf(j['steps']).map((s) => ({
+                label: textOf(s['label']),
+                status: statusOf(s['status']),
+            })),
+        })),
+    }));
+    if (0 === lanes.length)
+        return undefined;
+    const parallel = 'number' === typeof args['parallel'] ? args['parallel'] : 1;
+    return { parallel, lanes };
+}
+function el(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+export class PlanBoard {
+    #host;
+    #view;
+    #dismissed = false;
+    #toggled = new Map();
+    mount(root) {
+        this.#host = root.querySelector(`[${PLAN_ATTR}]`) ?? undefined;
+        this.#host?.addEventListener('click', (event) => {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            if (null !== target.closest(`[${CLOSE_ATTR}]`)) {
+                this.#dismissed = true;
+                this.#paint();
+                return;
+            }
+            const card = target.closest(`[${JOURNEY_ATTR}]`);
+            const key = card?.getAttribute(JOURNEY_ATTR);
+            if (null === key || key === undefined)
+                return;
+            this.#toggled.set(key, 'true' !== card?.getAttribute('aria-expanded'));
+            this.#paint();
+        });
+        this.#paint();
+    }
+    paint(view) {
+        const fresh = view.lanes.every((lane) => lane.journeys.every((j) => ScriptStatus.PENDING === j.status));
+        if (fresh) {
+            this.#dismissed = false;
+            this.#toggled.clear();
+        }
+        this.#view = view;
+        this.#paint();
+    }
+    #paint() {
+        const host = this.#host;
+        const view = this.#view;
+        if (host === undefined)
+            return;
+        host.replaceChildren();
+        host.hidden = view === undefined || this.#dismissed;
+        if (view === undefined || this.#dismissed)
+            return;
+        const journeys = view.lanes.flatMap((lane) => lane.journeys);
+        const done = journeys.filter((j) => ScriptStatus.PASSED === j.status).length;
+        const head = el('div', 'reticle-plan-head');
+        head.append(el('strong', '', TEXT.TITLE), el('span', '', `${String(done)} of ${String(journeys.length)} passed · ${String(view.lanes.length)} lane(s)` +
+            (1 < view.parallel ? `, ${String(view.parallel)} ${TEXT.AT_ONCE}` : '')));
+        const close = el('button', 'reticle-plan-close', '×');
+        close.setAttribute('type', 'button');
+        close.setAttribute(CLOSE_ATTR, '');
+        close.setAttribute('aria-label', TEXT.CLOSE);
+        close.setAttribute('title', TEXT.CLOSE);
+        head.append(close);
+        const lanes = el('div', 'reticle-plan-lanes');
+        for (const lane of view.lanes) {
+            const row = el('div', 'reticle-plan-lane');
+            const name = el('span', 'reticle-plan-lane-name', lane.id);
+            name.setAttribute('title', `${TEXT.LANE} ${lane.id}`);
+            const journeys = el('div', 'reticle-plan-lane-journeys');
+            for (const journey of lane.journeys)
+                journeys.append(this.#card(lane.id, journey));
+            row.append(name, journeys);
+            lanes.append(row);
+        }
+        host.append(head, lanes);
+    }
+    #card(laneId, journey) {
+        const key = `${laneId}/${journey.id}`;
+        const open = this.#toggled.get(key) ??
+            (ScriptStatus.RUNNING === journey.status || ScriptStatus.FAILED === journey.status);
+        const card = el('button', 'reticle-plan-journey');
+        card.setAttribute('type', 'button');
+        card.setAttribute(JOURNEY_ATTR, key);
+        card.setAttribute('data-status', journey.status);
+        card.setAttribute('aria-expanded', String(open));
+        const row = el('span', 'reticle-plan-row');
+        row.append(el('span', 'reticle-plan-glyph', GLYPH[journey.status]), el('b', '', journey.title));
+        card.append(row);
+        const meta = [
+            journey.persona,
+            0 < journey.waitsOn.length ? `${TEXT.WAITS} ${journey.waitsOn.join(', ')}` : undefined,
+        ].filter((part) => part !== undefined && 0 < part.length);
+        if (0 < meta.length)
+            card.append(el('span', 'reticle-plan-meta', meta.join(' · ')));
+        if (open && 0 < journey.steps.length) {
+            const steps = el('span', 'reticle-plan-steps');
+            for (const step of journey.steps) {
+                const line = el('span', 'reticle-plan-step');
+                line.setAttribute('data-status', step.status);
+                line.append(el('span', 'reticle-plan-glyph', GLYPH[step.status]), el('span', '', step.label));
+                steps.append(line);
+            }
+            card.append(steps);
+        }
+        return card;
+    }
+}

package/dist/presenter/presenter-report-styles.js

@@ -26,17 +26,17 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-scope{
   margin-left:auto;padding:3px 9px;border-radius:999px;cursor:pointer;
   border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
-  color:var(--reticle-muted);font:inherit;font-size:10.5px;}
+  color:var(--reticle-muted);font:inherit;font-size:11px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-scope:hover{background:rgba(255,255,255,.08);color:var(--reticle-fg);}
 [${REPORT_PANEL_ATTR}] .reticle-report-close{
   flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
   border:none;background:transparent;color:var(--reticle-faint);cursor:pointer;line-height:0;}
 [${REPORT_PANEL_ATTR}] .reticle-report-close svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;}
 [${REPORT_PANEL_ATTR}] .reticle-report-body{
-  min-height:0;overflow-y:auto;padding:12px 14px 6px;
+  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 6px;
   scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
 [${REPORT_PANEL_ATTR}] .reticle-report-empty{
-  margin:0;padding:22px 6px;text-align:center;color:var(--reticle-faint);font-size:11.5px;}
+  margin:0;padding:22px 6px;text-align:center;color:var(--reticle-faint);font-size:12px;}
 /* The streak sits above the hero, as a flame and a number: it is the one stat that is about
    TODAY, so it reads first and never competes with the count it sits over. */
 [${REPORT_PANEL_ATTR}] .reticle-report-streak{
@@ -45,14 +45,36 @@ export const REPORT_CSS = `
   border:1px solid color-mix(in srgb,var(--reticle-c-active) 22%,transparent);
   font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
 [${REPORT_PANEL_ATTR}] .reticle-report-streak-label{
-  color:var(--reticle-faint);font-size:9.5px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;}
+  color:var(--reticle-faint);font-size:11px;font-weight:400;}
 [${REPORT_PANEL_ATTR}] .reticle-report-hero{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-hero-value{
   font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--reticle-c-active);}
-[${REPORT_PANEL_ATTR}] .reticle-report-hero-label{color:var(--reticle-muted);font-size:11.5px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-hero-label{color:var(--reticle-muted);font-size:12px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-verdicts{display:flex;gap:6px;margin-bottom:12px;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-status{font-size:11px;color:var(--reticle-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
+[${REPORT_PANEL_ATTR}] .reticle-sync-status[data-reticle-sync-status="refused"]{color:var(--reticle-c-error,#f87171);}
+[${REPORT_PANEL_ATTR}] .reticle-report-coverage{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px;padding:8px 10px;border:1px solid var(--reticle-hud-border);border-radius:var(--reticle-hud-radius-sm,8px);}
+[${REPORT_PANEL_ATTR}] .reticle-report-coverage-value{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--reticle-hud-text);}
+[${REPORT_PANEL_ATTR}] .reticle-report-coverage-levels{display:flex;flex-wrap:wrap;gap:4px 10px;width:100%;font-size:11px;color:var(--reticle-faint);font-variant-numeric:tabular-nums;}
+[${REPORT_PANEL_ATTR}] .reticle-report-instrumentation{margin-bottom:12px;padding:10px;border:1px solid var(--reticle-hud-border);border-radius:var(--reticle-hud-radius-md);}
+[${REPORT_PANEL_ATTR}] .reticle-report-instrumentation-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-instrumentation-head .reticle-report-section{margin-bottom:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-instrumentation-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--reticle-hud-text);}
+[${REPORT_PANEL_ATTR}] .reticle-report-caps{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0 0;padding:0;list-style:none;}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0;font-size:11px;line-height:1.4;color:var(--reticle-muted);}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap-mark{flex:none;width:10px;text-align:center;}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap-name{flex:1;min-width:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap[data-state="seen"] .reticle-report-cap-mark{color:#86efac;}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap[data-state="missing"]{grid-column:1/-1;color:var(--reticle-hud-text);}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap[data-state="missing"] .reticle-report-cap-mark{color:#fca5a5;}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap[data-state="unseen"]{color:var(--reticle-faint);}
+[${REPORT_PANEL_ATTR}] .reticle-report-cap-cost{flex-basis:100%;padding-left:16px;color:var(--reticle-faint);}
+[${REPORT_PANEL_ATTR}] .reticle-report-caps-note{display:block;margin-top:6px;color:var(--reticle-faint);font-size:11px;}
+[${REPORT_PANEL_ATTR}] .reticle-report-copy-prompt{display:block;width:100%;margin-top:10px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--reticle-hud-brand) 50%,transparent);
+  border-radius:var(--reticle-hud-radius-sm);background:var(--reticle-hud-brand-soft);color:var(--reticle-hud-brand);font:inherit;font-size:12px;font-weight:600;cursor:pointer;}
+[${REPORT_PANEL_ATTR}] .reticle-report-copy-prompt:hover{filter:brightness(1.15);}
 [${REPORT_PANEL_ATTR}] .reticle-report-verdict{
-  flex:1;padding:5px 8px;border-radius:8px;font-size:10.5px;text-align:center;
+  flex:1;padding:5px 8px;border-radius:8px;font-size:11px;text-align:center;
   background:rgba(255,255,255,.05);color:var(--reticle-muted);}
 [${REPORT_PANEL_ATTR}] .reticle-report-verdict[data-kind="fail"]{color:#fca5a5;}
 [${REPORT_PANEL_ATTR}] .reticle-report-verdict[data-kind="unknown"]{color:#fcd34d;}
@@ -62,11 +84,11 @@ export const REPORT_CSS = `
   display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:10px;
   background:rgba(255,255,255,.04);}
 [${REPORT_PANEL_ATTR}] .reticle-report-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
-[${REPORT_PANEL_ATTR}] .reticle-report-label{color:var(--reticle-faint);font-size:9.5px;line-height:1.3;}
+[${REPORT_PANEL_ATTR}] .reticle-report-label{color:var(--reticle-faint);font-size:11px;line-height:1.3;}
 /* An estimate is labelled as one, and its label carries what it is measured against. */
 [${REPORT_PANEL_ATTR}] .reticle-report-basis{
   display:block;margin-top:2px;color:var(--reticle-c-active);opacity:.8;
-  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
+  font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:help;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-wrap{margin-top:14px;}
 /* The heading and its push control on one line, so the button reads as belonging to this section
    rather than floating above the list. */
@@ -82,9 +104,9 @@ export const REPORT_CSS = `
 [${REPORT_PANEL_ATTR}] .reticle-report-defect-title{
   font-size:11px;line-height:1.35;overflow-wrap:anywhere;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defect-detail{
-  color:var(--reticle-faint);font-size:10px;line-height:1.35;overflow-wrap:anywhere;}
+  color:var(--reticle-faint);font-size:11px;line-height:1.35;overflow-wrap:anywhere;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defect-source{
-  color:var(--reticle-faint);font-size:9.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+  color:var(--reticle-faint);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
   overflow-wrap:anywhere;}
 .reticle-report-defect-link{flex:none;display:inline-flex;align-items:center;justify-content:center;
   width:20px;height:20px;border-radius:6px;color:var(--reticle-faint);pointer-events:auto;
@@ -93,17 +115,19 @@ export const REPORT_CSS = `
 .reticle-report-defect-link:focus-visible{opacity:1;}
 .reticle-report-defect-link:hover{color:var(--reticle-fg);background:rgba(255,255,255,.07);}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-more{
-  display:inline-block;margin-top:8px;font-size:10px;color:var(--reticle-c-active);
+  display:inline-block;margin-top:8px;font-size:11px;color:var(--reticle-c-active);
   text-decoration:none;}
 [${REPORT_PANEL_ATTR}] .reticle-report-defects-more:hover{text-decoration:underline;}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-all{display:inline-block;margin-top:8px;border:0;padding:0;background:none;cursor:pointer;font:inherit;font-size:11px;font-weight:500;color:var(--reticle-c-active);}
+[${REPORT_PANEL_ATTR}] .reticle-report-defects-all:hover{text-decoration:underline;}
 [${REPORT_PANEL_ATTR}] .reticle-report-local-only{
   margin:14px 0 0;padding-top:10px;border-top:1px solid var(--reticle-line);
-  color:var(--reticle-faint);font-size:10px;line-height:1.45;}
+  color:var(--reticle-faint);font-size:11px;line-height:1.45;}
 [${REPORT_PANEL_ATTR}] .reticle-report-local-only code{
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--reticle-c-active);}
 [${REPORT_PANEL_ATTR}] .reticle-report-chart-wrap{margin-top:12px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-section{
-  display:block;margin-bottom:6px;color:var(--reticle-faint);font-size:9.5px;
+  display:block;margin-bottom:6px;color:var(--reticle-faint);font-size:11px;
   letter-spacing:.06em;text-transform:uppercase;}
 /* Thirty fixed slots, not a flex row: one recorded day is one thin bar on a month's axis, and a
    single stretched block would read as "a month of solid work" on the day you install it. */
@@ -113,19 +137,20 @@ export const REPORT_CSS = `
   min-width:2px;border-radius:2px 2px 0 0;
   background:color-mix(in srgb,var(--reticle-c-active) 55%,transparent);}
 [${REPORT_PANEL_ATTR}] .reticle-report-bar[data-hot="1"]{background:#f87171;}
+/* Sharing is a quiet row under the record, never the loudest thing on the panel. */
 [${REPORT_PANEL_ATTR}] .reticle-report-foot{
-  flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 8px;
+  flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:6px 10px 2px 14px;
   border-top:1px solid rgba(255,255,255,.06);}
+[${REPORT_PANEL_ATTR}] .reticle-report-share-label{margin-right:4px;color:var(--reticle-faint);font-size:11px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-share{
-  padding:5px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:11px;
-  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--reticle-muted);}
-[${REPORT_PANEL_ATTR}] .reticle-report-share:hover{background:rgba(255,255,255,.09);color:var(--reticle-fg);}
-[${REPORT_PANEL_ATTR}] .reticle-report-refer{
-  border-color:color-mix(in srgb,var(--reticle-c-active) 45%,transparent);color:var(--reticle-fg);}
+  flex:none;padding:3px 6px;border:0;border-radius:6px;cursor:pointer;font:inherit;font-size:11px;
+  background:transparent;color:var(--reticle-muted);white-space:nowrap;}
+[${REPORT_PANEL_ATTR}] .reticle-report-share:hover{background:rgba(255,255,255,.08);color:var(--reticle-fg);}
+[${REPORT_PANEL_ATTR}] .reticle-report-refer{margin-left:auto;color:var(--reticle-hud-brand);}
 [${REPORT_PANEL_ATTR}] .reticle-report-links{
-  flex:none;display:flex;gap:12px;padding:0 14px 12px;}
+  flex:none;display:flex;gap:12px;padding:2px 14px 10px;}
 [${REPORT_PANEL_ATTR}] .reticle-report-links a{
-  color:var(--reticle-faint);font-size:10.5px;text-decoration:none;}
+  color:var(--reticle-faint);font-size:11px;text-decoration:none;}
 [${REPORT_PANEL_ATTR}] .reticle-report-links a:hover{color:var(--reticle-fg);text-decoration:underline;}
 
 /* Who this record belongs to, and the push-now control. Tokens only — no literal colours. */

package/dist/presenter/presenter-report.d.ts

@@ -1,6 +1,7 @@
 import { type AccountState, type ImpactScope, type ImpactSnapshot } from '@reticlehq/core';
 export declare function reportPanelHtml(): string;
-export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState, projectName?: string): string;
+export declare function instrumentationHtml(instrumentation: Readonly<Record<string, unknown>> | undefined): string;
+export declare function reportBodyHtml(scope: ImpactScope, dashboardUrl?: string, account?: AccountState, projectName?: string, coverage?: Readonly<Record<string, number>>, sync?: Readonly<Record<string, unknown>>, instrumentation?: Readonly<Record<string, unknown>>): string;
 interface ReportHost {
     onBeforeOpen?: () => void;
     onSyncNow?: () => void;

package/dist/presenter/presenter-report.js

@@ -4,8 +4,9 @@ import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
 import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, SYNC_BTN_ATTR, accountControlHtml, syncButtonHtml, } from './presenter-account.js';
 import { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
-import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './chrome/presenter-report-copy.js';
+import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, COVERAGE_LEVELS, CAPABILITY_WORDS, } from './chrome/presenter-report-copy.js';
 const SCOPE_ATTR = 'data-reticle-report-scope';
+const SCOPE = { PROJECT: 'project', MACHINE: 'machine' };
 const SHARE_X_ATTR = 'data-reticle-share-x';
 const SHARE_IN_ATTR = 'data-reticle-share-in';
 const SHARE_COPY_ATTR = 'data-reticle-share-copy';
@@ -17,13 +18,14 @@ export function reportPanelHtml() {
     <div class="reticle-report-inner">
       <div class="reticle-report-head">
         <span class="reticle-report-title">${REPORT_TEXT.TITLE}</span>
-        <button type="button" ${SCOPE_ATTR} class="reticle-report-scope" aria-pressed="false">${REPORT_TEXT.PROJECT}</button>
+        <span class="reticle-segmented reticle-report-scopes" role="group" aria-label="${REPORT_TEXT.SCOPE_LABEL}"><button type="button" ${SCOPE_ATTR}="${SCOPE.PROJECT}" aria-pressed="true">${REPORT_TEXT.PROJECT}</button><button type="button" ${SCOPE_ATTR}="${SCOPE.MACHINE}" aria-pressed="false" title="${REPORT_TEXT.GLOBAL_TITLE}">${REPORT_TEXT.GLOBAL}</button></span>
         <button type="button" ${REPORT_CLOSE_ATTR} class="reticle-report-close" title="Close" aria-label="Close impact">${close}</button>
       </div>
       <div class="reticle-report-body" data-reticle-report-body></div>
-      <div class="reticle-report-foot">
-        <button type="button" ${SHARE_X_ATTR} class="reticle-report-share">Post on X</button>
-        <button type="button" ${SHARE_IN_ATTR} class="reticle-report-share">LinkedIn</button>
+      <div class="reticle-report-foot" role="group" aria-label="${REPORT_TEXT.SHARE_LABEL}">
+        <span class="reticle-report-share-label">${REPORT_TEXT.SHARE_LABEL}</span>
+        <button type="button" ${SHARE_X_ATTR} class="reticle-report-share">${REPORT_TEXT.POST_X}</button>
+        <button type="button" ${SHARE_IN_ATTR} class="reticle-report-share">${REPORT_TEXT.POST_IN}</button>
         <button type="button" ${SHARE_COPY_ATTR} class="reticle-report-share">${REPORT_TEXT.COPY}</button>
         <button type="button" ${REFER_ATTR} class="reticle-report-share reticle-report-refer">${REPORT_TEXT.REFER}</button>
       </div>
@@ -76,20 +78,111 @@ function defects(scope, dashboardUrl) {
         return `<li class="reticle-report-defect"><span class="reticle-report-defect-title">${esc(d.title)}</span>${detail}${source}${rowLink}</li>`;
     })
         .join('');
+    const hidden = scope.counts.failed > list.length;
     const more = !linked
-        ? ''
-        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
+        ? !hidden
+            ? ''
+            : `<button type="button" data-reticle-defects-all ${ACCOUNT_SIGNIN_ATTR} class="reticle-report-defects-all" title="${REPORT_TEXT.DEFECTS_SEE_ALL_TITLE}">${REPORT_TEXT.DEFECTS_SEE_ALL} (${String(scope.counts.failed)}) →</button>`
+        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${hidden ? ` (${String(scope.counts.failed)})` : ''}</a>`;
     const sync = syncButtonHtml(dashboardUrl);
     return `<div class="reticle-report-defects-wrap"><div class="reticle-report-defects-head"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span>${sync}</div><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }
-export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
+function syncStatusHtml(sync) {
+    if (sync === undefined)
+        return '';
+    const num = (key) => ('number' === typeof sync[key] ? sync[key] : 0);
+    const status = sync['status'];
+    const keyRefused = 'string' === typeof sync['keyRefused'] ? sync['keyRefused'] : undefined;
+    const label = keyRefused !== undefined
+        ? REPORT_TEXT.KEY_REFUSED
+        : 'refused' === status
+            ? `${String(num('refused'))} refused`
+            : 'pending' === status
+                ? `${String(num('pending'))} waiting`
+                : 'on-platform' === status
+                    ? `Synced · ${String(num('onPlatform'))}`
+                    : 'local-only' === status
+                        ? `${String(num('pending'))} ${REPORT_TEXT.NOT_SENT}`
+                        : undefined;
+    if (label === undefined)
+        return '';
+    const said = keyRefused !== undefined
+        ? keyRefused
+        : 'local-only' === status
+            ? REPORT_TEXT.NOT_SENT_HELP
+            : 'string' === typeof sync['said']
+                ? sync['said']
+                : '';
+    const runUrl = sync['runUrl'];
+    const seeRun = 'string' === typeof runUrl && isSafeDashboardUrl(runUrl)
+        ? ` <a class="reticle-sync-run" data-reticle-link="run" href="${esc(runUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.SEE_RUN}</a>`
+        : '';
+    return `<span class="reticle-sync-status" data-reticle-sync-status="${esc(String(status))}" title="${esc(said)}">${label}</span>${seeRun}`;
+}
+const capabilityWords = (name) => 'string' === typeof name ? esc(CAPABILITY_WORDS[name] ?? name) : undefined;
+function capabilityItem(state, name, cost = '') {
+    const mark = 'seen' === state ? '✓' : 'missing' === state ? '✕' : '○';
+    const why = '' === cost ? '' : `<span class="reticle-report-cap-cost">${cost}</span>`;
+    return `<li class="reticle-report-cap" data-state="${state}"><span class="reticle-report-cap-mark" aria-hidden="true">${mark}</span><span class="reticle-report-cap-name">${name}</span>${why}</li>`;
+}
+export function instrumentationHtml(instrumentation) {
+    if (instrumentation === undefined)
+        return '';
+    const covered = instrumentation['covered'];
+    const total = instrumentation['total'];
+    if ('number' !== typeof covered || 'number' !== typeof total)
+        return '';
+    const list = (key) => {
+        const value = instrumentation[key];
+        return Array.isArray(value) ? value : [];
+    };
+    const seen = list('seen').flatMap((n) => {
+        const name = capabilityWords(n);
+        return name === undefined ? [] : [capabilityItem('seen', name)];
+    });
+    const missing = list('missing').flatMap((m) => {
+        if ('object' !== typeof m || null === m)
+            return [];
+        const gap = m;
+        const name = capabilityWords(gap['capability']);
+        const cost = 'string' === typeof gap['cost'] ? esc(gap['cost']) : '';
+        return name === undefined ? [] : [capabilityItem('missing', name, cost)];
+    });
+    const unseen = list('notSeenYet').flatMap((n) => {
+        const name = capabilityWords(n);
+        return name === undefined ? [] : [capabilityItem('unseen', name)];
+    });
+    const items = [...missing, ...seen, ...unseen];
+    const caps = 0 === items.length
+        ? ''
+        : `<ul class="reticle-report-caps">${items.join('')}</ul>${0 === unseen.length ? '' : `<span class="reticle-report-caps-note">○ ${REPORT_TEXT.NOT_SEEN_YET}</span>`}`;
+    const copy = 'string' === typeof instrumentation['prompt']
+        ? `<button type="button" class="reticle-report-copy-prompt" ${COPY_PROMPT_ATTR}>${REPORT_TEXT.COPY_PROMPT}</button>`
+        : '';
+    return `<div class="reticle-report-instrumentation" title="${REPORT_TEXT.INSTRUMENTATION_HELP}"><div class="reticle-report-instrumentation-head"><span class="reticle-report-section">${REPORT_TEXT.INSTRUMENTATION}</span><span class="reticle-report-instrumentation-value">${REPORT_TEXT.covered(Math.round(covered), Math.round(total))}</span></div>${caps}${copy}</div>`;
+}
+const COPY_PROMPT_ATTR = 'data-reticle-copy-prompt';
+function coverageHtml(coverage) {
+    if (coverage === undefined)
+        return '';
+    const known = COVERAGE_LEVELS.filter((l) => 'number' === typeof coverage[l.key]);
+    if (0 === known.length)
+        return '';
+    const pct = (key) => `${String(Math.round(coverage[key] ?? 0))}%`;
+    const head = 'number' === typeof coverage['proved'] ? pct('proved') : pct(known[0]?.key ?? '');
+    const rows = known
+        .map((l) => `<span class="reticle-report-coverage-level">${pct(l.key)} ${l.label}</span>`)
+        .join('');
+    return `<div class="reticle-report-coverage" title="${REPORT_TEXT.COVERAGE_HELP}"><span class="reticle-report-section">${REPORT_TEXT.COVERAGE}</span><span class="reticle-report-coverage-value">${head}</span><div class="reticle-report-coverage-levels">${rows}</div></div>`;
+}
+export function reportBodyHtml(scope, dashboardUrl, account, projectName, coverage, sync, instrumentation) {
     const c = scope.counts;
     if (0 === c.calls)
         return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
     const streak = scope.records.streakDays > 0
         ? `<span class="reticle-report-streak" title="Consecutive days with at least one verdict">🔥 ${String(scope.records.streakDays)} <span class="reticle-report-streak-label">${REPORT_TEXT.STREAK}</span></span>`
         : '';
-    const hero = `<div class="reticle-report-hero"><span class="reticle-report-hero-value">${compactNumber(c.failed)}</span><span class="reticle-report-hero-label">${REPORT_TEXT.HERO_DEFECTS}</span></div>`;
+    const hero = `<div class="reticle-report-hero"><span class="reticle-report-hero-value">${compactNumber(c.failed)}</span><span class="reticle-report-hero-label">${REPORT_TEXT.heroDefects(c.failed)}</span></div>`;
     const verdicts = `<div class="reticle-report-verdicts" title="${REPORT_TEXT.UNKNOWN_HELP}">
     <span class="reticle-report-verdict" data-kind="pass">${compactNumber(c.passed)} ${REPORT_TEXT.PASSED}</span>
     <span class="reticle-report-verdict" data-kind="fail">${compactNumber(c.failed)} ${REPORT_TEXT.FAILED}</span>
@@ -105,8 +198,8 @@ export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
         card(compactNumber(scope.savings.tokens.value), REPORT_TEXT.SAVED_TOKENS, scope.savings.tokens.basis),
         card(compactDuration(scope.savings.minutes.value * 60_000), REPORT_TEXT.SAVED_MINUTES, scope.savings.minutes.basis),
     ].join('');
-    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}</div>`;
-    return `${identity}${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
+    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}${syncStatusHtml(sync)}</div>`;
+    return `<div class="reticle-report-top">${streak}${identity}</div>${hero}${verdicts}${instrumentationHtml(instrumentation)}${coverageHtml(coverage)}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
 }
 function localOnly(scope, dashboardUrl, account) {
     if (dashboardUrl !== undefined)
@@ -140,14 +233,17 @@ export class PresenterReport {
             e.stopPropagation();
             this.close();
         });
-        const scopeBtn = root.querySelector(`[${SCOPE_ATTR}]`);
-        scopeBtn?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.#global = !this.#global;
-            scopeBtn.setAttribute('aria-pressed', this.#global ? 'true' : 'false');
-            scopeBtn.textContent = this.#global ? REPORT_TEXT.GLOBAL : REPORT_TEXT.PROJECT;
-            this.#paint();
-        });
+        const scopeBtns = root.querySelectorAll(`[${SCOPE_ATTR}]`);
+        for (const btn of scopeBtns) {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.#global = SCOPE.MACHINE === btn.getAttribute(SCOPE_ATTR);
+                for (const other of scopeBtns) {
+                    other.setAttribute('aria-pressed', other === btn ? 'true' : 'false');
+                }
+                this.#paint();
+            });
+        }
         root.querySelector(`[${SHARE_X_ATTR}]`)?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.#openShare(buildXShareUrl(this.shareText()));
@@ -175,6 +271,13 @@ export class PresenterReport {
                 void this.#copy(ACCOUNT_TEXT.SIGNIN_COMMAND, signin);
                 return;
             }
+            const copyPrompt = target.closest(`[${COPY_PROMPT_ATTR}]`);
+            const prompt = this.#snapshot?.instrumentation?.['prompt'];
+            if (copyPrompt !== null && 'string' === typeof prompt) {
+                e.stopPropagation();
+                void this.#copy(prompt, copyPrompt);
+                return;
+            }
             const sync = target.closest(`[${SYNC_BTN_ATTR}]`);
             if (sync !== null) {
                 e.stopPropagation();
@@ -237,7 +340,7 @@ export class PresenterReport {
         this.#body.innerHTML =
             scope === undefined
                 ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
-                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName, this.#global ? undefined : this.#snapshot?.coverage, this.#global ? undefined : this.#snapshot?.sync, this.#global ? undefined : this.#snapshot?.instrumentation);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');

package/dist/presenter/presenter-settings-styles.js

@@ -56,8 +56,10 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-row{
   display:flex;align-items:center;justify-content:space-between;gap:12px;
   padding:8px 14px;min-height:30px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-labelcol{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-label{
-  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.62);font-size:13px;font-weight:500;}
+  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.86);font-size:13px;font-weight:500;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-desc{color:rgba(255,255,255,.5);font-size:11px;line-height:1.35;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-help{
   display:inline-flex;align-items:center;justify-content:center;
   width:14px;height:14px;border:none;border-radius:999px;padding:0;cursor:help;
@@ -86,7 +88,7 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-row[data-disabled="1"]{opacity:.45;pointer-events:none;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-section{
-  padding:10px 14px 6px;color:rgba(255,255,255,.38);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
+  padding:10px 14px 6px;color:rgba(255,255,255,.38);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-swatches{
   display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch{
@@ -98,13 +100,13 @@ export const SETTINGS_CSS = `
   border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch:focus-visible{outline:2px solid rgba(59,130,246,.65);outline-offset:2px;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-checkrow{
-  display:flex;align-items:center;gap:10px;padding:7px 14px;color:rgba(255,255,255,.8);font-size:13px;
+  display:flex;align-items:center;gap:10px;padding:7px 14px;color:rgba(255,255,255,.86);font-size:13px;
   cursor:pointer;user-select:none;margin:0;transition:background .12s;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-checkrow:hover{background:rgba(255,255,255,.03);}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-check{
   width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.22);
   background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;
-  color:transparent;font-size:10px;line-height:1;flex:none;transition:background .12s,border-color .12s,color .12s;}
+  color:transparent;font-size:11px;line-height:1;flex:none;transition:background .12s,border-color .12s,color .12s;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-check[data-on="1"]{
   background:#fafafa;border-color:#fafafa;color:#111;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-check:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px;}
@@ -125,6 +127,18 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link-caret{display:inline-flex;align-items:center;flex:none;opacity:.55;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:hover{background:rgba(255,255,255,.04);color:#fff;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill-row{padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.08);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill{
+  width:100%;display:flex;align-items:center;justify-content:center;
+  border:1px solid rgba(239,68,68,.55);border-radius:8px;background:rgba(239,68,68,.12);color:#f87171;
+  font:inherit;font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;
+  transition:background .12s,border-color .12s,color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill:hover{background:rgba(239,68,68,.22);border-color:#ef4444;color:#fca5a5;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill[data-armed="1"]{background:#ef4444;border-color:#ef4444;color:#fff;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill:focus-visible{outline:2px solid rgba(239,68,68,.6);outline-offset:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill-sub{margin:8px 0 0;font-size:11px;line-height:1.45;color:rgba(255,255,255,.55);}
+/* The SDK version line sits straight in the foot, so it takes the rows' inset rather than none. */
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-foot > .reticle-settings-kill-sub{padding:0 14px;}
 [${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${'data-reticle-hud'}] .reticle-tb-tip{
   opacity:0;visibility:hidden;transition-delay:0s;}
 /* The dock's accent IS the theme's active colour, published as --reticle-accent on the overlay by