@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/presenter-frame.js

@@ -0,0 +1,187 @@
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT } from './presenter-account.js';
+import { CHAT_ATTR, CHAT_PILL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, MIN_ATTR, REPORT_ATTR, REPORT_PANEL_ATTR, SETTINGS_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_PLACEMENT_ATTR, CHAT_PANEL_ATTR, } from './presenter-config.js';
+import { HUD_DROP_SHADOW, HUD_GLASS_PAINT } from './chrome/presenter-hud-chrome.js';
+export const RAIL_ATTR = 'data-reticle-rail';
+export const RAIL_SIGNIN_ATTR = 'data-reticle-rail-signin';
+export const RAIL_PROMO_ATTR = 'data-reticle-rail-promo';
+const PAGE_OPEN_ATTR = 'data-reticle-page-open';
+const PAGE_PANEL_ATTR = 'data-reticle-page-panel';
+const OVERLAY = 'data-reticle-overlay';
+export const RAIL_TEXT = {
+    TITLE: 'Sign in to try Reticle Harness',
+    DETAIL: 'Free Harness credits to start.',
+    CTA: 'Sign in',
+};
+export const RAIL_HTML = `<div ${RAIL_ATTR} class="reticle-rail" role="complementary" aria-label="Reticle">
+  <div ${RAIL_SIGNIN_ATTR} class="reticle-rail-signin" hidden>
+    <span class="reticle-rail-copy"><strong>${RAIL_TEXT.TITLE}</strong><span>${RAIL_TEXT.DETAIL}</span></span>
+    <button type="button" ${ACCOUNT_SIGNIN_ATTR} class="reticle-rail-cta" title="${ACCOUNT_TEXT.SIGNIN_TITLE}">${RAIL_TEXT.CTA}</button>
+  </div>
+  <div ${RAIL_PROMO_ATTR} class="reticle-rail-promo"></div>
+</div>`;
+export function paintRail(root, account) {
+    const signin = root.querySelector(`[${RAIL_SIGNIN_ATTR}]`);
+    const promo = root.querySelector(`[${RAIL_PROMO_ATTR}]`);
+    const signedOut = account !== undefined && !account.signedIn;
+    if (signin !== null)
+        signin.hidden = !signedOut;
+    if (promo !== null)
+        promo.hidden = signedOut;
+}
+const PAGES = `:is([${CHAT_PANEL_ATTR}],[${PAGE_PANEL_ATTR}],[${REPORT_PANEL_ATTR}],[${SETTINGS_PANEL_ATTR}])`;
+const ANY_OPEN = `[${OVERLAY}][${MIN_ATTR}="0"]:is([${CHAT_ATTR}="1"],[${PAGE_OPEN_ATTR}],[${REPORT_ATTR}="1"],[${SETTINGS_ATTR}="1"])`;
+const BELOW = `[${DOCK_ATTR}]:is([${CHAT_PLACEMENT_ATTR}="below"],[${SETTINGS_PLACEMENT_ATTR}="below"])`;
+export const FRAME_CSS = `
+[${DOCK_ATTR}]{
+  /* Short enough to leave most of a laptop screen to the app; the log scrolls inside it. */
+  --reticle-frame-h:min(440px,60vh,calc(100vh - 190px));
+  --reticle-rail-h:52px;--reticle-frame-gap:6px;}
+[${DOCK_ATTR}] ${PAGES}{
+  right:0;left:auto;top:auto;
+  bottom:calc(100% + 8px + var(--reticle-rail-h) + var(--reticle-frame-gap));
+  width:var(--reticle-dock-w);max-width:min(var(--reticle-dock-w),calc(100vw - 24px));
+  height:var(--reticle-frame-h);max-height:var(--reticle-frame-h);
+  border-radius:var(--reticle-hud-radius-lg);
+  ${HUD_GLASS_PAINT}}
+[${DOCK_ATTR}] [${SETTINGS_PANEL_ATTR}]::after{display:none;}
+[${DOCK_ATTR}] [${SETTINGS_PANEL_ATTR}] .reticle-settings-inner{height:100%;}
+[${DOCK_ATTR}] [${SETTINGS_PANEL_ATTR}] :is(.reticle-settings-body,.reticle-settings-foot){background:transparent;}
+[${DOCK_ATTR}] [${REPORT_PANEL_ATTR}] .reticle-report-inner{height:100%;}
+/* The Agent Log section fills the frame, so the footer sits on the bottom edge, not mid-panel. */
+[${CHAT_PANEL_ATTR}] .reticle-chat-view{flex:1;min-height:0;display:flex;flex-direction:column;}
+[${CHAT_PANEL_ATTR}] .reticle-chat-view > .reticle-hud-log-well{flex:1;min-height:0;}
+/*
+ * Two rows above the log in every state: the header and the status row. "Session ended" (or the
+ * handoff notice) takes the status text's place instead of arriving as a row of its own, and the
+ * Harness block sits in the footer above the project capsule.
+ */
+[${OVERLAY}] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-banner{display:none;flex:1;min-width:0;min-height:0;padding:0;border:0;background:none;
+  font-size:11px;font-weight:600;line-height:1.3;color:var(--reticle-hud-text);
+  overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
+[${OVERLAY}][data-reticle-state="ended"] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-banner{display:-webkit-box;}
+[${OVERLAY}][data-reticle-state="ended"] [${CHAT_PANEL_ATTR}] .reticle-act-strip .reticle-act{display:none;}
+[${CHAT_PANEL_ATTR}] .reticle-foot-workspace-row{gap:var(--reticle-hud-space-2);}
+/* The Harness block sits above the project capsule, full width: one clear thing to press. */
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-foot-stack{display:flex;flex-direction:column;gap:var(--reticle-hud-space-2);}
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-foot-workspace-row:has(> .reticle-workspace-wrap[hidden]){display:none;}
+${BELOW} ${PAGES}{bottom:auto;top:calc(100% + 8px + var(--reticle-rail-h) + var(--reticle-frame-gap));}
+[${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] :is(${PAGES},[${RAIL_ATTR}]){right:auto;left:0;}
+
+/* ── Every page's header: title over a one-line subtitle, its actions, then close. ────────────── */
+[${DOCK_ATTR}] :is(.reticle-page-heading,.reticle-report-head,.reticle-settings-head){
+  flex:none;display:flex;align-items:center;gap:var(--reticle-hud-space-2);min-height:52px;box-sizing:border-box;
+  padding:var(--reticle-hud-space-2) var(--reticle-hud-space-2) var(--reticle-hud-space-2) var(--reticle-hud-space-3);
+  border-bottom:1px solid var(--reticle-hud-border);background:none;}
+[${DOCK_ATTR}] .reticle-page-titles{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;}
+[${DOCK_ATTR}] :is(.reticle-page-heading strong,.reticle-report-title,.reticle-settings-title){
+  font-size:var(--reticle-hud-size-base);font-weight:600;letter-spacing:0;text-transform:none;color:var(--reticle-hud-text);}
+[${DOCK_ATTR}] .reticle-settings-title{flex:1;}
+[${DOCK_ATTR}] .reticle-page-heading .reticle-page-subtitle{padding:0;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+[${DOCK_ATTR}] .reticle-primary-btn{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 var(--reticle-hud-space-3);
+  border:0;border-radius:var(--reticle-hud-radius-pill);background:var(--reticle-hud-brand);color:#160b02;
+  font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;white-space:nowrap;cursor:pointer;}
+[${DOCK_ATTR}] .reticle-primary-btn:hover{filter:brightness(1.08);}
+[${DOCK_ATTR}] .reticle-page-heading .reticle-primary-btn{width:auto;height:28px;border-radius:var(--reticle-hud-radius-pill);background:var(--reticle-hud-brand);color:#160b02;font-size:var(--reticle-hud-size-sm);}
+/* One close control everywhere: a quiet 28px square, the same glyph weight on every page. */
+[${DOCK_ATTR}] :is([data-reticle-page-close],.reticle-report-close,.reticle-settings-close){flex:none;width:28px;height:28px;
+  display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--reticle-hud-radius-sm);
+  background:transparent;color:var(--reticle-hud-text-muted);font-size:18px;line-height:1;cursor:pointer;}
+[${DOCK_ATTR}] :is([data-reticle-page-close],.reticle-report-close,.reticle-settings-close):hover{background:var(--reticle-hud-hover);color:var(--reticle-hud-text);}
+[${DOCK_ATTR}] .reticle-primary-btn[data-active="1"]{background:var(--reticle-hud-text);color:var(--reticle-hud-ground);}
+[${DOCK_ATTR}] .reticle-primary-btn svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;}
+/* One empty state for every page: what is missing, then how it gets filled. */
+[${DOCK_ATTR}] :is(.reticle-flows-empty,.reticle-annotation-empty){display:flex;flex-direction:column;align-items:center;gap:6px;
+  margin:auto 0;padding:40px var(--reticle-hud-space-4);text-align:center;}
+[${DOCK_ATTR}] :is(.reticle-flows-empty,.reticle-annotation-empty) strong{font-size:var(--reticle-hud-size-base);font-weight:600;color:var(--reticle-hud-text);}
+[${DOCK_ATTR}] :is(.reticle-flows-empty,.reticle-annotation-empty) span{max-width:260px;font-size:var(--reticle-hud-size-sm);line-height:1.45;color:var(--reticle-hud-text-muted);}
+
+/* ── Saved flows: one row per journey. ───────────────────────────────────────────────────────── */
+[${PAGE_PANEL_ATTR}="flows"] .reticle-all-flows{display:flex;flex-direction:column;gap:var(--reticle-hud-space-1);padding:var(--reticle-hud-space-2);}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row{display:flex;align-items:center;gap:var(--reticle-hud-space-3);width:100%;min-height:48px;
+  padding:var(--reticle-hud-space-2) var(--reticle-hud-space-3);border:1px solid transparent;border-radius:var(--reticle-hud-radius-md);
+  background:transparent;color:var(--reticle-hud-text);font:inherit;text-align:left;cursor:pointer;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:hover:not(:disabled){background:var(--reticle-hud-hover);border-color:var(--reticle-hud-border);}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:1px;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:disabled{cursor:not-allowed;opacity:.5;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
+  border-radius:50%;background:var(--reticle-hud-brand-soft);color:var(--reticle-hud-brand);font-size:11px;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-row:disabled .reticle-flow-play{background:var(--reticle-hud-inset);color:var(--reticle-hud-text-faint);}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);font-weight:600;}
+[${PAGE_PANEL_ATTR}="flows"] .reticle-flow-meta{font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+
+/* ── Notes: a segmented list switch, then the page's tools on the right. ─────────────────────── */
+[${PAGE_PANEL_ATTR}="annotations"] .reticle-annotations-tabs{gap:var(--reticle-hud-space-1);padding:var(--reticle-hud-space-2) var(--reticle-hud-space-3);}
+/* One segmented switch for every "show me this or that": Notes' list and Impact's scope. */
+[${DOCK_ATTR}] .reticle-segmented{display:inline-flex;flex:none;padding:2px;border-radius:var(--reticle-hud-radius-sm);background:var(--reticle-hud-inset);}
+[${PAGE_PANEL_ATTR}="annotations"] .reticle-segmented{margin-right:auto;}
+[${DOCK_ATTR}] .reticle-segmented button{height:24px;padding:0 var(--reticle-hud-space-3);border:0;border-radius:4px;background:transparent;
+  color:var(--reticle-hud-text-muted);font:inherit;font-size:var(--reticle-hud-size-xs);white-space:nowrap;cursor:pointer;}
+[${DOCK_ATTR}] .reticle-segmented button:hover{color:var(--reticle-hud-text);}
+[${DOCK_ATTR}] .reticle-segmented button[aria-pressed="true"]{background:var(--reticle-hud-border-strong);color:var(--reticle-hud-text);}
+[${DOCK_ATTR}] .reticle-report-head .reticle-segmented{margin-left:auto;}
+[${PAGE_PANEL_ATTR}="annotations"] .reticle-annotations-tabs .reticle-copy-all{margin-left:0;color:var(--reticle-hud-text-muted);}
+[${PAGE_PANEL_ATTR}="annotations"] .reticle-annotation-list{display:flex;flex-direction:column;}
+[${PAGE_PANEL_ATTR}="annotations"] .reticle-annotation-item{padding:var(--reticle-hud-space-3) 2px;}
+
+/* ── Impact: the streak and the account share the first line instead of a row each. ─────────── */
+[${REPORT_PANEL_ATTR}] .reticle-report-top{display:flex;align-items:center;justify-content:space-between;gap:var(--reticle-hud-space-2);min-height:28px;margin-bottom:var(--reticle-hud-space-2);}
+[${REPORT_PANEL_ATTR}] .reticle-report-top .reticle-report-streak{margin-bottom:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-top .reticle-report-identity{margin:0 0 0 auto;padding:0;}
+[${REPORT_PANEL_ATTR}] .reticle-report-hero-value{color:var(--reticle-hud-text);}
+[${REPORT_PANEL_ATTR}] .reticle-report-card{background:var(--reticle-hud-inset);border-radius:var(--reticle-hud-radius-md);}
+[${REPORT_PANEL_ATTR}] :is(.reticle-report-foot,.reticle-report-links){padding-left:var(--reticle-hud-space-3);padding-right:var(--reticle-hud-space-3);}
+
+/* ── Settings: the help links scroll with the rest instead of pinning a footer over the options. */
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-body .reticle-settings-foot{margin-top:0;border-top:0;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-row{flex-wrap:wrap;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-helptext{flex-basis:100%;margin:6px 0 2px;font-size:var(--reticle-hud-size-xs);line-height:1.45;color:var(--reticle-hud-text-muted);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-help[aria-expanded="true"]{color:var(--reticle-hud-brand);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-reset{background:none;text-align:left;padding-left:14px;font-weight:500;}
+
+/* ── Toolbar: Settings and Exit are tabs like the four beside them, so they light the same way. ── */
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn{width:100%;height:auto;flex-direction:column;gap:2px;min-height:42px;padding:4px 0 3px;
+  border-radius:var(--reticle-hud-radius-md);background:transparent;color:var(--reticle-hud-text-muted);}
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn:hover{background:var(--reticle-hud-hover);color:var(--reticle-hud-text);}
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn[data-active="1"],
+[data-reticle-hud] .reticle-toolbar-chrome .reticle-tb-btn[data-active="1"]:hover{background:transparent;color:var(--reticle-hud-text);}
+
+[${RAIL_ATTR}]{
+  display:none;position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:7;
+  box-sizing:border-box;width:var(--reticle-dock-w);max-width:min(var(--reticle-dock-w),calc(100vw - 24px));
+  height:var(--reticle-rail-h);padding:0 var(--reticle-hud-space-3);align-items:center;
+  border:1px solid color-mix(in srgb,var(--reticle-hud-brand) 30%,var(--reticle-hud-border));
+  border-radius:var(--reticle-hud-radius-lg);
+  background:linear-gradient(135deg,var(--reticle-hud-brand-soft),var(--reticle-hud-surface) 65%);
+  box-shadow:${HUD_DROP_SHADOW};color:var(--reticle-hud-text);font-family:var(--reticle-font);
+  pointer-events:auto;}
+${BELOW} [${RAIL_ATTR}]{bottom:auto;top:calc(100% + 8px);}
+${ANY_OPEN} [${RAIL_ATTR}]{display:flex;}
+/* The capsule and the rail share a slot: the capsule is for "nothing open", the rail for "a page is". */
+${ANY_OPEN} [${CHAT_PILL_ATTR}]{display:none !important;}
+[${RAIL_ATTR}] > [hidden]{display:none !important;}
+[${RAIL_ATTR}] .reticle-rail-signin,[${RAIL_ATTR}] .reticle-rail-promo{flex:1;min-width:0;}
+[${RAIL_ATTR}] .reticle-rail-signin{display:flex;align-items:center;gap:var(--reticle-hud-space-3);}
+[${RAIL_ATTR}] .reticle-rail-copy{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.3;}
+[${RAIL_ATTR}] .reticle-rail-copy strong{font-size:var(--reticle-hud-size-sm);font-weight:600;}
+[${RAIL_ATTR}] .reticle-rail-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+[${RAIL_ATTR}] .reticle-rail-cta{flex:none;height:28px;padding:0 var(--reticle-hud-space-3);border:0;border-radius:var(--reticle-hud-radius-pill);
+  background:var(--reticle-hud-brand);color:#160b02;font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;cursor:pointer;}
+[${RAIL_ATTR}] .reticle-rail-cta:hover{filter:brightness(1.08);}
+[${RAIL_ATTR}] .reticle-rail-cta:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}
+/* The promo: one line of copy, its link, and dots. The carousel draws no frame of its own here. */
+[${RAIL_ATTR}] .reticle-carousel{margin:0;padding:0;border:0;background:none;}
+[${RAIL_ATTR}] .reticle-carousel-track{height:32px;overflow:hidden;}
+[${RAIL_ATTR}] :is(.reticle-carousel-close,.reticle-carousel-arrow,[data-reticle-carousel-position]){display:none;}
+[${RAIL_ATTR}] .reticle-carousel-controls{position:absolute;right:var(--reticle-hud-space-3);top:6px;height:auto;margin:0;}
+[${RAIL_ATTR}] .reticle-carousel-dots{position:static;display:flex;gap:4px;margin:0;}
+[${RAIL_ATTR}] .reticle-carousel-dot{width:10px;height:3px;padding:0;border:0;border-radius:99px;background:var(--reticle-hud-text-muted);opacity:.35;cursor:pointer;}
+[${RAIL_ATTR}] .reticle-carousel-dot[aria-current="true"]{background:var(--reticle-hud-brand);opacity:1;}
+[${RAIL_ATTR}] .reticle-promo-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding-right:0;}
+[${RAIL_ATTR}] .reticle-promo-kicker{display:none;}
+[${RAIL_ATTR}] .reticle-promo-title{grid-column:1/-1;overflow:hidden;padding-right:40px;font-size:var(--reticle-hud-size-sm);font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;}
+[${RAIL_ATTR}] .reticle-promo-detail{grid-column:1;overflow:hidden;color:var(--reticle-hud-text-muted);font-size:var(--reticle-hud-size-xs);line-height:1.3;text-overflow:ellipsis;white-space:nowrap;}
+[${RAIL_ATTR}] .reticle-promo-link{position:static;grid-column:2;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-xs);font-weight:600;text-decoration:none;white-space:nowrap;}
+[${RAIL_ATTR}] .reticle-promo-link:hover{text-decoration:underline;}
+`;

package/dist/presenter/presenter-harness-row.d.ts

@@ -0,0 +1,67 @@
+import { type AccountState, type HarnessConfig, type HarnessDrive } from '@reticlehq/core';
+import { type Credits } from '@reticlehq/core/hud';
+export declare const HARNESS_ROW_TEXT: {
+    readonly RUN: "Run Harness";
+    readonly STARTING: "Starting…";
+    readonly STOP: "Stop";
+    readonly SIGNED_OUT: string;
+    readonly SIGN_IN: "Sign in";
+    readonly UNLINKED: "This project is not on your dashboard yet.";
+    readonly LINK: "Link this project";
+    readonly LINKING: "Linking…";
+    readonly NOT_ENTITLED: "Harness is not on your plan";
+    readonly NO_CREDITS: "No Harness credits left";
+    readonly NO_PROVIDER: "No model provider set";
+    readonly OFF: "Harness is off";
+    readonly canSwitchOn: (percent: number) => string;
+    readonly TURN_ON: "Switch on";
+    readonly COPY_PROMPT: "Copy setup prompt";
+    readonly COPIED: "Copied";
+    readonly SET_UP: "Set up ↗";
+    readonly PLANS: "See plans ↗";
+    readonly PLAN: "Plan ↗";
+    readonly MORE: "Get more ↗";
+    readonly driving: (as: string | undefined, steps: number) => string;
+    readonly NAME: "Harness";
+    readonly TOGGLE: "Reticle Harness on this project";
+    readonly creditsLeft: (left: number, days: number | undefined) => string;
+    readonly FOOT_LINK: "Link project";
+    readonly FOOT_NO_CREDITS: "No credits";
+    readonly FOOT_NOT_ENTITLED: "Not on your plan";
+    readonly FOOT_NO_PROVIDER: "No model provider";
+    readonly footSetup: (percent: number) => string;
+    readonly PAGE_TITLE: "Reticle Harness";
+    readonly LOG_LABEL: "What the Harness did";
+    readonly LOG_EMPTY: "Runs show here, step by step.";
+    readonly PAGE_SUBTITLE: "Tests your app by itself";
+};
+export declare const HARNESS_SWITCH_ON_ATTR = "data-reticle-harness-switch";
+export declare const HARNESS_LINK_ATTR = "data-reticle-harness-link";
+export declare const HARNESS_OPEN_ATTR = "data-reticle-harness-open";
+export declare const HARNESS_LOG_ATTR = "data-reticle-harness-log";
+export declare const HARNESS_TOGGLE_ATTR = "data-reticle-harness-toggle";
+export declare const HARNESS_COPY_PROMPT_ATTR = "data-reticle-harness-copy-prompt";
+export interface HarnessGateView {
+    percent: number;
+    unlocked: boolean;
+    reason?: string;
+    prompt?: string;
+}
+export declare function harnessGateIn(instrumentation: Readonly<Record<string, unknown>> | undefined, config?: HarnessConfig): HarnessGateView | undefined;
+export interface HarnessRowState {
+    account: AccountState | undefined;
+    config: HarnessConfig | undefined;
+    gate?: HarnessGateView | undefined;
+    drive: HarnessDrive | undefined;
+    canDrive: boolean;
+    pick: string;
+    startedAs: string | undefined;
+    setupUrl: string;
+    planUrl: string;
+    linking?: boolean;
+    starting?: boolean;
+}
+export declare function creditsShort(credits: Credits | undefined): string;
+export declare function harnessFootHtml(s: HarnessRowState): string;
+export declare function harnessRowHtml(s: HarnessRowState): string;
+export declare const HARNESS_ROW_CSS = "\n[data-reticle-chat-panel] .reticle-harness-spot{flex:none;display:flex;flex-direction:column;gap:4px;}\n[data-reticle-chat-panel] .reticle-harness-spot[hidden],[data-reticle-chat-panel] .reticle-harness-spot:empty{display:none;}\n[data-reticle-chat-panel] .reticle-harness-row{display:flex;align-items:center;gap:6px;min-height:30px;min-width:0;}\n[data-reticle-chat-panel] .reticle-harness-lead{flex:1;min-width:0;display:flex;align-items:center;gap:6px;}\n[data-reticle-chat-panel] .reticle-harness-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}\n[data-reticle-chat-panel] .reticle-harness-row-wrap{flex-wrap:wrap;row-gap:2px;padding:4px 0;}\n[data-reticle-chat-panel] .reticle-harness-row-wrap .reticle-harness-said{flex:1 1 100%;white-space:normal;}\n[data-reticle-chat-panel] .reticle-harness-said code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}\n[data-reticle-chat-panel] .reticle-harness-as{flex:none;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}\n[data-reticle-chat-panel] .reticle-harness-persona{box-sizing:border-box;flex:1;min-width:0;width:100%;height:30px;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);\n  background:var(--reticle-hud-ground);border:1px solid var(--reticle-hud-border-strong);border-radius:var(--reticle-hud-radius-sm);padding:0 var(--reticle-hud-space-2);}\n[data-reticle-chat-panel] .reticle-harness-spot > .reticle-harness-persona{flex:none;}\n[data-reticle-chat-panel] select.reticle-harness-persona{padding-right:2px;text-overflow:ellipsis;}\n[data-reticle-chat-panel] .reticle-harness-persona::placeholder{color:var(--reticle-hud-text-faint);}\n[data-reticle-chat-panel] .reticle-harness-persona:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}\n[data-reticle-chat-panel] .reticle-harness-run{flex:none;box-sizing:border-box;height:30px;padding:0 12px;border:0;border-radius:var(--reticle-hud-radius-sm);cursor:pointer;white-space:nowrap;\n  background:var(--reticle-hud-brand);color:#160b02;font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;}\n[data-reticle-chat-panel] .reticle-harness-run:hover{filter:brightness(1.08);}\n[data-reticle-chat-panel] .reticle-harness-run:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}\n[data-reticle-chat-panel] .reticle-harness-stop{background:transparent;color:var(--reticle-hud-text);border:1px solid var(--reticle-hud-border-strong);}\n[data-reticle-chat-panel] .reticle-harness-link{flex:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-sm);font-weight:600;text-decoration:none;white-space:nowrap;}\n[data-reticle-chat-panel] .reticle-harness-link:hover{text-decoration:underline;}\n[data-reticle-chat-panel] .reticle-harness-open{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 var(--reticle-hud-space-2);border:0;border-radius:var(--reticle-hud-radius-sm);background:transparent;cursor:pointer;\n  text-align:left;white-space:nowrap;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}\n[data-reticle-chat-panel] .reticle-harness-name{flex:none;font-weight:600;}\n[data-reticle-chat-panel] .reticle-harness-state{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--reticle-hud-text-muted);font-size:11px;font-variant-numeric:tabular-nums;}\n[data-reticle-chat-panel] .reticle-harness-chev{flex:none;color:var(--reticle-hud-text-faint);}\n[data-reticle-chat-panel] .reticle-harness-toggle{flex:none;position:relative;width:30px;height:18px;padding:0;border:0;border-radius:9px;cursor:pointer;background:var(--reticle-hud-border-strong);transition:background .15s;}\n[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked=\"true\"]{background:var(--reticle-hud-brand);}\n[data-reticle-chat-panel] .reticle-harness-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;}\n[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked=\"true\"] .reticle-harness-knob{transform:translateX(12px);}\n[data-reticle-chat-panel] .reticle-harness-toggle:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}\n[data-reticle-chat-panel] .reticle-harness-open:hover{background:var(--reticle-hud-hover);}\n[data-reticle-chat-panel] .reticle-harness-open:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}\n[data-reticle-chat-panel] .reticle-harness-run:disabled,[data-reticle-chat-panel] .reticle-harness-persona:disabled{opacity:.6;cursor:default;}\n[data-reticle-chat-panel] .reticle-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}\n[data-reticle-chat-panel] .reticle-foot-meta{margin:0;font-size:11px;line-height:1.3;color:var(--reticle-hud-text-muted);overflow-wrap:anywhere;}\n[data-reticle-chat-panel] .reticle-foot-meta:empty{display:none;}\n";

package/dist/presenter/presenter-harness-row.js

@@ -0,0 +1,209 @@
+import { CreditKind, } from '@reticlehq/core';
+import { SIGN_UP_PITCH, creditsSpent, creditsUsageText, creditsUsedText, } from '@reticlehq/core/hud';
+import { esc } from './chrome/presenter-safe-html.js';
+import { ACCOUNT_SIGNIN_ATTR } from './presenter-account.js';
+import { personaPickHtml, personaCustomHtml, personaLabel } from './presenter-personas.js';
+export const HARNESS_ROW_TEXT = {
+    RUN: 'Run Harness',
+    STARTING: 'Starting…',
+    STOP: 'Stop',
+    SIGNED_OUT: SIGN_UP_PITCH,
+    SIGN_IN: 'Sign in',
+    UNLINKED: 'This project is not on your dashboard yet.',
+    LINK: 'Link this project',
+    LINKING: 'Linking…',
+    NOT_ENTITLED: 'Harness is not on your plan',
+    NO_CREDITS: 'No Harness credits left',
+    NO_PROVIDER: 'No model provider set',
+    OFF: 'Harness is off',
+    canSwitchOn: (percent) => `Setup score ${String(percent)}%. Harness is off.`,
+    TURN_ON: 'Switch on',
+    COPY_PROMPT: 'Copy setup prompt',
+    COPIED: 'Copied',
+    SET_UP: 'Set up ↗',
+    PLANS: 'See plans ↗',
+    PLAN: 'Plan ↗',
+    MORE: 'Get more ↗',
+    driving: (as, steps) => `Driving${as === undefined ? '' : ` as ${as}`} · ${String(steps)} step${1 === steps ? '' : 's'}`,
+    NAME: 'Harness',
+    TOGGLE: 'Reticle Harness on this project',
+    creditsLeft: (left, days) => `${left.toLocaleString('en-US')} credit${1 === left ? '' : 's'}${days === undefined ? '' : ` · ${String(days)} day${1 === days ? '' : 's'}`}`,
+    FOOT_LINK: 'Link project',
+    FOOT_NO_CREDITS: 'No credits',
+    FOOT_NOT_ENTITLED: 'Not on your plan',
+    FOOT_NO_PROVIDER: 'No model provider',
+    footSetup: (percent) => `Setup ${String(percent)}% · needs 80%`,
+    PAGE_TITLE: 'Reticle Harness',
+    LOG_LABEL: 'What the Harness did',
+    LOG_EMPTY: 'Runs show here, step by step.',
+    PAGE_SUBTITLE: 'Tests your app by itself',
+};
+export const HARNESS_SWITCH_ON_ATTR = 'data-reticle-harness-switch';
+export const HARNESS_LINK_ATTR = 'data-reticle-harness-link';
+export const HARNESS_OPEN_ATTR = 'data-reticle-harness-open';
+export const HARNESS_LOG_ATTR = 'data-reticle-harness-log';
+export const HARNESS_TOGGLE_ATTR = 'data-reticle-harness-toggle';
+export const HARNESS_COPY_PROMPT_ATTR = 'data-reticle-harness-copy-prompt';
+export function harnessGateIn(instrumentation, config) {
+    const local = localGateIn(instrumentation);
+    const platform = config?.gate;
+    if (platform === undefined)
+        return local;
+    const prompt = platform.prompt ?? local?.prompt;
+    const reason = platform.unlocked ? undefined : (platform.reason ?? local?.reason);
+    return {
+        percent: platform.percent ?? local?.percent ?? 0,
+        unlocked: platform.unlocked,
+        ...(reason === undefined ? {} : { reason }),
+        ...(prompt === undefined ? {} : { prompt }),
+    };
+}
+function localGateIn(instrumentation) {
+    const raw = instrumentation?.['harnessGate'];
+    if ('object' !== typeof raw || null === raw)
+        return undefined;
+    const gate = raw;
+    const percent = gate['percent'];
+    const unlocked = gate['unlocked'];
+    if ('number' !== typeof percent || 'boolean' !== typeof unlocked)
+        return undefined;
+    const reason = gate['reason'];
+    const prompt = instrumentation?.['prompt'];
+    return {
+        percent: Math.round(percent),
+        unlocked,
+        ...('string' === typeof reason ? { reason } : {}),
+        ...('string' === typeof prompt ? { prompt } : {}),
+    };
+}
+const row = (inner) => `<div class="reticle-harness-row">${inner}</div>`;
+const wrapRow = (inner) => `<div class="reticle-harness-row reticle-harness-row-wrap">${inner}</div>`;
+const said = (text) => `<span class="reticle-harness-said">${text}</span>`;
+const runRow = (lead, button) => row(`<span class="reticle-harness-lead">${lead}</span>${button}`);
+const STOP_BUTTON = `<button type="button" data-reticle-harness-stop class="reticle-harness-run reticle-harness-stop">${HARNESS_ROW_TEXT.STOP}</button>`;
+const link = (href, label) => `<a class="reticle-harness-link" href="${href}" target="_blank" rel="noopener noreferrer">${label}</a>`;
+export function creditsShort(credits) {
+    return credits === undefined || creditsSpent(credits) ? '' : creditsUsageText(credits);
+}
+function creditsUsedRow(credits, planUrl) {
+    if (credits.kind === undefined)
+        return row(`${said(HARNESS_ROW_TEXT.NO_CREDITS)}${link(planUrl, HARNESS_ROW_TEXT.MORE)}`);
+    const text = creditsUsedText(credits);
+    const action = text.action !== undefined
+        ? link(planUrl, `${text.action} ↗`)
+        : CreditKind.TRIAL === credits.kind
+            ? link(planUrl, HARNESS_ROW_TEXT.PLAN)
+            : '';
+    return wrapRow(`${said(text.said)}${action}`);
+}
+function footState(s) {
+    if (true === s.starting)
+        return HARNESS_ROW_TEXT.STARTING;
+    const gate = s.gate;
+    if (gate !== undefined && !gate.unlocked && gate.reason !== undefined)
+        return HARNESS_ROW_TEXT.footSetup(gate.percent);
+    const config = s.config;
+    if (config === undefined)
+        return HARNESS_ROW_TEXT.FOOT_LINK;
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return HARNESS_ROW_TEXT.FOOT_NO_CREDITS;
+    if (!config.harnessEntitled)
+        return HARNESS_ROW_TEXT.FOOT_NOT_ENTITLED;
+    if (false === config.providerReady)
+        return HARNESS_ROW_TEXT.FOOT_NO_PROVIDER;
+    const credits = config.credits;
+    return credits === undefined
+        ? ''
+        : HARNESS_ROW_TEXT.creditsLeft(Math.max(0, credits.limit - credits.used), credits.daysLeft);
+}
+function switchable(s) {
+    const config = s.config;
+    if (config === undefined)
+        return false;
+    if (s.gate !== undefined && !s.gate.unlocked && s.gate.reason !== undefined)
+        return false;
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return false;
+    return config.harnessEntitled && false !== config.providerReady;
+}
+export function harnessFootHtml(s) {
+    if (s.account === undefined || !s.account.signedIn)
+        return '';
+    if (s.drive !== undefined && s.canDrive)
+        return row(`<button type="button" ${HARNESS_OPEN_ATTR} class="reticle-harness-open"><span class="reticle-harness-name">${HARNESS_ROW_TEXT.NAME}</span><span class="reticle-harness-state">${esc(HARNESS_ROW_TEXT.driving(s.startedAs === undefined ? undefined : personaLabel(s.startedAs), s.drive.steps))}</span><span class="reticle-harness-chev" aria-hidden="true">›</span></button>${STOP_BUTTON}`);
+    const on = true === s.config?.harnessEnabled;
+    const credits = s.config?.credits;
+    const title = credits === undefined ? '' : ` title="${esc(creditsUsageText(credits))}"`;
+    const toggle = switchable(s)
+        ? `<button type="button" role="switch" ${HARNESS_TOGGLE_ATTR} class="reticle-harness-toggle" aria-checked="${String(on)}" aria-label="${HARNESS_ROW_TEXT.TOGGLE}"><span class="reticle-harness-knob"></span></button>`
+        : '';
+    return row(`<button type="button" ${HARNESS_OPEN_ATTR} class="reticle-harness-open"${title}><span class="reticle-harness-name">${HARNESS_ROW_TEXT.NAME}</span><span class="reticle-harness-state">${esc(footState(s))}</span><span class="reticle-harness-chev" aria-hidden="true">›</span></button>${toggle}`);
+}
+export function harnessRowHtml(s) {
+    if (s.account === undefined)
+        return '';
+    if (!s.account.signedIn)
+        return wrapRow(`${said(HARNESS_ROW_TEXT.SIGNED_OUT)}<button type="button" ${ACCOUNT_SIGNIN_ATTR} class="reticle-harness-link">${HARNESS_ROW_TEXT.SIGN_IN}</button>`);
+    if (s.drive !== undefined && s.canDrive)
+        return (runRow(said(HARNESS_ROW_TEXT.driving(s.startedAs === undefined ? undefined : personaLabel(s.startedAs), s.drive.steps)), STOP_BUTTON) + personaCustomHtml(s.pick, true));
+    const gate = s.gate;
+    if (gate !== undefined && !gate.unlocked && gate.reason !== undefined)
+        return wrapRow(`${said(esc(gate.reason))}${gate.prompt === undefined
+            ? ''
+            : `<button type="button" ${HARNESS_COPY_PROMPT_ATTR} class="reticle-harness-link">${HARNESS_ROW_TEXT.COPY_PROMPT}</button>`}`);
+    const config = s.config;
+    if (config === undefined)
+        return wrapRow(`${said(HARNESS_ROW_TEXT.UNLINKED)}<button type="button" ${HARNESS_LINK_ATTR} class="reticle-harness-run"${true === s.linking ? ' disabled' : ''}>${true === s.linking ? HARNESS_ROW_TEXT.LINKING : HARNESS_ROW_TEXT.LINK}</button>`);
+    if (config.credits !== undefined && creditsSpent(config.credits))
+        return creditsUsedRow(config.credits, s.planUrl);
+    if (!config.harnessEntitled)
+        return row(`${said(HARNESS_ROW_TEXT.NOT_ENTITLED)}${link(s.planUrl, HARNESS_ROW_TEXT.PLANS)}`);
+    if (false === config.providerReady)
+        return row(`${said(HARNESS_ROW_TEXT.NO_PROVIDER)}${link(s.setupUrl, HARNESS_ROW_TEXT.SET_UP)}`);
+    if (!config.harnessEnabled)
+        return row(`${said(gate === undefined ? HARNESS_ROW_TEXT.OFF : HARNESS_ROW_TEXT.canSwitchOn(gate.percent))}<button type="button" ${HARNESS_SWITCH_ON_ATTR} class="reticle-harness-run">${HARNESS_ROW_TEXT.TURN_ON}</button>`);
+    if (!s.canDrive)
+        return '';
+    const starting = true === s.starting;
+    return (runRow(personaPickHtml(s.pick, starting), `<button type="button" data-reticle-harness-run class="reticle-harness-run"${starting ? ' disabled' : ''}>${starting ? HARNESS_ROW_TEXT.STARTING : HARNESS_ROW_TEXT.RUN}</button>`) + personaCustomHtml(s.pick, starting));
+}
+export const HARNESS_ROW_CSS = `
+[data-reticle-chat-panel] .reticle-harness-spot{flex:none;display:flex;flex-direction:column;gap:4px;}
+[data-reticle-chat-panel] .reticle-harness-spot[hidden],[data-reticle-chat-panel] .reticle-harness-spot:empty{display:none;}
+[data-reticle-chat-panel] .reticle-harness-row{display:flex;align-items:center;gap:6px;min-height:30px;min-width:0;}
+[data-reticle-chat-panel] .reticle-harness-lead{flex:1;min-width:0;display:flex;align-items:center;gap:6px;}
+[data-reticle-chat-panel] .reticle-harness-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}
+[data-reticle-chat-panel] .reticle-harness-row-wrap{flex-wrap:wrap;row-gap:2px;padding:4px 0;}
+[data-reticle-chat-panel] .reticle-harness-row-wrap .reticle-harness-said{flex:1 1 100%;white-space:normal;}
+[data-reticle-chat-panel] .reticle-harness-said code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
+[data-reticle-chat-panel] .reticle-harness-as{flex:none;font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);}
+[data-reticle-chat-panel] .reticle-harness-persona{box-sizing:border-box;flex:1;min-width:0;width:100%;height:30px;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);
+  background:var(--reticle-hud-ground);border:1px solid var(--reticle-hud-border-strong);border-radius:var(--reticle-hud-radius-sm);padding:0 var(--reticle-hud-space-2);}
+[data-reticle-chat-panel] .reticle-harness-spot > .reticle-harness-persona{flex:none;}
+[data-reticle-chat-panel] select.reticle-harness-persona{padding-right:2px;text-overflow:ellipsis;}
+[data-reticle-chat-panel] .reticle-harness-persona::placeholder{color:var(--reticle-hud-text-faint);}
+[data-reticle-chat-panel] .reticle-harness-persona:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}
+[data-reticle-chat-panel] .reticle-harness-run{flex:none;box-sizing:border-box;height:30px;padding:0 12px;border:0;border-radius:var(--reticle-hud-radius-sm);cursor:pointer;white-space:nowrap;
+  background:var(--reticle-hud-brand);color:#160b02;font:inherit;font-size:var(--reticle-hud-size-sm);font-weight:700;}
+[data-reticle-chat-panel] .reticle-harness-run:hover{filter:brightness(1.08);}
+[data-reticle-chat-panel] .reticle-harness-run:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}
+[data-reticle-chat-panel] .reticle-harness-stop{background:transparent;color:var(--reticle-hud-text);border:1px solid var(--reticle-hud-border-strong);}
+[data-reticle-chat-panel] .reticle-harness-link{flex:none;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:var(--reticle-hud-brand);font-size:var(--reticle-hud-size-sm);font-weight:600;text-decoration:none;white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-harness-link:hover{text-decoration:underline;}
+[data-reticle-chat-panel] .reticle-harness-open{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 var(--reticle-hud-space-2);border:0;border-radius:var(--reticle-hud-radius-sm);background:transparent;cursor:pointer;
+  text-align:left;white-space:nowrap;font:inherit;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text);}
+[data-reticle-chat-panel] .reticle-harness-name{flex:none;font-weight:600;}
+[data-reticle-chat-panel] .reticle-harness-state{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--reticle-hud-text-muted);font-size:11px;font-variant-numeric:tabular-nums;}
+[data-reticle-chat-panel] .reticle-harness-chev{flex:none;color:var(--reticle-hud-text-faint);}
+[data-reticle-chat-panel] .reticle-harness-toggle{flex:none;position:relative;width:30px;height:18px;padding:0;border:0;border-radius:9px;cursor:pointer;background:var(--reticle-hud-border-strong);transition:background .15s;}
+[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked="true"]{background:var(--reticle-hud-brand);}
+[data-reticle-chat-panel] .reticle-harness-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;}
+[data-reticle-chat-panel] .reticle-harness-toggle[aria-checked="true"] .reticle-harness-knob{transform:translateX(12px);}
+[data-reticle-chat-panel] .reticle-harness-toggle:focus-visible{outline:2px solid var(--reticle-hud-text);outline-offset:2px;}
+[data-reticle-chat-panel] .reticle-harness-open:hover{background:var(--reticle-hud-hover);}
+[data-reticle-chat-panel] .reticle-harness-open:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}
+[data-reticle-chat-panel] .reticle-harness-run:disabled,[data-reticle-chat-panel] .reticle-harness-persona:disabled{opacity:.6;cursor:default;}
+[data-reticle-chat-panel] .reticle-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-foot-meta{margin:0;font-size:11px;line-height:1.3;color:var(--reticle-hud-text-muted);overflow-wrap:anywhere;}
+[data-reticle-chat-panel] .reticle-foot-meta:empty{display:none;}
+`;

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

@@ -0,0 +1,10 @@
+import { type PlanView } from '@reticlehq/core';
+export declare const PLAN_ATTR = "data-reticle-plan";
+export declare const PLAN_HTML = "<div data-reticle-plan class=\"reticle-plan\" hidden></div>";
+export declare const PLAN_CSS: string;
+export declare function parsePlanView(args: Record<string, unknown>): PlanView | undefined;
+export declare class PlanBoard {
+    #private;
+    mount(root: HTMLElement): void;
+    paint(view: PlanView): void;
+}