@hienlh/ppm 0.17.33 → 0.17.36

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-cards.tsx

@@ -67,6 +67,9 @@ import type { ChatEvent } from "../../../types/chat";
 import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
+import { isImageExtension } from "../../../shared/image-extensions";
+import { resultHasImagePlaceholder } from "../../../shared/tool-result-content";
+import { ToolImagePreview } from "./tool-image-preview";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -84,6 +87,18 @@ function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<str
   return { toolName, input };
 }
 
+/**
+ * Path of the image a Read call targeted, or null when it is not a displayable image read.
+ * Only absolute paths qualify, matching what useBlobUrl can resolve to the external
+ * raw-file endpoint — and what the Read tool always supplies.
+ */
+function imageReadPath(tool: ChatEvent): string | null {
+  if (tool.type !== "tool_use" || tool.tool !== "Read") return null;
+  const path = (tool.input as Record<string, unknown> | undefined)?.file_path;
+  if (typeof path !== "string" || !/^(\/|[A-Za-z]:[/\\])/.test(path)) return null;
+  return isImageExtension(path) ? path : null;
+}
+
 /** Unified tool card: shows tool-specific summary + expandable details */
 export function ToolCard({
   tool,
@@ -103,7 +118,10 @@ export function ToolCard({
     // a click — unless the edit failed (diff was never applied, so it's noise).
     const t = tool.type === "tool_use" ? tool.tool : (tool as any).tool;
     const failed = result?.type === "tool_result" && !!(result as any).isError;
-    return (t === "Edit" || t === "MultiEdit") && !failed;
+    if ((t === "Edit" || t === "MultiEdit") && !failed) return true;
+    // Same reasoning for reading an image: the thumbnail is the point of the card,
+    // so show it without requiring a click.
+    return !!imageReadPath(tool);
   });
 
   if (tool.type === "error") {
@@ -127,6 +145,10 @@ export function ToolCard({
   // File-mutation tools show their change via the inline diff/content preview — the SDK's
   // "file updated successfully" boilerplate is noise, so suppress it (but keep error output).
   const isFileMutation = ["Edit", "MultiEdit", "Write", "NotebookEdit"].includes(toolName);
+  const imagePath = imageReadPath(tool);
+  // Hide the text output only when the result really carried an image. Extension is not
+  // enough: an SVG or an undecodable format comes back as text that must stay visible.
+  const resultIsImage = hasResult && resultHasImagePlaceholder(String((result as any).output ?? ""));
 
   // Read partial output for streaming Bash/PowerShell tools
   const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
@@ -194,7 +216,10 @@ export function ToolCard({
           {hasChildren && (
             <SubagentChildren events={children!} projectName={projectName} />
           )}
-          {hasResult && !(isFileMutation && !isError) && (
+          {imagePath && (
+            <ToolImagePreview filePath={imagePath} projectName={projectName ?? ""} />
+          )}
+          {hasResult && !(isFileMutation && !isError) && !(resultIsImage && !isError) && (
             <ToolResultView toolName={toolName} output={(result as any).output} />
           )}
         </div>

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

@@ -0,0 +1,227 @@
+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";
+import { ImagePreviewFailure, ImagePreviewSkeleton } from "./image-preview-states";
+import {
+  cacheNatural,
+  dimensionsLabel,
+  formatBytes,
+  getCachedNatural,
+  previewLayout,
+  TILE_WIDTH,
+  type NaturalSize,
+} from "./image-preview-geometry";
+
+/** Ratio the skeleton assumes before the image has ever been measured. */
+const FALLBACK_ASPECT = 4 / 5;
+
+const LABEL = "text-[var(--img-meta-label)] @max-[470px]:hidden";
+const VALUE = "truncate text-text @max-[470px]:text-text-2";
+const GHOST =
+  "h-[30px] @max-[470px]:h-[36px] shrink-0 rounded-[7px] px-[9px] font-mono text-[11.5px] " +
+  "text-text-2 bg-[var(--img-ghost)] border border-[var(--img-ghost-border)] backdrop-blur-[6px] " +
+  "transition-colors can-hover:hover:bg-[var(--img-ghost-hover)] " +
+  "can-hover:hover:border-[var(--img-ghost-hover-border)] can-hover:hover:text-text";
+
+/**
+ * The image a Read call opened, shown on a stage lit by a blurred copy of itself, beside
+ * the file facts needed to decide whether to open it. Fetched as a blob with an
+ * Authorization header, so no auth token ends up in an image URL.
+ */
+export function ToolImagePreview({
+  filePath,
+  projectName,
+}: {
+  filePath: string;
+  projectName: string;
+}) {
+  const [attempt, setAttempt] = useState(0);
+  const { blobUrl, blob, error, errorCode } = useBlobUrl(filePath, projectName, undefined, attempt);
+  const [natural, setNatural] = useState<NaturalSize | undefined>(() => getCachedNatural(filePath));
+  const [decodeFailed, setDecodeFailed] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const openOverlay = useImageOverlay((s) => s.open);
+  const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
+  const name = basename(filePath);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1200);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  const measure = (img: HTMLImageElement) => {
+    const size = { w: img.naturalWidth, h: img.naturalHeight };
+    if (!size.w || !size.h) return setDecodeFailed(true);
+    cacheNatural(filePath, size);
+    setNatural(size);
+  };
+
+  const retry = () => {
+    setDecodeFailed(false);
+    setAttempt((n) => n + 1);
+  };
+
+  if (error || decodeFailed) {
+    return (
+      <div className="border-t border-border pt-1.5">
+        <ImagePreviewFailure code={decodeFailed ? undefined : errorCode ?? undefined} onRetry={retry} />
+      </div>
+    );
+  }
+
+  const layout = natural ? previewLayout(natural, TILE_WIDTH) : null;
+  const skeletonAspect = layout?.aspect ?? FALLBACK_ASPECT;
+
+  const actions = (
+    <div className="flex flex-wrap gap-[6px]">
+      <button type="button" onClick={openInEditor} className={GHOST}>
+        <span className="@max-[470px]:hidden">open in editor</span>
+        <span className="hidden @max-[470px]:inline">open</span>
+      </button>
+      <button type="button" onClick={copyPath} className={GHOST}>
+        {copied ? "copied" : "copy path"}
+      </button>
+      <button type="button" onClick={openFull} className={GHOST}>
+        full size
+      </button>
+    </div>
+  );
+
+  function openInEditor() {
+    if (!projectName) return;
+    openTab({
+      type: "editor",
+      title: name,
+      metadata: { filePath, projectName },
+      projectId: projectName,
+      closable: true,
+    });
+  }
+
+  function copyPath() {
+    void copyToClipboard(filePath).then(() => setCopied(true));
+  }
+
+  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
+  // reader once the image resolves.
+  if (!blobUrl || !layout || !natural) {
+    return (
+      <div className="@container border-t border-border pt-1.5">
+        {blobUrl && (
+          <img
+            src={blobUrl}
+            alt=""
+            className="hidden"
+            onLoad={(e) => measure(e.currentTarget)}
+            onError={() => setDecodeFailed(true)}
+          />
+        )}
+        <ImagePreviewSkeleton aspect={skeletonAspect} actions={actions} />
+      </div>
+    );
+  }
+
+  const metadata = (
+    <>
+      <dt className={LABEL}>dimensions</dt>
+      <dd className={VALUE}>{dimensionsLabel(natural, layout.fit)}</dd>
+      {blob && (
+        <>
+          <dt className={LABEL}>size</dt>
+          <dd className={VALUE}>
+            {formatBytes(blob.size)}
+            {blob.type ? ` · ${blob.type}` : ""}
+          </dd>
+        </>
+      )}
+      <dt className={LABEL}>path</dt>
+      {/* rtl puts the ellipsis at the head of the path, keeping the filename readable */}
+      <dd dir="rtl" className={`${VALUE} text-left`}>
+        {filePath}
+      </dd>
+    </>
+  );
+
+  const picture = (
+    <img
+      src={blobUrl}
+      alt={name}
+      {...{ [GALLERY_ITEM_ATTR]: "" }}
+      onLoad={(e) => measure(e.currentTarget)}
+      onError={() => setDecodeFailed(true)}
+      className={
+        layout.fit === "cover"
+          ? "size-full object-cover"
+          : layout.fit === "contain"
+            ? "size-full object-contain"
+            : "max-h-full max-w-full"
+      }
+    />
+  );
+
+  return (
+    <div className="@container border-t border-border pt-1.5">
+      <div className="relative overflow-hidden rounded-lg border border-border p-[14px] @max-[470px]:p-[11px]">
+        <img
+          aria-hidden="true"
+          alt=""
+          src={blobUrl}
+          className="absolute inset-0 size-full object-cover"
+          style={{ filter: "var(--img-backdrop)", transform: "scale(1.3)" }}
+        />
+        <div className="absolute inset-0" style={{ background: "var(--img-veil)" }} />
+
+        {layout.variant === "band" ? (
+          <div className="relative grid gap-[11px]">
+            <button
+              type="button"
+              onClick={openFull}
+              title={`Open ${name}`}
+              className="img-checkerboard w-full cursor-zoom-in overflow-hidden rounded-lg border border-[var(--img-plate-border)]"
+              style={{ aspectRatio: layout.aspect }}
+            >
+              {picture}
+            </button>
+            <dl className="grid grid-cols-[auto_auto_1fr] gap-x-[18px] font-mono text-[11.5px] [&_dt]:hidden">
+              {metadata}
+            </dl>
+            {actions}
+          </div>
+        ) : (
+          <div className="relative grid grid-cols-[132px_1fr] items-start gap-[14px] @max-[470px]:grid-cols-[64px_1fr] @max-[470px]:gap-[11px]">
+            <button
+              type="button"
+              onClick={openFull}
+              title={`Open ${name}`}
+              className={`cursor-zoom-in overflow-hidden rounded-lg border border-[var(--img-plate-border)] bg-[var(--img-plate)] shadow-[var(--img-plate-shadow)] ${
+                layout.fit === "cover" ? "" : "img-checkerboard flex items-center justify-center"
+              }`}
+              style={{ aspectRatio: layout.aspect }}
+            >
+              {picture}
+            </button>
+            <div className="flex min-w-0 flex-col gap-[9px]">
+              <p className="truncate text-[13px] font-semibold text-text @max-[470px]:hidden">
+                {name}
+              </p>
+              <dl className="grid grid-cols-[auto_1fr] gap-x-[14px] gap-y-[4px] font-mono text-[11.5px] @max-[470px]:grid-cols-[1fr]">
+                {metadata}
+              </dl>
+              {actions}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/editor/audio-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning, Music } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 import { basename } from "@/lib/utils";
 
 export function AudioPreview({ filePath, projectName }: { filePath: string; projectName: string }) {

package/src/web/components/editor/image-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 
 export function ImagePreview({ filePath, projectName }: { filePath: string; projectName: string }) {
   const { blobUrl, error } = useBlobUrl(filePath, projectName);

package/src/web/components/editor/video-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 
 export function VideoPreview({ filePath, projectName }: { filePath: string; projectName: string }) {
   const { blobUrl, error } = useBlobUrl(filePath, projectName);

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",