@chrysb/alphaclaw 0.8.1 → 0.8.3-beta.0

package/lib/public/js/components/watchdog-tab/terminal/use-terminal.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { closeWatchdogTerminalSession } from "../../../lib/api.js";
 import { showToast } from "../../toast.js";
 import {
@@ -8,6 +8,33 @@ import {
   loadXtermModules,
 } from "../helpers.js";
 
+const waitForTerminalHost = ({
+  hostRef = null,
+  panelRef = null,
+  maxFrames = 8,
+} = {}) =>
+  new Promise((resolve, reject) => {
+    let framesRemaining = Math.max(1, Number(maxFrames) || 1);
+
+    const check = () => {
+      if (hostRef?.current && panelRef?.current) {
+        resolve({
+          hostElement: hostRef.current,
+          panelElement: panelRef.current,
+        });
+        return;
+      }
+      framesRemaining -= 1;
+      if (framesRemaining <= 0) {
+        reject(new Error("Terminal host not ready"));
+        return;
+      }
+      window.requestAnimationFrame(check);
+    };
+
+    check();
+  });
+
 export const useWatchdogTerminal = ({
   active = false,
   panelRef = null,
@@ -37,9 +64,14 @@ export const useWatchdogTerminal = ({
       try {
         setConnectingTerminal(true);
         ensureXtermStylesheet();
-        const [{ Terminal }, { FitAddon }] = await loadXtermModules();
+        const { Terminal, FitAddon } = await loadXtermModules();
         if (cancelled) return;
-        if (!terminalInstanceRef.current && hostRef?.current) {
+        const { hostElement } = await waitForTerminalHost({
+          hostRef,
+          panelRef,
+        });
+        if (cancelled) return;
+        if (!terminalInstanceRef.current) {
           const terminal = new Terminal({
             cursorBlink: true,
             fontFamily:
@@ -56,7 +88,7 @@ export const useWatchdogTerminal = ({
           });
           const fitAddon = new FitAddon();
           terminal.loadAddon(fitAddon);
-          terminal.open(hostRef.current);
+          terminal.open(hostElement);
           fitAddon.fit();
           terminal.attachCustomKeyEventHandler((event) => {
             if (event.type !== "keydown") return true;
@@ -161,12 +193,16 @@ export const useWatchdogTerminal = ({
           setTerminalStatusText("Connection error");
           showToast("Watchdog terminal connection failed", "error");
         };
-      } catch {
+      } catch (error) {
         if (cancelled) return;
         setConnectingTerminal(false);
         setTerminalUiSettling(false);
         setTerminalConnected(false);
         setTerminalStatusText("Terminal failed to load");
+        console.error(
+          `[watchdog-terminal] initialization failed: ${error?.message || "unknown error"}`,
+          error,
+        );
         showToast("Could not initialize terminal", "error");
       }
     };

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

@@ -36,6 +36,7 @@ export const useWatchdogTab = ({
     isRepairInProgress: settings.isRepairInProgress,
     logs: consoleState.logs,
     loadingLogs: consoleState.loadingLogs,
+    copyingAll: consoleState.copyingAll,
     stickToBottom: consoleState.stickToBottom,
     setStickToBottom: consoleState.setStickToBottom,
     activeConsoleTab: consoleState.activeConsoleTab,
@@ -51,5 +52,6 @@ export const useWatchdogTab = ({
     terminalPanelRef: consoleState.terminalPanelRef,
     terminalHostRef: consoleState.terminalHostRef,
     terminalInstanceRef: consoleState.terminalInstanceRef,
+    onCopyAll: consoleState.onCopyAll,
   };
 };

package/lib/public/js/components/webhooks/create-webhook-modal/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 {
   kNoDestinationSessionValue,
   useDestinationSessionSelection,
@@ -61,18 +61,18 @@ export const CreateWebhookModal = ({
             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-2">
-        <p class="text-xs text-gray-500">Endpoint mode</p>
+        <p class="text-xs text-fg-muted">Endpoint mode</p>
         <div class="flex items-center gap-2">
           <button
             class="text-xs px-2 py-1 rounded border transition-colors ${mode ===
             "webhook"
-              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-              : "border-border text-gray-400 hover:text-gray-200"}"
+              ? "border-cyan-400 text-status-info bg-cyan-400/10"
+              : "border-border text-fg-muted hover:text-body"}"
             onclick=${() => onModeChange("webhook")}
           >
             Webhook
@@ -80,8 +80,8 @@ export const CreateWebhookModal = ({
           <button
             class="text-xs px-2 py-1 rounded border transition-colors ${mode ===
             "oauth"
-              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-              : "border-border text-gray-400 hover:text-gray-200"}"
+              ? "border-cyan-400 text-status-info bg-cyan-400/10"
+              : "border-border text-fg-muted hover:text-body"}"
             onclick=${() => onModeChange("oauth")}
           >
             OAuth Callback
@@ -89,7 +89,7 @@ export const CreateWebhookModal = ({
         </div>
       </div>
       <div class="space-y-2">
-        <p class="text-xs text-gray-500">Name</p>
+        <p class="text-xs text-fg-muted">Name</p>
         <input
           type="text"
           value=${name}
@@ -101,7 +101,7 @@ export const CreateWebhookModal = ({
             }
             if (e.key === "Escape") onClose();
           }}
-          class="w-full bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+          class="w-full bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono"
         />
       </div>
       <${SessionSelectField}
@@ -122,20 +122,20 @@ export const CreateWebhookModal = ({
         <table class="w-full text-xs">
           <tbody>
             <tr class="border-b border-border">
-              <td class="w-24 px-3 py-2 text-gray-500">Path</td>
-              <td class="px-3 py-2 text-gray-300 font-mono">
+              <td class="w-24 px-3 py-2 text-fg-muted">Path</td>
+              <td class="px-3 py-2 text-body font-mono">
                 <code>${previewPath}</code>
               </td>
             </tr>
             <tr class="border-b border-border">
-              <td class="w-24 px-3 py-2 text-gray-500">URL</td>
-              <td class="px-3 py-2 text-gray-300 font-mono break-all">
+              <td class="w-24 px-3 py-2 text-fg-muted">URL</td>
+              <td class="px-3 py-2 text-body font-mono break-all">
                 <code>${previewUrl}</code>
               </td>
             </tr>
             <tr>
-              <td class="w-24 px-3 py-2 text-gray-500">Transform</td>
-              <td class="px-3 py-2 text-gray-300 font-mono">
+              <td class="w-24 px-3 py-2 text-fg-muted">Transform</td>
+              <td class="px-3 py-2 text-body font-mono">
                 <code>hooks/transforms/${previewName}/${previewName}-transform.mjs</code>
               </td>
             </tr>
@@ -145,7 +145,7 @@ export const CreateWebhookModal = ({
       ${mode === "oauth"
         ? html`
             <div class="space-y-1">
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-fg-muted">
                 For OAuth providers that can't send auth headers. AlphaClaw
                 injects webhook auth before forwarding to /hooks/{name}.
               </p>

package/lib/public/js/components/webhooks/helpers.js

@@ -32,18 +32,18 @@ export const getRequestStatusTone = (status) => {
   if (status === "success") {
     return {
       dotClass: "bg-green-500/90",
-      textClass: "text-green-500/90",
+      textClass: "text-status-success-muted/90",
     };
   }
   if (status === "error") {
     return {
       dotClass: "bg-red-500/90",
-      textClass: "text-red-500/90",
+      textClass: "text-status-error-muted",
     };
   }
   return {
     dotClass: "bg-gray-500/70",
-    textClass: "text-gray-400",
+    textClass: "text-fg-muted",
   };
 };
 

package/lib/public/js/components/webhooks/index.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useCallback, useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useCallback, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { createWebhook } from "../../lib/api.js";
 import { ActionButton } from "../action-button.js";
 import { PageHeader } from "../page-header.js";
@@ -79,7 +79,7 @@ export const Webhooks = ({
         leading=${selectedHookName
           ? html`
               <button
-                class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 transition-colors"
+                class="flex items-center gap-1.5 text-sm text-fg-muted hover:text-body transition-colors"
                 onclick=${onBackToList}
               >
                 <svg

package/lib/public/js/components/webhooks/request-history/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 { sendAgentMessage } from "../../../lib/api.js";
 import { ActionButton } from "../../action-button.js";
 import { AgentSendModal } from "../../agent-send-modal.js";
@@ -63,8 +63,8 @@ export const RequestHistory = ({
             (filter) => html`
               <button
                 class="text-xs px-2 py-1 rounded border ${statusFilter === filter
-                  ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                  : "border-border text-gray-400 hover:text-gray-200"}"
+                  ? "border-cyan-400 text-status-info bg-cyan-400/10"
+                  : "border-border text-fg-muted hover:text-body"}"
                 onclick=${() => actions.handleSetStatusFilter(filter)}
               >
                 ${filter}
@@ -75,7 +75,7 @@ export const RequestHistory = ({
       </div>
 
       ${requests.length === 0
-        ? html`<p class="text-sm text-gray-500">No requests logged yet.</p>`
+        ? html`<p class="text-sm text-fg-muted">No requests logged yet.</p>`
         : html`
             <div class="ac-history-list">
               ${requests.map((item) => {
@@ -93,12 +93,12 @@ export const RequestHistory = ({
                           <span class="ac-history-toggle shrink-0" aria-hidden="true"
                             >▸</span
                           >
-                          <span class="truncate text-xs text-gray-300">
+                          <span class="truncate text-xs text-body">
                             ${formatLastReceived(item.createdAt)}
                           </span>
                         </span>
                         <span class="inline-flex items-center gap-2 shrink-0">
-                          <span class="text-xs text-gray-500"
+                          <span class="text-xs text-fg-muted"
                             >${formatBytes(item.payloadSize)}</span
                           >
                           <span class=${`text-xs font-medium ${statusTone.textClass}`}
@@ -118,9 +118,9 @@ export const RequestHistory = ({
                       ? html`
                           <div class="ac-history-body space-y-3">
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">Headers</p>
+                              <p class="text-[11px] text-fg-muted mb-1">Headers</p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.headers)}</pre
                               >
@@ -138,11 +138,11 @@ ${jsonPretty(item.headers)}</pre
                               </div>
                             </div>
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">
+                              <p class="text-[11px] text-fg-muted mb-1">
                                 Payload ${item.payloadTruncated ? "(truncated)" : ""}
                               </p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.payload)}</pre
                               >
@@ -173,11 +173,11 @@ ${jsonPretty(item.payload)}</pre
                               </div>
                             </div>
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">
+                              <p class="text-[11px] text-fg-muted mb-1">
                                 Gateway response (${item.gatewayStatus || "n/a"})
                               </p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.gatewayBody)}</pre
                               >

package/lib/public/js/components/webhooks/request-history/use-request-history.js

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

package/lib/public/js/components/webhooks/webhook-detail/index.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useCallback, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useCallback, useState } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../../action-button.js";
 import { Badge } from "../../badge.js";
 import { ConfirmDialog } from "../../confirm-dialog.js";
@@ -70,29 +70,29 @@ export const WebhookDetail = ({
         </div>
 
         ${isWebhookLoading
-          ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
-              <p class="text-xs text-gray-500">Loading webhook details...</p>
+          ? html`<div class="bg-field border border-border rounded-lg p-3">
+              <p class="text-xs text-fg-muted">Loading webhook details...</p>
             </div>`
           : webhookLoadError
-            ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
-                <p class="text-xs text-red-300">
+            ? html`<div class="bg-field border border-border rounded-lg p-3">
+                <p class="text-xs text-status-error">
                   ${webhookLoadError?.message || "Could not load webhook details"}
                 </p>
               </div>`
             : hasOauthCallback
               ? null
-              : html`<div class="bg-black/20 border border-border rounded-lg p-3 space-y-4">
+              : html`<div class="bg-field border border-border rounded-lg p-3 space-y-4">
               ${selectedWebhookManaged
                 ? null
                 : html`
                     <div class="space-y-2">
-                      <p class="text-xs text-gray-500">Auth mode</p>
+                      <p class="text-xs text-fg-muted">Auth mode</p>
                       <div class="flex items-center gap-2">
                         <button
                           class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
                           "headers"
-                            ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                            : "border-border text-gray-400 hover:text-gray-200"}"
+                            ? "border-cyan-400 text-status-info bg-cyan-400/10"
+                            : "border-border text-fg-muted hover:text-body"}"
                           onclick=${() => actions.setAuthMode("headers")}
                         >
                           Headers
@@ -100,8 +100,8 @@ export const WebhookDetail = ({
                         <button
                           class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
                           "query"
-                            ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                            : "border-border text-gray-400 hover:text-gray-200"}"
+                            ? "border-cyan-400 text-status-info bg-cyan-400/10"
+                            : "border-border text-fg-muted hover:text-body"}"
                           onclick=${() => actions.setAuthMode("query")}
                         >
                           Query string
@@ -110,7 +110,7 @@ export const WebhookDetail = ({
                     </div>
                   `}
               <div class="space-y-2">
-                <p class="text-xs text-gray-500">Webhook URL</p>
+                <p class="text-xs text-fg-muted">Webhook URL</p>
                 <div class="flex items-center gap-2">
                   <input
                     type="text"
@@ -118,7 +118,7 @@ export const WebhookDetail = ({
                     value=${effectiveAuthMode === "query"
                       ? webhookUrlWithQueryToken
                       : webhookUrl}
-                    class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
+                    class="h-8 flex-1 bg-field border border-border rounded-lg px-3 text-xs text-body outline-none font-mono"
                   />
                   <button
                     class="h-8 text-xs px-2.5 rounded-lg ac-btn-secondary shrink-0"
@@ -144,13 +144,13 @@ export const WebhookDetail = ({
                 : effectiveAuthMode === "headers"
                   ? html`
                       <div class="space-y-2">
-                        <p class="text-xs text-gray-500">Auth headers</p>
+                        <p class="text-xs text-fg-muted">Auth headers</p>
                         <div class="flex items-center gap-2">
                           <input
                             type="text"
                             readonly
                             value=${authHeaderValue}
-                            class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
+                            class="h-8 flex-1 bg-field border border-border rounded-lg px-3 text-xs text-body outline-none font-mono"
                           />
                           <button
                             class="h-8 text-xs px-2.5 rounded-lg ac-btn-secondary shrink-0"
@@ -171,7 +171,7 @@ export const WebhookDetail = ({
                       </div>
                     `
                   : html`
-                      <p class="text-xs text-yellow-300">
+                      <p class="text-xs text-status-warning">
                         Always use auth headers when possible. Query string is
                         less secure.
                       </p>
@@ -181,9 +181,9 @@ export const WebhookDetail = ({
         ${isWebhookLoading || webhookLoadError || selectedWebhookManaged || !hasOauthCallback
           ? null
           : 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 gap-2">
-                  <p class="text-xs text-gray-500">OAuth Callback URL</p>
+                  <p class="text-xs text-fg-muted">OAuth Callback URL</p>
                   ${hasOauthCallback
                     ? html`<${Badge} tone="neutral">OAuth alias</${Badge}>`
                     : null}
@@ -193,7 +193,7 @@ export const WebhookDetail = ({
                     type="text"
                     readonly
                     value=${hasOauthCallback ? oauthCallbackUrl : "Not enabled"}
-                    class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
+                    class="h-8 flex-1 bg-field border border-border rounded-lg px-3 text-xs text-body outline-none font-mono"
                   />
                   ${hasOauthCallback
                     ? html`
@@ -228,26 +228,26 @@ export const WebhookDetail = ({
                       ${rotatingOauthCallback ? "Rotating..." : "Rotate"}
                     </button>
                   </div>
-                  <p class="text-xs text-yellow-300">
+                  <p class="text-xs text-status-warning">
                     Keep this URL private. Rotate if exposed.
                   </p>
                 </div>
               </div>
             `}
 
-        <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">
           ${selectedWebhookManaged
             ? html`
-                <p class="text-xs text-gray-500">Deliver to</p>
-                <p class="text-xs text-gray-200 font-mono">
+                <p class="text-xs text-fg-muted">Deliver to</p>
+                <p class="text-xs text-body font-mono">
                   ${selectedDeliveryAgentName}${" "}
-                  <span class="text-xs text-gray-500 font-mono"
+                  <span class="text-xs text-fg-muted font-mono"
                     >(${selectedDeliveryChannel})</span
                   >
                 </p>
               `
             : html`
-                <p class="text-xs text-gray-500">Deliver to</p>
+                <p class="text-xs text-fg-muted">Deliver to</p>
                 <div class="flex items-center gap-2">
                   <select
                     value=${destinationSessionKey || kNoDestinationSessionValue}
@@ -258,7 +258,7 @@ export const WebhookDetail = ({
                       );
                     }}
                     disabled=${loadingDestinationSessions || savingDestination}
-                    class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 focus:border-gray-500"
+                    class="h-8 flex-1 bg-field border border-border rounded-lg px-3 text-xs text-body focus:border-fg-muted"
                   >
                     <option value=${kNoDestinationSessionValue}>Default</option>
                     ${loadingDestinationSessions
@@ -287,19 +287,19 @@ export const WebhookDetail = ({
                   />
                 </div>
                 ${destinationLoadError
-                  ? html`<p class="text-xs text-red-400">${destinationLoadError}</p>`
+                  ? html`<p class="text-xs text-status-error-muted">${destinationLoadError}</p>`
                   : null}
               `}
         </div>
 
-        <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-          <p class="text-xs text-gray-500">Test webhook</p>
+        <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+          <p class="text-xs text-fg-muted">Test webhook</p>
           <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
             <input
               type="text"
               readonly
               value=${activeCurlCommand}
-              class="h-8 w-full sm:flex-1 sm:min-w-0 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono overflow-x-auto scrollbar-hidden"
+              class="h-8 w-full sm:flex-1 sm:min-w-0 bg-field border border-border rounded-lg px-3 text-xs text-body outline-none font-mono overflow-x-auto scrollbar-hidden"
             />
             <div class="grid grid-cols-2 gap-2 w-full sm:w-auto sm:flex sm:items-center">
               <button
@@ -326,9 +326,9 @@ export const WebhookDetail = ({
           </div>
         </div>
 
-        <div class="bg-black/20 border border-border rounded-lg p-3">
-          <div class="flex items-center gap-2 text-xs text-gray-300">
-            <span class="text-gray-500">Transform:</span>
+        <div class="bg-field border border-border rounded-lg p-3">
+          <div class="flex items-center gap-2 text-xs text-body">
+            <span class="text-fg-muted">Transform:</span>
             ${selectedWebhook?.transformPath
               ? html`<button
                   type="button"
@@ -342,8 +342,8 @@ export const WebhookDetail = ({
             <span
               class=${`ml-auto inline-flex items-center gap-1 px-1.5 py-0.5 rounded border font-sans ${
                 selectedWebhook?.transformExists
-                  ? "border-green-500/30 text-green-300 bg-green-500/10"
-                  : "border-yellow-500/30 text-yellow-300 bg-yellow-500/10"
+                  ? "border-green-500/30 text-status-success bg-green-500/10"
+                  : "border-yellow-500/30 text-status-warning bg-yellow-500/10"
               }`}
             >
               <span class="font-sans text-sm leading-none">
@@ -355,7 +355,7 @@ export const WebhookDetail = ({
         </div>
 
         <div class="flex items-center justify-between gap-3">
-          <p class="text-xs text-gray-600">
+          <p class="text-xs text-fg-dim">
             Created: ${formatDateTime(selectedWebhook?.createdAt)}
           </p>
           ${selectedWebhookManaged
@@ -380,7 +380,7 @@ export const WebhookDetail = ({
       ${selectedWebhookManaged && !isWebhookLoading && !webhookLoadError
         ? html`
             <div class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3">
-              <p class="text-xs text-yellow-200">
+              <p class="text-xs text-status-warning">
                 This webhook is managed by Gmail Watch setup and cannot be
                 deleted or edited from this page.
               </p>
@@ -420,8 +420,8 @@ export const WebhookDetail = ({
         title="Delete webhook?"
         message=${`This removes "/hooks/${selectedHookName}" from openclaw.json.`}
         details=${html`
-          <div class="rounded-lg border border-border bg-black/20 p-3">
-            <label class="flex items-center gap-2 text-xs text-gray-300 select-none">
+          <div class="rounded-lg border border-border bg-field p-3">
+            <label class="flex items-center gap-2 text-xs text-body select-none">
               <input
                 type="checkbox"
                 checked=${deleteTransformDir}

package/lib/public/js/components/webhooks/webhook-detail/use-webhook-detail.js

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

package/lib/public/js/components/webhooks/webhook-list/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 { Badge } from "../../badge.js";
 import { formatLastReceived, healthClassName } from "../helpers.js";
 import { useWebhookList } from "./use-webhook-list.js";
@@ -16,10 +16,10 @@ export const WebhookList = ({
   return html`
     <div class="bg-surface border border-border rounded-xl p-4 space-y-4">
       ${isListLoading
-        ? html`<p class="text-xs text-gray-500">Loading webhooks...</p>`
+        ? html`<p class="text-xs text-fg-muted">Loading webhooks...</p>`
         : null}
       ${!isListLoading && webhooks.length === 0
-        ? html`<p class="text-sm text-gray-500">
+        ? html`<p class="text-sm text-fg-muted">
             No webhooks configured yet. Create one to get started.
           </p>`
         : null}
@@ -28,7 +28,7 @@ export const WebhookList = ({
             <div class="overflow-auto">
               <table class="w-full text-sm">
                 <thead>
-                  <tr class="text-left text-xs text-gray-500 border-b border-border">
+                  <tr class="text-left text-xs text-fg-muted border-b border-border">
                     <th class="pb-2 pr-3">Path</th>
                     <th class="pb-2 pr-3">Last received</th>
                     <th class="pb-2 pr-3">Errors</th>
@@ -47,22 +47,22 @@ export const WebhookList = ({
                         onclick=${() => actions.handleSelectHook(item.name)}
                       >
                         <td
-                          class="px-3 py-2.5 group-hover:bg-white/5 first:rounded-l-lg transition-colors"
+                          class="px-3 py-2.5 group-hover:bg-surface first:rounded-l-lg transition-colors"
                         >
                           <code>${item.path || `/hooks/${item.name}`}</code>
                         </td>
                         <td
-                          class="px-3 py-2.5 text-xs text-gray-400 group-hover:bg-white/5 transition-colors"
+                          class="px-3 py-2.5 text-xs text-fg-muted group-hover:bg-surface transition-colors"
                         >
                           ${formatLastReceived(item.lastReceived)}
                         </td>
                         <td
-                          class="px-3 py-2.5 text-xs group-hover:bg-white/5 transition-colors"
+                          class="px-3 py-2.5 text-xs group-hover:bg-surface transition-colors"
                         >
                           ${item.errorCount || 0}
                         </td>
                         <td
-                          class="px-3 py-2.5 group-hover:bg-white/5 last:rounded-r-lg transition-colors"
+                          class="px-3 py-2.5 group-hover:bg-surface last:rounded-r-lg transition-colors"
                         >
                           <span
                             class="inline-block w-2.5 h-2.5 rounded-full ${healthClassName(
@@ -72,11 +72,11 @@ export const WebhookList = ({
                           />
                         </td>
                         <td
-                          class="px-3 py-2.5 text-xs text-gray-400 group-hover:bg-white/5 transition-colors"
+                          class="px-3 py-2.5 text-xs text-fg-muted group-hover:bg-surface transition-colors"
                         >
                           ${item.managed
                             ? html`<span
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] bg-cyan-500/10 text-cyan-200"
+                                class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] bg-cyan-500/10 text-status-info"
                                 >Managed</span
                               >`
                             : item.oauthCallbackEnabled