@chrysb/alphaclaw 0.8.1 → 0.8.3-beta.0

package/lib/public/js/components/nodes-tab/exec-allowlist/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 { useExecAllowlist } from "./use-exec-allowlist.js";
 
@@ -13,7 +13,7 @@ export const NodeExecAllowlistCard = () => {
       <div class="flex items-center justify-between gap-2">
         <div class="space-y-1">
           <h3 class="font-semibold text-sm">Gateway Exec Allowlist</h3>
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Patterns here are used when <code>tools.exec.security</code> is set to
             <code>allowlist</code>.
           </p>
@@ -27,7 +27,7 @@ export const NodeExecAllowlistCard = () => {
         />
       </div>
 
-      ${state.error ? html`<div class="text-xs text-red-400">${state.error}</div>` : null}
+      ${state.error ? html`<div class="text-xs text-status-error-muted">${state.error}</div>` : null}
 
       <div class="flex items-center gap-2">
         <input
@@ -35,7 +35,7 @@ export const NodeExecAllowlistCard = () => {
           value=${state.patternInput}
           oninput=${(event) => state.setPatternInput(event.target.value)}
           placeholder="/usr/bin/sw_vers"
-          class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none"
+          class="flex-1 min-w-0 bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none"
           disabled=${state.loading || state.saving}
         />
         <${ActionButton}
@@ -49,25 +49,25 @@ export const NodeExecAllowlistCard = () => {
         />
       </div>
 
-      <div class="text-[11px] text-gray-500">
+      <div class="text-[11px] text-fg-muted">
         Supports wildcard patterns like <code>*</code>, <code>**</code>, and
         exact executable paths.
       </div>
 
       ${state.loading
-        ? html`<div class="text-xs text-gray-500">Loading allowlist...</div>`
+        ? html`<div class="text-xs text-fg-muted">Loading allowlist...</div>`
         : !state.allowlist.length
-          ? html`<div class="text-xs text-gray-500">No allowlist patterns configured.</div>`
+          ? html`<div class="text-xs text-fg-muted">No allowlist patterns configured.</div>`
           : html`
               <div class="space-y-2">
                 ${state.allowlist.map(
                   (entry) => html`
                     <div class="ac-surface-inset rounded-lg px-3 py-2 flex items-center justify-between gap-2">
                       <div class="min-w-0">
-                        <div class="text-xs font-mono text-gray-200 truncate">
+                        <div class="text-xs font-mono text-body truncate">
                           ${entry?.pattern || ""}
                         </div>
-                        <div class="text-[11px] text-gray-500 font-mono truncate">
+                        <div class="text-[11px] text-fg-muted font-mono truncate">
                           ${entry?.id || ""}
                         </div>
                       </div>

package/lib/public/js/components/nodes-tab/exec-allowlist/use-exec-allowlist.js

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

package/lib/public/js/components/nodes-tab/exec-config/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 { useExecConfig } from "./use-exec-config.js";
 
@@ -23,7 +23,7 @@ export const NodeExecConfigCard = ({
       <div class="flex items-center justify-between gap-2">
         <div class="space-y-1">
           <h3 class="font-semibold text-sm">Exec Routing</h3>
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Set where command execution runs and how strict approval policy should be.
           </p>
         </div>
@@ -36,16 +36,16 @@ export const NodeExecConfigCard = ({
         />
       </div>
 
-      ${state.error ? html`<div class="text-xs text-red-400">${state.error}</div>` : null}
+      ${state.error ? html`<div class="text-xs text-status-error-muted">${state.error}</div>` : null}
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Host</div>
+          <div class="text-xs text-fg-muted">Host</div>
           <select
             value=${state.config.host}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("host", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="gateway">gateway</option>
             <option value="node">node</option>
@@ -53,12 +53,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Security</div>
+          <div class="text-xs text-fg-muted">Security</div>
           <select
             value=${state.config.security}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("security", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="deny">deny</option>
             <option value="allowlist">allowlist</option>
@@ -67,12 +67,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Ask</div>
+          <div class="text-xs text-fg-muted">Ask</div>
           <select
             value=${state.config.ask}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("ask", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="off">off</option>
             <option value="on-miss">on-miss</option>
@@ -81,12 +81,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Node target</div>
+          <div class="text-xs text-fg-muted">Node target</div>
           <select
             value=${state.config.node}
             disabled=${state.loading || state.saving || state.config.host !== "node"}
             oninput=${(event) => state.updateField("node", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="">${availableNodeOptions.length ? "Select node..." : "No nodes available"}</option>
             ${availableNodeOptions.map(
@@ -98,7 +98,7 @@ export const NodeExecConfigCard = ({
         </label>
       </div>
 
-      <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-300">
+      <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-status-warning">
         Save applies config immediately, but gateway restart may still be required by OpenClaw.
       </div>
 

package/lib/public/js/components/nodes-tab/exec-config/use-exec-config.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { fetchNodeExecConfig, saveNodeExecConfig } from "../../../lib/api.js";
 import { showToast } from "../../toast.js";
 

package/lib/public/js/components/nodes-tab/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 { PageHeader } from "../page-header.js";
 import { ActionButton } from "../action-button.js";
 import { useNodesTab } from "./use-nodes-tab.js";

package/lib/public/js/components/nodes-tab/setup-wizard/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 { ModalShell } from "../../modal-shell.js";
 import { ActionButton } from "../../action-button.js";
 import { CloseIcon, FileCopyLineIcon } from "../../icons.js";
@@ -13,9 +13,9 @@ const html = htm.bind(h);
 const kWizardSteps = ["Install OpenClaw CLI", "Connect Node"];
 
 const renderCommandBlock = ({ command = "", onCopy = () => {} }) => html`
-  <div class="rounded-lg border border-border bg-black/30 p-3">
+  <div class="rounded-lg border border-border bg-field p-3">
     <pre
-      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-gray-300"
+      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-body"
     >
 ${command}</pre
     >
@@ -71,10 +71,10 @@ export const NodesSetupWizard = ({
         class="absolute top-6 right-6 h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
         aria-label="Close modal"
       >
-        <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+        <${CloseIcon} className="w-3.5 h-3.5 text-body" />
       </button>
 
-      <div class="text-xs text-gray-500">Node Setup Wizard</div>
+      <div class="text-xs text-fg-muted">Node Setup Wizard</div>
       <div class="flex items-center gap-1">
         ${kWizardSteps.map(
           (_label, idx) => html`
@@ -92,7 +92,7 @@ export const NodesSetupWizard = ({
       ${
         state.step === 0
           ? html`
-              <div class="text-xs text-gray-500">
+              <div class="text-xs text-fg-muted">
                 Install OpenClaw on the machine you want to connect as a node.
               </div>
               ${renderCommandBlock({
@@ -100,7 +100,7 @@ export const NodesSetupWizard = ({
                 onCopy: () =>
                   copyAndToast("npm install -g openclaw", "command"),
               })}
-              <div class="text-xs text-gray-500">Requires Node.js 22+.</div>
+              <div class="text-xs text-fg-muted">Requires Node.js 22+.</div>
             `
           : null
       }
@@ -110,22 +110,22 @@ export const NodesSetupWizard = ({
           ? html`
               <div class="space-y-2">
                 <label class="space-y-1 block">
-                  <div class="text-xs text-gray-500">Display name</div>
+                  <div class="text-xs text-fg-muted">Display name</div>
                   <input
                     type="text"
                     value=${state.displayName}
                     oninput=${(event) =>
                       state.setDisplayName(event.target.value)}
-                    class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none"
+                    class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none"
                   />
                 </label>
 
                 <div>
-                  <div class="text-xs text-gray-500 mb-1">
+                  <div class="text-xs text-fg-muted mb-1">
                     Run this on the device you want to connect:
                   </div>
                   ${state.loadingConnectInfo
-                    ? html`<div class="text-xs text-gray-500">
+                    ? html`<div class="text-xs text-fg-muted">
                         Loading command...
                       </div>`
                     : renderCommandBlock({
@@ -148,7 +148,7 @@ export const NodesSetupWizard = ({
                       !state.selectedPairedNode.connected
                     ? html`
                         <div
-                          class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-200"
+                          class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-status-warning"
                         >
                           Node is paired but currently disconnected. Run the
                           node command again on your device, then Finish will
@@ -157,7 +157,7 @@ export const NodesSetupWizard = ({
                       `
                     : html`
                         <div
-                          class="rounded-lg border border-border bg-black/20 px-3 py-2 text-xs text-gray-400"
+                          class="rounded-lg border border-border bg-field px-3 py-2 text-xs text-fg-muted"
                         >
                           Pairing request will show up here. Checks every 3s.
                         </div>

package/lib/public/js/components/nodes-tab/setup-wizard/use-setup-wizard.js

@@ -4,7 +4,7 @@ import {
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import {
   approveDevice,
   fetchDevicePairings,

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { fetchNodeConnectInfo } from "../../lib/api.js";
 import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 import { showToast } from "../toast.js";

package/lib/public/js/components/onboarding/use-welcome-codex.js

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

package/lib/public/js/components/onboarding/use-welcome-pairing.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { approvePairing, fetchPairings, fetchStatus, rejectPairing } from "../../lib/api.js";
 import { usePolling } from "../../hooks/usePolling.js";
 import { isChannelPaired } from "./pairing-utils.js";

package/lib/public/js/components/onboarding/use-welcome-storage.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { kOnboardingStorageKey } from "../../lib/storage-keys.js";
 export { kOnboardingStorageKey };

package/lib/public/js/components/onboarding/welcome-config.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 { kAllAiAuthFields } from "../../lib/model-config.js";
 
 const html = htm.bind(h);
@@ -52,7 +52,7 @@ export const kWelcomeGroups = [
             class="hover:underline"
             style="color: var(--accent-link)"
             >classic PAT</a
-          >${" "}with${" "}<code class="text-xs bg-black/30 px-1 rounded"
+          >${" "}with${" "}<code class="text-xs bg-field px-1 rounded"
             >repo</code
           >${" "}scope, or a${" "}<a
             href="https://github.com/settings/personal-access-tokens/new"

package/lib/public/js/components/onboarding/welcome-form-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 { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
@@ -92,7 +92,7 @@ export const WelcomeFormStep = ({
 
   const renderStandardField = (field) => html`
     <div class="space-y-1" key=${field.key}>
-      <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}
         key=${field.key}
         value=${vals[field.key] || ""}
@@ -101,9 +101,9 @@ export const WelcomeFormStep = ({
           ? githubTokenPlaceholder
           : field.placeholder || ""}
         isSecret=${!field.isText}
-        inputClass="flex-1 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 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">
+      <p class="text-xs text-fg-dim">
         ${activeGroup.id === "github" &&
         field.key === "GITHUB_WORKSPACE_REPO"
           ? githubFlow === kGithubFlowImport
@@ -117,25 +117,25 @@ export const WelcomeFormStep = ({
               ? githubFlow === kGithubFlowImport
                 ? freshRepoMode === kGithubTargetRepoModeCreate
                   ? html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope to create the target repo. Fine-grained
                       works if the target already exists and can access both
                       repos.`
                   : html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope, or a fine-grained token with Contents +
                       Metadata access to both the source repo and target
                       repo`
                 : freshRepoMode === kGithubTargetRepoModeExistingEmpty
                   ? html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope, or a fine-grained token with Contents +
                       Metadata access to this repo`
                   : html`Use a classic PAT with${" "}<code
-                        class="text-xs bg-black/30 px-1 rounded"
+                        class="text-xs bg-field px-1 rounded"
                         >repo</code
                       >${" "}scope to create a new private repository`
               : field.hint}
@@ -165,11 +165,11 @@ export const WelcomeFormStep = ({
           String(vals[fieldKey] || "").trim(),
         );
         return html`
-          <div class="bg-black/20 border border-border rounded-lg overflow-hidden">
+          <div class="bg-field border border-border rounded-lg overflow-hidden">
             <button
               type="button"
               onclick=${() => toggleChannelSection(section.id)}
-              class="w-full flex items-center justify-between gap-2 px-3 py-2 text-left hover:bg-white/5"
+              class="w-full flex items-center justify-between gap-2 px-3 py-2 text-left hover:bg-surface"
             >
               <span class="inline-flex items-center gap-2 min-w-0">
                 ${channelMeta.iconSrc
@@ -180,7 +180,7 @@ export const WelcomeFormStep = ({
                       aria-hidden="true"
                     />`
                   : null}
-                <span class="text-sm text-gray-200">${section.title}</span>
+                <span class="text-sm text-body">${section.title}</span>
                 ${hasValue
                   ? html`<${Badge} tone="success">Configured</${Badge}>`
                   : null}
@@ -206,17 +206,17 @@ export const WelcomeFormStep = ({
   return html`
     <div class="flex items-center justify-between">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">${activeGroup.title}</h2>
-        <p class="text-xs text-gray-500">${activeGroup.description}</p>
+        <h2 class="text-sm font-medium text-body">${activeGroup.title}</h2>
+        <p class="text-xs text-fg-muted">${activeGroup.description}</p>
       </div>
       ${activeGroup.validate(vals, { hasAi })
         ? html`<span
-            class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-900/50 text-green-400"
+            class="text-xs font-medium px-2 py-0.5 rounded-full bg-status-success-bg text-status-success"
             >✓</span
           >`
         : activeGroup.id !== "tools"
           ? html`<span
-              class="text-xs font-medium px-2 py-0.5 rounded-full bg-yellow-900/50 text-yellow-400"
+              class="text-xs font-medium px-2 py-0.5 rounded-full bg-status-warning-bg text-status-warning-muted"
               >Required</span
             >`
           : null}
@@ -225,11 +225,11 @@ export const WelcomeFormStep = ({
     ${activeGroup.id === "ai" &&
     html`
       <div class="space-y-1">
-        <label class="text-xs font-medium text-gray-400">Model</label>
+        <label class="text-xs font-medium text-fg-muted">Model</label>
         <select
           value=${vals.MODEL_KEY || ""}
           onInput=${(e) => setValue("MODEL_KEY", e.target.value)}
-          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(
@@ -238,7 +238,7 @@ export const WelcomeFormStep = ({
             `,
           )}
         </select>
-        <p class="text-xs text-gray-600">
+        <p class="text-xs text-fg-dim">
           ${modelsLoading
             ? "Loading model catalog..."
             : modelsError
@@ -250,7 +250,7 @@ export const WelcomeFormStep = ({
           <button
             type="button"
             onclick=${() => setShowAllModels((prev) => !prev)}
-            class="text-xs text-gray-500 hover:text-gray-300"
+            class="text-xs text-fg-muted hover:text-body"
           >
             ${showAllModels
               ? "Show recommended models"
@@ -262,11 +262,11 @@ export const WelcomeFormStep = ({
     ${activeGroup.id === "ai" &&
     selectedProvider === "openai-codex" &&
     html`
-      <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
+      <div class="bg-field 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>
           ${codexLoading
-            ? html`<span class="text-xs text-gray-500">Checking...</span>`
+            ? html`<span class="text-xs text-fg-muted">Checking...</span>`
             : codexStatus.connected
               ? html`<${Badge} tone="success">Connected</${Badge}>`
               : html`<${Badge} tone="warning">Not connected</${Badge}>`}
@@ -298,11 +298,11 @@ export const WelcomeFormStep = ({
         codexAuthStarted &&
         html`
           <div class="space-y-1 pt-1">
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-fg-muted">
               ${codexAuthWaiting
                 ? "Complete login in the popup, then paste the full redirect URL from the address bar (starts with "
                 : "Paste the full redirect URL from the address bar (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
               >) ${codexAuthWaiting ? " to finish setup." : " to finish setup."}
             </p>
@@ -311,7 +311,7 @@ export const WelcomeFormStep = ({
               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}
@@ -370,7 +370,7 @@ export const WelcomeFormStep = ({
         ).map((field) => renderStandardField(field))}
     ${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>`
@@ -379,7 +379,7 @@ export const WelcomeFormStep = ({
       ? html`
           ${showOptionalOpenai
             ? html`<div class="space-y-1">
-                <label class="text-xs font-medium text-gray-400"
+                <label class="text-xs font-medium text-fg-muted"
                   >OpenAI API Key</label
                 >
                 <${SecretInput}
@@ -387,9 +387,9 @@ export const WelcomeFormStep = ({
                   onInput=${(e) => setValue("OPENAI_API_KEY", e.target.value)}
                   placeholder="sk-..."
                   isSecret=${true}
-                  inputClass="flex-1 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 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">
+                <p class="text-xs text-fg-dim">
                   Used for memory embeddings -${" "}
                   <a
                     href="https://platform.openai.com"
@@ -403,7 +403,7 @@ export const WelcomeFormStep = ({
             : null}
           ${showOptionalGemini
             ? html`<div class="space-y-1">
-                <label class="text-xs font-medium text-gray-400"
+                <label class="text-xs font-medium text-fg-muted"
                   >Gemini API Key</label
                 >
                 <${SecretInput}
@@ -411,9 +411,9 @@ export const WelcomeFormStep = ({
                   onInput=${(e) => setValue("GEMINI_API_KEY", e.target.value)}
                   placeholder="AI..."
                   isSecret=${true}
-                  inputClass="flex-1 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 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">
+                <p class="text-xs text-fg-dim">
                   Used for memory embeddings and Nano Banana -${" "}
                   <a
                     href="https://aistudio.google.com"

package/lib/public/js/components/onboarding/welcome-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);