@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/app.js

@@ -1,12 +1,12 @@
-import { h, render } from "https://esm.sh/preact";
-import { useState, useEffect } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h, render } from "preact";
+import { useState, useEffect } from "preact/hooks";
+import htm from "htm";
 import {
   Router,
   Route,
   Switch,
   useLocation,
-} from "https://esm.sh/wouter-preact";
+} from "wouter-preact";
 import { logout } from "./lib/api.js";
 import { Welcome } from "./components/welcome/index.js";
 import { ToastContainer } from "./components/toast.js";

package/lib/public/js/components/action-button.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 { LoadingSpinner } from "./loading-spinner.js";
 
 const html = htm.bind(h);
@@ -15,18 +15,18 @@ const kStaticToneClassByTone = {
 const getToneClass = (tone, isInteractive) => {
   if (tone === "subtle") {
     return isInteractive
-      ? "border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
-      : "border border-border text-gray-500";
+      ? "border border-border text-fg-muted hover:text-body hover:border-fg-muted"
+      : "border border-border text-fg-muted";
   }
   if (tone === "neutral") {
     return isInteractive
-      ? "border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
-      : "border border-border text-gray-500";
+      ? "border border-border text-fg-muted hover:text-body hover:border-fg-muted"
+      : "border border-border text-fg-muted";
   }
   if (tone === "warning") {
     return isInteractive
-      ? "border border-yellow-500/35 text-yellow-400 bg-yellow-500/10 hover:border-yellow-400/60 hover:text-yellow-300 hover:bg-yellow-500/15"
-      : "border border-yellow-500/35 text-yellow-400 bg-yellow-500/10";
+      ? "border border-yellow-500/35 text-status-warning-muted bg-yellow-500/10 hover:border-yellow-400/60 hover:text-status-warning hover:bg-yellow-500/15"
+      : "border border-yellow-500/35 text-status-warning-muted bg-yellow-500/10";
   }
   return kStaticToneClassByTone[tone] || kStaticToneClassByTone.primary;
 };

package/lib/public/js/components/add-channel-menu.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 { AddLineIcon } from "./icons.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";

package/lib/public/js/components/agent-send-modal.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 { ModalShell } from "./modal-shell.js";
 import { ActionButton } from "./action-button.js";
 import { PageHeader } from "./page-header.js";
@@ -80,7 +80,7 @@ export const AgentSendModal = ({
             class="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>
         `}
       />
@@ -95,14 +95,14 @@ export const AgentSendModal = ({
         emptyOptionLabel="No sessions available"
       />
       <div class="space-y-2">
-        <label class="text-xs text-gray-500">${messageLabel}</label>
+        <label class="text-xs text-fg-muted">${messageLabel}</label>
         <textarea
           value=${messageText}
           onInput=${(event) =>
             setMessageText(String(event.currentTarget?.value || ""))}
           disabled=${sending}
           rows=${messageRows}
-          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500 font-mono leading-5"
+          class="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body focus:border-fg-muted font-mono leading-5"
         ></textarea>
       </div>
       <div class="flex items-center justify-end gap-2">

package/lib/public/js/components/agents-tab/agent-bindings-section/channel-item-trailing.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 { Badge } from "../../badge.js";
 import { ChannelAccountStatusBadge } from "../../channel-account-status-badge.js";
 import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
@@ -118,7 +118,7 @@ export const ChannelItemTrailing = ({
         ${canEditOrDelete
           ? html`
               <${OverflowMenuItem}
-                className="text-red-300 hover:text-red-200"
+                className="text-status-error hover:text-status-error"
                 onClick=${() => openDeleteChannelDialog(accountData)}
               >
                 Delete
@@ -146,7 +146,7 @@ export const ChannelCardItem = ({
     <div
       key=${item.id || item.channel}
       class="flex justify-between items-center py-1.5 ${canOpenWorkspace
-        ? "cursor-pointer hover:bg-white/5 -mx-2 px-2 rounded-lg transition-colors"
+        ? "cursor-pointer hover:bg-surface -mx-2 px-2 rounded-lg transition-colors"
         : ""}"
       onclick=${canOpenWorkspace
         ? () => onSetLocation(`/telegram/${encodeURIComponent(accountId)}`)
@@ -163,18 +163,18 @@ export const ChannelCardItem = ({
               />
             `
           : null}
-        <span class="truncate ${item?.dimmedLabel ? "text-gray-500" : ""} ${item?.labelClassName || ""}">
+        <span class="truncate ${item?.dimmedLabel ? "text-fg-muted" : ""} ${item?.labelClassName || ""}">
           ${item?.label || channelMeta?.label || "Channel"}
         </span>
         ${canOpenWorkspace
           ? html`
-              <span class="text-xs text-gray-500 ml-1 shrink-0">Workspace</span>
+              <span class="text-xs text-fg-muted ml-1 shrink-0">Workspace</span>
               <svg
                 width="14"
                 height="14"
                 viewBox="0 0 16 16"
                 fill="none"
-                class="text-gray-600 shrink-0"
+                class="text-fg-dim shrink-0"
               >
                 <path
                   d="M6 3.5L10.5 8L6 12.5"

package/lib/public/js/components/agents-tab/agent-bindings-section/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 { isChannelProviderDisabledForAdd } from "../../../lib/channel-provider-availability.js";
 import { AddChannelMenu } from "../../add-channel-menu.js";
 import { ActionButton } from "../../action-button.js";
@@ -162,7 +162,7 @@ export const AgentBindingsSection = ({
         message=""
         details=${pendingBindAccount
           ? html`
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-fg-muted">
                 This will remove access for ${String(
                   pendingBindAccount?.ownerAgentName || "the other agent",
                 ).trim()} to this channel.

package/lib/public/js/components/agents-tab/agent-bindings-section/use-agent-bindings.js

@@ -3,7 +3,7 @@ import {
   useEffect,
   useMemo,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import {
   deleteChannelAccount,
   fetchChannelAccounts,

package/lib/public/js/components/agents-tab/agent-bindings-section/use-channel-items.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import {
   canAgentBindAccount,
   getChannelItemSortRank,
@@ -186,7 +186,7 @@ export const useChannelItems = ({
       onClick: () => setShowAssignedElsewhere((current) => !current),
       dimmedLabel: true,
       trailing: html`
-        <span class="inline-flex items-center gap-1.5 text-gray-500">
+        <span class="inline-flex items-center gap-1.5 text-fg-muted">
           <span class="text-[11px] px-2 py-0.5 rounded-full border border-border">
             ${assignedElsewhereItems.length}
           </span>

package/lib/public/js/components/agents-tab/agent-detail-panel.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useCallback, useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useCallback, useMemo } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
 import { PillTabs } from "../pill-tabs.js";
@@ -92,7 +92,7 @@ export const AgentDetailPanel = ({
                 </span>
                 <button
                   type="button"
-                  class="text-gray-500 hover:text-gray-300 transition-colors p-0.5 -ml-0.5"
+                  class="text-fg-muted hover:text-body transition-colors p-0.5 -ml-0.5"
                   onclick=${() => onEdit(agent)}
                   title="Edit agent name"
                 >
@@ -102,7 +102,7 @@ export const AgentDetailPanel = ({
                   ? html`<${Badge} tone="cyan">Default</${Badge}>`
                   : null}
               </div>
-              <div class="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 min-w-0 text-xs text-gray-500">
+              <div class="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 min-w-0 text-xs text-fg-muted">
                 <span class="font-mono">${agent.id}</span>
               </div>
             </div>

package/lib/public/js/components/agents-tab/agent-identity-section.js

@@ -1,14 +1,14 @@
-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 { ActionButton } from "../action-button.js";
 
 const html = htm.bind(h);
 
 const kPropertyRowClass =
   "flex items-start justify-between gap-4 py-2.5 border-b border-border last:border-b-0";
-const kLabelClass = "text-xs text-gray-400 shrink-0 w-28";
-const kValueClass = "text-sm text-gray-200 text-right min-w-0 break-all";
+const kLabelClass = "text-xs text-fg-muted shrink-0 w-28";
+const kValueClass = "text-sm text-body text-right min-w-0 break-all";
 
 const normalizeIdentity = (identity = {}) => ({
   name: String(identity?.name || "").trim(),
@@ -100,46 +100,46 @@ export const AgentIdentitySection = ({
         ? html`
             <div class="space-y-3">
               <label class="block space-y-1">
-                <span class="text-xs text-gray-400">Identity name</span>
+                <span class="text-xs text-fg-muted">Identity name</span>
                 <input
                   type="text"
                   value=${form.name}
                   onInput=${(event) => updateField("name", event.target.value)}
-                  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"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted"
                   placeholder="Optional persona name"
                 />
               </label>
               <label class="block space-y-1">
-                <span class="text-xs text-gray-400">Emoji</span>
+                <span class="text-xs text-fg-muted">Emoji</span>
                 <input
                   type="text"
                   value=${form.emoji}
                   onInput=${(event) => updateField("emoji", event.target.value)}
-                  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"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted"
                   placeholder="Optional emoji"
                 />
               </label>
               <label class="block space-y-1">
-                <span class="text-xs text-gray-400">Avatar</span>
+                <span class="text-xs text-fg-muted">Avatar</span>
                 <input
                   type="text"
                   value=${form.avatar}
                   onInput=${(event) => updateField("avatar", event.target.value)}
-                  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"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted"
                   placeholder="Workspace-relative path, URL, or data URI"
                 />
               </label>
               <label class="block space-y-1">
-                <span class="text-xs text-gray-400">Theme</span>
+                <span class="text-xs text-fg-muted">Theme</span>
                 <input
                   type="text"
                   value=${form.theme}
                   onInput=${(event) => updateField("theme", event.target.value)}
-                  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"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted"
                   placeholder="Optional persona theme"
                 />
               </label>
-              ${error ? html`<p class="text-xs text-red-400">${error}</p>` : null}
+              ${error ? html`<p class="text-xs text-status-error-muted">${error}</p>` : null}
             </div>
           `
         : html`
@@ -147,25 +147,25 @@ export const AgentIdentitySection = ({
               <div class=${kPropertyRowClass}>
                 <span class=${kLabelClass}>Name</span>
                 <span class=${kValueClass}>
-                  ${identity.name || html`<span class="text-gray-500">—</span>`}
+                  ${identity.name || html`<span class="text-fg-muted">—</span>`}
                 </span>
               </div>
               <div class=${kPropertyRowClass}>
                 <span class=${kLabelClass}>Emoji</span>
                 <span class=${kValueClass}>
-                  ${identity.emoji || html`<span class="text-gray-500">—</span>`}
+                  ${identity.emoji || html`<span class="text-fg-muted">—</span>`}
                 </span>
               </div>
               <div class=${kPropertyRowClass}>
                 <span class=${kLabelClass}>Avatar</span>
                 <span class="${kValueClass} font-mono">
-                  ${identity.avatar || html`<span class="text-gray-500">—</span>`}
+                  ${identity.avatar || html`<span class="text-fg-muted">—</span>`}
                 </span>
               </div>
               <div class=${kPropertyRowClass}>
                 <span class=${kLabelClass}>Theme</span>
                 <span class=${kValueClass}>
-                  ${identity.theme || html`<span class="text-gray-500">—</span>`}
+                  ${identity.theme || html`<span class="text-fg-muted">—</span>`}
                 </span>
               </div>
             </div>

package/lib/public/js/components/agents-tab/agent-overview/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 { ChannelOperationsPanel } from "../../channel-operations-panel.js";
 import { ManageCard } from "./manage-card.js";
 import { AgentModelCard } from "./model-card.js";

package/lib/public/js/components/agents-tab/agent-overview/manage-card.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";
 
 const html = htm.bind(h);

package/lib/public/js/components/agents-tab/agent-overview/model-card.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 { Badge } from "../../badge.js";
 import { LoadingSpinner } from "../../loading-spinner.js";
 import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
@@ -81,13 +81,13 @@ export const AgentModelCard = ({
       </div>
       ${loading
         ? html`
-            <div class="flex items-center gap-2 text-sm text-gray-400 py-1">
+            <div class="flex items-center gap-2 text-sm text-fg-muted py-1">
               <${LoadingSpinner} className="h-4 w-4" />
               Loading model settings...
             </div>
           `
         : modelEntries.length === 0
-          ? html`<p class="text-xs text-gray-500">
+          ? html`<p class="text-xs text-fg-muted">
               No authorized models available yet. Add one from the Models tab
               first.
             </p>`
@@ -100,7 +100,7 @@ export const AgentModelCard = ({
                       class="flex items-center justify-between py-1"
                     >
                       <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">
                           ${getModelDisplayLabel(entry)}
                         </span>
                         ${entry.key === effectiveModel
@@ -109,7 +109,7 @@ export const AgentModelCard = ({
                               <button
                                 type="button"
                                 onclick=${() => handleSelectModel(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>
@@ -139,13 +139,13 @@ export const AgentModelCard = ({
                 />
                 ${authorizedModelOptions.length === 0
                   ? html`
-                      <p class="text-xs text-gray-500">
+                      <p class="text-xs text-fg-muted">
                         Add and authorize models from the Models tab before
                         assigning one here.
                       </p>
                     `
                   : html`
-                      <p class="text-xs text-gray-500">
+                      <p class="text-xs text-fg-muted">
                         Only models that already have working auth are
                         available here.
                       </p>

package/lib/public/js/components/agents-tab/agent-overview/tools-card.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 { kProfileLabels } from "../agent-tools/tool-catalog.js";
 
 const html = htm.bind(h);
@@ -16,7 +16,7 @@ export const AgentToolsCard = ({
     <div class="bg-surface border border-border rounded-xl p-4">
       <h2 class="card-label mb-3">Tools</h2>
       <div
-        class="flex items-center justify-between gap-3 cursor-pointer hover:bg-white/5 -mx-2 px-2 py-1.5 rounded-lg transition-colors"
+        class="flex items-center justify-between gap-3 cursor-pointer hover:bg-surface -mx-2 px-2 py-1.5 rounded-lg transition-colors"
         role="button"
         tabindex="0"
         onclick=${onSwitchToTools}
@@ -29,7 +29,7 @@ export const AgentToolsCard = ({
       >
         <span class="font-medium text-sm">${profileLabel}</span>
         <span class="flex items-center gap-2 shrink-0">
-          <span class="text-xs text-gray-500">
+          <span class="text-xs text-fg-muted">
             ${enabledCount}/${totalCount} enabled
           </span>
           <svg
@@ -37,7 +37,7 @@ export const AgentToolsCard = ({
             height="14"
             viewBox="0 0 16 16"
             fill="none"
-            class="text-gray-600"
+            class="text-fg-dim"
           >
             <path
               d="M6 3.5L10.5 8L6 12.5"

package/lib/public/js/components/agents-tab/agent-overview/use-model-card.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { useModels } from "../../models-tab/use-models.js";
 import {
   buildProviderHasAuth,

package/lib/public/js/components/agents-tab/agent-overview/use-workspace-card.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { fetchAgentWorkspaceSize } from "../../../lib/api.js";
 
 export const useWorkspaceCard = ({ agent = {} }) => {

package/lib/public/js/components/agents-tab/agent-overview/workspace-card.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 { formatBytes } from "../../../lib/format.js";
 import { useWorkspaceCard } from "./use-workspace-card.js";
 
@@ -30,7 +30,7 @@ export const WorkspaceCard = ({
               >
                 ${agent.workspace}
               </button>
-              <div class="text-xs text-gray-500 md:shrink-0 md:text-right">
+              <div class="text-xs text-fg-muted md:shrink-0 md:text-right">
                 ${loadingWorkspaceSize
                   ? "Calculating size..."
                   : workspaceSizeBytes != null
@@ -41,7 +41,7 @@ export const WorkspaceCard = ({
               </div>
             </div>
           `
-        : html`<p class="text-sm text-gray-500">No workspace configured</p>`}
+        : html`<p class="text-sm text-fg-muted">No workspace configured</p>`}
     </div>
   `;
 };

package/lib/public/js/components/agents-tab/agent-pairing-section.js

@@ -1,12 +1,12 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import { Pairings } from "../pairings.js";
 import { usePolling } from "../../hooks/usePolling.js";
 import {
@@ -293,7 +293,7 @@ export const AgentPairingSection = ({ agent = {} }) => {
     return html`
       <div class="bg-surface border border-border rounded-xl p-4">
         <h3 class="card-label mb-3">Pairing</h3>
-        <p class="text-sm text-gray-500">Loading pairing status...</p>
+        <p class="text-sm text-fg-muted">Loading pairing status...</p>
       </div>
     `;
   }

package/lib/public/js/components/agents-tab/agent-tools/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 { ToggleSwitch } from "../../toggle-switch.js";
 import { InfoTooltip } from "../../info-tooltip.js";
 import { SegmentedControl } from "../../segmented-control.js";
@@ -23,13 +23,13 @@ const kProfileOptions = kToolProfiles.map((p) => ({
 const ToolRow = ({ tool, onToggle }) => html`
   <div class="flex items-center justify-between gap-3 py-2.5 px-4">
     <div class="min-w-0">
-      <div class="text-sm text-gray-200 flex items-center gap-1.5">
+      <div class="text-sm text-body flex items-center gap-1.5">
         <span>${tool.label}</span>
         ${tool.help
           ? html`<${InfoTooltip} text=${tool.help} widthClass="w-72" />`
           : null}
       </div>
-      <span class="text-xs font-mono text-gray-500">${tool.id}</span>
+      <span class="text-xs font-mono text-fg-muted">${tool.id}</span>
     </div>
     <${ToggleSwitch}
       checked=${tool.enabled}
@@ -72,7 +72,7 @@ export const AgentToolsPanel = ({ agent = {}, tools = {} }) => {
         <div>
           <div class="flex items-center justify-between mb-3">
             <h3 class="card-label text-xs">Preset</h3>
-            <span class="text-xs text-gray-500"
+            <span class="text-xs text-fg-muted"
               >${enabledTotal}/${totalTools} tools enabled</span
             >
           </div>

package/lib/public/js/components/agents-tab/agent-tools/use-agent-tools.js

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

package/lib/public/js/components/agents-tab/create-agent-modal.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { CloseIcon } from "../icons.js";
 import { ModalShell } from "../modal-shell.js";
@@ -112,25 +112,25 @@ export const CreateAgentModal = ({
             class="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="space-y-3">
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">Display name</span>
+          <span class="text-xs text-fg-muted">Display name</span>
           <input
             type="text"
             value=${displayName}
             onInput=${(event) => setDisplayName(event.target.value)}
             placeholder="Ops Agent"
-            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"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body outline-none focus:border-fg-muted"
           />
         </label>
 
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">Agent ID</span>
+          <span class="text-xs text-fg-muted">Agent ID</span>
           <input
             type="text"
             value=${agentId}
@@ -139,14 +139,14 @@ export const CreateAgentModal = ({
               setAgentId(slugifyAgentId(event.target.value));
             }}
             placeholder="ops-agent"
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm font-mono text-gray-200 outline-none focus:border-gray-500"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-body outline-none focus:border-fg-muted"
           />
         </label>
 
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">Workspace folder</span>
-          <div class="flex items-center bg-black/30 border border-border rounded-lg focus-within:border-gray-500">
-            <span class="px-3 py-2 text-xs font-mono text-gray-500 border-r border-border">
+          <span class="text-xs text-fg-muted">Workspace folder</span>
+          <div class="flex items-center bg-field border border-border rounded-lg focus-within:border-fg-muted">
+            <span class="px-3 py-2 text-xs font-mono text-fg-muted border-r border-border">
               .openclaw/workspace-
             </span>
             <input
@@ -157,12 +157,12 @@ export const CreateAgentModal = ({
                 setWorkspaceSuffix(slugifyAgentId(event.target.value));
               }}
               placeholder="ops-agent"
-              class="flex-1 bg-transparent px-3 py-2 text-sm font-mono text-gray-200 outline-none"
+              class="flex-1 bg-transparent px-3 py-2 text-sm font-mono text-body outline-none"
             />
           </div>
         </label>
 
-        ${error ? html`<p class="text-xs text-red-400">${error}</p>` : null}
+        ${error ? html`<p class="text-xs text-status-error-muted">${error}</p>` : null}
       </div>
 
       <div class="flex justify-end gap-2 pt-1">