@reticlehq/browser 3.6.0 → 3.8.0

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

@@ -0,0 +1,35 @@
+export declare const CUSTOM_PERSONA = "custom";
+export declare const PERSONAS: readonly [{
+    readonly id: "first-time";
+    readonly label: "First-time visitor";
+    readonly hint: "starts from the first page, reads the labels and follows the obvious path";
+}, {
+    readonly id: "power-user";
+    readonly label: "Returning power user";
+    readonly hint: "goes straight to the main task, takes shortcuts and repeats it quickly";
+}, {
+    readonly id: "phone";
+    readonly label: "On a phone, slow connection";
+    readonly hint: "small-screen habits: taps, waits on loading, retries when nothing seems to happen";
+}, {
+    readonly id: "keyboard";
+    readonly label: "Keyboard only";
+    readonly hint: "Tab, Enter and Escape only: focus order, traps and controls it cannot reach";
+}, {
+    readonly id: "careless";
+    readonly label: "Careless user (bad and unexpected input)";
+    readonly hint: "empty fields, wrong formats, very long text, double submits, going back mid-flow";
+}, {
+    readonly id: "admin";
+    readonly label: "Admin / settings";
+    readonly hint: "changes settings and permissions, then checks they stick after a reload";
+}];
+export declare const DEFAULT_PERSONA: "first-time";
+export declare const PERSONA_PICK_ID = "reticle-harness-persona-pick";
+export declare function personaText(pick: string, custom: string): string | undefined;
+export declare function personaLabel(pick: string): string;
+export declare function personaPickHtml(pick: string, disabled?: boolean): string;
+export declare function personaCustomHtml(pick: string, disabled?: boolean): string;
+export declare function knownPick(value: string | null | undefined): string | undefined;
+export declare function readPick(projectId: string | undefined): string;
+export declare function savePick(projectId: string | undefined, pick: string): void;

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,11 +45,11 @@ 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);}
@@ -57,7 +57,7 @@ export const REPORT_CSS = `
 [${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-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 +67,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 +87,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 +98,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 +120,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.js

@@ -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,17 +92,32 @@ 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}`;
 }
 function coverageHtml(coverage) {
     if (coverage === undefined)
@@ -123,7 +139,7 @@ export function reportBodyHtml(scope, dashboardUrl, account, projectName, covera
     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>

package/dist/presenter/presenter-run-state.js

@@ -1,4 +1,5 @@
 import { SessionState } from '@reticlehq/core';
+import { pageHref } from '../security/page-location.js';
 import { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
 import { getCapabilities } from '../registry/capabilities.js';
 export function buildRunState(input) {
@@ -20,7 +21,7 @@ export function buildRunState(input) {
     }
     return {
         session: input.sessionId,
-        url: 'undefined' === typeof location ? '' : location.href,
+        url: 'undefined' === typeof location ? '' : pageHref(),
         state: input.state,
         startedMs: start,
         durationMs: Math.max(0, (input.endMs ?? input.now) - start),

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,6 @@
 import type { HarnessConfig } from '@reticlehq/core';
 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 +42,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 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): 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;