@runtypelabs/persona 4.17.0 → 4.18.0

package/src/ui.ts

@@ -3,7 +3,12 @@ import { resolveSanitizer } from "./utils/sanitize";
 import { stabilizeStreamingTables } from "./utils/streaming-table";
 import { wrapScrollableTables, refreshTableScrollFades } from "./utils/table-scroll-fade";
 import { onMarkdownParsersReady, getMarkdownParsersSync } from "./markdown-parsers-loader";
-import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
+import {
+  AgentWidgetSession,
+  AgentWidgetSessionStatus,
+  type SessionHistoryNotice,
+  type SessionHistoryState
+} from "./session";
 import {
   AgentWidgetConfig,
   AgentWidgetConfigPatch,
@@ -12,6 +17,7 @@ import {
   AgentWidgetEvent,
   AgentWidgetStorageAdapter,
   AgentWidgetStoredState,
+  WidgetHistoryInternals,
   AgentWidgetControllerEventMap,
   AgentWidgetVoiceStateEvent,
   AgentWidgetStateEvent,
@@ -26,6 +32,7 @@ import {
   InjectSystemMessageOptions,
   InjectComponentDirectiveOptions,
   LoadingIndicatorRenderContext,
+  AgentWidgetRenderHistoryOpenErrorContext,
   IdleIndicatorRenderContext,
   VoiceStatus,
   ReadAloudState,
@@ -37,7 +44,14 @@ import {
   AgentWidgetContextMentionRef,
   AgentWidgetSuggestion,
   AgentWidgetSuggestionSource,
-  AgentWidgetWelcomeIcon
+  AgentWidgetWelcomeIcon,
+  HistoryConversationPatch,
+  HistoryConversationSummary,
+  HistoryIdentityStatus,
+  HistoryReturnSurface,
+  HistoryScope,
+  PendingDisplayProjections,
+  ResolvedHistoryPresentation
 } from "./types";
 import { AttachmentManager } from "./utils/attachment-manager";
 import {
@@ -49,10 +63,20 @@ import { createTextPart, ALL_SUPPORTED_MIME_TYPES } from "./utils/content";
 import { applyThemeVariables, createThemeObserver, getActiveTheme } from "./utils/theme";
 import { resolveTokenValue } from "./utils/tokens";
 import { renderLucideIcon } from "./utils/icons";
-import { createElement } from "./utils/dom";
+import { createElement, createNode, cx } from "./utils/dom";
 import { resolveContentMaxWidth } from "./utils/content-width";
-import { attachTooltip } from "./utils/tooltip";
-import { downloadInfoFor } from "./utils/artifact-file";
+import { attachTooltip, configureTooltipTiming } from "./utils/tooltip";
+import {
+  DEFAULT_TOOLTIP_DELAY_MS,
+  DEFAULT_TOOLTIP_SKIP_DELAY_MS,
+} from "./utils/tooltip-timing";
+import {
+  ariaCombo,
+  createShortcutRegistry,
+  formatCombo,
+  parseCombo,
+} from "./utils/shortcuts";
+import { downloadInfoFor, triggerArtifactDownload } from "./utils/artifact-file";
 import { artifactCopyText } from "./components/artifact-preview";
 import { morphMessages } from "./utils/morph";
 import { normalizeCopiedSelectionText } from "./utils/copy-selection";
@@ -73,7 +97,11 @@ import {
   resolveFollowStateFromScroll,
   resolveFollowStateFromWheel
 } from "./utils/auto-follow";
-import { statusCopy, DEFAULT_OVERLAY_Z_INDEX } from "./utils/constants";
+import {
+  statusCopy,
+  DEFAULT_OVERLAY_Z_INDEX,
+  PORTALED_OVERLAY_Z_INDEX,
+} from "./utils/constants";
 import {
   applyStreamBuffer,
   createSkeletonPlaceholder,
@@ -88,7 +116,13 @@ import { syncOverlayHostStacking } from "./utils/overlay-host-stacking";
 import { acquireScrollLock } from "./utils/scroll-lock";
 import { isComposerBarMountMode, isDockedMountMode, resolveDockConfig } from "./utils/dock";
 import { LauncherSurface } from "./components/launcher";
-import { buildHeader, buildComposer, attachHeaderToContainer } from "./components/panel";
+import {
+  buildHeader,
+  buildComposer,
+  attachHeaderToContainer,
+  COMPOSER_BAR_CLEAR_CHAT_ICON_SIZE,
+  COMPOSER_BAR_CLOSE_ICON_SIZE,
+} from "./components/panel";
 import { buildPillComposer } from "./components/pill-composer-builder";
 import { createWidgetView, resolveLauncher } from "./components/widget-view";
 import {
@@ -102,6 +136,10 @@ import {
 import { createPluginStorageFactory } from "./utils/plugin-storage";
 import { isWelcomeVisible, resolveWelcomeConfig } from "./welcome";
 import { HEADER_THEME_CSS } from "./components/header-builder";
+import {
+  applyHeaderControlGlyph,
+  createHeaderIconButton,
+} from "./components/header-parts";
 import { buildHeaderWithLayout } from "./components/header-layouts";
 import { positionMap } from "./utils/positioning";
 import type { HeaderElements as _HeaderElements, ComposerElements as _ComposerElements } from "./components/panel";
@@ -139,7 +177,8 @@ import {
 import { EventStreamBuffer } from "./utils/event-stream-buffer";
 import { EventStreamStore } from "./utils/event-stream-store";
 import { ThroughputTracker } from "./utils/throughput-tracker";
-import { createEventStreamView } from "./components/event-stream-view";
+import { loadEventStreamView } from "./event-stream-view-loader";
+import type { EventStreamViewHandle } from "./event-stream-view-entry";
 import { createArtifactPane, type ArtifactPaneApi } from "./components/artifact-pane";
 import {
   hasLiveInlineArtifactBlock,
@@ -154,7 +193,12 @@ import {
 } from "./utils/artifact-gate";
 import { resolveArtifactDisplayMode } from "./utils/artifact-display";
 import { resolveConfigPreferences } from "./utils/feature-preferences";
-import { readFlexGapPx, resolveArtifactPaneWidthPx } from "./utils/artifact-resize";
+import {
+  ARTIFACT_RESIZE_CHAT_MIN_PX,
+  ARTIFACT_RESIZE_RAILED_TRANSCRIPT_MIN_PX,
+  readFlexGapPx,
+  resolveArtifactPaneWidthPx,
+} from "./utils/artifact-resize";
 import { enhanceWithForms } from "./components/forms";
 import { pluginRegistry } from "./plugins/registry";
 import { mergeWithDefaults, DEFAULT_FLOATING_LAUNCHER_WIDTH } from "./defaults";
@@ -166,6 +210,29 @@ import {
   defaultJsonActionParser
 } from "./utils/actions";
 import { createLocalStorageAdapter } from "./utils/storage";
+import { createVisitorStore, type VisitorStore } from "./utils/visitor-store";
+import { loadHistoryView } from "./history-view-loader";
+import type {
+  HistoryHeaderPlacement,
+  HistoryRailSection,
+  HistoryViewHandle,
+  HistoryViewOptions,
+} from "./history-view-entry";
+import {
+  createHistoryRenderSurface,
+  type HistoryRenderSurface,
+} from "./history-render";
+import { getHistoryProviderFactory } from "./internal/history-provider-registry";
+import type {
+  HistoryOperationContext,
+  HistoryProvider,
+} from "./internal/history-provider";
+import { createRuntypeHistoryProvider } from "./internal/runtype-history-provider";
+import {
+  resolveHistoryShellCopy,
+  type ResolvedHistoryShellCopy,
+} from "./components/history-shell-copy";
+import { showHistoryConfirm } from "./components/history-confirm-dialog";
 import { componentRegistry } from "./components/registry";
 import {
   renderComponentDirective,
@@ -467,6 +534,73 @@ type Controller = {
     decision: 'approved' | 'denied',
     options?: AgentWidgetApprovalDecisionOptions
   ) => Promise<void>;
+
+  // --- Conversation history (client-token mode; see D8) ---------------------
+
+  /** Pass-through list, for headless hosts rendering their own navigation. */
+  listConversations: (opts?: {
+    cursor?: string;
+    limit?: number;
+    targetId?: string;
+    scope?: HistoryScope;
+  }) => Promise<{
+    items: HistoryConversationSummary[];
+    nextCursor: string | null;
+  }>;
+  /** The open conversation's record id; null for a fresh unsaved chat. */
+  getActiveConversationId: () => string | null;
+  /**
+   * Full open flow: transactional resume, hydration, and scroll restore.
+   * `focus: true` moves focus to the composer; the programmatic default
+   * leaves focus alone (an embedded widget must not scroll the host page
+   * on a boot-time reopen).
+   */
+  openConversation: (
+    conversationId: string,
+    opts?: { focus?: boolean }
+  ) => Promise<void>;
+  /** Clean local state plus a new owned server conversation. `focus` as on `openConversation`. */
+  startNewConversation: (opts?: { focus?: boolean }) => Promise<void>;
+  /** Permanently delete one server record; the active one is replaced. */
+  deleteConversation: (conversationId: string) => Promise<void>;
+  /**
+   * Visitor-scoped rename. Requires a provider with the update capability;
+   * a user-set title pins, so a later auto-generated title never overwrites it.
+   */
+  renameConversation: (
+    conversationId: string,
+    title: string
+  ) => Promise<HistoryConversationSummary>;
+  /** Visitor-scoped star/unstar. Requires a provider with the update capability. */
+  setConversationStarred: (
+    conversationId: string,
+    starred: boolean
+  ) => Promise<HistoryConversationSummary>;
+  /**
+   * Permanently delete every record in the resolved scope. Defaults to the
+   * active target filter; `allTargets` is a deliberate client-token-wide delete.
+   */
+  clearConversationHistory: (opts?: {
+    targetId?: string;
+    allTargets?: boolean;
+    scope?: HistoryScope;
+  }) => Promise<{ deleted: number }>;
+  /**
+   * Revoke this browser's history credential and wipe it locally. Resolves
+   * (never rejects) on remote failure; rejection is reserved for misuse.
+   * Required host logout wiring.
+   */
+  resetHistoryIdentity: () => Promise<{ remoteRevocationConfirmed: boolean }>;
+  /** Latest sanitized identity state; carries no token, proof, or identity id. */
+  getHistoryIdentityStatus: () => HistoryIdentityStatus;
+  /** `focus: false` keeps focus where it is (programmatic/preview opens). */
+  showHistory: (opts?: {
+    returnSurface?: HistoryReturnSurface;
+    focus?: boolean;
+  }) => Promise<void>;
+  /** `restoreFocus: false` leaves focus untouched on close. */
+  hideHistory: (opts?: { restoreFocus?: boolean }) => void;
+  isHistoryVisible: () => boolean;
 };
 
 export const buildPostprocessor = (
@@ -630,6 +764,13 @@ export const createAgentExperience = (
   }
 
   let config = mergeWithDefaults(initialConfig) as AgentWidgetConfig;
+  const applyTooltipTiming = (): void => {
+    configureTooltipTiming({
+      delayMs: config.tooltip?.delayMs ?? DEFAULT_TOOLTIP_DELAY_MS,
+      skipDelayMs: config.tooltip?.skipDelayMs ?? DEFAULT_TOOLTIP_SKIP_DELAY_MS,
+    });
+  };
+  applyTooltipTiming();
   // `config.features` holds the preference-resolved view every read site uses;
   // `baseFeatures` keeps the pre-preference base so update() re-resolves from
   // it instead of stacking new preferences onto already-overlaid values.
@@ -641,6 +782,11 @@ export const createAgentExperience = (
   // Get plugins for this instance
   const plugins = pluginRegistry.getForInstance(config.plugins);
 
+  // One keydown listener per instance. Widget-scoped bindings resolve against
+  // the mount; Escape is reserved and never routed through here.
+  const shortcuts = createShortcutRegistry(mount);
+  let releaseShortcuts: Array<() => void> = [];
+
   // Guards the composer/welcome hooks, which can run before `session` exists
   // (its `let` is declared far below and is in the temporal dead zone here).
   let sessionInitialized = false;
@@ -671,6 +817,13 @@ export const createAgentExperience = (
       : (config.storageAdapter ?? createLocalStorageAdapter());
   let persistentMetadata: Record<string, unknown> = {};
   let pendingStoredState: Promise<AgentWidgetStoredState | null> | null = null;
+  // Resolves once stored state has been applied (or its load failed). Every
+  // history-capable init path waits on it, so a fast network can never race an
+  // async storage adapter. Always resolves, never rejects.
+  let resolveHistoryBootstrap!: () => void;
+  const historyBootstrapReady = new Promise<void>((resolve) => {
+    resolveHistoryBootstrap = resolve;
+  });
 
   let shouldOpenAfterStateLoaded = false;
 
@@ -746,6 +899,10 @@ export const createAgentExperience = (
     }
   }
 
+  // Only the async adapter path defers the gate (resolved with hydration
+  // below); every synchronous exit above, including a load throw, is done here.
+  if (!pendingStoredState) resolveHistoryBootstrap();
+
   const getSessionMetadata = () => persistentMetadata;
   const updateSessionMetadata = (
     updater: (prev: Record<string, unknown>) => Record<string, unknown>
@@ -822,18 +979,39 @@ export const createAgentExperience = (
   let showEventStreamToggle = config.features?.showEventStreamToggle ?? false;
   let scrollToBottomFeature = config.features?.scrollToBottom ?? {};
   let scrollBehaviorFeature = config.features?.scrollBehavior ?? {};
-  const persistKeyPrefix = (typeof config.persistState === 'object' ? config.persistState?.keyPrefix : undefined) ?? "persona-";
+  // Live-read: `update()` may change the persistState shape, which re-keys the
+  // visitor store.
+  const currentKeyPrefix = () =>
+    (typeof config.persistState === 'object' ? config.persistState?.keyPrefix : undefined) ?? "persona-";
+  const persistKeyPrefix = currentKeyPrefix();
   const eventStreamDbName = `${persistKeyPrefix}event-stream`;
   let eventStreamStore = showEventStreamToggle ? new EventStreamStore(eventStreamDbName) : null;
   const eventStreamMaxEvents = config.features?.eventStream?.maxEvents ?? 2000;
   let eventStreamBuffer = showEventStreamToggle ? new EventStreamBuffer(eventStreamMaxEvents, eventStreamStore) : null;
   // Passive output-throughput tracker, fed from the same SSE tap as the buffer.
   let throughputTracker = showEventStreamToggle ? new ThroughputTracker() : null;
-  let eventStreamView: ReturnType<typeof createEventStreamView> | null = null;
+  let eventStreamView: EventStreamViewHandle | null = null;
   let eventStreamVisible = false;
   let eventStreamRAF: number | null = null;
   let eventStreamLastUpdate = 0;
 
+  // --- history (Messages) shell state ---------------------------------------
+  // Declared here because the scroll-affordance gate, `syncPanelChrome`, and the
+  // session callbacks all run before the history block installs its behavior.
+  let historyVisible = false;
+  let historyPresentation: ResolvedHistoryPresentation | null = null;
+  /** Re-asserts panel-host inert state after a chrome pass. */
+  let reapplyHistoryHostChrome: () => void = () => {};
+  /** Re-derives rail geometry from config; no-op unless a rail is mounted. */
+  let applyRailChrome: () => void = () => {};
+  let historyStateHandler: (state: SessionHistoryState) => void = () => {};
+  let historyNoticeHandler: (notice: SessionHistoryNotice) => void = () => {};
+  /** Header button/affordance refresh; a turn's busy state gates the button. */
+  let historyChromeSync: () => void = () => {};
+  /** A surface that replaces the whole panel body: no scroll affordance over it. */
+  const fullPanelOverlayVisible = (): boolean =>
+    eventStreamVisible || (historyVisible && historyPresentation === "panel");
+
   // Open IndexedDB store and restore persisted events into the buffer
   eventStreamStore?.open().then(() => {
     return eventStreamBuffer?.restore();
@@ -1102,8 +1280,9 @@ export const createAgentExperience = (
       onClose: () => setOpenState(false, "user")
     });
     if (customHeader) {
-      // Replace the default header with custom header
-      const existingHeader = container.querySelector('.persona-border-b-persona-divider');
+      // Replace the default header with custom header. By the live binding, not
+      // a container lookup: while a rail is mounted the header sits inside it.
+      const existingHeader = header;
       if (existingHeader) {
         existingHeader.replaceWith(customHeader);
         header = customHeader;
@@ -1115,24 +1294,39 @@ export const createAgentExperience = (
   }
 
   // Event stream toggle functions (lifted to outer scope for controller access)
+  const mountEventStreamView = () => {
+    if (!eventStreamView) return;
+    body.style.display = "none";
+    footer.parentNode?.insertBefore(eventStreamView.element, footer);
+    eventStreamView.update();
+  };
+
   const toggleEventStreamOn = () => {
     if (!eventStreamBuffer) return;
     eventStreamVisible = true;
-    if (!eventStreamView && eventStreamBuffer) {
-      eventStreamView = createEventStreamView({
-        buffer: eventStreamBuffer,
-        getFullHistory: () => eventStreamBuffer!.getAllFromStore(),
-        onClose: () => toggleEventStreamOff(),
-        config,
-        plugins,
-        getThroughput: () =>
-          throughputTracker?.getMetric() ?? { status: "idle" },
-      });
-    }
-    if (eventStreamView) {
-      body.style.display = "none";
-      footer.parentNode?.insertBefore(eventStreamView.element, footer);
-      eventStreamView.update();
+    if (!eventStreamView) {
+      // The panel lives in a lazy chunk; mount when it resolves, unless the
+      // toggle was flipped back off (or the widget destroyed) meanwhile.
+      void loadEventStreamView()
+        .then((mod) => {
+          if (eventStreamView || !eventStreamVisible || !eventStreamBuffer) return;
+          eventStreamView = mod.createEventStreamView({
+            buffer: eventStreamBuffer,
+            getFullHistory: () => eventStreamBuffer!.getAllFromStore(),
+            onClose: () => toggleEventStreamOff(),
+            config,
+            plugins,
+            getThroughput: () =>
+              throughputTracker?.getMetric() ?? { status: "idle" },
+          });
+          mountEventStreamView();
+        })
+        .catch(() => {
+          // Chunk failure resets the toggle; the next click retries the load.
+          toggleEventStreamOff();
+        });
+    } else {
+      mountEventStreamView();
     }
     if (eventStreamToggleBtn) {
       eventStreamToggleBtn.style.boxShadow = `inset 0 0 0 1.5px ${HEADER_THEME_CSS.actionIconColor}`;
@@ -1410,6 +1604,9 @@ export const createAgentExperience = (
       element.style.maxWidth = max;
       element.style.marginLeft = "auto";
       element.style.marginRight = "auto";
+      // Auto cross-axis margins defeat flex stretch: the previews container
+      // sits inside the flex-column form and would shrink-center without this.
+      element.style.width = "100%";
     }
   };
   applyComposerContentMaxWidth();
@@ -1969,14 +2166,7 @@ export const createAgentExperience = (
     if (!markdown) return;
     // File artifacts download the raw unfenced source under their real name/MIME;
     // non-file markdown artifacts keep the legacy `<title>.md` / text/markdown path.
-    const { filename, mime, content } = downloadInfoFor({ title, markdown, file });
-    const blob = new Blob([content], { type: mime });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
+    triggerArtifactDownload(downloadInfoFor({ title, markdown, file }));
   });
 
   // Click delegation for integrator-supplied card action buttons. Actions are
@@ -2521,6 +2711,21 @@ export const createAgentExperience = (
     artifactResizeDocEnd = null;
   }
 
+  /**
+   * Chat-column minimum for an artifact drag. A docked in-flow rail lives
+   * inside the chat column, so the flat chat minimum would let a wide drag
+   * squeeze the column under the rail's own responsive floor and re-mode the
+   * rail into the panel mid-drag. The floating overlay rail (`railOverlayHost`)
+   * takes no flex width, so only the in-flow `railHost` counts, measured live
+   * to cover expanded, collapsed, and dragged widths alike.
+   */
+  const railedChatMinPx = (): number => {
+    const host = railShell && railHost?.isConnected ? railHost : null;
+    const railPx = host ? host.getBoundingClientRect().width : 0;
+    if (railPx <= 0) return ARTIFACT_RESIZE_CHAT_MIN_PX;
+    return railPx + ARTIFACT_RESIZE_RAILED_TRANSCRIPT_MIN_PX;
+  };
+
   /** Flush split: overlay handle on the seam so it does not consume flex gap (extension + resizable). */
   const positionExtensionArtifactResizeHandle = () => {
     if (!artifactSplitRoot || !artifactResizeHandle) return;
@@ -2636,6 +2841,9 @@ export const createAgentExperience = (
     artifactPaneApi.setCopyButtonVisible(
       config.features?.artifacts?.layout?.showCopyButton === true
     );
+    artifactPaneApi.setRefreshButtonVisible(
+      typeof config.features?.artifacts?.layout?.onDocumentToolbarRefresh === "function"
+    );
     artifactPaneApi.setCustomActions(config.features?.artifacts?.toolbarActions ?? []);
     artifactPaneApi.setTabFade(config.features?.artifacts?.layout?.tabFade);
     artifactPaneApi.setRenderTabBar(config.features?.artifacts?.renderTabBar);
@@ -2768,7 +2976,8 @@ export const createAgentExperience = (
               gapPx,
               handleW,
               layout?.resizableMinWidth,
-              layout?.resizableMaxWidth
+              layout?.resizableMaxWidth,
+              railedChatMinPx()
             );
             artifactPaneApi!.element.style.width = `${clamped}px`;
             artifactPaneApi!.element.style.maxWidth = "none";
@@ -3050,7 +3259,9 @@ export const createAgentExperience = (
     panel.style.cssText = '';
     container.style.cssText = '';
     body.style.cssText = '';
-    footer.style.cssText = '';
+    // A plugin-owned footer is the plugin's DOM: its inline state (the home
+    // screen's `display: none` placeholder) is not ours to reset.
+    if (!composerIsPluginOwned) footer.style.cssText = '';
 
     // Preserve the event-stream takeover across a layout-mode change. The
     // cssText reset above wiped the `display: none` that toggleEventStreamOn
@@ -3387,8 +3598,9 @@ export const createAgentExperience = (
         ${chatFlush ? 'background: transparent !important;' : ''}
       `;
       
-      // Remove footer border in sidebar mode
-      footer.style.cssText = `
+      // Remove footer border in sidebar mode (never on a plugin footer: see
+      // the cssText reset above)
+      if (!composerIsPluginOwned) footer.style.cssText = `
         flex-shrink: 0 !important;
         border-top: none !important;
         padding: 8px 16px 12px 16px !important;
@@ -3464,9 +3676,17 @@ export const createAgentExperience = (
     } else {
       mount.style.removeProperty("--persona-artifact-welded-outer-radius");
     }
+    applyRailChrome();
+    // A chrome pass can restyle the panel out from under an open history host.
+    reapplyHistoryHostChrome();
   };
 
   const destroyCallbacks: Array<() => void> = [];
+  // Drops every binding (config and plugin) with the document listener.
+  destroyCallbacks.push(() => {
+    releaseShortcuts.forEach((release) => release());
+    shortcuts.destroy();
+  });
   // Clean up the document-level digit-key shortcut listener registered earlier.
   destroyCallbacks.push(() => {
     document.removeEventListener("keydown", handleAskUserDigitKey);
@@ -3503,6 +3723,8 @@ export const createAgentExperience = (
     }
     artifactPaneApi?.element.style.removeProperty("width");
     artifactPaneApi?.element.style.removeProperty("maxWidth");
+    // Release the pane preview's pending file-preview timers/listeners.
+    artifactPaneApi?.destroy();
   });
 
   // Event stream cleanup
@@ -4144,7 +4366,7 @@ export const createAgentExperience = (
     !!session && session.getMessages().length > 0;
 
   const syncScrollToBottomButton = () => {
-    if (!isScrollToBottomEnabled() || eventStreamVisible) {
+    if (!isScrollToBottomEnabled() || fullPanelOverlayVisible()) {
       if (scrollToBottomButton.parentNode) {
         scrollToBottomButton.remove();
       }
@@ -6445,6 +6667,13 @@ export const createAgentExperience = (
     if (config.autoFocusInput) setTimeout(() => maybeFocusInput(), 200);
   });
 
+  // Declared here, not beside the rest of the conversation-open state below:
+  // `updateWelcome` reads them during the session's first render.
+  let conversationOpenPendingEl: HTMLElement | null = null;
+  // False during the stand-in's show delay, when the surface it replaces
+  // (welcome or previous transcript) is still the one on screen.
+  let conversationOpenTakeover = false;
+
   // Welcome visibility is derived, never stored: `resolveWelcomeConfig` owns
   // the config and the session's user messages own the dismissal.
   let welcomeShown = !welcomeHost.hidden;
@@ -6461,6 +6690,9 @@ export const createAgentExperience = (
   // Element returned by a `renderWelcome` plugin, or null when the default
   // renderer owns the host. A plugin element ignores derived visibility.
   let welcomePluginContent: HTMLElement | null = null;
+  // True while plugin content stays mounted but unmounted from the overlay,
+  // so the pending stand-in the overlay body class would hide stays visible.
+  let welcomePluginSuppressed = false;
   const updateWelcome = (messages?: AgentWidgetMessage[]) => {
     const resolved = resolveWelcomeConfig(config);
     const welcomeKey = `${resolved.variant}|${resolved.dismiss}|${resolved.title}|${resolved.subtitle}`;
@@ -6489,7 +6721,11 @@ export const createAgentExperience = (
 
     const current =
       messages ?? (session ? session.getMessages() : config.initialMessages);
-    const visible = isWelcomeVisible(resolved, current);
+    // An engaged conversation-open stand-in owns the surface: the transcript is
+    // replaced only at commit, so derived visibility would hold the welcome
+    // above the stand-in for the rest of the fetch.
+    const openTakeover = conversationOpenTakeover;
+    const visible = !openTakeover && isWelcomeVisible(resolved, current);
     const flipped = visible !== welcomeShown;
     welcomeShown = visible;
     // Plugin content renders regardless of derived visibility and owns the
@@ -6497,12 +6733,22 @@ export const createAgentExperience = (
     if (welcomePluginContent) {
       welcomeDismissAnimation?.cancel();
       welcomeDismissAnimation = null;
-      applyWelcomeVisibility(body, welcomeHost, true);
+      if (openTakeover !== welcomePluginSuppressed) {
+        welcomePluginSuppressed = openTakeover;
+        // The overlay body class hides every transcript sibling, the engaged
+        // stand-in included, so navigation drops it and the return restores it.
+        if (openTakeover) clearWelcomePluginContent(body, welcomeHost, null);
+        else mountWelcomePluginContent(body, welcomeHost, welcomePluginContent);
+      }
+      // Plugin content is an absolute overlay, so hiding it collapses no layout.
+      applyWelcomeVisibility(body, welcomeHost, !openTakeover);
       return;
     }
     if (
       flipped &&
       !visible &&
+      // Navigation is not a first message: that hide is instant.
+      !openTakeover &&
       resolved.dismiss === "on-first-message" &&
       welcomeHydrated
     ) {
@@ -6522,13 +6768,17 @@ export const createAgentExperience = (
       return;
     }
     if (welcomeDismissAnimation) {
-      // Later renders must not hide the host out from under the animation.
-      if (!visible) return;
+      // An engaged open takes the host instantly; every other render must not
+      // hide it out from under the animation.
+      if (!visible && !openTakeover) return;
       welcomeDismissAnimation.cancel();
       welcomeDismissAnimation = null;
     }
+    // The host still holds layout while a cancelled dismiss was running, so the
+    // repin keys off the applied state rather than the derived flip.
+    const wasLaidOut = !welcomeHost.hidden;
     applyWelcomeVisibility(body, welcomeHost, visible);
-    if (flipped && !visible) repinAnchoredMessage();
+    if (!visible && wasLaidOut) repinAnchoredMessage();
   };
 
   // `renderWelcome` arbitration. The core owns the host; a re-render runs the
@@ -6601,6 +6851,7 @@ export const createAgentExperience = (
       runWelcomeCleanups();
       clearWelcomePluginContent(body, welcomeHost, welcomePluginContent);
       welcomePluginContent = null;
+      welcomePluginSuppressed = false;
 
       const current = session ? session.getMessages() : config.initialMessages;
       const visible = isWelcomeVisible(resolved, current);
@@ -6677,22 +6928,131 @@ export const createAgentExperience = (
 
   // Add session ID persistence callbacks for client token mode
   // These allow the widget to resume conversations by passing session_id to /client/init
+  // Conversation-id callbacks defer to host-supplied ones; only the internal
+  // revision writer is synthesized alongside a synthesized id writer.
+  const hostOwnsConversationId = Boolean(config.setStoredConversationId);
+  const dropMetadataKey = (key: string) =>
+    updateSessionMetadata((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  const readMetadataString = (key: string): string | null => {
+    const stored = persistentMetadata[key];
+    return typeof stored === 'string' ? stored : null;
+  };
   if (config.clientToken) {
     config = {
       ...config,
-      getStoredSessionId: () => {
-        const storedId = persistentMetadata['sessionId'];
-        return typeof storedId === 'string' ? storedId : null;
-      },
+      getStoredSessionId: () => readMetadataString('sessionId'),
       setStoredSessionId: (sessionId: string) => {
         updateSessionMetadata((prev) => ({
           ...prev,
           sessionId: sessionId,
         }));
       },
+      clearStoredSessionId:
+        config.clearStoredSessionId ?? (() => dropMetadataKey('sessionId')),
+      getStoredConversationId:
+        config.getStoredConversationId ?? (() => readMetadataString('conversationId')),
+      setStoredConversationId:
+        config.setStoredConversationId ??
+        ((conversationId: string) => {
+          updateSessionMetadata((prev) => ({ ...prev, conversationId }));
+        }),
+      clearStoredConversationId:
+        config.clearStoredConversationId ?? (() => dropMetadataKey('conversationId')),
     };
   }
 
+  // Visitor-history credential store, keyed on (clientToken, keyPrefix,
+  // persistence-disabled). Owned here and injected into every client the
+  // session builds; `update()` rebuilds it when that tuple changes.
+  const historyStoreToken = (): string | null =>
+    config.features?.history?.enabled === true ? (config.clientToken ?? null) : null;
+  const buildVisitorStore = (token: string) =>
+    createVisitorStore(token, currentKeyPrefix(), config.persistState === false);
+  const initialStoreToken = historyStoreToken();
+  let visitorStore: VisitorStore | null = initialStoreToken
+    ? buildVisitorStore(initialStoreToken)
+    : null;
+  // Internal history metadata rides the same serialized persistence path as the
+  // transcript, so a reload reconstructs revision, prepend cursor, and any
+  // display projection still owed to the server.
+  const readPendingProjections = (): PendingDisplayProjections | null => {
+    const stored = persistentMetadata.pendingDisplayProjections;
+    if (!stored || typeof stored !== 'object') return null;
+    const candidate = stored as Partial<PendingDisplayProjections>;
+    if (typeof candidate.conversationId !== 'string') return null;
+    if (!Array.isArray(candidate.messageIds)) return null;
+    return {
+      conversationId: candidate.conversationId,
+      messageIds: candidate.messageIds.filter(
+        (id): id is string => typeof id === 'string'
+      ),
+    };
+  };
+  let historyInternals: WidgetHistoryInternals = {
+    ...(visitorStore ? { visitorStore } : {}),
+    historyBootstrapReady,
+    getStoredMessageCursor: () => readMetadataString('historyMessageCursor'),
+    setStoredMessageCursor: (cursor: string | null) => {
+      if (cursor === null) {
+        dropMetadataKey('historyMessageCursor');
+        return;
+      }
+      updateSessionMetadata((prev) => ({
+        ...prev,
+        historyMessageCursor: cursor,
+      }));
+    },
+    getPendingDisplayProjections: readPendingProjections,
+    setPendingDisplayProjections: (pending) => {
+      if (!pending) {
+        dropMetadataKey('pendingDisplayProjections');
+        return;
+      }
+      updateSessionMetadata((prev) => ({
+        ...prev,
+        pendingDisplayProjections: pending,
+      }));
+    },
+    ...(hostOwnsConversationId
+      ? {}
+      : {
+          getStoredConversationRevision: () =>
+            readMetadataString('conversationRevision'),
+          setStoredConversationRevision: (revision: string | null) => {
+            if (revision === null) {
+              dropMetadataKey('conversationRevision');
+              return;
+            }
+            updateSessionMetadata((prev) => ({
+              ...prev,
+              conversationRevision: revision,
+            }));
+          },
+        }),
+  };
+  const syncVisitorStore = () => {
+    const token = historyStoreToken();
+    if (
+      token &&
+      visitorStore?.matches(token, currentKeyPrefix(), config.persistState === false)
+    ) {
+      return;
+    }
+    if (!token && !visitorStore) return;
+    // Never clear the old namespace: it belongs to the prior surface/config.
+    visitorStore?.destroy();
+    visitorStore = token ? buildVisitorStore(token) : null;
+    const nextInternals: WidgetHistoryInternals = { ...historyInternals };
+    if (visitorStore) nextInternals.visitorStore = visitorStore;
+    else delete nextInternals.visitorStore;
+    historyInternals = nextInternals;
+    session.setHistoryInternals(historyInternals);
+  };
+
   // Global timer for live-updating tool elapsed time spans.
   // Runs at 100ms while any [data-tool-elapsed] span exists in the message area,
   // auto-stops when none remain. Operates on real DOM after morph, not temp elements.
@@ -6912,6 +7272,8 @@ export const createAgentExperience = (
         return statusCopy[s];
       };
       applyStatusToElement(statusText, getCurrentStatusText(status), currentStatusConfig, status);
+      // A paused/resuming durable turn gates the history button too.
+      historyChromeSync();
     },
     onStreamingChanged(streaming) {
       if (!streaming) {
@@ -6923,6 +7285,7 @@ export const createAgentExperience = (
       }
       isStreaming = streaming;
       setComposerDisabled(streaming);
+      historyChromeSync();
       // Re-render messages to show/hide typing indicator
       if (session) {
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);
@@ -7009,6 +7372,13 @@ export const createAgentExperience = (
       syncArtifactPane();
       persistState();
     },
+    // Late-bound: the history block installs the real handlers below.
+    onHistoryStateChanged(state) {
+      historyStateHandler(state);
+    },
+    onHistoryNotice(notice) {
+      historyNoticeHandler(notice);
+    },
     onReconnect(event) {
       // Map the durable-reconnect lifecycle to public controller events.
       const { executionId, lastEventId } = event.handle;
@@ -7024,7 +7394,7 @@ export const createAgentExperience = (
         eventBus.emit("stream:resumed", { executionId, after: lastEventId });
       }
     }
-  });
+  }, historyInternals);
 
   sessionRef.current = session;
 
@@ -7032,6 +7402,12 @@ export const createAgentExperience = (
   // reconnect's backoff timer and focus/online listeners don't outlive the
   // widget (cancel() → teardownReconnect()).
   destroyCallbacks.push(() => session.cancel());
+  // Drop the visitor store's `storage` listener and the session's subscription
+  // to it; a client rebuild must not leak either.
+  destroyCallbacks.push(() => {
+    session.destroy();
+    visitorStore?.destroy();
+  });
 
   // Mirror read-aloud playback state into the action buttons, and surface it as
   // a controller event (parallel to message:copy / message:feedback).
@@ -7075,161 +7451,2489 @@ export const createAgentExperience = (
     }
   }
 
-  // Pre-initialize client session when in client token mode so feedback works
-  // before the user sends their first message (e.g. on restored/persisted messages)
-  if (config.clientToken) {
-    session.initClientSession().catch((err) => {
-      if (config.debug) {
-        // eslint-disable-next-line no-console
-        console.warn("[AgentWidget] Pre-init client session failed:", err);
-      }
+  // ==========================================================================
+  // Visitor conversation history shell
+  // (docs/visitor-history-implementation-plan.md D6/D7/D8)
+  //
+  // The shell owns placement, open/close, inertness of the obscured
+  // conversation, focus orchestration, confirmations, and every session
+  // mutation. The lazily loaded Messages view owns the list itself.
+  // ==========================================================================
+
+  /** Rail needs this much HOST width; below it, rail collapses to panel. */
+  const RAIL_MIN_CONTAINER_WIDTH = 720;
+  /** Ceiling on the view's ~160ms exit before the close proceeds regardless. */
+  const HISTORY_EXIT_TIMEOUT_MS = 250;
+
+  let historyShellCopy: ResolvedHistoryShellCopy = resolveHistoryShellCopy(
+    config.features?.history?.copy
+  );
+  let historyProvider: HistoryProvider | null = null;
+  let historyUnavailable = false;
+  /** Default view + plugin render-hook arbitration. Null while closed. */
+  let historySurface: HistoryRenderSurface | null = null;
+  let historyOperationContext: HistoryOperationContext | null = null;
+  let historyReturnSurface: HistoryReturnSurface = "conversation";
+  let historyInvoker: HTMLElement | null = null;
+  let historyButton: HTMLButtonElement | null = null;
+  /** The inserted node: removing the button alone would orphan its wrapper. */
+  let historyButtonWrapper: HTMLElement | null = null;
+  let historySessionState: SessionHistoryState = session.getHistoryState();
+  let historyIdentityKey: string | null = null;
+  let historyOpenToken = 0;
+  let clearChatDefaultLabel: string | null = null;
+  let unsubscribeHistoryAvailability: (() => void) | null = null;
+  let unsubscribeHistoryIdentity: (() => void) | null = null;
+  const historyRegionId = `persona-history-${Math.random().toString(36).slice(2, 8)}`;
+
+  const historyFeatureEnabled = (): boolean =>
+    config.features?.history?.enabled === true;
+  const historyAvailable = (): boolean =>
+    historyFeatureEnabled() && !!historyProvider && !historyUnavailable;
+  /** Switching conversations mid-turn would abandon a live answer. */
+  const historyTurnBusy = (): boolean => {
+    const status = session.getStatus();
+    return isStreaming || status === "paused" || status === "resuming";
+  };
+  const historyScope = (): HistoryScope => {
+    const configured = config.features?.history?.scope;
+    if (configured) return configured;
+    // Derived, not requested: narrow to what the provider advertises rather
+    // than asking it for a scope it will reject.
+    const derived: HistoryScope = config.getIdentityProof
+      ? "verified-user"
+      : "browser";
+    const scopes = historyProvider?.capabilities.scopes;
+    if (!scopes || scopes.includes(derived)) return derived;
+    return scopes[0] ?? derived;
+  };
+  const historyOperationScope = (): HistoryScope =>
+    historyOperationContext?.scope ?? historyScope();
+  const activeHistoryTargetId = (): string | null =>
+    session.getClientSession()?.targetId ?? null;
+
+  const identityStatusKey = (status: HistoryIdentityStatus): string =>
+    `${status.state}:${"reason" in status ? status.reason : ""}`;
+
+  /** Instance-scoped only: authentication state is never broadcast page-wide. */
+  const emitHistoryIdentityStatus = (status: HistoryIdentityStatus): void => {
+    const key = identityStatusKey(status);
+    if (key === historyIdentityKey) return;
+    historyIdentityKey = key;
+    eventBus.emit("history:identityStatusChanged", {
+      status,
+      timestamp: Date.now(),
     });
-  }
+  };
 
-  // Wire up optional SSE tap (host) + event stream buffer to capture SSE events
-  if (eventStreamBuffer || config.onSSEEvent) {
-    session.setSSEEventCallback((type: string, payload: unknown) => {
-      config.onSSEEvent?.(type, payload);
-      throughputTracker?.processEvent(type, payload);
-      eventStreamBuffer?.push({
-        id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-        type,
-        timestamp: Date.now(),
-        payload: JSON.stringify(payload)
-      });
+  /** Unconditional: `announce()` is gated on an unrelated scroll opt-in. */
+  const announceHistory = (message: string): void => {
+    if (!message) return;
+    liveRegion.textContent = "";
+    liveRegion.textContent = message;
+  };
+
+  // --- provider ------------------------------------------------------------
+
+  /** One provider build per widget instance; a new factory identity rebuilds. */
+  let configuredProviderFactory: (() => HistoryProvider) | null = null;
+  let configuredProviderInstance: HistoryProvider | null = null;
+
+  const buildHistoryProvider = (): HistoryProvider | null => {
+    if (!historyFeatureEnabled()) return null;
+    // Demo/test override first, then the host's own provider; production
+    // without one builds the Runtype provider from client-token config.
+    const override = getHistoryProviderFactory();
+    if (override) return override();
+    const configured = config.features?.history?.provider;
+    if (configured) {
+      if (typeof configured !== "function") return configured;
+      if (configuredProviderFactory !== configured) {
+        configuredProviderFactory = configured;
+        configuredProviderInstance = configured();
+      }
+      return configuredProviderInstance;
+    }
+    if (!session.isClientTokenMode()) return null;
+    return createRuntypeHistoryProvider({
+      client: session.getClient(),
+      getIdentityProofConfigured: () =>
+        typeof config.getIdentityProof === "function",
+      onActivationCommitted: (clientSession) =>
+        session.bindActivatedSession(clientSession),
+      // Connection-config rebuilds replace the client under the provider.
+      getClient: () => session.getClient(),
     });
-  }
+  };
 
-  // Durable-session reconnect boot path: once history is in place,
-  // if the host passed a non-terminal resume handle (+ a reconnect transport),
-  // immediately re-enter `resuming` and replay everything past the cursor into
-  // the restored conversation. Fires AFTER hydration so the trailing partial
-  // assistant bubble exists for the replay to append to.
-  const maybeBootResume = () => {
-    if (config.resume && typeof config.reconnectStream === "function") {
-      session.resumeFromHandle(config.resume);
-    }
+  const installHistoryProvider = (): void => {
+    unsubscribeHistoryAvailability?.();
+    unsubscribeHistoryAvailability = null;
+    unsubscribeHistoryIdentity?.();
+    unsubscribeHistoryIdentity = null;
+    historyUnavailable = false;
+    historyProvider = buildHistoryProvider();
+    const next: WidgetHistoryInternals = { ...historyInternals };
+    if (historyProvider) next.historyProvider = historyProvider;
+    else delete next.historyProvider;
+    historyInternals = next;
+    session.setHistoryInternals(historyInternals);
+    if (!historyProvider) return;
+    unsubscribeHistoryAvailability =
+      historyProvider.subscribeAvailability?.((available) => {
+        historyUnavailable = !available;
+        // A degrade must remove an ALREADY-rendered surface, not just a flag.
+        if (!available) closeHistory({ restoreFocus: false });
+        syncHistoryChromeImpl();
+      }) ?? null;
+    unsubscribeHistoryIdentity = historyProvider.subscribeIdentityStatus(
+      (status) => emitHistoryIdentityStatus(status)
+    );
+    historyIdentityKey = identityStatusKey(historyProvider.getIdentityStatus());
   };
 
-  if (pendingStoredState) {
-    pendingStoredState
-      .then((state) => {
-        if (!state) return;
-        if (state.metadata) {
-          persistentMetadata = ensureRecord(state.metadata);
-          actionManager.syncFromMetadata();
-        }
-        if (state.messages?.length) {
-          // Restored history must not read as a fresh send (scroll-on-send /
-          // anchor-top would fire for the last restored user message).
-          suppressScrollSend = true;
-          try {
-            session.hydrateMessages(state.messages);
-          } finally {
-            suppressScrollSend = false;
-          }
-        }
-        if (state.artifacts?.length) {
-          session.hydrateArtifacts(
-            state.artifacts,
-            state.selectedArtifactId ?? null
-          );
-        }
-      })
-      .catch((error) => {
-        if (typeof console !== "undefined") {
-          // eslint-disable-next-line no-console
-          console.error("[AgentWidget] Failed to hydrate stored state:", error);
-        }
-      })
-      .finally(() => {
-        welcomeHydrated = true;
-        maybeBootResume();
-      });
-  } else {
-    maybeBootResume();
-  }
+  // --- presentation hosts --------------------------------------------------
 
-  // Centralized so both the default composer (`handleSubmit`) and the plugin
-  // composer (`renderComposer.onSubmit`) auto-expand the composer-bar wrapper
-  // when a message is sent while the panel is collapsed. Without a single
-  // helper the two submit paths drift over time.
-  const maybeExpandComposerBar = () => {
-    if (!isComposerBar()) return;
-    if (open) return;
-    const expandOnSubmit = config.launcher?.composerBar?.expandOnSubmit ?? true;
-    if (!expandOnSubmit) return;
-    setOpenState(true, "auto");
+  /**
+   * Resolved against the history HOST width, never the viewport. With the
+   * artifact split mounted the split root is that host, not the container:
+   * width the artifact pane borrows from the chat column is still the widget's,
+   * so a drag on the split must never read as a narrow host and re-mode the
+   * rail. A real window/host narrowing shrinks the split root too, and still
+   * flips.
+   */
+  const resolveHistoryPresentation = (): ResolvedHistoryPresentation => {
+    const configured = config.features?.history?.presentation ?? "panel";
+    if (configured === "panel") return "panel";
+    if (configured === "auto") {
+      // Floating launchers stay panel-based at every width.
+      const inlineOrDocked = !launcherEnabled || isDockedMountMode(config);
+      if (!inlineOrDocked) return "panel";
+    }
+    const host = artifactSplitRoot ?? container;
+    const width = host.getBoundingClientRect().width || host.clientWidth;
+    return width >= RAIL_MIN_CONTAINER_WIDTH ? "rail" : "panel";
+  };
+
+  const setHistoryHostInert = (element: HTMLElement, inert: boolean): void => {
+    if (inert) {
+      element.setAttribute("aria-hidden", "true");
+      element.setAttribute("inert", "");
+    } else {
+      element.removeAttribute("aria-hidden");
+      element.removeAttribute("inert");
+    }
+  };
+
+  /** Suppression of the shell header's own children while Messages owns the bar. */
+  const HISTORY_SUPPRESSED_ATTR = "data-persona-history-suppressed";
+  /** Shell-owned wrapper for the view's bar contents. Null while not hosting. */
+  let historyHeaderHost: HTMLElement | null = null;
+  /** Header carrying the swap-time min-height pin. Null while not hosting. */
+  let historyPinnedHeader: HTMLElement | null = null;
+  /** Handle + arbitrated element, tracked from before `historySurface` is assigned. */
+  let historyViewHandle: HistoryViewHandle | null = null;
+  let historyMountedElement: HTMLElement | null = null;
+  let capturedPanelHeader: HTMLElement | null = null;
+  let capturedPanelHeaderDisplay = "";
+
+  /** The display the shell header returns to; "none" means there is no bar. */
+  const shownHeaderDisplay = (): string =>
+    header === capturedPanelHeader
+      ? capturedPanelHeaderDisplay
+      : config.layout?.showHeader === false
+        ? "none"
+        : "";
+
+  /**
+   * One persistent bar: the shell header hosts the view's bar contents whenever
+   * the default view owns a panel and there is a visible header to host them in.
+   * A plugin's full custom surface owns everything, so it falls back to hiding.
+   */
+  const historyHeaderExternal = (): boolean =>
+    historyPresentation === "panel" &&
+    !!historyViewHandle &&
+    historyMountedElement === historyViewHandle.element &&
+    config.layout?.showHeader !== false &&
+    shownHeaderDisplay() !== "none";
+
+  const suppressHeaderChildren = (): void => {
+    for (const child of Array.from(header.children)) {
+      if (child === historyHeaderHost) continue;
+      child.setAttribute(HISTORY_SUPPRESSED_ATTR, "");
+    }
+  };
+
+  /** By attribute, not by captured list: the header may have been rebuilt. */
+  const unsuppressHeaderChildren = (): void => {
+    for (const node of Array.from(
+      container.querySelectorAll(`[${HISTORY_SUPPRESSED_ATTR}]`)
+    )) {
+      node.removeAttribute(HISTORY_SUPPRESSED_ATTR);
+    }
+  };
+
+  const hostHistoryHeaderContent = (): void => {
+    const view = historyViewHandle;
+    if (!view) return;
+    // Pin the pre-swap height so the contents swap never moves the chrome: the
+    // hosted bar is usually shorter than the title cluster it replaces, and
+    // constant-height chrome is what keeps the switch from reading as layout
+    // shift. Measurable only while the original contents are still visible; a
+    // re-entry on an already-hosted header keeps the standing pin, and a
+    // rebuilt header re-measures before its own suppression below.
+    const originalsVisible = Array.from(header.children).some(
+      (child) =>
+        child !== historyHeaderHost &&
+        !child.hasAttribute(HISTORY_SUPPRESSED_ATTR)
+    );
+    if (originalsVisible) {
+      if (historyPinnedHeader && historyPinnedHeader !== header) {
+        historyPinnedHeader.style.removeProperty("min-height");
+        historyPinnedHeader = null;
+      }
+      const measured = header.offsetHeight;
+      if (measured > 0) {
+        header.style.minHeight = `${measured}px`;
+        historyPinnedHeader = header;
+      }
+    }
+    if (!historyHeaderHost) {
+      historyHeaderHost = createElement("div", "persona-history-header-host");
+    }
+    view.setHeaderPlacement("external");
+    const content = view.getHeaderElement();
+    if (content.parentNode !== historyHeaderHost) {
+      historyHeaderHost.replaceChildren(content);
+    }
+    // The wrapper follows a rebuilt header binding; focus inside it survives.
+    if (historyHeaderHost.parentNode !== header) {
+      header.appendChild(historyHeaderHost);
+    }
+    suppressHeaderChildren();
   };
 
-  // Combine `@`-chip mentions with an inline server-command's context bundle so
-  // both reach the message in one `mentions` payload. Either side may be null.
-  type SubmitMentions = NonNullable<
-    ReturnType<ContextMentionOrchestrator["collectForSubmit"]>
-  >;
-  const mergeSubmitMentions = (
-    a: SubmitMentions | null,
-    b: SubmitMentions | null
-  ): SubmitMentions | null => {
-    if (!a) return b;
-    if (!b) return a;
-    return {
-      refs: [...a.refs, ...b.refs],
-      // allSettled, not all: one side rejecting must not discard the other
-      // side's already-resolved context (the bubble already echoed its chips).
-      finalize: async () => {
-        const [ra, rb] = await Promise.allSettled([a.finalize(), b.finalize()]);
-        const fulfilled: MentionSubmitBundle[] = [];
-        if (ra.status === "fulfilled") fulfilled.push(ra.value);
-        else console.warn("[Persona] a mention bundle failed to finalize; sending without it", ra.reason);
-        if (rb.status === "fulfilled") fulfilled.push(rb.value);
-        else console.warn("[Persona] a mention bundle failed to finalize; sending without it", rb.reason);
-        return mergeFinalizedMentions(fulfilled);
-      },
-    };
+  const releaseHistoryHeaderContent = (): void => {
+    if (historyPinnedHeader) {
+      historyPinnedHeader.style.removeProperty("min-height");
+      historyPinnedHeader = null;
+    }
+    if (!historyHeaderHost) return;
+    // The view re-adopts its bar; the wrapper never owns the content's lifetime.
+    historyViewHandle?.setHeaderPlacement("inline");
+    historyHeaderHost.remove();
+    historyHeaderHost = null;
+    unsuppressHeaderChildren();
   };
 
-  // Inline-mode composer element: after the contenteditable swap, `textarea`
-  // additionally exposes `getInlineMessageFields()` (built in the inline chunk,
-  // which owns the document model — the core never imports it). Structural shape
-  // only, so no runtime import crosses the bundle boundary.
-  type InlineComposerFieldsHost = {
-    getInlineMessageFields?: () => {
-      content: string;
-      contextMentions: AgentWidgetContextMentionRef[];
-      contentSegments: AgentWidgetContentSegment[];
+  /**
+   * Panel presentation obscures the conversation, so the transcript AND the
+   * composer must be unreachable: a visitor must never send into a conversation
+   * they cannot see. The header bar itself stays: only its contents swap, which
+   * is also why it is never inert here (rail changes nothing at all: the
+   * conversation stays primary).
+   *
+   * The widget's close (×) usually lives inside that header, but no trap
+   * results: the view's back control is the initial focus target, Escape exits,
+   * and both restore the header contents before focus lands. `top-right` close
+   * placement parents the × to the container, so it stays reachable either way.
+   *
+   * Restores exactly what it captured.
+   */
+  let restorePanelHost: (() => void) | null = null;
+  const enforcePanelHost = (): void => {
+    if (!restorePanelHost) return;
+    body.style.display = "none";
+    setHistoryHostInert(body, true);
+    // Live `footer` / `header` bindings: a composer-plugin rebuild or a
+    // header-layout rebuild swaps them and re-enters here for the replacement.
+    footer.hidden = true;
+    setHistoryHostInert(footer, true);
+    if (historyHeaderExternal()) {
+      hostHistoryHeaderContent();
+      header.style.display = shownHeaderDisplay();
+      setHistoryHostInert(header, false);
+      return;
+    }
+    // No bar to host in: hide the header the way the surface used to.
+    releaseHistoryHeaderContent();
+    header.style.display = "none";
+    setHistoryHostInert(header, true);
+  };
+  reapplyHistoryHostChrome = enforcePanelHost;
+
+  const mountPanelHost = (element: HTMLElement): void => {
+    const previousDisplay = body.style.display;
+    const previousFooterHidden = footer.hidden;
+    const capturedFooter = footer;
+    const capturedHeader = header;
+    const previousHeaderDisplay = header.style.display;
+    capturedPanelHeader = capturedHeader;
+    capturedPanelHeaderDisplay = previousHeaderDisplay;
+    restorePanelHost = () => {
+      restorePanelHost = null;
+      releaseHistoryHeaderContent();
+      capturedPanelHeader = null;
+      body.style.display = previousDisplay;
+      setHistoryHostInert(body, false);
+      capturedFooter.hidden = previousFooterHidden;
+      setHistoryHostInert(capturedFooter, false);
+      if (footer !== capturedFooter) {
+        footer.hidden = false;
+        setHistoryHostInert(footer, false);
+      }
+      capturedHeader.style.display = previousHeaderDisplay;
+      setHistoryHostInert(capturedHeader, false);
+      if (header !== capturedHeader) {
+        // A replacement carries no captured state; only config decides it.
+        header.style.display = config.layout?.showHeader === false ? "none" : "";
+        setHistoryHostInert(header, false);
+      }
     };
+    footer.parentNode?.insertBefore(element, footer);
+    enforcePanelHost();
   };
-  // Read the ordered display segments from the live inline composer, but only
-  // when at least one mention is present: a plain-text inline message must keep
-  // the normal markdown-rendered bubble (segments bypass that path), so we return
-  // undefined for pure prose and let the bubble render `content` as usual.
-  const readInlineContentSegments = (): AgentWidgetContentSegment[] | undefined => {
-    const host = textarea as unknown as InlineComposerFieldsHost;
-    const fields = host.getInlineMessageFields?.();
-    if (!fields) return undefined;
-    const hasMention = fields.contentSegments.some((s) => s.kind === "mention");
-    return hasMention ? fields.contentSegments : undefined;
+
+  let railShell: HTMLElement | null = null;
+  let railHost: HTMLElement | null = null;
+  let railColumn: HTMLElement | null = null;
+  /** Container order the rail borrows from and hands back, header first. */
+  const railBorrowed = (): Array<HTMLElement | null> => [
+    header,
+    panelElements.closeButtonWrapper,
+    panelElements.clearChatButtonWrapper,
+    body,
+    // Composer-bar mode keeps the footer outside the container; the parent
+    // checks below then never adopt it.
+    footer,
+  ];
+
+  /** Collapsed icon rail, measured from the reference sidebar. */
+  const RAIL_COLLAPSED_WIDTH = 52;
+  const railCollapsible = (): boolean =>
+    config.features?.history?.rail?.collapsible !== false;
+  const railSide = (): "left" | "right" =>
+    config.features?.history?.rail?.side === "right" ? "right" : "left";
+  /** The band a rail width may take, by config or by drag. */
+  const RAIL_MIN_WIDTH = 200;
+  const RAIL_MAX_WIDTH = 400;
+  const clampRailWidth = (value: number): number =>
+    Math.min(RAIL_MAX_WIDTH, Math.max(RAIL_MIN_WIDTH, Math.round(value)));
+
+  const railResizable = (): boolean =>
+    config.features?.history?.rail?.resizable === true;
+  /** Resolved once per widget: storage, else nothing. */
+  let railWidthChoice: number | null | undefined;
+
+  // Same teaser pattern as the collapsed state: blocked storage throws rather
+  // than fails, so the resolved value is also the in-memory fallback.
+  const storedRailWidth = (): number | null => {
+    if (railWidthChoice === undefined) {
+      railWidthChoice = null;
+      if (config.persistState !== false) {
+        try {
+          const stored = Number(
+            window.localStorage.getItem(`${currentKeyPrefix()}rail-width`)
+          );
+          if (stored) railWidthChoice = stored;
+        } catch {
+          /* blocked storage: the config width stands */
+        }
+      }
+    }
+    return railWidthChoice;
   };
 
-  // Re-entrancy guard for the async submit path: `takeInlineCommand` awaits (a
-  // lazy chunk load + host resolve) before the composer clears, and
-  // `isStreaming()` is still false in that window, so a second Enter would
-  // otherwise dispatch the same text/command twice.
-  let submitInFlight = false;
+  /**
+   * Expanded rail width, shared by the column and the floating overlay. A
+   * dragged width outranks config, the way the collapsed state does: a live
+   * `update()` must not undo what the visitor chose.
+   */
+  const railWidth = (): number =>
+    clampRailWidth(
+      storedRailWidth() ?? config.features?.history?.rail?.width ?? 260
+    );
 
-  const performSubmit = async (submitOptions?: { viaVoice?: boolean }) => {
-    const value = textarea.value.trim();
-    const hasAttachments = attachmentManager?.hasAttachments() ?? false;
+  const setStoredRailWidth = (next: number): void => {
+    railWidthChoice = next;
+    if (config.persistState === false) return;
+    try {
+      window.localStorage.setItem(`${currentKeyPrefix()}rail-width`, String(next));
+    } catch {
+      /* blocked storage: the in-memory value above is the fallback */
+    }
+  };
+  /**
+   * Overlay mode: the collapsed rail is a trigger in the conversation header
+   * plus a floating host, so there is no icon column and no mounted view at
+   * rest. `collapsed` then means "not pinned".
+   */
+  const railOverlayMode = (): boolean =>
+    railCollapsible() &&
+    config.features?.history?.rail?.collapsedBehavior === "overlay";
+  /** True while the view is mounted in the floating host, not a rail column. */
+  let railOverlayOpen = false;
 
-    // Inline slash command (Slack-style): every `command:"server"` plus any
-    // arg-bearing prompt/action. Resolve FIRST — a prompt command changes the
-    // text to send, and an action sends nothing at all.
-    const inline = value
-      ? await (mentionOrchestrator?.takeInlineCommand(value) ?? Promise.resolve(null))
-      : null;
+  /** Decorative image for a config-supplied rail icon or brand URL. */
+  const railIconImage = (src: string): HTMLImageElement => {
+    const image = createElement("img");
+    image.src = src;
+    image.alt = "";
+    image.setAttribute("aria-hidden", "true");
+    return image;
+  };
 
-    if (inline?.kind === "action") {
+  /**
+   * One brand declaration, resolved here where the lucide registry lives, into
+   * the callback both rail placements call: the expanded heading and the
+   * collapsed toggle's rest face. Precedence render > iconUrl > icon; the
+   * icon cases resolve once (so an unknown name warns once) and each caller
+   * gets its own copy, since both faces can be in the DOM at once.
+   */
+  const railBrandNode = ():
+    | ((collapsed: boolean) => Element | null)
+    | undefined => {
+    const brand = config.features?.history?.rail?.brand;
+    if (!brand) return undefined;
+    let warned = false;
+    let mark: Element | null | undefined;
+    return (collapsed) => {
+      if (brand.render) {
+        try {
+          return brand.render({ collapsed }) ?? null;
+        } catch (error) {
+          if (!warned) {
+            warned = true;
+            console.warn("[persona] history rail brand threw", error);
+          }
+          return null;
+        }
+      }
+      if (mark === undefined) {
+        if (brand.iconUrl) mark = railIconImage(brand.iconUrl);
+        else mark = brand.icon ? renderLucideIcon(brand.icon, 20) : null;
+      }
+      return mark ? (mark.cloneNode(true) as Element) : null;
+    };
+  };
+
+  /**
+   * Config nav sections, normalized for the size-capped chunk: icon precedence
+   * (renderIcon > iconUrl > icon) collapses to one memoized thunk resolved
+   * here, where the lucide registry already lives, and every host callback gets
+   * a warn-once-per-section guard.
+   */
+  const configNavSections = (): HistoryRailSection[] =>
+    config.features?.history?.rail?.sections?.map((section) => {
+      let warned = false;
+      const warn = (error: unknown): void => {
+        if (warned) return;
+        warned = true;
+        console.warn("[persona] history rail section threw", section.id, error);
+      };
+      return {
+        id: section.id,
+        title: section.title,
+        placement: section.placement ?? "above-conversations",
+        items: section.items.map((item) => {
+          // Built on first paint and cached: an unknown lucide name warns once,
+          // and a presentation flip reuses the node it made.
+          let node: Element | null | undefined;
+          return {
+            id: item.id,
+            label: item.label,
+            badge: item.badge,
+            iconNode: (): Element | null => {
+              if (node !== undefined) return node;
+              try {
+                if (item.renderIcon) node = item.renderIcon() ?? null;
+                else if (item.iconUrl) node = railIconImage(item.iconUrl);
+                else node = item.icon ? renderLucideIcon(item.icon, 20) : null;
+              } catch (error) {
+                warn(error);
+                node = null;
+              }
+              return node;
+            },
+            onSelect: () => {
+              try {
+                item.onSelect();
+              } catch (error) {
+                warn(error);
+              }
+            },
+          };
+        }),
+      };
+    }) ?? [];
+
+  /** One array for the chunk: config sections first in each placement bucket. */
+  const railNavSections = (
+    pluginSections: HistoryRailSection[]
+  ): HistoryRailSection[] | undefined => {
+    const sections = configNavSections();
+    for (const section of pluginSections) {
+      // Config owns the id space; a colliding plugin section is dropped.
+      if (sections.some((existing) => existing.id === section.id)) {
+        console.warn("[persona] duplicate history rail section id", section.id);
+      } else sections.push(section);
+    }
+    return sections.length ? sections : undefined;
+  };
+
+  /** Resolved once per widget: storage, else the configured default. */
+  let railCollapsed: boolean | null = null;
+
+  const railCollapseKey = (): string => `${currentKeyPrefix()}rail-collapsed`;
+
+  // localStorage access throws (not just fails) in Safari private mode and
+  // partitioned iframes, so the resolved value is also the in-memory fallback.
+  const isRailCollapsed = (): boolean => {
+    if (railCollapsed === null) {
+      railCollapsed = config.features?.history?.rail?.defaultCollapsed === true;
+      if (config.persistState !== false) {
+        try {
+          const stored = window.localStorage.getItem(railCollapseKey());
+          if (stored) railCollapsed = stored === "1";
+        } catch {
+          /* blocked storage: the resolved default stands */
+        }
+      }
+    }
+    return railCollapsed;
+  };
+
+  const setRailCollapsed = (next: boolean): void => {
+    railCollapsed = next;
+    if (config.persistState === false) return;
+    try {
+      window.localStorage.setItem(railCollapseKey(), next ? "1" : "0");
+    } catch {
+      /* blocked storage: the in-memory value above is the fallback */
+    }
+  };
+
+  /**
+   * Collapsed only ever applies to a collapsible rail presentation, and never
+   * in overlay mode, where a mounted rail is always the expanded one.
+   */
+  const railShowsCollapsed = (): boolean =>
+    historyPresentation === "rail" &&
+    railCollapsible() &&
+    !railOverlayMode() &&
+    isRailCollapsed();
+
+  /** Overlay-mode counterpart, assigned with the overlay controller below. */
+  let toggleRailPinned: () => void = () => {};
+
+  const toggleRailCollapsed = (): void => {
+    // The rail's own toggle sits where the trigger does, so in overlay mode it
+    // is that control: it pins a floating rail and unpins a docked one.
+    if (railOverlayMode()) {
+      toggleRailPinned();
+      return;
+    }
+    setRailCollapsed(!isRailCollapsed());
+    historySurface?.view.setCollapsed(railShowsCollapsed());
+    applyRailChrome();
+    // The transcript column resizes beside the anchor; a clamp would bounce it.
+    repinAnchoredMessage();
+  };
+
+  /**
+   * One declaration, three artifacts: the binding below, the toggle's tooltip
+   * hint chip, and its `aria-keyshortcuts`. Null when unset or unparseable.
+   */
+  const railCollapseShortcut = (): {
+    combo: string;
+    hint: string;
+    aria: string;
+  } | null => {
+    const combo = config.features?.history?.rail?.collapseShortcut;
+    if (!combo || !parseCombo(combo)) return null;
+    return { combo, hint: formatCombo(combo), aria: ariaCombo(combo) };
+  };
+
+  /**
+   * Every binding this instance owns, re-derived so a live `update()` of the
+   * config or the plugin list lands. Config registers before plugins, so a
+   * collision leaves the config combo standing.
+   */
+  const syncShortcuts = (): void => {
+    releaseShortcuts.forEach((release) => release());
+    releaseShortcuts = [];
+    const shortcut = railCollapseShortcut();
+    if (shortcut) {
+      releaseShortcuts.push(
+        shortcuts.register({
+          id: "history-rail-collapse",
+          combo: shortcut.combo,
+          scope:
+            config.features?.history?.rail?.collapseShortcutScope === "page"
+              ? "page"
+              : "widget",
+          // Overlay mode answers at rest too: the combo is how a keyboard
+          // visitor pins a rail that is currently only a trigger.
+          when: () =>
+            (historyVisible &&
+              historyPresentation === "rail" &&
+              railCollapsible()) ||
+            railTriggerApplies(),
+          run: () =>
+            railOverlayMode() ? toggleRailPinned() : toggleRailCollapsed(),
+        })
+      );
+    }
+    for (const action of config.layout?.header?.trailingActions ?? []) {
+      if (!action.shortcut) continue;
+      releaseShortcuts.push(
+        shortcuts.register({
+          id: `header-action-${action.id}`,
+          combo: action.shortcut,
+          // The click path, so a menu action still opens its dropdown; a
+          // header rebuild swaps the button, so it is found per keypress.
+          run: () => {
+            const button = mount.querySelector<HTMLButtonElement>(
+              `[data-persona-header-action="${action.id}"]`
+            );
+            if (button) button.click();
+            else config.layout?.header?.onAction?.(action.id);
+          },
+        })
+      );
+    }
+    for (const plugin of plugins) {
+      for (const shortcut of plugin.shortcuts ?? []) {
+        releaseShortcuts.push(
+          shortcuts.register({ ...shortcut, id: `${plugin.id}:${shortcut.id}` })
+        );
+      }
+    }
+  };
+  syncShortcuts();
+
+  // --- collapsed rail as a floating overlay --------------------------------
+  //
+  // Rest state is a trigger at the leading edge of the conversation header and
+  // nothing else: no column, no mounted view, and the history chunk unloaded
+  // until a hover warms it. The pointer entering floats the expanded rail over
+  // the conversation; clicking pins it back into the full-height column.
+
+  /** Grace before a pointer that left both surfaces dismisses the rail. */
+  const RAIL_OVERLAY_GRACE_MS = 300;
+  /**
+   * Gap from the trigger, the docked edge and the bottom. A var reference, not
+   * a number, so a live theme update reaches an open overlay unaided.
+   */
+  const RAIL_OVERLAY_MARGIN = "var(--persona-history-overlay-margin,8px)";
+
+  let railTriggerButton: HTMLButtonElement | null = null;
+  let railTriggerWrapper: HTMLElement | null = null;
+  let railOverlayHost: HTMLElement | null = null;
+  let railGraceTimer: ReturnType<typeof setTimeout> | null = null;
+  /** Pointer is over the trigger or over the floating rail. */
+  let railPointerInside = false;
+  /**
+   * Uncovering the trigger re-enters it with no pointer movement at all, which
+   * would undo the dismissal that just uncovered it. That synthetic enter
+   * arrives within a frame or two of the unmount.
+   */
+  let railUncoveredUntil = 0;
+
+  /** Touch has no hover to open with, so it taps the overlay open instead. */
+  const coarsePointer = (): boolean =>
+    window.matchMedia?.("(pointer: coarse)").matches === true;
+
+  /** The trigger stands in for the collapsed rail, so it needs a rail width. */
+  const railTriggerApplies = (): boolean =>
+    historyAvailable() &&
+    railOverlayMode() &&
+    (historyPresentation ?? resolveHistoryPresentation()) === "rail";
+
+  /** Docked in its own column rather than floating over the conversation. */
+  const railPinned = (): boolean => historyVisible && !railOverlayOpen;
+
+  const cancelRailGrace = (): void => {
+    if (railGraceTimer !== null) clearTimeout(railGraceTimer);
+    railGraceTimer = null;
+  };
+
+  /** Keyboard focus warms without opening; Enter and Space commit. */
+  const warmHistoryChunk = (): void => {
+    // A failed load just leaves the overlay closed; the loader retries later.
+    void loadHistoryView().catch(() => {});
+  };
+
+  /** Leaving both surfaces dismisses, but only after a grace to come back in. */
+  const scheduleRailOverlayClose = (): void => {
+    cancelRailGrace();
+    if (!railOverlayOpen) return;
+    railGraceTimer = setTimeout(() => {
+      railGraceTimer = null;
+      if (railPointerInside || !railOverlayOpen) return;
+      // A keyboard visitor inside the floating rail never loses it to a stray
+      // pointer leaving the widget.
+      if (railOverlayHost?.contains(document.activeElement)) return;
+      // A pointer dismissal moves focus no more than a pointer open does.
+      closeHistory({ restoreFocus: false });
+    }, RAIL_OVERLAY_GRACE_MS);
+  };
+
+  /**
+   * Hover keep-alive is geometric, not element-based: a pointer travelling
+   * from the trigger to the rail crosses the conversation header, which is
+   * neither. The safe zone is the trigger, the rail, and the bridge between
+   * them: the rail's own horizontal extent, from the trigger's row down to the
+   * rail's top edge. Derived from the live rects, so a right-docked rail needs
+   * no separate case.
+   */
+  const inRailSafeZone = (x: number, y: number): boolean => {
+    const rail = railOverlayHost?.getBoundingClientRect();
+    if (!rail) return false;
+    const row = railTriggerButton?.getBoundingClientRect();
+    // The rail and the bridge are one band: the rail's own width, from the
+    // trigger's row down to the rail's bottom. The trigger is its own rect.
+    const top = row ? Math.min(row.top, rail.top) : rail.top;
+    return (
+      (x >= rail.left && x <= rail.right && y >= top && y <= rail.bottom) ||
+      (!!row && x >= row.left && x <= row.right && y >= row.top && y <= row.bottom)
+    );
+  };
+
+  const handleRailPointerMove = (event: PointerEvent): void => {
+    if (!railOverlayOpen) return;
+    railPointerInside = inRailSafeZone(event.clientX, event.clientY);
+    if (railPointerInside) cancelRailGrace();
+    // Re-arming on every outside move would restart the countdown forever.
+    else if (railGraceTimer === null) scheduleRailOverlayClose();
+  };
+
+  /**
+   * No dwell: the rail answers the pointer the moment it arrives, as fast as
+   * the chunk allows (already loaded, that is the same frame). The 300ms leave
+   * grace is what an accidental pass over the trigger costs.
+   */
+  const openRailOverlay = (opts?: { keyboard?: boolean }): void => {
+    if (historyVisible || !railTriggerApplies()) return;
+    railOverlayOpen = true;
+    void openHistory({
+      invoker: railTriggerButton,
+      keyboard: opts?.keyboard === true,
+    }).then(() => {
+      // The chunk can resolve after the pointer left, or not resolve at all.
+      if (!historyVisible) railOverlayOpen = false;
+      else if (!railPointerInside && document.activeElement !== railTriggerButton) {
+        closeHistory();
+      }
+    });
+  };
+
+  /**
+   * Floating, the rail's own toggle pins instead of collapsing, so it wears
+   * the expand label; docked, it says collapse again.
+   */
+  const syncRailToggleLabel = (): void => {
+    // The mounted element, not the surface: the first mount happens inside the
+    // surface constructor, before `historySurface` is assigned.
+    const toggle = historyMountedElement?.querySelector(
+      '[data-persona-history-focus="collapse"]'
+    );
+    if (!toggle) return;
+    toggle.setAttribute(
+      "aria-label",
+      railOverlayOpen
+        ? historyShellCopy.expandLabel
+        : historyShellCopy.collapseLabel
+    );
+    toggle.setAttribute("aria-expanded", railOverlayOpen ? "false" : "true");
+  };
+
+  /**
+   * Pin: the floating rail gives way to the full-height column, moving the
+   * SAME view element when one is already open.
+   */
+  const pinRail = (): void => {
+    setRailCollapsed(false);
+    const surface = historySurface;
+    if (!railOverlayOpen || !surface) {
+      void openHistory({ invoker: railTriggerButton });
+      return;
+    }
+    const refocus = document.activeElement === railTriggerButton;
+    railOverlayOpen = false;
+    unmountHistoryHosts();
+    // Detach before re-hosting, exactly as the panel/rail move does.
+    surface.element.remove();
+    mountHistoryElement(surface.element);
+    syncRailToggleLabel();
+    // The trigger stands down beside the rail's own toggle, so keyboard focus
+    // has to follow the control there.
+    if (refocus) focusHistoryEntry();
+    repinAnchoredMessage();
+    syncHistoryChromeImpl();
+  };
+
+  /** Unpin: the column closes and the trigger takes the control back. */
+  const unpinRail = (): void => {
+    setRailCollapsed(true);
+    closeHistory();
+  };
+
+  toggleRailPinned = (): void => {
+    if (!historyVisible || railOverlayOpen) pinRail();
+    else unpinRail();
+  };
+
+  /**
+   * The sidebar glyph, plainly. `rail.brand` belongs to the icon column, which
+   * has no other identity, and to the rail's own header; this control sits in
+   * a conversation header that already carries the agent's.
+   */
+  const buildRailTrigger = (): void => {
+    const shortcut = railCollapseShortcut();
+    const parts = createHeaderIconButton({
+      ariaLabel: historyShellCopy.expandLabel,
+      iconName: "panel-left",
+      wrapperClassName:
+        "persona-relative persona-inline-flex persona-items-center persona-justify-center",
+      extraClassName: "persona-rail-trigger",
+      // Hovering answers with the rail itself; a bubble would race the flyover.
+      // The combo stays discoverable on the floating rail's own toggle.
+      tooltip: false,
+      attrs: {
+        "data-persona-rail-trigger": "",
+        "aria-controls": historyRegionId,
+        ...(shortcut ? { "aria-keyshortcuts": shortcut.aria } : {}),
+      },
+    });
+    const button = parts.button;
+    button.addEventListener("mouseenter", () => {
+      railPointerInside = true;
+      cancelRailGrace();
+      if (coarsePointer() || Date.now() < railUncoveredUntil) return;
+      openRailOverlay();
+    });
+    button.addEventListener("mouseleave", () => {
+      railPointerInside = false;
+      // A real departure ends the hold-off: the next enter is intent.
+      railUncoveredUntil = 0;
+      scheduleRailOverlayClose();
+    });
+    // Focus only warms: Enter and Space are how a keyboard visitor commits.
+    button.addEventListener("focus", () => {
+      if (!historyVisible) warmHistoryChunk();
+    });
+    button.addEventListener("click", (event) => {
+      if (!historyAvailable()) return;
+      // Touch taps the overlay open first and pins on a second tap. A pointer
+      // that can hover is already looking at the rail, and Enter/Space (a click
+      // with detail 0) is a commitment either way, so both pin outright.
+      if (event.detail !== 0 && coarsePointer() && !historyVisible) {
+        openRailOverlay();
+      } else pinRail();
+    });
+    railTriggerButton = button;
+    railTriggerWrapper = parts.wrapper;
+  };
+
+  /**
+   * The trigger is chrome, not surface state: it exists whenever a collapsed
+   * overlay rail could be opened, and stands down only while the rail is
+   * docked, where the rail's own header toggle is the same control.
+   */
+  const syncRailOverlayTrigger = (): void => {
+    // A header rebuild detaches it; a stale ref must not block recreation.
+    if (railTriggerWrapper && !railTriggerWrapper.isConnected) {
+      railTriggerWrapper = null;
+      railTriggerButton = null;
+    }
+    if (!railTriggerApplies()) {
+      railTriggerWrapper?.remove();
+      railTriggerWrapper = null;
+      railTriggerButton = null;
+      return;
+    }
+    if (!railTriggerButton) buildRailTrigger();
+    const wrapper = railTriggerWrapper;
+    const button = railTriggerButton;
+    if (!wrapper || !button) return;
+    // Leading edge of the conversation header, mirrored for a right rail.
+    const lead = railSide() !== "right" ? header.firstChild : null;
+    if ((lead ?? header.lastChild) !== wrapper) header.insertBefore(wrapper, lead);
+    wrapper.style.display = railPinned() ? "none" : "";
+    button.setAttribute("aria-label", historyShellCopy.expandLabel);
+    button.setAttribute("aria-expanded", historyVisible ? "true" : "false");
+    // The floating rail hangs from this control, so a rebuild or a resize that
+    // moved it re-anchors what is already open.
+    if (railOverlayHost) applyRailChrome();
+  };
+
+  /**
+   * Click outside dismisses the floating rail. Portaled surfaces it opened
+   * itself (row menus, confirmations) are not "outside" it.
+   */
+  const handleRailOverlayPointerDown = (event: Event): void => {
+    if (!railOverlayOpen) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (railOverlayHost?.contains(target) || railTriggerWrapper?.contains(target)) {
+      return;
+    }
+    if (
+      target instanceof Element &&
+      target.closest('.persona-dropdown-menu,[role="alertdialog"]')
+    ) {
+      return;
+    }
+    closeHistory({ restoreFocus: false });
+  };
+  document.addEventListener("pointerdown", handleRailOverlayPointerDown, true);
+  destroyCallbacks.push(() => {
+    document.removeEventListener("pointerdown", handleRailOverlayPointerDown, true);
+    // Attached only while the rail floats; removing an unattached one is free.
+    document.removeEventListener("pointermove", handleRailPointerMove);
+    railResizeRelease?.();
+    cancelRailGrace();
+  });
+
+  // --- drag-resize of the docked rail --------------------------------------
+
+  let railResizeHandle: HTMLElement | null = null;
+  /** Ends an in-flight drag: its listeners are on the document, not the handle. */
+  let railResizeRelease: (() => void) | null = null;
+  /** Arrow-key step, matching the reference sidebar's coarse nudge. */
+  const RAIL_RESIZE_STEP = 16;
+
+  const commitRailWidth = (next: number): void => {
+    setStoredRailWidth(clampRailWidth(next));
+    applyRailChrome();
+    // The transcript resized beside the anchor; a clamp would bounce it.
+    repinAnchoredMessage();
+  };
+
+  /** Mirrors the artifact split handle: pointer capture, document-level drag. */
+  const buildRailResizeHandle = (): HTMLElement => {
+    const handle = createElement("div", "persona-rail-resizer");
+    handle.tabIndex = 0;
+    handle.setAttribute("role", "separator");
+    handle.setAttribute("aria-orientation", "vertical");
+    handle.setAttribute("aria-valuemin", String(RAIL_MIN_WIDTH));
+    handle.setAttribute("aria-valuemax", String(RAIL_MAX_WIDTH));
+
+    handle.addEventListener("pointerdown", (event) => {
+      const host = railHost;
+      if (!host || event.button !== 0) return;
+      event.preventDefault();
+      railResizeRelease?.();
+      const startX = event.clientX;
+      const startWidth = host.getBoundingClientRect().width || railWidth();
+      // A leading rail widens as the pointer travels right; a trailing one
+      // mirrors that.
+      const direction = railSide() === "right" ? -1 : 1;
+      let width = startWidth;
+      const doc = mount.ownerDocument;
+      // The collapse animation is a transition on this very basis; left on, it
+      // would trail the pointer for the whole drag.
+      host.style.transition = "none";
+      const onMove = (move: PointerEvent): void => {
+        width = clampRailWidth(startWidth + direction * (move.clientX - startX));
+        // Straight onto the basis: a chrome pass per pointer move is waste.
+        host.style.flex = `0 0 ${width}px`;
+        handle.setAttribute("aria-valuenow", String(width));
+      };
+      const onUp = (): void => {
+        railResizeRelease = null;
+        doc.removeEventListener("pointermove", onMove);
+        doc.removeEventListener("pointerup", onUp);
+        doc.removeEventListener("pointercancel", onUp);
+        host.style.removeProperty("transition");
+        try {
+          handle.releasePointerCapture(event.pointerId);
+        } catch {
+          /* the capture may already be gone */
+        }
+        commitRailWidth(width);
+      };
+      railResizeRelease = onUp;
+      doc.addEventListener("pointermove", onMove);
+      doc.addEventListener("pointerup", onUp);
+      doc.addEventListener("pointercancel", onUp);
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+        /* pointer capture is an enhancement, not the mechanism */
+      }
+    });
+
+    handle.addEventListener("keydown", (event) => {
+      // Arrows track the visual direction, so a trailing rail inverts them.
+      const step = railSide() === "right" ? -RAIL_RESIZE_STEP : RAIL_RESIZE_STEP;
+      const width = railWidth();
+      const next =
+        event.key === "ArrowRight"
+          ? width + step
+          : event.key === "ArrowLeft"
+            ? width - step
+            : event.key === "Home"
+              ? RAIL_MIN_WIDTH
+              : event.key === "End"
+                ? RAIL_MAX_WIDTH
+                : null;
+      if (next === null) return;
+      event.preventDefault();
+      commitRailWidth(next);
+    });
+    return handle;
+  };
+
+  /** Docked and expanded only: the floating rail and the icon column never resize. */
+  const syncRailResizeHandle = (
+    shell: HTMLElement,
+    before: HTMLElement
+  ): void => {
+    if (!railResizable() || railShowsCollapsed()) {
+      railResizeRelease?.();
+      railResizeHandle?.remove();
+      return;
+    }
+    const handle = railResizeHandle ?? buildRailResizeHandle();
+    railResizeHandle = handle;
+    handle.setAttribute("aria-label", historyShellCopy.resizeLabel);
+    handle.setAttribute("aria-valuenow", String(railWidth()));
+    // Between the two, on the edge the divider already faces.
+    if (handle.nextElementSibling !== before) shell.insertBefore(handle, before);
+  };
+
+  /**
+   * Rail geometry is config-derived, so it must be re-derivable: a live
+   * `update()` of `rail.width` / `rail.side` lands here, not only at mount.
+   */
+  applyRailChrome = (): void => {
+    // The bar mirrors the docked edge, so the view hears about a side flip even
+    // while it is presenting as a panel.
+    historySurface?.view.setRailSide(railSide());
+    const trailing = railSide() === "right";
+    const overlay = railOverlayHost;
+    if (overlay) {
+      // Hangs from the trigger's row rather than the widget's top edge, so the
+      // trigger stays visible and clickable above it. Measured, since a header
+      // rebuild or a resize can move the trigger.
+      const below = railTriggerButton
+        ? railTriggerButton.getBoundingClientRect().bottom -
+          container.getBoundingClientRect().top
+        : 0;
+      overlay.style.top = `calc(${Math.max(0, Math.round(below))}px + ${RAIL_OVERLAY_MARGIN})`;
+      overlay.style.width = `${railWidth()}px`;
+      overlay.style.left = trailing ? "" : RAIL_OVERLAY_MARGIN;
+      overlay.style.right = trailing ? RAIL_OVERLAY_MARGIN : "";
+    }
+    const host = railHost;
+    const shell = railShell;
+    const column = railColumn;
+    if (!host || !shell || !column) return;
+    host.style.flex = `0 0 ${
+      railShowsCollapsed() ? RAIL_COLLAPSED_WIDTH : railWidth()
+    }px`;
+    // The divider always faces the conversation, whichever edge the rail took.
+    const divider = "1px solid var(--persona-divider,#e5e7eb)";
+    host.style.borderRight = trailing ? "" : divider;
+    host.style.borderLeft = trailing ? divider : "";
+    const leading = trailing ? column : host;
+    // Reorder only on an actual side flip: re-parenting blurs what it moves.
+    if (shell.firstElementChild !== leading) {
+      shell.append(leading, trailing ? host : column);
+    }
+    syncRailResizeHandle(shell, trailing ? host : column);
+  };
+
+  /**
+   * Rail is a shell-owned navigation column running the FULL widget height
+   * beside a still-operable conversation: the shell header, `body`, the
+   * in-container composer and any top-right action wrappers move into a column
+   * next to the host, and the shell takes the header's old container slot.
+   */
+  const mountRailHost = (element: HTMLElement): void => {
+    const shell = createElement("div", "persona-history-rail-shell");
+    shell.style.cssText = "display:flex;flex-direction:row;flex:1 1 auto;min-height:0";
+    const column = createElement("div", "persona-history-rail-conversation");
+    // position: top-right close/clear wrappers anchor here instead of the
+    // container, or they would float over the rail.
+    column.style.cssText =
+      "display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;position:relative";
+    // The collapse transition is a rule in the history chunk's stylesheet: an
+    // inline one could not carry the reduced-motion query.
+    const host = createElement("div", "persona-history-rail-host");
+    host.style.cssText = "display:flex;min-height:0;overflow:hidden";
+
+    container.insertBefore(shell, header.parentNode === container ? header : body);
+    for (const node of railBorrowed()) {
+      if (node?.parentNode === container) column.appendChild(node);
+    }
+    shell.append(host, column);
+    host.appendChild(element);
+    railShell = shell;
+    railHost = host;
+    railColumn = column;
+    applyRailChrome();
+  };
+
+  /**
+   * Floating host for the collapsed overlay rail: the expanded view elevated
+   * over a conversation that keeps its own layout, so nothing is borrowed and
+   * nothing reflows around it.
+   */
+  const mountRailOverlayHost = (element: HTMLElement): void => {
+    const host = createElement("div", "persona-history-rail-overlay");
+    // Every themeable value is a var() reference with its default in the
+    // fallback, so an unset token costs nothing and a live one lands at once.
+    host.style.cssText =
+      `position:absolute;bottom:${RAIL_OVERLAY_MARGIN};` +
+      `display:flex;overflow:hidden;z-index:${PORTALED_OVERLAY_Z_INDEX - 1};` +
+      "border-radius:var(--persona-history-overlay-radius,16px);" +
+      "background:var(--persona-history-overlay-bg,var(--persona-container,#f7f7f8));" +
+      "box-shadow:var(--persona-history-overlay-shadow,0 12px 40px rgba(0,0,0,0.25))";
+    // The conversation column already relies on a positioned container.
+    container.style.position = "relative";
+    container.appendChild(host);
+    host.appendChild(element);
+    // The safe zone spans nodes the rail does not own, so hover is tracked by
+    // position for as long as it is open.
+    document.addEventListener("pointermove", handleRailPointerMove);
+    railOverlayHost = host;
+    applyRailChrome();
+    syncRailToggleLabel();
+  };
+
+  const unmountHistoryHosts = (): void => {
+    restorePanelHost?.();
+    if (railOverlayHost) {
+      // Dismissed under the pointer: hold the hover off until the synthetic
+      // enter from uncovering the trigger has passed.
+      if (railPointerInside) railUncoveredUntil = Date.now() + 150;
+      document.removeEventListener("pointermove", handleRailPointerMove);
+      railOverlayHost.remove();
+      railOverlayHost = null;
+    }
+    const shell = railShell;
+    if (shell) {
+      // A drag in flight owns document listeners the host is about to lose.
+      railResizeRelease?.();
+      // Live bindings, in panel order, before the slot the shell took. A header
+      // restored first also takes its inline action wrappers back with it, so
+      // the `contains` check skips them.
+      for (const node of railBorrowed()) {
+        if (node && shell.contains(node)) container.insertBefore(node, shell);
+      }
+      shell.remove();
+      railShell = null;
+      railHost = null;
+      railColumn = null;
+    }
+  };
+
+  /** Shell-owned chrome applied to whatever element arbitration produced. */
+  const prepareHistoryElement = (element: HTMLElement): void => {
+    historyMountedElement = element;
+    element.id = historyRegionId;
+    // Host-side flex sizing: the chunk sizes itself to 100%, the shell decides
+    // how it participates in the column/row it was just dropped into.
+    element.style.flex = "1 1 auto";
+    element.style.minHeight = "0";
+  };
+
+  /** The chunk owns its own classes/labels; the shell only picks the host. */
+  const mountHistoryElement = (element: HTMLElement): void => {
+    prepareHistoryElement(element);
+    if (historyPresentation !== "rail") mountPanelHost(element);
+    else if (railOverlayOpen) mountRailOverlayHost(element);
+    else mountRailHost(element);
+  };
+
+  /**
+   * Live rail <-> panel transition. ONE view instance survives the move, so the
+   * list, its fixed operation context, and any pending work are preserved. A
+   * custom full view is re-invoked with the new presentation value.
+   */
+  const syncHistoryPresentation = (): void => {
+    // The trigger belongs to a rail-capable width, so it resolves here too, and
+    // the header toggle stands down beside whatever it resolved to.
+    syncRailOverlayTrigger();
+    syncHistoryButton();
+    if (!historyVisible || !historySurface) return;
+    const next = resolveHistoryPresentation();
+    if (next === historyPresentation) return;
+    const focusKey = document.activeElement;
+    // The bar's contents may be focused inside the shell header, not the view.
+    const refocus =
+      focusKey instanceof HTMLElement &&
+      (historySurface.element.contains(focusKey) ||
+        historyHeaderHost?.contains(focusKey) === true)
+        ? focusKey
+        : null;
+    unmountHistoryHosts();
+    // Detach before re-hosting so a mid-move re-arbitration cannot re-insert
+    // the surface into the host it is being moved out of.
+    historySurface.element.remove();
+    // Rail is always inline; the panel host re-externalizes on mount.
+    historySurface.view.setHeaderPlacement("inline");
+    historyPresentation = next;
+    historySurface.view.setPresentation(next);
+    // Panel always shows the whole list; returning to rail restores the state.
+    historySurface.view.setCollapsed(railShowsCollapsed());
+    historySurface.requestRender();
+    if (!historySurface.element.isConnected) {
+      mountHistoryElement(historySurface.element);
+    }
+    if (refocus?.isConnected) refocus.focus();
+    else focusHistoryEntry();
+    syncScrollToBottomButton();
+    // A one-frame layout removal above the anchored message clamps scrollTop.
+    repinAnchoredMessage();
+    syncHistoryChromeImpl();
+  };
+
+  // --- open / close --------------------------------------------------------
+
+  /** The bar lives in the shell header while it is hosted there. */
+  const queryHistoryOwned = <T extends HTMLElement>(
+    element: HTMLElement,
+    selector: string
+  ): T | null =>
+    historyHeaderHost?.querySelector<T>(selector) ??
+    element.querySelector<T>(selector);
+
+  const focusHistoryEntry = (): void => {
+    const element = historySurface?.element ?? historyMountedElement;
+    if (!element) return;
+    const close = queryHistoryOwned(
+      element,
+      // The rail's leading control is a collapse toggle, not a close.
+      '[data-persona-history-focus="close"],[data-persona-history-focus="collapse"]'
+    );
+    if (close) {
+      close.focus();
+      return;
+    }
+    const heading =
+      queryHistoryOwned<HTMLElement>(element, ".persona-history-title") ??
+      // Custom contents may expose neither: the region itself is the fallback.
+      element;
+    heading.tabIndex = -1;
+    heading.focus();
+  };
+
+  const openHistory = async (opts?: {
+    returnSurface?: HistoryReturnSurface;
+    invoker?: HTMLElement | null;
+    /** Rail only: an open with no keyboard behind it must not move focus. */
+    keyboard?: boolean;
+    /** `false` skips the entry focus entirely (programmatic/preview opens). */
+    focus?: boolean;
+  }): Promise<void> => {
+    if (!historyAvailable() || historyVisible) return;
+    const provider = historyProvider;
+    if (!provider) return;
+    // An unpinned overlay rail IS its trigger, so restoring that state must
+    // render chrome only: no surface, and no chunk fetched for it.
+    if (!railOverlayOpen && railTriggerApplies() && isRailCollapsed()) {
+      syncRailOverlayTrigger();
+      return;
+    }
+    // A reopen mid-exit finishes the outgoing teardown first: never two
+    // surfaces, never a restore that lands after this one mounts.
+    settleHistoryExit();
+    const token = ++historyOpenToken;
+    historyReturnSurface = opts?.returnSurface ?? "conversation";
+    historyInvoker = opts?.invoker ?? historyButton;
+
+    let module: Awaited<ReturnType<typeof loadHistoryView>>;
+    try {
+      module = await loadHistoryView();
+    } catch {
+      // Lazy-chunk failure keeps the invoking surface interactive and retryable.
+      announceHistory(historyShellCopy.openHistoryLabel);
+      return;
+    }
+    if (token !== historyOpenToken || historyVisible) return;
+
+    // One scope for the whole opened view; every operation reuses it.
+    historyOperationContext = { scope: historyScope() };
+    historyPresentation = resolveHistoryPresentation();
+    historyVisible = true;
+
+    // Built externally when there is a shell header to host it in; the panel
+    // host re-decides on mount, so this only avoids a needless first insert.
+    const initialHeaderPlacement: HistoryHeaderPlacement =
+      historyPresentation === "panel" &&
+      config.layout?.showHeader !== false &&
+      header.style.display !== "none"
+        ? "external"
+        : "inline";
+
+    const rowAvatar = config.features?.history?.rowAvatar;
+    const shortcut = railCollapseShortcut();
+    const collapseShortcutStrings = shortcut
+      ? { hint: shortcut.hint, aria: shortcut.aria }
+      : null;
+
+    const baseViewOptions: HistoryViewOptions = {
+      provider,
+      context: historyOperationContext,
+      targetId: activeHistoryTargetId(),
+      presentation: historyPresentation,
+      collapsible: railCollapsible(),
+      collapsed: railShowsCollapsed(),
+      railSide: railSide(),
+      renderRailHeader: config.features?.history?.rail?.renderHeader,
+      railBrand: railBrandNode(),
+      onToggleCollapse: toggleRailCollapsed,
+      // Formatted strings only: the size-capped chunk never imports shortcuts.
+      ...(collapseShortcutStrings
+        ? { collapseShortcut: collapseShortcutStrings }
+        : {}),
+      headerPlacement: initialHeaderPlacement,
+      showScopeStatus: config.features?.history?.showScopeStatus !== false,
+      showDelete: config.features?.history?.showDelete !== false,
+      showDeleteAll: config.features?.history?.showDeleteAll !== false,
+      ...(config.features?.history?.listActions?.length
+        ? { listActions: config.features.history.listActions }
+        : {}),
+      // Rows borrow the launcher's IMAGE mark only: agentIconText carries the
+      // merged 💬 default, which would put a placeholder glyph on every row.
+      // No mark at all means text-only rows, the assistant-list default.
+      rowAvatar:
+        rowAvatar === false
+          ? false
+          : typeof rowAvatar === "string"
+            ? rowAvatar
+            : config.launcher?.iconUrl,
+      activeConversationId: session.getActiveConversationId(),
+      ...(config.features?.history?.grouping
+        ? { grouping: config.features.history.grouping }
+        : {}),
+      ...(config.features?.history?.copy
+        ? { copy: config.features.history.copy }
+        : {}),
+      ...(config.features?.history?.pageSize !== undefined
+        ? { pageSize: config.features.history.pageSize }
+        : {}),
+      // The pending/error surface owns failures (optimistic open), so the
+      // row must not double-report them.
+      onSelect: (conversationId) =>
+        openHistoryConversation(conversationId, { focusComposer: true }).catch(
+          () => {}
+        ),
+      onActiveConversationChange: (summary) =>
+        setActiveConversationSummary(summary),
+      // The chunk is size-capped, so it borrows the shell's tooltip module.
+      attachTooltip,
+      onStartNew: () => startNewConversation({ focusComposer: true }),
+      onClose: () => closeHistory(),
+      onRequestDeleteConversation: (conversationId) =>
+        requestDeleteConversation(conversationId),
+      onRequestClearHistory: () => requestClearConversationHistory(),
+      ...(provider.resetDevice
+        ? { onRequestResetIdentity: () => requestResetHistoryIdentity() }
+        : {}),
+    };
+
+    // Plugin hooks arbitrate around the default view; the shell keeps placement,
+    // open/close, Escape, confirmations, announcements, and focus.
+    historySurface = createHistoryRenderSurface({
+      plugins,
+      config,
+      getPresentation: () => historyPresentation ?? "panel",
+      getReturnSurface: () => historyReturnSurface,
+      close: () => closeHistory(),
+      createView: ({ slots, renderDom, onModelChange, railSections }) => {
+        // Tracked before `historySurface` is assigned: the first mount happens
+        // inside this constructor and already needs the handle.
+        historyViewHandle = module.createHistoryView({
+          ...baseViewOptions,
+          railSections: railNavSections(railSections),
+          slots,
+          renderDom,
+          onModelChange,
+          onAnnounce: announceHistory,
+        });
+        return historyViewHandle;
+      },
+      onElementChanged: (next, previous) => {
+        if (!previous?.isConnected) return mountHistoryElement(next);
+        prepareHistoryElement(next);
+        previous.replaceWith(next);
+        // Default <-> custom re-arbitration changes who owns the bar.
+        enforcePanelHost();
+      },
+    });
+    historySurface.view.setNewConversationRequired(
+      historySessionState.recovery === "new_conversation_required"
+    );
+    // The panel makes the conversation inert behind it, so it always takes
+    // focus. The rail leaves it operable: a pointer or programmatic open would
+    // only leave a keyboard ring on the toggle, so it keeps focus where it is.
+    // `focus: false` opts out entirely: the caller owns focus (preview replay).
+    if (
+      opts?.focus !== false &&
+      (historyPresentation !== "rail" || opts?.keyboard === true)
+    ) {
+      focusHistoryEntry();
+    }
+    syncScrollToBottomButton();
+    repinAnchoredMessage();
+    syncHistoryChromeImpl();
+    eventBus.emit("history:opened", {
+      presentation: historyPresentation,
+      returnSurface: historyReturnSurface,
+      timestamp: Date.now(),
+    });
+  };
+
+  /**
+   * Close is: exit animation -> unmount and restore the hidden chrome ->
+   * restore focus. The teardown half is deferred behind the view's `playExit()`
+   * promise, so it is exposed here for whoever preempts it (a reopen, a widget
+   * teardown). Idempotent, and a no-op while nothing is leaving.
+   */
+  let settleHistoryExit: () => void = () => {};
+
+  const closeHistory = (opts?: { restoreFocus?: boolean }): void => {
+    if (!historyVisible) return;
+    historyOpenToken += 1;
+    const returnSurface = historyReturnSurface;
+    const invoker = historyInvoker;
+    const surface = historySurface;
+    const restoreInvokerFocus = opts?.restoreFocus !== false;
+    // Flipped before the animation: a second close is a no-op and a reopen
+    // mounts fresh rather than re-entering the surface that is leaving.
+    historyVisible = false;
+
+    let done = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const finish = (): void => {
+      if (done) return;
+      done = true;
+      settleHistoryExit = () => {};
+      if (timer !== null) clearTimeout(timer);
+      // The floating rail is torn down with the surface it hosted.
+      railOverlayOpen = false;
+      cancelRailGrace();
+      // Before focus restoration below: the invoker lives in the shell header,
+      // which is inert until this restores it.
+      unmountHistoryHosts();
+      // Dispose before destroy: cleanups belong to the render being torn down.
+      surface?.dispose();
+      surface?.view.destroy();
+      surface?.element.remove();
+      // A reopen that preempted this exit already owns the shell state.
+      if (historySurface === surface) {
+        historySurface = null;
+        historyViewHandle = null;
+        historyMountedElement = null;
+        historyPresentation = null;
+        historyOperationContext = null;
+        historyInvoker = null;
+      }
+      syncScrollToBottomButton();
+      // Removing a full-height host above the anchored message clamps scrollTop.
+      repinAnchoredMessage();
+      syncHistoryChromeImpl();
+      if (restoreInvokerFocus) {
+        const target = invoker ?? historyButton;
+        if (target?.isConnected) target.focus();
+        else maybeFocusInput();
+      }
+      eventBus.emit("history:closed", { returnSurface, timestamp: Date.now() });
+    };
+
+    // Only the arbitrated default view animates: a plugin full view owns its
+    // own element and never got an entrance either.
+    const exit =
+      surface && surface.element === surface.view.element
+        ? surface.view.playExit()
+        : null;
+    if (!exit) {
+      finish();
+      return;
+    }
+    settleHistoryExit = finish;
+    // A cancelled or never-settling animation must never wedge the close.
+    timer = setTimeout(finish, HISTORY_EXIT_TIMEOUT_MS);
+    void exit.then(finish);
+  };
+
+  /** Escape returns to the recorded invoking surface, like the back control. */
+  const handleHistoryKeydown = (event: KeyboardEvent): void => {
+    if (event.key !== "Escape" || !historyVisible || !historySurface) return;
+    // Rail leaves the conversation operable: only its own focus closes it, and
+    // the floating rail's scope includes the trigger it hangs from.
+    if (historyPresentation === "rail") {
+      const target = event.target;
+      if (
+        !(target instanceof Node) ||
+        !(
+          historySurface.element.contains(target) ||
+          (railOverlayOpen && railTriggerWrapper?.contains(target) === true)
+        )
+      ) {
+        return;
+      }
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    closeHistory();
+  };
+  container.addEventListener("keydown", handleHistoryKeydown);
+  destroyCallbacks.push(() =>
+    container.removeEventListener("keydown", handleHistoryKeydown)
+  );
+
+  // --- session operations --------------------------------------------------
+
+  // ---- header title binding (layout.header.titleSource: "conversation") ----
+  // The history view reports the active conversation's list summary through
+  // onActiveConversationChange; the shell owns the fallback and the write, so
+  // the binding works for both the plain title span and the titleMenu label.
+  // `activeConversationStarred` additionally feeds the built-in title-menu
+  // star toggle.
+  let activeConversationTitle: string | null = null;
+  let activeConversationStarred = false;
+  const applyHeaderTitle = (): void => {
+    if (!headerTitle) return;
+    const conversationMode = config.layout?.header?.titleSource === "conversation";
+    const bound = conversationMode
+      ? activeConversationTitle?.trim() || null
+      : null;
+    headerTitle.textContent = bound ?? config.launcher?.title ?? "Chat Assistant";
+    // A conversation-bound titleMenu acts on the ACTIVE conversation, so with
+    // none open the combo locks into a plain title (no chevron, no menu)
+    // instead of a menu of no-ops. Static titles keep their menu untouched.
+    const combo = headerTitle.closest<HTMLElement>(".persona-combo-btn");
+    if (!combo) return;
+    const menuAvailable =
+      !conversationMode || session.getActiveConversationId() !== null;
+    combo.setAttribute("data-persona-menu-locked", menuAvailable ? "false" : "true");
+    combo.setAttribute("aria-haspopup", menuAvailable ? "true" : "false");
+    if (!menuAvailable) combo.setAttribute("aria-expanded", "false");
+    combo.style.cursor = menuAvailable ? "pointer" : "default";
+    const chevron = combo.querySelector("svg");
+    if (chevron) chevron.style.display = menuAvailable ? "" : "none";
+  };
+  const setActiveConversationTitle = (title: string | null): void => {
+    if (title === activeConversationTitle) return;
+    activeConversationTitle = title;
+    applyHeaderTitle();
+  };
+  const setActiveConversationSummary = (
+    summary: HistoryConversationSummary | null
+  ): void => {
+    activeConversationStarred = summary?.starred === true;
+    setActiveConversationTitle(summary ? summary.title.trim() || null : null);
+    // The title can be unchanged (null to null) while the ACTIVE id flipped,
+    // e.g. start-new; the menu lock keys on the id, so always resync.
+    applyHeaderTitle();
+  };
+
+  // Built-in title-menu actions, raised as a bubbling DOM event by the header
+  // combo (the initial header is built by the pure panel builder, out of the
+  // shell's reach). One listener on the stable container survives header
+  // rebuilds and rail re-homing.
+  // Initial stamp: with no active conversation the conversation-bound menu
+  // starts locked (and a restored session starts unlocked).
+  applyHeaderTitle();
+
+  container.addEventListener("persona:title-menu-builtin", (event) => {
+    const actionId = (event as CustomEvent<{ actionId?: string }>).detail
+      ?.actionId;
+    const activeId = session.getActiveConversationId();
+    if (!activeId) return;
+    if (actionId === "delete") {
+      void requestDeleteConversation(activeId);
+    } else if (actionId === "star" && session.canUpdateConversations()) {
+      void updateHistoryConversation(activeId, {
+        starred: !activeConversationStarred,
+      }).catch(() => {});
+    }
+  });
+
+  // --- optimistic conversation open ---------------------------------------
+  // Selection acknowledges within a frame: the composer gates immediately, the
+  // stand-in takes the surface only if the fetch outlasts the show delay, and
+  // the transcript hydrates when the fetch lands. The token invalidates a stale
+  // resolution after a newer open, a new conversation, or a failure the visitor
+  // navigated away from.
+  let conversationOpenToken = 0;
+  // Show delay: opens that land inside it swap straight from the welcome or the
+  // previous conversation to the loaded transcript, so no skeleton ever flashes.
+  const CONVERSATION_OPEN_TAKEOVER_DELAY_MS = 250;
+  let conversationOpenTakeoverTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const cancelConversationOpenTakeover = (): void => {
+    if (conversationOpenTakeoverTimer) clearTimeout(conversationOpenTakeoverTimer);
+    conversationOpenTakeoverTimer = null;
+  };
+  destroyCallbacks.push(cancelConversationOpenTakeover);
+
+  /** Hands the surface to the mounted stand-in. Idempotent by re-application. */
+  const engageConversationOpenTakeover = (): void => {
+    cancelConversationOpenTakeover();
+    const element = conversationOpenPendingEl;
+    if (!element) return;
+    conversationOpenTakeover = true;
+    element.hidden = false;
+    messagesWrapper.style.display = "none";
+    // The welcome is a sibling of the transcript, so hiding the wrapper alone
+    // would leave it painted above the stand-in.
+    updateWelcome();
+  };
+
+  const clearConversationOpenPending = (): void => {
+    conversationOpenToken += 1;
+    cancelConversationOpenTakeover();
+    if (!conversationOpenPendingEl) return;
+    conversationOpenPendingEl.remove();
+    conversationOpenPendingEl = null;
+    conversationOpenTakeover = false;
+    messagesWrapper.style.removeProperty("display");
+    setHistoryHostInert(footer, false);
+    // Restores the welcome when navigation lands back on an empty transcript.
+    updateWelcome();
+  };
+
+  /**
+   * Commit fade for the reopened transcript. WAAPI, not a CSS transition: the
+   * wrapper is the morph target, and post-render inline state is stripped by
+   * every render inside the completion window.
+   */
+  const fadeInTranscript = (): void => {
+    try {
+      if (window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches) {
+        return;
+      }
+      messagesWrapper.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 150,
+        easing: "ease-out",
+      });
+    } catch {
+      /* environments without WAAPI land the transcript without motion */
+    }
+  };
+
+  // The stand-in surfaces get the transcript's centered column from their
+  // container classes, so the hydrated messages land exactly where they stood.
+  const skeletonBubble = (width: string, trailing: boolean): HTMLElement =>
+    createNode("div", {
+      className: cx(
+        "persona-conversation-loading-bubble",
+        trailing && "persona-conversation-loading-bubble--trailing"
+      ),
+      attrs: { "aria-hidden": "true" },
+      style: { width },
+    });
+
+  const buildConversationOpenSkeleton = (): HTMLElement =>
+    createNode(
+      "div",
+      { className: "persona-conversation-loading-body" },
+      skeletonBubble("58%", false),
+      skeletonBubble("72%", true),
+      skeletonBubble("44%", false)
+    );
+
+  const mountConversationOpenState = (element: HTMLElement): void => {
+    conversationOpenPendingEl?.remove();
+    conversationOpenPendingEl = element;
+    // The takeover is deferred, so the stand-in mounts hidden; one that replaces
+    // an already-engaged stand-in keeps the surface instead of blanking it.
+    element.hidden = !conversationOpenTakeover;
+    body.insertBefore(element, messagesWrapper);
+    cancelConversationOpenTakeover();
+    if (!conversationOpenTakeover) {
+      conversationOpenTakeoverTimer = setTimeout(
+        engageConversationOpenTakeover,
+        CONVERSATION_OPEN_TAKEOVER_DELAY_MS
+      );
+    }
+    // The composer must not send into the conversation being replaced. The
+    // panel exit restores the footer after its animation, so the close path
+    // re-asserts this gate (see the history:closed re-assert below).
+    setHistoryHostInert(footer, true);
+  };
+
+  const showConversationOpenPending = (): void => {
+    // Same plugin -> config -> default chain as the streaming indicator. The
+    // hook replaces the skeleton only; the container keeps the centered
+    // column, the status role, and the composer gate.
+    const context: LoadingIndicatorRenderContext = {
+      config,
+      streaming: false,
+      location: "conversation-open",
+      defaultRenderer: buildConversationOpenSkeleton,
+    };
+    let content: HTMLElement | null = null;
+    const loadingPlugin = plugins.find((p) => p.renderLoadingIndicator);
+    if (loadingPlugin?.renderLoadingIndicator) {
+      content = loadingPlugin.renderLoadingIndicator(context);
+    }
+    if (content === null && config.loadingIndicator?.render) {
+      content = config.loadingIndicator.render(context);
+    }
+    mountConversationOpenState(
+      createNode(
+        "div",
+        {
+          className: "persona-conversation-loading",
+          attrs: {
+            role: "status",
+            "aria-label": historyShellCopy.openConversationLoadingLabel,
+          },
+        },
+        content ?? buildConversationOpenSkeleton()
+      )
+    );
+  };
+
+  const showConversationOpenError = (conversationId: string): void => {
+    const retry = (): void => {
+      void openHistoryConversation(conversationId, {
+        focusComposer: true,
+      }).catch(() => {});
+    };
+    const back = historyAvailable()
+      ? (): void => {
+          clearConversationOpenPending();
+          void openHistory();
+        }
+      : undefined;
+    const actionButton = (label: string, onClick: () => void): HTMLElement => {
+      const button = createNode("button", {
+        className: "persona-conversation-loading-error-action",
+        attrs: { type: "button" },
+        text: label,
+      });
+      button.addEventListener("click", onClick);
+      return button;
+    };
+    const buildDefaultBlock = (): HTMLElement =>
+      createNode(
+        "div",
+        { className: "persona-conversation-loading-error-body" },
+        createNode("p", {
+          className: "persona-conversation-loading-error-title",
+          text: historyShellCopy.openConversationErrorTitle,
+        }),
+        createNode(
+          "div",
+          { className: "persona-conversation-loading-error-actions" },
+          actionButton(historyShellCopy.openConversationRetryLabel, retry),
+          back
+            ? actionButton(historyShellCopy.openConversationBackLabel, back)
+            : null
+        )
+      );
+    // First non-null plugin hook wins (plugins are priority-sorted); a throw
+    // is reported and skipped. The container keeps the centered column, the
+    // alert role, and the composer gate around whatever the hook returns.
+    const context: AgentWidgetRenderHistoryOpenErrorContext = Object.freeze({
+      conversationId,
+      config,
+      copy: Object.freeze({
+        title: historyShellCopy.openConversationErrorTitle,
+        retryLabel: historyShellCopy.openConversationRetryLabel,
+        backLabel: historyShellCopy.openConversationBackLabel,
+      }),
+      retry,
+      ...(back ? { back } : {}),
+      defaultRenderer: buildDefaultBlock,
+    });
+    let content: HTMLElement | null = null;
+    for (const plugin of plugins) {
+      if (!plugin.renderHistoryOpenError) continue;
+      try {
+        content = plugin.renderHistoryOpenError(context);
+      } catch (error) {
+        console.warn("[persona] renderHistoryOpenError threw", error);
+        content = null;
+      }
+      if (content) break;
+    }
+    mountConversationOpenState(
+      createNode(
+        "div",
+        {
+          className: "persona-conversation-loading-error",
+          attrs: { role: "alert" },
+        },
+        content ?? buildDefaultBlock()
+      )
+    );
+    // A failure must never sit hidden behind the surface it replaces, so the
+    // error skips the stand-in's show delay.
+    engageConversationOpenTakeover();
+  };
+
+  // The panel exit's deferred teardown restores the footer it captured, which
+  // would lift the composer gate mid-fetch; re-assert it while an open is
+  // still pending.
+  eventBus.on("history:closed", () => {
+    if (conversationOpenPendingEl) setHistoryHostInert(footer, true);
+  });
+
+  /**
+   * Optimistic reopen: navigate on the click, hydrate on the fetch. The
+   * returned promise keeps the transactional contract (resolves once the
+   * transcript is live, rejects on failure) for `controller.openConversation`.
+   * `suppressScrollSend` covers the hydration: otherwise the last restored
+   * user message triggers the anchor-top send scroll.
+   */
+  const openHistoryConversation = async (
+    conversationId: string,
+    { focusComposer = false }: { focusComposer?: boolean } = {}
+  ): Promise<void> => {
+    const scope = historyOperationScope();
+    // Seeds the header title binding from the list row before the list leaves.
+    // The surface is usually gone by hydration time (the exit outruns the
+    // fetch), so this is the only moment the title can be read from the list.
+    const seededFromList = !!historySurface;
+    historySurface?.view.setActiveConversationId(conversationId);
+    clearConversationOpenPending();
+    const token = conversationOpenToken;
+    showConversationOpenPending();
+    if (historyVisible && (historyPresentation === "panel" || railOverlayOpen)) {
+      closeHistory({ restoreFocus: false });
+    }
+    suppressScrollSend = true;
+    try {
+      await session.openConversation(conversationId, { scope });
+    } catch (error) {
+      if (token === conversationOpenToken) {
+        showConversationOpenError(conversationId);
+      }
+      throw error;
+    } finally {
+      suppressScrollSend = false;
+    }
+    if (token !== conversationOpenToken) return;
+    clearConversationOpenPending();
+    messageCache.clear();
+    resetAnchorState();
+    resumeAutoScroll();
+    if (!restoreScrollPosition()) jumpToBottomInstant();
+    // Fades only after the scroll settles, so the motion covers the final frame.
+    fadeInTranscript();
+    syncEarlierMessagesPill();
+    // Without a list at selection time there was no title to seed.
+    if (!seededFromList) setActiveConversationSummary(null);
+    eventBus.emit("history:conversationOpened", {
+      conversationId,
+      title: activeConversationTitle,
+      scope,
+      timestamp: Date.now(),
+    });
+    // Only interaction paths focus: focusing a programmatic open scrolls the
+    // host page to the widget (same-origin iframes included).
+    if (focusComposer) maybeFocusInput();
+  };
+
+  /**
+   * The single commit path behind the header action, the view's `onStartNew`,
+   * and `controller.startNewConversation()`, so one emit covers all three.
+   */
+  const startNewConversation = async ({
+    focusComposer = false,
+  }: { focusComposer?: boolean } = {}): Promise<void> => {
+    // A new conversation supersedes any transcript fetch still in flight.
+    clearConversationOpenPending();
+    await session.startNewConversation({ scope: historyOperationScope() });
+    setActiveConversationSummary(null);
+    messageCache.clear();
+    resetAnchorState();
+    resumeAutoScroll();
+    jumpToBottomInstant();
+    syncEarlierMessagesPill();
+    const conversationId = session.getActiveConversationId();
+    historySurface?.view.setActiveConversationId(conversationId);
+    // Emitted before the close so a host can tell a commit from a plain close.
+    eventBus.emit("history:conversationStarted", {
+      conversationId,
+      timestamp: Date.now(),
+    });
+    if (historyVisible && (historyPresentation === "panel" || railOverlayOpen)) {
+      closeHistory({ restoreFocus: false });
+    }
+    if (focusComposer) maybeFocusInput();
+  };
+
+  /** Shared rename/star path: provider update, then view + header binding. */
+  const updateHistoryConversation = async (
+    conversationId: string,
+    patch: HistoryConversationPatch
+  ): Promise<HistoryConversationSummary> => {
+    const summary = await session.updateConversation(conversationId, {
+      ...patch,
+      ...(patch.title !== undefined ? { title: patch.title.trim() } : {}),
+    });
+    // The view re-renders and reports the active title through the reporter;
+    // without a mounted view, keep the header binding fresh directly.
+    historySurface?.view.applyConversationSummary(summary);
+    if (!historySurface && conversationId === session.getActiveConversationId()) {
+      setActiveConversationSummary(summary);
+    }
+    return summary;
+  };
+
+  const deleteHistoryConversation = async (
+    conversationId: string
+  ): Promise<void> => {
+    const scope = historyOperationScope();
+    const wasActive = session.getActiveConversationId() === conversationId;
+    await session.deleteConversation(conversationId, { scope });
+    // Prune the open list too: the view's own delete flow removes its row
+    // after this resolves, but built-in/headless deletes have no view caller.
+    historySurface?.view.removeConversationSummary(conversationId);
+    if (wasActive) {
+      setActiveConversationSummary(null);
+      messageCache.clear();
+      resetAnchorState();
+      resumeAutoScroll();
+      syncEarlierMessagesPill();
+    }
+    eventBus.emit("history:conversationDeleted", {
+      conversationId,
+      scope,
+      wasActive,
+      timestamp: Date.now(),
+    });
+  };
+
+  const clearConversationHistory = async (opts?: {
+    targetId?: string;
+    /** Deliberate headless opt-in to the whole authorized client-token scope. */
+    allTargets?: boolean;
+    scope?: HistoryScope;
+  }): Promise<{ deleted: number }> => {
+    const scope = opts?.scope ?? historyOperationScope();
+    // Default to the same filter the visible list uses; only an explicit
+    // headless opt-in deletes conversations the visitor was never shown.
+    const targetId = opts?.allTargets
+      ? null
+      : (opts?.targetId ?? activeHistoryTargetId());
+    const result = await session.clearConversationHistory({
+      ...(targetId ? { targetId } : {}),
+      scope,
+    });
+    setActiveConversationSummary(null);
+    messageCache.clear();
+    resetAnchorState();
+    resumeAutoScroll();
+    syncEarlierMessagesPill();
+    eventBus.emit("history:cleared", {
+      deleted: result.deleted,
+      scope,
+      targetId,
+      timestamp: Date.now(),
+    });
+    return result;
+  };
+
+  /**
+   * D6: the local wipe is UNCONDITIONAL. Records survive on the server; this
+   * browser is detached from them whether or not revocation was confirmed.
+   */
+  const resetHistoryIdentity = async (): Promise<{
+    remoteRevocationConfirmed: boolean;
+  }> => {
+    // Rejection is reserved for misuse; remote failure resolves false.
+    if (!historyProvider?.resetDevice) {
+      throw new Error(
+        "[Persona] resetHistoryIdentity() requires a history provider that can reset this device"
+      );
+    }
+    let remoteRevocationConfirmed = false;
+    try {
+      const result = await session.resetHistoryDevice();
+      remoteRevocationConfirmed = result.remoteRevocationConfirmed;
+    } finally {
+      setActiveConversationSummary(null);
+      session.clearArtifacts();
+      messageCache.clear();
+      lastAppliedMessages = null;
+      config.clearStoredSessionId?.();
+      config.clearStoredConversationId?.();
+      persistentMetadata = {};
+      actionManager.syncFromMetadata();
+      if (storageAdapter?.clear) {
+        runStorageMutation(
+          () => storageAdapter.clear!(),
+          "[AgentWidget] Failed to clear storage adapter:"
+        );
+      }
+      resetAnchorState();
+      resumeAutoScroll();
+      syncEarlierMessagesPill();
+      closeHistory({ restoreFocus: false });
+      maybeFocusInput();
+      if (!open) launcherSurfaceInstance?.launcher.element.focus();
+    }
+    announceHistory(
+      remoteRevocationConfirmed
+        ? historyShellCopy.identityResetNotice
+        : historyShellCopy.identityResetUnconfirmedNotice
+    );
+    eventBus.emit("history:identityReset", {
+      remoteRevocationConfirmed,
+      timestamp: Date.now(),
+    });
+    return { remoteRevocationConfirmed };
+  };
+
+  // --- confirmations (shell-owned alert dialogs) ---------------------------
+
+  // With the artifact split, `container` is only the chat column, so an
+  // inset:0 overlay there would leave the artifact pane undimmed. The panel
+  // wraps the whole split and is already position:relative on that path;
+  // forcing `relative` onto it elsewhere would not survive the chrome
+  // passes' cssText resets, so plain layouts keep the container host.
+  const historyConfirmHost = (): HTMLElement =>
+    artifactSplitRoot ? panel : container;
+
+  const requestDeleteConversation = async (
+    conversationId: string
+  ): Promise<"deleted" | "cancelled"> => {
+    const confirmed = await showHistoryConfirm({
+      host: historyConfirmHost(),
+      title: historyShellCopy.deleteConversationConfirmTitle,
+      description: historyShellCopy.deleteConversationConfirm,
+      confirmLabel: historyShellCopy.deleteConversationConfirmLabel,
+      cancelLabel: historyShellCopy.confirmCancelLabel,
+    });
+    if (!confirmed) return "cancelled";
+    await deleteHistoryConversation(conversationId);
+    return "deleted";
+  };
+
+  const requestClearConversationHistory = async (): Promise<
+    "cleared" | "cancelled"
+  > => {
+    // Scope-aware copy: never imply the delete is limited to the rendered page.
+    const verified = historyOperationScope() === "verified-user";
+    const confirmed = await showHistoryConfirm({
+      host: historyConfirmHost(),
+      title: historyShellCopy.clearHistoryConfirmTitle,
+      description: verified
+        ? historyShellCopy.clearHistoryVerifiedConfirm
+        : historyShellCopy.clearHistoryConfirm,
+      confirmLabel: historyShellCopy.clearHistoryConfirmLabel,
+      cancelLabel: historyShellCopy.confirmCancelLabel,
+    });
+    if (!confirmed) return "cancelled";
+    await clearConversationHistory();
+    return "cleared";
+  };
+
+  const requestResetHistoryIdentity = async (): Promise<
+    { outcome: "cancelled" } | { outcome: "reset"; remoteRevocationConfirmed: boolean }
+  > => {
+    const confirmed = await showHistoryConfirm({
+      host: historyConfirmHost(),
+      title: historyShellCopy.resetIdentityConfirmTitle,
+      description: historyShellCopy.resetIdentityConfirm,
+      confirmLabel: historyShellCopy.resetIdentityConfirmLabel,
+      cancelLabel: historyShellCopy.confirmCancelLabel,
+    });
+    if (!confirmed) return { outcome: "cancelled" };
+    const { remoteRevocationConfirmed } = await resetHistoryIdentity();
+    return { outcome: "reset", remoteRevocationConfirmed };
+  };
+
+  // --- "show earlier messages" prepend -------------------------------------
+
+  const earlierMessagesButton = createElement(
+    "button",
+    "persona-history-earlier"
+  ) as HTMLButtonElement;
+  earlierMessagesButton.type = "button";
+  earlierMessagesButton.textContent = historyShellCopy.showEarlierMessagesLabel;
+  earlierMessagesButton.setAttribute("data-persona-history-earlier", "");
+  Object.assign(earlierMessagesButton.style, {
+    alignSelf: "center",
+    minHeight: "44px",
+    padding: "0 16px",
+    borderRadius: "999px",
+    border: "1px solid var(--persona-border, rgba(0,0,0,0.12))",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    cursor: "pointer",
+    flexShrink: "0",
+  } satisfies Partial<CSSStyleDeclaration>);
+
+  const syncEarlierMessagesPill = (): void => {
+    const show =
+      historyAvailable() &&
+      !!historySessionState.nextMessageCursor &&
+      !!session.getActiveConversationId();
+    if (!show) {
+      earlierMessagesButton.remove();
+      return;
+    }
+    earlierMessagesButton.textContent = historyShellCopy.showEarlierMessagesLabel;
+    if (earlierMessagesButton.parentNode !== body) {
+      body.insertBefore(earlierMessagesButton, body.firstChild);
+    }
+  };
+
+  earlierMessagesButton.addEventListener("click", () => {
+    const conversationId = session.getActiveConversationId();
+    const cursor = historySessionState.nextMessageCursor;
+    if (!conversationId || !cursor || earlierMessagesButton.disabled) return;
+    earlierMessagesButton.disabled = true;
+    // Capture before the prepend so the reader's viewport stays put.
+    const previousHeight = body.scrollHeight;
+    const previousTop = body.scrollTop;
+    void session
+      .loadOlderMessages(conversationId, cursor, { scope: historyOperationScope() })
+      .then(() => {
+        body.scrollTop = previousTop + (body.scrollHeight - previousHeight);
+        // Prepending shifts everything below the anchor.
+        repinAnchoredMessage();
+      })
+      .catch(() => {})
+      .finally(() => {
+        earlierMessagesButton.disabled = false;
+        syncEarlierMessagesPill();
+      });
+  });
+
+  // --- header chrome -------------------------------------------------------
+
+  // Shares the header control chrome (box + glyph from the header tokens) with
+  // the close and clear-chat buttons beside it.
+  const buildHistoryButton = (): {
+    button: HTMLButtonElement;
+    wrapper: HTMLElement;
+  } => {
+    const parts = createHeaderIconButton({
+      ariaLabel: historyShellCopy.openHistoryLabel,
+      iconName: "history",
+      wrapperClassName:
+        "persona-relative persona-inline-flex persona-items-center persona-justify-center",
+      extraClassName: "persona-history-toggle",
+      attrs: { "data-persona-history-toggle": "" },
+    });
+    parts.button.addEventListener("click", (event) => {
+      if (!historyAvailable() || historyTurnBusy()) return;
+      if (historyVisible) {
+        closeHistory();
+        return;
+      }
+      // Enter/Space synthesize a click with detail 0; a pointer press reports > 0.
+      void openHistory({ invoker: parts.button, keyboard: event.detail === 0 });
+    });
+    return parts;
+  };
+
+  const syncHistoryButton = (): void => {
+    if (!historyAvailable()) {
+      historyButtonWrapper?.remove();
+      historyButton = null;
+      historyButtonWrapper = null;
+      return;
+    }
+    // A header rebuild detaches the old button; a stale ref must not block
+    // recreation into the replacement header.
+    if (historyButtonWrapper && !historyButtonWrapper.isConnected) {
+      historyButton = null;
+      historyButtonWrapper = null;
+    }
+    if (!historyButton && header) {
+      const parts = buildHistoryButton();
+      historyButton = parts.button;
+      historyButtonWrapper = parts.wrapper;
+      const insertBefore =
+        panelElements.clearChatButtonWrapper || panelElements.closeButtonWrapper;
+      // Layouts may parent these wrappers in a trailing cluster rather than
+      // the header itself; insert wherever they live so close stays outermost.
+      if (insertBefore?.parentNode && header.contains(insertBefore)) {
+        insertBefore.parentNode.insertBefore(historyButtonWrapper, insertBefore);
+      } else {
+        header.appendChild(historyButtonWrapper);
+      }
+    }
+    if (!historyButton || !historyButtonWrapper) return;
+    // Every rail surface carries its own toggle, and so does the trigger that
+    // summons one: the header keeps a control only when neither is on screen.
+    const railed =
+      railTriggerApplies() || (historyVisible && historyPresentation === "rail");
+    historyButtonWrapper.style.display = railed ? "none" : "";
+    if (railed) {
+      // Hiding the control under focus would drop it to the body; the rail's
+      // own toggle is the same control, so focus follows it there.
+      if (document.activeElement === historyButton) focusHistoryEntry();
+      return;
+    }
+    const busy = historyTurnBusy();
+    historyButton.disabled = busy;
+    historyButton.setAttribute("aria-disabled", busy ? "true" : "false");
+    const label = busy
+      ? historyShellCopy.openHistoryBusyLabel
+      : historyShellCopy.openHistoryLabel;
+    // The factory tooltip reads the live aria-label; a title would double it.
+    historyButton.setAttribute("aria-label", label);
+    // Rail/auto toggles a navigation region; panel navigates to a surface.
+    if ((config.features?.history?.presentation ?? "panel") === "panel") {
+      historyButton.removeAttribute("aria-expanded");
+      historyButton.removeAttribute("aria-controls");
+    } else {
+      historyButton.setAttribute("aria-expanded", historyVisible ? "true" : "false");
+      historyButton.setAttribute("aria-controls", historyRegionId);
+    }
+  };
+
+  /**
+   * With history available the visible start-over affordance becomes
+   * "New conversation" (`clearChat()` stays programmatic-only).
+   */
+  let clearChatRelabelled = false;
+  const syncClearChatAffordance = (): void => {
+    const button = panelElements.clearChatButton;
+    if (!button) return;
+    if (historyAvailable()) {
+      if (!clearChatRelabelled) {
+        clearChatDefaultLabel = button.getAttribute("aria-label") ?? "";
+        clearChatRelabelled = true;
+      }
+      // aria-label only: the styled tooltip reads it live, and a title would
+      // render a second native tooltip on top.
+      button.setAttribute("aria-label", historyShellCopy.newConversationLabel);
+      button.removeAttribute("title");
+      // No touch-target pin: the shared header control class owns the box, and
+      // a 44px floor here would desync this control from its neighbours.
+      return;
+    }
+    // Only undo a relabel we performed; never clobber host-configured copy.
+    if (!clearChatRelabelled) return;
+    clearChatRelabelled = false;
+    if (clearChatDefaultLabel) {
+      button.setAttribute("aria-label", clearChatDefaultLabel);
+    }
+  };
+
+  const syncHistoryChromeImpl = (): void => {
+    historyShellCopy = resolveHistoryShellCopy(config.features?.history?.copy);
+    syncHistoryButton();
+    syncRailOverlayTrigger();
+    syncClearChatAffordance();
+    syncEarlierMessagesPill();
+  };
+  historyChromeSync = syncHistoryChromeImpl;
+
+  // --- session-driven state ------------------------------------------------
+
+  historyStateHandler = (state) => {
+    historySessionState = state;
+    historySurface?.view.setNewConversationRequired(
+      state.recovery === "new_conversation_required"
+    );
+    // Sending stays blocked through a destructive/continuity transition.
+    setComposerDisabled(state.sendBlocked || isStreaming);
+    syncEarlierMessagesPill();
+  };
+
+  historyNoticeHandler = (notice) => {
+    if (
+      notice.code === "history_continuity_reset" ||
+      notice.code === "conversation_deleted_recovered"
+    ) {
+      messageCache.clear();
+      resetAnchorState();
+      resumeAutoScroll();
+    }
+    announceHistory(notice.message);
+    historySurface?.view.refresh();
+  };
+
+  installHistoryProvider();
+  syncHistoryChromeImpl();
+  destroyCallbacks.push(() => {
+    unsubscribeHistoryAvailability?.();
+    unsubscribeHistoryIdentity?.();
+    // An open in flight (a hover this teardown raced) must not mount after it.
+    historyOpenToken += 1;
+    // A pending exit still owns a mounted surface and a live timer.
+    settleHistoryExit();
+    historySurface?.dispose();
+    historySurface?.view.destroy();
+    historySurface = null;
+  });
+
+  // Pre-initialize client session when in client token mode so feedback works
+  // before the user sends their first message (e.g. on restored/persisted messages)
+  if (config.clientToken) {
+    session
+      .initClientSession()
+      .then(() => {
+        // Boot resume is authoritative only after reconciliation; the client
+        // already gated its init on `historyBootstrapReady`.
+        if (!historyAvailable()) return undefined;
+        return session.reconcileBootConversation({ scope: historyScope() });
+      })
+      .then(() => {
+        syncEarlierMessagesPill();
+      })
+      .catch((err) => {
+        if (config.debug) {
+          // eslint-disable-next-line no-console
+          console.warn("[AgentWidget] Pre-init client session failed:", err);
+        }
+      });
+  }
+
+  // Wire up optional SSE tap (host) + event stream buffer to capture SSE events
+  if (eventStreamBuffer || config.onSSEEvent) {
+    session.setSSEEventCallback((type: string, payload: unknown) => {
+      config.onSSEEvent?.(type, payload);
+      throughputTracker?.processEvent(type, payload);
+      eventStreamBuffer?.push({
+        id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        type,
+        timestamp: Date.now(),
+        payload: JSON.stringify(payload)
+      });
+    });
+  }
+
+  // Durable-session reconnect boot path: once history is in place,
+  // if the host passed a non-terminal resume handle (+ a reconnect transport),
+  // immediately re-enter `resuming` and replay everything past the cursor into
+  // the restored conversation. Fires AFTER hydration so the trailing partial
+  // assistant bubble exists for the replay to append to.
+  const maybeBootResume = () => {
+    if (config.resume && typeof config.reconnectStream === "function") {
+      session.resumeFromHandle(config.resume);
+    }
+  };
+
+  if (pendingStoredState) {
+    pendingStoredState
+      .then((state) => {
+        if (!state) return;
+        if (state.metadata) {
+          persistentMetadata = ensureRecord(state.metadata);
+          actionManager.syncFromMetadata();
+        }
+        if (state.messages?.length) {
+          // Restored history must not read as a fresh send (scroll-on-send /
+          // anchor-top would fire for the last restored user message).
+          suppressScrollSend = true;
+          try {
+            session.hydrateMessages(state.messages);
+          } finally {
+            suppressScrollSend = false;
+          }
+        }
+        if (state.artifacts?.length) {
+          session.hydrateArtifacts(
+            state.artifacts,
+            state.selectedArtifactId ?? null
+          );
+        }
+      })
+      .catch((error) => {
+        if (typeof console !== "undefined") {
+          // eslint-disable-next-line no-console
+          console.error("[AgentWidget] Failed to hydrate stored state:", error);
+        }
+      })
+      .finally(() => {
+        welcomeHydrated = true;
+        resolveHistoryBootstrap();
+        maybeBootResume();
+      });
+  } else {
+    maybeBootResume();
+  }
+
+  // Centralized so both the default composer (`handleSubmit`) and the plugin
+  // composer (`renderComposer.onSubmit`) auto-expand the composer-bar wrapper
+  // when a message is sent while the panel is collapsed. Without a single
+  // helper the two submit paths drift over time.
+  const maybeExpandComposerBar = () => {
+    if (!isComposerBar()) return;
+    if (open) return;
+    const expandOnSubmit = config.launcher?.composerBar?.expandOnSubmit ?? true;
+    if (!expandOnSubmit) return;
+    setOpenState(true, "auto");
+  };
+
+  // Combine `@`-chip mentions with an inline server-command's context bundle so
+  // both reach the message in one `mentions` payload. Either side may be null.
+  type SubmitMentions = NonNullable<
+    ReturnType<ContextMentionOrchestrator["collectForSubmit"]>
+  >;
+  const mergeSubmitMentions = (
+    a: SubmitMentions | null,
+    b: SubmitMentions | null
+  ): SubmitMentions | null => {
+    if (!a) return b;
+    if (!b) return a;
+    return {
+      refs: [...a.refs, ...b.refs],
+      // allSettled, not all: one side rejecting must not discard the other
+      // side's already-resolved context (the bubble already echoed its chips).
+      finalize: async () => {
+        const [ra, rb] = await Promise.allSettled([a.finalize(), b.finalize()]);
+        const fulfilled: MentionSubmitBundle[] = [];
+        if (ra.status === "fulfilled") fulfilled.push(ra.value);
+        else console.warn("[Persona] a mention bundle failed to finalize; sending without it", ra.reason);
+        if (rb.status === "fulfilled") fulfilled.push(rb.value);
+        else console.warn("[Persona] a mention bundle failed to finalize; sending without it", rb.reason);
+        return mergeFinalizedMentions(fulfilled);
+      },
+    };
+  };
+
+  // Inline-mode composer element: after the contenteditable swap, `textarea`
+  // additionally exposes `getInlineMessageFields()` (built in the inline chunk,
+  // which owns the document model — the core never imports it). Structural shape
+  // only, so no runtime import crosses the bundle boundary.
+  type InlineComposerFieldsHost = {
+    getInlineMessageFields?: () => {
+      content: string;
+      contextMentions: AgentWidgetContextMentionRef[];
+      contentSegments: AgentWidgetContentSegment[];
+    };
+  };
+  // Read the ordered display segments from the live inline composer, but only
+  // when at least one mention is present: a plain-text inline message must keep
+  // the normal markdown-rendered bubble (segments bypass that path), so we return
+  // undefined for pure prose and let the bubble render `content` as usual.
+  const readInlineContentSegments = (): AgentWidgetContentSegment[] | undefined => {
+    const host = textarea as unknown as InlineComposerFieldsHost;
+    const fields = host.getInlineMessageFields?.();
+    if (!fields) return undefined;
+    const hasMention = fields.contentSegments.some((s) => s.kind === "mention");
+    return hasMention ? fields.contentSegments : undefined;
+  };
+
+  // Re-entrancy guard for the async submit path: `takeInlineCommand` awaits (a
+  // lazy chunk load + host resolve) before the composer clears, and
+  // `isStreaming()` is still false in that window, so a second Enter would
+  // otherwise dispatch the same text/command twice.
+  let submitInFlight = false;
+
+  const performSubmit = async (submitOptions?: { viaVoice?: boolean }) => {
+    const value = textarea.value.trim();
+    const hasAttachments = attachmentManager?.hasAttachments() ?? false;
+
+    // Inline slash command (Slack-style): every `command:"server"` plus any
+    // arg-bearing prompt/action. Resolve FIRST — a prompt command changes the
+    // text to send, and an action sends nothing at all.
+    const inline = value
+      ? await (mentionOrchestrator?.takeInlineCommand(value) ?? Promise.resolve(null))
+      : null;
+
+    if (inline?.kind === "action") {
       // Ran in the browser; nothing to send. Clear the composer + any chips.
       textarea.value = "";
       textarea.style.height = "auto";
@@ -8166,7 +10870,17 @@ export const createAgentExperience = (
     });
     footerResizeObserver.observe(footer);
     destroyCallbacks.push(() => footerResizeObserver.disconnect());
+    // Rail/panel resolves against the host container, not the viewport.
+    const historyHostObserver = new ResizeObserver(() => {
+      syncHistoryPresentation();
+    });
+    historyHostObserver.observe(container);
+    destroyCallbacks.push(() => historyHostObserver.disconnect());
   }
+  ownerWindow.addEventListener("resize", syncHistoryPresentation);
+  destroyCallbacks.push(() =>
+    ownerWindow.removeEventListener("resize", syncHistoryPresentation)
+  );
 
   lastScrollTop = body.scrollTop;
   let lastBottomOffset = getScrollBottomOffset(body);
@@ -8377,6 +11091,17 @@ export const createAgentExperience = (
     if (!clearChatButton) return;
 
     clearChatButton.addEventListener("click", () => {
+      // With history available this affordance is "New conversation": a local
+      // view clear would leave the server record open and unreachable.
+      if (historyAvailable()) {
+        void startNewConversation({ focusComposer: true }).catch((error) => {
+          if (config.debug) {
+            // eslint-disable-next-line no-console
+            console.warn("[AgentWidget] New conversation failed:", error);
+          }
+        });
+        return;
+      }
       // Clear messages in session (this will trigger onMessagesChanged which re-renders)
       session.clearMessages();
       messageCache.clear();
@@ -8673,6 +11398,12 @@ export const createAgentExperience = (
       const previousToolCallDisplay = config.features?.toolCallDisplay;
       const previousReasoningDisplay = config.features?.reasoningDisplay;
       const previousStreamAnimationType = config.features?.streamAnimation?.type;
+      // History provider identity: enablement, eligibility, and advertised
+      // scopes are all resolved at construction, so a change rebuilds it.
+      const previousHistoryEnabled = config.features?.history?.enabled === true;
+      const previousHistoryProvider = config.features?.history?.provider;
+      const previousIdentityProof = config.getIdentityProof;
+      const previousClientToken = config.clientToken;
       // One consistent recursive patch policy across the live controller and the
       // init handle. See utils/config-merge.ts for the replace-leaf list and
       // explicit-undefined reset semantics. The patch merges over the
@@ -8680,11 +11411,14 @@ export const createAgentExperience = (
       config = mergeConfigUpdate({ ...config, features: baseFeatures }, nextConfig);
       baseFeatures = config.features;
       config = resolveConfigPreferences(config);
+      applyTooltipTiming();
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
       applyThemeVariables(mount, config);
       applyArtifactLayoutCssVars(mount, config);
       applyArtifactPaneAppearance(mount, config);
+      // Rail width/side are config-derived, so an open rail re-derives here too.
+      applyRailChrome();
       syncArtifactPane();
 
       // Re-setup theme observer if colorScheme changed
@@ -8696,6 +11430,8 @@ export const createAgentExperience = (
       const newPlugins = pluginRegistry.getForInstance(config.plugins);
       plugins.length = 0;
       plugins.push(...newPlugins);
+      // Bindings are config- and plugin-derived, so they re-derive after both.
+      syncShortcuts();
 
       launcherEnabled = config.launcher?.enabled ?? true;
       autoExpand = config.launcher?.autoExpand ?? false;
@@ -8802,10 +11538,10 @@ export const createAgentExperience = (
       }
       // Note: Custom launcher updates are handled by the plugin's own logic
 
-      // Update panel header title and subtitle
-      if (headerTitle && config.launcher?.title !== undefined) {
-        headerTitle.textContent = config.launcher.title;
-      }
+      // Update panel header title and subtitle. applyHeaderTitle respects the
+      // titleSource binding, so a static launcher.title update never clobbers
+      // a bound conversation title (and a titleSource flip applies live).
+      applyHeaderTitle();
       if (headerSubtitle && config.launcher?.subtitle !== undefined) {
         headerSubtitle.textContent = config.launcher.subtitle;
       }
@@ -8838,6 +11574,8 @@ export const createAgentExperience = (
         closeButton = view.header.closeButton;
 
         prevHeaderLayout = headerLayoutConfig?.layout;
+        // The rebuilt title span starts static; restamp the bound title.
+        applyHeaderTitle();
       } else if (headerLayoutConfig) {
         // Apply visibility settings without rebuilding
         if (iconHolder) {
@@ -8965,7 +11703,7 @@ export const createAgentExperience = (
       const headerIconSize = launcher.headerIconSize ?? "48px";
 
       if (iconHolder) {
-        const headerEl = container.querySelector(".persona-border-b-persona-divider");
+        const headerEl = header;
         const headerCopy = headerEl?.querySelector(".persona-flex-col");
 
         // Handle hide/show
@@ -9061,10 +11799,17 @@ export const createAgentExperience = (
           isPanelToggleable() && config.layout?.header?.showCloseButton !== false;
         closeButton.style.display = layoutShowCloseButton ? "" : "none";
 
-        const closeButtonSize = launcher.closeButtonSize ?? "32px";
+        // Composer-bar mode owns its close sizing, same as clear chat below.
+        // Elsewhere, unset clears the inline box so the header control-size
+        // token wins; writing a fallback here would pin it past the token.
+        if (!isComposerBar()) {
+          const closeButtonSize = launcher.closeButtonSize ?? "";
+          closeButton.style.height = closeButtonSize;
+          closeButton.style.width = closeButtonSize;
+          closeButton.style.minWidth = closeButtonSize;
+          closeButton.style.minHeight = closeButtonSize;
+        }
         const closeButtonPlacement = launcher.closeButtonPlacement ?? "inline";
-        closeButton.style.height = closeButtonSize;
-        closeButton.style.width = closeButtonSize;
         
         // Update placement if changed - move the wrapper (not just the button) to preserve tooltip
         const { closeButtonWrapper } = panelElements;
@@ -9078,15 +11823,16 @@ export const createAgentExperience = (
           // Update wrapper classes
           if (isTopRight) {
             closeButtonWrapper.className = "persona-absolute persona-top-4 persona-right-4 persona-z-50";
-            container.style.position = "relative";
-            container.appendChild(closeButtonWrapper);
+            // A mounted rail owns the conversation column; anchoring to the
+            // container would float the button over the rail.
+            const anchor = railColumn ?? container;
+            anchor.style.position = "relative";
+            anchor.appendChild(closeButtonWrapper);
           } else {
             // Check if clear chat is inline to determine if we need ml-auto
             const clearChatPlacement = launcher.clearChat?.placement ?? "inline";
             const clearChatEnabled = launcher.clearChat?.enabled ?? true;
             closeButtonWrapper.className = (clearChatEnabled && clearChatPlacement === "inline") ? "" : "persona-ml-auto";
-            // Find header element
-            const header = container.querySelector(".persona-border-b-persona-divider");
             if (header) {
               header.appendChild(closeButtonWrapper);
             }
@@ -9140,23 +11886,16 @@ export const createAgentExperience = (
           closeButton.style.paddingBottom = "";
         }
 
-        // Update icon
-        const closeButtonIconName = launcher.closeButtonIconName ?? "x";
-        const closeButtonIconText = launcher.closeButtonIconText ?? "×";
-
-        // Clear existing content and render new icon.
-        // Larger intrinsic size compensates for the X glyph's sparse
-        // viewBox so the close button visually matches sibling icons.
-        closeButton.innerHTML = "";
-        const iconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
-        if (iconSvg) {
-          // display:block matches the builder; inline SVG baseline spacing
-          // shifts the icon off-center.
-          iconSvg.style.display = "block";
-          closeButton.appendChild(iconSvg);
-        } else {
-          closeButton.textContent = closeButtonIconText;
-        }
+        // Update icon through the shared renderer so a restyle can never
+        // repaint the glyph at a different size or stroke than the builder.
+        applyHeaderControlGlyph(
+          closeButton,
+          launcher.closeButtonIconName ?? "x",
+          {
+            iconSize: isComposerBar() ? COMPOSER_BAR_CLOSE_ICON_SIZE : undefined,
+            iconText: launcher.closeButtonIconText ?? "×",
+          }
+        );
 
         // Update tooltip
         const closeButtonTooltipText = launcher.closeButtonTooltipText ?? "Close chat";
@@ -9225,14 +11964,14 @@ export const createAgentExperience = (
               // Position to the left of the close button (which is at right: 1rem/16px)
               // Close button is ~32px wide, plus small gap = 48px from right
               clearChatButtonWrapper.style.right = "48px";
-              container.style.position = "relative";
-              container.appendChild(clearChatButtonWrapper);
+              const anchor = railColumn ?? container;
+              anchor.style.position = "relative";
+              anchor.appendChild(clearChatButtonWrapper);
             } else {
               clearChatButtonWrapper.className = "persona-relative persona-ml-auto persona-clear-chat-button-wrapper";
               // Clear the inline right style when switching back to inline mode
               clearChatButtonWrapper.style.right = "";
               // Find header and insert before close button
-              const header = container.querySelector(".persona-border-b-persona-divider");
               const closeButtonWrapperEl = panelElements.closeButtonWrapper;
               if (header && closeButtonWrapperEl && closeButtonWrapperEl.parentElement === header) {
                 header.insertBefore(clearChatButtonWrapper, closeButtonWrapperEl);
@@ -9256,35 +11995,32 @@ export const createAgentExperience = (
         }
 
         if (shouldShowClearChat) {
-          // Update size: composer-bar mode owns its sizing (16px to match
-          // the close icon), so leave size alone there. Floating-launcher
-          // and other modes still honor `launcher.clearChat.size`.
+          // Update size: composer-bar mode owns its sizing, so leave size
+          // alone there. Elsewhere, unset clears the inline box so the header
+          // control-size token wins.
           if (!isComposerBar()) {
-            const clearChatSize = clearChatConfig.size ?? "32px";
+            const clearChatSize = clearChatConfig.size ?? "";
             clearChatButton.style.height = clearChatSize;
             clearChatButton.style.width = clearChatSize;
+            clearChatButton.style.minWidth = clearChatSize;
+            clearChatButton.style.minHeight = clearChatSize;
           }
 
-          // Update icon
-          const clearChatIconName = clearChatConfig.iconName ?? "refresh-cw";
           const clearChatIconColor = clearChatConfig.iconColor ?? "";
-
           clearChatButton.style.color =
             clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
 
-          // Clear existing icon and render new one. Composer-bar shrinks
-          // the icon to match its 16px button.
-          clearChatButton.innerHTML = "";
-          const clearChatIconSize = isComposerBar() ? "14px" : "20px";
-          // Stroke 1 matches the mount-time builder (header-parts.ts); a
-          // different weight here makes the icon visibly bolden on update.
-          const iconSvg = renderLucideIcon(clearChatIconName, clearChatIconSize, "currentColor", 1);
-          if (iconSvg) {
-            // display:block matches the builder; inline SVG baseline spacing
-            // shifts the icon off-center.
-            iconSvg.style.display = "block";
-            clearChatButton.appendChild(iconSvg);
-          }
+          // Same shared renderer as the builder, so a restyle can never
+          // repaint the glyph at a different size or stroke.
+          applyHeaderControlGlyph(
+            clearChatButton,
+            clearChatConfig.iconName ?? "refresh-cw",
+            {
+              iconSize: isComposerBar()
+                ? COMPOSER_BAR_CLEAR_CHAT_ICON_SIZE
+                : undefined,
+            }
+          );
 
           // Update background color
           if (clearChatConfig.backgroundColor) {
@@ -9368,7 +12104,22 @@ export const createAgentExperience = (
       });
 
       postprocess = buildPostprocessor(config, actionManager, handleResubmitRequested);
+      // Re-key the visitor store before any client rebuild sees the new config.
+      syncVisitorStore();
       session.updateConfig(config);
+      if (
+        (config.features?.history?.enabled === true) !== previousHistoryEnabled ||
+        config.features?.history?.provider !== previousHistoryProvider ||
+        config.getIdentityProof !== previousIdentityProof ||
+        config.clientToken !== previousClientToken
+      ) {
+        closeHistory({ restoreFocus: false });
+        installHistoryProvider();
+      }
+      syncHistoryChromeImpl();
+      // Presentation may have flipped between panel and rail; the open view
+      // instance moves hosts rather than being recreated.
+      syncHistoryPresentation();
       renderMessagesWithPlugins(
         messagesWrapper,
         session.getMessages(),
@@ -9880,6 +12631,9 @@ export const createAgentExperience = (
         : statusIndicatorConfig.align === "center" ? "persona-text-center"
         : "persona-text-right";
       statusText.classList.add(alignClass);
+      // Last: this pass rebuilds the header and rewrites header/footer
+      // visibility, any of which would expose an open panel host's chrome.
+      reapplyHistoryHostChrome();
     },
     open() {
       if (!isPanelToggleable()) return;
@@ -10116,6 +12870,62 @@ export const createAgentExperience = (
     isEventStreamVisible(): boolean {
       return eventStreamVisible;
     },
+    listConversations(opts) {
+      return session.listConversations(opts);
+    },
+    getActiveConversationId(): string | null {
+      return session.getActiveConversationId();
+    },
+    openConversation(
+      conversationId: string,
+      opts?: { focus?: boolean }
+    ): Promise<void> {
+      return openHistoryConversation(conversationId, {
+        focusComposer: opts?.focus === true,
+      });
+    },
+    startNewConversation(opts?: { focus?: boolean }): Promise<void> {
+      return startNewConversation({ focusComposer: opts?.focus === true });
+    },
+    deleteConversation(conversationId: string): Promise<void> {
+      return deleteHistoryConversation(conversationId);
+    },
+    renameConversation(conversationId, title) {
+      return updateHistoryConversation(conversationId, { title });
+    },
+    setConversationStarred(conversationId, starred) {
+      return updateHistoryConversation(conversationId, { starred });
+    },
+    clearConversationHistory(opts) {
+      return clearConversationHistory(opts);
+    },
+    resetHistoryIdentity(): Promise<{ remoteRevocationConfirmed: boolean }> {
+      return resetHistoryIdentity();
+    },
+    getHistoryIdentityStatus(): HistoryIdentityStatus {
+      if (!historyProvider) {
+        return historyFeatureEnabled()
+          ? { state: "unavailable", reason: "ineligible_mode" }
+          : { state: "unavailable", reason: "history_disabled" };
+      }
+      return historyProvider.getIdentityStatus();
+    },
+    showHistory(opts): Promise<void> {
+      return openHistory({
+        ...(opts?.returnSurface ? { returnSurface: opts.returnSurface } : {}),
+        ...(opts?.focus !== undefined ? { focus: opts.focus } : {}),
+      });
+    },
+    hideHistory(opts): void {
+      closeHistory(
+        opts?.restoreFocus !== undefined
+          ? { restoreFocus: opts.restoreFocus }
+          : undefined
+      );
+    },
+    isHistoryVisible(): boolean {
+      return historyVisible;
+    },
     showArtifacts(): void {
       if (!artifactsSidebarEnabled(config)) return;
       artifactsPaneUserHidden = false;
@@ -10413,6 +13223,27 @@ export const createAgentExperience = (
       });
     }
 
+    // Show/hide only. Identity status stays on the instance-scoped controller
+    // bus so authentication state is never broadcast page-wide.
+    const handleShowHistory = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.instanceId || detail.instanceId === instanceId) {
+        void controller.showHistory();
+      }
+    };
+    const handleHideHistory = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.instanceId || detail.instanceId === instanceId) {
+        controller.hideHistory();
+      }
+    };
+    window.addEventListener("persona:showHistory", handleShowHistory);
+    window.addEventListener("persona:hideHistory", handleHideHistory);
+    destroyCallbacks.push(() => {
+      window.removeEventListener("persona:showHistory", handleShowHistory);
+      window.removeEventListener("persona:hideHistory", handleHideHistory);
+    });
+
     const handleShowArtifacts = (e: Event) => {
       const detail = (e as CustomEvent).detail;
       if (!detail?.instanceId || detail.instanceId === instanceId) {