@chrysb/alphaclaw 0.8.1 → 0.8.3-beta.0

package/lib/public/js/components/telegram-workspace/onboarding.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useEffect } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useEffect } from "preact/hooks";
+import htm from "htm";
 import { Badge } from "../badge.js";
 import { showToast } from "../toast.js";
 import { ActionButton } from "../action-button.js";
@@ -52,42 +52,42 @@ export const VerifyBotStep = ({ accountId, botInfo, setBotInfo, onNext }) => {
 
       ${botInfo &&
       html`
-        <div class="bg-black/20 border border-border rounded-lg p-3">
+        <div class="bg-field border border-border rounded-lg p-3">
           <div class="flex items-center gap-2">
-            <span class="text-sm text-gray-300 font-medium">@${botInfo.username}</span>
+            <span class="text-sm text-body font-medium">@${botInfo.username}</span>
             <${Badge} tone="success">Connected</${Badge}>
           </div>
-          <p class="text-xs text-gray-500 mt-1">${botInfo.first_name}</p>
+          <p class="text-xs text-fg-muted mt-1">${botInfo.first_name}</p>
         </div>
       `}
       ${error &&
       html`
         <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-          <p class="text-sm text-red-400">${error}</p>
+          <p class="text-sm text-status-error-muted">${error}</p>
         </div>
       `}
       ${!botInfo &&
       !loading &&
       !error &&
-      html` <p class="text-sm text-gray-400">Checking bot token...</p> `}
+      html` <p class="text-sm text-fg-muted">Checking bot token...</p> `}
 
-      <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-        <p class="text-xs font-medium text-gray-300">
+      <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+        <p class="text-xs font-medium text-body">
           Before continuing, configure BotFather:
         </p>
-        <ol class="text-xs text-gray-400 space-y-1.5 list-decimal list-inside">
+        <ol class="text-xs text-fg-muted space-y-1.5 list-decimal list-inside">
           <li>
-            Open <span class="text-gray-300">@BotFather</span> in Telegram
+            Open <span class="text-body">@BotFather</span> in Telegram
           </li>
           <li>
-            Send <code class="bg-black/40 px-1 rounded">/mybots</code> and
+            Send <code class="bg-field px-1 rounded">/mybots</code> and
             select your bot
           </li>
           <li>
-            Go to <span class="text-gray-300">Bot Settings</span> >
-            <span class="text-gray-300">Group Privacy</span>
+            Go to <span class="text-body">Bot Settings</span> >
+            <span class="text-body">Group Privacy</span>
           </li>
-          <li>Turn it <span class="text-yellow-400 font-medium">OFF</span></li>
+          <li>Turn it <span class="text-status-warning-muted font-medium">OFF</span></li>
         </ol>
       </div>
 
@@ -112,59 +112,59 @@ export const CreateGroupStep = ({ onNext, onBack }) => html`
   <div class="space-y-4">
     <h3 class="text-sm font-semibold">Create a Telegram Group</h3>
 
-    <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-      <p class="text-xs font-medium text-gray-300">Create the group</p>
-      <ol class="text-xs text-gray-400 space-y-2 list-decimal list-inside">
+    <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+      <p class="text-xs font-medium text-body">Create the group</p>
+      <ol class="text-xs text-fg-muted space-y-2 list-decimal list-inside">
         <li>
           Open Telegram and create a${" "}
-          <span class="text-gray-300">new group</span>
+          <span class="text-body">new group</span>
         </li>
         <li>
-          Search for and add <span class="text-gray-300">your bot</span> as a
+          Search for and add <span class="text-body">your bot</span> as a
           member
         </li>
         <li>
-          Hit <span class="text-gray-300">Next</span>, give the group a name
+          Hit <span class="text-body">Next</span>, give the group a name
           (e.g. "My Workspace"), and create it
         </li>
       </ol>
     </div>
 
-    <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-      <p class="text-xs font-medium text-gray-300">Enable topics</p>
-      <ol class="text-xs text-gray-400 space-y-2 list-decimal list-inside">
+    <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+      <p class="text-xs font-medium text-body">Enable topics</p>
+      <ol class="text-xs text-fg-muted space-y-2 list-decimal list-inside">
         <li>Tap the group name at the top to open settings</li>
         <li>
-          Tap <span class="text-gray-300">Edit</span> (pencil icon), scroll to
-          <span class="text-gray-300"> Topics</span>, toggle it
-          <span class="text-yellow-400 font-medium"> ON</span>
+          Tap <span class="text-body">Edit</span> (pencil icon), scroll to
+          <span class="text-body"> Topics</span>, toggle it
+          <span class="text-status-warning-muted font-medium"> ON</span>
         </li>
       </ol>
     </div>
 
-    <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-      <p class="text-xs font-medium text-gray-300">Make the bot an admin</p>
-      <ol class="text-xs text-gray-400 space-y-2 list-decimal list-inside">
-        <li>Go to <span class="text-gray-300">Members</span>, tap your bot</li>
+    <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+      <p class="text-xs font-medium text-body">Make the bot an admin</p>
+      <ol class="text-xs text-fg-muted space-y-2 list-decimal list-inside">
+        <li>Go to <span class="text-body">Members</span>, tap your bot</li>
         <li>
-          Promote it to <span class="text-yellow-400 font-medium">Admin</span>
+          Promote it to <span class="text-status-warning-muted font-medium">Admin</span>
         </li>
         <li>
           Make sure
-          <span class="text-yellow-400 font-medium"> Manage Topics </span>
+          <span class="text-status-warning-muted font-medium"> Manage Topics </span>
           permission is enabled
         </li>
       </ol>
     </div>
 
-    <p class="text-xs text-gray-500">
+    <p class="text-xs text-fg-muted">
       Once all three steps are done, continue to verify the setup.
     </p>
 
     <div class="grid grid-cols-2 gap-2">
       <button
         onclick=${onBack}
-        class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+        class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-body hover:border-fg-muted"
       >
         Back
       </button>
@@ -261,18 +261,18 @@ export const AddBotStep = ({
     <div class="space-y-4">
       <h3 class="text-sm font-semibold">Verify Group</h3>
 
-      <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-        <p class="text-xs text-gray-400">To get your group chat ID:</p>
-        <ol class="text-xs text-gray-400 space-y-1 list-decimal list-inside">
+      <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+        <p class="text-xs text-fg-muted">To get your group chat ID:</p>
+        <ol class="text-xs text-fg-muted space-y-1 list-decimal list-inside">
           <li>
-            Invite <span class="text-gray-300">@myidbot</span> to your group
+            Invite <span class="text-body">@myidbot</span> to your group
           </li>
           <li>
-            Send <code class="bg-black/40 px-1 rounded">/getgroupid</code>
+            Send <code class="bg-field px-1 rounded">/getgroupid</code>
           </li>
           <li>
             Copy the ID (starts with
-            <code class="bg-black/40 px-1 rounded">-100</code>)
+            <code class="bg-field px-1 rounded">-100</code>)
           </li>
         </ol>
       </div>
@@ -283,7 +283,7 @@ export const AddBotStep = ({
           value=${input}
           onInput=${(e) => setInput(e.target.value)}
           placeholder="-100XXXXXXXXXX"
-          class="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500"
+          class="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted"
         />
         <${ActionButton}
           onClick=${verify}
@@ -300,17 +300,17 @@ export const AddBotStep = ({
       ${verifyGroupError &&
       html`
         <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-          <p class="text-sm text-red-400">${verifyGroupError}</p>
+          <p class="text-sm text-status-error-muted">${verifyGroupError}</p>
         </div>
       `}
       ${groupInfo &&
       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">
-            <span class="text-sm text-gray-300 font-medium">${groupInfo.chat.title}</span>
+            <span class="text-sm text-body font-medium">${groupInfo.chat.title}</span>
             <${Badge} tone="success">Verified</${Badge}>
           </div>
-          <div class="flex gap-3 text-xs text-gray-500">
+          <div class="flex gap-3 text-xs text-fg-muted">
             <span>Topics: ${groupInfo.chat.isForum ? "ON" : "OFF"}</span>
             <span>Bot: ${groupInfo.bot.status}</span>
           </div>
@@ -319,16 +319,16 @@ export const AddBotStep = ({
       ${groupInfo &&
       verifyWarnings.length === 0 &&
       html`
-        <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
-          <p class="text-xs text-gray-500">Your Telegram User ID</p>
+        <div class="bg-field border border-border rounded-lg p-3 space-y-2">
+          <p class="text-xs text-fg-muted">Your Telegram User ID</p>
           <input
             type="text"
             value=${userId}
             onInput=${(e) => setUserId(e.target.value)}
             placeholder="e.g. 123456789"
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted"
           />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Auto-filled from Telegram admins. Edit if needed.
           </p>
         </div>
@@ -338,20 +338,20 @@ export const AddBotStep = ({
         <div
           class="bg-red-500/10 border border-red-500/20 rounded-lg p-3 space-y-3"
         >
-          <p class="text-xs font-medium text-red-300">
+          <p class="text-xs font-medium text-status-error">
             Fix these before continuing:
           </p>
-          <ul class="text-xs text-red-200 space-y-1 list-disc list-inside">
+          <ul class="text-xs text-status-error space-y-1 list-disc list-inside">
             ${verifyWarnings.map((message) => html`<li>${message}</li>`)}
           </ul>
-          <p class="text-xs text-red-300 ">Once fixed, hit Verify again.</p>
+          <p class="text-xs text-status-error ">Once fixed, hit Verify again.</p>
         </div>
       `}
 
       <div class="grid grid-cols-2 gap-2">
         <button
           onclick=${onBack}
-          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-body hover:border-fg-muted"
         >
           Back
         </button>
@@ -438,15 +438,15 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
       ${topicEntries.length > 0 &&
       html`
         <div
-          class="bg-black/20 border border-border rounded-lg overflow-hidden"
+          class="bg-field border border-border rounded-lg overflow-hidden"
         >
           <table class="w-full text-xs">
             <thead>
               <tr class="border-b border-border">
-                <th class="text-left px-3 py-2 text-gray-500 font-medium">
+                <th class="text-left px-3 py-2 text-fg-muted font-medium">
                   Topic
                 </th>
-                <th class="text-left px-3 py-2 text-gray-500 font-medium">
+                <th class="text-left px-3 py-2 text-fg-muted font-medium">
                   Thread ID
                 </th>
                 <th class="px-3 py-2 w-8" />
@@ -456,8 +456,8 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
               ${topicEntries.map(
                 ([id, t]) => html`
                   <tr class="border-b border-border last:border-0">
-                    <td class="px-3 py-2 text-gray-300">${t.name}</td>
-                    <td class="px-3 py-2 text-gray-500 font-mono">${id}</td>
+                    <td class="px-3 py-2 text-body">${t.name}</td>
+                    <td class="px-3 py-2 text-fg-muted font-mono">${id}</td>
                     <td class="px-3 py-2">
                       <button
                         onclick=${() =>
@@ -466,7 +466,7 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
                             name: String(t.name || ""),
                           })}
                         disabled=${deleting === id}
-                        class="text-gray-600 hover:text-red-400 transition-colors ${deleting ===
+                        class="text-fg-dim hover:text-status-error-muted transition-colors ${deleting ===
                         id
                           ? "opacity-50"
                           : ""}"
@@ -493,7 +493,7 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
       `}
 
       <div class="space-y-2">
-        <label class="text-xs text-gray-500">Add a topic</label>
+        <label class="text-xs text-fg-muted">Add a topic</label>
         <div class="space-y-2">
           <div class="flex gap-2">
             <input
@@ -504,7 +504,7 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
                 if (e.key === "Enter") createSingle();
               }}
               placeholder="Topic name"
-              class="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500"
+              class="flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted"
             />
           </div>
           <textarea
@@ -512,7 +512,7 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
             onInput=${(e) => setNewTopicInstructions(e.target.value)}
             placeholder="System instructions (optional)"
             rows="4"
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500 resize-y"
+            class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted resize-y"
           />
           <div class="flex justify-end">
             <${ActionButton}
@@ -533,14 +533,14 @@ export const TopicsStep = ({ accountId, groupId, topics, setTopics, onNext, onBa
       ${error &&
       html`
         <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-          <p class="text-sm text-red-400">${error}</p>
+          <p class="text-sm text-status-error-muted">${error}</p>
         </div>
       `}
 
       <div class="grid grid-cols-2 gap-2">
         <button
           onclick=${onBack}
-          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-body hover:border-fg-muted"
         >
           Back
         </button>
@@ -583,16 +583,16 @@ export const SummaryStep = ({ groupId, groupInfo, topics, onBack, onDone }) => {
   return html`
     <div class="space-y-4">
       <div class="max-w-xl mx-auto text-center space-y-10 mt-10">
-        <p class="text-sm font-medium text-green-300">🎉 Setup complete</p>
-        <p class="text-xs text-gray-400">
+        <p class="text-sm font-medium text-status-success">🎉 Setup complete</p>
+        <p class="text-xs text-fg-muted">
           The topic registry has been injected into
-          <code class="bg-black/40 px-1 rounded">TOOLS.md</code> so your agent
+          <code class="bg-field px-1 rounded">TOOLS.md</code> so your agent
           knows which thread ID maps to which topic name.
         </p>
 
-        <div class="bg-black/20 border border-border rounded-lg p-3">
-          <p class="text-xs text-gray-500">
-            If you used <span class="text-gray-300">@myidbot</span> to find IDs,
+        <div class="bg-field border border-border rounded-lg p-3">
+          <p class="text-xs text-fg-muted">
+            If you used <span class="text-body">@myidbot</span> to find IDs,
             you can remove it from the group now.
           </p>
         </div>
@@ -601,7 +601,7 @@ export const SummaryStep = ({ groupId, groupInfo, topics, onBack, onDone }) => {
       <div class="grid grid-cols-2 gap-2">
         <button
           onclick=${onBack}
-          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-body hover:border-fg-muted"
         >
           Back
         </button>

package/lib/public/js/components/toast.js

@@ -1,7 +1,7 @@
-import { h } from 'https://esm.sh/preact';
-import { useState, useEffect } from 'https://esm.sh/preact/hooks';
-import { createPortal } from 'https://esm.sh/preact/compat';
-import htm from 'https://esm.sh/htm';
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+import htm from 'htm';
 const html = htm.bind(h);
 
 let toastId = 0;
@@ -19,10 +19,10 @@ const kToastTypeByAlias = {
 };
 
 const kToastClassByType = {
-  success: "bg-green-950/95 border border-green-700/80 text-green-200",
-  error: "bg-red-950/95 border border-red-700/80 text-red-200",
-  warning: "bg-yellow-950/95 border border-yellow-700/80 text-yellow-100",
-  info: "bg-cyan-950/95 border border-cyan-700/80 text-cyan-100",
+  success: "bg-status-success-bg border border-status-success-border text-status-success",
+  error: "bg-status-error-bg border border-status-error-border text-status-error",
+  warning: "bg-status-warning-bg border border-status-warning-border text-status-warning",
+  info: "bg-status-info-bg border border-status-info-border text-status-info",
 };
 
 const normalizeToastType = (type) => {

package/lib/public/js/components/toggle-switch.js

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

package/lib/public/js/components/tooltip.js

@@ -1,7 +1,7 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
-import { createPortal } from "https://esm.sh/preact/compat";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import htm from "htm";
 
 const html = htm.bind(h);
 
@@ -138,7 +138,7 @@ export const Tooltip = ({
               <span
                 ref=${tooltipRef}
                 role="tooltip"
-                class=${`pointer-events-none fixed left-0 top-0 z-[80] -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg ${widthClass} ${tooltipClassName}`.trim()}
+                class=${`pointer-events-none fixed left-0 top-0 z-[80] -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-body shadow-lg ${widthClass} ${tooltipClassName}`.trim()}
                 style=${positionStyle || { visibility: "hidden" }}
               >
                 ${text}

package/lib/public/js/components/update-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 { ActionButton } from "./action-button.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/update-modal.js

@@ -1,7 +1,7 @@
-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 { marked } from "https://esm.sh/marked";
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
+import { marked } from "marked";
 import { fetchAlphaclawReleaseNotes } from "../lib/api.js";
 import { ModalShell } from "./modal-shell.js";
 import { ActionButton } from "./action-button.js";
@@ -103,18 +103,18 @@ export const UpdateModal = ({
         class="absolute top-5 right-5 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-1 pr-10">
         <h3 class="text-sm font-semibold">AlphaClaw release notes</h3>
         ${publishedAtLabel
-          ? html`<p class="text-xs text-gray-500">Published ${publishedAtLabel}</p>`
+          ? html`<p class="text-xs text-fg-muted">Published ${publishedAtLabel}</p>`
           : null}
       </div>
       <div class="ac-surface-inset border border-border rounded-lg p-2 overflow-auto min-h-[220px] max-h-[66vh]">
         ${loadingNotes
           ? html`
-              <div class="min-h-[200px] flex items-center justify-center text-gray-400">
+              <div class="min-h-[200px] flex items-center justify-center text-fg-muted">
                 <span class="inline-flex items-center gap-2 text-sm">
                   <${LoadingSpinner} className="h-4 w-4" />
                   Loading release notes...
@@ -124,7 +124,7 @@ export const UpdateModal = ({
           : notesError
             ? html`
                 <div class="space-y-2">
-                  <p class="text-sm text-red-300">${notesError}</p>
+                  <p class="text-sm text-status-error">${notesError}</p>
                   <a
                     class="ac-tip-link text-xs"
                     href=${effectiveReleaseUrl}
@@ -141,7 +141,7 @@ export const UpdateModal = ({
                 ></div>`
               : html`
                   <div class="space-y-2">
-                    <p class="text-sm text-gray-300">No release notes were published for this tag.</p>
+                    <p class="text-sm text-body">No release notes were published for this tag.</p>
                     <a
                       class="ac-tip-link text-xs"
                       href=${effectiveReleaseUrl}

package/lib/public/js/components/usage-tab/constants.js

@@ -12,10 +12,10 @@ export const kColorPalette = [
 ];
 
 export const kBadgeToneClass = {
-  cyan: "border-cyan-400/30 text-cyan-300 bg-cyan-400/10",
+  cyan: "border-cyan-400/30 text-status-info bg-cyan-400/10",
   blue: "border-blue-400/30 text-blue-300 bg-blue-400/10",
   purple: "border-purple-400/30 text-purple-300 bg-purple-400/10",
-  gray: "border-gray-400/30 text-gray-400 bg-gray-400/10",
+  gray: "border-gray-400/30 text-fg-muted bg-gray-400/10",
 };
 
 export const kRangeOptions = [

package/lib/public/js/components/usage-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 { ActionButton } from "../action-button.js";
 import { PageHeader } from "../page-header.js";
 import { OverviewSection } from "./overview-section.js";
@@ -42,7 +42,7 @@ export const UsageTab = ({ sessionId = "" }) => {
         `}
       />
       ${state.error
-        ? html`<div class="text-xs text-red-300 bg-red-950/30 border border-red-900 rounded px-3 py-2">
+        ? html`<div class="text-xs text-status-error bg-status-error-bg border border-status-error-border rounded px-3 py-2">
             ${state.error}
           </div>`
         : null}

package/lib/public/js/components/usage-tab/overview-section.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 {
   formatCompactNumber,
   formatInteger,
@@ -26,10 +26,10 @@ const formatPercent = (ratio) => `${(Number(ratio || 0) * 100).toFixed(1)}%`;
 
 const getCacheHitRateValueClass = (ratio) => {
   const percent = Number(ratio || 0) * 100;
-  if (percent <= 0) return "text-gray-300";
-  if (percent >= 70) return "text-green-400";
+  if (percent <= 0) return "text-body";
+  if (percent >= 70) return "text-status-success";
   if (percent >= 40) return "text-amber-300";
-  return "text-red-400";
+  return "text-status-error-muted";
 };
 
 const getOverviewMetrics = (summary) => {
@@ -133,7 +133,7 @@ const AgentCostDistribution = ({ summary }) => {
             >
               <h2 class="card-label text-xs">Estimated cost breakdown</h2>
             </div>
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-fg-muted">
               No agent usage recorded for this range.
             </p>
           `
@@ -144,13 +144,13 @@ const AgentCostDistribution = ({ summary }) => {
               >
                 <h2 class="card-label text-xs">Estimated cost breakdown</h2>
                 <div
-                  class="inline-flex flex-wrap items-center gap-3 text-xs text-gray-500"
+                  class="inline-flex flex-wrap items-center gap-3 text-xs text-fg-muted"
                 >
                   <label
-                    class="inline-flex items-center gap-2 text-xs text-gray-500"
+                    class="inline-flex items-center gap-2 text-xs text-fg-muted"
                   >
                     <select
-                      class="bg-black/30 border border-border rounded-lg text-xs px-2.5 py-1.5 text-gray-200 focus:border-gray-500"
+                      class="bg-field border border-border rounded-lg text-xs px-2.5 py-1.5 text-body focus:border-fg-muted"
                       value=${String(selectedAgentRow?.agent || "")}
                       onChange=${(e) =>
                         setSelectedAgent(String(e.currentTarget?.value || ""))}
@@ -178,13 +178,13 @@ const AgentCostDistribution = ({ summary }) => {
                   };
                   return html`
                     <div class="ac-surface-inset px-2.5 py-2">
-                      <p class="text-[11px] text-gray-500">
+                      <p class="text-[11px] text-fg-muted">
                         ${renderSourceLabel(sourceRow.source)}
                       </p>
-                      <p class="text-xs text-gray-300 mt-0.5">
+                      <p class="text-xs text-body mt-0.5">
                         ${formatUsd(sourceRow.totalCost)}
                       </p>
-                      <p class="text-[11px] text-gray-500 mt-0.5">
+                      <p class="text-[11px] text-fg-muted mt-0.5">
                         ${formatInteger(sourceRow.totalTokens)} tok ·
                         ${formatCountLabel(
                           sourceRow.turnCount,
@@ -201,7 +201,7 @@ const AgentCostDistribution = ({ summary }) => {
       ${missingPricingModels.length
         ? html`
             <div class="mt-3">
-              <p class="text-[11px] text-gray-500">
+              <p class="text-[11px] text-fg-muted">
                 <span>
                   . Missing model pricing for ${missingPricingModels.length}
                   ${missingPricingModels.length === 1 ? "model" : "models"}:
@@ -272,7 +272,7 @@ export const OverviewSection = ({
         >
           <label class="inline-flex items-center gap-2">
             <select
-              class="bg-black/30 border border-border rounded-lg text-xs px-2.5 py-1.5 text-gray-200 focus:border-gray-500"
+              class="bg-field border border-border rounded-lg text-xs px-2.5 py-1.5 text-body focus:border-fg-muted"
               value=${breakdown}
               onChange=${(event) =>
                 onBreakdownChange(String(event.currentTarget?.value || "model"))}