@reticlehq/browser 3.6.0 → 3.7.0

package/dist/presenter/presenter-settings.js

@@ -4,8 +4,9 @@ import { HUD_SURFACE_CLASS } from './chrome/presenter-hud-chrome.js';
 import { resetHudDockPosition } from './presenter-drag.js';
 import { findDock, scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { SETTINGS_CSS } from './presenter-settings-styles.js';
+import { creditsLeftText, creditsSpent, creditsUsedText } from '@reticlehq/core/hud';
 import { DISCOVERY_CALL_URL, FOUNDER_EMAIL, FOUNDER_MAILTO } from '@reticlehq/core';
-import { ACCOUNT_TEXT, accountControlHtml, } from './presenter-account.js';
+import { ACCOUNT_TEXT, accountControlHtml, paintAccountSlot, } from './presenter-account.js';
 export { SETTINGS_CSS };
 export const OutputDetail = {
     MINIMAL: 'minimal',
@@ -131,39 +132,59 @@ function patchSettings(patch) {
 function settingsHelpIcon() {
     return hiIconHtml(PresenterIcon.HELP, PRESENTER_ICON_SIZE.HELP);
 }
-function settingsLabel(text, helpTitle) {
+const SETTING_TEXT = {
+    outputDetail: ['Output detail', 'How much a copied run includes.'],
+    autoOpenChat: ['Open the log automatically', 'Opens this panel when a session starts.'],
+    showTimestamps: ['Show timestamps', 'Shows how long ago each log row happened.'],
+    showTally: ['Show pass/fail count', 'A score pill for this session in the toolbar.'],
+    reactComponents: ['React component names', 'Adds component names to copied runs.'],
+    blockPageInteractions: [
+        'Block page while adding notes',
+        'Clicks pin a note instead of using the app.',
+    ],
+    clearOnCopy: ['Clear notes after copying', 'Starts fresh once your notes are copied.'],
+    hideUntilRestart: ['Hide until reload', 'Hides the HUD until this page reloads.'],
+    harnessEnabled: [
+        'Allow Reticle to drive',
+        'Off by default. Unlocks at 80% instrumentation; lets Run Harness test this project.',
+    ],
+    reduceMotion: ['Reduce motion', 'Fewer HUD animations.'],
+    ambientGlow: ['Page glow', 'Tints the page edges while a session runs.'],
+    workspace: ['Workspace', 'The Reticle account this machine is signed in to.'],
+};
+function settingsLabel(text, helpTitle, desc = '') {
     const help = settingsHelpIcon();
-    return `<span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" data-reticle-settings-help title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>`;
+    const line = '' === desc ? '' : `<span class="reticle-settings-desc">${desc}</span>`;
+    return `<span class="reticle-settings-labelcol"><span class="reticle-settings-label">${text}<button type="button" class="reticle-settings-help" data-reticle-settings-help title="${helpTitle}" aria-label="${helpTitle}">${help}</button></span>${line}</span>`;
 }
-function settingsToggleRow(key, label, helpTitle, extra = '') {
+function settingsToggleRow(key, helpTitle, extra = '') {
+    const [label, desc] = SETTING_TEXT[key];
     return `<div class="reticle-settings-row" ${extra}>
-    ${settingsLabel(label, helpTitle)}
+    ${settingsLabel(label, helpTitle, desc)}
     <button type="button" class="reticle-settings-toggle" ${SETTING_KEY_ATTR}="${key}" role="switch" aria-checked="false"></button>
   </div>`;
 }
-function settingsCheckRow(key, label, checked) {
+function settingsCheckRow(key, checked) {
+    const [label, desc] = SETTING_TEXT[key];
     const on = checked ? 'true' : 'false';
     return `<label class="reticle-settings-checkrow" data-reticle-check-row="${key}">
     <span class="reticle-settings-check" data-reticle-check="${key}" role="checkbox" aria-checked="${on}" tabindex="0"></span>
-    <span class="reticle-settings-check-label">${label}</span>
+    <span class="reticle-settings-labelcol"><span class="reticle-settings-check-label">${label}</span><span class="reticle-settings-desc">${desc}</span></span>
   </label>`;
 }
 export const SETTINGS_ACCOUNT_ATTR = 'data-reticle-settings-account';
 const SETTINGS_ACCOUNT_ROW_ATTR = 'data-reticle-settings-account-row';
 const HELP_TEXT_ATTR = 'data-reticle-settings-helptext';
 const SETTINGS_HARNESS_ROW_ATTR = 'data-reticle-settings-harness-row';
-const HARNESS_HELP = 'Let Reticle drive this app by itself to find defects. Set here or in your dashboard — both write to the same place.';
-const HARNESS_LOCKED_HELP = 'The Harness is not available to this workspace right now. Every workspace gets free Harness credits each month: see Plan in your Reticle dashboard.';
+const HARNESS_HELP = 'Let Reticle test this app by itself to find defects, from Run Harness or from your coding agent. Off blocks every run. Set here or in your dashboard — both write to the same place.';
+export const HARNESS_LOCKED_HELP = 'The Harness is not available to this workspace right now: see Plan in your Reticle dashboard.';
 export function creditsLeft(credits) {
     if (credits === undefined)
         return '';
-    const left = Math.max(0, credits.limit - credits.used);
-    return 0 === left
-        ? `All ${String(credits.limit)} Harness credits used this month`
-        : `${String(left)} of ${String(credits.limit)} Harness credits left this month`;
+    return creditsSpent(credits) ? creditsUsedText(credits).said : creditsLeftText(credits);
 }
 const ACCOUNT_HELP = `Whether this machine is signed in to a Reticle workspace. Press ${ACCOUNT_TEXT.SIGNED_OUT} to sign in through your browser.`;
-export function paintHarnessRow(root, config) {
+export function paintHarnessRow(root, config, gate) {
     const row = root.querySelector(`[${SETTINGS_HARNESS_ROW_ATTR}]`);
     if (!(row instanceof HTMLElement))
         return;
@@ -175,15 +196,20 @@ export function paintHarnessRow(root, config) {
     const toggle = row.querySelector(`[${SETTING_KEY_ATTR}="harnessEnabled"]`);
     if (!(toggle instanceof HTMLElement))
         return;
-    const usable = config.harnessEntitled;
+    const locked = gate !== undefined && !gate.unlocked ? gate.reason : undefined;
+    const usable = config.harnessEntitled && locked === undefined;
     toggle.setAttribute('aria-checked', config.harnessEnabled && usable ? 'true' : 'false');
     toggle.setAttribute('aria-disabled', usable ? 'false' : 'true');
-    const help = row.querySelector('[data-reticle-help]');
+    const help = row.querySelector('[data-reticle-settings-help]');
     const credits = creditsLeft(config.credits);
     if (help instanceof HTMLElement)
-        help.title = usable
-            ? [HARNESS_HELP, credits].filter((t) => 0 < t.length).join(' ')
-            : HARNESS_LOCKED_HELP;
+        help.title =
+            locked ??
+                (usable
+                    ? [HARNESS_HELP, credits].filter((t) => 0 < t.length).join(' ')
+                    : creditsSpent(config.credits)
+                        ? credits
+                        : HARNESS_LOCKED_HELP);
 }
 export function paintSettingsAccount(root, account, dashboardUrl, details = {}) {
     const row = root.querySelector(`[${SETTINGS_ACCOUNT_ROW_ATTR}]`);
@@ -192,7 +218,7 @@ export function paintSettingsAccount(root, account, dashboardUrl, details = {})
         return;
     const html = accountControlHtml(account, { ...details, dashboardUrl }, true);
     row.hidden = 0 === html.length;
-    slot.innerHTML = html;
+    paintAccountSlot(slot, html);
 }
 const FEEDBACK_TEXT = {
     EMAIL: 'Email the founder',
@@ -206,6 +232,17 @@ const KILL_TEXT = {
     ARMED: 'Click again to kill Reticle',
     WARNING: 'Disconnects Reticle from this page: no HUD, no agent, nothing recorded. To bring it back, restart your dev server or reload the page.',
 };
+const SDK_VERSION_ATTR = 'data-reticle-sdk-version';
+const SDK_VERSION_TEXT = {
+    UNKNOWN: 'Reticle SDK version unknown',
+    KNOWN: (version) => `Reticle SDK ${version}`,
+};
+export function paintSdkVersion(root, version) {
+    const line = root.querySelector(`[${SDK_VERSION_ATTR}]`);
+    if (line !== null)
+        line.textContent =
+            version === undefined ? SDK_VERSION_TEXT.UNKNOWN : SDK_VERSION_TEXT.KNOWN(version);
+}
 export function settingsPanelHtml() {
     const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
     const caret = hiIconHtml(PresenterIcon.CARET_RIGHT, PRESENTER_ICON_SIZE.HELP);
@@ -227,27 +264,27 @@ export function settingsPanelHtml() {
       <div class="reticle-settings-body">
         <div class="reticle-settings-section">Session</div>
         <div class="reticle-settings-row">
-          ${settingsLabel('Output Detail', outputHelp)}
+          ${settingsLabel(SETTING_TEXT.outputDetail[0], outputHelp, SETTING_TEXT.outputDetail[1])}
           <button type="button" class="reticle-settings-cycle" data-reticle-settings-cycle="outputDetail"><span data-reticle-cycle-label></span><span class="reticle-settings-dots" data-reticle-cycle-dots></span></button>
         </div>
-        ${settingsToggleRow('autoOpenChat', 'Auto-open chat', autoChatHelp)}
-        ${settingsToggleRow('showTimestamps', 'Show timestamps', timestampsHelp)}
-        ${settingsToggleRow('showTally', 'Show verdict tally', tallyHelp)}
+        ${settingsToggleRow('autoOpenChat', autoChatHelp)}
+        ${settingsToggleRow('showTimestamps', timestampsHelp)}
+        ${settingsToggleRow('showTally', tallyHelp)}
         <div class="reticle-settings-section">Inspector</div>
-        ${settingsToggleRow('reactComponents', 'React Components', reactHelp, 'data-reticle-settings-react-row')}
+        ${settingsToggleRow('reactComponents', reactHelp, 'data-reticle-settings-react-row')}
         <div class="reticle-settings-section">Interaction</div>
-        ${settingsCheckRow('blockPageInteractions', 'Block page while adding notes', true)}
-        ${settingsCheckRow('clearOnCopy', 'Clear notes after copying', false)}
-        ${settingsToggleRow('hideUntilRestart', 'Hide until reload', hideHelp)}
-        ${settingsToggleRow('harnessEnabled', 'Autonomous driving', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
-        ${settingsToggleRow('reduceMotion', 'Reduce motion', motionHelp)}
+        ${settingsCheckRow('blockPageInteractions', true)}
+        ${settingsCheckRow('clearOnCopy', false)}
+        ${settingsToggleRow('hideUntilRestart', hideHelp)}
+        ${settingsToggleRow('harnessEnabled', harnessHelp, `${SETTINGS_HARNESS_ROW_ATTR} hidden`)}
+        ${settingsToggleRow('reduceMotion', motionHelp)}
         <div class="reticle-settings-section">Account</div>
         <div class="reticle-settings-row" ${SETTINGS_ACCOUNT_ROW_ATTR} hidden>
-          ${settingsLabel('Workspace', ACCOUNT_HELP)}
+          ${settingsLabel(SETTING_TEXT.workspace[0], ACCOUNT_HELP, SETTING_TEXT.workspace[1])}
           <span ${SETTINGS_ACCOUNT_ATTR}></span>
         </div>
         <div class="reticle-settings-section">Status theme</div>
-        ${settingsToggleRow('ambientGlow', 'Page glow', glowHelp)}
+        ${settingsToggleRow('ambientGlow', glowHelp)}
         <div class="reticle-settings-themes" data-reticle-settings-themes></div>
         <div class="reticle-settings-section">Help</div>
         <div class="reticle-settings-foot">
@@ -255,6 +292,7 @@ export function settingsPanelHtml() {
         <button type="button" class="reticle-settings-link" data-reticle-settings-mcp>MCP setup guide<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></button>
         <a class="reticle-settings-link" data-reticle-feedback-email href="${FOUNDER_MAILTO}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.EMAIL_TITLE}">${FEEDBACK_TEXT.EMAIL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
         <a class="reticle-settings-link" data-reticle-feedback-call href="${DISCOVERY_CALL_URL}" target="_blank" rel="noopener noreferrer" title="${FEEDBACK_TEXT.CALL_TITLE}">${FEEDBACK_TEXT.CALL}<span class="reticle-settings-link-caret" aria-hidden="true">${caret}</span></a>
+        <p class="reticle-settings-kill-sub" ${SDK_VERSION_ATTR}>${SDK_VERSION_TEXT.UNKNOWN}</p>
         <div class="reticle-settings-kill-row">
           <button type="button" class="reticle-settings-kill" ${KILL_ATTR}><span data-reticle-kill-label>${KILL_TEXT.LABEL}</span></button>
           <p class="reticle-settings-kill-sub">${KILL_TEXT.WARNING}</p>
@@ -317,7 +355,10 @@ export class PresenterSettingsPanel {
             setHiIcon(closeBtn, PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
         }
         if (this.#btn !== undefined) {
+            const label = this.#btn.querySelector('.reticle-nav-label');
             setHiIcon(this.#btn, PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
+            if (null !== label)
+                this.#btn.append(label);
             this.#btn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 this.open();
@@ -461,11 +502,11 @@ export class PresenterSettingsPanel {
         applyPresenterSettings(root, activeSettings);
         this.#host.onSettingsChange?.(activeSettings);
     }
-    paintHarness(config) {
+    paintHarness(config, gate) {
         const root = this.#panel;
         if (root === undefined)
             return;
-        paintHarnessRow(root, config);
+        paintHarnessRow(root, config, gate);
     }
     teardown() {
         this.#root = undefined;

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

@@ -88,8 +88,7 @@ export const SHELL_CSS = `
 [${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log]{
   pointer-events:none;}
 /* ...except a log with more than it shows: a feed nobody can scroll back through is not a log. */
-[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log][data-reticle-log-scrollable],
-[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] .reticle-flow-strip{
+[${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] [data-reticle-log][data-reticle-log-scrollable]{
   pointer-events:auto;}
 [${OVERLAY}][data-reticle-mode="idle"][data-reticle-block="0"] [${CHAT_PANEL}] :is(button,a,input,select,textarea){
   pointer-events:auto;}
@@ -132,6 +131,14 @@ export const SHELL_CSS = `
    so the two never overlap. The :empty rule keeps the gap closed when no account state was sent. */
 [${CHAT_PANEL}] .reticle-head-account{margin-left:auto;display:inline-flex;align-items:center;}
 [${CHAT_PANEL}] .reticle-head-account:empty{display:none;}
+/* The quiet way to the platform: one line of small text before the avatar, cut short before it pushes. */
+[${CHAT_PANEL}] .reticle-head-team{margin-left:auto;min-width:0;display:inline-flex;}
+[${CHAT_PANEL}] .reticle-head-team:empty{display:none;}
+[${CHAT_PANEL}] .reticle-head-team:not(:empty) + .reticle-head-account{margin-left:0;}
+[${CHAT_PANEL}] .reticle-team-link{min-width:0;max-width:100%;overflow:hidden;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--reticle-hud-size-xs);font-weight:500;color:var(--reticle-hud-text-muted);text-decoration:none;white-space:nowrap;text-overflow:ellipsis;}
+[${CHAT_PANEL}] .reticle-team-link span{display:block;overflow:hidden;text-overflow:ellipsis;}
+[${CHAT_PANEL}] .reticle-team-link:hover{color:var(--reticle-hud-brand);}
+[${CHAT_PANEL}] .reticle-team-link:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:2px;border-radius:var(--reticle-hud-radius-sm);}
 [${CHAT_PANEL}] .reticle-chat-brand .reticle-mark{height:14px;width:auto;}
 [${CHAT_PANEL}] .reticle-chat-brandname{font-size:12.5px;font-weight:600;letter-spacing:.01em;}
 [${CHAT_PANEL}] .reticle-view-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:28px;box-sizing:border-box;padding:6px 12px 4px;border-bottom:1px solid var(--reticle-hud-border);}
@@ -255,7 +262,7 @@ export const SHELL_CSS = `
 [${HUD}] .reticle-toolbar-actions{
   display:inline-flex;align-items:center;gap:2px;flex:none;
   padding:2px;border-radius:999px;background:rgba(0,0,0,.2);}
-[${HUD}] .reticle-toolbar-chrome{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:var(--reticle-hud-space-1);flex:1;min-width:0;}
+[${HUD}] .reticle-toolbar-chrome{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:var(--reticle-hud-space-1);flex:1;min-width:0;}
 [${HUD}] .reticle-tb-sep{width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px;flex:none;align-self:center;}
 
 [${HUD}] .reticle-tb-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;}
@@ -370,6 +377,8 @@ export const SHELL_CSS = `
  */
 [${OVERLAY}][${STATE}="unreachable"]{--reticle-state:var(--reticle-faint);}
 [${OVERLAY}][${STATE}="unreachable"] [${CHAT_PANEL}] .reticle-act-dot{animation:none;}
+/* The one status that is a sentence to act on: two lines, full contrast, the detail on hover. */
+[${OVERLAY}][${STATE}="unreachable"] [${CHAT_PANEL}] .reticle-act{white-space:normal;line-height:1.35;color:var(--reticle-fg);cursor:help;}
 [${OVERLAY}][${STATE}="paused"] [${CHAT_PANEL}] .reticle-act-dot,
 [${OVERLAY}][${STATE}="ended"] [${CHAT_PANEL}] .reticle-act-dot{animation:none;}
 @keyframes reticle-idle-pulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}

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

@@ -1,8 +1,8 @@
-import type { HarnessConfig } from '@reticlehq/core';
+import type { AgentLink, HarnessConfig, HarnessDrive } from '@reticlehq/core';
+import type { HarnessGateView } from './presenter-harness-row.js';
 import { PresenterReport } from './presenter-report.js';
 import type { AccountState } from '@reticlehq/core';
 import { type AccountDetails } from './presenter-account.js';
-import { type OfferState } from './carousel/offer-card.js';
 import { type ChatView } from './presenter-chat-views.js';
 import type { AnnotationItem } from '../review/annotator.js';
 import { type SettingsHost } from './presenter-settings.js';
@@ -14,17 +14,23 @@ interface HudShellCallbacks {
     onCollapse?: () => void;
     onSyncNow?: () => void;
     onHarness?: (enabled: boolean) => void;
+    onHarnessRun?: (persona?: string) => void;
+    onHarnessStop?: () => void;
+    onHarnessLink?: () => void;
     onSignIn?: () => void;
     settings?: SettingsHost;
 }
 export declare class HudShell {
     #private;
-    paintHarness(config: HarnessConfig | undefined): void;
+    setProjectId(projectId: string | undefined): void;
+    paintHarnessDrive(drive: HarnessDrive | undefined): void;
+    paintAgent(link: AgentLink | undefined): void;
+    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
     paintImpact(verdicts: number): void;
     paintAnnotations(items: readonly AnnotationItem[]): void;
     openView(view: ChatView): void;
     paintAccount(account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;
-    paintOffer(offer: OfferState | undefined, notices?: readonly unknown[]): void;
+    paintNotices(notices?: readonly unknown[]): void;
     constructor(callbacks?: HudShellCallbacks);
     static dockHtml(actStripHtml: string, bannerHtml: string, logAttr: string, flowsHtml: string, footHtml: string): string;
     get report(): PresenterReport;

package/dist/presenter/presenter-shell.js

@@ -1,10 +1,9 @@
 import { appModalOpen } from '../dom/dom-ignore.js';
 import { PresenterReport, reportPanelHtml } from './presenter-report.js';
 import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
-import { mountAccountControl } from './presenter-account.js';
+import { mountAccountControl, TEAM_SLOT_ATTR } from './presenter-account.js';
 import { paintSettingsAccount } from './presenter-settings.js';
 import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, MINIMISED_STORAGE_KEY, } from './presenter-config.js';
-import { offerDismissed } from './carousel/offer-card.js';
 import { paintCarousel } from './carousel/carousel.js';
 import { panelSlides } from './carousel/panel-slides.js';
 import { paintRail, RAIL_HTML, RAIL_PROMO_ATTR } from './presenter-frame.js';
@@ -14,7 +13,7 @@ import { installHudDragHandles, installHudPositionGuards } from './presenter-dra
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { hiIconHtml, hiToggleIconHtml, PRESENTER_ICON_SIZE, PresenterIcon, } from './icons/presenter-icons.js';
 import { HUD_SURFACE_CLASS, HUD_LOG_WELL_CLASS } from './chrome/presenter-hud-chrome.js';
-import { ChatViews, CHAT_VIEWS_NAV_HTML, ANNOTATIONS_HTML, FLOWS_PAGE_HTML, platformBase, } from './presenter-chat-views.js';
+import { ChatViews, CHAT_VIEWS_NAV_HTML, ANNOTATIONS_HTML, FLOWS_PAGE_HTML, HARNESS_PAGE_HTML, NAV_LABEL, navLabelHtml, platformBase, } from './presenter-chat-views.js';
 import { PresenterSettingsPanel, settingsPanelHtml, } from './presenter-settings.js';
 const DRAG_HANDLE_CLASS = 'reticle-toolbar-drag';
 const TRANSITION_LOCK_MS = 120;
@@ -23,16 +22,10 @@ const CHAT_PILL_LABEL = 'Open agent chat';
 const SETTINGS_LABEL = 'Settings';
 const AGENT_LOG_TITLE = 'Reticle';
 const EXIT_LABEL = 'Exit';
-function paintPromo(root, offer, notices = [], base) {
+function paintPromo(root, notices = [], base) {
     const target = root.querySelector(`[${RAIL_PROMO_ATTR}]`);
     if (null === target)
         return;
-    let dismissed = false;
-    try {
-        dismissed = offerDismissed(window.localStorage);
-    }
-    catch {
-    }
     let storage;
     try {
         storage = window.sessionStorage;
@@ -40,7 +33,7 @@ function paintPromo(root, offer, notices = [], base) {
     catch {
         storage = undefined;
     }
-    paintCarousel(target, panelSlides(offer, dismissed, notices, base), storage);
+    paintCarousel(target, panelSlides(notices, base), storage);
 }
 export class HudShell {
     #root;
@@ -67,15 +60,23 @@ export class HudShell {
     });
     #callbacks;
     #pushedAccount;
-    #pushedOffer;
     #pushedNotices = [];
     #pushedHarness;
     #promoBase;
     #accountTeardown;
-    paintHarness(config) {
+    setProjectId(projectId) {
+        this.#chatViews.setProjectId(projectId);
+    }
+    paintHarnessDrive(drive) {
+        this.#chatViews.paintDrive(drive);
+    }
+    paintAgent(link) {
+        this.#chatViews.paintAgent(link);
+    }
+    paintHarness(config, gate) {
         this.#pushedHarness = config;
-        this.#settings.paintHarness(config);
-        this.#chatViews.paintHarness(config);
+        this.#settings.paintHarness(config, gate);
+        this.#chatViews.paintHarness(config, gate);
         this.#repaintPromoIfMoved();
     }
     #promoLinks() {
@@ -86,7 +87,7 @@ export class HudShell {
         if (this.#root === undefined || base === this.#promoBase)
             return;
         this.#promoBase = base;
-        paintPromo(this.#root, this.#pushedOffer, this.#pushedNotices, base);
+        paintPromo(this.#root, this.#pushedNotices, base);
     }
     paintImpact(verdicts) {
         this.#chatViews.paintImpact(verdicts);
@@ -116,16 +117,15 @@ export class HudShell {
         this.#chatViews.paintAccount(account);
         this.#repaintPromoIfMoved();
     }
-    paintOffer(offer, notices = []) {
-        this.#pushedOffer = offer;
+    paintNotices(notices = []) {
         this.#pushedNotices = notices;
         this.#promoBase = this.#promoLinks();
         if (this.#root !== undefined)
-            paintPromo(this.#root, offer, notices, this.#promoBase);
+            paintPromo(this.#root, notices, this.#promoBase);
     }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
-        this.#chatViews = new ChatViews((enabled) => callbacks.onHarness?.(enabled), () => {
+        this.#chatViews = new ChatViews(() => {
             this.#chatViews.closePage();
             this.closeChat();
             this.#report.open();
@@ -140,6 +140,11 @@ export class HudShell {
             this.closeChat();
             this.#settings.close();
             this.#report.close();
+        }, {
+            run: (persona) => callbacks.onHarnessRun?.(persona),
+            stop: () => callbacks.onHarnessStop?.(),
+            setHarness: (on) => callbacks.onHarness?.(on),
+            link: () => callbacks.onHarnessLink?.(),
         });
         this.#settings = new PresenterSettingsPanel({
             ...callbacks.settings,
@@ -158,6 +163,7 @@ export class HudShell {
       <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Agent Log" aria-hidden="true">
         <div class="reticle-chat-head">
           <span class="reticle-chat-brand">${MARK_SVG}<span class="reticle-chat-brandname">${AGENT_LOG_TITLE}</span></span>
+          <span ${TEAM_SLOT_ATTR} class="reticle-head-team"></span>
           <span ${TOOLBAR_ACCOUNT_ATTR} class="reticle-head-account"></span>
         </div>
         <button type="button" ${CHAT_MIN_ATTR} class="reticle-chat-min" title="${CHAT_MIN_LABEL}" aria-label="${CHAT_MIN_LABEL}">${hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.TOOLBAR)}</button>
@@ -171,6 +177,7 @@ export class HudShell {
         ${footHtml}
       </div>
       ${FLOWS_PAGE_HTML}
+      ${HARNESS_PAGE_HTML}
       ${ANNOTATIONS_HTML}
       <button type="button" ${CHAT_PILL_ATTR} class="reticle-chat-pill" title="${CHAT_PILL_LABEL}" aria-label="${CHAT_PILL_LABEL}">
         ${MARK_SVG}
@@ -188,11 +195,11 @@ export class HudShell {
           <div class="reticle-toolbar-chrome">
             ${CHAT_VIEWS_NAV_HTML}
             <div class="reticle-tb-wrap">
-              <button type="button" ${SETTINGS_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${SETTINGS_LABEL}" aria-label="${SETTINGS_LABEL}" aria-pressed="false" data-active="0">${gear}</button>
+              <button type="button" ${SETTINGS_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${SETTINGS_LABEL}" aria-label="${SETTINGS_LABEL}" aria-pressed="false" data-active="0">${gear}${navLabelHtml(NAV_LABEL.SETTINGS)}</button>
               <span class="reticle-tb-tip">${SETTINGS_LABEL}</span>
             </div>
             <div class="reticle-tb-wrap">
-              <button type="button" data-reticle-min-btn class="reticle-tb-btn" title="${EXIT_LABEL}" aria-label="${EXIT_LABEL}">${exit}</button>
+              <button type="button" data-reticle-min-btn class="reticle-tb-btn" title="${EXIT_LABEL}" aria-label="${EXIT_LABEL}">${exit}${navLabelHtml(NAV_LABEL.HIDE)}</button>
               <span class="reticle-tb-tip">${EXIT_LABEL}<span class="reticle-tb-kbd">Esc</span></span>
             </div>
           </div>
@@ -218,6 +225,7 @@ export class HudShell {
         if (impact !== null) {
             const on = '1' === root.getAttribute(REPORT_ATTR);
             impact.setAttribute('data-active', on ? '1' : '0');
+            this.#chatViews.setImpactOpen(on);
             if (on)
                 impact.setAttribute('aria-current', 'page');
             else
@@ -279,7 +287,7 @@ export class HudShell {
         this.#report.mount(root);
         this.#chatViews.mount(root);
         this.#promoBase = this.#promoLinks();
-        paintPromo(root, this.#pushedOffer, this.#pushedNotices, this.#promoBase);
+        paintPromo(root, this.#pushedNotices, this.#promoBase);
         this.#toggleSync = new MutationObserver(() => this.#syncToolbarToggles());
         this.#toggleSync.observe(root, {
             attributes: true,

package/dist/presenter/presenter-styles.js

@@ -6,7 +6,6 @@ import { SETTINGS_CSS } from './presenter-settings-styles.js';
 import { ACCOUNT_CSS } from './presenter-account-styles.js';
 import { HUD_CHROME_CSS, HUD_LOG_WELL_CSS } from './chrome/presenter-hud-chrome.js';
 import { REPORT_CSS } from './presenter-report-styles.js';
-import { OFFER_CSS } from './carousel/offer-card.js';
 import { TALK_CSS } from './carousel/talk-card.js';
 import { CAROUSEL_CSS } from './carousel/carousel.js';
 import { CHAT_VIEWS_CSS } from './presenter-chat-views.js';
@@ -71,7 +70,6 @@ ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
 ${ACCOUNT_CSS}
-${OFFER_CSS}
 ${TALK_CSS}
 ${CAROUSEL_CSS}
 ${LOG_CSS}

package/dist/presenter/presenter-workspace.js

@@ -1,6 +1,6 @@
 import { RETICLE_ROOT_GLOBAL, RETICLE_URL_PARAM } from '@reticlehq/core';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './icons/presenter-icons.js';
-import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, accountControlHtml, } from './presenter-account.js';
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, accountControlHtml, paintAccountSlot, teamLinkHtml, TEAM_SLOT_ATTR, } from './presenter-account.js';
 const WORKSPACE_BTN_ATTR = 'data-reticle-workspace-btn';
 const WORKSPACE_MENU_ATTR = 'data-reticle-workspace-menu';
 const WORKSPACE_NAME_ATTR = 'data-reticle-workspace-name';
@@ -10,6 +10,8 @@ const WORKSPACE_COPY_ATTR = 'data-reticle-workspace-copy';
 export const TOOLBAR_ACCOUNT_ATTR = 'data-reticle-toolbar-account';
 const COPIED_MS = 1_200;
 const WORKSPACE_LABEL = 'Workspace';
+const CHIP_KEY = 'Project';
+const CHIP_TITLE = 'The project folder this page is served from, which Reticle reports to. Click for its path.';
 const PROJECT_LABEL = 'Project';
 const COPY_PATH_LABEL = 'Copy path';
 const COPIED_PATH_LABEL = 'Copied';
@@ -48,8 +50,9 @@ export function workspaceRowHtml() {
     const caret = hiIconHtml(PresenterIcon.CARET_DOWN, PRESENTER_ICON_SIZE.HELP);
     const copyIcon = hiIconHtml(PresenterIcon.COPY, PRESENTER_ICON_SIZE.HELP);
     return `<div class="reticle-workspace-wrap">
-    <button type="button" class="reticle-workspace" ${WORKSPACE_BTN_ATTR} aria-haspopup="true" aria-expanded="false" title="${WORKSPACE_LABEL}">
+    <button type="button" class="reticle-workspace" ${WORKSPACE_BTN_ATTR} aria-haspopup="true" aria-expanded="false" title="${CHIP_TITLE}">
       <span class="reticle-workspace-icon" aria-hidden="true">${folderIcon}</span>
+      <span class="reticle-workspace-k">${CHIP_KEY}</span>
       <span class="reticle-workspace-name" ${WORKSPACE_NAME_ATTR}>${WORKSPACE_FALLBACK}</span>
       <span class="reticle-workspace-caret" aria-hidden="true">${caret}</span>
     </button>
@@ -193,8 +196,12 @@ export function mountWorkspaceSelector(root) {
     };
 }
 export function paintToolbarAccount(root, account, dashboardUrl, details = {}) {
+    const team = root.querySelector(`[${TEAM_SLOT_ATTR}]`);
+    if (team instanceof HTMLElement)
+        paintAccountSlot(team, teamLinkHtml(account, dashboardUrl));
     const slot = root.querySelector(`[${TOOLBAR_ACCOUNT_ATTR}]`);
     if (!(slot instanceof HTMLElement))
         return;
-    slot.innerHTML = accountControlHtml(account, { ...details, dashboardUrl }, true);
+    const door = !(team instanceof HTMLElement);
+    paintAccountSlot(slot, accountControlHtml(account, { ...details, dashboardUrl }, door));
 }

package/dist/presenter/presenter.d.ts

@@ -17,6 +17,7 @@ export declare class Presenter {
     get sessionActive(): boolean;
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;
     refilterFlows(): void;
+    showSdkVersion(version: string | undefined): void;
     handlePush(command: {
         name: string;
         args: Record<string, unknown>;
@@ -38,8 +39,8 @@ export declare class Presenter {
     placeHud(visibility: HudVisibility | undefined, corner: HudCorner | undefined): string[];
     setIdleEndMs(ms: number): void;
     runState(): PresenterRunState | Record<string, unknown>;
-    log(kind: LogKind, text: string, result?: LogResult, actor?: LogActor): LogHandle | undefined;
-    narrate(text: string, level?: string): LogHandle | undefined;
+    log(kind: LogKind, text: string, result?: LogResult, actor?: LogActor, summary?: boolean): LogHandle | undefined;
+    narrate(text: string, level?: string, actor?: LogActor, summary?: boolean): LogHandle | undefined;
     setThrottled(throttled: boolean): void;
     beforeAct(refId: string, action: string, label: string): Promise<void>;
 }