@reticlehq/browser 3.6.0 → 3.7.0

package/dist/presenter/presenter-personas.js

@@ -0,0 +1,95 @@
+import { PERSONA_KEY_PREFIX } from '../storage-keys.js';
+import { esc } from './chrome/presenter-safe-html.js';
+export const CUSTOM_PERSONA = 'custom';
+export const PERSONAS = [
+    {
+        id: 'first-time',
+        label: 'First-time visitor',
+        hint: 'starts from the first page, reads the labels and follows the obvious path',
+    },
+    {
+        id: 'power-user',
+        label: 'Returning power user',
+        hint: 'goes straight to the main task, takes shortcuts and repeats it quickly',
+    },
+    {
+        id: 'phone',
+        label: 'On a phone, slow connection',
+        hint: 'small-screen habits: taps, waits on loading, retries when nothing seems to happen',
+    },
+    {
+        id: 'keyboard',
+        label: 'Keyboard only',
+        hint: 'Tab, Enter and Escape only: focus order, traps and controls it cannot reach',
+    },
+    {
+        id: 'careless',
+        label: 'Careless user (bad and unexpected input)',
+        hint: 'empty fields, wrong formats, very long text, double submits, going back mid-flow',
+    },
+    {
+        id: 'admin',
+        label: 'Admin / settings',
+        hint: 'changes settings and permissions, then checks they stick after a reload',
+    },
+];
+export const DEFAULT_PERSONA = PERSONAS[0].id;
+const TEXT = {
+    LABEL: 'As',
+    CUSTOM: 'Custom…',
+    CUSTOM_SHORT: 'Custom',
+    CUSTOM_HINT: 'Describe who to be or what to try, in your own words.',
+    CUSTOM_PLACEHOLDER: 'e.g. a first-time shopper paying by card',
+};
+export const PERSONA_PICK_ID = 'reticle-harness-persona-pick';
+const PERSONA_TEXT_ID = 'reticle-harness-persona';
+function presetOf(pick) {
+    return PERSONAS.find((persona) => persona.id === pick);
+}
+export function personaText(pick, custom) {
+    const preset = presetOf(pick);
+    if (preset !== undefined)
+        return `${preset.label}: ${preset.hint}`;
+    const own = custom.trim();
+    return 0 === own.length ? undefined : own;
+}
+export function personaLabel(pick) {
+    return presetOf(pick)?.label ?? TEXT.CUSTOM_SHORT;
+}
+export function personaPickHtml(pick, disabled = false) {
+    const options = [
+        ...PERSONAS.map((p) => ({ id: p.id, label: p.label, hint: p.hint })),
+        { id: CUSTOM_PERSONA, label: TEXT.CUSTOM, hint: TEXT.CUSTOM_HINT },
+    ]
+        .map((o) => `<option value="${o.id}" title="${esc(o.hint)}"${o.id === pick ? ' selected' : ''}>${esc(o.label)}</option>`)
+        .join('');
+    const hint = esc(presetOf(pick)?.hint ?? TEXT.CUSTOM_HINT);
+    return (`<label class="reticle-harness-as" for="${PERSONA_PICK_ID}">${TEXT.LABEL}</label>` +
+        `<select id="${PERSONA_PICK_ID}" data-reticle-harness-persona-pick class="reticle-harness-persona" title="${hint}" aria-describedby="${PERSONA_PICK_ID}-hint"${disabled ? ' disabled' : ''}>${options}</select>` +
+        `<span id="${PERSONA_PICK_ID}-hint" class="reticle-sr">${hint}</span>`);
+}
+export function personaCustomHtml(pick, disabled = false) {
+    return CUSTOM_PERSONA === pick
+        ? `<input type="text" id="${PERSONA_TEXT_ID}" data-reticle-harness-persona class="reticle-harness-persona" aria-label="${TEXT.CUSTOM_HINT}" placeholder="${TEXT.CUSTOM_PLACEHOLDER}"${disabled ? ' disabled' : ''}>`
+        : '';
+}
+export function knownPick(value) {
+    return value !== null && value !== undefined && (CUSTOM_PERSONA === value || presetOf(value))
+        ? value
+        : undefined;
+}
+export function readPick(projectId) {
+    try {
+        return (knownPick(localStorage.getItem(`${PERSONA_KEY_PREFIX}${projectId ?? ''}`)) ?? DEFAULT_PERSONA);
+    }
+    catch {
+        return DEFAULT_PERSONA;
+    }
+}
+export function savePick(projectId, pick) {
+    try {
+        localStorage.setItem(`${PERSONA_KEY_PREFIX}${projectId ?? ''}`, pick);
+    }
+    catch {
+    }
+}

package/dist/presenter/presenter-plan.js

@@ -17,32 +17,33 @@ const GLYPH = {
     [ScriptStatus.FAILED]: '✗',
     [ScriptStatus.BLOCKED]: '⊘',
     [ScriptStatus.NOT_TAKEN]: '–',
+    [ScriptStatus.UNDECIDED]: '?',
 };
 export const PLAN_CSS = `
-[data-reticle-chat-panel] .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-chat-panel] .reticle-plan[hidden]{display:none;}
-[data-reticle-chat-panel] .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-chat-panel] .reticle-plan-head strong{color:var(--reticle-hud-text);font-size:var(--reticle-hud-size-sm);font-weight:600;}
-[data-reticle-chat-panel] .reticle-plan-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-[data-reticle-chat-panel] .reticle-plan-close{flex:none;border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
-[data-reticle-chat-panel] .reticle-plan-lanes{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;scrollbar-width:none;}
-[data-reticle-chat-panel] .reticle-plan-lanes::-webkit-scrollbar{display:none;}
-[data-reticle-chat-panel] .reticle-plan-lane{display:flex;gap:6px;align-items:flex-start;min-width:0;}
-[data-reticle-chat-panel] .reticle-plan-lane-name{flex:none;width:16px;padding-top:6px;font-size:10px;font-weight:600;text-align:center;color:var(--reticle-hud-text-muted);}
-[data-reticle-chat-panel] .reticle-plan-lane-journeys{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;}
-[data-reticle-chat-panel] .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-chat-panel] .reticle-plan-journey[data-status="running"]{border-color:var(--reticle-c-active);box-shadow:0 0 12px -4px var(--reticle-c-active);}
-[data-reticle-chat-panel] .reticle-plan-journey[data-status="blocked"],[data-reticle-chat-panel] .reticle-plan-journey[data-status="not-taken"]{opacity:.55;}
-[data-reticle-chat-panel] .reticle-plan-row{display:flex;gap:6px;align-items:baseline;min-width:0;}
-[data-reticle-chat-panel] .reticle-plan-row b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-[data-reticle-chat-panel] .reticle-plan-glyph{flex:none;width:12px;text-align:center;}
-[data-reticle-chat-panel] [data-status="running"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-chat-panel] .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-chat-panel] [data-status="passed"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-chat-panel] .reticle-plan-step[data-status="passed"]>.reticle-plan-glyph{color:#4ade80;}
-[data-reticle-chat-panel] [data-status="failed"]>.reticle-plan-row>.reticle-plan-glyph,[data-reticle-chat-panel] .reticle-plan-step[data-status="failed"]>.reticle-plan-glyph{color:#f87171;}
-[data-reticle-chat-panel] .reticle-plan-meta{display:block;margin:2px 0 0 18px;color:var(--reticle-hud-text-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-[data-reticle-chat-panel] .reticle-plan-steps{margin:4px 0 0 18px;display:flex;flex-direction:column;gap:2px;}
-[data-reticle-chat-panel] .reticle-plan-step{display:flex;gap:6px;color:var(--reticle-hud-text-muted);font-size:10px;min-width:0;}
-[data-reticle-chat-panel] .reticle-plan-step span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+[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) {

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,19 +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;}
@@ -67,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. */
@@ -87,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;
@@ -98,19 +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:10.5px;font-weight:500;color:var(--reticle-c-active);}
+[${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. */
@@ -120,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, coverage?: Readonly<Record<string, number>>, sync?: Readonly<Record<string, unknown>>): 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,7 +4,7 @@ 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, COVERAGE_LEVELS, } 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';
@@ -22,9 +22,10 @@ export function reportPanelHtml() {
         <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>
@@ -91,18 +92,76 @@ function syncStatusHtml(sync) {
         return '';
     const num = (key) => ('number' === typeof sync[key] ? sync[key] : 0);
     const status = sync['status'];
-    const label = 'refused' === status
-        ? `${String(num('refused'))} refused`
-        : 'pending' === status
-            ? `${String(num('pending'))} waiting`
-            : 'on-platform' === status
-                ? `Synced · ${String(num('onPlatform'))}`
-                : undefined;
+    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 = 'string' === typeof sync['said'] ? sync['said'] : '';
-    return `<span class="reticle-sync-status" data-reticle-sync-status="${status}" title="${esc(said)}">${label}</span>`;
+    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 '';
@@ -116,14 +175,14 @@ function coverageHtml(coverage) {
         .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) {
+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>
@@ -140,7 +199,7 @@ export function reportBodyHtml(scope, dashboardUrl, account, projectName, covera
         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)}${syncStatusHtml(sync)}</div>`;
-    return `<div class="reticle-report-top">${streak}${identity}</div>${hero}${verdicts}${coverageHtml(coverage)}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
+    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)
@@ -212,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();
@@ -274,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, this.#global ? undefined : this.#snapshot?.coverage, this.#global ? undefined : this.#snapshot?.sync);
+                : 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;}
@@ -135,6 +137,8 @@ export const SETTINGS_CSS = `
 [${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

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

@@ -1,5 +1,7 @@
 import type { HarnessConfig } from '@reticlehq/core';
+import type { HarnessGateView } from './presenter-harness-row.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { type Credits } from '@reticlehq/core/hud';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
 export { SETTINGS_CSS };
@@ -41,12 +43,11 @@ export interface PresenterSettings {
 export declare function getPresenterSettings(): PresenterSettings;
 export declare function loadPresenterSettings(): PresenterSettings;
 export declare const SETTINGS_ACCOUNT_ATTR = "data-reticle-settings-account";
-export declare function creditsLeft(credits: {
-    used: number;
-    limit: number;
-} | undefined): string;
-export declare function paintHarnessRow(root: ParentNode, config: HarnessConfig | undefined): void;
+export declare const HARNESS_LOCKED_HELP = "The Harness is not available to this workspace right now: see Plan in your Reticle dashboard.";
+export declare function creditsLeft(credits: Credits | undefined): string;
+export declare function paintHarnessRow(root: ParentNode, config: HarnessConfig | undefined, gate?: HarnessGateView): void;
 export declare function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
+export declare function paintSdkVersion(root: ParentNode, version: string | undefined): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
@@ -62,7 +63,7 @@ export declare class PresenterSettingsPanel {
     constructor(host?: SettingsHost);
     contains(node: Node): boolean;
     mount(root: HTMLElement): void;
-    paintHarness(config: HarnessConfig | undefined): void;
+    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
     teardown(): void;
     isOpen(): boolean;
     open(): void;