opensteer 0.9.2 → 0.9.4

package/dist/index.d.cts

@@ -1637,6 +1637,14 @@ interface OpensteerAttachBrowserOptions {
 }
 type OpensteerBrowserMode = "temporary" | "persistent";
 type OpensteerBrowserOptions = OpensteerBrowserMode | OpensteerAttachBrowserOptions;
+interface OpensteerHumanizeOptions {
+    /** Interpolate mouse paths with curves and jitter before clicks/scrolls. */
+    readonly mouse?: boolean;
+    /** Realistic per-character typing cadence with key hold duration. */
+    readonly keyboard?: boolean;
+    /** Break large scrolls into discrete wheel ticks with delays. */
+    readonly scroll?: boolean;
+}
 interface OpensteerBrowserContextOptions {
     readonly ignoreHTTPSErrors?: boolean;
     readonly locale?: string;
@@ -1651,6 +1659,12 @@ interface OpensteerBrowserContextOptions {
     readonly reducedMotion?: "reduce" | "no-preference";
     readonly colorScheme?: "light" | "dark" | "no-preference";
     readonly stealthProfile?: OpensteerStealthProfileInput;
+    /**
+     * Enable human-like interaction patterns for mouse, keyboard, and scroll
+     * events.  When `true` (the default), all sub-options are enabled.  Pass
+     * `false` to disable, or an object to control individual categories.
+     */
+    readonly humanize?: boolean | OpensteerHumanizeOptions;
 }
 interface OpensteerStealthProfileInput {
     readonly id?: string;
@@ -2958,6 +2972,8 @@ declare function createOpensteerExtractionDescriptorStore(options: {
 }): OpensteerExtractionDescriptorStore;
 declare function parseExtractionDescriptorRecord(record: DescriptorRecord): OpensteerExtractionDescriptorRecord | undefined;
 
+type OpensteerEnvironment = Record<string, string | undefined>;
+
 declare const OPENSTEER_ENGINE_NAMES: readonly ["playwright", "abp"];
 type OpensteerEngineName = (typeof OPENSTEER_ENGINE_NAMES)[number];
 declare const DEFAULT_OPENSTEER_ENGINE: OpensteerEngineName;
@@ -3006,6 +3022,7 @@ interface OpensteerBrowserManagerOptions {
     readonly rootPath?: string;
     readonly workspace?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3139,6 +3156,7 @@ interface OpensteerRuntimeOptions {
     readonly rootDir?: string;
     readonly rootPath?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3157,6 +3175,7 @@ interface OpensteerSessionRuntimeOptions {
     readonly rootDir?: string;
     readonly rootPath?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3287,8 +3306,6 @@ declare class Opensteer {
     private requireOwnedInstrumentationRuntime;
 }
 
-type OpensteerEnvironment = Record<string, string | undefined>;
-
 interface OpensteerCloudConfig {
     readonly apiKey: string;
     readonly baseUrl: string;

package/dist/index.d.ts

@@ -1637,6 +1637,14 @@ interface OpensteerAttachBrowserOptions {
 }
 type OpensteerBrowserMode = "temporary" | "persistent";
 type OpensteerBrowserOptions = OpensteerBrowserMode | OpensteerAttachBrowserOptions;
+interface OpensteerHumanizeOptions {
+    /** Interpolate mouse paths with curves and jitter before clicks/scrolls. */
+    readonly mouse?: boolean;
+    /** Realistic per-character typing cadence with key hold duration. */
+    readonly keyboard?: boolean;
+    /** Break large scrolls into discrete wheel ticks with delays. */
+    readonly scroll?: boolean;
+}
 interface OpensteerBrowserContextOptions {
     readonly ignoreHTTPSErrors?: boolean;
     readonly locale?: string;
@@ -1651,6 +1659,12 @@ interface OpensteerBrowserContextOptions {
     readonly reducedMotion?: "reduce" | "no-preference";
     readonly colorScheme?: "light" | "dark" | "no-preference";
     readonly stealthProfile?: OpensteerStealthProfileInput;
+    /**
+     * Enable human-like interaction patterns for mouse, keyboard, and scroll
+     * events.  When `true` (the default), all sub-options are enabled.  Pass
+     * `false` to disable, or an object to control individual categories.
+     */
+    readonly humanize?: boolean | OpensteerHumanizeOptions;
 }
 interface OpensteerStealthProfileInput {
     readonly id?: string;
@@ -2958,6 +2972,8 @@ declare function createOpensteerExtractionDescriptorStore(options: {
 }): OpensteerExtractionDescriptorStore;
 declare function parseExtractionDescriptorRecord(record: DescriptorRecord): OpensteerExtractionDescriptorRecord | undefined;
 
+type OpensteerEnvironment = Record<string, string | undefined>;
+
 declare const OPENSTEER_ENGINE_NAMES: readonly ["playwright", "abp"];
 type OpensteerEngineName = (typeof OPENSTEER_ENGINE_NAMES)[number];
 declare const DEFAULT_OPENSTEER_ENGINE: OpensteerEngineName;
@@ -3006,6 +3022,7 @@ interface OpensteerBrowserManagerOptions {
     readonly rootPath?: string;
     readonly workspace?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3139,6 +3156,7 @@ interface OpensteerRuntimeOptions {
     readonly rootDir?: string;
     readonly rootPath?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3157,6 +3175,7 @@ interface OpensteerSessionRuntimeOptions {
     readonly rootDir?: string;
     readonly rootPath?: string;
     readonly engineName?: OpensteerEngineName;
+    readonly environment?: OpensteerEnvironment;
     readonly browser?: OpensteerBrowserOptions;
     readonly launch?: OpensteerBrowserLaunchOptions;
     readonly context?: OpensteerBrowserContextOptions;
@@ -3287,8 +3306,6 @@ declare class Opensteer {
     private requireOwnedInstrumentationRuntime;
 }
 
-type OpensteerEnvironment = Record<string, string | undefined>;
-
 interface OpensteerCloudConfig {
     readonly apiKey: string;
     readonly baseUrl: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 import './chunk-KCINASQC.js';
-export { Opensteer } from './chunk-KPYLS2KQ.js';
-export { CloudSessionProxy, DEFERRED_MATCH_ATTR_KEYS, ElementPathError, MATCH_ATTRIBUTE_PRIORITY, OPENSTEER_DOM_ACTION_BRIDGE_SYMBOL, OpensteerCloudClient, OpensteerRuntime, OpensteerSessionRuntime, STABLE_PRIMARY_ATTR_KEYS, assertProviderSupportsEngine, buildArrayFieldPathCandidates, buildDomDescriptorKey, buildDomDescriptorPayload, buildDomDescriptorVersion, buildPathCandidates, buildPathSelectorHint, buildSegmentSelector, cloneElementPath, cloneReplayElementPath, cloneStructuralElementAnchor, createDomDescriptorStore, createDomRuntime, createOpensteerExtractionDescriptorStore, createOpensteerSemanticRuntime, defaultFallbackPolicy, defaultPolicy, defaultRetryPolicy, defaultSettlePolicy, defaultTimeoutPolicy, delayWithSignal, dispatchSemanticOperation, hashDomDescriptorPersist, isCurrentUrlField, isValidCssAttributeKey, normalizeExtractedValue, normalizeOpensteerProviderMode, parseDomDescriptorRecord, parseExtractionDescriptorRecord, resolveCloudConfig, resolveDomActionBridge, resolveExtractedValueInContext, resolveOpensteerProvider, resolveOpensteerRuntimeConfig, runWithPolicyTimeout, sanitizeElementPath, sanitizeReplayElementPath, sanitizeStructuralElementAnchor, settleWithPolicy, shouldKeepAttributeForPath } from './chunk-HD6KVZ42.js';
-export { DEFAULT_OPENSTEER_ENGINE, OPENSTEER_ENGINE_NAMES, OPENSTEER_FILESYSTEM_WORKSPACE_LAYOUT, OPENSTEER_FILESYSTEM_WORKSPACE_VERSION, OpensteerBrowserManager, createArtifactStore, createFilesystemOpensteerWorkspace, createObservationStore, manifestToExternalBinaryLocation, normalizeObservabilityConfig, normalizeOpensteerEngineName, normalizeWorkspaceId, resolveFilesystemWorkspacePath, resolveOpensteerEngineName } from './chunk-2TIVULZY.js';
-export { OpensteerAttachAmbiguousError, clearPersistedSessionRecord, discoverLocalCdpBrowsers, inspectCdpEndpoint, listLocalChromeProfiles, readPersistedCloudSessionRecord, readPersistedLocalBrowserSessionRecord, readPersistedSessionRecord, resolveCloudSessionRecordPath, resolveLiveSessionRecordPath, resolveLocalSessionRecordPath, writePersistedSessionRecord } from './chunk-BMPUL66S.js';
+export { Opensteer } from './chunk-HQCMXRBE.js';
+export { CloudSessionProxy, DEFERRED_MATCH_ATTR_KEYS, ElementPathError, MATCH_ATTRIBUTE_PRIORITY, OPENSTEER_DOM_ACTION_BRIDGE_SYMBOL, OpensteerCloudClient, OpensteerRuntime, OpensteerSessionRuntime, STABLE_PRIMARY_ATTR_KEYS, assertProviderSupportsEngine, buildArrayFieldPathCandidates, buildDomDescriptorKey, buildDomDescriptorPayload, buildDomDescriptorVersion, buildPathCandidates, buildPathSelectorHint, buildSegmentSelector, cloneElementPath, cloneReplayElementPath, cloneStructuralElementAnchor, createDomDescriptorStore, createDomRuntime, createOpensteerExtractionDescriptorStore, createOpensteerSemanticRuntime, defaultFallbackPolicy, defaultPolicy, defaultRetryPolicy, defaultSettlePolicy, defaultTimeoutPolicy, delayWithSignal, dispatchSemanticOperation, hashDomDescriptorPersist, isCurrentUrlField, isValidCssAttributeKey, normalizeExtractedValue, normalizeOpensteerProviderMode, parseDomDescriptorRecord, parseExtractionDescriptorRecord, resolveCloudConfig, resolveDomActionBridge, resolveExtractedValueInContext, resolveOpensteerProvider, resolveOpensteerRuntimeConfig, runWithPolicyTimeout, sanitizeElementPath, sanitizeReplayElementPath, sanitizeStructuralElementAnchor, settleWithPolicy, shouldKeepAttributeForPath } from './chunk-GEUHKPC2.js';
+export { DEFAULT_OPENSTEER_ENGINE, OPENSTEER_ENGINE_NAMES, OPENSTEER_FILESYSTEM_WORKSPACE_LAYOUT, OPENSTEER_FILESYSTEM_WORKSPACE_VERSION, OpensteerBrowserManager, createArtifactStore, createFilesystemOpensteerWorkspace, createObservationStore, manifestToExternalBinaryLocation, normalizeObservabilityConfig, normalizeOpensteerEngineName, normalizeWorkspaceId, resolveFilesystemWorkspacePath, resolveOpensteerEngineName } from './chunk-GSCQQKZZ.js';
+export { OpensteerAttachAmbiguousError, clearPersistedSessionRecord, discoverLocalCdpBrowsers, inspectCdpEndpoint, listLocalChromeProfiles, readPersistedCloudSessionRecord, readPersistedLocalBrowserSessionRecord, readPersistedSessionRecord, resolveCloudSessionRecordPath, resolveLiveSessionRecordPath, resolveLocalSessionRecordPath, writePersistedSessionRecord } from './chunk-T5P2QGZ3.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/local-view/public/assets/app.css

@@ -16,6 +16,7 @@
   --accent-foreground: #000000;
   --destructive: #ef4444;
   --ring: rgba(255, 255, 255, 0.4);
+  --top-bar-height: 44px;
 }
 
 /* ─── Reset ─── */
@@ -34,14 +35,7 @@ body {
   overflow: hidden;
   background: var(--background);
   color: var(--foreground);
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -124,34 +118,78 @@ button {
   height: 100vh;
   min-height: 0;
   display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
-/* ─── Sidebar ─── */
+/* ─── Top Bar ─── */
 
-.sidebar {
-  width: 280px;
+.top-bar {
+  height: var(--top-bar-height);
   flex-shrink: 0;
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-right: 1px solid var(--border);
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
   background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  z-index: 50;
+  position: relative;
+}
+
+.drawer-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  padding: 0;
+  flex-shrink: 0;
+  transition:
+    background 150ms ease,
+    color 150ms ease;
+}
+
+.drawer-toggle:hover {
+  background: var(--muted);
+  color: var(--foreground);
 }
 
-.brand-block {
+.drawer-toggle:active {
+  background: var(--border-strong);
+}
+
+.session-count-badge {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-foreground);
+  font-size: 9px;
+  font-weight: 600;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px 16px 14px;
-  border-bottom: 1px solid var(--border);
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  pointer-events: none;
 }
 
+/* ─── Brand ─── */
+
 .brand-row {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .brand-icon {
@@ -182,6 +220,80 @@ button {
   letter-spacing: 0.04em;
 }
 
+.top-bar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border-strong);
+  flex-shrink: 0;
+}
+
+/* ─── Active Session Indicator ─── */
+
+.active-session-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-elevated);
+  color: var(--foreground);
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 300px;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease;
+}
+
+.active-session-indicator:hover {
+  background: var(--surface-raised);
+  border-color: var(--border-strong);
+}
+
+.active-session-indicator:active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.active-session-dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted-foreground);
+  opacity: 0.4;
+  transition: all 200ms ease;
+}
+
+.active-session-dot.is-active {
+  background: #28c840;
+  opacity: 1;
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+
+.active-session-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.active-session-chevron {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  transition: transform 200ms ease;
+}
+
+.top-bar-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ─── View Toggle ─── */
+
 .local-view-toggle {
   flex-shrink: 0;
   height: 26px;
@@ -211,52 +323,100 @@ button {
   opacity: 0.6;
 }
 
-/* ─── Sidebar Tabs ─── */
+/* ─── Session Drawer ─── */
 
-.sidebar-tab-bar {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
+.drawer-backdrop {
+  position: fixed;
+  top: var(--top-bar-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 280ms ease;
+  z-index: 90;
+}
+
+.drawer-backdrop.is-visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-.sidebar-tab-bar-inner {
+.session-drawer {
+  position: fixed;
+  top: var(--top-bar-height);
+  left: 0;
+  bottom: 0;
+  width: 320px;
   display: flex;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: var(--surface-elevated);
-  padding: 3px;
+  flex-direction: column;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  transform: translateX(-100%);
+  transition:
+    transform 280ms cubic-bezier(0, 0, 0.2, 1),
+    box-shadow 280ms ease;
+  z-index: 100;
+  overflow: hidden;
 }
 
-.sidebar-tab {
-  flex: 1;
+.session-drawer.is-open {
+  transform: translateX(0);
+  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.drawer-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: 0.02em;
+}
+
+.drawer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border: none;
   border-radius: 6px;
-  padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--muted-foreground);
   background: transparent;
-  transition: all 200ms;
+  color: var(--muted-foreground);
+  padding: 0;
+  transition:
+    background 150ms ease,
+    color 150ms ease;
 }
 
-.sidebar-tab:hover {
-  background: rgba(255, 255, 255, 0.03);
+.drawer-close:hover {
+  background: var(--muted);
   color: var(--foreground);
 }
 
-.sidebar-tab.is-active {
-  background: var(--surface);
-  color: var(--foreground);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+.drawer-close:active {
+  background: var(--border-strong);
 }
 
-/* ─── Session List ─── */
-
-.sidebar-scroll {
+.drawer-scroll {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
 
+/* ─── Session List ─── */
+
 .session-list {
   display: flex;
   flex-direction: column;
@@ -383,7 +543,7 @@ button {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding: 20px;
+  padding: 16px;
   min-height: 0;
   overflow: hidden;
 }
@@ -750,21 +910,25 @@ button {
 /* ─── Responsive ─── */
 
 @media (max-width: 768px) {
-  .app-shell {
-    flex-direction: column;
+  .session-drawer {
+    width: 100%;
   }
 
-  .sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
+  .viewer-area {
+    padding: 8px;
   }
+}
 
-  .sidebar-scroll {
-    max-height: 200px;
+@media (max-width: 640px) {
+  .brand-name {
+    display: none;
   }
 
-  .viewer-area {
-    padding: 12px;
+  .top-bar-divider {
+    display: none;
+  }
+
+  .active-session-indicator {
+    max-width: 180px;
   }
 }

package/dist/local-view/public/assets/app.js

@@ -956,6 +956,7 @@ class LocalViewApp {
     this.layoutFrame = null;
     this.lastBrowserFrameWidth = null;
     this.lastStreamAspect = null;
+    this.drawerOpen = false;
 
     this.viewerAreaEl = document.querySelector(".viewer-area");
     this.browserFrameEl = document.querySelector(".browser-frame");
@@ -978,6 +979,14 @@ class LocalViewApp {
     this.newTabButtonEl = document.getElementById("new-tab-button");
     this.closeBrowserButtonEl = document.getElementById("close-browser-button");
     this.stopViewButtonEl = document.getElementById("stop-view-button");
+    this.drawerToggleEl = document.getElementById("drawer-toggle");
+    this.drawerCloseEl = document.getElementById("drawer-close");
+    this.drawerBackdropEl = document.getElementById("drawer-backdrop");
+    this.sessionDrawerEl = document.getElementById("session-drawer");
+    this.activeSessionIndicatorEl = document.getElementById("active-session-indicator");
+    this.activeSessionLabelEl = document.getElementById("active-session-label");
+    this.activeSessionDotEl = document.getElementById("active-session-dot");
+    this.sessionCountBadgeEl = document.getElementById("session-count-badge");
 
     this.stream = new LocalBrowserStream(() => this.render());
     this.cdp = new LocalCdpConnection(() => this.render());
@@ -1007,6 +1016,30 @@ class LocalViewApp {
     }
   }
 
+  openDrawer() {
+    this.drawerOpen = true;
+    this.sessionDrawerEl.classList.add("is-open");
+    this.drawerBackdropEl.classList.add("is-visible");
+    this.drawerToggleEl.setAttribute("aria-expanded", "true");
+    this.activeSessionIndicatorEl.setAttribute("aria-expanded", "true");
+  }
+
+  closeDrawer() {
+    this.drawerOpen = false;
+    this.sessionDrawerEl.classList.remove("is-open");
+    this.drawerBackdropEl.classList.remove("is-visible");
+    this.drawerToggleEl.setAttribute("aria-expanded", "false");
+    this.activeSessionIndicatorEl.setAttribute("aria-expanded", "false");
+  }
+
+  toggleDrawer() {
+    if (this.drawerOpen) {
+      this.closeDrawer();
+    } else {
+      this.openDrawer();
+    }
+  }
+
   bindUi() {
     window.addEventListener("hashchange", () => {
       const hashSessionId = resolveSelectedSessionIdFromHash();
@@ -1015,12 +1048,24 @@ class LocalViewApp {
       }
     });
 
+    this.drawerToggleEl.addEventListener("click", () => this.toggleDrawer());
+    this.drawerCloseEl.addEventListener("click", () => this.closeDrawer());
+    this.drawerBackdropEl.addEventListener("click", () => this.closeDrawer());
+    this.activeSessionIndicatorEl.addEventListener("click", () => this.toggleDrawer());
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this.drawerOpen) {
+        this.closeDrawer();
+      }
+    });
+
     this.sessionListEl.addEventListener("click", (event) => {
       const button = event.target.closest("button[data-session-id]");
       if (!button) {
         return;
       }
       this.selectSession(button.dataset.sessionId ?? null);
+      this.closeDrawer();
     });
 
     this.tabStripEl.addEventListener("click", (event) => {
@@ -1182,10 +1227,10 @@ class LocalViewApp {
     );
 
     this.viewerSurfaceEl.addEventListener("keydown", (event) => {
-      const payload = createCdpKeyDownPayload(event);
-      if (!payload) {
+      if (event.key === "Escape" && this.drawerOpen) {
         return;
       }
+      const payload = createCdpKeyDownPayload(event);
       event.preventDefault();
       void this.dispatchPointerCommand("Input.dispatchKeyEvent", payload);
     });
@@ -1460,6 +1505,17 @@ class LocalViewApp {
   }
 
   renderSessions() {
+    const activeSession = this.sessions.find((s) => s.sessionId === this.selectedSessionId) ?? null;
+    this.activeSessionLabelEl.textContent = activeSession
+      ? activeSession.label
+      : "No session selected";
+    this.activeSessionDotEl.className = activeSession
+      ? "active-session-dot is-active"
+      : "active-session-dot";
+    const sessionCount = this.sessions.length;
+    this.sessionCountBadgeEl.textContent = String(sessionCount);
+    this.sessionCountBadgeEl.hidden = sessionCount === 0;
+
     this.sessionListEl.textContent = "";
     if (this.sessions.length === 0) {
       const empty = document.createElement("div");