@hienlh/ppm 0.17.34 → 0.17.37

package/src/shared/tool-result-content.ts

@@ -29,11 +29,22 @@ function isImageBlock(block: unknown): block is { source?: { data?: unknown } }
 
 function imagePlaceholder(block: { source?: { data?: unknown } }): string {
   const data = block.source?.data;
-  if (typeof data !== "string" || data.length === 0) return "[image]";
-  return `[image · ${formatBytes(base64ByteLength(data))}]`;
+  if (typeof data !== "string" || data.length === 0) return imagePlaceholderText();
+  return imagePlaceholderText(base64ByteLength(data));
 }
 
-function base64ByteLength(data: string): number {
+/**
+ * The exact text that stands in for an image block.
+ *
+ * Anything that removes an image from a transcript must use this, so that
+ * `resultHasImagePlaceholder` still recognises the result as having carried an image and the
+ * chat card keeps hiding the textual output in favour of the rendered file.
+ */
+export function imagePlaceholderText(bytes?: number): string {
+  return bytes == null ? "[image]" : `[image · ${formatBytes(bytes)}]`;
+}
+
+export function base64ByteLength(data: string): number {
   const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
   return Math.max(0, Math.floor((data.length * 3) / 4) - padding);
 }

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,23 +1,19 @@
 import { useState, useEffect, useCallback, useRef, type MouseEvent } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Circle, Bug, ClipboardCheck, Copy, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Circle, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
-import { Button } from "@/components/ui/button";
-import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useTabStore } from "@/stores/tab-store";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "@/components/settings/ai-settings-section";
 import { TagSettingsSection } from "@/components/settings/tag-settings-section";
 import { SessionContextMenu } from "./session-context-menu";
+import { SessionDebugButton } from "./session-debug-dialog";
 import { UsageDetailPanel } from "./usage-badge";
 import { CodexUsagePanel } from "./codex-usage-panel";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
-import { copyToClipboard } from "@/lib/clipboard";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
@@ -64,103 +60,6 @@ function pctColor(pct: number): string {
   return "text-success";
 }
 
-/** Live render weight of the currently open transcript (this button sits in the
- *  active session's toolbar, so the visible chat scroller IS this session). */
-function gatherRenderStats(): string[] {
-  let scroller: HTMLElement | null = null;
-  for (const el of document.querySelectorAll<HTMLElement>(".overflow-y-auto")) {
-    if (el.clientHeight < 100 || !el.querySelector("[data-msg-index]")) continue;
-    if (!scroller || el.scrollHeight > scroller.scrollHeight) scroller = el;
-  }
-  const lines: string[] = [];
-  if (scroller) {
-    lines.push(`Rendered messages: ${scroller.querySelectorAll("[data-msg-index]").length}`);
-    lines.push(`Transcript DOM nodes: ${scroller.querySelectorAll("*").length}`);
-    lines.push(`Transcript height: ${Math.round(scroller.scrollHeight)}px`);
-  }
-  // Chrome-only; page-wide (not just the transcript) but the best in-app proxy.
-  const mem = (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory;
-  if (mem) lines.push(`JS heap (page): ${(mem.usedJSHeapSize / 1048576).toFixed(1)} MB`);
-  return lines;
-}
-
-const fmtMB = (bytes: number) => `${(bytes / 1048576).toFixed(2)} MB`;
-
-function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
-  const [open, setOpen] = useState(false);
-  const [info, setInfo] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
-  const isMobile = useIsMobile();
-
-  const openPopup = () => {
-    setOpen(true);
-    setCopied(false);
-    setInfo(null);
-    api.get<{ ppmSessionId: string; sdkSessionId: string; jsonlPath: string | null; projectPath: string; jsonlSizeBytes: number | null; jsonlLines: number | null }>(
-      `${projectUrl(projectName)}/chat/sessions/${sessionId}/debug?project=${encodeURIComponent(projectName)}`,
-    ).then((data) => {
-      const weight = data.jsonlSizeBytes != null
-        ? ` (${fmtMB(data.jsonlSizeBytes)}${data.jsonlLines != null ? `, ${data.jsonlLines} records` : ""})`
-        : "";
-      setInfo([
-        `PPM Session: ${data.ppmSessionId}`,
-        `SDK Session: ${data.sdkSessionId}`,
-        data.jsonlPath ? `JSONL: ${data.jsonlPath}${weight}` : `JSONL: not found`,
-        data.projectPath ? `Project: ${data.projectPath}` : null,
-        ...gatherRenderStats(),
-      ].filter(Boolean).join("\n"));
-    }).catch(() => setInfo("Failed to load debug info"));
-  };
-
-  const copy = () => {
-    if (!info) return;
-    copyToClipboard(info).then((ok) => {
-      if (!ok) return;
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  const body = (
-    <div className="flex flex-col gap-3">
-      <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-        <Bug className="size-4 text-primary" />
-        Session debug info
-      </h2>
-      <pre className="max-h-[50vh] overflow-y-auto whitespace-pre-wrap break-all rounded-md border border-border bg-surface p-2.5 font-mono text-[11px] leading-relaxed text-text-secondary select-text">
-        {info ?? "Loading..."}
-      </pre>
-      <Button size="sm" onClick={copy} disabled={!info} className="w-full">
-        {copied ? <><ClipboardCheck className="size-3.5" /> Copied!</> : <><Copy className="size-3.5" /> Copy</>}
-      </Button>
-    </div>
-  );
-
-  return (
-    <>
-      <button
-        onClick={openPopup}
-        className="p-1 rounded text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
-        title="Session debug info"
-      >
-        <Bug className="size-3" />
-      </button>
-      {isMobile ? (
-        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid">
-          <div className="px-4 pb-4 pt-1">{body}</div>
-        </BottomSheet>
-      ) : (
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogTitle className="sr-only">Session debug info</DialogTitle>
-            {body}
-          </DialogContent>
-        </Dialog>
-      )}
-    </>
-  );
-}
-
 export function ChatHistoryBar({
   projectName, usageInfo, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, providerId, onSelectSession, onBugReport, isConnected, onReload,
@@ -477,7 +376,7 @@ export function ChatHistoryBar({
 
         {/* Debug info — copy session IDs + JSONL path */}
         {sessionId && (
-          <DebugCopyButton sessionId={sessionId} projectName={projectName} />
+          <SessionDebugButton sessionId={sessionId} projectName={projectName} />
         )}
 
         {/* Reload messages + connection status */}

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

@@ -252,9 +252,11 @@ export const MessageInput = memo(function MessageInput({
     return () => window.removeEventListener("ppm:send-to-chat", handler);
   }, [getVisibleTextarea]);
 
-  // Apply initialValue when it changes (e.g. "Ask AI" from command palette)
+  // Apply initialValue when it changes (e.g. "Ask AI" from command palette).
+  // A restored draft can land after the input is already on screen, so never
+  // write over text that is already there — what was typed wins.
   useEffect(() => {
-    if (initialValue) {
+    if (initialValue && !valueRef.current) {
       writeTextareas(initialValue);
       // Focus and move cursor to end
       setTimeout(() => {

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

@@ -57,6 +57,7 @@ import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";
 import { useProjectStore } from "@/stores/project-store";
 import { useImageOverlay } from "@/stores/image-overlay-store";
+import { collectGallery, GALLERY_ITEM_ATTR, GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -359,6 +360,7 @@ export function MessageList({
       )}
       <div
         ref={setScrollRef}
+        {...{ [GALLERY_ROOT_ATTR]: "" }}
         className="flex-1 overflow-y-auto overflow-x-hidden [overflow-anchor:none]"
         style={{ WebkitOverflowScrolling: "touch", overscrollBehavior: "contain" }}
       >
@@ -981,11 +983,16 @@ function AuthImage({ src, alt }: { src: string; alt: string }) {
   }
 
   return (
-    <button type="button" onClick={() => openOverlay(blobUrl, alt)} className="block text-left">
+    <button
+      type="button"
+      onClick={(e) => openOverlay(blobUrl, alt, collectGallery(e.currentTarget))}
+      className="block text-left"
+    >
       <img
         src={blobUrl}
         alt={alt}
         style={box}
+        {...{ [GALLERY_ITEM_ATTR]: "" }}
         onLoad={(e) => {
           const el = e.currentTarget;
           const c = imageBlobCache.get(src);
@@ -1007,11 +1014,11 @@ function AuthImageThumbnail({ filePath, projectName }: { filePath: string; proje
   return (
     <button
       type="button"
-      onClick={() => blobUrl && openOverlay(blobUrl, name)}
+      onClick={(e) => blobUrl && openOverlay(blobUrl, name, collectGallery(e.currentTarget))}
       className="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-surface transition-colors cursor-pointer"
     >
       {blobUrl ? (
-        <img src={blobUrl} alt={name} className="size-4 rounded-sm object-cover shrink-0" />
+        <img src={blobUrl} alt={name} {...{ [GALLERY_ITEM_ATTR]: "" }} className="size-4 rounded-sm object-cover shrink-0" />
       ) : error ? (
         <ImageIcon className="size-3 shrink-0" />
       ) : (

package/src/web/components/chat/session-debug-dialog.tsx

@@ -0,0 +1,240 @@
+import { useEffect, useState } from "react";
+import { Bug, ClipboardCheck, Copy, ImageOff, Loader2, TriangleAlert } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { copyToClipboard } from "@/lib/clipboard";
+
+interface DebugInfo {
+  ppmSessionId: string;
+  sdkSessionId: string;
+  jsonlPath: string | null;
+  projectPath: string;
+  jsonlSizeBytes: number | null;
+  jsonlLines: number | null;
+}
+
+interface ImageAudit {
+  total: number;
+  oversized: number;
+  bytes: number;
+  oversizedBytes: number;
+  largestSide: number;
+  limit: number;
+}
+
+const fmtMB = (bytes: number) => `${(bytes / 1048576).toFixed(2)} MB`;
+
+function fmtSize(bytes: number): string {
+  if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)} MB`;
+  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+}
+
+/**
+ * Live render weight of the currently open transcript.
+ *
+ * This dialog opens from the active session's toolbar, so the tallest scroller holding
+ * message nodes is that session's transcript.
+ */
+function gatherRenderStats(): string[] {
+  let scroller: HTMLElement | null = null;
+  for (const el of document.querySelectorAll<HTMLElement>(".overflow-y-auto")) {
+    if (el.clientHeight < 100 || !el.querySelector("[data-msg-index]")) continue;
+    if (!scroller || el.scrollHeight > scroller.scrollHeight) scroller = el;
+  }
+  const lines: string[] = [];
+  if (scroller) {
+    lines.push(`Rendered messages: ${scroller.querySelectorAll("[data-msg-index]").length}`);
+    lines.push(`Transcript DOM nodes: ${scroller.querySelectorAll("*").length}`);
+    lines.push(`Transcript height: ${Math.round(scroller.scrollHeight)}px`);
+  }
+  // Chrome-only; page-wide (not just the transcript) but the best in-app proxy.
+  const mem = (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory;
+  if (mem) lines.push(`JS heap (page): ${(mem.usedJSHeapSize / 1048576).toFixed(1)} MB`);
+  return lines;
+}
+
+/**
+ * Removal of the image payloads a transcript replays on every turn.
+ *
+ * The transcript is re-sent in full each time the session resumes, so every image it
+ * carries is paid for again. Images past the API's per-image dimension cap are rejected
+ * outright once a request holds several of them, so those cost bandwidth and raise an
+ * error while adding nothing — which is why they get their own button.
+ *
+ * Nothing here runs on its own: a transcript is the record of a session, and trimming it
+ * is the user's call.
+ */
+function TranscriptImages({ sessionId, projectName }: { sessionId: string; projectName: string }) {
+  const [audit, setAudit] = useState<ImageAudit | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<"oversized" | "all" | null>(null);
+  const [freed, setFreed] = useState<{ removed: number; bytes: number } | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    api.get<ImageAudit>(
+      `${projectUrl(projectName)}/chat/sessions/${sessionId}/images?project=${encodeURIComponent(projectName)}`,
+    ).then((a) => { if (live) setAudit(a); })
+      .catch((e: Error) => { if (live) setError(e.message); });
+    return () => { live = false; };
+  }, [sessionId, projectName]);
+
+  const strip = (mode: "oversized" | "all") => {
+    setBusy(mode);
+    setError(null);
+    api.post<{ removed: number; bytesFreed: number; remaining: ImageAudit }>(
+      `${projectUrl(projectName)}/chat/sessions/${sessionId}/images/strip?project=${encodeURIComponent(projectName)}`,
+      { mode },
+    ).then((r) => {
+      setAudit(r.remaining);
+      setFreed({ removed: r.removed, bytes: r.bytesFreed });
+    }).catch((e: Error) => setError(e.message)).finally(() => setBusy(null));
+  };
+
+  if (error && !audit) return <p className="text-[11px] text-error">{error}</p>;
+  if (!audit) return <p className="text-[11px] text-text-subtle">Scanning transcript for images...</p>;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="text-xs font-semibold text-foreground">Transcript images</h3>
+
+      {audit.total === 0 ? (
+        <p className="text-[11px] text-text-subtle">
+          No images in tool results{freed ? " — transcript is clean." : "."}
+        </p>
+      ) : (
+        <p className="text-[11px] text-text-secondary">
+          {audit.total} image{audit.total === 1 ? "" : "s"} in tool results · {fmtSize(audit.bytes)} of base64,
+          replayed on every turn.
+        </p>
+      )}
+
+      {audit.oversized > 0 && (
+        <div className="flex gap-2 rounded-md border border-warning/40 bg-warning/10 p-2 text-[11px] text-text-secondary">
+          <TriangleAlert className="mt-px size-3.5 shrink-0 text-warning" />
+          <span>
+            {audit.oversized} image{audit.oversized === 1 ? " is" : "s are"} wider than {audit.limit}px
+            (largest {audit.largestSide}px). The API rejects those once a request carries several images,
+            so they already contribute nothing — removing them loses no context.
+          </span>
+        </div>
+      )}
+
+      {freed && (
+        <p className="text-[11px] text-success">
+          Removed {freed.removed} image{freed.removed === 1 ? "" : "s"}, freed {fmtSize(freed.bytes)}.
+        </p>
+      )}
+      {error && <p className="text-[11px] text-error">{error}</p>}
+
+      <div className="flex flex-col gap-1.5 sm:flex-row">
+        <Button
+          size="sm"
+          variant="outline"
+          className="flex-1"
+          disabled={busy !== null || audit.oversized === 0}
+          onClick={() => strip("oversized")}
+        >
+          {busy === "oversized" ? <Loader2 className="size-3.5 animate-spin" /> : <ImageOff className="size-3.5" />}
+          Remove oversized{audit.oversized > 0 ? ` (${audit.oversized} · ${fmtSize(audit.oversizedBytes)})` : ""}
+        </Button>
+        <Button
+          size="sm"
+          variant="destructive"
+          className="flex-1"
+          disabled={busy !== null || audit.total === 0}
+          onClick={() => strip("all")}
+        >
+          {busy === "all" ? <Loader2 className="size-3.5 animate-spin" /> : <ImageOff className="size-3.5" />}
+          Remove all{audit.total > 0 ? ` (${audit.total} · ${fmtSize(audit.bytes)})` : ""}
+        </Button>
+      </div>
+      <p className="text-[11px] text-text-subtle">
+        Images you attached to a message are never touched. A removed tool image is replaced by its
+        placeholder text; the chat still shows the file, re-read from disk.
+      </p>
+    </div>
+  );
+}
+
+/** Toolbar button opening the session's debug facts and transcript maintenance. */
+export function SessionDebugButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
+  const [open, setOpen] = useState(false);
+  const [info, setInfo] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const isMobile = useIsMobile();
+
+  const openPopup = () => {
+    setOpen(true);
+    setCopied(false);
+    setInfo(null);
+    api.get<DebugInfo>(
+      `${projectUrl(projectName)}/chat/sessions/${sessionId}/debug?project=${encodeURIComponent(projectName)}`,
+    ).then((data) => {
+      const weight = data.jsonlSizeBytes != null
+        ? ` (${fmtMB(data.jsonlSizeBytes)}${data.jsonlLines != null ? `, ${data.jsonlLines} records` : ""})`
+        : "";
+      setInfo([
+        `PPM Session: ${data.ppmSessionId}`,
+        `SDK Session: ${data.sdkSessionId}`,
+        data.jsonlPath ? `JSONL: ${data.jsonlPath}${weight}` : `JSONL: not found`,
+        data.projectPath ? `Project: ${data.projectPath}` : null,
+        ...gatherRenderStats(),
+      ].filter(Boolean).join("\n"));
+    }).catch(() => setInfo("Failed to load debug info"));
+  };
+
+  const copy = () => {
+    if (!info) return;
+    copyToClipboard(info).then((ok) => {
+      if (!ok) return;
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  const body = (
+    <div className="flex flex-col gap-3">
+      <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+        <Bug className="size-4 text-primary" />
+        Session debug info
+      </h2>
+      <pre className="max-h-[35vh] overflow-y-auto whitespace-pre-wrap break-all rounded-md border border-border bg-surface p-2.5 font-mono text-[11px] leading-relaxed text-text-secondary select-text">
+        {info ?? "Loading..."}
+      </pre>
+      <Button size="sm" onClick={copy} disabled={!info} className="w-full">
+        {copied ? <><ClipboardCheck className="size-3.5" /> Copied!</> : <><Copy className="size-3.5" /> Copy</>}
+      </Button>
+      <div className="border-t border-border pt-3">
+        {open && <TranscriptImages sessionId={sessionId} projectName={projectName} />}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <button
+        onClick={openPopup}
+        className="p-1 rounded text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
+        title="Session debug info"
+      >
+        <Bug className="size-3" />
+      </button>
+      {isMobile ? (
+        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid">
+          <div className="max-h-[85vh] overflow-y-auto px-4 pb-4 pt-1">{body}</div>
+        </BottomSheet>
+      ) : (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogTitle className="sr-only">Session debug info</DialogTitle>
+            {body}
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}

package/src/web/components/chat/tool-image-preview.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useBlobUrl } from "@/hooks/use-blob-url";
 import { useImageOverlay } from "@/stores/image-overlay-store";
+import { collectGallery, GALLERY_ITEM_ATTR } from "@/lib/image-gallery";
 import { useTabStore } from "@/stores/tab-store";
 import { copyToClipboard } from "@/lib/clipboard";
 import { basename } from "@/lib/utils";
@@ -107,8 +108,8 @@ export function ToolImagePreview({
     void copyToClipboard(filePath).then(() => setCopied(true));
   }
 
-  function openFull() {
-    if (blobUrl) openOverlay(blobUrl, name);
+  function openFull(e: { currentTarget: Element }) {
+    if (blobUrl) openOverlay(blobUrl, name, collectGallery(e.currentTarget));
   }
 
   // Loading: the same box as the loaded state, so the transcript never shifts under the
@@ -155,6 +156,7 @@ export function ToolImagePreview({
     <img
       src={blobUrl}
       alt={name}
+      {...{ [GALLERY_ITEM_ATTR]: "" }}
       onLoad={(e) => measure(e.currentTarget)}
       onError={() => setDecodeFailed(true)}
       className={

package/src/web/components/group-chat/group-create-dialog.tsx

@@ -6,6 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Button } from "@/components/ui/button";
 import { ModelSelector } from "@/components/chat/model-selector";
 import { createGroup, type CreateMemberInput } from "@/lib/api-group-chat";
+import { randomId } from "@/lib/utils";
 import type { Group } from "../../../types/group-chat";
 
 interface GroupCreateDialogProps {
@@ -27,7 +28,7 @@ interface DraftMember {
 const PALETTE = ["#6366f1", "#ec4899", "#14b8a6", "#f59e0b", "#8b5cf6", "#ef4444"];
 
 function newMember(): DraftMember {
-  return { key: crypto.randomUUID(), name: "", persona: "", model: null };
+  return { key: randomId(), name: "", persona: "", model: null };
 }
 
 export function GroupCreateDialog({

package/src/web/components/layout/editor-panel.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Terminal, MessageSquare, FilePlus } from "lucide-react";
+import { Terminal, MessageSquare, FilePlus, X } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
@@ -8,6 +8,7 @@ import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
 import { registerPanelSlot } from "./tab-pool";
+import { visibleTabs } from "@/stores/panel-utils";
 import { cn } from "@/lib/utils";
 
 const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
@@ -40,6 +41,12 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
 
   if (!panel) return null;
 
+  // Judge emptiness the same way TabBar does. A panel holding only another
+  // project's tab shows no tab chips, so treating it as non-empty here would
+  // render neither tabs nor the empty state — a blank panel with nothing to
+  // close. See visibleTabs().
+  const isEmpty = visibleTabs(panel.tabs, projectName).length === 0;
+
   return (
     <div
       className={cn(
@@ -51,18 +58,27 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
     >
       <TabBar panelId={panelId} />
 
-      <div className="flex-1 overflow-hidden relative" data-panel-drop-zone={panelId}>
-        {panel.tabs.length === 0 && <EmptyPanel panelId={panelId} />}
+      <div
+        className="flex-1 overflow-hidden relative"
+        data-panel-drop-zone={panelId}
+        // Middle-click an empty panel to close it (matches VS Code).
+        onAuxClick={(e) => {
+          if (e.button !== 1 || !isEmpty) return;
+          e.preventDefault();
+          usePanelStore.getState().closePanel(panelId);
+        }}
+      >
+        {isEmpty && <EmptyPanel panelId={panelId} canClose={panelCount > 1} />}
         {/* Always render the slot so TabPool can portal into it immediately.
             Hidden when empty to let EmptyPanel show through. */}
-        <div ref={slotCallbackRef} className="absolute inset-0" style={panel.tabs.length === 0 ? { display: "none" } : undefined} />
+        <div ref={slotCallbackRef} className="absolute inset-0" style={isEmpty ? { display: "none" } : undefined} />
         <SplitDropOverlay panelId={panelId} />
       </div>
     </div>
   );
 }
 
-function EmptyPanel({ panelId }: { panelId: string }) {
+function EmptyPanel({ panelId, canClose }: { panelId: string; canClose: boolean }) {
   const activeProject = useProjectStore((s) => s.activeProject);
 
   function openTab(type: TabType) {
@@ -111,6 +127,16 @@ function EmptyPanel({ panelId }: { panelId: string }) {
           })}
         </div>
 
+        {canClose && (
+          <button
+            onClick={() => usePanelStore.getState().closePanel(panelId)}
+            className="flex items-center gap-1.5 px-4 py-3.5 rounded-md text-xs text-text-subtle hover:text-foreground active:bg-surface-elevated transition-colors"
+          >
+            <X className="size-3.5" />
+            Close Panel
+          </button>
+        )}
+
         <SessionListPanel
           projectName={activeProject?.name}
           onSelectSession={openSession}

package/src/web/components/layout/notification-bell-popover.tsx

@@ -30,7 +30,11 @@ export function NotificationBellPopover({ expanded }: { expanded: boolean }) {
 
   const handleGoToSession = (sessionId: string, projectName: string) => {
     const target = projects.find((p) => p.name === projectName);
-    if (target) setActiveProject(target);
+    // projectName is a grouping key, and notifications with no project fall into the
+    // "Unknown" bucket. Opening a tab stamped with a project that does not exist makes
+    // it invisible in every project — and unclosable, which wedges its panel forever.
+    if (!target) return;
+    setActiveProject(target);
     openTab({
       type: "chat",
       title: "Chat",

package/src/web/components/layout/tab-bar.tsx

@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
-import { DOCK_PANEL_ID } from "@/stores/panel-utils";
+import { DOCK_PANEL_ID, visibleTabs } from "@/stores/panel-utils";
 import { PanelBottom, Grid2x2 } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
@@ -85,7 +85,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
   const panel = usePanelStore((s) => panelId ? s.panels[panelId] : s.panels[s.focusedPanelId]);
   const projectName = activeProject?.name ?? null;
   // Filter out cross-project tabs (race condition in openTab during project switch)
-  const tabs = (panel?.tabs ?? []).filter((t) => !t.projectId || !projectName || t.projectId === projectName);
+  const tabs = visibleTabs(panel?.tabs ?? [], projectName);
   const activeTabId = panel?.activeTabId ?? null;
   const effectivePanelId = panel?.id ?? usePanelStore.getState().focusedPanelId;