@hienlh/ppm 0.9.0-beta.9 → 0.9.2

package/src/web/components/settings/extension-manager-section.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useCallback } from "react";
+import { Plus, Trash2, Power, PowerOff, Puzzle, FolderSymlink, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+import { toast } from "sonner";
+
+interface ExtensionInfo {
+  id: string;
+  version: string;
+  displayName: string;
+  description: string;
+  icon: string;
+  enabled: boolean;
+  activated: boolean;
+}
+
+export function ExtensionManagerSection() {
+  const [extensions, setExtensions] = useState<ExtensionInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [installName, setInstallName] = useState("");
+  const [installing, setInstalling] = useState(false);
+  const [devPath, setDevPath] = useState("");
+  const [showDevLink, setShowDevLink] = useState(false);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const fetchExtensions = useCallback(async () => {
+    try {
+      const data = await api.get<ExtensionInfo[]>("/api/extensions");
+      setExtensions(data);
+    } catch (e) {
+      console.error("Failed to load extensions:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchExtensions(); }, [fetchExtensions]);
+
+  const handleInstall = async () => {
+    const name = installName.trim();
+    if (!name) return;
+    setInstalling(true);
+    try {
+      await api.post("/api/extensions/install", { name });
+      toast.success(`Installed ${name}`);
+      setInstallName("");
+      fetchExtensions();
+    } catch (e: any) {
+      toast.error(e.message || "Install failed");
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  const handleToggle = async (ext: ExtensionInfo) => {
+    setTogglingId(ext.id);
+    try {
+      await api.patch(`/api/extensions/${ext.id}`, { enabled: !ext.enabled });
+      fetchExtensions();
+    } catch (e: any) {
+      toast.error(e.message || "Toggle failed");
+    } finally {
+      setTogglingId(null);
+    }
+  };
+
+  const handleRemove = async (id: string) => {
+    setDeletingId(id);
+    try {
+      await api.del(`/api/extensions/${id}`);
+      toast.success(`Removed ${id}`);
+      fetchExtensions();
+    } catch (e: any) {
+      toast.error(e.message || "Remove failed");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="size-4 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Install */}
+      <section className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground">Install Extension</h3>
+        <div className="flex gap-1.5">
+          <Input
+            value={installName}
+            onChange={(e) => setInstallName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleInstall(); }}
+            placeholder="npm package name (e.g. @ppm/ext-database)"
+            className="h-8 text-xs flex-1"
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs px-3 gap-1 cursor-pointer"
+            disabled={!installName.trim() || installing}
+            onClick={handleInstall}
+          >
+            {installing ? <Loader2 className="size-3 animate-spin" /> : <Plus className="size-3" />}
+            Install
+          </Button>
+        </div>
+        <button
+          onClick={() => setShowDevLink(!showDevLink)}
+          className="text-[11px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        >
+          {showDevLink ? "Hide" : "Dev link local extension..."}
+        </button>
+        {showDevLink && (
+          <div className="flex gap-1.5">
+            <Input
+              value={devPath}
+              onChange={(e) => setDevPath(e.target.value)}
+              placeholder="Local path (e.g. ./packages/ext-database)"
+              className="h-8 text-xs flex-1"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 text-xs px-3 gap-1 cursor-pointer"
+              disabled={!devPath.trim()}
+              onClick={async () => {
+                try {
+                  await api.post("/api/extensions/dev-link", { path: devPath.trim() });
+                  toast.success("Dev-linked successfully");
+                  setDevPath("");
+                  fetchExtensions();
+                } catch (e: any) {
+                  toast.error(e.message || "Dev link failed");
+                }
+              }}
+            >
+              <FolderSymlink className="size-3" />
+              Link
+            </Button>
+          </div>
+        )}
+      </section>
+
+      {/* Extension list */}
+      <section className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground">
+          Installed ({extensions.length})
+        </h3>
+        {extensions.length === 0 ? (
+          <p className="text-[11px] text-muted-foreground py-4 text-center">
+            No extensions installed
+          </p>
+        ) : (
+          <div className="space-y-1">
+            {extensions.map((ext) => (
+              <div
+                key={ext.id}
+                className="flex items-center gap-2 px-2.5 py-2 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
+              >
+                <div className="size-8 rounded-md bg-background flex items-center justify-center shrink-0">
+                  <Puzzle className="size-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium truncate">{ext.displayName || ext.id}</p>
+                  <p className="text-[11px] text-muted-foreground truncate">
+                    {ext.id} v{ext.version}
+                    {ext.activated && <span className="ml-1 text-green-500">active</span>}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 cursor-pointer"
+                  title={ext.enabled ? "Disable" : "Enable"}
+                  disabled={togglingId === ext.id}
+                  onClick={() => handleToggle(ext)}
+                >
+                  {togglingId === ext.id ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : ext.enabled ? (
+                    <Power className="size-3.5 text-green-500" />
+                  ) : (
+                    <PowerOff className="size-3.5 text-muted-foreground" />
+                  )}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 cursor-pointer text-destructive hover:text-destructive"
+                  title="Remove"
+                  disabled={deletingId === ext.id}
+                  onClick={() => handleRemove(ext.id)}
+                >
+                  {deletingId === ext.id ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Trash2 className="size-3.5" />
+                  )}
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/web/components/settings/settings-tab.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import {
   Moon, Sun, Monitor, Bell, BellOff, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Keyboard, Globe, Plug,
+  Bot, BellRing, Keyboard, Globe, Plug, Puzzle,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -14,6 +14,8 @@ import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { TelegramSettingsSection } from "./telegram-settings-section";
 import { ProxySettingsSection } from "./proxy-settings-section";
 import { McpSettingsSection } from "./mcp-settings-section";
+import { ExtensionManagerSection } from "./extension-manager-section";
+import { ChangePasswordSection } from "./change-password-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -26,7 +28,7 @@ const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
 const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
   !window.matchMedia("(display-mode: standalone)").matches;
 
-type SettingsCategory = "ai" | "notifications" | "proxy" | "shortcuts" | "mcp";
+type SettingsCategory = "ai" | "notifications" | "proxy" | "shortcuts" | "mcp" | "extensions";
 
 const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
   { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
@@ -34,6 +36,7 @@ const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; ic
   { value: "proxy", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
   { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
   { value: "mcp", label: "MCP Servers", subtitle: "Model Context Protocol tools", icon: Plug },
+  { value: "extensions", label: "Extensions", subtitle: "Install and manage extensions", icon: Puzzle },
 ];
 
 export function SettingsTab() {
@@ -87,6 +90,7 @@ export function SettingsTab() {
             {activeCategory === "proxy" && <ProxySettingsSection />}
             {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
             {activeCategory === "mcp" && <McpSettingsSection />}
+            {activeCategory === "extensions" && <ExtensionManagerSection />}
           </div>
         </ScrollArea>
       </div>
@@ -128,6 +132,9 @@ export function SettingsTab() {
             </p>
           </section>
 
+          {/* Security: Change Password */}
+          <ChangePasswordSection />
+
           {/* Quick: Theme */}
           <section className="space-y-2">
             <h3 className="text-xs font-medium text-muted-foreground">Theme</h3>

package/src/web/components/shared/connection-lost-overlay.tsx

@@ -0,0 +1,89 @@
+import { WifiOff, ServerOff, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
+
+const CLOUD_URL = "https://ppm.hienle.tech";
+
+function isTunnelDomain(): boolean {
+  return window.location.hostname.endsWith(".trycloudflare.com");
+}
+
+export function ConnectionLostOverlay() {
+  const showOverlay = useConnectionStore((s) => s.showOverlay);
+  const [retrying, setRetrying] = useState(false);
+
+  if (!showOverlay) return null;
+
+  const isTunnel = isTunnelDomain();
+
+  async function handleRetry() {
+    setRetrying(true);
+    try {
+      const res = await fetch("/api/health", { cache: "no-store" });
+      if (res.ok) {
+        useConnectionStore.getState().markUp();
+        if ("caches" in window) {
+          const keys = await caches.keys();
+          await Promise.all(keys.map((k) => caches.delete(k)));
+        }
+        window.location.reload();
+        return;
+      }
+    } catch {
+      // still down
+    }
+    setRetrying(false);
+  }
+
+  const Icon = isTunnel ? WifiOff : ServerOff;
+
+  return (
+    <div className="fixed inset-0 z-[200] bg-background/95 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="max-w-sm w-full text-center space-y-6">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-destructive/10 p-4">
+            <Icon className="h-10 w-10 text-destructive" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-foreground">
+            {isTunnel ? "Connection Lost" : "Server Unreachable"}
+          </h2>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            {isTunnel
+              ? "The tunnel appears to have closed. The server may have restarted with a new URL."
+              : "Cannot connect to the PPM server. It may have stopped or is restarting."}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          {isTunnel && (
+            <a
+              href={CLOUD_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              Open PPM Cloud
+            </a>
+          )}
+          <button
+            onClick={handleRetry}
+            disabled={retrying}
+            className="inline-flex items-center justify-center gap-2 rounded-md border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`h-4 w-4 ${retrying ? "animate-spin" : ""}`} />
+            {retrying ? "Retrying…" : "Retry Connection"}
+          </button>
+        </div>
+
+        {!isTunnel && (
+          <p className="text-xs text-muted-foreground">
+            If the server was stopped, run <code className="bg-muted px-1 py-0.5 rounded text-[11px]">ppm start</code> to restart it.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/hooks/use-chat.ts

@@ -22,6 +22,7 @@ interface UseChatReturn {
   connectingElapsed: number;
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
+  compactStatus: "compacting" | null;
   sessionTitle: string | null;
   /** When CLI provider assigns a different session ID, this holds the new ID */
   migratedSessionId: string | null;
@@ -51,6 +52,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const [connectingElapsed, setConnectingElapsed] = useState(0);
   const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
   const [contextWindowPct, setContextWindowPct] = useState<number | null>(null);
+  const [compactStatus, setCompactStatus] = useState<"compacting" | null>(null);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
   const [migratedSessionId, setMigratedSessionId] = useState<string | null>(null);
@@ -121,6 +123,17 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         break;
       }
 
+      case "account_retry": {
+        // Update streaming account to the new one being tried
+        if (ev.accountId && ev.accountLabel) {
+          streamingAccountRef.current = { accountId: ev.accountId, accountLabel: ev.accountLabel };
+        }
+        // Surface retry as a system-level event in the stream
+        streamingEventsRef.current.push(ev as ChatEvent);
+        syncMessages();
+        break;
+      }
+
       case "text": {
         const pid = ev.parentToolUseId as string | undefined;
         if (pid && routeToParent(ev as ChatEvent, pid)) {
@@ -259,6 +272,19 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       return;
     }
 
+    // Handle compact status events
+    if ((data as any).type === "compact_status") {
+      const status = (data as any).status;
+      if (status === "compacting") {
+        setCompactStatus("compacting");
+      } else if (status === "done") {
+        setCompactStatus(null);
+        // Refresh messages to show compacted history
+        refetchRef.current?.();
+      }
+      return;
+    }
+
     // Handle phase transitions from BE
     if ((data as any).type === "phase_changed") {
       const p = (data as any).phase as SessionPhase;
@@ -351,6 +377,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setPhase("idle");
     phaseRef.current = "idle";
     setPendingApproval(null);
+    setCompactStatus(null);
     streamingContentRef.current = "";
     streamingEventsRef.current = [];
     setIsConnected(false);
@@ -539,6 +566,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     connectingElapsed,
     pendingApproval,
     contextWindowPct,
+    compactStatus,
     sessionTitle,
     migratedSessionId,
     sendMessage,

package/src/web/hooks/use-extension-ws.ts

@@ -0,0 +1,181 @@
+import { useEffect, useCallback, useRef } from "react";
+import { WsClient } from "@/lib/ws-client";
+import { useExtensionStore } from "@/stores/extension-store";
+import { useTabStore } from "@/stores/tab-store";
+import { getAuthToken } from "@/lib/api-client";
+import type { ExtServerMsg, ExtClientMsg } from "../../types/extension-messages.ts";
+import { toast } from "sonner";
+
+/**
+ * Hook that manages the WebSocket connection for extension UI bridge.
+ * Dispatches server messages into the extension Zustand store.
+ * Only connects when `enabled` is true (after auth).
+ */
+export function useExtensionWs(enabled = true) {
+  const clientRef = useRef<WsClient | null>(null);
+
+  const send = useCallback((msg: ExtClientMsg) => {
+    clientRef.current?.send(JSON.stringify(msg));
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Pass auth token as query param for WS auth
+    const token = getAuthToken();
+    const wsUrl = token ? `/ws/extensions?token=${encodeURIComponent(token)}` : "/ws/extensions";
+    const client = new WsClient(wsUrl);
+    clientRef.current = client;
+
+    client.onMessage((event) => {
+      let msg: ExtServerMsg;
+      try {
+        msg = JSON.parse(event.data) as ExtServerMsg;
+      } catch {
+        return;
+      }
+
+      const store = useExtensionStore.getState();
+
+      switch (msg.type) {
+        case "contributions:update":
+          store.setContributions(msg.contributions);
+          break;
+
+        case "statusbar:update":
+          store.addStatusBarItem(msg.item);
+          break;
+
+        case "statusbar:remove":
+          store.removeStatusBarItem(msg.itemId);
+          break;
+
+        case "tree:update":
+          if (msg.parentId) {
+            store.updateTreeChildren(msg.viewId, msg.parentId, msg.items);
+          } else {
+            store.updateTree(msg.viewId, msg.items);
+          }
+          break;
+
+        case "tree:refresh":
+          store.removeTree(msg.viewId);
+          break;
+
+        case "notification": {
+          const toastFn = msg.level === "error" ? toast.error
+            : msg.level === "warn" ? toast.warning
+            : toast.info;
+          if (msg.actions && msg.actions.length > 0) {
+            const toastOpts: Record<string, unknown> = {
+              action: {
+                label: msg.actions[0],
+                onClick: () => send({ type: "notification:action", id: msg.id, action: msg.actions![0] ?? null }),
+              },
+              onDismiss: () => send({ type: "notification:action", id: msg.id, action: null }),
+            };
+            // Support a second action button via cancel
+            if (msg.actions.length > 1) {
+              toastOpts.cancel = {
+                label: msg.actions[1],
+                onClick: () => send({ type: "notification:action", id: msg.id, action: msg.actions![1] ?? null }),
+              };
+            }
+            toastFn(msg.message, toastOpts);
+          } else {
+            toastFn(msg.message);
+          }
+          break;
+        }
+
+        case "quickpick:show":
+          store.showQuickPick(
+            msg.items,
+            msg.options,
+          ).then((selected) => {
+            send({
+              type: "quickpick:resolve",
+              requestId: msg.requestId,
+              selected: selected ?? null,
+            });
+          });
+          break;
+
+        case "inputbox:show":
+          store.showInputBox(msg.options).then((value) => {
+            send({
+              type: "inputbox:resolve",
+              requestId: msg.requestId,
+              value: value ?? null,
+            });
+          });
+          break;
+
+        case "webview:create":
+          store.addWebviewPanel({
+            id: msg.panelId,
+            extensionId: msg.extensionId,
+            viewType: msg.viewType,
+            title: msg.title,
+            html: "",
+          });
+          // Open a tab to display the webview panel
+          useTabStore.getState().openTab({
+            type: "extension-webview",
+            title: msg.title,
+            projectId: null,
+            closable: true,
+            metadata: { panelId: msg.panelId, extensionId: msg.extensionId },
+          });
+          break;
+
+        case "webview:html":
+          store.updateWebviewPanel(msg.panelId, { html: msg.html });
+          break;
+
+        case "webview:dispose":
+          store.removeWebviewPanel(msg.panelId);
+          break;
+
+        case "webview:postMessage":
+          window.dispatchEvent(new CustomEvent("ext:webview:message", {
+            detail: { panelId: msg.panelId, message: msg.message },
+          }));
+          break;
+      }
+    });
+
+    // Listen for iframe→server messages (dispatched by ExtensionWebview component)
+    const webviewSendHandler = (e: Event) => {
+      const { panelId, message } = (e as CustomEvent).detail;
+      client.send(JSON.stringify({ type: "webview:message", panelId, message }));
+    };
+    window.addEventListener("ext:webview:send", webviewSendHandler);
+
+    // Listen for tree:expand requests (dispatched by ExtensionTreeView component)
+    const treeExpandHandler = (e: Event) => {
+      const { viewId, itemId } = (e as CustomEvent).detail;
+      client.send(JSON.stringify({ type: "tree:expand", viewId, itemId }));
+    };
+    window.addEventListener("ext:tree:expand", treeExpandHandler);
+
+    // Listen for command:execute requests (dispatched by StatusBar / TreeView)
+    const commandHandler = (e: Event) => {
+      const { command, args } = (e as CustomEvent).detail;
+      client.send(JSON.stringify({ type: "command:execute", command, args }));
+    };
+    window.addEventListener("ext:command:execute", commandHandler);
+
+    client.connect();
+
+    return () => {
+      window.removeEventListener("ext:webview:send", webviewSendHandler);
+      window.removeEventListener("ext:tree:expand", treeExpandHandler);
+      window.removeEventListener("ext:command:execute", commandHandler);
+      client.disconnect();
+      clientRef.current = null;
+    };
+  }, [send, enabled]);
+
+  return { send };
+}

package/src/web/hooks/use-global-keybindings.ts

@@ -21,6 +21,7 @@ export function useGlobalKeybindings() {
 
   useEffect(() => {
     let lastShiftUp = 0;
+    let shiftAlone = false; // true if Shift was pressed without any other key
     const { matchesEvent } = useKeybindingsStore.getState();
 
     let composing = false;
@@ -28,9 +29,24 @@ export function useGlobalKeybindings() {
     function onCompositionEnd() { composing = false; }
 
     function handler(e: KeyboardEvent) {
+      // Track whether Shift is pressed alone (not as a modifier for another key)
+      if (e.type === "keydown" && e.key === "Shift") {
+        shiftAlone = true;
+        return;
+      }
+      // Any non-Shift keydown while Shift is held means Shift is used as modifier
+      if (e.type === "keydown" && e.shiftKey) {
+        shiftAlone = false;
+      }
+      // Any non-Shift key resets the double-tap timer (user is typing, not double-tapping)
+      if (e.type === "keydown" && e.key !== "Shift") {
+        lastShiftUp = 0;
+      }
+
       // Double-Shift detection (on keyup to avoid repeats) — always active
-      // Skip during IME composition (e.g. Vietnamese Telex) to prevent false triggers
-      if (e.type === "keyup" && e.key === "Shift" && !e.ctrlKey && !e.metaKey && !e.altKey && !composing && !e.isComposing) {
+      // Only counts if Shift was pressed alone (not used as modifier e.g. Shift+T for uppercase)
+      // Also skip during IME composition (e.g. Vietnamese Telex) to prevent false triggers
+      if (e.type === "keyup" && e.key === "Shift" && shiftAlone && !e.ctrlKey && !e.metaKey && !e.altKey && !composing && !e.isComposing) {
         const now = Date.now();
         if (now - lastShiftUp < 400) {
           lastShiftUp = 0;

package/src/web/hooks/use-server-reload.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
 
 const POLL_NORMAL_MS = 10_000;  // 10s when server is up
 const POLL_DOWN_MS   = 2_000;   // 2s when server is down (waiting for it to come back)
@@ -8,17 +9,21 @@ const POLL_DOWN_MS   = 2_000;   // 2s when server is down (waiting for it to com
  * When the server goes down and comes back up (restart/stop+start),
  * clears all browser/SW caches and reloads the page so the user
  * always gets fresh assets.
+ *
+ * Also updates the connection store to drive the ConnectionLostOverlay.
  */
 export function useServerReload() {
   useEffect(() => {
     let serverWasDown = false;
     let timer: ReturnType<typeof setTimeout>;
+    const { markDown, markUp } = useConnectionStore.getState();
 
     async function check() {
       try {
         const res = await fetch("/api/health", { cache: "no-store" });
         if (res.ok && serverWasDown) {
           // Server came back — clear caches then reload
+          markUp();
           if ("caches" in window) {
             const keys = await caches.keys();
             await Promise.all(keys.map((k) => caches.delete(k)));
@@ -26,9 +31,13 @@ export function useServerReload() {
           window.location.reload();
           return;
         }
+        if (res.ok) {
+          markUp();
+        }
         serverWasDown = false;
       } catch {
         serverWasDown = true;
+        markDown();
       }
       timer = setTimeout(check, serverWasDown ? POLL_DOWN_MS : POLL_NORMAL_MS);
     }