@saadnvd1/agent-os 0.3.790 → 0.3.792

package/components/Chat/composer/shrinkImage.ts

@@ -0,0 +1,95 @@
+import { needsShrink, renamed, SHRINK_STEPS, targetSize } from "./shrinkPlan";
+
+type Canvas = OffscreenCanvas | HTMLCanvasElement;
+
+function makeCanvas(width: number, height: number): Canvas {
+  if (typeof OffscreenCanvas !== "undefined")
+    return new OffscreenCanvas(width, height);
+  const c = document.createElement("canvas");
+  c.width = width;
+  c.height = height;
+  return c;
+}
+
+function encode(
+  canvas: Canvas,
+  type: string,
+  quality?: number
+): Promise<Blob | null> {
+  if ("convertToBlob" in canvas) return canvas.convertToBlob({ type, quality });
+  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+
+function hasAlpha(
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  w: number,
+  h: number
+) {
+  const data = ctx.getImageData(0, 0, w, h).data;
+  for (let i = 3; i < data.length; i += 4) if (data[i] < 255) return true;
+  return false;
+}
+
+export type ShrinkResult = { ok: true; file: File } | { ok: false };
+
+// Downscale an image that is over the byte cap or 2000px on its long edge.
+// Returns the file untouched when it is already fine, and { ok: false } when
+// it can't be decoded or still doesn't fit after every step.
+export async function shrinkImage(
+  file: File,
+  cap: number
+): Promise<ShrinkResult> {
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+  } catch {
+    // A file we can't decode is only a problem if it was too big anyway.
+    return file.size > cap ? { ok: false } : { ok: true, file };
+  }
+  try {
+    if (!needsShrink(bitmap.width, bitmap.height, file.size, cap))
+      return { ok: true, file };
+    // Animated GIFs would lose their frames; only touch one that can't go as is.
+    if (file.type === "image/gif" && file.size <= cap)
+      return { ok: true, file };
+
+    let keepPng: boolean | null = null;
+    for (const { maxEdge, quality } of SHRINK_STEPS) {
+      const { width, height } = targetSize(
+        bitmap.width,
+        bitmap.height,
+        maxEdge
+      );
+      const canvas = makeCanvas(width, height);
+      const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null;
+      if (!ctx) return { ok: false };
+      ctx.drawImage(bitmap, 0, 0, width, height);
+      if (keepPng === null)
+        keepPng = file.type === "image/png" && hasAlpha(ctx, width, height);
+      if (keepPng) {
+        const png = await encode(canvas, "image/png");
+        if (png && png.size <= cap)
+          return {
+            ok: true,
+            file: new File([png], file.name, { type: "image/png" }),
+          };
+        keepPng = false;
+      }
+      // JPEG has no alpha: put the picture on white first.
+      ctx.globalCompositeOperation = "destination-over";
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, width, height);
+      const jpeg = await encode(canvas, "image/jpeg", quality);
+      if (jpeg && jpeg.size <= cap)
+        return {
+          ok: true,
+          file: new File([jpeg], renamed(file.name, "jpg"), {
+            type: "image/jpeg",
+          }),
+        };
+    }
+    return { ok: false };
+  } finally {
+    bitmap.close();
+  }
+}

package/components/Chat/composer/shrinkPlan.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { needsShrink, renamed, SHRINK_STEPS, targetSize } from "./shrinkPlan";
+
+describe("shrink plan", () => {
+  it("shrinks a big photo and leaves a small one alone", () => {
+    expect(needsShrink(5712, 4284, 8_000_000, 3_750_000)).toBe(true);
+    expect(needsShrink(1200, 800, 4_000_000, 3_750_000)).toBe(true);
+    expect(needsShrink(3000, 1000, 100_000, 3_750_000)).toBe(true);
+    expect(needsShrink(2000, 1500, 500_000, 3_750_000)).toBe(false);
+  });
+
+  it("fits the long edge and keeps the aspect ratio", () => {
+    expect(targetSize(5712, 4284, 2000)).toEqual({ width: 2000, height: 1500 });
+    expect(targetSize(4284, 5712, 1600)).toEqual({ width: 1200, height: 1600 });
+    expect(targetSize(800, 600, 2000)).toEqual({ width: 800, height: 600 });
+  });
+
+  it("steps quality down before size", () => {
+    expect(SHRINK_STEPS.map((s) => `${s.maxEdge}@${s.quality}`)).toEqual([
+      "2000@0.85",
+      "2000@0.75",
+      "2000@0.65",
+      "1600@0.75",
+      "1600@0.65",
+    ]);
+  });
+
+  it("swaps the extension", () => {
+    expect(renamed("IMG_1.HEIC", "jpg")).toBe("IMG_1.jpg");
+    expect(renamed("a.b.png", "jpg")).toBe("a.b.jpg");
+    expect(renamed("noext", "jpg")).toBe("noext.jpg");
+  });
+});

package/components/Chat/composer/shrinkPlan.ts

@@ -0,0 +1,39 @@
+// The decisions behind shrinking a big photo before it is attached, kept pure
+// so they can be tested without a canvas.
+
+export const MAX_EDGE = 2000;
+const FALLBACK_EDGE = 1600;
+
+export interface ShrinkStep {
+  maxEdge: number;
+  quality: number;
+}
+
+// Tried in order until the result fits the cap.
+export const SHRINK_STEPS: ShrinkStep[] = [
+  { maxEdge: MAX_EDGE, quality: 0.85 },
+  { maxEdge: MAX_EDGE, quality: 0.75 },
+  { maxEdge: MAX_EDGE, quality: 0.65 },
+  { maxEdge: FALLBACK_EDGE, quality: 0.75 },
+  { maxEdge: FALLBACK_EDGE, quality: 0.65 },
+];
+
+export const needsShrink = (
+  width: number,
+  height: number,
+  bytes: number,
+  cap: number
+) => bytes > cap || Math.max(width, height) > MAX_EDGE;
+
+// Fit inside maxEdge on the long side; never enlarge.
+export function targetSize(width: number, height: number, maxEdge: number) {
+  const scale = Math.min(1, maxEdge / Math.max(width, height));
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  };
+}
+
+// photo.HEIC -> photo.jpg; a name without an extension just gains one.
+export const renamed = (name: string, ext: "jpg" | "png") =>
+  `${name.replace(/\.[^./\\]+$/, "")}.${ext}`;

package/components/Chat/composer/useAttachFiles.ts

@@ -16,6 +16,7 @@ import {
 import type { ChatFile, ChatImage } from "@/lib/chat/events";
 import { uploadFile } from "@/lib/file-upload";
 import { isImage } from "./paste";
+import { shrinkImage } from "./shrinkImage";
 
 export interface Upload {
   key: string;
@@ -79,9 +80,9 @@ export function useAttachFiles({
       if (held.current + images.length + others.length >= limits.max)
         error = `You can attach up to ${limits.max} files to one message.`;
       else if (isImage(f)) {
-        if (f.size > limits.maxImageBytes)
-          error = tooBigMessage(f.name, f.size, limits.maxImageBytes);
-        else images.push(f);
+        const shrunk = await shrinkImage(f, limits.maxImageBytes);
+        if (shrunk.ok) images.push(shrunk.file);
+        else error = tooBigMessage(f.name, f.size, limits.maxImageBytes);
       } else if (!typeFor(f.name, limits.types))
         error = unsupportedMessage(f.name);
       else if (f.size > limits.maxBytes)

package/content/whats-new.json

@@ -1777,6 +1777,14 @@
       "area": "AgentOS",
       "text": "What's New now sits as a small icon in the sidebar footer.",
       "url": "https://github.com/saadnvd1/agent-os/pull/528"
+    },
+    {
+      "id": 529,
+      "date": "2026-10-31",
+      "kind": "fixed",
+      "area": "Chat",
+      "text": "Large photos from your phone now attach to a chat instead of being refused.",
+      "url": "https://github.com/saadnvd1/agent-os/pull/529"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.790",
+  "version": "0.3.792",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"