@hienlh/ppm 0.19.1 → 0.19.3

package/src/shared/image-limits.ts

@@ -0,0 +1,37 @@
+/**
+ * The per-image dimension ceiling the API applies, and the arithmetic for staying under it.
+ *
+ * Shared because both ends of the pipeline need the same number: the browser downscales an
+ * attachment before it is ever uploaded, and the transcript tooling reports on images that
+ * slipped in from elsewhere (another client, an older build) still carrying the full size.
+ */
+
+/**
+ * Longest side, in pixels, at which the API starts refusing an image once a request carries
+ * several of them. The value is a ceiling, so an image measuring exactly this is already over
+ * it — comparisons are `>=`, and a downscale targets strictly below.
+ */
+export const MAX_IMAGE_DIMENSION = 2000;
+
+/**
+ * Dimensions that bring an image under the cap, or null when it is already small enough.
+ *
+ * Scales the longest side to one pixel below the cap and takes the other side with it, so the
+ * aspect ratio survives and the result cannot land back on the boundary through rounding.
+ */
+export function fitWithin(
+  width: number,
+  height: number,
+  max: number = MAX_IMAGE_DIMENSION,
+): { width: number; height: number } | null {
+  if (!(width > 0) || !(height > 0)) return null;
+  const longest = Math.max(width, height);
+  if (longest < max) return null;
+
+  const target = max - 1;
+  const scale = target / longest;
+  return {
+    width: width >= height ? target : Math.max(1, Math.round(width * scale)),
+    height: height > width ? target : Math.max(1, Math.round(height * scale)),
+  };
+}

package/src/types/api.ts

@@ -23,7 +23,9 @@ export type TerminalWsMessage =
 
 /** WebSocket message types (chat) */
 export type ChatWsClientMessage =
-  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; model?: string; effort?: string; thinking?: boolean }
+  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>;
+  /** Uploaded paths for the same images, for providers that take a file not a payload. */
+  imagePaths?: string[]; model?: string; effort?: string; thinking?: boolean }
   | { type: "cancel" }
   | { type: "set_model"; model: string }
   | { type: "set_effort"; effort: string }

package/src/types/chat.ts

@@ -2,6 +2,12 @@ export interface SendMessageOpts {
   permissionMode?: import("./config").PermissionMode | string;
   priority?: 'now' | 'next' | 'later';
   images?: Array<{ data: string; mediaType: string }>;
+  /**
+   * Uploaded paths for the same attachments, for providers that take a file rather than a
+   * payload. Codex's turn input accepts `localImage` by path and has no base64 form, so an
+   * image reaches it this way or not at all.
+   */
+  imagePaths?: string[];
   /** Per-session model override; falls back to provider config model when absent */
   model?: string;
   /** Override the provider's 1M-context setting for this call (false = never add the
@@ -45,8 +51,14 @@ export interface AIProvider {
   markAsResumed?(sessionId: string): void;
   isAvailable?(): Promise<boolean>;
   listModels?(): Promise<ModelOption[]>;
+  /**
+   * Skills the provider's own runtime would resolve for this session, for
+   * providers that own a skill system PPM cannot read off disk. Implemented by
+   * codex; absent for Claude, whose skills come from the shared disk discovery.
+   */
+  listSkills?(sessionId?: string): Promise<import("../providers/codex-app-server/codex-protocol").CodexSkill[]>;
   /** Provider-specific usage/quota (rate limits). Used by GET /chat/usage. */
-  getUsage?(): Promise<UsageInfo>;
+  getUsage?(sessionId?: string): Promise<UsageInfo>;
   /** True when a live streaming subprocess exists for this session */
   hasStreamingSession?(sessionId: string): boolean;
   /** Prompt-cache lifetime for this session, in ms — how long holding its subprocess pays. */

package/src/types/extension-messages.ts

@@ -22,6 +22,8 @@ export interface TreeItemMsg {
   description?: string;
   tooltip?: string;
   icon?: string;
+  /** Label wraps instead of truncating — for rows whose text is the content. */
+  wrap?: boolean;
   collapsibleState: "none" | "collapsed" | "expanded";
   command?: string;
   children?: TreeItemMsg[];

package/src/web/app.tsx

@@ -58,15 +58,9 @@ export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
   const isMobileViewport = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | "settings" | undefined>();
+  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | undefined>();
   const [projectSheetOpen, setProjectSheetOpen] = useState(false);
 
-  // Listen for "open-mobile-settings" event (from project bottom sheet)
-  useEffect(() => {
-    const handler = () => { setDrawerTab("settings"); setDrawerOpen(true); };
-    window.addEventListener("open-mobile-settings", handler);
-    return () => window.removeEventListener("open-mobile-settings", handler);
-  }, []);
   const [mountedProjects, setMountedProjects] = useState<Set<string>>(
     () => new Set(["__global__"]),
   );

package/src/web/components/chat/attachment-chips.tsx

@@ -52,6 +52,16 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
               <Loader2 className="size-3 shrink-0 animate-spin text-text-subtle" />
             ) : att.status === "error" ? (
               <span className="text-error shrink-0" title="Upload failed">!</span>
+            ) : att.resized ? (
+              // Says what happened to the image. A screenshot arriving at the model smaller
+              // than the one that was pasted is worth stating rather than leaving to be
+              // discovered, and the measurement was already being recorded for nothing.
+              <span
+                className="shrink-0 text-[10px] text-text-subtle"
+                title={`Shrunk from ${att.resized.from.width}x${att.resized.from.height} to ${att.resized.to.width}x${att.resized.to.height}`}
+              >
+                {att.resized.to.width}&times;{att.resized.to.height}
+              </span>
             ) : null}
 
             {/* Remove button */}

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

@@ -325,7 +325,16 @@ export function ChatHistoryBar({
             >
               <Activity className="size-3" />
               {usageInfo.activeAccountLabel && (
-                <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
+                // Which account is serving this session, per provider. An email
+                // label is unreadable cut to 60px ("hienlh1298@…"), and the
+                // account is the thing a multi-account user checks here, so it
+                // gets the room and the full string on hover.
+                <span
+                  className="text-text-secondary font-normal truncate max-w-[110px]"
+                  title={usageInfo.activeAccountLabel}
+                >
+                  [{usageInfo.activeAccountLabel}]
+                </span>
               )}
               <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
               <span className="text-text-subtle">·</span>

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

@@ -2,6 +2,8 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { Loader2, Upload, X } from "lucide-react";
 import { toast } from "sonner";
 import { api, projectUrl } from "@/lib/api-client";
+import { selectInlineImages } from "@/lib/image-resize-limits";
+import { splitAttachmentMarkers } from "@/lib/attachment-marker-split";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
 import { useTabStore } from "@/stores/tab-store";
@@ -33,6 +35,21 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [sessionId, setSessionId] = useState<string | null>(
     (metadata?.sessionId as string) ?? null,
   );
+
+  /**
+   * Follow the session id when the provider adopts its own.
+   *
+   * PPM creates a session under a uuid it mints, then codex (or the Claude SDK)
+   * reports the real id and the server re-keys to it. Everything written from
+   * that point — transcript, title, account binding — lands under the new id, so
+   * a tab left holding the original would reopen into an empty conversation even
+   * though the history is on disk. Setting it here also persists it to the tab's
+   * metadata through the effect below, which is what makes the fix survive a
+   * reload rather than only lasting the turn.
+   */
+  const handleSessionMigrated = useCallback((newSessionId: string) => {
+    setSessionId(newSessionId);
+  }, []);
   const [providerId, setProviderId] = useState<string>(
     (metadata?.providerId as string) ?? "claude",
   );
@@ -56,7 +73,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   );
 
   // Pending message to send after WS connects (replaces unreliable setTimeout)
-  const pendingSendRef = useRef<{ content: string; permissionMode?: string } | null>(null);
+  const pendingSendRef = useRef<{ content: string; permissionMode?: string; images?: Array<{ data: string; mediaType: string }>; imagePaths?: string[] } | null>(null);
 
   // Drag-and-drop state
   const [isDragging, setIsDragging] = useState(false);
@@ -131,7 +148,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     bashPartialOutput,
     backgroundShells,
     killBackgroundShell,
-  } = useChat(sessionId, providerId, projectName);
+  } = useChat(sessionId, providerId, projectName, handleSessionMigrated);
 
   // Teammates keep working long after their spawn card scrolled away — a resume
   // arrives by SendMessage and writes no card at all. Poll the roster whenever this
@@ -142,9 +159,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   // Flush pending message once WS connects (replaces unreliable setTimeout)
   useEffect(() => {
     if (isConnected && pendingSendRef.current) {
-      const { content, permissionMode: pm } = pendingSendRef.current;
+      const { content, permissionMode: pm, images: pendingImages, imagePaths: pendingPaths } = pendingSendRef.current;
       pendingSendRef.current = null;
-      sendMessage(content, { permissionMode: pm });
+      sendMessage(content, { permissionMode: pm, ...(pendingImages?.length && { images: pendingImages }), ...(pendingPaths?.length && { imagePaths: pendingPaths }) });
     }
   }, [isConnected, sendMessage]);
 
@@ -350,7 +367,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   /** Build message content with file references and inline text snippets prepended */
   const buildMessageWithAttachments = useCallback(
-    (content: string, attachments: ChatAttachment[]): string => {
+    (
+      content: string,
+      attachments: ChatAttachment[],
+      inlineImages: Array<{ data: string; mediaType: string }> = [],
+    ): string => {
       if (attachments.length === 0) return content;
 
       const parts: string[] = [];
@@ -360,12 +381,27 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         if (att.textContent) parts.push(att.textContent);
       }
 
-      // Server-uploaded file references
-      const fileAtts = attachments.filter((a) => a.serverPath);
-      if (fileAtts.length > 0) {
-        const fileRefs = fileAtts.map((a) => a.serverPath!).join("\n");
+      // Server-uploaded file references. An image keeps its path even when the payload rides
+      // along with the message, because the transcript is what the chat re-renders from and
+      // the path is the only thing in it a thumbnail can be drawn from.
+      //
+      // An image sent inline says so in the marker. A bare path in a user message reads as an
+      // invitation to open it, and a model that takes it pays for the same picture twice —
+      // once inline, once as a tool result, both replayed on every later turn.
+      //
+      // Which marker an image gets follows the payloads that are actually going out, not
+      // `imageData` alone: the per-message caps can leave one behind, and announcing that its
+      // contents are included would hand the model neither the picture nor a reason to open
+      // the file. `inlineImages` defaults to none, so a caller that sends no payloads at all
+      // (the edit-fork path takes only text) gets the plain markers throughout.
+      const { inlineImagePaths, pathOnlyPaths } = splitAttachmentMarkers(attachments, inlineImages);
+      for (const path of inlineImagePaths) {
+        parts.push(`[Attached image (contents included in this message): ${path}]`);
+      }
+      if (pathOnlyPaths.length > 0) {
+        const fileRefs = pathOnlyPaths.join("\n");
         parts.push(
-          fileAtts.length === 1
+          pathOnlyPaths.length === 1
             ? `[Attached file: ${fileRefs}]`
             : `[Attached files:\n${fileRefs}\n]`,
         );
@@ -379,8 +415,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   const handleSend = useCallback(
     async (content: string, attachments: ChatAttachment[] = [], priority?: MessagePriority) => {
-      const fullContent = buildMessageWithAttachments(content, attachments);
-      if (!fullContent.trim()) return;
+      const images = selectInlineImages(attachments);
+      const fullContent = buildMessageWithAttachments(content, attachments, images);
+      // Providers that take a file rather than a payload (codex) read these instead.
+      const imagePaths = attachments.filter((a) => a.isImage && a.serverPath).map((a) => a.serverPath!);
+      if (!fullContent.trim() && images.length === 0) return;
 
       if (!sessionId) {
         try {
@@ -394,14 +433,14 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           setSessionId(session.id);
           setProviderId(session.providerId);
           // Queue message — will be sent by effect when WS reports isConnected
-          pendingSendRef.current = { content: fullContent, permissionMode };
+          pendingSendRef.current = { content: fullContent, permissionMode, images, imagePaths };
           return;
         } catch (e) {
           console.error("Failed to create session:", e);
           return;
         }
       }
-      sendMessage(fullContent, { permissionMode, priority });
+      sendMessage(fullContent, { permissionMode, priority, ...(images.length > 0 && { images }), ...(imagePaths.length > 0 && { imagePaths }) });
     },
     [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata],
   );
@@ -730,6 +769,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             permissionMode={permissionMode}
             onModeChange={setPermissionMode}
             providerId={providerId}
+            sessionId={sessionId ?? undefined}
             onProviderChange={!sessionId ? setProviderId : undefined}
             model={model}
             onModelChange={setModel}

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

@@ -2,6 +2,8 @@ import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, typ
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "lucide-react";
 import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
+import { downscaleImage } from "@/lib/image-resize";
+import { INLINE_IMAGE_LIMITS } from "@/lib/image-resize-limits";
 import { randomId } from "@/lib/utils";
 import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
 import { SEND_TO_CHAT_EVENT, SEND_TO_CHAT_ACK_EVENT, type SendToChatDetail } from "@/lib/send-to-chat";
@@ -17,6 +19,29 @@ import { fetchSlashItems, clearSlashItemsCache } from "@/lib/slash-items-cache";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
 
+/**
+ * Base64 payload for an image file, or undefined when it cannot be read.
+ *
+ * Reads through FileReader rather than assembling the string by hand: a phone photo is
+ * millions of characters, and building it in chunks on the main thread freezes the composer
+ * for as long as it takes.
+ */
+async function readImageData(file: File): Promise<{ data: string; mediaType: string } | undefined> {
+  try {
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result ?? ""));
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
+    const comma = dataUrl.indexOf(",");
+    const data = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+    return data ? { data, mediaType: file.type || "image/png" } : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 export interface ChatAttachment {
   id: string;
   name: string;
@@ -27,6 +52,16 @@ export interface ChatAttachment {
   serverPath?: string;
   /** Inline text content (e.g. terminal output) — no upload needed */
   textContent?: string;
+  /**
+   * Base64 payload for an image, sent as part of the message itself.
+   *
+   * Passing the path instead would make the model spend a whole extra round trip calling Read
+   * to fetch it, and every round trip re-sends the entire transcript. The uploaded copy is
+   * still kept, so removing the payload from a transcript later stays recoverable.
+   */
+  imageData?: { data: string; mediaType: string };
+  /** Dimensions before and after downscaling, when one happened — surfaced in the chip. */
+  resized?: { from: { width: number; height: number }; to: { width: number; height: number } };
   status: "uploading" | "ready" | "error";
 }
 
@@ -72,6 +107,9 @@ interface MessageInputProps {
   onModeChange?: (mode: string) => void;
   /** Current provider ID */
   providerId?: string;
+  /** Live session id, when the tab has one. Scopes the slash list to the session's
+   *  own skill runtime (codex resolves skills per account home + project cwd). */
+  sessionId?: string;
   /** Provider change handler — undefined when session is active (locked) */
   onProviderChange?: (providerId: string) => void;
   /** Current per-session model (null = provider default) */
@@ -112,6 +150,7 @@ export const MessageInput = memo(function MessageInput({
   permissionMode,
   onModeChange,
   providerId,
+  sessionId,
   onProviderChange,
   model,
   onModelChange,
@@ -293,7 +332,7 @@ export const MessageInput = memo(function MessageInput({
       onSlashItemsLoaded?.([], []);
       return;
     }
-    fetchSlashItems(projectName)
+    fetchSlashItems(projectName, providerId, sessionId)
       .then((data) => {
         slashItemsRef.current = data.items;
         onSlashItemsLoaded?.(data.items, data.recentNames);
@@ -302,7 +341,7 @@ export const MessageInput = memo(function MessageInput({
         slashItemsRef.current = [];
         onSlashItemsLoaded?.([], []);
       });
-  }, [projectName, onSlashItemsLoaded]);
+  }, [projectName, providerId, sessionId, onSlashItemsLoaded]);
 
   // Load when projectName changes (cache hit after the first tab in a project)
   useEffect(() => { loadSlashItems(); }, [loadSlashItems]);
@@ -369,10 +408,13 @@ export const MessageInput = memo(function MessageInput({
       return;
     }
 
-    // Find the /query pattern before cursor and replace it with the command name
+    // Find the /query pattern before cursor and replace it with the command name.
+    // The item's own sigil is used, not a hardcoded `/`: a codex skill is invoked
+    // as `$imagegen`, so the composer must show the text that will actually be
+    // sent rather than leaving the server to silently rewrite it.
     const replaced = textBefore.replace(/(?:^|\s)\/\S*$/, (match) => {
       const prefix = stripTrigger(match);
-      return `${prefix}/${slashSelected.name} `;
+      return `${prefix}${slashSelected.invokeSigil ?? "/"}${slashSelected.name} `;
     });
     writeTextareas(replaced + textAfter);
     onSlashStateChange?.(false, "");
@@ -436,6 +478,27 @@ export const MessageInput = memo(function MessageInput({
     onExternalPathsConsumed?.();
   }, [externalPaths]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  /** Delete an upload the user removed before sending. Best effort — nothing depends on it. */
+  const discardUpload = useCallback(
+    async (serverPath: string) => {
+      if (!projectName) return;
+      const filename = serverPath.split(/[\\/]/).pop();
+      if (!filename) return;
+      try {
+        const headers: HeadersInit = {};
+        const token = getAuthToken();
+        if (token) headers["Authorization"] = `Bearer ${token}`;
+        await fetch(`${projectUrl(projectName)}/chat/uploads/${encodeURIComponent(filename)}`, {
+          method: "DELETE",
+          headers,
+        });
+      } catch {
+        // An orphaned file is not worth surfacing to the user.
+      }
+    },
+    [projectName],
+  );
+
   /** Upload a single file to the server, return server path */
   const uploadFile = useCallback(
     async (file: File): Promise<string | null> => {
@@ -466,32 +529,64 @@ export const MessageInput = memo(function MessageInput({
   /** Process files — always uploads to server. Path resolution only happens via @ picker. */
   const processFiles = useCallback(
     async (files: File[]) => {
-      for (const file of files) {
+      for (const original of files) {
         const id = randomId();
-        const isImg = isImageFile(file);
-        const previewUrl = isImg ? URL.createObjectURL(file) : undefined;
+        const isImg = isImageFile(original);
 
         const att: ChatAttachment = {
           id,
-          name: file.name,
-          file,
+          name: original.name,
+          file: original,
           isImage: isImg,
-          previewUrl,
+          previewUrl: isImg ? URL.createObjectURL(original) : undefined,
           status: "uploading",
         };
 
         setAttachments((prev) => [...prev, att]);
 
-        // Upload in background
-        uploadFile(file).then((serverPath) => {
+        // Shrink first, so the upload, the preview and the message all carry the same
+        // already-reduced image — an oversized original must not reach the transcript.
+        //
+        // Only a `scaled` or `inlineable` result is attached inline. An image that could not
+        // be measured or re-encoded travels by path alone: sending unverified dimensions
+        // inline risks a payload the API refuses, and that refusal outlives the turn, since
+        // the transcript replays it into every later one.
+        try {
+          const outcome = isImg ? await downscaleImage(original) : null;
+          const file = outcome?.file ?? original;
+          // Point the thumbnail at the reduced file and let the original go. It is the larger
+          // of the two and nothing needs it once the resize is done, but it stayed alive until
+          // the message was sent because the preview still referenced it.
+          const previewUrl = isImg && file !== original ? URL.createObjectURL(file) : undefined;
+          const serverPath = await uploadFile(file);
+          const inlineable = outcome ? outcome.kind !== "asis" : false;
+          const imageData = inlineable ? await readImageData(file) : undefined;
+          const withinPayloadCap =
+            !!imageData && imageData.data.length <= INLINE_IMAGE_LIMITS.maxBase64PerImage;
+
+          if (previewUrl && att.previewUrl) URL.revokeObjectURL(att.previewUrl);
           setAttachments((prev) =>
             prev.map((a) =>
               a.id === id
-                ? { ...a, serverPath: serverPath ?? undefined, status: serverPath ? "ready" : "error" }
+                ? {
+                    ...a,
+                    file,
+                    ...(previewUrl && { previewUrl }),
+                    serverPath: serverPath ?? undefined,
+                    imageData: withinPayloadCap ? imageData : undefined,
+                    resized: outcome?.to ? { from: outcome.from!, to: outcome.to } : undefined,
+                    // An image can still be sent inline when the upload failed; anything
+                    // else has nothing left to send without its path.
+                    status: serverPath || withinPayloadCap ? "ready" : "error",
+                  }
                 : a,
             ),
           );
-        });
+        } catch {
+          // Nothing here may leave an attachment stuck on "uploading" — both the send button
+          // and the auto-send effect wait on that state, so a swallowed throw hangs the composer.
+          setAttachments((prev) => prev.map((a) => (a.id === id ? { ...a, status: "error" } : a)));
+        }
       }
       (mobileTextareaRef.current ?? textareaRef.current)?.focus();
     },
@@ -502,9 +597,12 @@ export const MessageInput = memo(function MessageInput({
     setAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att?.previewUrl) URL.revokeObjectURL(att.previewUrl);
+      // Uploads are never swept, because chat history points at them indefinitely, so one
+      // abandoned before it was ever sent would sit there with nothing referencing it.
+      if (att?.serverPath) void discardUpload(att.serverPath);
       return prev.filter((a) => a.id !== id);
     });
-  }, []);
+  }, [discardUpload]);
 
   /** Execute the actual send (called directly or after uploads complete) */
   const executeSend = useCallback(() => {

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

@@ -1115,6 +1115,20 @@ function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput
     if (event.type === "text") {
       textBuffer += event.content;
     } else if (event.type === "tool_use") {
+      // A call may be announced before it has anything to show and re-announced
+      // once it does — image generation starts with no file and no prompt, and
+      // only learns both when it finishes. The later event describes the same
+      // call, so it replaces the card rather than adding a second one.
+      const useId = (event as any).toolUseId;
+      const existing = useId
+        ? groups.find(
+            (g) => g.kind === "tool" && g.tool.type === "tool_use" && (g.tool as any).toolUseId === useId,
+          ) as (EventGroup & { kind: "tool" }) | undefined
+        : undefined;
+      if (existing) {
+        existing.tool = event;
+        continue;
+      }
       if (textBuffer) {
         groups.push({ kind: "text", content: textBuffer });
         textBuffer = "";

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

@@ -147,7 +147,8 @@ function TranscriptImages({ sessionId, projectName }: { sessionId: string; proje
               {audit.oversizedAttachments} of those {audit.oversizedAttachments === 1 ? "is an image you" : "are images you"}
               {" "}attached yourself, so the buttons below leave {audit.oversizedAttachments === 1 ? "it" : "them"} in place.
               While {audit.oversizedAttachments === 1 ? "it stays" : "they stay"}, every turn in this session keeps failing.
-              The transcript holds the only copy — removing {audit.oversizedAttachments === 1 ? "it" : "them"} cannot be undone.
+              Removing {audit.oversizedAttachments === 1 ? "it" : "them"} cannot be undone: an attachment PPM sent keeps
+              a copy on disk with its path still in the message, but one from another client does not.
             </span>
           </div>
           <Button

package/src/web/components/chat/slash-command-picker.tsx

@@ -15,6 +15,12 @@ export interface SlashItem {
   model?: string;
   /** Built-in only: which layer executes the command */
   handler?: "ppm" | "sdk" | "client";
+  /** Sigil the runtime needs; absent means `/`. Codex skills carry `$`. */
+  invokeSigil?: "/" | "$";
+  /** Pretty label the runtime supplies for itself (codex system skills). */
+  displayName?: string;
+  /** Runtime-supplied icon, inlined as a data URI by the server. */
+  iconDataUri?: string;
 }
 
 interface SlashCommandPickerProps {
@@ -181,7 +187,11 @@ export function SlashCommandPicker({
                 onClick={() => onSelect(item)}
               >
                 <span className="shrink-0 mt-0.5">
-                  {item.type === "builtin" ? (
+                  {item.iconDataUri ? (
+                    // The runtime shipped its own artwork (codex system skills).
+                    // Decorative: the name beside it already labels the row.
+                    <img src={item.iconDataUri} alt="" className="size-4 object-contain" />
+                  ) : item.type === "builtin" ? (
                     <Zap className="size-4 text-emerald-500" />
                   ) : item.type === "skill" ? (
                     <Sparkles className="size-4 text-warning" />
@@ -193,12 +203,21 @@ export function SlashCommandPicker({
                 </span>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-baseline gap-2 min-w-0">
-                    <span className="font-medium text-sm truncate">/{item.name}</span>
+                    {/* Invocation string, shown with the sigil that will actually be
+                        sent — codex resolves its skills from `$name`, not `/name`. */}
+                    <span className="font-medium text-sm truncate">
+                      {item.invokeSigil ?? "/"}{item.name}
+                    </span>
+                    {item.displayName && item.displayName !== item.name && (
+                      <span className="text-xs text-text-2 truncate">{item.displayName}</span>
+                    )}
                     {item.argumentHint && (
                       <span className="text-xs text-text-subtle truncate">{item.argumentHint}</span>
                     )}
                     <span className="text-xs text-text-subtle capitalize ml-auto shrink-0 whitespace-nowrap">
-                      {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
+                      {item.invokeSigil === "$"
+                        ? "Codex"
+                        : item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
                     </span>
                   </div>
                   {item.description && (