@hienlh/ppm 0.17.33 → 0.17.36

package/src/web/lib/image-gallery.ts

@@ -0,0 +1,25 @@
+import type { GalleryImage } from "@/stores/image-overlay-store";
+
+/** Marks a container whose tagged images form one navigable set. */
+export const GALLERY_ROOT_ATTR = "data-image-gallery";
+/** Marks an `<img>` that belongs to the enclosing gallery. */
+export const GALLERY_ITEM_ATTR = "data-gallery-item";
+
+/**
+ * Collect the images a viewer may move between, in the order they appear on screen.
+ *
+ * Read from the DOM rather than a registry because every image already owns a blob URL that
+ * is revoked when its component unmounts — so the mounted elements are exactly the set whose
+ * sources are still valid, and the DOM already holds them in the order the user sees.
+ *
+ * The reach is therefore whatever is mounted. The chat transcript is deliberately not
+ * virtualised (`message-list.tsx`), so that is the whole conversation today; if it ever gains
+ * data windowing, navigation narrows to the loaded window along with everything else.
+ */
+export function collectGallery(from: Element | null): GalleryImage[] {
+  const root = from?.closest(`[${GALLERY_ROOT_ATTR}]`);
+  if (!root) return [];
+  return [...root.querySelectorAll<HTMLImageElement>(`img[${GALLERY_ITEM_ATTR}]`)]
+    .filter((img) => !!img.src)
+    .map((img) => ({ src: img.src, alt: img.alt }));
+}

package/src/web/stores/image-overlay-store.ts

@@ -1,18 +1,46 @@
 import { create } from "zustand";
 
+export interface GalleryImage {
+  /** Blob URL or data URL of the image. */
+  src: string;
+  alt: string;
+}
+
 interface ImageOverlayState {
-  /** Blob URL or data URL of the image to display */
+  /** Images the overlay can move between; a single entry when opened without a gallery. */
+  images: GalleryImage[];
+  index: number;
+  /** Convenience mirrors of the current entry — every existing consumer reads these. */
   src: string | null;
   alt: string;
-  /** Open the overlay with a given image source */
-  open: (src: string, alt?: string) => void;
-  /** Close the overlay */
+  /**
+   * Open the overlay. Passing a gallery lets the arrows walk its siblings; the clicked
+   * source decides where in that list the viewer starts.
+   */
+  open: (src: string, alt?: string, gallery?: GalleryImage[]) => void;
   close: () => void;
+  /** Move by a signed offset, stopping at the ends rather than wrapping. */
+  go: (delta: number) => void;
 }
 
-export const useImageOverlay = create<ImageOverlayState>((set) => ({
+export const useImageOverlay = create<ImageOverlayState>((set, get) => ({
+  images: [],
+  index: 0,
   src: null,
   alt: "",
-  open: (src, alt = "") => set({ src, alt }),
-  close: () => set({ src: null, alt: "" }),
+  open: (src, alt = "", gallery) => {
+    const images = gallery?.length ? gallery : [{ src, alt }];
+    const found = images.findIndex((i) => i.src === src);
+    const index = found >= 0 ? found : 0;
+    const current = images[index]!;
+    set({ images, index, src: current.src, alt: current.alt || alt });
+  },
+  close: () => set({ images: [], index: 0, src: null, alt: "" }),
+  go: (delta) => {
+    const { images, index } = get();
+    const next = index + delta;
+    if (next < 0 || next >= images.length) return;
+    const current = images[next]!;
+    set({ index: next, src: current.src, alt: current.alt });
+  },
 }));

package/src/web/stores/panel-store.ts

@@ -15,6 +15,7 @@ import {
   savePanelLayout,
   loadPanelLayout,
   deriveTabId,
+  visibleTabs,
   DOCK_PANEL_ID,
 } from "./panel-utils";
 import {
@@ -248,10 +249,16 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       // Load from localStorage
       const loaded = loadPanelLayout(projectName);
       if (loaded && Object.keys(loaded.panels).length > 0) {
-        // Migrate: remove obsolete tab types from grid panels
+        // Migrate: drop obsolete tab types, and tabs belonging to another project.
+        // A foreign tab is filtered out of the tab bar, so it can never be closed —
+        // and closeTab is the only thing that removes an emptied panel, so leaving
+        // one behind wedges its panel permanently (it renders as a blank slot).
+        let healed = false;
         const migratedPanels: typeof loaded.panels = {};
         for (const [pid, panel] of Object.entries(loaded.panels)) {
-          const filteredTabs = panel.tabs.filter((t) => !OBSOLETE_TAB_TYPES.has(t.type));
+          const filteredTabs = visibleTabs(panel.tabs, projectName)
+            .filter((t) => !OBSOLETE_TAB_TYPES.has(t.type));
+          if (filteredTabs.length !== panel.tabs.length) healed = true;
           const filteredHistory = panel.tabHistory.filter(
             (id) => filteredTabs.some((t) => t.id === id),
           );
@@ -261,6 +268,22 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
           migratedPanels[pid] = { ...panel, tabs: filteredTabs, tabHistory: filteredHistory, activeTabId };
         }
 
+        // Apply the "no empty panel" invariant on restore, not just in closeTab:
+        // the filtering above can empty a panel, and a grid id with no panel behind
+        // it renders nothing either. The last panel always stays — the grid needs
+        // something to render into.
+        let migratedGrid = loaded.grid;
+        for (const pid of migratedGrid.flat()) {
+          if ((migratedPanels[pid]?.tabs.length ?? 0) > 0) continue;
+          if (migratedGrid.flat().length <= 1) break;
+          migratedGrid = gridRemovePanel(migratedGrid, pid);
+          delete migratedPanels[pid];
+          healed = true;
+        }
+        const migratedFocused = migratedGrid.flat().includes(loaded.focusedPanelId)
+          ? loaded.focusedPanelId
+          : (migratedGrid.flat()[0] ?? loaded.focusedPanelId);
+
         // Merge into flat panels map (keep-alive: old panels stay).
         // The shared __dock__ panel holds live tabs from ALL projects — union the
         // loaded project's persisted dock tabs into it rather than replacing, so a
@@ -283,8 +306,8 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         // Focus the switched-to project's own dock tab (not another project's).
         mergedDockPanel.activeTabId = pickDockActiveTab(mergedDockPanel, projectName);
         const mergedPanels = { ...panels, ...migratedPanels, [DOCK_PANEL_ID]: mergedDockPanel };
-        newProjectGrids[projectName] = loaded.grid;
-        newProjectFocused[projectName] = loaded.focusedPanelId;
+        newProjectGrids[projectName] = migratedGrid;
+        newProjectFocused[projectName] = migratedFocused;
         const restoredDock = collapseRestoredDockOnMobile(
           loaded.dock ?? restoreDockForProject(projectName, newProjectDock),
           get().isMobile(),
@@ -292,13 +315,24 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         set({
           currentProject: projectName,
           panels: mergedPanels,
-          grid: loaded.grid,
-          focusedPanelId: loaded.focusedPanelId,
+          grid: migratedGrid,
+          focusedPanelId: migratedFocused,
           projectGrids: newProjectGrids,
           projectFocused: newProjectFocused,
           dock: restoredDock,
           projectDock: newProjectDock,
         });
+        // Write the healed layout back so the repair sticks (and reaches the server
+        // blob), instead of being redone on every load.
+        if (healed) {
+          savePanelLayout(projectName, {
+            panels: migratedPanels,
+            grid: migratedGrid,
+            focusedPanelId: migratedFocused,
+            dock: restoredDock,
+            dockPanel: mergedDockPanel,
+          });
+        }
       } else {
         // Create empty layout — EmptyPanel will show quick-open buttons
         const p = createPanel();

package/src/web/stores/panel-utils.ts

@@ -103,6 +103,25 @@ export function gridRemovePanel(grid: string[][], panelId: string): string[][] {
     .filter((col) => col.length > 0);
 }
 
+/**
+ * The subset of `tabs` that the given project is allowed to see.
+ *
+ * A grid panel can end up holding another project's tab (a race in openTab during
+ * a project switch, or a tab stamped with a project name that does not exist). The
+ * tab bar hides those, so every other "is this panel empty?" check must agree —
+ * otherwise the panel renders neither tabs nor the empty state, and since it has no
+ * closable tab, the auto-close in closeTab can never fire and the panel is stuck.
+ *
+ * Callers spell "no active project" two ways: TabBar passes null, while the
+ * per-project layout key is the "__global__" sentinel. Both mean unfiltered, so
+ * they are normalized here — a split between them would resurrect the exact
+ * disagreement this helper exists to prevent.
+ */
+export function visibleTabs(tabs: Tab[], projectName: string | null): Tab[] {
+  if (!projectName || projectName === "__global__") return tabs;
+  return tabs.filter((t) => !t.projectId || t.projectId === projectName);
+}
+
 export function findPanelPosition(grid: string[][], panelId: string): { row: number; col: number } | null {
   for (let r = 0; r < grid.length; r++) {
     const c = grid[r]!.indexOf(panelId);

package/src/web/styles/globals.css

@@ -101,6 +101,78 @@
   --blur: 16px;
 }
 
+/*
+ * Ambient image stage (chat Read-tool image results). The panel floats a tile on a
+ * blurred copy of the image itself, so its surfaces are translucent veils rather than
+ * theme tokens. Declared per mode because the veil must stay contrast-safe over both a
+ * bright poster and a dark screenshot. Dark lives in :root, matching the default above.
+ */
+:root {
+  --img-veil: linear-gradient(100deg, rgba(10, 16, 32, 0.6), rgba(10, 16, 32, 0.84));
+  --img-backdrop: blur(40px) saturate(1.6);
+  --img-plate: rgba(255, 255, 255, 0.06);
+  --img-plate-border: rgba(148, 178, 255, 0.22);
+  --img-plate-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 34px -20px rgba(0, 0, 0, 0.7);
+  --img-ghost: rgba(255, 255, 255, 0.08);
+  --img-ghost-border: rgba(255, 255, 255, 0.14);
+  --img-ghost-hover: rgba(255, 255, 255, 0.14);
+  --img-ghost-hover-border: rgba(148, 178, 255, 0.35);
+  --img-meta-label: #8b97b4;
+  --img-checker: rgba(255, 255, 255, 0.04);
+  /* Own values rather than a surface token: on flat light themes panel and panel-2 are
+     both #ffffff, which would make the skeleton invisible on the card. */
+  --img-skeleton: rgba(255, 255, 255, 0.09);
+  --img-skeleton-sweep: rgba(255, 255, 255, 0.14);
+}
+
+html.light {
+  --img-veil: linear-gradient(100deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.84));
+  --img-backdrop: blur(40px) saturate(1.6) brightness(0.95);
+  --img-plate: rgba(255, 255, 255, 0.5);
+  --img-plate-border: rgba(255, 255, 255, 0.7);
+  --img-plate-shadow: 0 2px 4px rgba(15, 23, 42, 0.14), 0 16px 34px -20px rgba(15, 23, 42, 0.55);
+  --img-ghost: rgba(255, 255, 255, 0.7);
+  --img-ghost-border: rgba(255, 255, 255, 0.85);
+  --img-ghost-hover: rgba(255, 255, 255, 0.95);
+  --img-ghost-hover-border: #cbd5e1;
+  --img-meta-label: #7c8899;
+  --img-checker: rgba(15, 23, 42, 0.03);
+  --img-skeleton: rgba(15, 23, 42, 0.07);
+  --img-skeleton-sweep: rgba(255, 255, 255, 0.75);
+}
+
+/* Backing for image tiles that letterbox: shows the transparent area without reading
+   as an empty box. Padding keeps the artwork off the tile edge. */
+.img-checkerboard {
+  background-image:
+    linear-gradient(45deg, var(--img-checker) 25%, transparent 25%, transparent 75%, var(--img-checker) 75%),
+    linear-gradient(45deg, var(--img-checker) 25%, transparent 25%, transparent 75%, var(--img-checker) 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 7px 7px;
+  padding: 6px;
+}
+
+/* Skeleton that occupies the loaded box exactly, so the row never grows after paint. */
+.img-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: var(--img-skeleton);
+}
+.img-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, var(--img-skeleton-sweep) 50%, transparent 80%);
+  animation: img-skeleton-sweep 1.25s linear infinite;
+}
+@keyframes img-skeleton-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .img-skeleton::after { animation: none; }
+}
+
 /* Smooth theme transitions (~250ms) */
 html {
   transition: background-color 0.25s ease-out, color 0.25s ease-out;