@chrysb/alphaclaw 0.8.1 → 0.8.2

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

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

package/lib/public/js/components/update-action-button.js

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { PageHeader } from "../page-header.js";
 import { OverviewSection } from "./overview-section.js";
@@ -42,7 +42,7 @@ export const UsageTab = ({ sessionId = "" }) => {
         `}
       />
       ${state.error
-        ? html`<div class="text-xs text-red-300 bg-red-950/30 border border-red-900 rounded px-3 py-2">
+        ? html`<div class="text-xs text-status-error bg-status-error-bg border border-status-error-border rounded px-3 py-2">
             ${state.error}
           </div>`
         : null}

package/lib/public/js/components/usage-tab/overview-section.js

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

package/lib/public/js/components/usage-tab/sessions-section.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 {
   formatDurationCompactMs,
   formatInteger,
@@ -51,14 +51,14 @@ const SessionInlineDetail = ({
   if (loadingDetail) {
     return html`
       <div class="ac-history-body">
-        <p class="text-xs text-gray-500">Loading session detail...</p>
+        <p class="text-xs text-fg-muted">Loading session detail...</p>
       </div>
     `;
   }
   if (!detail) {
     return html`
       <div class="ac-history-body">
-        <p class="text-xs text-gray-500">Session detail not available.</p>
+        <p class="text-xs text-fg-muted">Session detail not available.</p>
       </div>
     `;
   }
@@ -68,20 +68,20 @@ const SessionInlineDetail = ({
   return html`
     <div class="ac-history-body space-y-3 border-0 pt-0 mt-0">
       <div>
-        <p class="text-[11px] text-gray-500 mb-1">Session key</p>
-        <p class="text-xs text-gray-300 font-mono break-all">${sessionKeyValue || "n/a"}</p>
+        <p class="text-[11px] text-fg-muted mb-1">Session key</p>
+        <p class="text-xs text-body font-mono break-all">${sessionKeyValue || "n/a"}</p>
       </div>
       <div class="mt-1.5">
-        <p class="text-[11px] text-gray-500 mb-1">Model breakdown</p>
+        <p class="text-[11px] text-fg-muted mb-1">Model breakdown</p>
         ${(detail.modelBreakdown || []).length === 0
-          ? html`<p class="text-xs text-gray-500">No model usage recorded.</p>`
+          ? html`<p class="text-xs text-fg-muted">No model usage recorded.</p>`
           : html`
               <div class="space-y-1.5">
                 ${(detail.modelBreakdown || []).map(
                   (row) => html`
-                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
-                      <span class="text-gray-300 truncate">${row.model || "unknown"}</span>
-                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-surface transition-colors">
+                      <span class="text-body truncate">${row.model || "unknown"}</span>
+                      <span class="inline-flex items-center gap-3 text-fg-muted shrink-0">
                         <span>${formatInteger(row.totalTokens)} tok</span>
                         <span>${formatUsd(row.totalCost)}</span>
                         <span>${formatCountLabel(row.turnCount, "turn", "turns")}</span>
@@ -93,16 +93,16 @@ const SessionInlineDetail = ({
             `}
       </div>
       <div>
-        <p class="text-[11px] text-gray-500 mb-1">Tool usage</p>
+        <p class="text-[11px] text-fg-muted mb-1">Tool usage</p>
         ${(detail.toolUsage || []).length === 0
-          ? html`<p class="text-xs text-gray-500">No tool calls recorded.</p>`
+          ? html`<p class="text-xs text-fg-muted">No tool calls recorded.</p>`
           : html`
               <div class="space-y-1.5">
                 ${(detail.toolUsage || []).map(
                   (row) => html`
-                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
-                      <span class="text-gray-300 truncate">${row.toolName}</span>
-                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-surface transition-colors">
+                      <span class="text-body truncate">${row.toolName}</span>
+                      <span class="inline-flex items-center gap-3 text-fg-muted shrink-0">
                         <span>${formatCountLabel(row.callCount, "call", "calls")}</span>
                         <span>${(Number(row.errorRate || 0) * 100).toFixed(1)}% err</span>
                         <span>${formatDurationCompactMs(row.avgDurationMs)}</span>
@@ -129,7 +129,7 @@ export const SessionsSection = ({
     <h2 class="card-label text-xs mb-3">Sessions</h2>
     <div class="ac-history-list">
       ${sessions.length === 0
-        ? html`<p class="text-xs text-gray-500">
+        ? html`<p class="text-xs text-fg-muted">
             ${loadingSessions ? "Loading sessions..." : "No sessions recorded yet."}
           </p>`
         : sessions.map(
@@ -143,13 +143,13 @@ export const SessionsSection = ({
                   onToggleSession(itemSessionId, isOpen);
                 }}
               >
-                <summary class="ac-history-summary hover:bg-white/5 transition-colors">
+                <summary class="ac-history-summary hover:bg-surface transition-colors">
                   <div class="ac-history-summary-row">
                     <span class="inline-flex items-center gap-2 min-w-0">
                       <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
                       <${SessionBadges} session=${item} />
                     </span>
-                    <span class="inline-flex items-center gap-3 shrink-0 text-xs text-gray-500">
+                    <span class="inline-flex items-center gap-3 shrink-0 text-xs text-fg-muted">
                       <span>${formatInteger(item.totalTokens)} tok</span>
                       <span>${formatUsd(item.totalCost)}</span>
                       <span>

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

@@ -4,7 +4,8 @@ import {
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
+import Chart from "chart.js/auto";
 import {
   fetchUsageSessionDetail,
   fetchUsageSessions,
@@ -233,7 +234,6 @@ export const useUsageTab = ({ sessionId = "" }) => {
 
   useEffect(() => {
     const canvas = overviewCanvasRef.current;
-    const Chart = window.Chart;
     if (!canvas || !Chart) return;
     if (overviewChartRef.current) {
       overviewChartRef.current.destroy();

package/lib/public/js/components/watchdog-tab/console/index.js

@@ -1,5 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
+import { FileCopyLineIcon } from "../../icons.js";
 import {
   kWatchdogConsoleTabLogs,
   kWatchdogConsoleTabTerminal,
@@ -22,26 +23,28 @@ export const WatchdogConsoleCard = ({
   logsRef = null,
   logs = "",
   loadingLogs = true,
+  copyingAll = false,
   terminalPanelRef = null,
   terminalHostRef = null,
   terminalInstanceRef = null,
   logsPanelHeightPx = 320,
+  onCopyAll = () => {},
 }) => html`
   <div class="bg-surface border border-border rounded-xl p-4">
     <div class="flex items-center justify-between gap-2 mb-3">
       <div
-        class="inline-flex items-center rounded-lg border border-border bg-black/20 p-0.5"
+        class="inline-flex items-center rounded-lg border border-border bg-field p-0.5"
       >
         <button
           type="button"
-          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabLogs ? "bg-surface text-gray-100" : "text-gray-400 hover:text-gray-200"}`}
+          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabLogs ? "bg-surface text-bright" : "text-fg-muted hover:text-body"}`}
           onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabLogs)}
         >
           Logs
         </button>
         <button
           type="button"
-          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabTerminal ? "bg-surface text-gray-100" : "text-gray-400 hover:text-gray-200"}`}
+          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabTerminal ? "bg-surface text-bright" : "text-fg-muted hover:text-body"}`}
           onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabTerminal)}
         >
           Terminal
@@ -50,7 +53,7 @@ export const WatchdogConsoleCard = ({
       <div class="flex items-center gap-2">
         ${activeConsoleTab === kWatchdogConsoleTabLogs
           ? html`
-              <label class="inline-flex items-center gap-2 text-xs text-gray-400">
+              <label class="inline-flex items-center gap-2 text-xs text-fg-muted">
                 <input
                   type="checkbox"
                   checked=${stickToBottom}
@@ -65,7 +68,7 @@ export const WatchdogConsoleCard = ({
                 ${terminalUiSettling
                   ? null
                   : html`
-                      <span class="text-xs text-gray-500">
+                      <span class="text-xs text-fg-muted">
                         ${connectingTerminal
                           ? "Connecting..."
                           : terminalEnded
@@ -93,11 +96,22 @@ export const WatchdogConsoleCard = ({
     <div class=${activeConsoleTab === kWatchdogConsoleTabLogs ? "" : "hidden"}>
       <pre
         ref=${logsRef}
-        class="watchdog-logs-panel bg-black/40 border border-border rounded-lg p-3 overflow-auto text-xs text-gray-300 whitespace-pre-wrap break-words"
+        class="watchdog-logs-panel bg-field border border-border rounded-lg p-3 overflow-auto text-xs text-body whitespace-pre-wrap break-words"
         style=${{ height: `${logsPanelHeightPx}px` }}
       >
 ${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre
       >
+      <div class="mt-3 flex justify-end">
+        <button
+          type="button"
+          class=${`ac-btn-secondary text-xs px-2.5 py-1 rounded-lg inline-flex items-center gap-1.5 ${copyingAll ? "opacity-50 cursor-not-allowed" : ""}`}
+          onClick=${onCopyAll}
+          disabled=${copyingAll}
+        >
+          <${FileCopyLineIcon} className="w-3.5 h-3.5" />
+          ${copyingAll ? "Copying..." : "Copy all"}
+        </button>
+      </div>
     </div>
     <div
       class=${activeConsoleTab === kWatchdogConsoleTabTerminal

package/lib/public/js/components/watchdog-tab/console/use-console.js

@@ -1,8 +1,11 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { fetchWatchdogLogs } from "../../../lib/api.js";
+import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { readUiSettings, writeUiSettings } from "../../../lib/ui-settings.js";
+import { showToast } from "../../toast.js";
 import {
   clampWatchdogLogsPanelHeight,
+  formatWatchdogCopyAllText,
   kWatchdogConsoleTabLogs,
   kWatchdogConsoleTabTerminal,
   kWatchdogConsoleTabUiSettingKey,
@@ -12,9 +15,11 @@ import {
 } from "../helpers.js";
 import { useWatchdogTerminal } from "../terminal/use-terminal.js";
 
-export const useWatchdogConsole = () => {
+export const useWatchdogConsole = ({
+} = {}) => {
   const [logs, setLogs] = useState("");
   const [loadingLogs, setLoadingLogs] = useState(true);
+  const [copyingAll, setCopyingAll] = useState(false);
   const [stickToBottom, setStickToBottom] = useState(true);
   const [activeConsoleTab, setActiveConsoleTab] = useState(() => {
     const settings = readUiSettings();
@@ -120,9 +125,29 @@ export const useWatchdogConsole = () => {
     setActiveConsoleTab(kWatchdogConsoleTabTerminal);
   };
 
+  const handleCopyAll = async () => {
+    if (copyingAll) return;
+    setCopyingAll(true);
+    try {
+      const text = formatWatchdogCopyAllText({
+        logs,
+      });
+      const copied = await copyTextToClipboard(text);
+      if (!copied) {
+        throw new Error("Could not copy watchdog export");
+      }
+      showToast("Copied watchdog logs", "success");
+    } catch (error) {
+      showToast(error.message || "Could not copy watchdog export", "error");
+    } finally {
+      setCopyingAll(false);
+    }
+  };
+
   return {
     logs,
     loadingLogs,
+    copyingAll,
     stickToBottom,
     setStickToBottom,
     activeConsoleTab,
@@ -132,6 +157,7 @@ export const useWatchdogConsole = () => {
     terminalPanelRef,
     terminalHostRef,
     onRestartTerminalSession,
+    onCopyAll: handleCopyAll,
     ...terminal,
   };
 };

package/lib/public/js/components/watchdog-tab/helpers.js

@@ -4,18 +4,28 @@ export const kWatchdogConsoleTabUiSettingKey = "watchdogConsoleTab";
 export const kWatchdogLogsPanelHeightUiSettingKey = "watchdogLogsPanelHeightPx";
 export const kWatchdogLogsPanelDefaultHeightPx = 320;
 export const kWatchdogLogsPanelMinHeightPx = 160;
-export const kXtermCssUrl =
-  "https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css";
+export const kXtermCssUrl = "/css/vendor/xterm.css";
 export const kWatchdogTerminalWsPath = "/api/watchdog/terminal/ws";
 
 let xtermModulesPromise = null;
 
 export const loadXtermModules = () => {
   if (!xtermModulesPromise) {
-    xtermModulesPromise = Promise.all([
-      import("https://esm.sh/@xterm/xterm@5.5.0"),
-      import("https://esm.sh/@xterm/addon-fit@0.10.0"),
-    ]);
+    xtermModulesPromise = Promise.all([import("@xterm/xterm"), import("@xterm/addon-fit")]).then(
+      ([xtermModule, fitAddonModule]) => {
+        const Terminal =
+          xtermModule?.Terminal || xtermModule?.default?.Terminal || null;
+        const FitAddon =
+          fitAddonModule?.FitAddon || fitAddonModule?.default?.FitAddon || null;
+        if (typeof Terminal !== "function") {
+          throw new Error("Xterm Terminal export not found");
+        }
+        if (typeof FitAddon !== "function") {
+          throw new Error("Xterm FitAddon export not found");
+        }
+        return { Terminal, FitAddon };
+      },
+    );
   }
   return xtermModulesPromise;
 };
@@ -104,3 +114,22 @@ export const getIncidentStatusTone = (event) => {
     label: "Unknown",
   };
 };
+
+export const formatWatchdogCopyAllText = ({
+  logs = "",
+  generatedAt = null,
+} = {}) => {
+  const sections = [];
+  const generatedAtLabel =
+    generatedAt instanceof Date && !Number.isNaN(generatedAt.getTime())
+      ? generatedAt.toISOString()
+      : new Date().toISOString();
+
+  sections.push(`# AlphaClaw Watchdog Export`);
+  sections.push(`Generated at: ${generatedAtLabel}`);
+
+  sections.push(`## Gateway Logs`);
+  sections.push(String(logs || "").trim() || "No logs yet.");
+
+  return sections.join("\n\n").trim();
+};

package/lib/public/js/components/watchdog-tab/incidents/index.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { getIncidentStatusTone } from "../helpers.js";
 
 const html = htm.bind(h);
@@ -11,13 +11,13 @@ export const WatchdogIncidentsCard = ({
   <div class="bg-surface border border-border rounded-xl p-4">
     <div class="flex items-center justify-between gap-2 mb-3">
       <h2 class="card-label">Recent incidents</h2>
-      <button class="text-xs text-gray-400 hover:text-gray-200" onclick=${onRefresh}>
+      <button class="text-xs text-fg-muted hover:text-body" onclick=${onRefresh}>
         Refresh
       </button>
     </div>
     <div class="ac-history-list">
       ${events.length === 0 &&
-      html`<p class="text-xs text-gray-500">No incidents recorded.</p>`}
+      html`<p class="text-xs text-fg-muted">No incidents recorded.</p>`}
       ${events.map((event) => {
         const tone = getIncidentStatusTone(event);
         return html`
@@ -40,9 +40,9 @@ export const WatchdogIncidentsCard = ({
                 ></span>
               </div>
             </summary>
-            <div class="ac-history-body text-xs text-gray-400">
+            <div class="ac-history-body text-xs text-fg-muted">
               <div>Source: ${event.source || "unknown"}</div>
-              <pre class="mt-2 bg-black/30 rounded p-2 whitespace-pre-wrap break-words">
+              <pre class="mt-2 bg-field rounded p-2 whitespace-pre-wrap break-words">
 ${typeof event.details === "string"
                   ? event.details
                   : JSON.stringify(event.details || {}, null, 2)}</pre

package/lib/public/js/components/watchdog-tab/incidents/use-incidents.js

@@ -1,4 +1,4 @@
-import { useEffect } from "https://esm.sh/preact/hooks";
+import { useEffect } from "preact/hooks";
 import { usePolling } from "../../../hooks/usePolling.js";
 import { fetchWatchdogEvents } from "../../../lib/api.js";
 

package/lib/public/js/components/watchdog-tab/index.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { Gateway } from "../gateway.js";
 import { useWatchdogTab } from "./use-watchdog-tab.js";
 import { WatchdogResourcesCard } from "./resources/index.js";
@@ -69,10 +69,12 @@ export const WatchdogTab = ({
         logsRef=${state.logsRef}
         logs=${state.logs}
         loadingLogs=${state.loadingLogs}
+        copyingAll=${state.copyingAll}
         terminalPanelRef=${state.terminalPanelRef}
         terminalHostRef=${state.terminalHostRef}
         terminalInstanceRef=${state.terminalInstanceRef}
         logsPanelHeightPx=${state.logsPanelHeightPx}
+        onCopyAll=${state.onCopyAll}
       />
 
       <${WatchdogIncidentsCard}

package/lib/public/js/components/watchdog-tab/resource-bar.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);
 
@@ -21,7 +21,7 @@ export const ResourceBar = ({
     onclick=${onToggle || undefined}
   >
     <span
-      class=${`text-xs text-gray-400 ${onToggle ? "group-hover:text-gray-200 transition-colors" : ""}`}
+      class=${`text-xs text-fg-muted ${onToggle ? "group-hover:text-body transition-colors" : ""}`}
       >${label}</span
     >
     <div
@@ -53,7 +53,7 @@ export const ResourceBar = ({
           `}
     </div>
     <div class="flex flex-wrap items-center gap-x-3 mt-2.5">
-      <span class="text-xs text-gray-500 font-mono flex-1">${detail}</span>
+      <span class="text-xs text-fg-muted font-mono flex-1">${detail}</span>
       ${expanded &&
       segments &&
       segments
@@ -61,7 +61,7 @@ export const ResourceBar = ({
         .map(
           (segment) => html`
             <span
-              class="inline-flex items-center gap-1 text-xs text-gray-500 font-mono"
+              class="inline-flex items-center gap-1 text-xs text-fg-muted font-mono"
             >
               <span
                 class="inline-block w-1.5 h-1.5 rounded-full"