@hienlh/ppm 0.19.0 → 0.19.2

package/src/web/components/database/use-glide-cell-content.ts

@@ -49,7 +49,12 @@ export function useGlideCellContent(
   pkCol: string | null,
   addPendingEdit: (pkVal: unknown, col: string, newVal: unknown) => void,
   pendingRef: React.RefObject<Map<string, PendingEdit>>,
+  readOnly = false,
 ): UseGlideCellContentResult {
+  // Read through a ref: getCellContent is stable (canvas render loop) and must
+  // still see the current mode without being re-created.
+  const readOnlyRef = useRef(readOnly);
+  readOnlyRef.current = readOnly;
   const rowsRef = useRef(rows);
   rowsRef.current = rows;
   const colOrderRef = useRef(columnOrder);
@@ -106,7 +111,7 @@ export function useGlideCellContent(
       }
       return {
         kind: GridCellKind.Text, data: "", displayData: placeholder,
-        allowOverlay: !isPk, readonly: isPk,
+        allowOverlay: !isPk, readonly: isPk || readOnlyRef.current,
         themeOverride: hasPending ? PENDING_THEME : (isNewRow || placeholder !== "NULL" ? { textDark: "#9ca3af" } : { textDark: "#6b7280" }),
       };
     }
@@ -115,27 +120,27 @@ export function useGlideCellContent(
     if (kind === GridCellKind.Number && typeof val === "number") {
       return {
         kind: GridCellKind.Number, data: val, displayData: String(val),
-        allowOverlay: !isPk, readonly: isPk,
+        allowOverlay: !isPk, readonly: isPk || readOnlyRef.current,
         themeOverride: hasPending ? PENDING_THEME : undefined,
       };
     }
 
     // Boolean cells
     if (kind === GridCellKind.Boolean && typeof val === "boolean") {
-      return { kind: GridCellKind.Boolean, data: val, readonly: isPk, allowOverlay: false };
+      return { kind: GridCellKind.Boolean, data: val, readonly: isPk || readOnlyRef.current, allowOverlay: false };
     }
 
     // Text cell
     const strVal = formatCellValue(val);
     return {
       kind: GridCellKind.Text, data: strVal, displayData: truncateDisplay(strVal),
-      allowOverlay: !isPk, readonly: isPk,
+      allowOverlay: !isPk, readonly: isPk || readOnlyRef.current,
       themeOverride: hasPending ? PENDING_THEME : undefined,
     };
   }, []); // stable — reads from refs
 
   const onCellEdited = useCallback(([colIdx, rowIdx]: Item, newValue: EditableGridCell) => {
-    if (!pkCol) return;
+    if (!pkCol || readOnly) return;
     const colName = colOrderRef.current[colIdx];
     const row = rowsRef.current[rowIdx];
     if (!colName || !row) return;
@@ -153,7 +158,7 @@ export function useGlideCellContent(
     }
 
     addPendingEdit(pkVal, colName, parsed);
-  }, [pkCol, addPendingEdit]);
+  }, [pkCol, readOnly, addPendingEdit]);
 
   return { getCellContent, onCellEdited };
 }

package/src/web/components/editor/code-editor.tsx

@@ -14,7 +14,8 @@ import { EditorToolbar } from "./editor-toolbar";
 import { EditorLanguagePicker } from "./editor-language-picker";
 import { SaveAsDialog } from "./save-as-dialog";
 import { EditorMobileToolbar } from "./editor-mobile-toolbar";
-import { createSqlCompletionProvider, clearCompletionCache, getStatementAtCursor, type SchemaInfo } from "../database/sql-completion-provider";
+import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "../database/sql-completion-provider";
+import { getStatementAtCursor, splitSqlStatements } from "../database/split-sql-statements";
 import { useConnections, type Connection } from "../database/use-connections";
 import { GlideDataGrid } from "../database/glide-data-grid";
 import type { GridColumnSchema } from "../database/glide-grid-types";
@@ -509,76 +510,49 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             if (model !== thisModel) return { lenses: [], dispose: () => {} };
 
             const lenses: MonacoType.languages.CodeLens[] = [];
-            const text = model.getValue();
-            const lines = text.split("\n");
-            let stmtStartLine = -1;
-            let stmtLines: string[] = [];
-            let dollarBlock = false; // Track DO $$ ... $$ blocks
-
-            // Transaction block tracking: group BEGIN...COMMIT into single Run Transaction
-            const txPattern = /^(BEGIN|COMMIT|ROLLBACK|END)(;|\s|$)/i;
-            let txBlockStartLine = -1;
-            let txBlockStmts: string[] = [];
 
             const addLens = (line: number, stmt: string, title = "\u25B7 Run") => {
               const trimmed = stmt.trim();
-              if (!trimmed || trimmed.startsWith("--")) return;
+              if (!trimmed) return;
               lenses.push({
                 range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
                 command: { id: cmdId, title, arguments: [trimmed] },
               });
             };
 
-            for (let i = 0; i < lines.length; i++) {
-              const trimmed = lines[i]!.trim();
-              if (stmtStartLine === -1) {
-                if (!trimmed || trimmed.startsWith("--")) continue;
-                stmtStartLine = i + 1;
-                stmtLines = [];
-              }
-              stmtLines.push(lines[i]!);
-
-              // Detect $$ dollar-quoted block start/end
-              const dollarMatches = (trimmed.match(/\$\$/g) || []).length;
-              if (dollarMatches % 2 === 1) dollarBlock = !dollarBlock;
-
-              // Only split on ; when NOT inside a $$ block
-              if (!dollarBlock && trimmed.endsWith(";")) {
-                const stmt = stmtLines.join("\n").trim();
-                const isTxStart = /^BEGIN(;|\s|$)/i.test(stmt);
-                const isTxEnd = /^(COMMIT|ROLLBACK|END)(;|\s|$)/i.test(stmt);
-
-                if (txBlockStartLine === -1 && isTxStart) {
-                  // Start collecting transaction block
-                  txBlockStartLine = stmtStartLine;
-                  txBlockStmts = [stmt];
-                } else if (txBlockStartLine > -1) {
-                  txBlockStmts.push(stmt);
-                  // Individual Run for non-tx-control statements inside block
-                  if (!isTxEnd && !txPattern.test(stmt)) {
-                    addLens(stmtStartLine, stmt);
-                  }
-                  if (isTxEnd) {
-                    // Complete block — add Run Transaction at BEGIN line
-                    addLens(txBlockStartLine, txBlockStmts.join("\n"), "\u25B7 Run Transaction");
-                    txBlockStartLine = -1;
-                    txBlockStmts = [];
-                  }
-                } else {
-                  addLens(stmtStartLine, stmt);
-                }
+            // Transaction block tracking: group BEGIN...COMMIT into single Run Transaction
+            const txPattern = /^(BEGIN|COMMIT|ROLLBACK|END)(;|\s|$)/i;
+            let txBlockStartLine = -1;
+            let txBlockStmts: string[] = [];
 
-                stmtStartLine = -1;
-                stmtLines = [];
+            for (const { sql, startLine } of splitSqlStatements(model.getValue())) {
+              const isTxStart = /^BEGIN(;|\s|$)/i.test(sql);
+              const isTxEnd = /^(COMMIT|ROLLBACK|END)(;|\s|$)/i.test(sql);
+
+              if (txBlockStartLine === -1 && isTxStart) {
+                // Start collecting transaction block
+                txBlockStartLine = startLine;
+                txBlockStmts = [sql];
+              } else if (txBlockStartLine > -1) {
+                txBlockStmts.push(sql);
+                // Individual Run for non-tx-control statements inside block
+                if (!isTxEnd && !txPattern.test(sql)) {
+                  addLens(startLine, sql);
+                }
+                if (isTxEnd) {
+                  // Complete block — add Run Transaction at BEGIN line
+                  addLens(txBlockStartLine, txBlockStmts.join("\n"), "\u25B7 Run Transaction");
+                  txBlockStartLine = -1;
+                  txBlockStmts = [];
+                }
+              } else {
+                addLens(startLine, sql);
               }
             }
             // Unclosed transaction block — still offer Run Transaction
             if (txBlockStartLine > -1 && txBlockStmts.length > 1) {
               addLens(txBlockStartLine, txBlockStmts.join("\n"), "\u25B7 Run Transaction");
             }
-            if (stmtStartLine > 0 && stmtLines.join("").trim()) {
-              addLens(stmtStartLine, stmtLines.join("\n"));
-            }
             return { lenses, dispose: () => {} };
           },
         });
@@ -878,7 +852,7 @@ function SqlResultPanel({ result, error, loading, connName, onClose, onOpenInTab
           <GlideDataGrid
             columns={tableData.columns} rows={tableData.rows} total={tableData.total} limit={tableData.limit}
             schema={querySchema} loading={false}
-            page={1} onPageChange={NOOP} onCellUpdate={NOOP}
+            page={1} onPageChange={NOOP} onCellUpdate={NOOP} readOnly
             orderBy={null} orderDir="ASC" onToggleSort={NOOP}
             connectionName={connName}
           />

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};