@chrysb/alphaclaw 0.7.0 → 0.7.2-beta.0

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

@@ -0,0 +1,115 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import {
+  kWatchdogConsoleTabLogs,
+  kWatchdogConsoleTabTerminal,
+} from "../helpers.js";
+import { WatchdogTerminal } from "../terminal/index.js";
+
+const html = htm.bind(h);
+
+export const WatchdogConsoleCard = ({
+  activeConsoleTab = kWatchdogConsoleTabLogs,
+  stickToBottom = true,
+  onSetStickToBottom = () => {},
+  onSelectConsoleTab = () => {},
+  connectingTerminal = false,
+  terminalConnected = false,
+  terminalEnded = false,
+  terminalStatusText = "",
+  terminalUiSettling = false,
+  onRestartTerminalSession = () => {},
+  logsRef = null,
+  logs = "",
+  loadingLogs = true,
+  terminalPanelRef = null,
+  terminalHostRef = null,
+  terminalInstanceRef = null,
+  logsPanelHeightPx = 320,
+}) => 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"
+      >
+        <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"}`}
+          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"}`}
+          onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabTerminal)}
+        >
+          Terminal
+        </button>
+      </div>
+      <div class="flex items-center gap-2">
+        ${activeConsoleTab === kWatchdogConsoleTabLogs
+          ? html`
+              <label class="inline-flex items-center gap-2 text-xs text-gray-400">
+                <input
+                  type="checkbox"
+                  checked=${stickToBottom}
+                  onchange=${(event) =>
+                    onSetStickToBottom(!!event.currentTarget?.checked)}
+                />
+                Stick to bottom
+              </label>
+            `
+          : html`
+              <div class="flex items-center gap-2 pr-1">
+                ${terminalUiSettling
+                  ? null
+                  : html`
+                      <span class="text-xs text-gray-500">
+                        ${connectingTerminal
+                          ? "Connecting..."
+                          : terminalEnded
+                            ? "Session ended"
+                            : terminalConnected
+                              ? "Connected"
+                              : terminalStatusText || "Disconnected"}
+                      </span>
+                      ${connectingTerminal || terminalConnected
+                        ? null
+                        : html`
+                            <button
+                              type="button"
+                              class="ac-btn-secondary text-xs px-2.5 py-1 rounded-lg"
+                              onClick=${onRestartTerminalSession}
+                            >
+                              New session
+                            </button>
+                          `}
+                    `}
+              </div>
+            `}
+      </div>
+    </div>
+    <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"
+        style=${{ height: `${logsPanelHeightPx}px` }}
+      >
+${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre
+      >
+    </div>
+    <div
+      class=${activeConsoleTab === kWatchdogConsoleTabTerminal
+        ? "space-y-2"
+        : "hidden"}
+    >
+      <${WatchdogTerminal}
+        panelRef=${terminalPanelRef}
+        hostRef=${terminalHostRef}
+        terminalInstanceRef=${terminalInstanceRef}
+        panelHeightPx=${logsPanelHeightPx}
+      />
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { fetchWatchdogLogs } from "../../../lib/api.js";
+import { readUiSettings, writeUiSettings } from "../../../lib/ui-settings.js";
+import {
+  clampWatchdogLogsPanelHeight,
+  kWatchdogConsoleTabLogs,
+  kWatchdogConsoleTabTerminal,
+  kWatchdogConsoleTabUiSettingKey,
+  kWatchdogLogsPanelHeightUiSettingKey,
+  normalizeWatchdogConsoleTab,
+  readCssHeightPx,
+} from "../helpers.js";
+import { useWatchdogTerminal } from "../terminal/use-terminal.js";
+
+export const useWatchdogConsole = () => {
+  const [logs, setLogs] = useState("");
+  const [loadingLogs, setLoadingLogs] = useState(true);
+  const [stickToBottom, setStickToBottom] = useState(true);
+  const [activeConsoleTab, setActiveConsoleTab] = useState(() => {
+    const settings = readUiSettings();
+    return normalizeWatchdogConsoleTab(settings?.[kWatchdogConsoleTabUiSettingKey]);
+  });
+  const [logsPanelHeightPx, setLogsPanelHeightPx] = useState(() => {
+    const settings = readUiSettings();
+    return clampWatchdogLogsPanelHeight(
+      settings?.[kWatchdogLogsPanelHeightUiSettingKey],
+    );
+  });
+  const logsRef = useRef(null);
+  const terminalPanelRef = useRef(null);
+  const terminalHostRef = useRef(null);
+  const terminal = useWatchdogTerminal({
+    active: activeConsoleTab === kWatchdogConsoleTabTerminal,
+    panelRef: terminalPanelRef,
+    hostRef: terminalHostRef,
+  });
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings[kWatchdogConsoleTabUiSettingKey] =
+      normalizeWatchdogConsoleTab(activeConsoleTab);
+    writeUiSettings(settings);
+  }, [activeConsoleTab]);
+
+  useEffect(() => {
+    let active = true;
+    let timer = null;
+    const pollLogs = async () => {
+      try {
+        const text = await fetchWatchdogLogs(65536);
+        if (!active) return;
+        setLogs(text || "");
+        setLoadingLogs(false);
+      } catch {
+        if (!active) return;
+        setLoadingLogs(false);
+      }
+      if (!active) return;
+      timer = setTimeout(pollLogs, 3000);
+    };
+    pollLogs();
+    return () => {
+      active = false;
+      if (timer) clearTimeout(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const logsElement = logsRef.current;
+    if (!logsElement || !stickToBottom) return;
+    logsElement.scrollTop = logsElement.scrollHeight;
+  }, [logs, stickToBottom]);
+
+  useEffect(() => {
+    const panelElement =
+      activeConsoleTab === kWatchdogConsoleTabLogs
+        ? logsRef.current
+        : terminalPanelRef.current;
+    if (!panelElement || typeof ResizeObserver === "undefined") return () => {};
+    let saveTimer = null;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries?.[0];
+      const nextHeight = clampWatchdogLogsPanelHeight(
+        readCssHeightPx(entry?.target),
+      );
+      setLogsPanelHeightPx((currentValue) =>
+        Math.abs(currentValue - nextHeight) >= 1 ? nextHeight : currentValue,
+      );
+      if (saveTimer) window.clearTimeout(saveTimer);
+      saveTimer = window.setTimeout(() => {
+        const settings = readUiSettings();
+        settings[kWatchdogLogsPanelHeightUiSettingKey] = nextHeight;
+        writeUiSettings(settings);
+      }, 120);
+      if (activeConsoleTab === kWatchdogConsoleTabTerminal) {
+        window.requestAnimationFrame(() => {
+          terminal.fitNow();
+        });
+      }
+    });
+    observer.observe(panelElement);
+    return () => {
+      observer.disconnect();
+      if (saveTimer) window.clearTimeout(saveTimer);
+    };
+  }, [activeConsoleTab]);
+
+  const handleSelectConsoleTab = (nextTab = kWatchdogConsoleTabLogs) => {
+    const normalizedTab = normalizeWatchdogConsoleTab(nextTab);
+    if (normalizedTab === kWatchdogConsoleTabTerminal) {
+      terminal.prepareForActivate();
+    } else {
+      terminal.clearSettling();
+    }
+    setActiveConsoleTab(normalizedTab);
+  };
+
+  const onRestartTerminalSession = () => {
+    terminal.restartSession();
+    setActiveConsoleTab(kWatchdogConsoleTabTerminal);
+  };
+
+  return {
+    logs,
+    loadingLogs,
+    stickToBottom,
+    setStickToBottom,
+    activeConsoleTab,
+    handleSelectConsoleTab,
+    logsPanelHeightPx,
+    logsRef,
+    terminalPanelRef,
+    terminalHostRef,
+    onRestartTerminalSession,
+    ...terminal,
+  };
+};

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

@@ -0,0 +1,106 @@
+export const kWatchdogConsoleTabLogs = "logs";
+export const kWatchdogConsoleTabTerminal = "terminal";
+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 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"),
+    ]);
+  }
+  return xtermModulesPromise;
+};
+
+export const ensureXtermStylesheet = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("ac-xterm-css")) return;
+  const link = document.createElement("link");
+  link.id = "ac-xterm-css";
+  link.rel = "stylesheet";
+  link.href = kXtermCssUrl;
+  document.head.appendChild(link);
+};
+
+export const fitTerminalWhenVisible = ({
+  panel = null,
+  fitAddon = null,
+  minWidthPx = 120,
+  minHeightPx = 80,
+} = {}) => {
+  if (!panel || !fitAddon) return false;
+  const panelWidth = Number(panel.clientWidth || 0);
+  const panelHeight = Number(panel.clientHeight || 0);
+  if (panelWidth < minWidthPx || panelHeight < minHeightPx) return false;
+  fitAddon.fit();
+  return true;
+};
+
+export const normalizeWatchdogConsoleTab = (value) =>
+  value === kWatchdogConsoleTabTerminal
+    ? kWatchdogConsoleTabTerminal
+    : kWatchdogConsoleTabLogs;
+
+export const clampWatchdogLogsPanelHeight = (value) => {
+  const parsed = Number(value);
+  const normalized = Number.isFinite(parsed)
+    ? Math.round(parsed)
+    : kWatchdogLogsPanelDefaultHeightPx;
+  return Math.max(kWatchdogLogsPanelMinHeightPx, normalized);
+};
+
+export const readCssHeightPx = (element) => {
+  if (!element) return 0;
+  const computedHeight = Number.parseFloat(
+    window.getComputedStyle(element).height || "0",
+  );
+  return Number.isFinite(computedHeight) ? computedHeight : 0;
+};
+
+export const formatBytes = (bytes) => {
+  if (bytes == null) return "—";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+};
+
+export const getIncidentStatusTone = (event) => {
+  const eventType = String(event?.eventType || "")
+    .trim()
+    .toLowerCase();
+  const status = String(event?.status || "")
+    .trim()
+    .toLowerCase();
+  if (status === "failed") {
+    return {
+      dotClass: "bg-red-500/90",
+      label: "Failed",
+    };
+  }
+  if (status === "ok" && eventType === "health_check") {
+    return {
+      dotClass: "bg-green-500/90",
+      label: "Healthy",
+    };
+  }
+  if (status === "warn" || status === "warning") {
+    return {
+      dotClass: "bg-yellow-400/90",
+      label: "Warning",
+    };
+  }
+  return {
+    dotClass: "bg-gray-500/70",
+    label: "Unknown",
+  };
+};

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

@@ -0,0 +1,56 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { getIncidentStatusTone } from "../helpers.js";
+
+const html = htm.bind(h);
+
+export const WatchdogIncidentsCard = ({
+  events = [],
+  onRefresh = () => {},
+}) => html`
+  <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}>
+        Refresh
+      </button>
+    </div>
+    <div class="ac-history-list">
+      ${events.length === 0 &&
+      html`<p class="text-xs text-gray-500">No incidents recorded.</p>`}
+      ${events.map((event) => {
+        const tone = getIncidentStatusTone(event);
+        return html`
+          <details class="ac-history-item">
+            <summary class="ac-history-summary">
+              <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
+                  >
+                  <span class="truncate">
+                    ${event.createdAt || ""} · ${event.eventType || "event"} ·
+                    ${event.status || "unknown"}
+                  </span>
+                </span>
+                <span
+                  class=${`h-2.5 w-2.5 shrink-0 rounded-full ${tone.dotClass}`}
+                  title=${tone.label}
+                  aria-label=${tone.label}
+                ></span>
+              </div>
+            </summary>
+            <div class="ac-history-body text-xs text-gray-400">
+              <div>Source: ${event.source || "unknown"}</div>
+              <pre class="mt-2 bg-black/30 rounded p-2 whitespace-pre-wrap break-words">
+${typeof event.details === "string"
+                  ? event.details
+                  : JSON.stringify(event.details || {}, null, 2)}</pre
+              >
+            </div>
+          </details>
+        `;
+      })}
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,33 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+import { usePolling } from "../../../hooks/usePolling.js";
+import { fetchWatchdogEvents } from "../../../lib/api.js";
+
+export const useWatchdogIncidents = ({
+  restartSignal = 0,
+  onRefreshStatuses = () => {},
+} = {}) => {
+  const eventsPoll = usePolling(() => fetchWatchdogEvents(20), 15000);
+
+  useEffect(() => {
+    if (!restartSignal) return;
+    onRefreshStatuses();
+    eventsPoll.refresh();
+    const t1 = setTimeout(() => {
+      onRefreshStatuses();
+      eventsPoll.refresh();
+    }, 1200);
+    const t2 = setTimeout(() => {
+      onRefreshStatuses();
+      eventsPoll.refresh();
+    }, 3500);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [restartSignal, onRefreshStatuses, eventsPoll.refresh]);
+
+  return {
+    events: eventsPoll.data?.events || [],
+    refreshEvents: eventsPoll.refresh,
+  };
+};

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

@@ -0,0 +1,84 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Gateway } from "../gateway.js";
+import { useWatchdogTab } from "./use-watchdog-tab.js";
+import { WatchdogResourcesCard } from "./resources/index.js";
+import { WatchdogSettingsCard } from "./settings/index.js";
+import { WatchdogConsoleCard } from "./console/index.js";
+import { WatchdogIncidentsCard } from "./incidents/index.js";
+
+const html = htm.bind(h);
+
+export const WatchdogTab = ({
+  gatewayStatus = null,
+  openclawVersion = null,
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  restartingGateway = false,
+  onRestartGateway,
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate,
+}) => {
+  const state = useWatchdogTab({
+    watchdogStatus,
+    onRefreshStatuses,
+    restartSignal,
+  });
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway}
+        status=${gatewayStatus}
+        openclawVersion=${openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${state.currentWatchdogStatus}
+        onRepair=${state.onRepair}
+        repairing=${state.isRepairInProgress}
+        openclawUpdateInProgress=${openclawUpdateInProgress}
+        onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+        onOpenclawUpdate=${onOpenclawUpdate}
+      />
+
+      <${WatchdogResourcesCard}
+        resources=${state.resources}
+        memoryExpanded=${state.memoryExpanded}
+        onSetMemoryExpanded=${state.setMemoryExpanded}
+      />
+
+      <${WatchdogSettingsCard}
+        settings=${state.settings}
+        savingSettings=${state.savingSettings}
+        onToggleAutoRepair=${state.onToggleAutoRepair}
+        onToggleNotifications=${state.onToggleNotifications}
+      />
+
+      <${WatchdogConsoleCard}
+        activeConsoleTab=${state.activeConsoleTab}
+        stickToBottom=${state.stickToBottom}
+        onSetStickToBottom=${state.setStickToBottom}
+        onSelectConsoleTab=${state.handleSelectConsoleTab}
+        connectingTerminal=${state.connectingTerminal}
+        terminalConnected=${state.terminalConnected}
+        terminalEnded=${state.terminalEnded}
+        terminalStatusText=${state.terminalStatusText}
+        terminalUiSettling=${state.terminalUiSettling}
+        onRestartTerminalSession=${state.onRestartTerminalSession}
+        logsRef=${state.logsRef}
+        logs=${state.logs}
+        loadingLogs=${state.loadingLogs}
+        terminalPanelRef=${state.terminalPanelRef}
+        terminalHostRef=${state.terminalHostRef}
+        terminalInstanceRef=${state.terminalInstanceRef}
+        logsPanelHeightPx=${state.logsPanelHeightPx}
+      />
+
+      <${WatchdogIncidentsCard}
+        events=${state.events}
+        onRefresh=${state.refreshEvents}
+      />
+    </div>
+  `;
+};

package/lib/public/js/components/watchdog-tab/resource-bar.js

@@ -0,0 +1,76 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const barColor = (percent) => {
+  if (percent == null) return "bg-gray-600";
+  return "bg-cyan-400";
+};
+
+export const ResourceBar = ({
+  label,
+  percent,
+  detail,
+  segments = null,
+  expanded = false,
+  onToggle = null,
+}) => html`
+  <div
+    class=${onToggle ? "cursor-pointer group" : ""}
+    onclick=${onToggle || undefined}
+  >
+    <span
+      class=${`text-xs text-gray-400 ${onToggle ? "group-hover:text-gray-200 transition-colors" : ""}`}
+      >${label}</span
+    >
+    <div
+      class=${`h-0.5 w-full bg-white/15 rounded-full overflow-hidden mt-1.5 flex ${onToggle ? "group-hover:bg-white/10 transition-colors" : ""}`}
+    >
+      ${expanded && segments
+        ? segments.map(
+            (seg) => html`
+              <div
+                class="h-full"
+                style=${{
+                  width: `${Math.min(100, seg.percent ?? 0)}%`,
+                  backgroundColor: seg.color,
+                  transition:
+                    "width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease",
+                }}
+              ></div>
+            `,
+          )
+        : html`
+            <div
+              class=${`h-full rounded-full ${barColor(percent)}`}
+              style=${{
+                width: `${Math.min(100, percent ?? 0)}%`,
+                transition:
+                  "width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease",
+              }}
+            ></div>
+          `}
+    </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>
+      ${expanded &&
+      segments &&
+      segments
+        .filter((segment) => segment.label)
+        .map(
+          (segment) => html`
+            <span
+              class="inline-flex items-center gap-1 text-xs text-gray-500 font-mono"
+            >
+              <span
+                class="inline-block w-1.5 h-1.5 rounded-full"
+                style=${{ backgroundColor: segment.color }}
+              ></span>
+              ${segment.label}
+            </span>
+          `,
+        )}
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,85 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { formatBytes } from "../helpers.js";
+import { ResourceBar } from "../resource-bar.js";
+
+const html = htm.bind(h);
+
+export const WatchdogResourcesCard = ({
+  resources = null,
+  memoryExpanded = false,
+  onSetMemoryExpanded = () => {},
+}) => {
+  if (!resources) return null;
+  const memorySegments = (() => {
+    const processes = resources.processes;
+    const totalBytes = resources.memory?.totalBytes;
+    const usedBytes = resources.memory?.usedBytes;
+    if (!processes || !totalBytes || !usedBytes) return null;
+    const segments = [];
+    let trackedBytes = 0;
+    if (processes.gateway?.rssBytes != null) {
+      trackedBytes += processes.gateway.rssBytes;
+      segments.push({
+        percent: (processes.gateway.rssBytes / totalBytes) * 100,
+        color: "#22d3ee",
+        label: `Gateway ${formatBytes(processes.gateway.rssBytes)}`,
+      });
+    }
+    if (processes.alphaclaw?.rssBytes != null) {
+      trackedBytes += processes.alphaclaw.rssBytes;
+      segments.push({
+        percent: (processes.alphaclaw.rssBytes / totalBytes) * 100,
+        color: "#a78bfa",
+        label: `AlphaClaw ${formatBytes(processes.alphaclaw.rssBytes)}`,
+      });
+    }
+    const otherBytes = Math.max(0, usedBytes - trackedBytes);
+    if (otherBytes > 0) {
+      segments.push({
+        percent: (otherBytes / totalBytes) * 100,
+        color: "#4b5563",
+        label: `Other ${formatBytes(otherBytes)}`,
+      });
+    }
+    return segments.length ? segments : null;
+  })();
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      ${memoryExpanded
+        ? html`
+            <${ResourceBar}
+              label="Memory"
+              detail=${`${formatBytes(resources.memory?.usedBytes)} / ${formatBytes(resources.memory?.totalBytes)}`}
+              percent=${resources.memory?.percent}
+              expanded=${true}
+              onToggle=${() => onSetMemoryExpanded(false)}
+              segments=${memorySegments}
+            />
+          `
+        : html`
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <${ResourceBar}
+                label="Memory"
+                percent=${resources.memory?.percent}
+                detail=${`${formatBytes(resources.memory?.usedBytes)} / ${formatBytes(resources.memory?.totalBytes)}`}
+                onToggle=${() => onSetMemoryExpanded(true)}
+              />
+              <${ResourceBar}
+                label=${`Disk${resources.disk?.path ? ` (${resources.disk.path})` : ""}`}
+                percent=${resources.disk?.percent}
+                detail=${`${formatBytes(resources.disk?.usedBytes)} / ${formatBytes(resources.disk?.totalBytes)}`}
+              />
+              <${ResourceBar}
+                label=${`CPU${resources.cpu?.cores ? ` (${resources.cpu.cores} vCPU)` : ""}`}
+                percent=${resources.cpu?.percent}
+                detail=${resources.cpu?.percent != null
+                  ? `${resources.cpu.percent}%`
+                  : "—"}
+              />
+            </div>
+          `}
+    </div>
+  `;
+};