@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/onboarding/welcome-import-step.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";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
@@ -100,11 +100,11 @@ const CategoryCard = ({ category, data }) => {
       >
         <div class="flex items-center gap-2">
           <span class="text-sm">${category.icon}</span>
-          <span class="text-xs font-medium text-gray-200"
+          <span class="text-xs font-medium text-body"
             >${category.label}</span
           >
           <span
-            class="text-xs px-1.5 py-0.5 rounded-full bg-cyan-900/40 text-cyan-300"
+            class="text-xs px-1.5 py-0.5 rounded-full bg-status-info-bg text-status-info"
             >${count}</span
           >
         </div>
@@ -112,13 +112,13 @@ const CategoryCard = ({ category, data }) => {
           ${warningCount > 0
             ? html`
                 <span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/30 text-yellow-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-warning-bg text-status-warning"
                 >
                   ⚠ ${warningCount}
                 </span>
               `
             : null}
-          <span class="text-xs text-gray-500">${expanded ? "▲" : "▼"}</span>
+          <span class="text-xs text-fg-muted">${expanded ? "▲" : "▼"}</span>
         </div>
       </button>
       ${expanded &&
@@ -128,7 +128,7 @@ const CategoryCard = ({ category, data }) => {
           ${items.map(
             (item) => html`
               <div
-                class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-gray-500"
+                class="text-xs font-mono bg-field rounded px-2 py-1 text-fg-muted"
               >
                 ${item}
               </div>
@@ -138,7 +138,7 @@ const CategoryCard = ({ category, data }) => {
             ? warningItems.map(
                 (warning) => html`
                   <div
-                    class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-yellow-300"
+                    class="text-xs font-mono bg-field rounded px-2 py-1 text-status-warning"
                   >
                     ${warning.actualPath}
                   </div>
@@ -163,7 +163,7 @@ export const WelcomeImportStep = ({
     return html`
       <div class="flex flex-col items-center justify-center py-8 gap-3">
         <${LoadingSpinner} />
-        <p class="text-sm text-gray-400">Scanning repository...</p>
+        <p class="text-sm text-fg-muted">Scanning repository...</p>
       </div>
     `;
   }
@@ -172,7 +172,7 @@ export const WelcomeImportStep = ({
     return html`
       <div class="space-y-3">
         <div
-          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+          class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
         >
           ${error}
         </div>
@@ -194,8 +194,8 @@ export const WelcomeImportStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Import Summary</h2>
-        <p class="text-xs text-gray-500">
+        <h2 class="text-sm font-medium text-body">Import Summary</h2>
+        <p class="text-xs text-fg-muted">
           ${scanResult.hasOpenclawSetup
             ? "Found an existing OpenClaw setup"
             : "No OpenClaw config detected — we'll set up fresh after import"}
@@ -217,7 +217,7 @@ export const WelcomeImportStep = ({
       ${scanResult.credentials?.found &&
       html`
         <div
-          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+          class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
         >
           Deployment-specific files found (credentials, device identity) — these
           will not be imported.
@@ -226,7 +226,7 @@ export const WelcomeImportStep = ({
       ${hasConflicts &&
       html`
         <div
-          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+          class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
         >
           AlphaClaw-managed files detected
           (${(scanResult.managedConflicts.files || []).join(", ")}). These will
@@ -236,7 +236,7 @@ export const WelcomeImportStep = ({
       ${scanResult.managedEnvConflicts?.found
         ? html`
             <div
-              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+              class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
             >
               AlphaClaw controls deployment tokens and env vars
               (${(scanResult.managedEnvConflicts.vars || []).join(", ")}).
@@ -248,14 +248,14 @@ export const WelcomeImportStep = ({
       ${scanResult.webhooks?.warningCount > 0
         ? html`
             <div
-              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+              class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
             >
               AlphaClaw expects hook transforms at
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >hooks/transforms/name/name-transform.mjs</code
               >. We found some that do not match and will try to patch them
               during import. The originals will be backed up under
-              <code class="text-xs bg-black/30 px-1 rounded"
+              <code class="text-xs bg-field px-1 rounded"
                 >hooks/transforms/_backup</code
               >.
             </div>
@@ -264,13 +264,13 @@ export const WelcomeImportStep = ({
       ${secretCount > 0 &&
       html`
         <div
-          class="bg-cyan-900/20 border border-cyan-800/50 rounded-lg p-3 flex items-center justify-between"
+          class="bg-status-info-bg border border-status-info-border rounded-lg p-3 flex items-center justify-between"
         >
           <div>
-            <span class="text-xs text-cyan-300 font-medium">
+            <span class="text-xs text-status-info font-medium">
               ${`${secretCount} possible secret${secretCount === 1 ? "" : "s"} detected`}
             </span>
-            <p class="text-xs text-gray-500 mt-0.5">
+            <p class="text-xs text-fg-muted mt-0.5">
               Review and extract to environment variables
             </p>
           </div>

package/lib/public/js/components/onboarding/welcome-pairing-step.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";
 
 const html = htm.bind(h);
@@ -38,18 +38,18 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
   };
 
   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 justify-between gap-2 mb-2">
         <div class="font-medium text-sm">
           ${pairing.code || pairing.id || "Pending request"}
         </div>
         <span
-          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400"
+          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-fg-muted"
         >
           Request
         </span>
       </div>
-      <p class="text-xs text-gray-500 mb-3">
+      <p class="text-xs text-fg-muted mb-3">
         Approve to connect this account and finish setup.
       </p>
       <div class="flex gap-2">
@@ -99,7 +99,7 @@ export const WelcomePairingStep = ({
   if (!channel) {
     return html`
       <div
-        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
       >
         Missing channel configuration. Go back and add a Telegram or Discord bot
         token.
@@ -112,14 +112,14 @@ export const WelcomePairingStep = ({
       <div class="min-h-[300px] pb-6 px-6 flex flex-col">
         <div class="flex-1 flex items-center justify-center text-center">
           <div class="space-y-3 max-w-xl mx-auto">
-            <p class="text-sm font-medium text-green-300 mb-12">
+            <p class="text-sm font-medium text-status-success mb-12">
               🎉 Setup complete
             </p>
-            <p class="text-xs text-gray-300">
-              Your ${channelMeta.label} channel is connected. You can switch to
-              ${channelMeta.label} and start using your agent now.
+            <p class="text-xs text-body">
+              Your ${channelMeta.label} channel is connected. You can switch
+              to ${channelMeta.label} and start using your agent now.
             </p>
-            <p class="text-xs text-gray-500 font-normal opacity-85">
+            <p class="text-xs text-fg-muted font-normal opacity-85">
               Continue to the dashboard to explore extras like Google Workspace
               and additional integrations.
             </p>
@@ -175,10 +175,10 @@ export const WelcomePairingStep = ({
                       class="w-8 h-8 mx-auto rounded-md"
                     />`
                   : null}
-                <p class="text-gray-300 text-sm">
+                <p class="text-body text-sm">
                   Send a message to your ${channelMeta.label} bot
                 </p>
-                <p class="text-gray-600 text-xs">
+                <p class="text-fg-dim text-xs">
                   The pairing request will appear here in 5-10 seconds
                 </p>
               </div>
@@ -188,7 +188,7 @@ export const WelcomePairingStep = ({
       ${
         error
           ? html`<div
-              class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+              class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
             >
               ${error}
             </div>`

package/lib/public/js/components/onboarding/welcome-placeholder-review-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useMemo } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { SecretInput } from "../secret-input.js";
 
@@ -18,7 +18,7 @@ const PlaceholderRow = ({ item, value, onInput }) => {
         <div class="min-w-0">
           <div class="flex items-center gap-2 flex-wrap">
             <code
-              class="text-xs text-gray-200 bg-black/30 px-1.5 py-0.5 rounded"
+              class="text-xs text-body bg-field px-1.5 py-0.5 rounded"
               >${item.key}</code
             >
           </div>
@@ -28,7 +28,7 @@ const PlaceholderRow = ({ item, value, onInput }) => {
         value=${value}
         onInput=${(event) => onInput(event.target.value)}
         placeholder="Enter value"
-        inputClass="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+        inputClass="w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body outline-none focus:border-fg-muted font-mono"
       />
     </div>
   `;
@@ -57,7 +57,7 @@ export const WelcomePlaceholderReviewStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Add Missing Env Vars</h2>
+        <h2 class="text-sm font-medium text-body">Add Missing Env Vars</h2>
       </div>
 
       <div class="space-y-2 max-h-80 overflow-y-auto">
@@ -76,7 +76,7 @@ export const WelcomePlaceholderReviewStep = ({
       </div>
 
       <div
-        class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+        class="bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-xs text-status-warning"
       >
         ${unresolvedCount > 0
           ? `${unresolvedCount} detected env var${unresolvedCount === 1 ? "" : "s"} need values. You can continue without them, but the gateway might fail to start.`

package/lib/public/js/components/onboarding/welcome-pre-step.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 { kGithubFlowFresh, kGithubFlowImport } from "./welcome-config.js";
 
 const html = htm.bind(h);
@@ -13,7 +13,7 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         class="w-full flex items-center gap-4 text-left p-4 rounded-xl ac-path-card"
       >
         <div
-          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/30 rounded-lg border border-border text-gray-300"
+          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-field rounded-lg border border-border text-body"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +28,12 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         </div>
         <div>
           <div
-            class="ac-path-title text-sm font-medium text-gray-200 mb-0.5 transition-colors duration-150"
+            class="ac-path-title text-sm font-medium text-body mb-0.5 transition-colors duration-150"
           >
             Start fresh
           </div>
           <div
-            class="ac-path-desc text-xs text-gray-500 transition-colors duration-150"
+            class="ac-path-desc text-xs text-fg-muted transition-colors duration-150"
           >
             Create a new repository and set up your agent from scratch.
           </div>
@@ -46,7 +46,7 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         class="w-full flex items-center gap-4 text-left p-4 rounded-xl ac-path-card"
       >
         <div
-          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/30 rounded-lg border border-border text-gray-300"
+          class="ac-path-icon flex-shrink-0 w-10 h-10 flex items-center justify-center bg-field rounded-lg border border-border text-body"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -66,16 +66,16 @@ export const WelcomePreStep = ({ onSelectFlow }) => {
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-2 mb-0.5">
             <div
-              class="ac-path-title text-sm font-medium text-gray-200 transition-colors duration-150"
+              class="ac-path-title text-sm font-medium text-body transition-colors duration-150"
             >
               Import existing setup
             </div>
-            <span class="shrink-0 ml-1 text-[11px] text-yellow-300">
+            <span class="shrink-0 ml-1 text-[11px] text-status-warning">
               Experimental
             </span>
           </div>
           <div
-            class="ac-path-desc text-xs text-gray-500 transition-colors duration-150"
+            class="ac-path-desc text-xs text-fg-muted transition-colors duration-150"
           >
             Connect an existing repository that already has an OpenClaw setup.
           </div>

package/lib/public/js/components/onboarding/welcome-secret-review-step.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useState, useCallback } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState, useCallback } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
@@ -11,7 +11,7 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
   html`
     <div
       class="border border-border rounded-lg p-3 space-y-2 ${selected
-        ? "bg-cyan-900/10 border-cyan-800/40"
+        ? "bg-status-info-bg border-status-info-border"
         : ""}"
     >
       <div class="flex items-start gap-2">
@@ -23,20 +23,20 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
         />
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-2 flex-wrap">
-            <span class="text-xs font-mono text-gray-300 truncate"
+            <span class="text-xs font-mono text-body truncate"
               >${secret.maskedValue}</span
             >
             ${secret.confidence === "high"
               ? html`<span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-red-900/40 text-red-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-error-bg text-status-error"
                   >high confidence</span
                 >`
               : html`<span
-                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/40 text-yellow-300"
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-status-warning-bg text-status-warning"
                   >possible</span
                 >`}
           </div>
-          <div class="text-xs text-gray-500 mt-1">
+          <div class="text-xs text-fg-muted mt-1">
             Found in${" "}
             <span class="font-mono">${secret.file || "config"}</span>
             ${secret.configPath
@@ -45,7 +45,7 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
           </div>
           ${secret.duplicateIn &&
           html`
-            <div class="text-xs text-yellow-400 mt-1">
+            <div class="text-xs text-status-warning-muted mt-1">
               Also found in${" "}<span class="font-mono"
                 >${secret.duplicateIn}</span
               >
@@ -56,12 +56,12 @@ const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =
       ${selected &&
       html`
         <div class="pl-6">
-          <label class="text-xs text-gray-500">Extract as env var:</label>
+          <label class="text-xs text-fg-muted">Extract as env var:</label>
           <input
             type="text"
             value=${envVarName}
             onInput=${(e) => onEnvVarChange(e.target.value)}
-            class="w-full mt-1 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+            class="w-full mt-1 bg-field border border-border rounded-lg px-3 py-1.5 text-xs text-body outline-none focus:border-fg-muted font-mono"
           />
         </div>
       `}
@@ -134,7 +134,7 @@ export const WelcomeSecretReviewStep = ({
     return html`
       <div class="flex flex-col items-center justify-center py-8 gap-3">
         <${LoadingSpinner} />
-        <p class="text-sm text-gray-400">Applying import...</p>
+        <p class="text-sm text-fg-muted">Applying import...</p>
       </div>
     `;
   }
@@ -142,8 +142,8 @@ export const WelcomeSecretReviewStep = ({
   return html`
     <div class="space-y-3">
       <div>
-        <h2 class="text-sm font-medium text-gray-200">Review Secrets</h2>
-        <p class="text-xs text-gray-500">
+        <h2 class="text-sm font-medium text-body">Review Secrets</h2>
+        <p class="text-xs text-fg-muted">
           Select secrets to extract into environment variables. Inline values in
           config will be replaced with ${"`"}${"${"}ENV_VAR_NAME${"}"}${"`"} references.
         </p>
@@ -152,7 +152,7 @@ export const WelcomeSecretReviewStep = ({
       ${error &&
       html`
         <div
-          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+          class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
         >
           ${error}
         </div>

package/lib/public/js/components/onboarding/welcome-setup-step.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 { LoadingSpinner } from "../loading-spinner.js";
 
 const html = htm.bind(h);
@@ -46,10 +46,10 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
     return html`
       <div class="py-4 flex flex-col items-center text-center gap-3">
         <h3 class="text-lg font-semibold text-white">Setup failed</h3>
-        <p class="text-sm text-gray-500">Fix the values and try again.</p>
+        <p class="text-sm text-fg-muted">Fix the values and try again.</p>
       </div>
       <div
-        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        class="bg-status-error-bg border border-status-error-border rounded-xl p-3 text-status-error text-sm"
       >
         ${error}
       </div>
@@ -87,12 +87,12 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
         <h3 class="text-lg font-semibold text-white">
           Initializing OpenClaw...
         </h3>
-        <p class="text-sm text-gray-500">This could take 10-15 seconds</p>
+        <p class="text-sm text-fg-muted">This could take 10-15 seconds</p>
       </div>
       <div
-        class="absolute bottom-3 left-3 right-3 bg-black/20 border border-border rounded-lg px-3 py-2 text-xs text-gray-500"
+        class="absolute bottom-3 left-3 right-3 bg-field border border-border rounded-lg px-3 py-2 text-xs text-fg-muted"
       >
-        <span class="text-gray-400">${currentTip.label}: </span>
+        <span class="text-fg-muted">${currentTip.label}: </span>
         ${currentTip.text}
       </div>
     </div>

package/lib/public/js/components/overflow-menu.js

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

package/lib/public/js/components/page-header.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/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);
 
@@ -27,22 +27,22 @@ export const PairingRow = ({ p, 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">${label}${accountSuffix} · ${p.code || p.id || '?'}</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">${label}${accountSuffix} · ${p.code || p.id || '?'}</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">${label}${accountSuffix} · ${p.code || p.id || '?'}</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">${label}${accountSuffix} · ${p.code || p.id || '?'}</span>
       </div>`;
   }
 
   return html`
-    <div class="bg-black/30 rounded-lg p-3 mb-2">
-      <div class="font-medium text-sm mb-2">${label}${accountSuffix} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
+    <div class="bg-field rounded-lg p-3 mb-2">
+      <div class="font-medium text-sm mb-2">${label}${accountSuffix} · <code class="text-fg-muted">${p.code || p.id || '?'}</code></div>
       <div class="flex gap-2">
         <${ActionButton}
           onClick=${() => handle("approve")}
@@ -104,12 +104,12 @@ export function Pairings({
           </div>`
         : statusRefreshing
         ? html`<div class="text-center py-4 space-y-2">
-            <p class="text-gray-300 text-sm">Updating pairing status...</p>
+            <p class="text-body text-sm">Updating pairing status...</p>
           </div>`
         : html`<div class="text-center py-4 space-y-2">
             <div class="text-3xl">💬</div>
-            <p class="text-gray-300 text-sm">Send a message to your bot on ${channelList}</p>
-            <p class="text-gray-600 text-xs">The pairing request will appear here — it may take a few moments</p>
+            <p class="text-body text-sm">Send a message to your bot on ${channelList}</p>
+            <p class="text-fg-dim text-xs">The pairing request will appear here — it may take a few moments</p>
           </div>`}
     </div>`;
 }

package/lib/public/js/components/pane-shell.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/pill-tabs.js

@@ -1,14 +1,14 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 
 const html = htm.bind(h);
 
 const kPillBaseClassName =
   "inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium transition-colors";
 const kPillActiveClassName =
-  "border-cyan-500/40 bg-cyan-500/10 text-cyan-200 shadow-[0_0_0_1px_rgba(34,211,238,0.08)]";
+  "border-cyan-500/40 bg-cyan-500/10 text-status-info shadow-[0_0_0_1px_rgba(34,211,238,0.08)]";
 const kPillInactiveClassName =
-  "border-border bg-black/20 text-gray-500 hover:border-gray-500 hover:text-gray-300";
+  "border-border bg-field text-fg-muted hover:border-fg-muted hover:text-body";
 
 export const PillTabs = ({
   tabs = [],

package/lib/public/js/components/pop-actions.js

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