@chrysb/alphaclaw 0.8.1 → 0.8.3-beta.0

package/lib/public/js/components/routes/cron-route.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 { CronTab } from "../cron-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/doctor-route.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 { DoctorTab } from "../doctor/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/envars-route.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 { Envars } from "../envars.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/general-route.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 { GeneralTab } from "../general/index.js";
 
 const html = htm.bind(h);

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

@@ -1,5 +1,6 @@
 export { AgentsRoute } from "./agents-route.js";
 export { BrowseRoute } from "./browse-route.js";
+export { ChatRoute } from "./chat-route.js";
 export { CronRoute } from "./cron-route.js";
 export { DoctorRoute } from "./doctor-route.js";
 export { EnvarsRoute } from "./envars-route.js";

package/lib/public/js/components/routes/models-route.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 { Models } from "../models-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/nodes-route.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 { NodesTab } from "../nodes-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/providers-route.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 { Providers } from "../providers.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/route-redirect.js

@@ -1,5 +1,5 @@
-import { useEffect } from "https://esm.sh/preact/hooks";
-import { useLocation } from "https://esm.sh/wouter-preact";
+import { useEffect } from "preact/hooks";
+import { useLocation } from "wouter-preact";
 
 export const RouteRedirect = ({ to }) => {
   const [, setLocation] = useLocation();

package/lib/public/js/components/routes/telegram-route.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 { TelegramWorkspace } from "../telegram-workspace/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/usage-route.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 { UsageTab } from "../usage-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/watchdog-route.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 { WatchdogTab } from "../watchdog-tab/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/routes/webhooks-route.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 { Webhooks } from "../webhooks/index.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/scope-picker.js

@@ -1,6 +1,6 @@
-import { h } from 'https://esm.sh/preact';
-import { useState } from 'https://esm.sh/preact/hooks';
-import htm from 'https://esm.sh/htm';
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
 const html = htm.bind(h);
 
 export const SERVICES = [
@@ -43,19 +43,19 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       const api = status[s.key];
       let apiIndicator = null;
       if (loading && !api && (readOn || writeOn)) {
-        apiIndicator = html`<span class="text-gray-500 text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full ac-spinner"></span></span>`;
+        apiIndicator = html`<span class="text-fg-muted text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-fg-muted border-t-transparent rounded-full ac-spinner"></span></span>`;
       } else if (api) {
         if (api.status === 'ok') {
-          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-green-500 hover:text-green-300 text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;
+          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-status-success-muted hover:text-status-success text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;
         } else if (api.status === 'not_enabled') {
-          apiIndicator = html`<a href=${api.enableUrl} target="_blank" class="text-red-400 hover:text-red-300 text-xs underline">Enable API</a>`;
+          apiIndicator = html`<a href=${api.enableUrl} target="_blank" class="text-status-error-muted hover:text-status-error text-xs underline">Enable API</a>`;
         } else if (api.status === 'error') {
-          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-yellow-500 hover:text-yellow-300 text-xs underline">Enable API</a>`;
+          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-status-warning-muted hover:text-status-warning text-xs underline">Enable API</a>`;
         }
       }
 
       return html`
-        <div class="flex items-center justify-between bg-black/30 rounded-lg px-3 py-2">
+        <div class="flex items-center justify-between bg-field rounded-lg px-3 py-2">
           <span class="text-sm">${s.icon} ${s.label}</span>
           <div class="flex items-center gap-2">
             ${apiIndicator}
@@ -68,7 +68,7 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       <button
         type="button"
         onclick=${() => setShowAll((prev) => !prev)}
-        class="ml-3 text-xs text-gray-500 hover:text-gray-300"
+        class="ml-3 text-xs text-fg-muted hover:text-body"
       >
         ${showAll ? 'Show fewer services' : `Show more services (${SERVICES.length - kVisibleCount})`}
       </button>

package/lib/public/js/components/secret-input.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import htm from "htm";
 import { LoadingSpinner } from "./loading-spinner.js";
 const html = htm.bind(h);
 
@@ -38,14 +38,14 @@ export const SecretInput = ({
         autocomplete="off"
       />
       ${loading
-        ? html`<${LoadingSpinner} className="h-3 w-3 text-gray-500 shrink-0" />`
+        ? html`<${LoadingSpinner} className="h-3 w-3 text-fg-muted shrink-0" />`
         : null}
       ${showToggle
         ? html`<button
             type="button"
             onclick=${() => setVisible((v) => !v)}
             disabled=${isDisabled}
-            class="text-gray-500 hover:text-gray-300 px-1 text-xs shrink-0"
+            class="text-fg-muted hover:text-body px-1 text-xs shrink-0"
           >
             ${visible ? "Hide" : "Show"}
           </button>`

package/lib/public/js/components/segmented-control.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 { Tooltip } from "./tooltip.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/session-select-field.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 { getSessionRowKey } from "../lib/session-keys.js";
 
 const html = htm.bind(h);
@@ -20,11 +20,11 @@ export const SessionSelectField = ({
   emptyStateText = "",
   loadingLabel = "Loading sessions...",
   containerClassName = "space-y-2",
-  labelClassName = "text-xs text-gray-500",
-  selectClassName = "w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500",
-  helperClassName = "text-xs text-gray-500",
-  statusClassName = "text-xs text-gray-500",
-  errorClassName = "text-xs text-red-400",
+  labelClassName = "text-xs text-fg-muted",
+  selectClassName = "w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body focus:border-fg-muted",
+  helperClassName = "text-xs text-fg-muted",
+  statusClassName = "text-xs text-fg-muted",
+  errorClassName = "text-xs text-status-error-muted",
 }) => {
   const resolvedValue = selectedSessionKey || (allowNone ? noneValue : "");
   const isDisabled = disabled || loading;

package/lib/public/js/components/sidebar-git-panel.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 { fetchBrowseGitSummary, syncBrowseChanges } from "../lib/api.js";
 import { formatLocaleDateTime } from "../lib/format.js";
 import { ActionButton } from "./action-button.js";

package/lib/public/js/components/sidebar.js

@@ -1,12 +1,13 @@
-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 {
   AddLineIcon,
   AlarmLineIcon,
   BarChartLineIcon,
   Brain2LineIcon,
   BracesLineIcon,
+  ChatVoiceLineIcon,
   ComputerLineIcon,
   EyeLineIcon,
   FolderLineIcon,
@@ -93,6 +94,10 @@ export const AppSidebar = ({
   selectedAgentId = "",
   onSelectAgent = () => {},
   onAddAgent = () => {},
+  chatSessions = [],
+  selectedChatSessionKey = "",
+  onSelectChatSession = () => {},
+  onStartChat = () => {},
 }) => {
   const browseLayoutRef = useRef(null);
   const browseBottomPanelRef = useRef(null);
@@ -208,6 +213,14 @@ export const AppSidebar = ({
       >
         <${FolderLineIcon} className="sidebar-tab-icon" />
       </button>
+      <button
+        class=${`sidebar-tab ${sidebarTab === "chat" ? "active" : ""}`}
+        aria-label="Chat tab"
+        title="Chat"
+        onclick=${() => onSelectSidebarTab("chat")}
+      >
+        <${ChatVoiceLineIcon} className="sidebar-tab-icon" />
+      </button>
     </div>
     <div
       style=${{
@@ -283,6 +296,45 @@ export const AppSidebar = ({
           : null}
       </div>
     </div>
+    <div
+      style=${{
+        display: sidebarTab === "chat" ? "flex" : "none",
+        flexDirection: "column",
+        flex: "1 1 auto",
+        minHeight: 0,
+      }}
+    >
+      <div class="sidebar-chat-header">
+        <div class="sidebar-label sidebar-chat-label">Sessions</div>
+        <button
+          type="button"
+          class="sidebar-chat-new-button"
+          onclick=${onStartChat}
+          title="New chat"
+          aria-label="New chat"
+        >
+          <${AddLineIcon} className="sidebar-chat-new-icon" />
+        </button>
+      </div>
+      <div class="sidebar-chat-sessions-list">
+        ${chatSessions.length === 0
+          ? html`<div class="sidebar-chat-empty">No sessions found</div>`
+          : chatSessions.map(
+              (sessionRow) => html`
+                <button
+                  key=${sessionRow.key}
+                  class=${`sidebar-chat-session-item ${selectedChatSessionKey === sessionRow.key ? "active" : ""}`}
+                  onclick=${() => onSelectChatSession(sessionRow.key)}
+                  title=${sessionRow.label || sessionRow.key}
+                >
+                  <span class="sidebar-chat-session-name"
+                    >${sessionRow.label || sessionRow.key}</span
+                  >
+                </button>
+              `,
+            )}
+      </div>
+    </div>
     <div
       style=${{
         display: sidebarTab === "browse" ? "flex" : "none",

package/lib/public/js/components/summary-stat-card.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 
 const html = htm.bind(h);
 
@@ -7,7 +7,7 @@ export const SummaryStatCard = ({
   title = "",
   value = "—",
   toneClassName = "",
-  valueClassName = "text-lg font-semibold text-gray-200",
+  valueClassName = "text-lg font-semibold text-body",
   monospace = false,
 } = {}) => html`
   <div class="bg-surface border border-border rounded-xl p-4">

package/lib/public/js/components/telegram-workspace/index.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 * as api from "../../lib/telegram-api.js";
 import {
@@ -86,7 +86,7 @@ const removeTelegramWorkspaceCache = (accountId) => {
 const BackButton = ({ onBack }) => html`
   <button
     onclick=${onBack}
-    class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 transition-colors mb-4"
+    class="flex items-center gap-1.5 text-sm text-fg-muted hover:text-body transition-colors mb-4"
   >
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
       <path
@@ -121,20 +121,20 @@ const MultiGroupView = ({
           >
             <button
               onclick=${() => toggle(g.groupId)}
-              class="w-full flex items-center justify-between px-3 py-2.5 bg-black/20 hover:bg-black/30 transition-colors text-left"
+              class="w-full flex items-center justify-between px-3 py-2.5 bg-field hover:bg-field transition-colors text-left"
             >
               <div>
-                <p class="text-sm text-gray-300 font-medium">
+                <p class="text-sm text-body font-medium">
                   ${g.groupName || g.groupId}
                 </p>
-                <p class="text-[11px] text-gray-500 font-mono">${g.groupId}</p>
+                <p class="text-[11px] text-fg-muted font-mono">${g.groupId}</p>
               </div>
               <svg
                 width="16"
                 height="16"
                 viewBox="0 0 16 16"
                 fill="currentColor"
-                class="text-gray-500 transition-transform ${expandedGroupId ===
+                class="text-fg-muted transition-transform ${expandedGroupId ===
                 g.groupId
                   ? "rotate-180"
                   : ""}"
@@ -339,7 +339,7 @@ export const TelegramWorkspace = ({ accountId = "default", onBack }) => {
         ${!workspaceConfig.ready
           ? html`
               <div class="min-h-[220px] flex items-center justify-center">
-                <p class="text-sm text-gray-500">Loading workspace...</p>
+                <p class="text-sm text-fg-muted">Loading workspace...</p>
               </div>
             `
           : workspaceConfig.configured
@@ -393,7 +393,7 @@ export const TelegramWorkspace = ({ accountId = "default", onBack }) => {
                       Set Up Telegram Workspace
                     </h2>
                   </div>
-                  <span class="text-xs text-gray-500"
+                  <span class="text-xs text-fg-muted"
                     >Step ${step + 1} of ${kSteps.length}</span
                   >
                 </div>

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.