@chrysb/alphaclaw 0.8.1 → 0.8.2

package/lib/public/js/components/cron-tab/cron-insights-panel.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { SegmentedControl } from "../segmented-control.js";
 import { Badge } from "../badge.js";
 import {
@@ -134,7 +134,7 @@ const renderInsightRow = ({
   const topRow = rows[0];
   const overflowRows = rows.slice(1);
   return html`
-    <div class="rounded-lg border border-border bg-black/20 px-3 py-2 space-y-1.5">
+    <div class="rounded-lg border border-border bg-field px-3 py-2 space-y-1.5">
       <button
         type="button"
         class="w-full text-left hover:brightness-110 transition"
@@ -142,8 +142,8 @@ const renderInsightRow = ({
       >
         <div class="flex items-start justify-between gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-100 truncate">${topRow.jobName}</div>
-            <div class="text-xs text-gray-400 truncate mt-1">
+            <div class="text-sm text-bright truncate">${topRow.jobName}</div>
+            <div class="text-xs text-fg-muted truncate mt-1">
               ${`${topRow.primaryLabel} · ${topRow.secondaryLabel}`}
             </div>
           </div>
@@ -157,7 +157,7 @@ const renderInsightRow = ({
           ? html`
               <details class="group">
                 <summary
-                  class="list-none cursor-pointer text-[11px] text-gray-500 hover:text-gray-300"
+                  class="list-none cursor-pointer text-[11px] text-fg-muted hover:text-body"
                 >
                   Show more
                 </summary>
@@ -172,17 +172,17 @@ const renderInsightRow = ({
                       >
                         <div class="flex items-start justify-between gap-3">
                           <div class="min-w-0">
-                            <div class="text-sm text-gray-200 truncate">
+                            <div class="text-sm text-body truncate">
                               ${row.jobName}
                             </div>
                             <div
-                              class="text-[11px] text-gray-500 truncate mt-1"
+                              class="text-[11px] text-fg-muted truncate mt-1"
                             >
                               ${`${row.primaryLabel} · ${row.secondaryLabel}`}
                             </div>
                           </div>
                           <div
-                            class="text-[11px] uppercase tracking-wide text-gray-500"
+                            class="text-[11px] uppercase tracking-wide text-fg-muted"
                           >
                             #${index + 2}
                           </div>

package/lib/public/js/components/cron-tab/cron-job-detail.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 { formatTokenCount } from "./cron-helpers.js";
 import { CronJobUsage } from "./cron-job-usage.js";
@@ -54,7 +54,7 @@ export const CronJobDetail = ({
 }) => {
   if (!job) {
     return html`
-      <div class="h-full flex items-center justify-center text-sm text-gray-500">
+      <div class="h-full flex items-center justify-center text-sm text-fg-muted">
         Select a cron job to view details.
       </div>
     `;

package/lib/public/js/components/cron-tab/cron-job-list.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import htm from "htm";
 import {
   formatCronScheduleLabel,
   formatRelativeCompact,
@@ -350,7 +350,7 @@ export const CronJobList = ({
       </div>
       ${filteredJobs.length === 0
         ? html`
-            <div class="text-xs text-gray-500 px-1 py-2">No cron jobs match your search.</div>
+            <div class="text-xs text-fg-muted px-1 py-2">No cron jobs match your search.</div>
           `
         : null}
     </div>

package/lib/public/js/components/cron-tab/cron-job-settings-card.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 { SegmentedControl } from "../segmented-control.js";
 import { ToggleSwitch } from "../toggle-switch.js";
@@ -113,22 +113,22 @@ export const CronJobSettingsCard = ({
   return html`
     <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
       <div class="flex items-center justify-between gap-3">
-        <div class="text-xs text-gray-500">ID: <code>${job.id}</code></div>
+        <div class="text-xs text-fg-muted">ID: <code>${job.id}</code></div>
       </div>
       <div class="grid grid-cols-2 gap-2 text-xs">
         <div class=${kMetaCardClassName}>
-          <div class="text-gray-500">Schedule</div>
-          <div class="text-gray-300 font-mono">
+          <div class="text-fg-muted">Schedule</div>
+          <div class="text-body font-mono">
             ${formatCronScheduleLabel(job.schedule, {
               includeTimeZoneWhenDifferent: true,
             })}
           </div>
         </div>
         <div class=${kMetaCardClassName}>
-          <div class="text-gray-500">Next run</div>
-          <div class="text-gray-300 font-mono">
+          <div class="text-fg-muted">Next run</div>
+          <div class="text-body font-mono">
             ${formatNextRunAbsolute(job?.state?.nextRunAtMs)}
-            <span class="text-gray-500">
+            <span class="text-fg-muted">
               ${` (${formatNextRunRelativeMs(job?.state?.nextRunAtMs)})`}
             </span>
           </div>
@@ -136,7 +136,7 @@ export const CronJobSettingsCard = ({
       </div>
       <div class="grid grid-cols-3 gap-2 text-xs">
         <div class=${kMetaCardClassName}>
-          <div class="text-gray-500">Session target</div>
+          <div class="text-fg-muted">Session target</div>
           <div class="pt-1">
             <${SegmentedControl}
               options=${kSessionTargetOptions}
@@ -150,7 +150,7 @@ export const CronJobSettingsCard = ({
           </div>
         </div>
         <div class=${kMetaCardClassName}>
-          <div class="text-gray-500">Wake mode</div>
+          <div class="text-fg-muted">Wake mode</div>
           <div class="pt-1">
             <${SegmentedControl}
               options=${kWakeModeOptions}
@@ -164,7 +164,7 @@ export const CronJobSettingsCard = ({
           </div>
         </div>
         <div class=${kMetaCardClassName}>
-          <div class="text-gray-500">Delivery</div>
+          <div class="text-fg-muted">Delivery</div>
           <div class="pt-1">
             <select
               value=${deliverySelectValue}
@@ -187,7 +187,7 @@ export const CronJobSettingsCard = ({
                 }));
               }}
               disabled=${savingChanges}
-              class="w-full bg-black/30 border border-border rounded-lg px-2 py-1.5 text-[11px] text-gray-200 focus:border-gray-500"
+              class="w-full bg-field border border-border rounded-lg px-2 py-1.5 text-[11px] text-body focus:border-fg-muted"
             >
               <option value=${kDeliveryNoneValue}>None</option>
               ${deliverySessionOptions.map(
@@ -200,12 +200,12 @@ export const CronJobSettingsCard = ({
             </select>
           </div>
           ${loadingDeliverySessions
-            ? html`<div class="text-[11px] text-gray-500 pt-1">
+            ? html`<div class="text-[11px] text-fg-muted pt-1">
                 Loading delivery sessions...
               </div>`
             : null}
           ${deliverySessionsError
-            ? html`<div class="text-[11px] text-red-400 pt-1">
+            ? html`<div class="text-[11px] text-status-error-muted pt-1">
                 ${deliverySessionsError}
               </div>`
             : null}

package/lib/public/js/components/cron-tab/cron-job-trends-panel.js

@@ -1,6 +1,7 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import htm from "htm";
+import Chart from "chart.js/auto";
 import { formatCost, formatTokenCount } from "./cron-helpers.js";
 import { formatChartBucketLabel, formatDurationCompactMs } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
@@ -165,7 +166,6 @@ export const CronJobTrendsPanel = ({
   );
   useEffect(() => {
     const canvas = chartCanvasRef.current;
-    const Chart = window.Chart;
     if (!canvas || !Chart) return;
     if (chartInstanceRef.current) {
       chartInstanceRef.current.destroy();
@@ -313,7 +313,7 @@ export const CronJobTrendsPanel = ({
               <canvas ref=${chartCanvasRef}></canvas>
             </div>
           `
-        : html`<div class="text-xs text-gray-500">No run data in this window yet.</div>`}
+        : html`<div class="text-xs text-fg-muted">No run data in this window yet.</div>`}
     </section>
   `;
 };

package/lib/public/js/components/cron-tab/cron-job-usage.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 { formatCost, formatTokenCount } from "./cron-helpers.js";
 import { formatDurationCompactMs } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
@@ -42,35 +42,35 @@ export const CronJobUsage = ({ usage = null, usageDays = 30, onSetUsageDays = ()
       </div>
       <div class="grid grid-cols-3 gap-2 text-xs">
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Total runs</div>
-          <div class="text-gray-200 font-mono">${formatTokenCount(totalRuns)}</div>
+          <div class="text-fg-muted">Total runs</div>
+          <div class="text-body font-mono">${formatTokenCount(totalRuns)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Total tokens</div>
-          <div class="text-gray-200 font-mono">${formatTokenCount(totalTokens)}</div>
+          <div class="text-fg-muted">Total tokens</div>
+          <div class="text-body font-mono">${formatTokenCount(totalTokens)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Total cost</div>
-          <div class="text-gray-200 font-mono">${formatCost(totalCost)}</div>
+          <div class="text-fg-muted">Total cost</div>
+          <div class="text-body font-mono">${formatCost(totalCost)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Avg run time</div>
-          <div class="text-gray-200 font-mono">
+          <div class="text-fg-muted">Avg run time</div>
+          <div class="text-body font-mono">
             ${averageDurationMs > 0 ? formatDurationCompactMs(averageDurationMs) : "—"}
           </div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Avg tokens/run</div>
-          <div class="text-gray-200 font-mono">${formatTokenCount(averageTokensPerRun)}</div>
+          <div class="text-fg-muted">Avg tokens/run</div>
+          <div class="text-body font-mono">${formatTokenCount(averageTokensPerRun)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Avg cost/run</div>
-          <div class="text-gray-200 font-mono">${formatCost(averageCostPerRun)}</div>
+          <div class="text-fg-muted">Avg cost/run</div>
+          <div class="text-body font-mono">${formatCost(averageCostPerRun)}</div>
         </div>
       </div>
-      <div class="text-xs text-gray-500">
+      <div class="text-xs text-fg-muted">
         Dominant model:${" "}
-        <span class="text-gray-300 font-mono">${resolveDominantModel(usage)}</span>
+        <span class="text-body font-mono">${resolveDominantModel(usage)}</span>
       </div>
     </section>
   `;

package/lib/public/js/components/cron-tab/cron-overview.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 {
   buildCronOptimizationWarnings,
   formatTokenCount,
@@ -33,10 +33,10 @@ const kRunStatusFilterOptions = [
 ];
 
 const warningClassName = (tone) => {
-  if (tone === "error") return "border-red-900 bg-red-950/30 text-red-200";
+  if (tone === "error") return "border-status-error-border bg-status-error-bg text-status-error";
   if (tone === "warning")
-    return "border-yellow-900 bg-yellow-950/30 text-yellow-100";
-  return "border-border bg-black/20 text-gray-200";
+    return "border-status-warning-border bg-status-warning-bg text-status-warning";
+  return "border-border bg-field text-body";
 };
 
 const formatWarningsAttentionText = (warnings = []) => {
@@ -277,21 +277,21 @@ export const CronOverview = ({
               <div class="flex items-center justify-between gap-2">
                 <div class="inline-flex items-center gap-2 min-w-0">
                   <${ErrorWarningLineIcon}
-                    className="w-4 h-4 text-yellow-300 shrink-0"
+                    className="w-4 h-4 text-status-warning shrink-0"
                   />
-                  <div class="text-xs text-yellow-100 truncate">
+                  <div class="text-xs text-status-warning truncate">
                     ${formatWarningsAttentionText(warnings)}
                   </div>
                 </div>
                 <span
-                  class="text-gray-400 text-xs transition-transform group-open:rotate-90"
+                  class="text-fg-muted text-xs transition-transform group-open:rotate-90"
                   >▸</span
                 >
               </div>
             </summary>
             <div class="mt-3">
               ${warnings.length === 0
-                ? html`<div class="text-xs text-gray-500">
+                ? html`<div class="text-xs text-fg-muted">
                     No warnings right now.
                   </div>`
                 : html`

package/lib/public/js/components/cron-tab/cron-prompt-editor.js

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import htm from "htm";
 import { EditorSurface } from "../file-viewer/editor-surface.js";
 import { countTextLines, shouldUseSimpleEditorMode } from "../file-viewer/utils.js";
 import {

package/lib/public/js/components/cron-tab/cron-run-history-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 { SegmentedControl } from "../segmented-control.js";
 import {
   formatDurationCompactMs,
@@ -17,10 +17,10 @@ const runStatusClassName = (status = "") => {
   const normalized = String(status || "")
     .trim()
     .toLowerCase();
-  if (normalized === "ok") return "text-green-300";
-  if (normalized === "error") return "text-red-300";
-  if (normalized === "skipped") return "text-yellow-300";
-  return "text-gray-400";
+  if (normalized === "ok") return "text-status-success";
+  if (normalized === "error") return "text-status-error";
+  if (normalized === "skipped") return "text-status-warning";
+  return "text-fg-muted";
 };
 const runDeliveryLabel = (run) =>
   String(run?.deliveryStatus || "not-requested");
@@ -53,23 +53,23 @@ const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
       <span class="inline-flex items-center gap-2 min-w-0">
         ${isDetail
           ? html`
-              <span class="truncate text-xs text-gray-300">
+              <span class="truncate text-xs text-body">
                 ${formatRowTimestamp(runEntry.ts, variant)}
               </span>
             `
           : hasRunTitle
             ? html`
                 <span class="inline-flex items-center gap-2 min-w-0">
-                  <span class="truncate text-xs text-gray-300"
+                  <span class="truncate text-xs text-body"
                     >${runTitle}</span
                   >
-                  <span class="text-xs text-gray-500 shrink-0">
+                  <span class="text-xs text-fg-muted shrink-0">
                     ${formatRowTimestamp(runEntry.ts, variant)}
                   </span>
                 </span>
               `
             : html`
-                <span class="truncate text-xs text-gray-300">
+                <span class="truncate text-xs text-body">
                   ${runEntry.jobId} -
                   ${formatRowTimestamp(runEntry.ts, variant)}
                 </span>
@@ -77,16 +77,16 @@ const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
       </span>
       <span class="inline-flex items-center gap-3 shrink-0 text-xs">
         <span class=${runStatusClassName(runStatus)}>${runStatus}</span>
-        <span class="text-gray-400"
+        <span class="text-fg-muted"
           >${formatDurationCompactMs(runEntry.durationMs)}</span
         >
-        <span class="text-gray-400">${formatTokenCount(runTokens)} tk</span>
+        <span class="text-fg-muted">${formatTokenCount(runTokens)} tk</span>
         ${isDetail
-          ? html`<span class="text-gray-500"
+          ? html`<span class="text-fg-muted"
               >${runDeliveryLabel(runEntry)}</span
             >`
           : html`
-              <span class="text-gray-500">
+              <span class="text-fg-muted">
                 ${runEstimatedCost == null
                   ? "—"
                   : `~${formatCost(runEstimatedCost)}`}
@@ -124,19 +124,19 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
           <span class="inline-flex items-center gap-2 min-w-0">
             <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
             <span class="inline-flex items-center gap-2 min-w-0">
-              <span class="truncate text-xs text-gray-300">
+              <span class="truncate text-xs text-body">
                 ${row.jobName} - ${formatTokenCount(row.count)} runs
               </span>
-              <span class="text-xs text-gray-500 shrink-0"
+              <span class="text-xs text-fg-muted shrink-0"
                 >${timeRangeLabel}</span
               >
             </span>
           </span>
           <span class="inline-flex items-center gap-3 shrink-0 text-xs">
-            <span class="text-gray-400"
+            <span class="text-fg-muted"
               >${formatTokenCount(totalTokens)} tk</span
             >
-            <span class="text-gray-500">
+            <span class="text-fg-muted">
               ${hasAnyCost ? `~${formatCost(totalCost)}` : "—"}
             </span>
           </span>
@@ -168,7 +168,7 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
               <div class="px-2.5 pt-2 pb-0.5">
                 <button
                   type="button"
-                  class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
+                  class="text-xs px-2 py-1 rounded border border-border text-fg-muted hover:text-body"
                   onclick=${() => onSelectJob(row.jobId)}
                 >
                   Open ${row.jobName || row.jobId}
@@ -214,46 +214,46 @@ const renderEntryRow = ({
       <div class="ac-history-body space-y-2 text-xs">
         ${runEntry.summary
           ? html`<div>
-              <span class="text-gray-500">Summary:</span> ${runEntry.summary}
+              <span class="text-fg-muted">Summary:</span> ${runEntry.summary}
             </div>`
           : null}
         ${runEntry.error
-          ? html`<div class="text-red-300">
-              <span class="text-gray-500">Error:</span> ${runEntry.error}
+          ? html`<div class="text-status-error">
+              <span class="text-fg-muted">Error:</span> ${runEntry.error}
             </div>`
           : null}
         <div class="ac-surface-inset rounded-lg p-2.5 space-y-1.5">
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Model:
-            <span class="text-gray-300 font-mono"
+            <span class="text-body font-mono"
               >${runEntry.model || "—"}</span
             >
           </div>
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Session:
-            <span class="text-gray-300 font-mono"
+            <span class="text-body font-mono"
               >${runEntry.sessionKey || "—"}</span
             >
           </div>
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Tokens in:
-            <span class="text-gray-300"
+            <span class="text-body"
               >${formatTokenCount(runInputTokens)}</span
             >
           </div>
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Tokens out:
-            <span class="text-gray-300"
+            <span class="text-body"
               >${formatTokenCount(runOutputTokens)}</span
             >
           </div>
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Total tokens:
-            <span class="text-gray-300">${formatTokenCount(runTokens)}</span>
+            <span class="text-body">${formatTokenCount(runTokens)}</span>
           </div>
-          <div class="text-gray-500">
+          <div class="text-fg-muted">
             Total cost:
-            <span class="text-gray-300">
+            <span class="text-body">
               ${runEstimatedCost == null
                 ? "—"
                 : `~${formatCost(runEstimatedCost)}`}
@@ -265,7 +265,7 @@ const renderEntryRow = ({
               <div>
                 <button
                   type="button"
-                  class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
+                  class="text-xs px-2 py-1 rounded border border-border text-fg-muted hover:text-body"
                   onclick=${() => onSelectJob(runEntry.jobId)}
                 >
                   Open ${runEntry.jobName || runEntry.jobId}
@@ -299,7 +299,7 @@ export const CronRunHistoryPanel = ({
     <div class="flex items-start justify-between gap-3">
       <div class="inline-flex items-center gap-3">
         <h3 class="card-label card-label-bright">Recent runs</h3>
-        <div class="text-xs text-gray-500">${entryCountLabel}</div>
+        <div class="text-xs text-fg-muted">${entryCountLabel}</div>
       </div>
       <div class="shrink-0 inline-flex items-center gap-2">
         <${SegmentedControl}
@@ -323,12 +323,12 @@ export const CronRunHistoryPanel = ({
       ? html`
           <div class="flex items-center">
             <span
-              class="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-2 py-1 rounded-full border border-border text-gray-300 bg-black/20"
+              class="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-2 py-1 rounded-full border border-border text-body bg-field"
             >
               Filtered to ${activeFilterLabel}
               <button
                 type="button"
-                class="text-gray-500 hover:text-gray-200 leading-none"
+                class="text-fg-muted hover:text-body leading-none"
                 onclick=${onClearActiveFilter}
                 aria-label="Clear trend filter"
               >
@@ -339,7 +339,7 @@ export const CronRunHistoryPanel = ({
         `
       : null}
     ${rows.length === 0
-      ? html`<div class="text-sm text-gray-500">${emptyText}</div>`
+      ? html`<div class="text-sm text-fg-muted">${emptyText}</div>`
       : html`
           <div class="ac-history-list">
             ${rows.map((row, rowIndex) =>

package/lib/public/js/components/cron-tab/cron-runs-trend-card.js

@@ -1,6 +1,7 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import htm from "htm";
+import Chart from "chart.js/auto";
 import { formatChartBucketLabel } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
 import {
@@ -259,7 +260,6 @@ export const CronRunsTrendCard = ({
 
   useEffect(() => {
     const canvas = chartCanvasRef.current;
-    const Chart = window.Chart;
     if (!canvas || !Chart) return;
     if (chartInstanceRef.current) {
       chartInstanceRef.current.destroy();

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

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import htm from "htm";
 import { ActionButton } from "../action-button.js";
 import { AlarmLineIcon } from "../icons.js";
 import { PageHeader } from "../page-header.js";
@@ -151,10 +151,10 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
                     <div class="max-w-md w-full flex flex-col items-center gap-4">
                       <${AlarmLineIcon} className="h-12 w-12 text-cyan-400" />
                       <div class="space-y-2">
-                        <h2 class="font-semibold text-lg text-gray-100">
+                        <h2 class="font-semibold text-lg text-bright">
                           No cron jobs yet
                         </h2>
-                        <p class="text-xs text-gray-400 leading-5">
+                        <p class="text-xs text-fg-muted leading-5">
                           Cron jobs are managed via the OpenClaw CLI. Once jobs are
                           configured, schedules and run history will appear here.
                         </p>

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

@@ -4,7 +4,7 @@ import {
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import { usePolling } from "../../hooks/usePolling.js";
 import { useDestinationSessionSelection } from "../../hooks/use-destination-session-selection.js";
 import {