@hienlh/ppm 0.13.95 → 0.13.97

package/src/services/proxy.service.ts

@@ -1,4 +1,4 @@
-import { getConfigValue, setConfigValue } from "./db.service.ts";
+import { getConfigValue, setConfigValue, insertProxyRequest, type ProxyRequestStatus } from "./db.service.ts";
 import { accountSelector } from "./account-selector.service.ts";
 import { accountService } from "./account.service.ts";
 import { forwardViaSdk } from "./proxy-sdk-bridge.ts";
@@ -10,6 +10,20 @@ const PROXY_AUTH_KEY = "proxy_auth_key";
 
 const ANTHROPIC_API_BASE = "https://api.anthropic.com";
 
+export interface ProxyCallerMeta {
+  callerIp?: string;
+  callerUa?: string;
+}
+
+function parseModel(body: string | null): string | undefined {
+  if (!body) return undefined;
+  try {
+    return JSON.parse(body).model as string | undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 class ProxyService {
   private requestCount = 0;
 
@@ -51,10 +65,15 @@ class ProxyService {
     method: string,
     headers: Record<string, string>,
     body: string | null,
+    caller?: ProxyCallerMeta,
   ): Promise<Response> {
     // Pick account via rotation
     const account = accountSelector.next();
     if (!account) {
+      insertProxyRequest({
+        endpoint: path, model: parseModel(body),
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "error",
+      });
       return new Response(
         JSON.stringify({ type: "error", error: { type: "authentication_error", message: "No active accounts available" } }),
         { status: 401, headers: { "Content-Type": "application/json" } },
@@ -70,11 +89,24 @@ class ProxyService {
 
     // OAuth tokens: route through SDK query() — direct API doesn't work for Claude Max/Pro
     if (token.startsWith("sk-ant-oat") && body && path === "/v1/messages") {
+      const start = performance.now();
       try {
         const parsed = JSON.parse(body);
         this.requestCount++;
-        return await forwardViaSdk(parsed, { id: account.id, email: account.email, accessToken: token });
+        const response = await forwardViaSdk(parsed, { id: account.id, email: account.email, accessToken: token });
+        const durationMs = Math.round(performance.now() - start);
+        insertProxyRequest({
+          endpoint: path, model: parsed.model, accountId: account.id, accountLabel: account.email ?? account.id,
+          callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "success", durationMs,
+        });
+        console.log(`[proxy] ${method} ${path} → ${account.email ?? account.id} (sdk) ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
+        return response;
       } catch (e) {
+        insertProxyRequest({
+          endpoint: path, model: parseModel(body), accountId: account.id, accountLabel: account.email ?? account.id,
+          callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "error",
+          durationMs: Math.round(performance.now() - start),
+        });
         console.error(`[proxy] SDK bridge error:`, (e as Error).message);
         return new Response(
           JSON.stringify({ type: "error", error: { type: "api_error", message: (e as Error).message } }),
@@ -84,16 +116,20 @@ class ProxyService {
     }
 
     // API key accounts: direct HTTP forward to Anthropic API
-    return this.forwardDirect(path, method, headers, body, token, account);
+    return this.forwardDirect(path, method, headers, body, token, account, caller);
   }
 
   /**
    * Forward an OpenAI-format chat completions request via SDK query().
    * Always uses SDK bridge (works for both OAuth and API key accounts).
    */
-  async forwardOpenAi(body: string): Promise<Response> {
+  async forwardOpenAi(body: string, caller?: ProxyCallerMeta): Promise<Response> {
     const account = accountSelector.next();
     if (!account) {
+      insertProxyRequest({
+        endpoint: "/v1/chat/completions", model: parseModel(body),
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "error",
+      });
       return new Response(
         JSON.stringify({ error: { message: "No active accounts available", type: "server_error" } }),
         { status: 401, headers: { "Content-Type": "application/json" } },
@@ -106,11 +142,24 @@ class ProxyService {
       if (fresh) token = fresh.accessToken;
     }
 
+    const start = performance.now();
     try {
       const parsed = JSON.parse(body);
       this.requestCount++;
-      return await forwardOpenAiViaSdk(parsed, { id: account.id, email: account.email, accessToken: token });
+      const response = await forwardOpenAiViaSdk(parsed, { id: account.id, email: account.email, accessToken: token });
+      const durationMs = Math.round(performance.now() - start);
+      insertProxyRequest({
+        endpoint: "/v1/chat/completions", model: parsed.model, accountId: account.id, accountLabel: account.email ?? account.id,
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "success", durationMs,
+      });
+      console.log(`[proxy] POST /v1/chat/completions → ${account.email ?? account.id} (openai) ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
+      return response;
     } catch (e) {
+      insertProxyRequest({
+        endpoint: "/v1/chat/completions", model: parseModel(body), accountId: account.id, accountLabel: account.email ?? account.id,
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "error",
+        durationMs: Math.round(performance.now() - start),
+      });
       console.error(`[proxy] OpenAI bridge error:`, (e as Error).message);
       return new Response(
         JSON.stringify({ error: { message: (e as Error).message, type: "server_error" } }),
@@ -127,6 +176,7 @@ class ProxyService {
     body: string | null,
     token: string,
     account: { id: string; email: string | null },
+    caller?: ProxyCallerMeta,
   ): Promise<Response> {
     const upstreamHeaders: Record<string, string> = {
       "Content-Type": "application/json",
@@ -137,7 +187,8 @@ class ProxyService {
     if (headers["anthropic-beta"]) upstreamHeaders["anthropic-beta"] = headers["anthropic-beta"];
 
     const url = `${ANTHROPIC_API_BASE}${path}`;
-    console.log(`[proxy] ${method} ${path} → account ${account.email ?? account.id} (direct)`);
+    const accountLabel = account.email ?? account.id;
+    const start = performance.now();
 
     try {
       const upstream = await fetch(url, {
@@ -148,17 +199,27 @@ class ProxyService {
       });
 
       this.requestCount++;
+      const durationMs = Math.round(performance.now() - start);
 
+      let status: ProxyRequestStatus = "error";
       if (upstream.status === 429) {
         accountSelector.onRateLimit(account.id);
-        console.log(`[proxy] 429 — account ${account.email ?? account.id} rate limited`);
+        status = "rate_limited";
+        console.log(`[proxy] 429 — account ${accountLabel} rate limited`);
       } else if (upstream.status === 401) {
         accountSelector.onAuthError(account.id);
-        console.log(`[proxy] 401 — account ${account.email ?? account.id} auth error`);
+        console.log(`[proxy] 401 — account ${accountLabel} auth error`);
       } else if (upstream.status >= 200 && upstream.status < 300) {
         accountSelector.onSuccess(account.id);
+        status = "success";
       }
 
+      insertProxyRequest({
+        endpoint: path, model: parseModel(body), accountId: account.id, accountLabel,
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status, durationMs,
+      });
+      console.log(`[proxy] ${method} ${path} → ${accountLabel} (direct) ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
+
       const responseHeaders = new Headers();
       for (const key of ["content-type", "x-request-id", "request-id"]) {
         const val = upstream.headers.get(key);
@@ -168,6 +229,11 @@ class ProxyService {
 
       return new Response(upstream.body, { status: upstream.status, headers: responseHeaders });
     } catch (e) {
+      insertProxyRequest({
+        endpoint: path, model: parseModel(body), accountId: account.id, accountLabel,
+        callerIp: caller?.callerIp, callerUa: caller?.callerUa, status: "error",
+        durationMs: Math.round(performance.now() - start),
+      });
       console.error(`[proxy] Error forwarding:`, (e as Error).message);
       return new Response(
         JSON.stringify({ type: "error", error: { type: "api_error", message: (e as Error).message } }),

package/src/services/supervisor.ts

@@ -25,12 +25,11 @@ import { sdNotify } from "./sd-notify.ts";
 const MAX_RESTARTS = 10;
 const BACKOFF_BASE_MS = 1000;
 const BACKOFF_MAX_MS = 60_000;
-const TUNNEL_COOLDOWN_MS = 600_000;     // 10min cooldown after MAX_RESTARTS before retrying tunnel
 const STABLE_WINDOW_MS = 300_000;       // 5min stable → reset restart counter
 const SERVER_HEALTH_INTERVAL_MS = 30_000;
 const SERVER_HEALTH_FAIL_THRESHOLD = 3;
 const TUNNEL_PROBE_INTERVAL_MS = 30_000;    // 30s — adopted tunnels have no `exited` promise
-const TUNNEL_PROBE_FAIL_THRESHOLD = 3;      // 3 HTTP failures before regenerating (PID check is instant)
+const TUNNEL_ZOMBIE_THRESHOLD = 10;         // ~5min @ 30s probe — only regenerate a truly-zombied URL (process alive, edge dropped). cloudflared self-heals transient QUIC drops, so don't kill it early.
 const TUNNEL_URL_REGEX = /https:\/\/(?!api\.)[a-z0-9-]+\.trycloudflare\.com/;
 const UPGRADE_CHECK_INTERVAL_MS = 900_000;  // 15min
 const UPGRADE_SKIP_INITIAL_MS = 300_000;    // 5min delay before first check
@@ -38,6 +37,7 @@ const SELF_REPLACE_TIMEOUT_MS = 30_000;     // 30s to wait for new supervisor
 
 const logFile = () => resolve(getPpmDir(), "ppm.log");
 const restartingFlag = () => resolve(getPpmDir(), ".restarting");
+const serverShutdownFile = () => resolve(getPpmDir(), ".server-shutdown");
 
 // ─── State ─────────────────────────────────────────────────────────────
 let serverChild: Subprocess | null = null;
@@ -86,6 +86,38 @@ function backoffDelay(restartCount: number): number {
   return Math.min(BACKOFF_BASE_MS * 2 ** (restartCount - 1), BACKOFF_MAX_MS);
 }
 
+// ─── Graceful server shutdown (Windows-safe) ──────────────────────────
+// On Windows, SIGTERM maps to TerminateProcess — graceful handlers never fire.
+// Instead, write a shutdown file that the server child polls for.
+function requestServerShutdown(child: Subprocess, timeoutMs: number = 2000): Promise<void> {
+  return new Promise<void>((resolve) => {
+    const pid = child.pid;
+    if (process.platform === "win32") {
+      try { writeFileSync(serverShutdownFile(), String(Date.now())); } catch {}
+      const deadline = Date.now() + timeoutMs;
+      const poll = setInterval(() => {
+        try { process.kill(pid, 0); } catch {
+          clearInterval(poll);
+          resolve();
+          return;
+        }
+        if (Date.now() > deadline) {
+          clearInterval(poll);
+          try { process.kill(pid, "SIGKILL"); } catch {}
+          resolve();
+        }
+      }, 100);
+    } else {
+      try { child.kill("SIGTERM"); } catch {}
+      setTimeout(() => {
+        try { process.kill(pid, "SIGKILL"); } catch {}
+        resolve();
+      }, timeoutMs).unref();
+      resolve();
+    }
+  });
+}
+
 // ─── Server management ─────────────────────────────────────────────────
 export async function spawnServer(
   serverArgs: string[],
@@ -262,16 +294,9 @@ export async function spawnTunnel(port: number): Promise<void> {
     lastTunnelCrash = now;
     tunnelRestarts++;
 
-    if (tunnelRestarts > MAX_RESTARTS) {
-      log("WARN", `Tunnel exceeded ${MAX_RESTARTS} URL extraction failures, cooldown ${TUNNEL_COOLDOWN_MS}ms before retry`);
-      updateStatus({ shareUrl: null, tunnelPid: null });
-      await Bun.sleep(TUNNEL_COOLDOWN_MS);
-      tunnelRestarts = 0;
-      if (shuttingDown) return;
-      return spawnTunnel(port);
-    }
-
-    const delay = backoffDelay(tunnelRestarts);
+    // Never give up: cap the counter so backoff plateaus at BACKOFF_MAX_MS (no 10-min dark window).
+    if (tunnelRestarts > MAX_RESTARTS) tunnelRestarts = MAX_RESTARTS;
+    const delay = backoffDelay(tunnelRestarts) + Math.floor(Math.random() * 1000);
     log("WARN", `Tunnel failed, retry in ${delay}ms (#${tunnelRestarts})`);
     await Bun.sleep(delay);
     return spawnTunnel(port);
@@ -296,16 +321,9 @@ export async function spawnTunnel(port: number): Promise<void> {
   lastTunnelCrash = now;
   tunnelRestarts++;
 
-  if (tunnelRestarts > MAX_RESTARTS) {
-    log("WARN", `Tunnel exceeded ${MAX_RESTARTS} restarts, cooldown ${TUNNEL_COOLDOWN_MS}ms before retry`);
-    updateStatus({ shareUrl: null, tunnelPid: null });
-    await Bun.sleep(TUNNEL_COOLDOWN_MS);
-    tunnelRestarts = 0;
-    if (!shuttingDown) return spawnTunnel(port);
-    return;
-  }
-
-  const delay = backoffDelay(tunnelRestarts);
+  // Never give up: cap the counter so backoff plateaus at BACKOFF_MAX_MS (no 10-min dark window).
+  if (tunnelRestarts > MAX_RESTARTS) tunnelRestarts = MAX_RESTARTS;
+  const delay = backoffDelay(tunnelRestarts) + Math.floor(Math.random() * 1000);
   log("WARN", `Tunnel process exited (code=${exitCode}, signal=${tunnelChild === null ? "killed" : "self"}, url=${deadUrl}), restart in ${delay}ms (#${tunnelRestarts})`);
   await Bun.sleep(delay);
 
@@ -316,8 +334,14 @@ export async function spawnTunnel(port: number): Promise<void> {
 function startServerHealthCheck(port: number) {
   healthTimer = setInterval(async () => {
     if (shuttingDown || !serverChild || getState() === "stopped") return;
+    // Read actual port from status.json in case server auto-selected a different port
+    let checkPort = port;
     try {
-      const res = await fetch(`http://127.0.0.1:${port}/api/health`, {
+      const status = readStatus();
+      if (status.port && typeof status.port === "number") checkPort = status.port;
+    } catch {}
+    try {
+      const res = await fetch(`http://127.0.0.1:${checkPort}/api/health`, {
         signal: AbortSignal.timeout(5000),
       });
       if (res.ok) { healthFailCount = 0; return; }
@@ -325,7 +349,12 @@ function startServerHealthCheck(port: number) {
     healthFailCount++;
     if (healthFailCount >= SERVER_HEALTH_FAIL_THRESHOLD && serverChild) {
       log("WARN", `Server unresponsive (${healthFailCount} failures), killing`);
-      try { serverChild.kill(); } catch {}
+      const pid = serverChild.pid;
+      if (process.platform === "win32") {
+        try { writeFileSync(serverShutdownFile(), String(Date.now())); } catch {}
+      }
+      try { serverChild.kill("SIGTERM"); } catch {}
+      setTimeout(() => { try { process.kill(pid, "SIGKILL"); } catch {} }, 1000).unref();
       healthFailCount = 0;
       // spawnServer loop handles respawn via exited promise
     }
@@ -363,8 +392,8 @@ function startTunnelProbe(port: number) {
       }
     } catch {}
     tunnelFailCount++;
-    if (tunnelFailCount >= TUNNEL_PROBE_FAIL_THRESHOLD) {
-      log("WARN", `Tunnel URL dead (${tunnelFailCount} failures), regenerating`);
+    if (tunnelFailCount >= TUNNEL_ZOMBIE_THRESHOLD) {
+      log("WARN", `Tunnel URL zombie (${tunnelFailCount} fails ≈ ${tunnelFailCount * (TUNNEL_PROBE_INTERVAL_MS / 1000)}s, process alive but edge dropped), regenerating`);
       if (tunnelChild) {
         try { tunnelChild.kill(); } catch {}
         // spawnTunnel loop handles respawn via exited promise
@@ -461,12 +490,14 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
     }
 
     // Kill server child to free the port; keep tunnel alive for domain continuity
-    // Use SIGKILL + process group kill to ensure grandchildren (SDK subprocesses) die too
     log("INFO", "Stopping server before upgrade (tunnel kept alive)");
     if (serverChild) {
       const pid = serverChild.pid;
-      try { process.kill(-pid, "SIGKILL"); } catch {} // kill process group
-      try { serverChild.kill("SIGKILL"); } catch {}   // fallback: kill direct child
+      await requestServerShutdown(serverChild, 2000);
+      // Process group kill on Unix (catches grandchildren like Claude SDK subprocesses)
+      if (process.platform !== "win32") {
+        try { process.kill(-pid, "SIGKILL"); } catch {}
+      }
       serverChild = null;
     }
     if (healthTimer) { clearInterval(healthTimer); healthTimer = null; }
@@ -489,8 +520,11 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
 
     // ── Non-systemd path: spawn new supervisor directly (macOS/Windows) ─
     // Poll until port is actually free (max 10s) — never guess with fixed sleep
+    // On Windows, reusePort lets the new server bind over zombie sockets,
+    // so we only need a brief wait for the killed process to release.
     const portFreeStart = Date.now();
-    while (Date.now() - portFreeStart < 10_000) {
+    const portTimeout = process.platform === "win32" ? 3_000 : 10_000;
+    while (Date.now() - portFreeStart < portTimeout) {
       const inUse = await new Promise<boolean>((resolve) => {
         const net = require("node:net") as typeof import("node:net");
         const tester = net.createServer()
@@ -505,13 +539,31 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
 
     // Spawn new supervisor using saved argv
     const cmd = originalArgv.slice();
-    const logFd = openSync(logFile(), "a");
-    const child = Bun.spawn({
-      cmd,
-      stdio: ["ignore", logFd, logFd],
-      env: process.env,
-    });
-    child.unref();
+    const newLogFd = openSync(logFile(), "a");
+    let killNewChild = () => {};
+
+    if (process.platform === "win32") {
+      // On Windows, Bun.spawn children die when parent exits (same job object).
+      // Use node:child_process with detached:true to create a truly independent process.
+      const { spawn: nodeSpawn } = require("node:child_process") as typeof import("node:child_process");
+      const proc = nodeSpawn(cmd[0]!, cmd.slice(1), {
+        detached: true,
+        stdio: ["ignore", newLogFd, newLogFd] as any,
+        env: process.env as NodeJS.ProcessEnv,
+        windowsHide: true,
+      });
+      killNewChild = () => { try { if (proc.pid) process.kill(proc.pid); } catch {} };
+      proc.unref();
+      try { closeSync(newLogFd); } catch {} // child inherited fd, parent can close
+    } else {
+      const proc = Bun.spawn({
+        cmd,
+        stdio: ["ignore", newLogFd, newLogFd],
+        env: process.env,
+      });
+      killNewChild = () => { try { proc.kill(); } catch {} };
+      proc.unref();
+    }
 
     // Poll status.json for new supervisor PID (up to 30s)
     const start = Date.now();
@@ -534,7 +586,7 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
 
     // Timeout — new supervisor didn't start, restore old supervisor
     log("ERROR", "Self-replace timeout: new supervisor did not start");
-    try { child.kill(); } catch {}
+    killNewChild();
     try { unlinkSync(restartingFlag()); } catch {}
     shuttingDown = false;
     notifyStateChange("upgrading", "running", "upgrade_failed");
@@ -758,9 +810,8 @@ export async function softStop() {
   notifyStateChange(getState(), "stopped", "user_stop");
   setState("stopped");
 
-  // Kill server child
   if (serverChild) {
-    try { serverChild.kill(); } catch {}
+    await requestServerShutdown(serverChild, 1000);
     serverChild = null;
   }
 
@@ -769,9 +820,6 @@ export async function softStop() {
 
   // Keep: tunnel, Cloud WS, upgrade checks, tunnel probe
   updateStatus({ state: "stopped", pid: null, stoppedAt: new Date().toISOString() });
-
-  // Start stopped page on the server port so tunnel URL still works
-  await Bun.sleep(500); // brief wait for port release
   startStoppedPage(_opts.port, _opts.host);
 
   // Wait for resume signal
@@ -810,11 +858,14 @@ export function shutdown() {
   if (upgradeDelayTimer) clearTimeout(upgradeDelayTimer);
   if (cloudMonitorTimer) clearInterval(cloudMonitorTimer);
 
-  // Use SIGKILL for children — SIGTERM leaves grandchildren (Claude SDK, etc.)
-  // alive, causing systemd to wait 90s then SIGKILL the entire cgroup
   if (serverChild) {
     log("INFO", `Killing server child (PID: ${serverChild.pid})`);
-    try { serverChild.kill("SIGKILL"); } catch {}
+    if (process.platform === "win32") {
+      try { writeFileSync(serverShutdownFile(), String(Date.now())); } catch {}
+    }
+    const pid = serverChild.pid;
+    try { serverChild.kill("SIGTERM"); } catch {}
+    setTimeout(() => { try { process.kill(pid, "SIGKILL"); } catch {} }, 2000).unref();
   }
   if (tunnelChild) {
     log("INFO", `Killing tunnel child (PID: ${tunnelChild.pid})`);
@@ -836,8 +887,9 @@ export async function runSupervisor(opts: {
   const ppmDir = getPpmDir();
   if (!existsSync(ppmDir)) mkdirSync(ppmDir, { recursive: true });
 
-  // Clean up restarting flag from previous upgrade/restart
+  // Clean up flags from previous upgrade/restart
   try { unlinkSync(restartingFlag()); } catch {}
+  try { unlinkSync(serverShutdownFile()); } catch {}
 
   // Save original argv for self-replace
   originalArgv = [...process.argv];
@@ -1055,7 +1107,9 @@ if (process.argv.includes("__supervise__")) {
   const host = process.argv[idx + 2] ?? "0.0.0.0";
   const profileRaw = process.argv[idx + 3];
   const profile = profileRaw && profileRaw !== "_" && !profileRaw.startsWith("--") ? profileRaw : undefined;
-  const share = process.argv.includes("--share");
+  // Tunnel always enabled — cloudflared shares the server publicly. `--share` is a deprecated no-op
+  // (see src/server/index.ts:227, src/index.ts:27). Supervisor must not gate on it.
+  const share = true;
 
   // Set DB profile for supervisor (needed to read config)
   if (profile) {

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

@@ -96,6 +96,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     renderedMessages,
     expandCompact,
     isCompactExpanded,
+    dismissMessage,
+    clearErrors,
     messagesLoading,
     isStreaming,
     phase,
@@ -441,6 +443,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
         onSelectSession={handleSelectSession}
+        onDismissMessage={dismissMessage}
+        onClearErrors={clearErrors}
         bashPartialOutput={bashPartialOutput}
       />
 

package/src/web/components/chat/message-list.tsx

@@ -55,6 +55,10 @@ interface MessageListProps {
   onFork?: (userMessage: string, messageId?: string) => void;
   /** Called when user selects a recent session from the welcome screen */
   onSelectSession?: (session: import("../../../types/chat").SessionInfo) => void;
+  /** Dismiss a single message (removes from local view only — not persisted history) */
+  onDismissMessage?: (messageId: string) => void;
+  /** Remove all system/error bubbles from the local view */
+  onClearErrors?: () => void;
   /** Partial bash output ref from useChat for real-time streaming */
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
   /** Fetches pre-compact transcript and prepends messages. Returns loaded count. */
@@ -79,6 +83,8 @@ export function MessageList({
   bashPartialOutput,
   onExpandCompact,
   isCompactExpanded,
+  onDismissMessage,
+  onClearErrors,
 }: MessageListProps) {
   // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
@@ -110,6 +116,16 @@ export function MessageList({
     onFork?.(msgContent, msgId);
   }, [onFork]);
 
+  // Stable dismiss handler — avoids new closure per message (preserves MessageBubble memo)
+  const handleDismiss = useCallback((msgId: string) => {
+    onDismissMessage?.(msgId);
+  }, [onDismissMessage]);
+
+  const errorCount = useMemo(
+    () => filtered.reduce((n, m) => (m.role === "system" ? n + 1 : n), 0),
+    [filtered],
+  );
+
   // Scroll anchor bridge published from inside StickToBottom (needs the context's scrollRef).
   const scrollAnchorRef = useRef<ScrollAnchorHandle | null>(null);
 
@@ -182,6 +198,18 @@ export function MessageList({
       <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict] [overflow-anchor:auto]" resize="smooth" initial="instant">
         <StickToBottom.Content className="p-4 space-y-4 select-none [&>*]:[overflow-anchor:auto]">
           <ScrollAnchorBridge bridgeRef={scrollAnchorRef} />
+          {errorCount > 1 && onClearErrors && (
+            <div className="sticky top-0 z-10 flex justify-center">
+              <button
+                type="button"
+                onClick={onClearErrors}
+                className="flex items-center gap-1.5 rounded-full bg-red-500/15 border border-red-500/25 px-3 py-1 text-xs text-red-400 hover:bg-red-500/25"
+              >
+                <XCircle className="size-3.5" />
+                Clear all errors ({errorCount})
+              </button>
+            </div>
+          )}
           {hasMore && (
             <LoadMoreSentinel onLoadMore={loadMore} loading={autoLoadingCompact} />
           )}
@@ -195,6 +223,7 @@ export function MessageList({
                   isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                   projectName={projectName}
                   onFork={msg.role === "user" && onFork ? handleFork : undefined}
+                  onDismiss={msg.role === "system" && onDismissMessage ? handleDismiss : undefined}
                   prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
                   bashPartialOutput={bashPartialOutput}
                 />
@@ -385,9 +414,10 @@ function LoadMoreSentinel({ onLoadMore, loading }: { onLoadMore: () => void; loa
   );
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, onDismiss, prevMsgId, bashPartialOutput }: {
   message: ChatMessage; isStreaming: boolean; projectName?: string;
   onFork?: (content: string, messageId: string | undefined) => void;
+  onDismiss?: (messageId: string) => void;
   prevMsgId?: string;
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
 }) {
@@ -405,9 +435,20 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, projec
 
   if (message.role === "system") {
     return (
-      <div className="flex items-center gap-2 rounded-lg bg-red-500/10 border border-red-500/20 px-3 py-2 text-sm text-red-400">
+      <div className="group flex items-center gap-2 rounded-lg bg-red-500/10 border border-red-500/20 px-3 py-2 text-sm text-red-400">
         <AlertCircle className="size-4 shrink-0" />
-        <p>{message.content}</p>
+        <p className="flex-1">{message.content}</p>
+        {onDismiss && (
+          <button
+            type="button"
+            onClick={() => onDismiss(message.id)}
+            aria-label="Dismiss"
+            title="Dismiss"
+            className="shrink-0 rounded p-1 text-red-400/70 hover:text-red-400 hover:bg-red-500/15 md:opacity-0 md:group-hover:opacity-100"
+          >
+            <XCircle className="size-4" />
+          </button>
+        )}
       </div>
     );
   }

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

@@ -48,6 +48,10 @@ interface UseChatReturn {
   expandCompact: (compactMessageId: string, jsonlPath: string) => Promise<number>;
   /** Whether a given compactMessageId has been expanded. */
   isCompactExpanded: (compactMessageId: string) => boolean;
+  /** Remove a single message from the local view (not persisted history). */
+  dismissMessage: (id: string) => void;
+  /** Remove all system/error bubbles from the local view. */
+  clearErrors: () => void;
   messagesLoading: boolean;
   isStreaming: boolean;
   phase: SessionPhase;
@@ -882,6 +886,16 @@ export function useChat(sessionId: string | null, providerId = "claude", project
 
   const isCompactExpanded = useCallback((id: string) => expansions.has(id), [expansions]);
 
+  /** Remove a single message from the local view (e.g. dismiss an error bubble). */
+  const dismissMessage = useCallback((id: string) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+
+  /** Remove all system/error bubbles from the local view. */
+  const clearErrors = useCallback(() => {
+    setMessages((prev) => prev.filter((m) => m.role !== "system"));
+  }, []);
+
   /** Flattened view: expansions prepended before their compact cards. */
   const renderedMessages = useMemo(
     () => flattenWithExpansions(messages, expansions),
@@ -893,6 +907,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     renderedMessages,
     expandCompact,
     isCompactExpanded,
+    dismissMessage,
+    clearErrors,
     messagesLoading,
     isStreaming,
     phase,