@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/telegram-workspace/manage.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 { showToast } from "../toast.js";
 import { ActionButton } from "../action-button.js";
 import { ConfirmDialog } from "../confirm-dialog.js";
@@ -13,7 +13,7 @@ const AgentSelect = ({ value, agents, onChange, className = "" }) => html`
   <select
     value=${value}
     onChange=${(e) => onChange(e.target.value)}
-    class="bg-black/30 border border-border rounded-lg px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-gray-500 ${className}"
+    class="bg-field border border-border rounded-lg px-2 py-1.5 text-xs text-body focus:outline-none focus:border-fg-muted ${className}"
   >
     <option value="">Default</option>
     ${agents.map(
@@ -174,15 +174,15 @@ export const ManageTelegramWorkspace = ({
         <div class="flex justify-end">
           <button
             onclick=${onResetOnboarding}
-            class="text-xs px-3 py-1.5 rounded-lg border border-border text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-colors"
+            class="text-xs px-3 py-1.5 rounded-lg border border-border text-fg-muted hover:text-body hover:border-fg-muted transition-colors"
           >
             Reset onboarding
           </button>
         </div>
       `}
-      <div class="bg-black/20 border border-border rounded-lg p-3 space-y-1">
-        <p class="text-sm text-gray-300 font-medium">${groupName || groupId}</p>
-        <p class="text-xs text-gray-500 font-mono">${groupId}</p>
+      <div class="bg-field border border-border rounded-lg p-3 space-y-1">
+        <p class="text-sm text-body font-medium">${groupName || groupId}</p>
+        <p class="text-xs text-fg-muted font-mono">${groupId}</p>
       </div>
 
       <div class="space-y-2">
@@ -190,23 +190,23 @@ export const ManageTelegramWorkspace = ({
         ${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 table-fixed">
                   <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 w-36"
+                        class="text-left px-3 py-2 text-fg-muted font-medium w-36"
                       >
                         Thread ID
                       </th>
                       ${agents.length > 0 &&
                       html`
                         <th
-                          class="text-left px-3 py-2 text-gray-500 font-medium w-32"
+                          class="text-left px-3 py-2 text-fg-muted font-medium w-32"
                         >
                           Agent
                         </th>
@@ -233,7 +233,7 @@ export const ManageTelegramWorkspace = ({
                                         if (e.key === "Enter") saveRename(id);
                                         if (e.key === "Escape") cancelRename();
                                       }}
-                                      class="w-full bg-black/30 border border-border rounded-lg px-2 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500"
+                                      class="w-full bg-field border border-border rounded-lg px-2 py-1.5 text-xs text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted"
                                     />
                                     <textarea
                                       value=${editingTopicInstructions}
@@ -243,12 +243,12 @@ export const ManageTelegramWorkspace = ({
                                         )}
                                       placeholder="System instructions (optional)"
                                       rows="6"
-                                      class="w-full bg-black/30 border border-border rounded-lg px-2 py-1.5 text-xs 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-2 py-1.5 text-xs text-body placeholder-fg-dim focus:outline-none focus:border-fg-muted resize-y"
                                     />
                                     ${agents.length > 0 &&
                                     html`
                                       <div class="flex items-center gap-2">
-                                        <label class="text-xs text-gray-500">Agent:</label>
+                                        <label class="text-xs text-fg-muted">Agent:</label>
                                         <${AgentSelect}
                                           value=${editingTopicAgentId}
                                           agents=${agents}
@@ -270,7 +270,7 @@ export const ManageTelegramWorkspace = ({
                                       </button>
                                       <button
                                         onclick=${cancelRename}
-                                        class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200 hover:border-gray-500"
+                                        class="text-xs px-2 py-1 rounded border border-border text-fg-muted hover:text-body hover:border-fg-muted"
                                       >
                                         Cancel
                                       </button>
@@ -283,7 +283,7 @@ export const ManageTelegramWorkspace = ({
                               <tr
                                 class="border-b border-border last:border-0 align-middle"
                               >
-                                <td class="px-3 py-2 text-gray-300">
+                                <td class="px-3 py-2 text-body">
                                   <div class="flex items-center gap-2">
                                     <span>${topic.name}</span>
                                     <button
@@ -314,23 +314,23 @@ export const ManageTelegramWorkspace = ({
                                   ${topic.systemInstructions &&
                                   html`
                                     <p
-                                      class="text-[11px] text-gray-500 mt-1 line-clamp-1"
+                                      class="text-[11px] text-fg-muted mt-1 line-clamp-1"
                                     >
                                       ${topic.systemInstructions}
                                     </p>
                                   `}
                                 </td>
                                 <td
-                                  class="px-3 py-2 text-gray-500 font-mono w-36"
+                                  class="px-3 py-2 text-fg-muted font-mono w-36"
                                 >
                                   ${id}
                                 </td>
                                 ${agents.length > 0 &&
                                 html`
-                                  <td class="px-3 py-2 text-gray-400 w-32">
+                                  <td class="px-3 py-2 text-fg-muted w-32">
                                     ${topic.agentId
-                                      ? html`<span class="text-gray-300">${agents.find((a) => a.id === topic.agentId)?.name || topic.agentId}</span>`
-                                      : html`<span class="text-gray-600">default</span>`}
+                                      ? html`<span class="text-body">${agents.find((a) => a.id === topic.agentId)?.name || topic.agentId}</span>`
+                                      : html`<span class="text-fg-dim">default</span>`}
                                   </td>
                                 `}
                                 <td class="px-3 py-2">
@@ -344,7 +344,7 @@ export const ManageTelegramWorkspace = ({
                                           name: String(topic.name || ""),
                                         })}
                                       disabled=${deleting === id}
-                                      class="text-xs px-2 py-1 rounded border border-border text-gray-500 hover:text-red-300 hover:border-red-500 ${deleting ===
+                                      class="text-xs px-2 py-1 rounded border border-border text-fg-muted hover:text-status-error hover:border-red-500 ${deleting ===
                                       id
                                         ? "opacity-50 cursor-not-allowed"
                                         : ""}"
@@ -362,13 +362,13 @@ export const ManageTelegramWorkspace = ({
                 </table>
               </div>
             `
-          : html`<p class="text-xs text-gray-500">No topics yet.</p>`}
+          : html`<p class="text-xs text-fg-muted">No topics yet.</p>`}
       </div>
 
       ${showCreateTopic &&
       html`
-        <div class="space-y-2 bg-black/20 border border-border rounded-lg p-3">
-          <label class="text-xs text-gray-500">Create new topic</label>
+        <div class="space-y-2 bg-field border border-border rounded-lg p-3">
+          <label class="text-xs text-fg-muted">Create new topic</label>
           <div class="space-y-2">
             <input
               type="text"
@@ -378,19 +378,19 @@ export const ManageTelegramWorkspace = ({
                 if (e.key === "Enter") createSingle();
               }}
               placeholder="Topic name"
-              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"
             />
             <textarea
               value=${newTopicInstructions}
               onInput=${(e) => setNewTopicInstructions(e.target.value)}
               placeholder="System instructions (optional)"
               rows="5"
-              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"
             />
             ${agents.length > 0 &&
             html`
               <div class="flex items-center gap-2">
-                <label class="text-xs text-gray-500">Agent:</label>
+                <label class="text-xs text-fg-muted">Agent:</label>
                 <${AgentSelect}
                   value=${newTopicAgentId}
                   agents=${agents}
@@ -415,7 +415,7 @@ export const ManageTelegramWorkspace = ({
       ${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>
       `}
 
@@ -423,7 +423,7 @@ export const ManageTelegramWorkspace = ({
         <button
           onclick=${() => setShowCreateTopic((v) => !v)}
           class="${showCreateTopic
-            ? "w-auto text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+            ? "w-auto text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-body hover:border-fg-muted"
             : "w-auto text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-cyan"}"
         >
           ${showCreateTopic ? "Close create topic" : "Create topic"}
@@ -432,13 +432,13 @@ export const ManageTelegramWorkspace = ({
 
       <div class="border-t border-white/10" />
 
-      <p class="text-xs text-gray-500">
+      <p class="text-xs text-fg-muted">
         Concurrency is auto-scaled to support your group:
-        <span class="text-gray-300"> agent ${maxConcurrent}</span>,
-        <span class="text-gray-300"> subagent ${subagentMaxConcurrent}</span>
-        <span class="text-gray-600"> (${topicCount} topics)</span>.
+        <span class="text-body"> agent ${maxConcurrent}</span>,
+        <span class="text-body"> subagent ${subagentMaxConcurrent}</span>
+        <span class="text-fg-dim"> (${topicCount} topics)</span>.
       </p>
-      <p class="text-[11px] text-gray-500">
+      <p class="text-[11px] text-fg-muted">
         This registry can drift if topics are created, renamed, or removed
         outside this page. Your agent will update the registry if it notices a
         discrepancy.

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);