@agent-native/core 0.102.0 → 0.102.2

package/corpus/templates/clips/chrome-extension/src/content-script.ts

@@ -83,6 +83,17 @@
   let bubbleDragLayer: HTMLDivElement | null = null;
   let bubblePersistTimer: ReturnType<typeof setTimeout> | undefined;
 
+  // The quick-actions toolbar is also draggable. Keep its geometry in the
+  // content script because the iframe cannot position itself on the host page.
+  const TOOLBAR_WIDTH = 68;
+  const TOOLBAR_COLLAPSED_HEIGHT = 154;
+  const toolbarGeom: { left: number | null; top: number | null } = {
+    left: null,
+    top: null,
+  };
+  let toolbarDragLayer: HTMLDivElement | null = null;
+  let toolbarPersistTimer: ReturnType<typeof setTimeout> | undefined;
+
   function bubbleSizePx(): number {
     return BUBBLE_SIZES[bubbleGeom.size] ?? BUBBLE_SIZES.lg;
   }
@@ -130,6 +141,92 @@
     }, 200);
   }
 
+  function clampToolbar(
+    left: number,
+    top: number,
+    height: number,
+  ): { left: number; top: number } {
+    return {
+      left: Math.max(8, Math.min(left, window.innerWidth - TOOLBAR_WIDTH - 8)),
+      top: Math.max(8, Math.min(top, window.innerHeight - height - 8)),
+    };
+  }
+
+  function applyToolbarGeom(): void {
+    const frame = document.getElementById(
+      partFrameId("toolbar"),
+    ) as HTMLIFrameElement | null;
+    if (!frame) return;
+    const height =
+      frame.getBoundingClientRect().height || TOOLBAR_COLLAPSED_HEIGHT;
+    const base = clampToolbar(
+      toolbarGeom.left ?? 16,
+      toolbarGeom.top ?? window.innerHeight / 2 - TOOLBAR_COLLAPSED_HEIGHT / 2,
+      height,
+    );
+    Object.assign(frame.style, {
+      left: `${base.left}px`,
+      top: `${base.top}px`,
+      right: "auto",
+    });
+  }
+
+  function persistToolbarGeom(): void {
+    clearTimeout(toolbarPersistTimer);
+    toolbarPersistTimer = setTimeout(() => {
+      try {
+        chrome.storage.local.set({ toolbarGeom });
+      } catch {
+        /* ignore */
+      }
+    }, 200);
+  }
+
+  function startToolbarDrag(): void {
+    if (toolbarDragLayer) return;
+    const frame = document.getElementById(
+      partFrameId("toolbar"),
+    ) as HTMLIFrameElement | null;
+    if (!frame) return;
+
+    const layer = document.createElement("div");
+    Object.assign(layer.style, {
+      position: "fixed",
+      inset: "0",
+      zIndex: "2147483647",
+      cursor: "grabbing",
+    });
+    (document.documentElement || document.body).appendChild(layer);
+    toolbarDragLayer = layer;
+
+    const onMove = (e: PointerEvent): void => {
+      const rect = frame.getBoundingClientRect();
+      const next = clampToolbar(
+        rect.left + e.movementX,
+        rect.top + e.movementY,
+        rect.height || TOOLBAR_COLLAPSED_HEIGHT,
+      );
+      toolbarGeom.left = next.left;
+      toolbarGeom.top = next.top;
+      Object.assign(frame.style, {
+        left: `${next.left}px`,
+        top: `${next.top}px`,
+        right: "auto",
+      });
+    };
+    const onUp = (): void => {
+      layer.removeEventListener("pointermove", onMove);
+      layer.removeEventListener("pointerup", onUp);
+      layer.removeEventListener("pointercancel", onUp);
+      layer.remove();
+      toolbarDragLayer = null;
+      persistToolbarGeom();
+    };
+    layer.addEventListener("pointermove", onMove);
+    layer.addEventListener("pointerup", onUp);
+    layer.addEventListener("pointercancel", onUp);
+  }
+
   function startBubbleDrag(): void {
     if (bubbleDragLayer) return;
     const frame = document.getElementById(
@@ -177,7 +274,7 @@
   }
 
   try {
-    chrome.storage.local.get("bubbleGeom", (value) => {
+    chrome.storage.local.get(["bubbleGeom", "toolbarGeom"], (value) => {
       if (chrome.runtime.lastError) return;
       const g = value.bubbleGeom as
         | { size?: unknown; left?: unknown; top?: unknown }
@@ -188,12 +285,24 @@
         bubbleGeom.top = typeof g.top === "number" ? g.top : null;
       }
       applyBubbleGeom();
+      const toolbar = value.toolbarGeom as
+        | { left?: unknown; top?: unknown }
+        | undefined;
+      if (toolbar && typeof toolbar === "object") {
+        toolbarGeom.left =
+          typeof toolbar.left === "number" ? toolbar.left : null;
+        toolbarGeom.top = typeof toolbar.top === "number" ? toolbar.top : null;
+      }
+      applyToolbarGeom();
     });
   } catch {
     /* ignore */
   }
 
-  window.addEventListener("resize", () => applyBubbleGeom());
+  window.addEventListener("resize", () => {
+    applyBubbleGeom();
+    applyToolbarGeom();
+  });
 
   function readCurrentParts(
     callback: (parts: OverlayPart[] | null) => void,
@@ -338,6 +447,7 @@
     styleFrame(frame, part);
     container.appendChild(frame);
     if (part === "bubble") applyBubbleGeom();
+    if (part === "toolbar") applyToolbarGeom();
   }
 
   // Camera-ready gating + connecting spinner: while the camera connects we show a
@@ -520,6 +630,7 @@
       const frame = document.getElementById(partFrameId("toolbar"));
       if (frame && typeof data.height === "number") {
         frame.style.height = `${Math.round(data.height)}px`;
+        applyToolbarGeom();
       }
       return;
     }
@@ -537,6 +648,10 @@
       startBubbleDrag();
       return;
     }
+    if (data.kind === "toolbar-drag-start") {
+      startToolbarDrag();
+      return;
+    }
     if (data.kind === "bubble-size") {
       bubbleGeom.size = data.size === "sm" ? "sm" : "lg";
       applyBubbleGeom();

package/corpus/templates/clips/chrome-extension/src/overlay.ts

@@ -84,6 +84,17 @@ function postToolbarSize(height: number): void {
   }
 }
 
+function postToolbarDragStart(): void {
+  try {
+    window.parent.postMessage(
+      { source: "clips-overlay", kind: "toolbar-drag-start", part: "toolbar" },
+      "*",
+    );
+  } catch {
+    /* parent gone */
+  }
+}
+
 function postCountdownFinished(): void {
   try {
     window.parent.postMessage(
@@ -406,6 +417,22 @@ function initCountdown(): void {
 function initToolbar(): void {
   const pill = document.createElement("div");
   pill.className = "toolbar-v";
+  pill.style.cursor = "grab";
+
+  // The content script owns iframe geometry, so ask it to capture the pointer
+  // page-wide when the user drags the toolbar outside its current bounds.
+  pill.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    if ((event.target as HTMLElement).closest("button")) return;
+    event.preventDefault();
+    pill.style.cursor = "grabbing";
+    postToolbarDragStart();
+    const restore = (): void => {
+      pill.style.cursor = "grab";
+      window.removeEventListener("pointerup", restore);
+    };
+    window.addEventListener("pointerup", restore);
+  });
 
   const makeBtn = (
     cls: string,

package/corpus/templates/clips/desktop/src-tauri/tauri.conf.json

@@ -40,7 +40,7 @@
   },
   "plugins": {
     "shell": {
-      "open": "(((mailto:\\w+)|(tel:\\w+)|(https?://\\w+)).+|(zoommtg://([A-Za-z0-9-]+\\.)*zoom\\.us/join\\?.+))"
+      "open": "(((mailto:\\w+)|(tel:\\w+)|(https?://\\w+)).+|(zoommtg://([A-Za-z0-9-]+\\.)*zoom\\.us/join\\?.+)|(ms-settings:[A-Za-z0-9._?=&-]+))"
     },
     "updater": {
       "active": true,

package/corpus/templates/clips/server/lib/calendar-event-meetings.ts

@@ -274,6 +274,27 @@ export function calendarEventToMeetingView(args: {
   };
 }
 
+/**
+ * Acquire the calendar account's write lock inside a caller-owned transaction.
+ * Disconnect and materialization both take this lock before touching the
+ * account's calendar events, so cleanup cannot race a meeting insert.
+ */
+export async function lockCalendarAccount(
+  db: any,
+  accountId: string,
+  ownerEmail?: string | null,
+): Promise<boolean> {
+  const ownerFilter = ownerEmail
+    ? eq(schema.calendarAccounts.ownerEmail, ownerEmail)
+    : isNull(schema.calendarAccounts.ownerEmail);
+  const locked = await db
+    .update(schema.calendarAccounts)
+    .set({ updatedAt: new Date().toISOString() })
+    .where(and(eq(schema.calendarAccounts.id, accountId), ownerFilter))
+    .returning({ id: schema.calendarAccounts.id });
+  return locked.length > 0;
+}
+
 export async function fetchLiveCalendarEventFromId(virtualId: string) {
   const parsed = parseCalendarMeetingId(virtualId);
   if (!parsed) return null;
@@ -317,11 +338,14 @@ export async function fetchLiveCalendarEventFromId(virtualId: string) {
   }
 }
 
-export async function upsertCalendarEventSnapshot(args: {
-  account: CalendarAccountForEvents;
-  event: CalendarEvent;
-}) {
-  const db = getDb();
+export async function upsertCalendarEventSnapshot(
+  args: {
+    account: CalendarAccountForEvents;
+    event: CalendarEvent;
+  },
+  database: any = getDb(),
+) {
+  const db = database;
   const startIso = eventStartIso(args.event);
   const endIso = eventEndIso(args.event);
   if (!args.event.id || !startIso || !endIso) {
@@ -397,120 +421,134 @@ export async function materializeCalendarMeetingFromVirtualId(
   const live = await fetchLiveCalendarEventFromId(virtualId);
   if (!live) return null;
   const db = getDb();
-  const snapshot = await upsertCalendarEventSnapshot(live);
-
-  if (snapshot.meetingId) {
-    const [existingMeeting] = await db
-      .select()
-      .from(schema.meetings)
-      .where(eq(schema.meetings.id, snapshot.meetingId))
-      .limit(1);
-    if (existingMeeting) return { meeting: existingMeeting, created: false };
-  }
-
   const ownerEmail = getCurrentOwnerEmail();
   const orgId = (await getActiveOrganizationId().catch(() => null)) ?? null;
   const joinUrl = pickJoinUrl(live.event);
   const meetingId = nanoid();
   const nowIso = new Date().toISOString();
 
-  // Claim the calendar_events row atomically before inserting the meeting
-  // row, so two concurrent materialize calls for the same event can't both
-  // insert a `meetings` row (check-then-act TOCTOU). Only the caller whose
-  // UPDATE actually matched a row (meetingId still NULL) proceeds to insert;
-  // the loser re-reads and returns the winner's meeting instead.
-  const claimed = await db
-    .update(schema.calendarEvents)
-    .set({ meetingId, updatedAt: nowIso })
-    .where(
-      and(
-        eq(schema.calendarEvents.id, snapshot.id),
-        isNull(schema.calendarEvents.meetingId),
-      ),
+  return db.transaction(async (tx: any) => {
+    // Disconnect takes this same account-row write lock before it snapshots
+    // and deletes events. If disconnect wins, the account is gone by the time
+    // this transaction reaches the lock and materialization becomes a no-op.
+    if (
+      !(await lockCalendarAccount(tx, live.account.id, live.account.ownerEmail))
     )
-    .returning({ id: schema.calendarEvents.id });
-
-  if (!claimed.length) {
-    // Someone else claimed it first — re-read and return their meeting.
-    const [winnerEvent] = await db
-      .select({ meetingId: schema.calendarEvents.meetingId })
-      .from(schema.calendarEvents)
-      .where(eq(schema.calendarEvents.id, snapshot.id))
-      .limit(1);
-    if (winnerEvent?.meetingId) {
-      const [winnerMeeting] = await db
+      return null;
+
+    const snapshot = await upsertCalendarEventSnapshot(live, tx);
+
+    if (snapshot.meetingId) {
+      const [existingMeeting] = await tx
         .select()
         .from(schema.meetings)
-        .where(eq(schema.meetings.id, winnerEvent.meetingId))
+        .where(eq(schema.meetings.id, snapshot.meetingId))
         .limit(1);
-      if (winnerMeeting) return { meeting: winnerMeeting, created: false };
+      if (existingMeeting) {
+        return { meeting: existingMeeting, created: false };
+      }
     }
-    return null;
-  }
 
-  try {
-    await db.insert(schema.meetings).values({
-      id: meetingId,
-      organizationId: orgId ?? live.account.orgId ?? null,
-      title: live.event.summary || "Untitled meeting",
-      scheduledStart: eventStartIso(live.event),
-      scheduledEnd: eventEndIso(live.event),
-      actualStart: null,
-      actualEnd: null,
-      platform: detectPlatform(joinUrl),
-      joinUrl: joinUrl ?? null,
-      calendarEventId: snapshot.id,
-      recordingId: null,
-      transcriptStatus: "idle",
-      summaryMd: "",
-      bulletsJson: "[]",
-      actionItemsJson: "[]",
-      source: "calendar",
-      reminderFiredAt: null,
-      createdAt: nowIso,
-      updatedAt: nowIso,
-      ownerEmail,
-      orgId,
-      visibility: "private",
-    } as any);
-
-    const participants = calendarEventParticipants(live.event).filter(
-      (p) => p.email,
-    );
-    if (participants.length) {
-      await db.insert(schema.meetingParticipants).values(
-        participants.map((p) => ({
-          id: nanoid(),
-          meetingId,
-          email: p.email,
-          name: p.name ?? null,
-          isOrganizer: !!p.isOrganizer,
-          attendedAt: null,
-          createdAt: nowIso,
-        })) as any,
-      );
-    }
-  } catch (err) {
-    // Roll back the claim so a future call can retry — but only if it still
-    // points at our own meetingId (don't clobber a legitimate later claim).
-    await db
+    // Claim the calendar_events row atomically before inserting the meeting
+    // row, so two concurrent materialize calls for the same event can't both
+    // insert a `meetings` row (check-then-act TOCTOU). Only the caller whose
+    // UPDATE actually matched a row (meetingId still NULL) proceeds to insert;
+    // the loser re-reads and returns the winner's meeting instead.
+    const claimed = await tx
       .update(schema.calendarEvents)
-      .set({ meetingId: null, updatedAt: new Date().toISOString() })
+      .set({ meetingId, updatedAt: nowIso })
       .where(
         and(
           eq(schema.calendarEvents.id, snapshot.id),
-          eq(schema.calendarEvents.meetingId, meetingId),
+          isNull(schema.calendarEvents.meetingId),
         ),
       )
-      .catch(() => {});
-    throw err;
-  }
+      .returning({ id: schema.calendarEvents.id });
+
+    if (!claimed.length) {
+      // Someone else claimed it first — re-read and return the winner.
+      const [winnerEvent] = await tx
+        .select({ meetingId: schema.calendarEvents.meetingId })
+        .from(schema.calendarEvents)
+        .where(eq(schema.calendarEvents.id, snapshot.id))
+        .limit(1);
+      if (winnerEvent?.meetingId) {
+        const [winnerMeeting] = await tx
+          .select()
+          .from(schema.meetings)
+          .where(eq(schema.meetings.id, winnerEvent.meetingId))
+          .limit(1);
+        if (winnerMeeting) {
+          return { meeting: winnerMeeting, created: false };
+        }
+      }
+      return null;
+    }
 
-  const [meeting] = await db
-    .select()
-    .from(schema.meetings)
-    .where(eq(schema.meetings.id, meetingId))
-    .limit(1);
+    try {
+      await tx.insert(schema.meetings).values({
+        id: meetingId,
+        organizationId: orgId ?? live.account.orgId ?? null,
+        title: live.event.summary || "Untitled meeting",
+        scheduledStart: eventStartIso(live.event),
+        scheduledEnd: eventEndIso(live.event),
+        actualStart: null,
+        actualEnd: null,
+        platform: detectPlatform(joinUrl),
+        joinUrl: joinUrl ?? null,
+        calendarEventId: snapshot.id,
+        recordingId: null,
+        transcriptStatus: "idle",
+        summaryMd: "",
+        bulletsJson: "[]",
+        actionItemsJson: "[]",
+        source: "calendar",
+        reminderFiredAt: null,
+        createdAt: nowIso,
+        updatedAt: nowIso,
+        ownerEmail,
+        orgId,
+        visibility: "private",
+      } as any);
+
+      const participants = calendarEventParticipants(live.event).filter(
+        (p) => p.email,
+      );
+      if (participants.length) {
+        await tx.insert(schema.meetingParticipants).values(
+          participants.map((p) => ({
+            id: nanoid(),
+            meetingId,
+            email: p.email,
+            name: p.name ?? null,
+            isOrganizer: !!p.isOrganizer,
+            attendedAt: null,
+            createdAt: nowIso,
+          })) as any,
+        );
+      }
+    } catch (err) {
+      // Roll back the claim so a future call can retry — but only if it still
+      // points at our own meetingId (don't clobber a legitimate later claim).
+      await tx
+        .update(schema.calendarEvents)
+        .set({ meetingId: null, updatedAt: new Date().toISOString() })
+        .where(
+          and(
+            eq(schema.calendarEvents.id, snapshot.id),
+            eq(schema.calendarEvents.meetingId, meetingId),
+          ),
+        )
+        .catch(() => {});
+      throw err;
+    }
 
-  return { meeting, created: true };
+    const [meeting] = await tx
+      .select()
+      .from(schema.meetings)
+      .where(eq(schema.meetings.id, meetingId))
+      .limit(1);
+
+    return { meeting, created: true };
+  });
 }

package/corpus/templates/clips/server/lib/recording-page-access.ts

@@ -0,0 +1,35 @@
+export type RecordingPageAccessRole = "owner" | "admin" | "editor" | "viewer";
+
+/**
+ * Match the public recording and video routes: only a finite expiry date can
+ * expire a recording, and the expiry is strict so the exact instant remains
+ * valid until time advances past it.
+ */
+export function isRecordingExpired(
+  expiresAt: string | null | undefined,
+  now = Date.now(),
+): boolean {
+  if (!expiresAt) return false;
+
+  const expires = new Date(expiresAt).getTime();
+  return Number.isFinite(expires) && expires < now;
+}
+
+/**
+ * Decide whether an authenticated request may use the editor/player route.
+ * Public visibility is intentionally a share-link concern; a direct `/r/*`
+ * request must either be the owner or have an explicit share grant.
+ * Password-protected recordings stay on the password-aware share flow for
+ * every non-owner so the authenticated action cannot mint a bypass token.
+ */
+export function canOpenDirectRecordingPage(input: {
+  role: RecordingPageAccessRole;
+  visibility: "private" | "org" | "public";
+  hasPassword: boolean;
+  hasExplicitShare: boolean;
+}): boolean {
+  if (input.role === "owner") return true;
+  if (input.hasPassword) return false;
+  if (input.visibility === "public") return input.hasExplicitShare;
+  return true;
+}

package/corpus/templates/content/app/components/editor/DescriptionField.tsx

@@ -91,7 +91,8 @@ export function DescriptionField({
   return (
     <Textarea
       aria-label={label}
-      rows={editing || draft ? 2 : 1}
+      rows={1}
+      wrap="soft"
       value={draft}
       placeholder={placeholder}
       onFocus={() => setEditing(true)}
@@ -105,6 +106,12 @@ export function DescriptionField({
         void save();
       }}
       onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+          event.preventDefault();
+          event.currentTarget.blur();
+          return;
+        }
         if (event.key === "Escape") {
           event.preventDefault();
           skipNextBlurSaveRef.current = true;
@@ -112,8 +119,9 @@ export function DescriptionField({
           event.currentTarget.blur();
         }
       }}
+      style={{ fieldSizing: "content" } as any}
       className={cn(
-        "mt-2 block w-full resize-none overflow-hidden rounded border-0 bg-transparent px-0 py-0 text-sm leading-6 text-muted-foreground outline-none placeholder:text-muted-foreground/45 hover:bg-muted/30 focus:bg-muted/30 focus:px-1 focus:outline-none focus:ring-1 focus:ring-ring",
+        "mt-2 min-h-6 w-full resize-none overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-sm leading-6 text-muted-foreground shadow-none outline-none placeholder:text-muted-foreground/45 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0",
         className,
       )}
     />

package/corpus/templates/content/changelog/2026-07-15-page-and-database-descriptions-now-use-a-clean-single-line-f.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-15
+---
+
+Page and database descriptions now start compactly and wrap naturally as they grow.

package/corpus/templates/design/app/components/design/design-canvas/external-preview.ts

@@ -110,12 +110,16 @@ export function sanitizeLocalhostSourceSnapshotHtml(html: string): string {
   );
 }
 
+// Prototypes are still sandboxed, but user-initiated print/download controls
+// need the browser permissions that make `window.print()` and download links
+// work inside an iframe. Without these tokens the browser silently ignores
+// the common "Download / Print PDF" pattern.
 const EXTERNAL_PREVIEW_IFRAME_SANDBOX =
-  "allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin";
+  "allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-same-origin";
 const EDITABLE_INLINE_IFRAME_SANDBOX =
-  "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin";
+  "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-same-origin";
 const READ_ONLY_INLINE_IFRAME_SANDBOX =
-  "allow-scripts allow-popups allow-popups-to-escape-sandbox";
+  "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals";
 
 export function getDesignCanvasIframeSandbox(args: {
   externalPreview: boolean;

package/corpus/templates/design/changelog/2026-07-15-prototype-print-and-download-buttons-now-work-in-preview.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-15
+---
+
+Prototype print and download buttons now work in preview

package/corpus/templates/slides/actions/extract-pdf.ts

@@ -11,7 +11,7 @@ export default async function (args: string[]) {
   }
 
   const buf = fs.readFileSync(pdfPath);
-  const pdf = new PDFParse(new Uint8Array(buf));
+  const pdf = new PDFParse({ data: new Uint8Array(buf) });
   const result = await pdf.getText();
   const pages = result.pages || [];
   console.log("Total pages:", pages.length);

package/corpus/templates/slides/actions/import-file.ts

@@ -214,7 +214,10 @@ export default defineAction({
       const { PDFParse } = await import("pdf-parse");
       const { convertSectionsToSlides } =
         await import("../server/handlers/import/html-converter.js");
-      const pdf = new PDFParse(new Uint8Array(fileBuffer));
+      // pdf-parse v2 expects a LoadParameters object. Passing the byte array
+      // directly uses the old v1 shape and can fail while pdf.js initializes
+      // in production (the reported DOMMatrix error).
+      const pdf = new PDFParse({ data: new Uint8Array(fileBuffer) });
       const result = await pdf.getText();
       const pages = normalizePdfPages(result);
       const textPages = pages.filter((p) => p.text.trim());

package/corpus/templates/slides/app/components/editor/ImageGenPanel.tsx

@@ -69,7 +69,7 @@ export default function ImageGenPanel({
     const contextParts: string[] = [];
 
     contextParts.push(
-      "Generate 3 image variations using our image generation action (`pnpm action generate-image`).",
+      "Generate 3 image variations by calling the registered `generate-image-api` action three times with the same prompt.",
     );
     contextParts.push(
       "The deliverables must be actual generated image assets from the action. Do not create placeholder HTML/CSS, oversized icon compositions, inline SVGs, or text-only mockups.",

package/corpus/templates/slides/app/components/editor/ImageSearchPanel.tsx

@@ -1,4 +1,4 @@
-import { appBasePath, useT } from "@agent-native/core/client";
+import { callAction, useT } from "@agent-native/core/client";
 import { IconX, IconSearch, IconLoader2 } from "@tabler/icons-react";
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -61,18 +61,15 @@ export default function ImageSearchPanel({
     setLoading(true);
     setError(null);
     try {
-      const res = await fetch(
-        `${appBasePath()}/api/image-search?q=${encodeURIComponent(query)}`,
+      const data = await callAction<SearchResult[]>(
+        "search-images",
+        { q: query.trim() },
+        { method: "GET" },
       );
-      if (!res.ok) {
-        const data = await res.json();
-        setError(data.error || "Search failed");
-        setResults([]);
-      } else {
-        setResults(await res.json());
-      }
-    } catch {
-      setError("Search failed");
+      setResults(data);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : t("raw.searchFailed"));
+      setResults([]);
     } finally {
       setLoading(false);
     }