@chrysb/alphaclaw 0.4.6-beta.3 → 0.4.6-beta.5

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

@@ -0,0 +1,45 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { GeneralTab } from "../general/index.js";
+
+const html = htm.bind(h);
+
+export const GeneralRoute = ({
+  statusData = null,
+  watchdogData = null,
+  doctorStatusData = null,
+  doctorWarningDismissedUntilMs = 0,
+  onRefreshStatuses = () => {},
+  onSetLocation = () => {},
+  onNavigate = () => {},
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+  onRestartRequired = () => {},
+  onDismissDoctorWarning = () => {},
+}) => html`
+  <div class="pt-4">
+    <${GeneralTab}
+      statusData=${statusData}
+      watchdogData=${watchdogData}
+      doctorStatusData=${doctorStatusData}
+      doctorWarningDismissedUntilMs=${doctorWarningDismissedUntilMs}
+      onRefreshStatuses=${onRefreshStatuses}
+      onSwitchTab=${(nextTab) => onSetLocation(`/${nextTab}`)}
+      onNavigate=${onNavigate}
+      onOpenGmailWebhook=${() => onSetLocation("/webhooks/gmail")}
+      isActive=${true}
+      restartingGateway=${restartingGateway}
+      onRestartGateway=${onRestartGateway}
+      restartSignal=${restartSignal}
+      openclawUpdateInProgress=${openclawUpdateInProgress}
+      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+      onOpenclawUpdate=${onOpenclawUpdate}
+      onRestartRequired=${onRestartRequired}
+      onDismissDoctorWarning=${onDismissDoctorWarning}
+    />
+  </div>
+`;

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

@@ -0,0 +1,11 @@
+export { BrowseRoute } from "./browse-route.js";
+export { DoctorRoute } from "./doctor-route.js";
+export { EnvarsRoute } from "./envars-route.js";
+export { GeneralRoute } from "./general-route.js";
+export { ModelsRoute } from "./models-route.js";
+export { ProvidersRoute } from "./providers-route.js";
+export { RouteRedirect } from "./route-redirect.js";
+export { TelegramRoute } from "./telegram-route.js";
+export { UsageRoute } from "./usage-route.js";
+export { WatchdogRoute } from "./watchdog-route.js";
+export { WebhooksRoute } from "./webhooks-route.js";

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

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Models } from "../models-tab/index.js";
+
+const html = htm.bind(h);
+
+export const ModelsRoute = ({ onRestartRequired = () => {} }) => html`
+  <div class="pt-4">
+    <${Models} onRestartRequired=${onRestartRequired} />
+  </div>
+`;

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

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Providers } from "../providers.js";
+
+const html = htm.bind(h);
+
+export const ProvidersRoute = ({ onRestartRequired = () => {} }) => html`
+  <div class="pt-4">
+    <${Providers} onRestartRequired=${onRestartRequired} />
+  </div>
+`;

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

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

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

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { TelegramWorkspace } from "../telegram-workspace/index.js";
+
+const html = htm.bind(h);
+
+export const TelegramRoute = ({ onBack = () => {} }) => html`
+  <div class="pt-4">
+    <${TelegramWorkspace} onBack=${onBack} />
+  </div>
+`;

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

@@ -0,0 +1,15 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { UsageTab } from "../usage-tab/index.js";
+
+const html = htm.bind(h);
+
+export const UsageRoute = ({ sessionId = "", onSetLocation = () => {} }) => html`
+  <div class="pt-4">
+    <${UsageTab}
+      sessionId=${sessionId}
+      onSelectSession=${(id) => onSetLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
+      onBackToSessions=${() => onSetLocation("/usage")}
+    />
+  </div>
+`;

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

@@ -0,0 +1,32 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { WatchdogTab } from "../watchdog-tab.js";
+
+const html = htm.bind(h);
+
+export const WatchdogRoute = ({
+  statusData = null,
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+}) => html`
+  <div class="pt-4">
+    <${WatchdogTab}
+      gatewayStatus=${statusData?.gateway || null}
+      openclawVersion=${statusData?.openclawVersion || null}
+      watchdogStatus=${watchdogStatus}
+      onRefreshStatuses=${onRefreshStatuses}
+      restartingGateway=${restartingGateway}
+      onRestartGateway=${onRestartGateway}
+      restartSignal=${restartSignal}
+      openclawUpdateInProgress=${openclawUpdateInProgress}
+      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+      onOpenclawUpdate=${onOpenclawUpdate}
+    />
+  </div>
+`;

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

@@ -0,0 +1,43 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Webhooks } from "../webhooks.js";
+
+const html = htm.bind(h);
+
+export const WebhooksRoute = ({
+  hookName = "",
+  routeHistoryRef = null,
+  getCurrentPath = () => "",
+  onSetLocation = () => {},
+  onRestartRequired = () => {},
+  onNavigateToBrowseFile = () => {},
+}) => {
+  const handleBackToList = () => {
+    const historyStack = routeHistoryRef?.current || [];
+    const hasPreviousRoute = historyStack.length > 1;
+    if (!hasPreviousRoute) {
+      onSetLocation("/webhooks");
+      return;
+    }
+    const currentPath = getCurrentPath();
+    window.history.back();
+    window.setTimeout(() => {
+      if (getCurrentPath() === currentPath) {
+        onSetLocation("/webhooks");
+      }
+    }, 180);
+  };
+
+  return html`
+    <div class="pt-4">
+      <${Webhooks}
+        selectedHookName=${hookName}
+        onSelectHook=${(name) => onSetLocation(`/webhooks/${encodeURIComponent(name)}`)}
+        onBackToList=${handleBackToList}
+        onRestartRequired=${onRestartRequired}
+        onOpenFile=${(relativePath) =>
+          onNavigateToBrowseFile(String(relativePath || "").trim(), { view: "edit" })}
+      />
+    </div>
+  `;
+};

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

@@ -47,7 +47,6 @@ export const AppSidebar = ({
   onPreviewBrowseFile = () => {},
   acHasUpdate = false,
   acLatest = "",
-  acDismissed = false,
   acUpdating = false,
   onAcUpdate = () => {},
 }) => {
@@ -200,7 +199,7 @@ export const AppSidebar = ({
         `,
       )}
       <div class="sidebar-footer">
-        ${acHasUpdate && acLatest && !acDismissed
+        ${acHasUpdate && acLatest
           ? html`
               <${UpdateActionButton}
                 onClick=${onAcUpdate}
@@ -251,7 +250,7 @@ export const AppSidebar = ({
             onSelectFile=${onSelectBrowseFile}
             isActive=${sidebarTab === "browse"}
           />
-          ${acHasUpdate && acLatest && !acDismissed
+          ${acHasUpdate && acLatest
             ? html`
                 <${UpdateActionButton}
                   onClick=${onAcUpdate}

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

@@ -1,8 +1,8 @@
 export const kColorPalette = [
   "#7dd3fc",
   "#22d3ee",
-  "#34d399",
   "#fbbf24",
+  "#34d399",
   "#fb7185",
   "#a78bfa",
   "#f472b6",

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

@@ -1,7 +1,11 @@
 import { h } from "https://esm.sh/preact";
 import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { formatInteger, formatUsd } from "../../lib/format.js";
+import {
+  formatCompactNumber,
+  formatInteger,
+  formatUsd,
+} from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
 import { kRangeOptions, kUsageSourceOrder } from "./constants.js";
 import { renderSourceLabel } from "./formatters.js";
@@ -14,6 +18,34 @@ const formatCountLabel = (value, singular, plural) => {
   return `${formatInteger(count)} ${label}`;
 };
 
+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 >= 40) return "text-amber-300";
+  return "text-red-400";
+};
+
+const getOverviewMetrics = (summary) => {
+  const totals = summary?.totals || {};
+  const cacheReadTokens = Number(totals.cacheReadTokens || 0);
+  const inputTokens = Number(totals.inputTokens || 0);
+  const promptTokens = inputTokens + cacheReadTokens;
+  const turnCount = Number(totals.turnCount || 0);
+  const totalTokens = Number(totals.totalTokens || 0);
+  const totalCost = Number(totals.totalCost || 0);
+  return {
+    cacheHitRate: promptTokens > 0 ? cacheReadTokens / promptTokens : 0,
+    cacheReadTokens,
+    promptTokens,
+    avgTokensPerTurn: turnCount > 0 ? totalTokens / turnCount : 0,
+    avgCostPerTurn: turnCount > 0 ? totalCost / turnCount : 0,
+    turnCount,
+  };
+};
+
 const SummaryCard = ({ title, tokens, cost }) => html`
   <div class="bg-surface border border-border rounded-xl p-4">
     <h3 class="card-label text-xs">${title}</h3>
@@ -25,6 +57,25 @@ const SummaryCard = ({ title, tokens, cost }) => html`
   </div>
 `;
 
+const MetricCard = ({
+  title,
+  value,
+  detail = "",
+  valueClass = "",
+  valueSuffix = "",
+}) => html`
+  <div class="bg-surface border border-border rounded-xl p-4">
+    <h3 class="card-label text-xs">${title}</h3>
+    <div class=${`text-lg font-semibold mt-1 ${valueClass}`.trim()}>
+      ${value}
+      ${valueSuffix
+        ? html`<span class="text-xs text-[var(--text-muted)] ml-1">${valueSuffix}</span>`
+        : null}
+    </div>
+    <div class="text-xs text-[var(--text-muted)] mt-1">${detail}</div>
+  </div>
+`;
+
 const AgentCostDistribution = ({ summary }) => {
   const agents = Array.isArray(summary?.costByAgent?.agents)
     ? summary.costByAgent.agents
@@ -167,55 +218,78 @@ export const OverviewSection = ({
   overviewCanvasRef,
   onDaysChange = () => {},
   onMetricChange = () => {},
-}) => html`
-  <div class="space-y-4">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-      <${SummaryCard}
-        title="Today"
-        tokens=${periodSummary.today.tokens}
-        cost=${periodSummary.today.cost}
-      />
-      <${SummaryCard}
-        title="Last 7 days"
-        tokens=${periodSummary.week.tokens}
-        cost=${periodSummary.week.cost}
-      />
-      <${SummaryCard}
-        title="Last 30 days"
-        tokens=${periodSummary.month.tokens}
-        cost=${periodSummary.month.cost}
-      />
-    </div>
-    <div class="bg-surface border border-border rounded-xl p-4">
-      <div
-        class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3"
-      >
-        <h2 class="card-label text-xs">
-          Daily ${metric === "tokens" ? "tokens" : "cost"} by model
-        </h2>
-        <div class="flex items-center gap-2">
-          <${SegmentedControl}
-            options=${kRangeOptions.map((option) => ({
-              label: option.label,
-              value: option.value,
-            }))}
-            value=${days}
-            onChange=${onDaysChange}
-          />
-          <${SegmentedControl}
-            options=${[
-              { label: "tokens", value: "tokens" },
-              { label: "cost", value: "cost" },
-            ]}
-            value=${metric}
-            onChange=${onMetricChange}
-          />
-        </div>
+}) => {
+  const overviewMetrics = getOverviewMetrics(summary);
+
+  return html`
+    <div class="space-y-4">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <${SummaryCard}
+          title="Today"
+          tokens=${periodSummary.today.tokens}
+          cost=${periodSummary.today.cost}
+        />
+        <${SummaryCard}
+          title="Last 7 days"
+          tokens=${periodSummary.week.tokens}
+          cost=${periodSummary.week.cost}
+        />
+        <${SummaryCard}
+          title="Last 30 days"
+          tokens=${periodSummary.month.tokens}
+          cost=${periodSummary.month.cost}
+        />
       </div>
-      <div style=${{ height: "280px" }}>
-        <canvas ref=${overviewCanvasRef}></canvas>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <${MetricCard}
+          title="Cache hit rate"
+          value=${formatPercent(overviewMetrics.cacheHitRate)}
+          valueClass=${getCacheHitRateValueClass(overviewMetrics.cacheHitRate)}
+          detail=${`${formatCompactNumber(overviewMetrics.cacheReadTokens)} cached · ${formatCompactNumber(overviewMetrics.promptTokens)} prompt`}
+        />
+        <${MetricCard}
+          title="Avg tokens per turn"
+          value=${formatCompactNumber(overviewMetrics.avgTokensPerTurn)}
+          valueSuffix="tokens"
+          detail=${`${formatCountLabel(overviewMetrics.turnCount, "turn", "turns")} last ${days} days`}
+        />
+        <${MetricCard}
+          title="Avg cost per turn"
+          value=${formatUsd(overviewMetrics.avgCostPerTurn)}
+          detail=${`${formatCountLabel(overviewMetrics.turnCount, "turn", "turns")} last ${days} days`}
+        />
       </div>
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div
+          class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3"
+        >
+          <h2 class="card-label text-xs">
+            Daily ${metric === "tokens" ? "tokens" : "cost"} by model
+          </h2>
+          <div class="flex items-center gap-2">
+            <${SegmentedControl}
+              options=${kRangeOptions.map((option) => ({
+                label: option.label,
+                value: option.value,
+              }))}
+              value=${days}
+              onChange=${onDaysChange}
+            />
+            <${SegmentedControl}
+              options=${[
+                { label: "tokens", value: "tokens" },
+                { label: "cost", value: "cost" },
+              ]}
+              value=${metric}
+              onChange=${onMetricChange}
+            />
+          </div>
+        </div>
+        <div style=${{ height: "280px" }}>
+          <canvas ref=${overviewCanvasRef}></canvas>
+        </div>
+      </div>
+      <${AgentCostDistribution} summary=${summary} />
     </div>
-    <${AgentCostDistribution} summary=${summary} />
-  </div>
-`;
+  `;
+};

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

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import {
   fetchUsageSessionDetail,
   fetchUsageSessions,
@@ -17,12 +23,17 @@ import { toChartColor, toLocalDayKey } from "./formatters.js";
 export const useUsageTab = ({ sessionId = "" }) => {
   const [days, setDays] = useState(() => {
     const settings = readUiSettings();
-    const parsedDays = Number.parseInt(String(settings[kUsageDaysUiSettingKey] ?? ""), 10);
+    const parsedDays = Number.parseInt(
+      String(settings[kUsageDaysUiSettingKey] ?? ""),
+      10,
+    );
     return [7, 30, 90].includes(parsedDays) ? parsedDays : kDefaultUsageDays;
   });
   const [metric, setMetric] = useState(() => {
     const settings = readUiSettings();
-    return settings[kUsageMetricUiSettingKey] === "cost" ? "cost" : kDefaultUsageMetric;
+    return settings[kUsageMetricUiSettingKey] === "cost"
+      ? "cost"
+      : kDefaultUsageMetric;
   });
   const [summary, setSummary] = useState(null);
   const [sessions, setSessions] = useState([]);
@@ -104,9 +115,14 @@ export const useUsageTab = ({ sessionId = "" }) => {
     const safeSessionId = String(sessionId || "").trim();
     if (!safeSessionId) return;
     setExpandedSessionIds((currentValue) =>
-      currentValue.includes(safeSessionId) ? currentValue : [...currentValue, safeSessionId],
+      currentValue.includes(safeSessionId)
+        ? currentValue
+        : [...currentValue, safeSessionId],
     );
-    if (!sessionDetailById[safeSessionId] && !loadingDetailById[safeSessionId]) {
+    if (
+      !sessionDetailById[safeSessionId] &&
+      !loadingDetailById[safeSessionId]
+    ) {
       loadSessionDetail(safeSessionId);
     }
   }, [sessionId, sessionDetailById, loadingDetailById, loadSessionDetail]);
@@ -115,8 +131,12 @@ export const useUsageTab = ({ sessionId = "" }) => {
     const rows = Array.isArray(summary?.daily) ? summary.daily : [];
     const now = new Date();
     const dayKey = toLocalDayKey(now);
-    const weekStart = toLocalDayKey(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000));
-    const monthStart = toLocalDayKey(new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000));
+    const weekStart = toLocalDayKey(
+      new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
+    );
+    const monthStart = toLocalDayKey(
+      new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000),
+    );
     const zero = { tokens: 0, cost: 0 };
     return rows.reduce(
       (acc, row) => {
@@ -156,9 +176,13 @@ export const useUsageTab = ({ sessionId = "" }) => {
     const datasets = Array.from(allModels).map((model) => ({
       label: model,
       data: rows.map((row) => {
-        const found = (row.models || []).find((m) => String(m.model || "") === model);
+        const found = (row.models || []).find(
+          (m) => String(m.model || "") === model,
+        );
         if (!found) return 0;
-        return metric === "cost" ? Number(found.totalCost || 0) : Number(found.totalTokens || 0);
+        return metric === "cost"
+          ? Number(found.totalCost || 0)
+          : Number(found.totalTokens || 0);
       }),
       backgroundColor: toChartColor(model),
     }));
@@ -186,13 +210,20 @@ export const useUsageTab = ({ sessionId = "" }) => {
             stacked: true,
             ticks: {
               color: "rgba(156,163,175,1)",
-              callback: (v) => (metric === "cost" ? `$${Number(v).toFixed(2)}` : formatInteger(v)),
+              callback: (v) =>
+                metric === "cost"
+                  ? `$${Number(v).toFixed(2)}`
+                  : formatInteger(v),
             },
           },
         },
         plugins: {
           legend: {
-            labels: { color: "rgba(209,213,219,1)", boxWidth: 10, boxHeight: 10 },
+            labels: {
+              color: "rgba(209,213,219,1)",
+              boxWidth: 10,
+              boxHeight: 10,
+            },
           },
           tooltip: {
             callbacks: {