@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/presenter-shell.js

@@ -1,36 +1,48 @@
 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, REPORT_BTN_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 { 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 { paintCarousel } from './carousel/carousel.js';
 import { panelSlides } from './carousel/panel-slides.js';
-import { BRAND_NAME, FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
-import { DATA_RETICLE_LOG, settleLogAtLatest } from './chrome/presenter-log.js';
+import { paintRail, RAIL_HTML, RAIL_PROMO_ATTR } from './presenter-frame.js';
+import { FAB_TOGGLE_HTML, MARK_SVG } from './chrome/presenter-brand.js';
+import { settleLogAtLatest } from './chrome/presenter-log.js';
 import { installHudDragHandles, installHudPositionGuards } from './presenter-drag.js';
 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 { CONTROLS_TOOLBAR_HTML } from './presenter-controls.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;
-const ANNOTATE_LABEL = 'Annotate';
 const CHAT_MIN_LABEL = 'Minimise chat';
 const CHAT_PILL_LABEL = 'Open agent chat';
-const REPORT_LABEL = 'Impact';
 const SETTINGS_LABEL = 'Settings';
+const AGENT_LOG_TITLE = 'Reticle';
 const EXIT_LABEL = 'Exit';
+function paintPromo(root, notices = [], base) {
+    const target = root.querySelector(`[${RAIL_PROMO_ATTR}]`);
+    if (null === target)
+        return;
+    let storage;
+    try {
+        storage = window.sessionStorage;
+    }
+    catch {
+        storage = undefined;
+    }
+    paintCarousel(target, panelSlides(notices, base), storage);
+}
 export class HudShell {
     #root;
     #dock;
     #fab;
     #chatPanel;
-    #chatToggle;
     #collapseBtn;
     #settings;
+    #chatViews;
     #dragTeardown;
     #layoutTeardown;
     #transitionLock = false;
@@ -48,9 +60,52 @@ export class HudShell {
     });
     #callbacks;
     #pushedAccount;
+    #pushedNotices = [];
+    #pushedHarness;
+    #promoBase;
     #accountTeardown;
-    paintHarness(config) {
-        this.#settings.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, gate);
+        this.#chatViews.paintHarness(config, gate);
+        this.#repaintPromoIfMoved();
+    }
+    #promoLinks() {
+        return platformBase(this.#pushedHarness, this.#pushedAccount?.account ?? { signedIn: false });
+    }
+    #repaintPromoIfMoved() {
+        const base = this.#promoLinks();
+        if (this.#root === undefined || base === this.#promoBase)
+            return;
+        this.#promoBase = base;
+        paintPromo(this.#root, this.#pushedNotices, base);
+    }
+    paintImpact(verdicts) {
+        this.#chatViews.paintImpact(verdicts);
+    }
+    paintAnnotations(items) {
+        this.#chatViews.paintAnnotations(items);
+    }
+    openView(view) {
+        if ('activity' === view)
+            this.showChat();
+        else {
+            if (this.isCollapsed())
+                this.expand();
+            this.closeChat();
+            this.#settings.close();
+            this.#report.close();
+        }
+        this.#chatViews.open(view);
     }
     paintAccount(account, dashboardUrl, details = {}) {
         this.#pushedAccount = { account, dashboardUrl, details };
@@ -58,65 +113,72 @@ export class HudShell {
             return;
         paintToolbarAccount(this.#root, account, dashboardUrl, details);
         paintSettingsAccount(this.#root, account, dashboardUrl, details);
+        paintRail(this.#root, account);
+        this.#chatViews.paintAccount(account);
+        this.#repaintPromoIfMoved();
     }
-    #pushedOffer;
-    paintOffer(offer) {
-        this.#pushedOffer = offer;
-        this.#paintCarousel();
-    }
-    #paintCarousel() {
-        const log = this.#root?.querySelector(`[${DATA_RETICLE_LOG}]`);
-        if (!(log instanceof HTMLElement))
-            return;
-        const declined = offerDismissed(this.#storage());
-        paintCarousel(log, panelSlides(this.#pushedOffer, declined), this.#sessionStorage());
-    }
-    #sessionStorage() {
-        try {
-            return globalThis.sessionStorage;
-        }
-        catch {
-            return undefined;
-        }
-    }
-    #storage() {
-        try {
-            return globalThis.localStorage;
-        }
-        catch {
-            return undefined;
-        }
+    paintNotices(notices = []) {
+        this.#pushedNotices = notices;
+        this.#promoBase = this.#promoLinks();
+        if (this.#root !== undefined)
+            paintPromo(this.#root, notices, this.#promoBase);
     }
     constructor(callbacks = {}) {
         this.#callbacks = callbacks;
+        this.#chatViews = new ChatViews(() => {
+            this.#chatViews.closePage();
+            this.closeChat();
+            this.#report.open();
+        }, (view) => {
+            if ('activity' === view) {
+                this.#chatViews.open(view);
+                this.showChat();
+                return;
+            }
+            if (this.isCollapsed())
+                this.expand();
+            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,
             onBeforeOpen: () => {
                 this.closeChat();
+                this.#chatViews.closePage();
                 this.#report.close();
                 callbacks.settings?.onBeforeOpen?.();
             },
         });
     }
     static dockHtml(actStripHtml, bannerHtml, logAttr, flowsHtml, footHtml) {
-        const annotate = hiToggleIconHtml(PresenterIcon.ANNOTATE, PRESENTER_ICON_SIZE.TOOLBAR);
-        const chart = hiToggleIconHtml(PresenterIcon.CHART, PRESENTER_ICON_SIZE.TOOLBAR);
         const gear = hiToggleIconHtml(PresenterIcon.GEAR, PRESENTER_ICON_SIZE.TOOLBAR);
         const exit = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.TOOLBAR);
-        return `<div ${DOCK_ATTR}>
-      <div ${CHAT_PANEL_ATTR} class="reticle-chat-panel ${HUD_SURFACE_CLASS}" role="region" aria-label="Reticle session" aria-hidden="true">
+        return `<div ${DOCK_ATTR} role="complementary" aria-label="Reticle">
+      <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">${BRAND_NAME}</span></span>
+          <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>
         ${actStripHtml}
         <span class="reticle-tally" data-reticle-tally hidden></span>
-        ${bannerHtml}
-        <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
-        ${flowsHtml}
+        <section class="reticle-chat-view" role="region" aria-label="Agent Log">
+          ${bannerHtml}
+          <div class="${HUD_LOG_WELL_CLASS}"><div ${logAttr}></div></div>
+          ${flowsHtml}
+        </section>
         ${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}
         <span class="reticle-chat-pill-text" data-reticle-chat-pill-text></span>
@@ -125,27 +187,19 @@ export class HudShell {
       </button>
       ${settingsPanelHtml()}
       ${reportPanelHtml()}
+      ${RAIL_HTML}
       <div data-reticle-hud>
         <div class="reticle-hud-deco" aria-hidden="true"></div>
         ${FAB_TOGGLE_HTML}
         <div class="reticle-toolbar ${DRAG_HANDLE_CLASS}" role="toolbar" aria-label="Reticle controls">
-          <div class="reticle-toolbar-actions">${CONTROLS_TOOLBAR_HTML}</div>
-          <span class="reticle-tb-sep" aria-hidden="true"></span>
           <div class="reticle-toolbar-chrome">
+            ${CHAT_VIEWS_NAV_HTML}
             <div class="reticle-tb-wrap">
-              <button type="button" ${ANNOTATE_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${ANNOTATE_LABEL}" aria-label="${ANNOTATE_LABEL}" aria-pressed="false" data-active="0">${annotate}</button>
-              <span class="reticle-tb-tip">${ANNOTATE_LABEL}</span>
-            </div>
-            <div class="reticle-tb-wrap">
-              <button type="button" ${REPORT_BTN_ATTR} class="reticle-tb-btn reticle-tb-btn--toggle" title="${REPORT_LABEL}" aria-label="${REPORT_LABEL}" aria-pressed="false" data-active="0">${chart}</button>
-              <span class="reticle-tb-tip">${REPORT_LABEL}</span>
-            </div>
-            <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>
@@ -167,7 +221,16 @@ export class HudShell {
         };
         lit(CHAT_TOGGLE_ATTR, '1' === root.getAttribute(CHAT_ATTR));
         lit(SETTINGS_BTN_ATTR, '1' === root.getAttribute(SETTINGS_ATTR));
-        lit(REPORT_BTN_ATTR, '1' === root.getAttribute(REPORT_ATTR));
+        const impact = root.querySelector('[data-reticle-chat-impact]');
+        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
+                impact.removeAttribute('aria-current');
+        }
     }
     isAnnotateOn() {
         return this.#annotateOn;
@@ -176,6 +239,14 @@ export class HudShell {
         this.#annotateOn = on;
         this.#annotateBtn?.setAttribute('aria-pressed', on ? 'true' : 'false');
         this.#annotateBtn?.setAttribute('data-active', on ? '1' : '0');
+        this.#annotateBtn?.setAttribute('aria-label', on ? 'Stop adding notes' : 'Add notes');
+        this.#annotateBtn?.setAttribute('title', on ? 'Stop adding notes' : 'Add notes');
+        const label = this.#annotateBtn?.querySelector('[data-reticle-notes-toggle-label]');
+        if (label !== null && label !== undefined)
+            label.textContent = on ? 'Stop adding notes' : 'Add notes';
+        this.#root
+            ?.querySelector('[data-reticle-chat-view-btn="annotations"]')
+            ?.setAttribute('data-capture', on ? '1' : '0');
     }
     mount(root) {
         this.#listeners = new AbortController();
@@ -186,10 +257,9 @@ export class HudShell {
         this.#fab = fabEl instanceof HTMLButtonElement ? fabEl : undefined;
         const chatPanelEl = root.querySelector(`[${CHAT_PANEL_ATTR}]`);
         this.#chatPanel = chatPanelEl instanceof HTMLElement ? chatPanelEl : undefined;
-        const chatToggleEl = root.querySelector(`[${CHAT_TOGGLE_ATTR}]`);
-        this.#chatToggle = chatToggleEl instanceof HTMLElement ? chatToggleEl : undefined;
         const annotateEl = root.querySelector(`[${ANNOTATE_BTN_ATTR}]`);
         this.#annotateBtn = annotateEl instanceof HTMLButtonElement ? annotateEl : undefined;
+        this.setAnnotateOn(this.#annotateOn);
         this.#annotateBtn?.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -215,17 +285,15 @@ export class HudShell {
         root.removeAttribute(CHAT_ATTR);
         this.#settings.mount(root);
         this.#report.mount(root);
+        this.#chatViews.mount(root);
+        this.#promoBase = this.#promoLinks();
+        paintPromo(root, this.#pushedNotices, this.#promoBase);
         this.#toggleSync = new MutationObserver(() => this.#syncToolbarToggles());
         this.#toggleSync.observe(root, {
             attributes: true,
             attributeFilter: [CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
         });
         this.#syncToolbarToggles();
-        root.querySelector(`[${REPORT_BTN_ATTR}]`)?.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.#report.toggle();
-        }, { signal });
         this.#fab?.addEventListener('click', (e) => {
             e.stopPropagation();
             if (this.#suppressFabClick) {
@@ -238,10 +306,6 @@ export class HudShell {
             e.stopPropagation();
             this.collapse();
         }, { signal });
-        this.#chatToggle?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleChat();
-        }, { signal });
         const toolbarDrag = root.querySelector(`.${DRAG_HANDLE_CLASS}`);
         const dragHandles = [this.#fab, toolbarDrag].filter((el) => el instanceof HTMLElement);
         if (this.#dock !== undefined && dragHandles.length > 0) {
@@ -250,20 +314,18 @@ export class HudShell {
                     this.#suppressFabClick = true;
                 },
                 onDragEnd: (moved) => {
-                    if (moved && this.isCollapsed())
-                        this.#suppressFabClick = true;
+                    this.#suppressFabClick = moved && this.isCollapsed();
                 },
             });
             this.#layoutTeardown = installHudPositionGuards(this.#dock, root);
         }
         document.addEventListener('pointerdown', this.#onDocPointerDown, { signal });
         document.addEventListener('keydown', this.#onKeyDown, { signal });
-        this.#accountTeardown = mountAccountControl(root);
+        this.#accountTeardown = mountAccountControl(root, () => this.#callbacks.onSignIn?.());
         if (this.#pushedAccount !== undefined) {
             const pushed = this.#pushedAccount;
             this.paintAccount(pushed.account, pushed.dashboardUrl, pushed.details);
         }
-        this.#paintCarousel();
     }
     teardown() {
         this.#accountTeardown?.();
@@ -277,11 +339,11 @@ export class HudShell {
         this.#layoutTeardown?.();
         this.#layoutTeardown = undefined;
         this.#settings.teardown();
+        this.#chatViews.teardown();
         this.#root = undefined;
         this.#dock = undefined;
         this.#fab = undefined;
         this.#chatPanel = undefined;
-        this.#chatToggle = undefined;
         this.#collapseBtn = undefined;
     }
     isCollapsed() {
@@ -323,6 +385,8 @@ export class HudShell {
         if (this.isCollapsed())
             this.expand();
         this.#settings.close();
+        this.#chatViews.closePage();
+        this.#chatViews.open('activity');
         if (this.isChatOpen())
             return;
         this.#root.setAttribute(CHAT_ATTR, '1');
@@ -330,8 +394,6 @@ export class HudShell {
         if (log !== null)
             settleLogAtLatest(log);
         this.#chatPanel?.setAttribute('aria-hidden', 'false');
-        this.#chatToggle?.setAttribute('data-active', '1');
-        this.#chatToggle?.setAttribute('aria-pressed', 'true');
         this.#callbacks.onChatOpen?.();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);
@@ -341,8 +403,6 @@ export class HudShell {
             return;
         this.#root.removeAttribute(CHAT_ATTR);
         this.#chatPanel?.setAttribute('aria-hidden', 'true');
-        this.#chatToggle?.setAttribute('data-active', '0');
-        this.#chatToggle?.setAttribute('aria-pressed', 'false');
         this.#callbacks.onChatClose?.();
         if (this.#dock !== undefined)
             scheduleSyncDockLayout(this.#dock, this.#root);

package/dist/presenter/presenter-styles.js

@@ -6,11 +6,15 @@ 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';
+import { PLAN_CSS } from './presenter-plan.js';
+import { FRAME_CSS } from './presenter-frame.js';
+import { PRESENTER_DESIGN_TOKENS_CSS } from './presenter-design-tokens.js';
 export { Z_OVERLAY };
 export const PRESENTER_CSS = `
+${PRESENTER_DESIGN_TOKENS_CSS}
 [data-reticle-overlay]{position:fixed;inset:0;pointer-events:none;z-index:${String(Z_OVERLAY)};}
 /**
  * The session glow: the page itself says an agent is here, and BREATHES while it is working.
@@ -66,8 +70,10 @@ ${SHELL_CSS}
 ${SETTINGS_CSS}
 ${REPORT_CSS}
 ${ACCOUNT_CSS}
-${OFFER_CSS}
 ${TALK_CSS}
 ${CAROUSEL_CSS}
 ${LOG_CSS}
-${CONTROLS_CSS}`;
+${CHAT_VIEWS_CSS}
+${PLAN_CSS}
+${CONTROLS_CSS}
+${FRAME_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

@@ -1,5 +1,5 @@
-import { PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
-import { type LogKind, type LogResult, type LogHandle } from './chrome/presenter-log.js';
+import { HudCorner, HudVisibility, PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
+import { type LogActor, type LogKind, type LogResult, type LogHandle } from './chrome/presenter-log.js';
 import { type PresenterOptions } from './presenter-config.js';
 import { type PresenterRunState } from './presenter-run-state.js';
 import { type ControlHandler } from './presenter-controls.js';
@@ -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>;
@@ -35,10 +36,11 @@ export declare class Presenter {
     get mode(): PresenterMode;
     setMode(mode: PresenterMode): void;
     status(text: string): void;
+    placeHud(visibility: HudVisibility | undefined, corner: HudCorner | undefined): string[];
     setIdleEndMs(ms: number): void;
     runState(): PresenterRunState | Record<string, unknown>;
-    log(kind: LogKind, text: string, result?: LogResult): 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>;
 }