@reticlehq/browser 3.4.0 → 3.6.0

package/dist/presenter/presenter-frame.js

@@ -0,0 +1,189 @@
+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 credits every month for autonomous end-to-end checks',
+    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 control sits in the footer beside 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);}
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-spot{flex:none;margin-left:auto;padding:0;border:0;}
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-row{min-height:0;gap:var(--reticle-hud-space-2);}
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-copy strong{font-size:var(--reticle-hud-size-xs);color:var(--reticle-hud-text-muted);white-space:nowrap;}
+/* The explanation stays for screen readers; sighted users get it from the link it sits beside. */
+[${CHAT_PANEL_ATTR}] [data-reticle-foot] .reticle-harness-copy span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
+${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:10px;}
+[${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:var(--reticle-hud-control-size);height:var(--reticle-hud-control-size);
+  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:var(--reticle-hud-inset);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-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;
+}

package/dist/presenter/presenter-plan.js

@@ -0,0 +1,185 @@
+import { ScriptStatus } from '@reticlehq/core';
+export const PLAN_ATTR = 'data-reticle-plan';
+const CLOSE_ATTR = 'data-reticle-plan-close';
+const JOURNEY_ATTR = 'data-reticle-plan-journey';
+export const PLAN_HTML = `<div ${PLAN_ATTR} class="reticle-plan" hidden></div>`;
+const TEXT = {
+    TITLE: 'Harness plan',
+    CLOSE: 'Hide the plan',
+    WAITS: 'waits on',
+    AT_ONCE: 'at once',
+    LANE: 'Lane',
+};
+const GLYPH = {
+    [ScriptStatus.PENDING]: '○',
+    [ScriptStatus.RUNNING]: '◐',
+    [ScriptStatus.PASSED]: '✓',
+    [ScriptStatus.FAILED]: '✗',
+    [ScriptStatus.BLOCKED]: '⊘',
+    [ScriptStatus.NOT_TAKEN]: '–',
+};
+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;}
+`;
+const STATUSES = new Set(Object.values(ScriptStatus));
+function statusOf(value) {
+    return 'string' === typeof value && STATUSES.has(value)
+        ? value
+        : ScriptStatus.PENDING;
+}
+function textOf(value) {
+    return 'string' === typeof value ? value : '';
+}
+function listOf(value) {
+    return Array.isArray(value)
+        ? value.filter((v) => 'object' === typeof v && null !== v)
+        : [];
+}
+export function parsePlanView(args) {
+    const lanes = listOf(args['lanes']).map((lane) => ({
+        id: textOf(lane['id']),
+        journeys: listOf(lane['journeys']).map((j) => ({
+            id: textOf(j['id']),
+            title: textOf(j['title']),
+            ...('string' === typeof j['persona'] ? { persona: j['persona'] } : {}),
+            waitsOn: Array.isArray(j['waitsOn']) ? j['waitsOn'].map(textOf) : [],
+            status: statusOf(j['status']),
+            steps: listOf(j['steps']).map((s) => ({
+                label: textOf(s['label']),
+                status: statusOf(s['status']),
+            })),
+        })),
+    }));
+    if (0 === lanes.length)
+        return undefined;
+    const parallel = 'number' === typeof args['parallel'] ? args['parallel'] : 1;
+    return { parallel, lanes };
+}
+function el(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+export class PlanBoard {
+    #host;
+    #view;
+    #dismissed = false;
+    #toggled = new Map();
+    mount(root) {
+        this.#host = root.querySelector(`[${PLAN_ATTR}]`) ?? undefined;
+        this.#host?.addEventListener('click', (event) => {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            if (null !== target.closest(`[${CLOSE_ATTR}]`)) {
+                this.#dismissed = true;
+                this.#paint();
+                return;
+            }
+            const card = target.closest(`[${JOURNEY_ATTR}]`);
+            const key = card?.getAttribute(JOURNEY_ATTR);
+            if (null === key || key === undefined)
+                return;
+            this.#toggled.set(key, 'true' !== card?.getAttribute('aria-expanded'));
+            this.#paint();
+        });
+        this.#paint();
+    }
+    paint(view) {
+        const fresh = view.lanes.every((lane) => lane.journeys.every((j) => ScriptStatus.PENDING === j.status));
+        if (fresh) {
+            this.#dismissed = false;
+            this.#toggled.clear();
+        }
+        this.#view = view;
+        this.#paint();
+    }
+    #paint() {
+        const host = this.#host;
+        const view = this.#view;
+        if (host === undefined)
+            return;
+        host.replaceChildren();
+        host.hidden = view === undefined || this.#dismissed;
+        if (view === undefined || this.#dismissed)
+            return;
+        const journeys = view.lanes.flatMap((lane) => lane.journeys);
+        const done = journeys.filter((j) => ScriptStatus.PASSED === j.status).length;
+        const head = el('div', 'reticle-plan-head');
+        head.append(el('strong', '', TEXT.TITLE), el('span', '', `${String(done)} of ${String(journeys.length)} passed · ${String(view.lanes.length)} lane(s)` +
+            (1 < view.parallel ? `, ${String(view.parallel)} ${TEXT.AT_ONCE}` : '')));
+        const close = el('button', 'reticle-plan-close', '×');
+        close.setAttribute('type', 'button');
+        close.setAttribute(CLOSE_ATTR, '');
+        close.setAttribute('aria-label', TEXT.CLOSE);
+        close.setAttribute('title', TEXT.CLOSE);
+        head.append(close);
+        const lanes = el('div', 'reticle-plan-lanes');
+        for (const lane of view.lanes) {
+            const row = el('div', 'reticle-plan-lane');
+            const name = el('span', 'reticle-plan-lane-name', lane.id);
+            name.setAttribute('title', `${TEXT.LANE} ${lane.id}`);
+            const journeys = el('div', 'reticle-plan-lane-journeys');
+            for (const journey of lane.journeys)
+                journeys.append(this.#card(lane.id, journey));
+            row.append(name, journeys);
+            lanes.append(row);
+        }
+        host.append(head, lanes);
+    }
+    #card(laneId, journey) {
+        const key = `${laneId}/${journey.id}`;
+        const open = this.#toggled.get(key) ??
+            (ScriptStatus.RUNNING === journey.status || ScriptStatus.FAILED === journey.status);
+        const card = el('button', 'reticle-plan-journey');
+        card.setAttribute('type', 'button');
+        card.setAttribute(JOURNEY_ATTR, key);
+        card.setAttribute('data-status', journey.status);
+        card.setAttribute('aria-expanded', String(open));
+        const row = el('span', 'reticle-plan-row');
+        row.append(el('span', 'reticle-plan-glyph', GLYPH[journey.status]), el('b', '', journey.title));
+        card.append(row);
+        const meta = [
+            journey.persona,
+            0 < journey.waitsOn.length ? `${TEXT.WAITS} ${journey.waitsOn.join(', ')}` : undefined,
+        ].filter((part) => part !== undefined && 0 < part.length);
+        if (0 < meta.length)
+            card.append(el('span', 'reticle-plan-meta', meta.join(' · ')));
+        if (open && 0 < journey.steps.length) {
+            const steps = el('span', 'reticle-plan-steps');
+            for (const step of journey.steps) {
+                const line = el('span', 'reticle-plan-step');
+                line.setAttribute('data-status', step.status);
+                line.append(el('span', 'reticle-plan-glyph', GLYPH[step.status]), el('span', '', step.label));
+                steps.append(line);
+            }
+            card.append(steps);
+        }
+        return card;
+    }
+}

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

@@ -51,6 +51,11 @@ export const REPORT_CSS = `
   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-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-verdict{
   flex:1;padding:5px 8px;border-radius:8px;font-size:10.5px;text-align:center;
   background:rgba(255,255,255,.05);color:var(--reticle-muted);}
@@ -96,6 +101,8 @@ export const REPORT_CSS = `
   display:inline-block;margin-top:8px;font-size:10px;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: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;}

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

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

package/dist/presenter/presenter-report.js

@@ -4,8 +4,9 @@ import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
 import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, SYNC_BTN_ATTR, accountControlHtml, syncButtonHtml, } from './presenter-account.js';
 import { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
-import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './chrome/presenter-report-copy.js';
+import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, COVERAGE_LEVELS, } from './chrome/presenter-report-copy.js';
 const SCOPE_ATTR = 'data-reticle-report-scope';
+const SCOPE = { PROJECT: 'project', MACHINE: 'machine' };
 const SHARE_X_ATTR = 'data-reticle-share-x';
 const SHARE_IN_ATTR = 'data-reticle-share-in';
 const SHARE_COPY_ATTR = 'data-reticle-share-copy';
@@ -17,7 +18,7 @@ export function reportPanelHtml() {
     <div class="reticle-report-inner">
       <div class="reticle-report-head">
         <span class="reticle-report-title">${REPORT_TEXT.TITLE}</span>
-        <button type="button" ${SCOPE_ATTR} class="reticle-report-scope" aria-pressed="false">${REPORT_TEXT.PROJECT}</button>
+        <span class="reticle-segmented reticle-report-scopes" role="group" aria-label="${REPORT_TEXT.SCOPE_LABEL}"><button type="button" ${SCOPE_ATTR}="${SCOPE.PROJECT}" aria-pressed="true">${REPORT_TEXT.PROJECT}</button><button type="button" ${SCOPE_ATTR}="${SCOPE.MACHINE}" aria-pressed="false" title="${REPORT_TEXT.GLOBAL_TITLE}">${REPORT_TEXT.GLOBAL}</button></span>
         <button type="button" ${REPORT_CLOSE_ATTR} class="reticle-report-close" title="Close" aria-label="Close impact">${close}</button>
       </div>
       <div class="reticle-report-body" data-reticle-report-body></div>
@@ -76,13 +77,46 @@ function defects(scope, dashboardUrl) {
         return `<li class="reticle-report-defect"><span class="reticle-report-defect-title">${esc(d.title)}</span>${detail}${source}${rowLink}</li>`;
     })
         .join('');
+    const hidden = scope.counts.failed > list.length;
     const more = !linked
-        ? ''
-        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
+        ? !hidden
+            ? ''
+            : `<button type="button" data-reticle-defects-all ${ACCOUNT_SIGNIN_ATTR} class="reticle-report-defects-all" title="${REPORT_TEXT.DEFECTS_SEE_ALL_TITLE}">${REPORT_TEXT.DEFECTS_SEE_ALL} (${String(scope.counts.failed)}) →</button>`
+        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${hidden ? ` (${String(scope.counts.failed)})` : ''}</a>`;
     const sync = syncButtonHtml(dashboardUrl);
     return `<div class="reticle-report-defects-wrap"><div class="reticle-report-defects-head"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span>${sync}</div><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }
-export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
+function syncStatusHtml(sync) {
+    if (sync === undefined)
+        return '';
+    const num = (key) => ('number' === typeof sync[key] ? sync[key] : 0);
+    const status = sync['status'];
+    const label = 'refused' === status
+        ? `${String(num('refused'))} refused`
+        : 'pending' === status
+            ? `${String(num('pending'))} waiting`
+            : 'on-platform' === status
+                ? `Synced · ${String(num('onPlatform'))}`
+                : 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>`;
+}
+function coverageHtml(coverage) {
+    if (coverage === undefined)
+        return '';
+    const known = COVERAGE_LEVELS.filter((l) => 'number' === typeof coverage[l.key]);
+    if (0 === known.length)
+        return '';
+    const pct = (key) => `${String(Math.round(coverage[key] ?? 0))}%`;
+    const head = 'number' === typeof coverage['proved'] ? pct('proved') : pct(known[0]?.key ?? '');
+    const rows = known
+        .map((l) => `<span class="reticle-report-coverage-level">${pct(l.key)} ${l.label}</span>`)
+        .join('');
+    return `<div class="reticle-report-coverage" title="${REPORT_TEXT.COVERAGE_HELP}"><span class="reticle-report-section">${REPORT_TEXT.COVERAGE}</span><span class="reticle-report-coverage-value">${head}</span><div class="reticle-report-coverage-levels">${rows}</div></div>`;
+}
+export function reportBodyHtml(scope, dashboardUrl, account, projectName, coverage, sync) {
     const c = scope.counts;
     if (0 === c.calls)
         return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
@@ -105,8 +139,8 @@ export function reportBodyHtml(scope, dashboardUrl, account, projectName) {
         card(compactNumber(scope.savings.tokens.value), REPORT_TEXT.SAVED_TOKENS, scope.savings.tokens.basis),
         card(compactDuration(scope.savings.minutes.value * 60_000), REPORT_TEXT.SAVED_MINUTES, scope.savings.minutes.basis),
     ].join('');
-    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}</div>`;
-    return `${identity}${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
+    const identity = `<div class="reticle-report-identity">${accountControlHtml(account, { dashboardUrl, projectName, verdicts: c.verdicts, defects: c.failed })}${syncButtonHtml(dashboardUrl)}${syncStatusHtml(sync)}</div>`;
+    return `<div class="reticle-report-top">${streak}${identity}</div>${hero}${verdicts}${coverageHtml(coverage)}<div class="reticle-report-grid">${cards}</div>${defects(scope, dashboardUrl)}${chart(scope)}${localOnly(scope, dashboardUrl, account)}`;
 }
 function localOnly(scope, dashboardUrl, account) {
     if (dashboardUrl !== undefined)
@@ -140,14 +174,17 @@ export class PresenterReport {
             e.stopPropagation();
             this.close();
         });
-        const scopeBtn = root.querySelector(`[${SCOPE_ATTR}]`);
-        scopeBtn?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.#global = !this.#global;
-            scopeBtn.setAttribute('aria-pressed', this.#global ? 'true' : 'false');
-            scopeBtn.textContent = this.#global ? REPORT_TEXT.GLOBAL : REPORT_TEXT.PROJECT;
-            this.#paint();
-        });
+        const scopeBtns = root.querySelectorAll(`[${SCOPE_ATTR}]`);
+        for (const btn of scopeBtns) {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.#global = SCOPE.MACHINE === btn.getAttribute(SCOPE_ATTR);
+                for (const other of scopeBtns) {
+                    other.setAttribute('aria-pressed', other === btn ? 'true' : 'false');
+                }
+                this.#paint();
+            });
+        }
         root.querySelector(`[${SHARE_X_ATTR}]`)?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.#openShare(buildXShareUrl(this.shareText()));
@@ -237,7 +274,7 @@ export class PresenterReport {
         this.#body.innerHTML =
             scope === undefined
                 ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
-                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName);
+                : reportBodyHtml(scope, this.#snapshot?.dashboardUrl, this.#snapshot?.account, this.#snapshot?.projectName, this.#global ? undefined : this.#snapshot?.coverage, this.#global ? undefined : this.#snapshot?.sync);
     }
     #openShare(url) {
         window.open(url, '_blank', 'noopener,noreferrer');

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

@@ -125,6 +125,16 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link-caret{display:inline-flex;align-items:center;flex:none;opacity:.55;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:hover{background:rgba(255,255,255,.04);color:#fff;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill-row{padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.08);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill{
+  width:100%;display:flex;align-items:center;justify-content:center;
+  border:1px solid rgba(239,68,68,.55);border-radius:8px;background:rgba(239,68,68,.12);color:#f87171;
+  font:inherit;font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;
+  transition:background .12s,border-color .12s,color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill:hover{background:rgba(239,68,68,.22);border-color:#ef4444;color:#fca5a5;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill[data-armed="1"]{background:#ef4444;border-color:#ef4444;color:#fff;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill:focus-visible{outline:2px solid rgba(239,68,68,.6);outline-offset:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-kill-sub{margin:8px 0 0;font-size:11px;line-height:1.45;color:rgba(255,255,255,.55);}
 [${'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

@@ -41,11 +41,16 @@ 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 function paintSettingsAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
 export declare function settingsPanelHtml(): string;
 export interface SettingsHost {
     onHideUntilRestart?: () => void;
+    onKill?: () => void;
     onHarness?: (enabled: boolean) => void;
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;