@chrysb/alphaclaw 0.8.1 → 0.8.3-beta.0

package/lib/public/js/components/models-tab/index.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useMemo } from "preact/hooks";
+import htm from "htm";
 import { PageHeader } from "../page-header.js";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { ActionButton } from "../action-button.js";
@@ -151,7 +151,7 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
   if (!ready) {
     const loadingBody = html`
       <div class="bg-surface border border-border rounded-xl p-4">
-        <div class="flex items-center gap-2 text-sm text-gray-400">
+        <div class="flex items-center gap-2 text-sm text-fg-muted">
           <${LoadingSpinner} className="h-4 w-4" />
           Loading model settings...
         </div>
@@ -173,7 +173,7 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
       <h2 class="card-label">Available Models</h2>
 
       ${configuredModelEntries.length === 0
-        ? html`<p class="text-xs text-gray-500">
+        ? html`<p class="text-xs text-fg-muted">
             No models configured. Add a model below.
           </p>`
         : html`
@@ -181,10 +181,10 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
               ${configuredModelEntries.map(
                 (entry) => html`
                   <div
-                    class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-white/5"
+                    class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-surface"
                   >
                     <div class="flex items-center gap-2 min-w-0">
-                      <span class="text-sm text-gray-200 truncate"
+                      <span class="text-sm text-body truncate"
                         >${entry.label}</span
                       >
                       ${entry.isPrimary
@@ -193,7 +193,7 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
                           ? html`
                               <button
                                 onclick=${() => setPrimaryModel(entry.key)}
-                                class="text-xs px-2 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
+                                class="text-xs px-2 py-0.5 rounded-full text-fg-muted hover:text-body hover:bg-surface"
                               >
                                 Set primary
                               </button>
@@ -202,7 +202,7 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
                     </div>
                     <button
                       onclick=${() => removeModel(entry.key)}
-                      class="text-xs text-gray-600 hover:text-red-400 shrink-0 px-1"
+                      class="text-xs text-fg-dim hover:text-status-error-muted shrink-0 px-1"
                     >
                       Remove
                     </button>
@@ -225,11 +225,11 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
       </div>
 
       ${loading
-        ? html`<p class="text-xs text-gray-600">
+        ? html`<p class="text-xs text-fg-dim">
             Loading model catalog...
           </p>`
         : error
-          ? html`<p class="text-xs text-gray-600">${error}</p>`
+          ? html`<p class="text-xs text-fg-dim">${error}</p>`
           : null}
     </div>
 

package/lib/public/js/components/models-tab/model-picker.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useMemo, useRef, useEffect } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useMemo, useRef, useEffect } from "preact/hooks";
+import htm from "htm";
 import {
   getModelProvider,
   getAuthProviderFromModelProvider,
@@ -156,7 +156,7 @@ export const SearchableModelPicker = ({
           setOpen(true);
         }}
         onKeyDown=${handleKeyDown}
-        class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted disabled:opacity-50 disabled:cursor-not-allowed"
       />
       ${open && !disabled
         ? html`
@@ -169,7 +169,7 @@ export const SearchableModelPicker = ({
                       (group, index) => html`
                         <div key=${group.provider}>
                           <div
-                            class=${`sticky top-0 z-10 h-[22px] px-3 text-[12px] font-semibold tracking-wide text-gray-400 bg-[#151922] border-b border-border flex items-center ${
+                            class=${`sticky top-0 z-10 h-[22px] px-3 text-[12px] font-semibold tracking-wide text-fg-muted bg-[#151922] border-b border-border flex items-center ${
                               index > 0 ? "border-t border-border" : ""
                             }`}
                           >
@@ -182,13 +182,13 @@ export const SearchableModelPicker = ({
                                 type="button"
                                 onMouseDown=${(event) => event.preventDefault()}
                                 onClick=${() => handleSelect(model.key)}
-                                class="w-full text-left px-3 py-2 hover:bg-white/5 border-b border-border last:border-b-0"
+                                class="w-full text-left px-3 py-2 hover:bg-surface border-b border-border last:border-b-0"
                               >
                                 <div class="flex flex-col gap-1">
-                                  <div class="text-sm text-gray-200">
+                                  <div class="text-sm text-body">
                                     ${getModelDisplayLabel(model)}
                                   </div>
-                                  <div class="text-xs text-gray-500 font-mono">
+                                  <div class="text-xs text-fg-muted font-mono">
                                     ${model.key}
                                   </div>
                                 </div>
@@ -199,7 +199,7 @@ export const SearchableModelPicker = ({
                       `,
                     )
                   : html`
-                      <div class="px-3 py-3 text-xs text-gray-500">
+                      <div class="px-3 py-3 text-xs text-fg-muted">
                         No models match that search.
                       </div>
                     `}

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useRef, useEffect } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useRef, useEffect } from "preact/hooks";
+import htm from "htm";
 import { Badge } from "../badge.js";
 import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
@@ -193,7 +193,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   return html`
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs text-gray-400">Codex OAuth</span>
+        <span class="text-xs text-fg-muted">Codex OAuth</span>
         ${codexStatus.connected
           ? html`<${Badge} tone="success">Connected</${Badge}>`
           : html`<${Badge} tone="warning">Not connected</${Badge}>`}
@@ -226,7 +226,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
             `
           : html`
               <div class="flex items-center justify-between gap-2">
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-fg-muted">
                   ${authWaiting
                     ? "Complete login in the popup, then paste the redirect URL."
                     : "Paste the redirect URL from your browser to finish connecting."}
@@ -241,9 +241,9 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
             `}
       ${!codexStatus.connected && authStarted
         ? html`
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-fg-muted">
               After login, copy the full redirect URL (starts with
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >http://localhost:1455/auth/callback</code
               >) and paste it here.
             </p>
@@ -252,7 +252,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
               value=${manualInput}
               onInput=${(e) => setManualInput(e.target.value)}
               placeholder="http://localhost:1455/auth/callback?code=...&state=..."
-              class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
+              class="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body outline-none focus:border-fg-muted"
             />
             <${ActionButton}
               onClick=${completeAuth}
@@ -340,7 +340,7 @@ export const ProviderAuthCard = ({
         return html`
           <div class="space-y-1.5">
             <div class="flex items-center gap-2">
-              <label class="text-xs font-medium text-gray-400"
+              <label class="text-xs font-medium text-fg-muted"
                 >${mode.label}</label
               >
               ${hasMultipleModes && isActive
@@ -349,7 +349,7 @@ export const ProviderAuthCard = ({
               ${hasMultipleModes && !isActive && fieldValue
                 ? html`<button
                     onclick=${() => handleSetActive(mode)}
-                    class="text-xs px-1.5 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
+                    class="text-xs px-1.5 py-0.5 rounded-full text-fg-muted hover:text-body hover:bg-surface"
                   >
                     Set primary
                   </button>`
@@ -388,10 +388,10 @@ export const ProviderAuthCard = ({
               }}
               placeholder=${mode.placeholder || ""}
               isSecret=${true}
-              inputClass="flex-1 w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+              inputClass="flex-1 w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted font-mono"
             />
             ${mode.hint
-              ? html`<p class="text-xs text-gray-600">${mode.hint}</p>`
+              ? html`<p class="text-xs text-fg-dim">${mode.hint}</p>`
               : null}
           </div>
         `;

package/lib/public/js/components/models-tab/use-models.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
 import {
   fetchModels,
   fetchModelsConfig,

package/lib/public/js/components/models.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import htm from "htm";
 import {
   fetchEnvVars,
   saveEnvVars,
@@ -275,15 +275,15 @@ export const Models = () => {
 
   const renderCredentialField = (field) => html`
     <div class="space-y-1">
-      <label class="text-xs font-medium text-gray-400">${field.label}</label>
+      <label class="text-xs font-medium text-fg-muted">${field.label}</label>
       <${SecretInput}
         value=${getKeyVal(envVars, field.key)}
         onInput=${(e) => setEnvValue(field.key, e.target.value)}
         placeholder=${field.placeholder || ""}
         isSecret=${!field.isText}
-        inputClass="flex-1 w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+        inputClass="flex-1 w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted font-mono"
       />
-      <p class="text-xs text-gray-600">${field.hint}</p>
+      <p class="text-xs text-fg-dim">${field.hint}</p>
     </div>
   `;
 
@@ -296,7 +296,7 @@ export const Models = () => {
       html`
         <div class="border border-border rounded-lg p-3 space-y-2">
           <div class="flex items-center justify-between">
-            <span class="text-xs text-gray-400">Codex OAuth</span>
+            <span class="text-xs text-fg-muted">Codex OAuth</span>
             ${codexStatus.connected
               ? html`<${Badge} tone="success">Connected</${Badge}>`
               : html`<${Badge} tone="warning">Not connected</${Badge}>`}
@@ -329,7 +329,7 @@ export const Models = () => {
               `
             : html`
                 <div class="flex items-center justify-between gap-2">
-                  <p class="text-xs text-gray-500">
+                  <p class="text-xs text-fg-muted">
                     ${codexAuthWaiting
                       ? "Complete login in the popup, then paste the redirect URL."
                       : "Paste the redirect URL from your browser to finish connecting."}
@@ -344,9 +344,9 @@ export const Models = () => {
               `}
           ${!codexStatus.connected && codexAuthStarted
             ? html`
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-fg-muted">
                   After login, copy the full redirect URL (starts with
-                  <code class="text-xs bg-black/30 px-1 rounded">http://localhost:1455/auth/callback</code>)
+                  <code class="text-xs bg-field px-1 rounded">http://localhost:1455/auth/callback</code>)
                   and paste it here.
                 </p>
                 <input
@@ -354,7 +354,7 @@ export const Models = () => {
                   value=${codexManualInput}
                   onInput=${(e) => setCodexManualInput(e.target.value)}
                   placeholder="http://localhost:1455/auth/callback?code=...&state=..."
-                  class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body outline-none focus:border-fg-muted"
                 />
                 <${ActionButton}
                   onClick=${completeCodexAuth}
@@ -376,7 +376,7 @@ export const Models = () => {
   if (!ready) {
     return html`
       <div class="bg-surface border border-border rounded-xl p-4">
-        <div class="flex items-center gap-2 text-sm text-gray-400">
+        <div class="flex items-center gap-2 text-sm text-fg-muted">
           <${LoadingSpinner} className="h-4 w-4" />
           Loading model settings...
         </div>
@@ -396,14 +396,14 @@ export const Models = () => {
             setModelDirty(next !== savedModel);
             kModelsTabCache = { ...(kModelsTabCache || {}), selectedModel: next };
           }}
-          class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
+          class="w-full bg-field border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-body outline-none focus:border-fg-muted"
         >
           <option value="">Select a model</option>
           ${modelOptions.map(
             (model) => html`<option value=${model.key}>${model.label || model.key}</option>`,
           )}
         </select>
-        <p class="text-xs text-gray-600">
+        <p class="text-xs text-fg-dim">
           ${modelsLoading ? "Loading model catalog..." : modelsError ? modelsError : ""}
         </p>
         ${canToggleFullCatalog
@@ -417,7 +417,7 @@ export const Models = () => {
                       kModelsTabCache = { ...(kModelsTabCache || {}), showAllModels: next };
                       return next;
                     })}
-                  class="text-xs text-gray-500 hover:text-gray-300"
+                  class="text-xs text-fg-muted hover:text-body"
                 >
                   ${showAllModels ? "Show recommended models" : "Show full model catalog"}
                 </button>
@@ -433,8 +433,8 @@ export const Models = () => {
         <h2 class="font-semibold text-sm">Other Providers</h2>
         ${otherProviders.map(
           (provider) => html`
-            <div class="bg-black/20 border border-border rounded-lg p-3 space-y-3">
-              <h3 class="text-xs font-semibold text-gray-300">${kProviderLabels[provider] || provider}</h3>
+            <div class="bg-field border border-border rounded-lg p-3 space-y-3">
+              <h3 class="text-xs font-semibold text-body">${kProviderLabels[provider] || provider}</h3>
               ${renderProviderContent(provider)}
             </div>
           `,
@@ -453,7 +453,7 @@ export const Models = () => {
       />
       ${modelDirty && !hasSelectedProviderAuth
         ? html`
-            <p class="text-xs text-yellow-500">
+            <p class="text-xs text-status-warning-muted">
               Set credentials for the selected provider before saving this model change.
             </p>
           `

package/lib/public/js/components/nodes-tab/browser-attach/index.js

@@ -1,7 +1,7 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
-import { marked } from "https://esm.sh/marked";
+import { h } from "preact";
+import { useMemo } from "preact/hooks";
+import htm from "htm";
+import { marked } from "marked";
 
 const html = htm.bind(h);
 
@@ -63,7 +63,7 @@ export const BrowserAttachCard = () => {
     <details
       class="ac-surface-inset rounded-lg border border-border px-3 py-2.5"
     >
-      <summary class="cursor-pointer text-xs text-gray-300 hover:text-gray-200">
+      <summary class="cursor-pointer text-xs text-body hover:text-body">
         Chrome debugging setup / troubleshooting
       </summary>
       <div

package/lib/public/js/components/nodes-tab/connected-nodes/index.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { ActionButton } from "../../action-button.js";
 import { Badge } from "../../badge.js";
 import { ConfirmDialog } from "../../confirm-dialog.js";
@@ -92,7 +92,7 @@ export const ConnectedNodesCard = ({
       ${pending.length
         ? html`
             <div
-              class="bg-surface border border-yellow-500/40 rounded-xl px-4 py-3 text-xs text-yellow-300"
+              class="bg-surface border border-yellow-500/40 rounded-xl px-4 py-3 text-xs text-status-warning"
             >
               ${pending.length} pending node${pending.length === 1 ? "" : "s"}
               waiting for approval.
@@ -102,7 +102,7 @@ export const ConnectedNodesCard = ({
       ${loading
         ? html`
             <div class="bg-surface border border-border rounded-xl p-4">
-              <div class="flex items-center gap-3 text-sm text-gray-400">
+              <div class="flex items-center gap-3 text-sm text-fg-muted">
                 <${LoadingSpinner} className="h-4 w-4" />
                 <span>Loading nodes...</span>
               </div>
@@ -111,7 +111,7 @@ export const ConnectedNodesCard = ({
         : error
           ? html`
               <div
-                class="bg-surface border border-border rounded-xl p-4 text-xs text-red-400"
+                class="bg-surface border border-border rounded-xl p-4 text-xs text-status-error-muted"
               >
                 ${error}
               </div>
@@ -124,10 +124,10 @@ export const ConnectedNodesCard = ({
                   <div class="max-w-md w-full flex flex-col items-center gap-4">
                     <${ComputerLineIcon} className="h-12 w-12 text-cyan-400" />
                     <div class="space-y-2">
-                      <h2 class="font-semibold text-lg text-gray-100">
+                      <h2 class="font-semibold text-lg text-bright">
                         No connected nodes yet
                       </h2>
-                      <p class="text-xs text-gray-400 leading-5">
+                      <p class="text-xs text-fg-muted leading-5">
                         Connect a Mac, iOS, Android, or headless node to run
                         system and browser commands through this gateway.
                       </p>
@@ -175,7 +175,7 @@ export const ConnectedNodesCard = ({
                                 ? html`
                                     <button
                                       type="button"
-                                      class="shrink-0 inline-flex items-center gap-1 text-[11px] text-gray-500 hover:text-gray-300"
+                                      class="shrink-0 inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-body"
                                       onclick=${() =>
                                         handleCopyText(nodeId, {
                                           successMessage: "Device ID copied",
@@ -204,7 +204,7 @@ export const ConnectedNodesCard = ({
                                   onToggle=${() => handleOpenNodeMenu(nodeId)}
                                 >
                                   <${OverflowMenuItem}
-                                    className="text-red-300 hover:text-red-200"
+                                    className="text-status-error hover:text-status-error"
                                     onClick=${() => {
                                       setMenuOpenNodeId("");
                                       setRemoveDialogNode(node);
@@ -219,15 +219,15 @@ export const ConnectedNodesCard = ({
                         </div>
                         <div class="flex flex-wrap gap-2 text-[11px]">
                           <div class="ac-surface-inset rounded-lg px-2.5 py-1">
-                            <span class="text-gray-500">platform: </span>
+                            <span class="text-fg-muted">platform: </span>
                             <code>${node?.platform || "unknown"}</code>
                           </div>
                           <div class="ac-surface-inset rounded-lg px-2.5 py-1">
-                            <span class="text-gray-500">version: </span>
+                            <span class="text-fg-muted">version: </span>
                             <code>${node?.version || "unknown"}</code>
                           </div>
                           <div class="ac-surface-inset rounded-lg px-2.5 py-1">
-                            <span class="text-gray-500">capabilities: </span>
+                            <span class="text-fg-muted">capabilities: </span>
                             <code
                               >${Array.isArray(node?.caps)
                                 ? node.caps.join(", ")
@@ -251,14 +251,14 @@ export const ConnectedNodesCard = ({
                                       ${browserAttachEnabled
                                         ? html`
                                             <div
-                                              class="text-[11px] text-gray-500"
+                                              class="text-[11px] text-fg-muted"
                                             >
                                               profile: <code>user</code>
                                             </div>
                                           `
                                         : html`
                                             <div
-                                              class="text-[11px] text-gray-500"
+                                              class="text-[11px] text-fg-muted"
                                             >
                                               Attach is disabled until you click
                                               ${" "}
@@ -322,7 +322,7 @@ export const ConnectedNodesCard = ({
                                           class="flex items-center justify-between gap-2"
                                         >
                                           <div
-                                            class="flex flex-wrap gap-2 text-[11px] text-gray-500"
+                                            class="flex flex-wrap gap-2 text-[11px] text-fg-muted"
                                           >
                                             <span
                                               >driver:
@@ -339,30 +339,32 @@ export const ConnectedNodesCard = ({
                                               ></span
                                             >
                                           </div>
-                                          ${browserAttachEnabled
-                                            ? html`
-                                                <button
-                                                  type="button"
-                                                  onclick=${() =>
-                                                    handleDetachNodeBrowser(
-                                                      nodeId,
-                                                    )}
-                                                  class="shrink-0 text-[11px] text-gray-500 hover:text-gray-300"
-                                                >
-                                                  Detach
-                                                </button>
-                                              `
-                                            : null}
                                         </div>
                                       `
                                     : null}
                                   ${browserError
                                     ? html`<div
-                                        class="text-[11px] text-red-400"
+                                        class="text-[11px] text-status-error-muted"
                                       >
                                         ${browserError}
                                       </div>`
                                     : null}
+                                  ${canCheckBrowser &&
+                                  browserAttachEnabled &&
+                                  !checkingBrowser
+                                    ? html`
+                                        <div class="flex justify-end pt-1">
+                                          <button
+                                            type="button"
+                                            onclick=${() =>
+                                              handleDetachNodeBrowser(nodeId)}
+                                            class="shrink-0 text-[11px] text-fg-muted hover:text-body"
+                                          >
+                                            Detach
+                                          </button>
+                                        </div>
+                                      `
+                                    : null}
                                 </div>
                               </div>
                             `
@@ -372,7 +374,7 @@ export const ConnectedNodesCard = ({
                               <div
                                 class="border-t border-border pt-2 space-y-2"
                               >
-                                <div class="text-[11px] text-gray-500">
+                                <div class="text-[11px] text-fg-muted">
                                   Reconnect command
                                 </div>
                                 <div class="flex items-center gap-2">
@@ -384,7 +386,7 @@ export const ConnectedNodesCard = ({
                                       connectInfo,
                                       maskToken: true,
                                     })}
-                                    class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2 py-1.5 text-[11px] font-mono text-gray-300"
+                                    class="flex-1 min-w-0 bg-field border border-border rounded-lg px-2 py-1.5 text-[11px] font-mono text-body"
                                   />
                                   <${ActionButton}
                                     onClick=${() =>

package/lib/public/js/components/nodes-tab/connected-nodes/use-connected-nodes-card.js

@@ -3,7 +3,7 @@ import {
   useEffect,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { fetchNodeBrowserStatusForNode, removeNode } from "../../../lib/api.js";
 import { readUiSettings, updateUiSettings } from "../../../lib/ui-settings.js";
@@ -12,6 +12,7 @@ import { showToast } from "../../toast.js";
 const kBrowserCheckTimeoutMs = 35000;
 const kBrowserPollIntervalMs = 10000;
 const kBrowserAttachStateByNodeKey = "nodesBrowserAttachStateByNode";
+const kBrowserClosedPageErrorPattern = /selected page has been closed/i;
 
 const withTimeout = async (promise, timeoutMs = kBrowserCheckTimeoutMs) => {
   let timeoutId = null;
@@ -37,6 +38,16 @@ const isBrowserCapableNode = (node) => {
   return caps.includes("browser") || commands.includes("browser.proxy");
 };
 
+const normalizeBrowserStatusError = (error) => {
+  const rawMessage = String(
+    error?.message || "Could not check node browser status",
+  ).trim();
+  if (kBrowserClosedPageErrorPattern.test(rawMessage)) {
+    return "Selected Chrome page was closed. Click Attach to reconnect.";
+  }
+  return rawMessage;
+};
+
 const readBrowserAttachStateByNode = () => {
   const uiSettings = readUiSettings();
   const attachState = uiSettings?.[kBrowserAttachStateByNodeKey];
@@ -120,7 +131,12 @@ export const useConnectedNodesCard = ({
           [normalizedNodeId]: status,
         }));
       } catch (error) {
-        const message = error.message || "Could not check node browser status";
+        const message = normalizeBrowserStatusError(error);
+        // Stop poll loops after failures so we do not keep retrying a stale browser session.
+        setBrowserStatusByNodeId((prev) => ({
+          ...prev,
+          [normalizedNodeId]: null,
+        }));
         setBrowserErrorByNodeId((prev) => ({
           ...prev,
           [normalizedNodeId]: message,
@@ -268,7 +284,6 @@ export const useConnectedNodesCard = ({
       const nextNodeId = pollableNodeIds[pollIndex];
       await handleCheckNodeBrowser(nextNodeId, { silent: true });
     };
-    poll();
     const timer = setInterval(poll, kBrowserPollIntervalMs);
     return () => {
       active = false;