@hienlh/ppm 0.19.1 → 0.19.2

package/src/web/hooks/use-chat.ts

@@ -90,7 +90,7 @@ interface UseChatReturn {
   backgroundShells: BackgroundShell[];
   killBackgroundShell: (shellId: string) => void;
   findBackgroundShellByOutput: (name: string) => BackgroundShell | undefined;
-  sendMessage: (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => void;
+  sendMessage: (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; imagePaths?: string[] }) => void;
   respondToApproval: (requestId: string, approved: boolean, data?: unknown) => void;
   cancelStreaming: () => void;
   reconnect: () => void;
@@ -1035,8 +1035,10 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   }, [sessionId, providerId, projectName, updateTeamActivity, loadTeamDetail]);
 
   const sendMessage = useCallback(
-    (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => {
-      if (!content.trim()) return;
+    (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; imagePaths?: string[] }) => {
+      // An attachment-only message is legitimate now that images travel with it: the
+      // caller may have nothing to say beyond the picture.
+      if (!content.trim() && !opts?.images?.length) return;
 
       const isFollowUp = phaseRef.current !== "idle";
 
@@ -1089,6 +1091,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         permissionMode: opts?.permissionMode,
         priority: opts?.priority,
         images: opts?.images,
+        imagePaths: opts?.imagePaths,
         ...(modelRef.current && { model: modelRef.current }),
         ...(effortRef.current && { effort: effortRef.current }),
         ...(thinkingRef.current !== null && { thinking: thinkingRef.current }),

package/src/web/lib/attachment-marker-split.ts

@@ -0,0 +1,44 @@
+/**
+ * Which attachments are announced as already-included, and which as files to open.
+ *
+ * Split out from the composer so it can be asserted on. The decision looks obvious and is
+ * not: it has to follow the payloads that actually go out, not merely which attachments have
+ * one. The per-message caps can leave an image behind, and announcing that its contents are
+ * included would hand the model neither the picture nor a reason to open the file.
+ */
+
+/** The parts of an attachment this split needs. */
+export interface MarkerCandidate {
+  serverPath?: string;
+  imageData?: { data: string; mediaType: string };
+}
+
+export interface MarkerSplit {
+  /** Uploaded paths whose payloads are travelling in this message. */
+  inlineImagePaths: string[];
+  /** Uploaded paths the model has to open for itself. */
+  pathOnlyPaths: string[];
+}
+
+/**
+ * Sort `attachments` by whether their payload is in `inlineImages`.
+ *
+ * An attachment with no uploaded path is in neither list: there is nothing to name. Identity
+ * is what pairs a payload to its attachment — `inlineImages` holds the very objects the
+ * attachments carry, so a second image with byte-identical data is not mistaken for the one
+ * that was picked.
+ */
+export function splitAttachmentMarkers(
+  attachments: MarkerCandidate[],
+  inlineImages: Array<{ data: string; mediaType: string }>,
+): MarkerSplit {
+  const sent = new Set(inlineImages);
+  const inlineImagePaths: string[] = [];
+  const pathOnlyPaths: string[] = [];
+  for (const a of attachments) {
+    if (!a.serverPath) continue;
+    if (a.imageData && sent.has(a.imageData)) inlineImagePaths.push(a.serverPath);
+    else pathOnlyPaths.push(a.serverPath);
+  }
+  return { inlineImagePaths, pathOnlyPaths };
+}

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

@@ -0,0 +1,51 @@
+/**
+ * Whether an image file carries more than one frame.
+ *
+ * Re-encoding through a canvas keeps a single frame, so an animated image that goes through
+ * the downscaler comes out silently flattened — and for the animations people paste into a
+ * chat, a screen recording of a bug or a flow, the motion *is* the content. Better to leave
+ * such a file at its original size than to shrink away the thing being shown.
+ *
+ * Detection reads container markers rather than decoding: an animated WebP declares an `ANIM`
+ * chunk and an animated PNG an `acTL` chunk, both within the first few hundred bytes. GIF is
+ * treated as animated without inspection — the marker for a still GIF is the *absence* of
+ * extra frame separators, which cannot be established from a prefix, and a still GIF is rare
+ * enough that assuming motion costs almost nothing.
+ */
+
+/** Bytes read from the front of a file to look for animation markers. */
+const HEADER_BYTES = 4096;
+
+function findAscii(bytes: Uint8Array, needle: string): boolean {
+  const target = new TextEncoder().encode(needle);
+  outer: for (let i = 0; i + target.length <= bytes.length; i++) {
+    for (let j = 0; j < target.length; j++) {
+      if (bytes[i + j] !== target[j]) continue outer;
+    }
+    return true;
+  }
+  return false;
+}
+
+export function hasAnimationMarker(type: string, header: Uint8Array): boolean {
+  if (type === "image/gif") return true;
+  if (type === "image/webp") return findAscii(header, "ANIM");
+  if (type === "image/png" || type === "image/apng") return findAscii(header, "acTL");
+  // AVIF sequences and anything unrecognised: not decodable here anyway, so the caller
+  // falls back to sending the file by path.
+  return false;
+}
+
+/** Read enough of `file` to answer, treating an unreadable file as animated (do not touch it). */
+export async function isAnimatedImage(file: File): Promise<boolean> {
+  if (file.type === "image/gif") return true;
+  if (file.type !== "image/webp" && file.type !== "image/png" && file.type !== "image/apng") {
+    return false;
+  }
+  try {
+    const head = new Uint8Array(await file.slice(0, HEADER_BYTES).arrayBuffer());
+    return hasAnimationMarker(file.type, head);
+  } catch {
+    return true;
+  }
+}

package/src/web/lib/image-resize-limits.ts

@@ -0,0 +1,47 @@
+/**
+ * Ceilings on what may be sent as inline image payloads in one message.
+ *
+ * The chat socket refuses a message outright when it carries more than five images or one
+ * above seven million base64 characters, and the WebSocket frame itself has a size past which
+ * Bun closes the connection — which loses the message with nothing shown to the user. Both are
+ * worth staying under by a margin rather than discovering at the boundary.
+ *
+ * Exceeding these is not an error: the attachment travels by path instead, which is how every
+ * attachment worked before inlining existed.
+ */
+export const INLINE_IMAGE_LIMITS = {
+  /** Server refuses a message carrying more than five. */
+  maxImages: 4,
+  /** Server refuses a single payload above 7,000,000 base64 characters. */
+  maxBase64PerImage: 5_000_000,
+  /** Frame budget across all payloads in one message, well under the 16 MiB default. */
+  maxBase64Total: 10_000_000,
+} as const;
+
+/** The subset of an attachment this module needs to decide whether it can ride inline. */
+export interface InlineCandidate {
+  imageData?: { data: string; mediaType: string };
+}
+
+/**
+ * The image payloads that may ride on one message, in order, up to those ceilings.
+ *
+ * An attachment past a ceiling is left out rather than refused: its path is still in the
+ * message, so the model can open it the old way. A candidate that does not fit is skipped
+ * instead of ending the scan, so one large image does not exclude the small ones after it.
+ */
+export function selectInlineImages(
+  attachments: InlineCandidate[],
+): Array<{ data: string; mediaType: string }> {
+  const picked: Array<{ data: string; mediaType: string }> = [];
+  let total = 0;
+  for (const a of attachments) {
+    if (!a.imageData) continue;
+    if (picked.length >= INLINE_IMAGE_LIMITS.maxImages) break;
+    if (a.imageData.data.length > INLINE_IMAGE_LIMITS.maxBase64PerImage) continue;
+    if (total + a.imageData.data.length > INLINE_IMAGE_LIMITS.maxBase64Total) continue;
+    total += a.imageData.data.length;
+    picked.push(a.imageData);
+  }
+  return picked;
+}

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

@@ -0,0 +1,133 @@
+import { MAX_IMAGE_DIMENSION, fitWithin } from "../../shared/image-limits";
+import { isAnimatedImage } from "./image-animation";
+
+/**
+ * Downscaling of attachments before they are sent.
+ *
+ * An image is billed by area, so a screenshot straight off a high-resolution display costs
+ * several thousand tokens on every turn for the rest of the session's life — and past the
+ * API's ceiling it is refused outright, which fails not just that turn but every later one,
+ * since the transcript is replayed in full each time.
+ *
+ * Done in the browser because that is where the image already exists as pixels: the decoder
+ * scales it on the way in, and the smaller file is what gets uploaded, previewed, embedded and
+ * stored, so nothing downstream ever sees the oversized original.
+ */
+
+/** Longest side an attachment is reduced to. Below the API ceiling, still legible for text. */
+export const ATTACHMENT_MAX_DIMENSION = 1600;
+
+/** Media types the chat socket accepts as an inline payload. */
+const INLINE_MEDIA_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+export type ResizeKind =
+  /** Re-encoded smaller. Safe to send inline: dimensions and type are both known good. */
+  | "scaled"
+  /** Already small enough and of a type the socket takes. Safe to send inline unchanged. */
+  | "inlineable"
+  /** Could not be measured or re-encoded. Must go by path — see the note on `downscaleImage`. */
+  | "asis";
+
+export interface ResizeOutcome {
+  kind: ResizeKind;
+  file: File;
+  /** Original dimensions, when they could be read. */
+  from?: { width: number; height: number };
+  /** Dimensions after scaling, when a scale happened. */
+  to?: { width: number; height: number };
+}
+
+/** Canvas encodes to a handful of types; anything else round-trips as PNG. */
+export function encodeType(type: string): string {
+  return type === "image/jpeg" || type === "image/webp" ? type : "image/png";
+}
+
+/**
+ * Return a copy of `file` scaled to fit `max`, and say whether the result may be sent inline.
+ *
+ * Never throws: a browser without `createImageBitmap`, an image it cannot decode (HEIC on
+ * Android, AVIF, a corrupt EXIF header), or a canvas that will not encode all resolve to
+ * `kind: "asis"` with the original file.
+ *
+ * That distinction is the point. Sending an unmeasured original inline is worse than not
+ * inlining at all: an oversized payload is refused by the API, and the refusal is not confined
+ * to the turn — the transcript replays it, so every later turn fails too, and the retry path
+ * pushes the same bytes again. A caller that cannot scale an image must fall back to passing
+ * its path, which is what the product did before inlining existed and still works.
+ */
+export async function downscaleImage(
+  file: File,
+  max: number = ATTACHMENT_MAX_DIMENSION,
+): Promise<ResizeOutcome> {
+  const asis: ResizeOutcome = { kind: "asis", file };
+  if (!file.type.startsWith("image/") || file.type === "image/svg+xml") return asis;
+  if (typeof createImageBitmap !== "function" || typeof document === "undefined") return asis;
+
+  let probe: ImageBitmap;
+  try {
+    probe = await createImageBitmap(file);
+  } catch {
+    return asis;
+  }
+
+  const from = { width: probe.width, height: probe.height };
+  // `fitWithin` treats its bound as an exclusive ceiling, which is right for the API's limit
+  // but would re-encode an image measuring exactly the attachment target for one pixel.
+  const to = fitWithin(from.width, from.height, max + 1);
+
+  // A canvas keeps one frame, so scaling an animation throws the animation away. Send it at
+  // its own size when the API will still take it, and by path when it will not — losing the
+  // motion is not a trade worth making silently for a picture someone chose to send moving.
+  if (to && (await isAnimatedImage(file))) {
+    probe.close?.();
+    return Math.max(from.width, from.height) < MAX_IMAGE_DIMENSION && INLINE_MEDIA_TYPES.has(file.type)
+      ? { kind: "inlineable", file, from }
+      : { kind: "asis", file, from };
+  }
+
+  if (!to) {
+    probe.close?.();
+    // Already small enough — inline it only if the socket takes this type as-is.
+    return INLINE_MEDIA_TYPES.has(file.type)
+      ? { kind: "inlineable", file, from }
+      : { kind: "asis", file, from };
+  }
+
+  let bitmap = probe;
+  try {
+    // Let the decoder do the scaling where it can: a full-size bitmap of a phone photo is
+    // tens of megabytes of RGBA held on the main thread purely to be thrown away.
+    try {
+      bitmap = await createImageBitmap(file, {
+        resizeWidth: to.width,
+        resizeHeight: to.height,
+        resizeQuality: "high",
+      });
+      probe.close?.();
+    } catch {
+      bitmap = probe;
+    }
+
+    const canvas = document.createElement("canvas");
+    canvas.width = to.width;
+    canvas.height = to.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return { kind: "asis", file, from };
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(bitmap, 0, 0, to.width, to.height);
+
+    const type = encodeType(file.type);
+    const blob = await new Promise<Blob | null>((res) => canvas.toBlob(res, type, 0.92));
+    // Some encoders answer with an empty blob rather than null on failure.
+    if (!blob || blob.size === 0) return { kind: "asis", file, from };
+
+    const name = type === file.type ? file.name : file.name.replace(/\.[^.]+$/, "") + ".png";
+    return { kind: "scaled", file: new File([blob], name, { type }), from, to };
+  } catch {
+    return { kind: "asis", file, from };
+  } finally {
+    bitmap.close?.();
+  }
+}
+

package/dist/web/assets/api-client-DLWwuUkJ.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-CXJtBULr.js";import{i as e,n as t}from"./api-client-qRWu6_s5.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-BFuaZrNC.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-CXJtBULr.js";import"./api-client-qRWu6_s5.js";import{v as e}from"./api-settings-CPg4yGvS.js";export{e as updateDeviceName};