@chrysb/alphaclaw 0.8.1-beta.8 → 0.8.2

package/lib/public/js/components/onboarding/welcome-secret-review-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useCallback } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useCallback } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
@@ -11,7 +11,7 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
   html`
     <div
       class="border border-border rounded-lg p-3 space-y-2 ${selected
-        ? "bg-cyan-900/10 border-cyan-800/40"
+        ? "bg-status-info-bg border-status-info-border"
         : ""}"
     >
       <div class="flex items-start gap-2">
@@ -23,20 +23,20 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
         />
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-2 flex-wrap">
-            <span class="text-xs font-mono text-gray-300 truncate"
+            <span class="text-xs font-mono text-body truncate"
               >${secret.maskedValue}</span
             >
             ${secret.confidence === "high"
               ? html`<span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-red-900/40 text-red-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-error-bg text-status-error"
                   >high confidence</span
                 >`
               : html`<span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/40 text-yellow-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-warning-bg text-status-warning"
                   >possible</span
                 >`}
           </div>
-          <div class="text-xs text-gray-500 mt-1">
+          <div class="text-xs text-fg-muted mt-1">
             Found in${" "}
             <span class="font-mono">${secret.file || "config"}</span>
             ${secret.configPath
@@ -45,7 +45,7 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
           </div>
           ${secret.duplicateIn &&
           html`
-            <div class="text-xs text-yellow-400 mt-1">
+            <div class="text-xs text-status-warning-muted mt-1">
               Also found in${" "}<span class="font-mono"
                 >${secret.duplicateIn}</span
               >
@@ -56,12 +56,12 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
       ${selected &&
       html`
         <div class="pl-6">
-          <label class="text-xs text-gray-500">Extract as env var:</label>
+          <label class="text-xs text-fg-muted">Extract as env var:</label>
           <input
             type="text"
             value=${envVarName}
             onInput=${(e) => onEnvVarChange(e.target.value)}
-            class="w-full mt-1 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+            class="w-full mt-1 bg-field border border-border rounded-lg px-3 py-1.5 text-xs text-body outline-none focus:border-fg-muted font-mono"
           />
         </div>
       `}
@@ -134,7 +134,7 @@ export const WelcomeSecretReviewStep = ({
     return html`
       <div class="flex flex-col items-center justify-center py-8 gap-3">
         <${LoadingSpinner} />
-        <p class="text-sm text-gray-400">Applying import...</p>
+        <p class="text-sm text-fg-muted">Applying import...</p>
       </div>
     `;
   }
@@ -142,8 +142,8 @@ export const WelcomeSecretReviewStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Review Secrets</h2>
-        <p class="text-xs text-gray-500">
+        <h2 class="text-sm font-medium text-body">Review Secrets</h2>
+        <p class="text-xs text-fg-muted">
           Select secrets to extract into environment variables. Inline values in
           config will be replaced with ${"`"}${"${"}ENV_VAR_NAME${"}"}${"`"} references.
         </p>
@@ -152,7 +152,7 @@ export const WelcomeSecretReviewStep = ({
       ${error &&
       html`
         <div
-          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+          class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
         >
           ${error}
         </div>

package/lib/public/js/components/onboarding/welcome-setup-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import htm from "htm";
 import { LoadingSpinner } from "../loading-spinner.js";
 
 const html = htm.bind(h);
@@ -46,10 +46,10 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
     return html`
       <div class="py-4 flex flex-col items-center text-center gap-3">
         <h3 class="text-lg font-semibold text-white">Setup failed</h3>
-        <p class="text-sm text-gray-500">Fix the values and try again.</p>
+        <p class="text-sm text-fg-muted">Fix the values and try again.</p>
       </div>
       <div
-        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
       >
         ${error}
       </div>
@@ -87,12 +87,12 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
         <h3 class="text-lg font-semibold text-white">
           Initializing OpenClaw...
         </h3>
-        <p class="text-sm text-gray-500">This could take 10-15 seconds</p>
+        <p class="text-sm text-fg-muted">This could take 10-15 seconds</p>
       </div>
       <div
-        class="absolute bottom-3 left-3 right-3 bg-black/20 border border-border rounded-lg px-3 py-2 text-xs text-gray-500"
+        class="absolute bottom-3 left-3 right-3 bg-field border border-border rounded-lg px-3 py-2 text-xs text-fg-muted"
       >
-        <span class="text-gray-400">${currentTip.label}: </span>
+        <span class="text-fg-muted">${currentTip.label}: </span>
         ${currentTip.text}
       </div>
     </div>

package/lib/public/js/components/overflow-menu.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useRef } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import htm from "htm";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/page-header.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";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/pairings.js

@@ -1,6 +1,6 @@
-import { h } from 'https://esm.sh/preact';
-import { useState } from 'https://esm.sh/preact/hooks';
-import htm from 'https://esm.sh/htm';
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
 import { ActionButton } from './action-button.js';
 const html = htm.bind(h);
 
@@ -27,22 +27,22 @@ export const PairingRow = ({ p, onApprove, onReject }) => {
 
   if (busy === "approve") {
     return html`
-      <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
-        <span class="text-green-400 text-sm">Approved</span>
-        <span class="text-gray-500 text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
+      <div class="bg-field rounded-lg p-3 mb-2 flex items-center gap-2">
+        <span class="text-status-success text-sm">Approved</span>
+        <span class="text-fg-muted text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
       </div>`;
   }
   if (busy === "reject") {
     return html`
-      <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
-        <span class="text-gray-400 text-sm">Rejected</span>
-        <span class="text-gray-500 text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
+      <div class="bg-field rounded-lg p-3 mb-2 flex items-center gap-2">
+        <span class="text-fg-muted text-sm">Rejected</span>
+        <span class="text-fg-muted text-xs">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
       </div>`;
   }
 
   return html`
-    <div class="bg-black/30 rounded-lg p-3 mb-2">
-      <div class="font-medium text-sm mb-2">${label}${accountSuffix} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
+    <div class="bg-field rounded-lg p-3 mb-2">
+      <div class="font-medium text-sm mb-2">${label}${accountSuffix} · <code class="text-fg-muted">${p.code || p.id || '?'}</code></div>
       <div class="flex gap-2">
         <${ActionButton}
           onClick=${() => handle("approve")}
@@ -104,12 +104,12 @@ export function Pairings({
           </div>`
         : statusRefreshing
         ? html`<div class="text-center py-4 space-y-2">
-            <p class="text-gray-300 text-sm">Updating pairing status...</p>
+            <p class="text-body text-sm">Updating pairing status...</p>
           </div>`
         : html`<div class="text-center py-4 space-y-2">
             <div class="text-3xl">💬</div>
-            <p class="text-gray-300 text-sm">Send a message to your bot on ${channelList}</p>
-            <p class="text-gray-600 text-xs">The pairing request will appear here — it may take a few moments</p>
+            <p class="text-body text-sm">Send a message to your bot on ${channelList}</p>
+            <p class="text-fg-dim text-xs">The pairing request will appear here — it may take a few moments</p>
           </div>`}
     </div>`;
 }

package/lib/public/js/components/pane-shell.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";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/pill-tabs.js

@@ -1,14 +1,14 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 
 const html = htm.bind(h);
 
 const kPillBaseClassName =
   "inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium transition-colors";
 const kPillActiveClassName =
-  "border-cyan-500/40 bg-cyan-500/10 text-cyan-200 shadow-[0_0_0_1px_rgba(34,211,238,0.08)]";
+  "border-cyan-500/40 bg-cyan-500/10 text-status-info shadow-[0_0_0_1px_rgba(34,211,238,0.08)]";
 const kPillInactiveClassName =
-  "border-border bg-black/20 text-gray-500 hover:border-gray-500 hover:text-gray-300";
+  "border-border bg-field text-fg-muted hover:border-fg-muted hover:text-body";
 
 export const PillTabs = ({
   tabs = [],

package/lib/public/js/components/pop-actions.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useEffect, useRef } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useEffect, useRef } from "preact/hooks";
+import htm from "htm";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/providers.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,
@@ -48,7 +48,7 @@ const FeatureTags = ({ provider, features = null }) => {
       ${uniqueFeatures.map(
         (f) => html`
           <span
-            class="text-xs px-1.5 py-0.5 rounded-md bg-white/5 text-gray-400"
+            class="text-xs px-1.5 py-0.5 rounded-md bg-white/5 text-fg-muted"
             >${f}</span
           >
         `,
@@ -353,7 +353,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
   const renderCredentialField = (field) => html`
     <div class="space-y-1">
       <div class="flex items-center gap-3">
-        <label class="text-xs font-medium text-gray-400">${field.label}</label>
+        <label class="text-xs font-medium text-fg-muted">${field.label}</label>
         ${field.url && !getKeyVal(envVars, field.key)
           ? html`<a
               href=${field.url}
@@ -369,10 +369,10 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
         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"
       />
       ${field.hint
-        ? html`<p class="text-xs text-gray-600">${field.hint}</p>`
+        ? html`<p class="text-xs text-fg-dim">${field.hint}</p>`
         : null}
     </div>
   `;
@@ -380,7 +380,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
   const renderCodexOAuth = () => 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}>`}
@@ -413,7 +413,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
             `
           : 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."}
@@ -428,9 +428,9 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
             `}
       ${!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"
+              <code class="text-xs bg-field px-1 rounded"
                 >http://localhost:1455/auth/callback</code
               >) and paste it here.
             </p>
@@ -439,7 +439,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
               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}
@@ -506,7 +506,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
           `}
         />
         <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 provider settings...
           </div>
@@ -555,7 +555,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
               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(
@@ -565,7 +565,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
               </option>`,
           )}
         </select>
-        <p class="text-xs text-gray-600">
+        <p class="text-xs text-fg-dim">
           ${modelsLoading
             ? "Loading model catalog..."
             : modelsError
@@ -586,7 +586,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
                       };
                       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"
@@ -623,7 +623,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
         : null}
       ${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/routes/agents-route.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 { AgentsTab } from "../agents-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/browse-route.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 { FileViewer } from "../file-viewer/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/cron-route.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 { CronTab } from "../cron-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/doctor-route.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 { DoctorTab } from "../doctor/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/envars-route.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 { Envars } from "../envars.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/general-route.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 { GeneralTab } from "../general/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/models-route.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 { Models } from "../models-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/nodes-route.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 { NodesTab } from "../nodes-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/providers-route.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 { Providers } from "../providers.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/route-redirect.js

@@ -1,5 +1,5 @@
-import { useEffect } from "https://esm.sh/preact/hooks";
-import { useLocation } from "https://esm.sh/wouter-preact";
+import { useEffect } from "preact/hooks";
+import { useLocation } from "wouter-preact";
 
 export const RouteRedirect = ({ to }) => {
   const [, setLocation] = useLocation();

package/lib/public/js/components/routes/telegram-route.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 { TelegramWorkspace } from "../telegram-workspace/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/usage-route.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 { UsageTab } from "../usage-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/watchdog-route.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 { WatchdogTab } from "../watchdog-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/webhooks-route.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 { Webhooks } from "../webhooks/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/scope-picker.js

@@ -1,6 +1,6 @@
-import { h } from 'https://esm.sh/preact';
-import { useState } from 'https://esm.sh/preact/hooks';
-import htm from 'https://esm.sh/htm';
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
 const html = htm.bind(h);
 
 export const SERVICES = [
@@ -43,19 +43,19 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       const api = status[s.key];
       let apiIndicator = null;
       if (loading && !api && (readOn || writeOn)) {
-        apiIndicator = html`<span class="text-gray-500 text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full ac-spinner"></span></span>`;
+        apiIndicator = html`<span class="text-fg-muted text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-fg-muted border-t-transparent rounded-full ac-spinner"></span></span>`;
       } else if (api) {
         if (api.status === 'ok') {
-          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-green-500 hover:text-green-300 text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;
+          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-status-success-muted hover:text-status-success text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;
         } else if (api.status === 'not_enabled') {
-          apiIndicator = html`<a href=${api.enableUrl} target="_blank" class="text-red-400 hover:text-red-300 text-xs underline">Enable API</a>`;
+          apiIndicator = html`<a href=${api.enableUrl} target="_blank" class="text-status-error-muted hover:text-status-error text-xs underline">Enable API</a>`;
         } else if (api.status === 'error') {
-          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-yellow-500 hover:text-yellow-300 text-xs underline">Enable API</a>`;
+          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-status-warning-muted hover:text-status-warning text-xs underline">Enable API</a>`;
         }
       }
 
       return html`
-        <div class="flex items-center justify-between bg-black/30 rounded-lg px-3 py-2">
+        <div class="flex items-center justify-between bg-field rounded-lg px-3 py-2">
           <span class="text-sm">${s.icon} ${s.label}</span>
           <div class="flex items-center gap-2">
             ${apiIndicator}
@@ -68,7 +68,7 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       <button
         type="button"
         onclick=${() => setShowAll((prev) => !prev)}
-        class="ml-3 text-xs text-gray-500 hover:text-gray-300"
+        class="ml-3 text-xs text-fg-muted hover:text-body"
       >
         ${showAll ? 'Show fewer services' : `Show more services (${SERVICES.length - kVisibleCount})`}
       </button>

package/lib/public/js/components/secret-input.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import htm from "htm";
 import { LoadingSpinner } from "./loading-spinner.js";
 const html = htm.bind(h);
 
@@ -38,14 +38,14 @@ export const SecretInput = ({
         autocomplete="off"
       />
       ${loading
-        ? html`<${LoadingSpinner} className="h-3 w-3 text-gray-500 shrink-0" />`
+        ? html`<${LoadingSpinner} className="h-3 w-3 text-fg-muted shrink-0" />`
         : null}
       ${showToggle
         ? html`<button
             type="button"
             onclick=${() => setVisible((v) => !v)}
             disabled=${isDisabled}
-            class="text-gray-500 hover:text-gray-300 px-1 text-xs shrink-0"
+            class="text-fg-muted hover:text-body px-1 text-xs shrink-0"
           >
             ${visible ? "Hide" : "Show"}
           </button>`

package/lib/public/js/components/segmented-control.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 { Tooltip } from "./tooltip.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/session-select-field.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 { getSessionRowKey } from "../lib/session-keys.js";
 
 const html = htm.bind(h);
@@ -20,11 +20,11 @@ export const SessionSelectField = ({
   emptyStateText = "",
   loadingLabel = "Loading sessions...",
   containerClassName = "space-y-2",
-  labelClassName = "text-xs text-gray-500",
-  selectClassName = "w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500",
-  helperClassName = "text-xs text-gray-500",
-  statusClassName = "text-xs text-gray-500",
-  errorClassName = "text-xs text-red-400",
+  labelClassName = "text-xs text-fg-muted",
+  selectClassName = "w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body focus:border-fg-muted",
+  helperClassName = "text-xs text-fg-muted",
+  statusClassName = "text-xs text-fg-muted",
+  errorClassName = "text-xs text-status-error-muted",
 }) => {
   const resolvedValue = selectedSessionKey || (allowNone ? noneValue : "");
   const isDisabled = disabled || loading;

package/lib/public/js/components/sidebar-git-panel.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import htm from "htm";
 import { fetchBrowseGitSummary, syncBrowseChanges } from "../lib/api.js";
 import { formatLocaleDateTime } from "../lib/format.js";
 import { ActionButton } from "./action-button.js";