@hienlh/ppm 0.17.32 → 0.17.34

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

@@ -0,0 +1,225 @@
+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 { 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() {
+    if (blobUrl) openOverlay(blobUrl, name);
+  }
+
+  // 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}
+      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/layout/tab-bar.tsx

@@ -225,7 +225,8 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
 
   /**
    * Terminal-only "Move to Dock" / "Move to Editor" item.
-   * The action moves the same live session; closing later re-docks it.
+   * Reparents the same live session — the only way to keep a terminal running
+   * outside its current slot, since closing the tab ends it.
    */
   function dockMoveMenuItems(tab: Tab): React.ReactNode {
     if (tab.type !== "terminal") return null;
@@ -253,8 +254,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
         break;
       case "move-to-dock":
         // Park the terminal in the dock (same live session — reparented, no restart).
-        panelState.moveTab(tab.id, effectivePanelId, DOCK_PANEL_ID);
-        panelState.setDockVisible(true);
+        panelState.redockTab(tab.id, effectivePanelId);
         break;
       case "move-to-editor": {
         // Send a dock terminal back to a grid panel: prefer the focused grid

package/src/web/{components/editor → hooks}/use-blob-url.ts

@@ -11,11 +11,16 @@ export function useBlobUrl(
   refreshKey = 0,
 ) {
   const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [blob, setBlob] = useState<Blob | null>(null);
   const [error, setError] = useState(false);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
   const urlRef = useRef<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
+    // Reset so a retry (bumped refreshKey) leaves the error state.
+    setError(false);
+    setErrorCode(null);
     const isExternal = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
     const url = isExternal
       ? `/api/fs/raw?path=${encodeURIComponent(filePath)}`
@@ -23,7 +28,7 @@ export function useBlobUrl(
     const token = getAuthToken();
     fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
       .then((r) => {
-        if (!r.ok) throw new Error("Failed");
+        if (!r.ok) throw new Error(String(r.status));
         return r.blob();
       })
       .then((blob) => {
@@ -34,8 +39,13 @@ export function useBlobUrl(
         if (urlRef.current) URL.revokeObjectURL(urlRef.current);
         urlRef.current = u;
         setBlobUrl(u);
+        setBlob(final);
       })
-      .catch(() => { if (!cancelled) setError(true); });
+      .catch((e: Error) => {
+        if (cancelled) return;
+        setError(true);
+        setErrorCode(/^\d+$/.test(e.message) ? e.message : "network");
+      });
     return () => { cancelled = true; };
   }, [filePath, projectName, mimeOverride, refreshKey]);
 
@@ -44,5 +54,6 @@ export function useBlobUrl(
     if (urlRef.current) URL.revokeObjectURL(urlRef.current);
   }, []);
 
-  return { blobUrl, error };
+  // `blob` is exposed so callers can read size and MIME type without a second request.
+  return { blobUrl, blob, error, errorCode };
 }

package/src/web/stores/dock-actions.ts

@@ -174,10 +174,8 @@ export function makeOpenInDock(set: Set, get: Get) {
 // ---------------------------------------------------------------------------
 // Re-dock: move a terminal tab from a grid panel back to __dock__ + show dock.
 //
-// Called by closeTab when a terminal is closed from a GRID panel.
-// Closing a terminal from the grid PARKS it in the dock instead of killing it —
-// real kill only happens when closed from WITHIN the dock, on shell exit, or
-// after the idle/grace period expires.
+// Explicit user action only ("Move to Dock"): it parks a live terminal without
+// restarting its PTY. Closing a tab never routes here — close ends the session.
 //
 // IMPORTANT: this function MUST NOT call closeTab (loop guard). It uses the
 // low-level moveTab primitive directly via the store getter.
@@ -245,3 +243,15 @@ export function restoreDockForProject(
 ): DockState {
   return projectDock[projectName] ?? { visible: false, height: 30 };
 }
+
+/**
+ * Collapse a persisted "visible" dock on mobile.
+ *
+ * Mobile renders the dock as a full-width bottom sheet covering the tab bar, so
+ * restoring a visible dock — persisted locally or synced from a desktop session —
+ * would pop the sheet open over the workspace before the user asks for it. The
+ * sheet only opens from the nav's terminal button.
+ */
+export function collapseRestoredDockOnMobile(dock: DockState, isMobile: boolean): DockState {
+  return isMobile && dock.visible ? { ...dock, visible: false } : dock;
+}

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

@@ -26,6 +26,7 @@ import {
   persistDock,
   snapshotDockForProject,
   restoreDockForProject,
+  collapseRestoredDockOnMobile,
   activeProjectDockTabCount,
 } from "./dock-actions";
 
@@ -284,7 +285,10 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         const mergedPanels = { ...panels, ...migratedPanels, [DOCK_PANEL_ID]: mergedDockPanel };
         newProjectGrids[projectName] = loaded.grid;
         newProjectFocused[projectName] = loaded.focusedPanelId;
-        const restoredDock = loaded.dock ?? restoreDockForProject(projectName, newProjectDock);
+        const restoredDock = collapseRestoredDockOnMobile(
+          loaded.dock ?? restoreDockForProject(projectName, newProjectDock),
+          get().isMobile(),
+        );
         set({
           currentProject: projectName,
           panels: mergedPanels,
@@ -518,19 +522,9 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       if (!panel) return;
       const pid = panel.id;
 
-      // Location-based re-dock: closing a terminal from ANY grid panel parks it in the
-      // dock instead of killing it. Real kill only when closed from WITHIN the dock,
-      // on shell exit (onExit handler), or after idle/grace expiry.
-      // Decision is purely location-based — no Tab.home flag needed.
-      if (tabId.startsWith("terminal:") && pid !== DOCK_PANEL_ID) {
-        // Park in dock — redockTab moves the tab object and shows the dock.
-        // Does NOT strip the localStorage session key (PTY stays alive).
-        // redockTab calls moveTab, never closeTab → no recursion.
-        get().redockTab(tabId, pid);
-        return;
-      }
-
-      // Real-close path: terminal closed from dock, or non-terminal tab.
+      // Closing a terminal ends it, from a grid panel and from the dock alike.
+      // Parking a live session is an explicit action ("Move to Dock" / redockTab),
+      // never a side effect of close.
       // Clear persisted terminal session so reopening creates a fresh PTY.
       if (tabId.startsWith("terminal:")) {
         try { localStorage.removeItem(`ppm:terminal-session:${tabId}`); } catch { /* */ }

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;