@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/device-pairings.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 { ActionButton } from './action-button.js';
 const html = htm.bind(h);
 
@@ -36,24 +36,24 @@ const DeviceRow = ({ d, onApprove, onReject }) => {
 
   if (busy === 'approve') {
     return html`
-      <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
-        <span class="text-green-400 text-sm">Approved</span>
-        <span class="text-gray-500 text-xs">${title}</span>
+      <div class="bg-field rounded-lg p-3 mb-2 flex items-center gap-2">
+        <span class="text-status-success text-sm">Approved</span>
+        <span class="text-fg-muted text-xs">${title}</span>
       </div>`;
   }
   if (busy === 'reject') {
     return html`
-      <div class="bg-black/30 rounded-lg p-3 mb-2 flex items-center gap-2">
-        <span class="text-gray-400 text-sm">Rejected</span>
-        <span class="text-gray-500 text-xs">${title}</span>
+      <div class="bg-field rounded-lg p-3 mb-2 flex items-center gap-2">
+        <span class="text-fg-muted text-sm">Rejected</span>
+        <span class="text-fg-muted text-xs">${title}</span>
       </div>`;
   }
 
   return html`
-    <div class="bg-black/30 rounded-lg p-3 mb-2">
+    <div class="bg-field rounded-lg p-3 mb-2">
       <div class="flex items-center gap-2 mb-2">
         <span class="font-medium text-sm">${title}</span>
-        ${subtitle && html`<span class="text-xs text-gray-500">${subtitle}</span>`}
+        ${subtitle && html`<span class="text-xs text-fg-muted">${subtitle}</span>`}
       </div>
       <div class="flex gap-2">
         <${ActionButton}
@@ -79,7 +79,7 @@ export const DevicePairings = ({ pending, onApprove, onReject }) => {
 
   return html`
     <div class="mt-3 pt-3 border-t border-border">
-      <p class="text-xs text-gray-500 mb-2">Pending device pairings</p>
+      <p class="text-xs text-fg-muted mb-2">Pending device pairings</p>
       ${pending.map((d) => html`<${DeviceRow} key=${d.id} d=${d} onApprove=${onApprove} onReject=${onReject} />`)}
     </div>`;
 };

package/lib/public/js/components/doctor/findings-list.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 { Badge } from "../badge.js";
 import { ActionButton } from "../action-button.js";
 import {
@@ -65,7 +65,7 @@ const SnippetBlock = ({ item, onOpenFile, isOutdated }) => {
   return html`
     <div class="mt-1.5 rounded-lg border border-border overflow-hidden">
       <div
-        class="flex items-center justify-between px-3 py-1.5 bg-black/30 border-b border-border"
+        class="flex items-center justify-between px-3 py-1.5 bg-field border-b border-border"
       >
         <button
           type="button"
@@ -81,21 +81,21 @@ const SnippetBlock = ({ item, onOpenFile, isOutdated }) => {
           ${formatPathLabel(item.path, item.startLine, item.endLine)}
         </button>
         ${isOutdated
-          ? html`<span class="text-[10px] text-yellow-500/80"
+          ? html`<span class="text-[10px] text-status-warning-muted/80"
               >file changed since scan</span
             >`
-          : html`<span class="text-[10px] text-gray-600">snapshot</span>`}
+          : html`<span class="text-[10px] text-fg-dim">snapshot</span>`}
       </div>
       <div class="relative">
         <div
-          class="px-3 py-2 text-[11px] leading-[18px] font-mono text-gray-300 bg-black/20"
+          class="px-3 py-2 text-[11px] leading-[18px] font-mono text-body bg-field"
           style="white-space:pre-wrap;word-break:break-word"
         >
           ${visibleLines.map(
             (line, index) => html`
               <div class="flex">
                 <span
-                  class="text-gray-600 select-none shrink-0"
+                  class="text-fg-dim select-none shrink-0"
                   style="width:${gutterWidth +
                   1}ch;text-align:right;margin-right:1ch"
                   >${snippet.startLine + index}</span
@@ -104,7 +104,7 @@ const SnippetBlock = ({ item, onOpenFile, isOutdated }) => {
             `,
           )}
           ${expanded && snippet.truncated
-            ? html`<div class="text-gray-600 italic pl-1">... truncated</div>`
+            ? html`<div class="text-fg-dim italic pl-1">... truncated</div>`
             : ""}
         </div>
         ${isCollapsible && !expanded
@@ -115,7 +115,7 @@ const SnippetBlock = ({ item, onOpenFile, isOutdated }) => {
                 onClick=${() => setExpanded(true)}
               >
                 <span
-                  class="text-[10px] text-gray-500 hover:text-white flex items-center gap-1 transition-colors"
+                  class="text-[10px] text-fg-muted hover:text-white flex items-center gap-1 transition-colors"
                 >
                   <span
                     class="inline-block text-xs transition-transform"
@@ -131,10 +131,10 @@ const SnippetBlock = ({ item, onOpenFile, isOutdated }) => {
           ? html`
               <button
                 type="button"
-                class="w-full flex items-center justify-center py-1 cursor-pointer bg-black/20 border-t border-border"
+                class="w-full flex items-center justify-center py-1 cursor-pointer bg-field border-t border-border"
                 onClick=${() => setExpanded(false)}
               >
-                <span class="text-[10px] text-gray-500 flex items-center gap-1">
+                <span class="text-[10px] text-fg-muted flex items-center gap-1">
                   <span
                     class="inline-block transition-transform"
                     aria-hidden="true"
@@ -194,7 +194,7 @@ export const DoctorFindingsList = ({
                             <${Badge} tone=${getDoctorPriorityTone(card.priority)}>
                               ${card.priority}
                             </${Badge}>
-                            <h3 class="text-sm font-semibold text-gray-100">
+                            <h3 class="text-sm font-semibold text-bright">
                               ${card.title}
                             </h3>
                           </div>
@@ -205,7 +205,7 @@ export const DoctorFindingsList = ({
                             ${
                               showRunMeta
                                 ? html`
-                                    <span class="text-xs text-gray-600"
+                                    <span class="text-xs text-fg-dim"
                                       >Run #${card.runId}</span
                                     >
                                   `
@@ -217,18 +217,18 @@ export const DoctorFindingsList = ({
                       ${
                         card.summary
                           ? html`<p
-                              class="text-xs text-gray-300 leading-5 pt-1"
+                              class="text-xs text-body leading-5 pt-1"
                             >
                               ${card.summary}
                             </p>`
                           : null
                       }
                     </div>
-                    <details class="group rounded-lg border border-border bg-black/20">
-                      <summary class="list-none cursor-pointer px-3 py-2.5 text-xs text-gray-400 group-open:border-b group-open:border-border">
+                    <details class="group rounded-lg border border-border bg-field">
+                      <summary class="list-none cursor-pointer px-3 py-2.5 text-xs text-fg-muted group-open:border-b group-open:border-border">
                         <span class="inline-flex items-center gap-2">
                           <span
-                            class="inline-block text-gray-500 transition-transform duration-200 group-open:rotate-90"
+                            class="inline-block text-fg-muted transition-transform duration-200 group-open:rotate-90"
                             aria-hidden="true"
                             >▸</span
                           >
@@ -240,7 +240,7 @@ export const DoctorFindingsList = ({
                           <div class="ac-small-heading">
                             Recommendation
                           </div>
-                          <p class="text-xs text-gray-200 mt-1 leading-5">
+                          <p class="text-xs text-body mt-1 leading-5">
                             ${card.recommendation}
                           </p>
                         </div>
@@ -265,7 +265,7 @@ export const DoctorFindingsList = ({
                                       return html`
                                         <button
                                           type="button"
-                                          class="text-[11px] px-2 py-1 rounded-md bg-black/30 border border-border font-mono text-gray-200 hover:text-white hover:border-gray-500 cursor-pointer transition-colors"
+                                          class="text-[11px] px-2 py-1 rounded-md bg-field border border-border font-mono text-body hover:text-white hover:border-fg-muted cursor-pointer transition-colors"
                                           onClick=${(e) => {
                                             e.preventDefault();
                                             onOpenFile(
@@ -294,7 +294,7 @@ export const DoctorFindingsList = ({
                                   <div class="mt-1 space-y-2">
                                     ${card.evidence.map(
                                       (item) => html`
-                                        <div class="text-xs text-gray-400">
+                                        <div class="text-xs text-fg-muted">
                                           ${renderEvidenceLine(
                                             item,
                                             onOpenFile,
@@ -363,7 +363,7 @@ export const DoctorFindingsList = ({
           ? null
           : html`
               <div class="ac-surface-inset rounded-xl p-4 space-y-1.5">
-                <p class="text-xs text-gray-300 leading-5">
+                <p class="text-xs text-body leading-5">
                   No findings currently for this selection.
                 </p>
               </div>

package/lib/public/js/components/doctor/fix-card-modal.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 { sendDoctorCardFix, updateDoctorCardStatus } from "../../lib/api.js";
 import { showToast } from "../toast.js";
 import { AgentSendModal } from "../agent-send-modal.js";

package/lib/public/js/components/doctor/general-warning.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 { getDoctorWarningMessage, shouldShowDoctorWarning } from "./helpers.js";
 
@@ -14,10 +14,10 @@ export const GeneralDoctorWarning = ({
   if (!shouldShowDoctorWarning(doctorStatus, dismissedUntilMs)) return null;
   return html`
     <div class="bg-yellow-500/10 border border-yellow-500/35 rounded-xl p-4">
-      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+      <div class="flex flex-col gap-3">
         <div class="space-y-1">
-          <h2 class="font-semibold text-sm text-yellow-300">Drift Doctor</h2>
-          <p class="text-xs text-yellow-100/80">${getDoctorWarningMessage(doctorStatus)}</p>
+          <h2 class="font-semibold text-sm text-status-warning">Drift Doctor</h2>
+          <p class="text-xs text-status-warning/80">${getDoctorWarningMessage(doctorStatus)}</p>
         </div>
         <div class="flex flex-wrap gap-2">
           <${ActionButton}

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

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { usePolling } from "../../hooks/usePolling.js";
 import {
   fetchDoctorCards,
@@ -237,8 +237,8 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
     [
       "inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-colors",
       selected
-        ? "border-cyan-500/40 bg-cyan-500/10 text-cyan-200 shadow-[0_0_0_1px_rgba(34,211,238,0.08)]"
-        : "border-border bg-black/20 text-gray-300 hover:border-gray-500 hover:text-gray-100",
+        ? "border-cyan-500/40 bg-cyan-500/10 text-status-info shadow-[0_0_0_1px_rgba(34,211,238,0.08)]"
+        : "border-border bg-field text-body hover:border-fg-muted hover:text-bright",
     ].join(" ");
 
   const getRunMarkerClassName = (tone = "neutral") => {
@@ -318,7 +318,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
       ${showInitialLoadingState
         ? html`
             <div class="bg-surface border border-border rounded-xl p-5">
-              <div class="flex items-center gap-3 text-sm text-gray-400">
+              <div class="flex items-center gap-3 text-sm text-fg-muted">
                 <${LoadingSpinner} className="h-4 w-4" />
                 <span>Loading Drift Doctor...</span>
               </div>
@@ -335,15 +335,15 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                       <div
                         class="bg-surface border border-border rounded-xl p-4 flex flex-wrap items-center justify-between gap-3"
                       >
-                        <span class="text-xs text-gray-500">
+                        <span class="text-xs text-fg-muted">
                           Last run ·${" "}
-                          <span class="text-gray-300">
+                          <span class="text-body">
                             ${formatLocaleDateTime(doctorStatus?.lastRunAt, {
                               fallback: "Never",
                             })}
                           </span>
                         </span>
-                        <span class="text-xs text-gray-500">
+                        <span class="text-xs text-fg-muted">
                           ${changeLabel}
                         </span>
                       </div>
@@ -352,7 +352,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                             <div
                               class="bg-surface border border-border rounded-xl p-4 space-y-3"
                             >
-                              <div class="text-xs text-gray-400">
+                              <div class="text-xs text-fg-muted">
                                 ⚠️ ${bootstrapTruncationMessage}
                               </div>
                               <div class="space-y-2">
@@ -363,7 +363,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                                     >
                                       <button
                                         type="button"
-                                        class="font-mono text-gray-200 ac-tip-link hover:underline text-left cursor-pointer"
+                                        class="font-mono text-body ac-tip-link hover:underline text-left cursor-pointer"
                                         onClick=${() => onOpenFile(String(item.path || ""))}
                                       >
                                         ${item.path}
@@ -371,13 +371,13 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                                       <span
                                         class="flex items-center gap-3 whitespace-nowrap"
                                       >
-                                        <span class="text-gray-500">
+                                        <span class="text-fg-muted">
                                           ${item.size}
                                         </span>
                                         <span
                                           class=${item.statusTone === "warning"
-                                            ? "text-yellow-300"
-                                            : "text-red-300"}
+                                            ? "text-status-warning"
+                                            : "text-status-error"}
                                         >
                                           ${item.statusText}
                                         </span>
@@ -387,7 +387,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                                 )}
                               </div>
                               <div class="border-t border-border"></div>
-                              <p class="text-xs text-gray-500 leading-5">
+                              <p class="text-xs text-fg-muted leading-5">
                                 Truncated files become partially hidden from
                                 your agent and could cause drift.
                               </p>
@@ -399,7 +399,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                 ${showDoctorStaleBanner
                   ? html`
                       <div
-                        class="text-xs text-yellow-300 bg-yellow-500/10 border border-yellow-500/35 rounded-lg px-3 py-2"
+                        class="text-xs text-status-warning bg-yellow-500/10 border border-yellow-500/35 rounded-lg px-3 py-2"
                       >
                         Doctor should be run again because the latest completed
                         run is older than one week and the workspace has
@@ -462,7 +462,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                 ${overflowRuns.length
                   ? html`
                       <label
-                        class="flex items-center gap-2 text-xs text-gray-500"
+                        class="flex items-center gap-2 text-xs text-fg-muted"
                       >
                         <select
                           value=${selectedOverflowRunValue}
@@ -473,7 +473,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                             if (!nextValue) return;
                             setSelectedRunFilter(nextValue);
                           }}
-                          class="bg-black/20 border border-border rounded-full px-3 py-1.5 text-xs text-gray-300 focus:border-gray-500"
+                          class="bg-field border border-border rounded-full px-3 py-1.5 text-xs text-body focus:border-fg-muted"
                         >
                           <option value="">More runs</option>
                           ${overflowRuns.map(
@@ -487,14 +487,14 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                       </label>
                     `
                   : null}
-                <label class="flex items-center gap-2 text-xs text-gray-500">
+                <label class="flex items-center gap-2 text-xs text-fg-muted">
                   <select
                     value=${selectedStatusFilter}
                     onChange=${(event) =>
                       setSelectedStatusFilter(
                         String(event.currentTarget?.value || "open"),
                       )}
-                    class="bg-black/20 border border-border rounded-full px-3 py-1.5 text-xs text-gray-300 focus:border-gray-500"
+                    class="bg-field border border-border rounded-full px-3 py-1.5 text-xs text-body focus:border-fg-muted"
                   >
                     ${statusFilterOptions.map(
                       (option) => html`
@@ -508,13 +508,13 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                 ? html`
                     <div class="ac-surface-inset rounded-xl p-4 space-y-1.5">
                       <div
-                        class="text-[11px] uppercase tracking-wide text-gray-500"
+                        class="text-[11px] uppercase tracking-wide text-fg-muted"
                       >
                         ${selectedRun?.id
                           ? `Run #${selectedRun.id} summary`
                           : "Run summary"}
                       </div>
-                      <p class="text-xs text-gray-300 leading-5">
+                      <p class="text-xs text-body leading-5">
                         ${selectedRunSummary}
                       </p>
                     </div>
@@ -523,7 +523,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
               ${selectedRunIsInProgress
                 ? html`
                     <div class="ac-surface-inset rounded-xl p-4">
-                      <div class="flex items-center gap-2 text-xs leading-5 text-gray-400">
+                      <div class="flex items-center gap-2 text-xs leading-5 text-fg-muted">
                         <${LoadingSpinner} className="h-3.5 w-3.5" />
                         <span>
                           Run in progress. Findings will appear when analysis
@@ -557,10 +557,10 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
               <div class="max-w-md w-full flex flex-col items-center gap-4">
                 <${DoctorEmptyStateIcon} />
                 <div class="space-y-2">
-                  <h2 class="font-semibold text-lg text-gray-100">
+                  <h2 class="font-semibold text-lg text-bright">
                     Workspace health review
                   </h2>
-                  <p class="text-xs text-gray-400 leading-5">
+                  <p class="text-xs text-fg-muted leading-5">
                     Drift Doctor scans the workspace for guidance drift,
                     misplaced instructions, redundant docs, and cleanup
                     opportunities.
@@ -576,7 +576,7 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                     loadingLabel="Running..."
                     title=${runDoctorDisabledReason}
                   />
-                  <p class="text-xs text-gray-500 leading-5 mt-10">
+                  <p class="text-xs text-fg-muted leading-5 mt-10">
                     Runs on your main agent and consumes tokens. No
                     changes will be made without your approval.
                   </p>

package/lib/public/js/components/doctor/summary-cards.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 { SummaryStatCard } from "../summary-stat-card.js";
 import { buildDoctorPriorityCounts } from "./helpers.js";
 
@@ -10,9 +10,9 @@ export const DoctorSummaryCards = ({ cards = [] }) => {
   return html`
     <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
       <${SummaryStatCard} title="Open Findings" value=${cards.length} />
-      <${SummaryStatCard} title="P0" value=${counts.P0} toneClassName="text-red-400" />
-      <${SummaryStatCard} title="P1" value=${counts.P1} toneClassName="text-yellow-400" />
-      <${SummaryStatCard} title="P2" value=${counts.P2} toneClassName="text-gray-300" />
+      <${SummaryStatCard} title="P0" value=${counts.P0} toneClassName="text-status-error-muted" />
+      <${SummaryStatCard} title="P1" value=${counts.P1} toneClassName="text-status-warning-muted" />
+      <${SummaryStatCard} title="P2" value=${counts.P2} toneClassName="text-body" />
     </div>
   `;
 };

package/lib/public/js/components/envars.js

@@ -1,11 +1,11 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useState,
   useEffect,
   useCallback,
   useRef,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import { fetchEnvVars, saveEnvVars } from "../lib/api.js";
 import { useCachedFetch } from "../hooks/use-cached-fetch.js";
 import { showToast } from "./toast.js";
@@ -110,7 +110,7 @@ const kHintByKey = {
       >console.anthropic.com</a
     >`,
   ANTHROPIC_TOKEN: html`from
-    <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
+    <code class="text-xs bg-field px-1 rounded">claude setup-token</code>`,
   OPENAI_API_KEY: html`from${" "}
     <a
       href="https://platform.openai.com"
@@ -135,11 +135,11 @@ const kHintByKey = {
       style="color: var(--accent-link)"
       >elevenlabs.io</a
     >${" "} · ${" "}
-    <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also
+    <code class="text-xs bg-field px-1 rounded">XI_API_KEY</code> also
     supported`,
   GITHUB_WORKSPACE_REPO: html`use
-    <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or
-    <code class="text-xs bg-black/30 px-1 rounded"
+    <code class="text-xs bg-field px-1 rounded">owner/repo</code> or
+    <code class="text-xs bg-field px-1 rounded"
       >https://github.com/owner/repo</code
     >`,
   TELEGRAM_BOT_TOKEN: html`from${" "}
@@ -244,7 +244,7 @@ const FeatureIcon = ({ feature }) => {
   return html`
     <${Tooltip} text=${label} widthClass="w-auto" tooltipClassName="whitespace-nowrap">
       <span
-        class="inline-flex items-center justify-center text-gray-500 hover:text-gray-300 focus-within:text-gray-300"
+        class="inline-flex items-center justify-center text-fg-muted hover:text-body focus-within:text-body"
         tabindex="0"
         aria-label=${label}
       >
@@ -287,20 +287,20 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
             onInput=${(e) => onChange(envVar.key, e.target.value)}
             placeholder=${envVar.value ? "" : "not set"}
             isSecret=${!!envVar.value}
-            inputClass="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+            inputClass="flex-1 min-w-0 bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono"
             disabled=${disabled}
           />
           ${envVar.group === "custom"
             ? html`<button
                 onclick=${() => onDelete(envVar.key)}
-                class="text-gray-600 hover:text-red-400 px-1 text-xs shrink-0"
+                class="text-fg-dim hover:text-status-error-muted px-1 text-xs shrink-0"
                 title="Delete"
               >
                 ✕
               </button>`
             : null}
         </div>
-        ${hint ? html`<p class="text-xs text-gray-600 mt-1">${hint}</p>` : null}
+        ${hint ? html`<p class="text-xs text-fg-dim mt-1">${hint}</p>` : null}
       </div>
     </div>
   `;
@@ -590,7 +590,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
                   <button
                     type="button"
                     onclick=${() => setShowAllAiKeys((prev) => !prev)}
-                    class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-300"
+                    class="inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-body"
                   >
                     <${ChevronDownIcon}
                       className=${`transition-transform ${expanded ? "rotate-180" : ""}`}
@@ -623,7 +623,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
       <${PaneShell}
         header=${html`<${PageHeader} title="Envars" />`}
       >
-        <div class="bg-surface border border-border rounded-xl p-4 text-sm text-gray-500">
+        <div class="bg-surface border border-border rounded-xl p-4 text-sm text-fg-muted">
           Loading environment variables...
         </div>
       </${PaneShell}>
@@ -685,7 +685,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
               onInput=${(e) => handleKeyInput(e.target.value)}
               onPaste=${(e) => handlePaste(e, "key")}
               onKeyDown=${(e) => e.key === "Enter" && handleAddVar()}
-              class="w-full bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono uppercase"
+              class="w-full bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono uppercase"
             />
           </div>
           <div class="flex-1 flex gap-2">
@@ -696,11 +696,11 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
               onInput=${(e) => handleValInput(e.target.value)}
               onPaste=${(e) => handlePaste(e, "val")}
               onKeyDown=${(e) => e.key === "Enter" && handleAddVar()}
-              class="flex-1 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+              class="flex-1 bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono"
             />
             <button
               onclick=${handleAddVar}
-              class="text-xs px-3 py-1.5 rounded-lg border border-border text-gray-400 hover:text-gray-200 hover:border-gray-500 shrink-0"
+              class="text-xs px-3 py-1.5 rounded-lg border border-border text-fg-muted hover:text-body hover:border-fg-muted shrink-0"
             >
               + Add
             </button>

package/lib/public/js/components/features.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 { fetchEnvVars } from "../lib/api.js";
 import { useCachedFetch } from "../hooks/use-cached-fetch.js";
 import { Badge } from "./badge.js";
@@ -39,11 +39,11 @@ export const Features = ({ onSwitchTab }) => {
           const status = resolveFeatureStatus(feature, envVars);
           return html`
             <div class="flex justify-between items-center py-1.5">
-              <span class="text-sm text-gray-300">${feature.label}</span>
+              <span class="text-sm text-body">${feature.label}</span>
               ${status.active
                 ? html`
                     <span class="flex items-center gap-2">
-                      <span class="text-xs text-gray-400">
+                      <span class="text-xs text-fg-muted">
                         ${kProviderLabels[status.provider] || status.provider}
                       </span>
                       <${Badge} tone="success">Enabled</${Badge}>

package/lib/public/js/components/file-tree.js

@@ -1,12 +1,12 @@
-import { h } from "https://esm.sh/preact";
+import { h } from "preact";
 import {
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+} from "preact/hooks";
+import htm from "htm";
 import {
   fetchBrowseTree,
   deleteBrowseFile,
@@ -1080,7 +1080,7 @@ export const FileTree = ({
     return html`
       <div class="file-tree-wrap file-tree-wrap-loading">
         <div class="file-tree-state file-tree-state-loading">
-          <${LoadingSpinner} className="h-5 w-5 text-gray-400" />
+          <${LoadingSpinner} className="h-5 w-5 text-fg-muted" />
         </div>
       </div>
     `;

package/lib/public/js/components/file-viewer/diff-viewer.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 { LoadingSpinner } from "../loading-spinner.js";
 
 const html = htm.bind(h);

package/lib/public/js/components/file-viewer/editor-surface.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/file-viewer/frontmatter-panel.js

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

package/lib/public/js/components/file-viewer/index.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";
 import { ConfirmDialog } from "../confirm-dialog.js";
 import { SqliteViewer } from "./sqlite-viewer.js";