opensteer 0.9.1 → 0.9.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import './chunk-KCINASQC.js';
-export { Opensteer } from './chunk-L4FWHBQJ.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-6PGXWW3X.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-4LP7QP2O.js';
+export { Opensteer } from './chunk-UM2Q4JD2.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-GREXSYNC.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';
 //# 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");

package/dist/local-view/public/index.html

@@ -8,37 +8,112 @@
   </head>
   <body>
     <div class="app-shell">
-      <aside class="sidebar">
-        <div class="brand-block">
-          <div class="brand-row">
-            <svg class="brand-icon" viewBox="0 0 64 64" role="img" aria-label="Opensteer">
-              <defs>
-                <radialGradient id="opensteer-brand-fill" cx="34%" cy="22%" r="78%">
-                  <stop offset="0" stop-color="#ffffff" />
-                  <stop offset="0.58" stop-color="#eee9e4" />
-                  <stop offset="1" stop-color="#efc6ba" />
-                </radialGradient>
-              </defs>
-              <circle cx="32" cy="32" r="25" fill="url(#opensteer-brand-fill)" />
-            </svg>
-            <span class="brand-name">Opensteer</span>
-            <span class="brand-badge">Local</span>
-          </div>
+      <header class="top-bar">
+        <button
+          id="drawer-toggle"
+          class="drawer-toggle"
+          type="button"
+          aria-label="Toggle sessions panel"
+          aria-controls="session-drawer"
+          aria-expanded="false"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+          <span id="session-count-badge" class="session-count-badge" hidden>0</span>
+        </button>
+
+        <div class="brand-row">
+          <svg class="brand-icon" viewBox="0 0 64 64" role="img" aria-label="Opensteer">
+            <defs>
+              <radialGradient id="opensteer-brand-fill" cx="34%" cy="22%" r="78%">
+                <stop offset="0" stop-color="#ffffff" />
+                <stop offset="0.58" stop-color="#eee9e4" />
+                <stop offset="1" stop-color="#efc6ba" />
+              </radialGradient>
+            </defs>
+            <circle cx="32" cy="32" r="25" fill="url(#opensteer-brand-fill)" />
+          </svg>
+          <span class="brand-name">Opensteer</span>
+          <span class="brand-badge">Local</span>
+        </div>
+
+        <div class="top-bar-divider"></div>
+
+        <button
+          id="active-session-indicator"
+          class="active-session-indicator"
+          type="button"
+          aria-label="Switch session"
+          aria-controls="session-drawer"
+          aria-expanded="false"
+        >
+          <span id="active-session-dot" class="active-session-dot"></span>
+          <span id="active-session-label" class="active-session-label">No session selected</span>
+          <svg
+            class="active-session-chevron"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+
+        <div class="top-bar-spacer"></div>
+
+        <button
+          id="stop-view-button"
+          class="local-view-toggle"
+          type="button"
+          data-testid="stop-view-button"
+        >
+          Turn View Off
+        </button>
+      </header>
+
+      <div id="drawer-backdrop" class="drawer-backdrop"></div>
+      <aside id="session-drawer" class="session-drawer">
+        <div class="drawer-header">
+          <span class="drawer-title">Sessions</span>
           <button
-            id="stop-view-button"
-            class="local-view-toggle"
+            id="drawer-close"
+            class="drawer-close"
             type="button"
-            data-testid="stop-view-button"
+            aria-label="Close sessions panel"
           >
-            Turn View Off
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
           </button>
         </div>
-        <div class="sidebar-tab-bar">
-          <div class="sidebar-tab-bar-inner">
-            <button class="sidebar-tab is-active" type="button">Sessions</button>
-          </div>
-        </div>
-        <div class="sidebar-scroll">
+        <div class="drawer-scroll">
           <div id="session-list" class="session-list" data-testid="session-list"></div>
         </div>
       </aside>