@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/agents-tab/create-channel-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";
@@ -284,14 +284,14 @@ export const CreateChannelModal = ({
             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">Name</span>
+          <span class="text-xs text-fg-muted">Name</span>
           <input
             type="text"
             value=${name}
@@ -300,19 +300,19 @@ export const CreateChannelModal = ({
               setName(event.target.value);
             }}
             placeholder=${getChannelMeta(provider).label || "Channel"}
-            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">Id</span>
+          <span class="text-xs text-fg-muted">Id</span>
           <input
             type="text"
             value=${accountId}
             readOnly=${true}
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm font-mono text-gray-400 outline-none"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-fg-muted outline-none"
           />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             ${
               isEditMode
                 ? "Channel id is fixed after creation."
@@ -326,7 +326,7 @@ export const CreateChannelModal = ({
         </label>
 
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">
+          <span class="text-xs text-fg-muted">
             ${needsAppToken ? "Bot Token" : "Token"}
           </span>
           <${SecretInput}
@@ -335,11 +335,11 @@ export const CreateChannelModal = ({
             placeholder=${token ? "" : "Paste bot token"}
             loading=${loadingToken}
             isSecret=${true}
-            inputClass="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"
+            inputClass="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"
           />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Saved behind the scenes as
-            <code class="font-mono text-gray-400 ml-1">${envKey || "CHANNEL_TOKEN"}</code>.
+            <code class="font-mono text-fg-muted ml-1">${envKey || "CHANNEL_TOKEN"}</code>.
           </p>
         </label>
 
@@ -347,7 +347,7 @@ export const CreateChannelModal = ({
           needsAppToken
             ? html`
                 <label class="block space-y-1">
-                  <span class="text-xs text-gray-400"
+                  <span class="text-xs text-fg-muted"
                     >App Token (Socket Mode)</span
                   >
                   <${SecretInput}
@@ -355,11 +355,11 @@ export const CreateChannelModal = ({
                     onInput=${(event) => setAppToken(event.target.value)}
                     placeholder="xapp-..."
                     isSecret=${true}
-                    inputClass="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"
+                    inputClass="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"
                   />
-                  <p class="text-xs text-gray-500">
+                  <p class="text-xs text-fg-muted">
                     Saved behind the scenes as
-                    <code class="font-mono text-gray-400 ml-1">
+                    <code class="font-mono text-fg-muted ml-1">
                       ${kChannelExtraEnvKeys.slack}
                     </code>
                     .
@@ -371,45 +371,45 @@ export const CreateChannelModal = ({
         ${
           needsAppToken
             ? html`
-                <details class="rounded-lg border border-border bg-black/20 px-3 py-2.5">
-                  <summary class="cursor-pointer text-xs text-gray-300 hover:text-gray-200">
+                <details class="rounded-lg border border-border bg-field px-3 py-2.5">
+                  <summary class="cursor-pointer text-xs text-body hover:text-body">
                     Slack-specific instructions (step-by-step)
                   </summary>
-                  <div class="mt-2 space-y-2 text-xs text-gray-500">
+                  <div class="mt-2 space-y-2 text-xs text-fg-muted">
                     <ol class="list-decimal list-inside space-y-1.5">
                       <li>
                         In Slack app settings, turn on
                         ${" "}
-                        <span class="text-gray-300">Socket Mode</span>.
+                        <span class="text-body">Socket Mode</span>.
                       </li>
                       <li>
                         In
                         ${" "}
-                        <span class="text-gray-300">App Home</span>, enable
-                        <code class="font-mono text-gray-400 ml-1">
+                        <span class="text-body">App Home</span>, enable
+                        <code class="font-mono text-fg-muted ml-1">
                           Allow users to send Slash commands and messages from the messages tab
                         </code>.
                       </li>
                       <li>
                         In
                         ${" "}
-                        <span class="text-gray-300">Event Subscriptions</span>, toggle on
-                        <code class="font-mono text-gray-400 ml-1">Subscribe to bot events</code>
+                        <span class="text-body">Event Subscriptions</span>, toggle on
+                        <code class="font-mono text-fg-muted ml-1">Subscribe to bot events</code>
                         ${" "}
                         and add
-                        <code class="font-mono text-gray-400 ml-1">message.im</code>.
+                        <code class="font-mono text-fg-muted ml-1">message.im</code>.
                       </li>
                       <li>
-                        Create a Bot Token (<code class="font-mono text-gray-400">xoxb-...</code>)
+                        Create a Bot Token (<code class="font-mono text-fg-muted">xoxb-...</code>)
                         with scopes:
-                        <code class="font-mono text-gray-400 ml-1">
+                        <code class="font-mono text-fg-muted ml-1">
                           ${kSlackBotScopes.join(", ")}
                         </code>
                       </li>
                       <li>
-                        Create an App Token (<code class="font-mono text-gray-400">xapp-...</code>)
+                        Create an App Token (<code class="font-mono text-fg-muted">xapp-...</code>)
                         with
-                        <code class="font-mono text-gray-400 ml-1">connections:write</code>.
+                        <code class="font-mono text-fg-muted ml-1">connections:write</code>.
                       </li>
                       <li>
                         Reinstall the app after changing scopes.
@@ -430,11 +430,11 @@ export const CreateChannelModal = ({
         }
 
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">Agent</span>
+          <span class="text-xs text-fg-muted">Agent</span>
           <select
             value=${agentId}
             onInput=${(event) => setAgentId(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"
           >
             ${agents.map(
               (agent) => html`
@@ -449,7 +449,7 @@ export const CreateChannelModal = ({
         ${
           !isEditMode && accountExists
             ? html`
-                <p class="text-xs text-red-400">
+                <p class="text-xs text-status-error-muted">
                   ${isSingleAccountProvider
                     ? `${getChannelMeta(provider).label} already has a configured channel account.`
                     : `A ${getChannelMeta(provider).label} account with this id already exists.`}
@@ -457,7 +457,7 @@ export const CreateChannelModal = ({
               `
             : null
         }
-        ${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">

package/lib/public/js/components/agents-tab/delete-agent-dialog.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 { ConfirmDialog } from "../confirm-dialog.js";
 import { ToggleSwitch } from "../toggle-switch.js";
 

package/lib/public/js/components/agents-tab/edit-agent-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 { ActionButton } from "../action-button.js";
 import { CloseIcon } from "../icons.js";
 import { ModalShell } from "../modal-shell.js";
@@ -56,33 +56,33 @@ export const EditAgentModal = ({
             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=${name}
             onInput=${(event) => setName(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"
           />
         </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=${String(agent?.id || "")}
             disabled=${true}
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm font-mono text-gray-500 outline-none"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-fg-muted outline-none"
           />
         </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">

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

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useEffect, useCallback } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+import htm from "htm";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { showToast } from "../toast.js";
 import { AgentDetailPanel } from "./agent-detail-panel.js";

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

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

package/lib/public/js/components/badge.js

@@ -1,13 +1,13 @@
-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 kToneClasses = {
-  success: "bg-green-500/10 text-green-500",
-  warning: "bg-yellow-500/10 text-yellow-500",
-  danger: "bg-red-500/10 text-red-400",
-  neutral: "bg-gray-500/10 text-gray-400",
+  success: "bg-green-500/10 text-status-success-muted",
+  warning: "bg-yellow-500/10 text-status-warning-muted",
+  danger: "bg-red-500/10 text-status-error-muted",
+  neutral: "bg-gray-500/10 text-fg-muted",
   info: "bg-blue-500/10 text-blue-400",
   accent: "bg-purple-500/10 text-purple-400",
   cyan: "bg-cyan-500/10 text-cyan-400",

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

package/lib/public/js/components/channel-operations-panel.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 { AgentBindingsSection } from "./agents-tab/agent-bindings-section/index.js";
 import { AgentPairingSection } from "./agents-tab/agent-pairing-section.js";
 

package/lib/public/js/components/channels.js

@@ -1,11 +1,11 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import { AddChannelMenu } from "./add-channel-menu.js";
 import { ChannelAccountStatusBadge } from "./channel-account-status-badge.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
@@ -74,7 +74,7 @@ export const ChannelsCard = ({
               <div
                 key=${item.id || item.channel}
                 class="flex justify-between items-center py-1.5 ${clickable
-                  ? "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=${clickable ? item.onClick : undefined}
               >
@@ -92,12 +92,12 @@ export const ChannelsCard = ({
                       `
                     : null}
                   <span
-                    class="truncate ${item.dimmedLabel ? "text-gray-500" : ""} ${item.labelClassName || ""}"
+                    class="truncate ${item.dimmedLabel ? "text-fg-muted" : ""} ${item.labelClassName || ""}"
                     >${item.label || channelMeta.label}</span
                   >
                   ${item.detailText
                     ? html`
-                        <span class="text-xs text-gray-500 ml-1 shrink-0">
+                        <span class="text-xs text-fg-muted ml-1 shrink-0">
                           ${item.detailText}
                         </span>
                       `
@@ -109,7 +109,7 @@ export const ChannelsCard = ({
                           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"
@@ -128,7 +128,7 @@ export const ChannelsCard = ({
               </div>
             `;
           })
-        : html`<div class="text-gray-500 text-sm text-center py-2">
+        : html`<div class="text-fg-muted text-sm text-center py-2">
             ${loadingLabel}
           </div>`}
     </div>
@@ -397,7 +397,7 @@ export const Channels = ({
                         Edit
                       </${OverflowMenuItem}>
                       <${OverflowMenuItem}
-                        className="text-red-300 hover:text-red-200"
+                        className="text-status-error hover:text-status-error"
                         onClick=${() => {
                           setMenuOpenId("");
                           setDeletingAccount(accountData);

package/lib/public/js/components/confirm-dialog.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "./action-button.js";
 
 const html = htm.bind(h);
@@ -37,14 +37,14 @@ export const ConfirmDialog = ({
 
   return html`
     <div
-      class="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50"
+      class="fixed inset-0 bg-overlay flex items-center justify-center p-4 z-50"
       onclick=${(event) => {
         if (event.target === event.currentTarget) onCancel?.();
       }}
     >
       <div class="bg-modal border border-border rounded-xl p-5 max-w-md w-full space-y-3">
         <h2 class="text-base font-semibold">${title}</h2>
-        <p class="text-sm text-gray-400">${message}</p>
+        <p class="text-sm text-fg-muted">${message}</p>
         ${details}
         <div class="pt-1 flex items-center justify-end gap-2">
           <${ActionButton}

package/lib/public/js/components/credentials-modal.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 { saveGoogleCredentials } from "../lib/api.js";
 import { SecretInput } from "./secret-input.js";
 import { ModalShell } from "./modal-shell.js";
@@ -113,12 +113,12 @@ export const CredentialsModal = ({
         value=${redirectUri}
         onFocus=${(e) => e.target.select()}
         onclick=${(e) => e.target.select()}
-        class="flex-1 min-w-0 bg-black/40 border border-border rounded px-2 py-1 text-gray-300 text-xs focus:outline-none focus:border-gray-500"
+        class="flex-1 min-w-0 bg-field border border-border rounded px-2 py-1 text-body text-xs focus:outline-none focus:border-fg-muted"
       />
       <button
         type="button"
         onclick=${copyRedirectUri}
-        class="shrink-0 px-2 py-1 rounded border border-border text-xs text-gray-300 hover:border-gray-500"
+        class="shrink-0 px-2 py-1 rounded border border-border text-xs text-body hover:border-fg-muted"
       >
         ${redirectUriCopied ? "Copied" : "Copy"}
       </button>
@@ -140,13 +140,13 @@ export const CredentialsModal = ({
             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">
         <div>
-          <p class="text-gray-400 text-sm mb-3">
+          <p class="text-fg-muted text-sm mb-3">
             You'll need a Google Cloud OAuth app.${" "}
             <a
               href="https://console.cloud.google.com/apis/credentials"
@@ -157,9 +157,9 @@ export const CredentialsModal = ({
             >
           </p>
           <details
-            class="text-sm text-gray-400 mb-3 bg-black/20 border border-border rounded-lg px-3 py-2"
+            class="text-sm text-fg-muted mb-3 bg-field border border-border rounded-lg px-3 py-2"
           >
-            <summary class="cursor-pointer font-medium hover:text-gray-200">
+            <summary class="cursor-pointer font-medium hover:text-body">
               Step-by-step instructions
             </summary>
             <div
@@ -237,7 +237,7 @@ export const CredentialsModal = ({
                         Copy Client ID + Secret (or download credentials JSON)
                       </li>
                     </ol>
-                    <p class="mt-3 text-yellow-500/80">
+                    <p class="mt-3 text-status-warning-muted/80">
                       ⚠️ App will be in "Testing" mode. Only emails added as
                       Test Users can sign in (up to 100).
                     </p>
@@ -290,7 +290,7 @@ export const CredentialsModal = ({
                         Copy Client ID + Secret (or download credentials JSON)
                       </li>
                     </ol>
-                    <p class="mt-3 text-green-500/80">
+                    <p class="mt-3 text-status-success-muted/80">
                       ✓ Internal apps skip test users and verification. Only
                       users in your Workspace org can authorize this Google app.
                     </p>
@@ -299,10 +299,10 @@ export const CredentialsModal = ({
           </details>
         </div>
         <div
-          class="bg-black/20 border border-border rounded-lg p-3 space-y-3 mt-2"
+          class="bg-field border border-border rounded-lg p-3 space-y-3 mt-2"
         >
           <div class="flex flex-col items-center text-center gap-2 py-2">
-            <label class="text-sm text-gray-300 font-medium"
+            <label class="text-sm text-body font-medium"
               >Upload credentials.json</label
             >
             <input
@@ -315,38 +315,38 @@ export const CredentialsModal = ({
             <button
               type="button"
               onclick=${() => fileRef.current?.click()}
-              class="text-sm px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+              class="text-sm px-3 py-1.5 rounded-lg border border-border text-body hover:border-fg-muted"
             >
               Choose file
             </button>
           </div>
           <div class="flex items-center gap-3 py-1">
             <div class="h-px flex-1 bg-border"></div>
-            <span class="text-gray-500 text-xs">or enter manually</span>
+            <span class="text-fg-muted text-xs">or enter manually</span>
             <div class="h-px flex-1 bg-border"></div>
           </div>
           <div>
-            <label class="text-sm text-gray-400 block mb-1">Client ID</label>
+            <label class="text-sm text-fg-muted block mb-1">Client ID</label>
             <${SecretInput}
               value=${clientId}
               onInput=${(e) => setClientId(e.target.value)}
               placeholder="xxxx.apps.googleusercontent.com"
-              inputClass="flex-1 bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+              inputClass="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-fg-muted"
             />
           </div>
           <div>
-            <label class="text-sm text-gray-400 block mb-1"
+            <label class="text-sm text-fg-muted block mb-1"
               >Client Secret</label
             >
             <${SecretInput}
               value=${clientSecret}
               onInput=${(e) => setClientSecret(e.target.value)}
               placeholder="GOCSPX-..."
-              inputClass="flex-1 bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+              inputClass="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-fg-muted"
             />
           </div>
           <div>
-            <label class="text-sm text-gray-400 block mb-1"
+            <label class="text-sm text-fg-muted block mb-1"
               >Email (Google account to authorize)</label
             >
             <input
@@ -354,7 +354,7 @@ export const CredentialsModal = ({
               value=${email}
               onInput=${(e) => setEmail(e.target.value)}
               placeholder="you@gmail.com"
-              class="w-full bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+              class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-fg-muted"
             />
           </div>
         </div>
@@ -371,6 +371,6 @@ export const CredentialsModal = ({
           className="w-full px-4 py-2 rounded-lg text-sm"
         />
       </div>
-      ${error ? html`<div class="text-red-400 text-xs">${error}</div>` : null}
+      ${error ? html`<div class="text-status-error-muted text-xs">${error}</div>` : null}
   </${ModalShell}>`;
 };

package/lib/public/js/components/cron-tab/cron-calendar.js

@@ -1,11 +1,11 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import { Tooltip } from "../tooltip.js";
 import { ModalShell } from "../modal-shell.js";
 import { CloseIcon } from "../icons.js";
@@ -483,7 +483,7 @@ export const CronCalendar = ({
     return html`
       <div class="space-y-2">
         ${displayedUpcomingItems.length === 0
-          ? html`<div class="text-xs text-gray-500 py-1">
+          ? html`<div class="text-xs text-fg-muted py-1">
               No upcoming jobs in the next 24 hours.
             </div>`
           : html`
@@ -566,7 +566,7 @@ export const CronCalendar = ({
   const renderFullGrid = () => html`
     <div class="space-y-3">
       ${hourRows.length === 0
-        ? html`<div class="text-sm text-gray-500">
+        ? html`<div class="text-sm text-fg-muted">
             No scheduled jobs in this rolling window.
           </div>`
         : html`
@@ -682,7 +682,7 @@ export const CronCalendar = ({
       ${repeatingJobs.length > 0
         ? html`
             <div class="cron-calendar-repeating-strip">
-              <div class="text-xs text-gray-500">Repeating</div>
+              <div class="text-xs text-fg-muted">Repeating</div>
               <div class="cron-calendar-repeating-list">
                 ${repeatingJobs.map((job) => {
                   const jobId = String(job?.id || "");