@agent-native/core 0.92.5 → 0.92.6

package/corpus/README.md

@@ -27,5 +27,5 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 2154
-- template files: 5047
+- core files: 2155
+- template files: 5057

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @agent-native/core
 
+## 0.92.6
+
+### Patch Changes
+
+- 5f187db: Highlight run-code source snippets in chat and keep raw tool output popovers within the available viewport.
+- 5f187db: Fix duplicate in-progress chat output during reconnect handoff so streaming text and tool calls render once while the live assistant message catches up. Also stop a reconnect tool spinner from rendering a second card beside its live pending tool card when their reader-local and server-scoped ids don't match, in every reconnect/handoff window.
+- 5f187db: Focus the settings search field automatically when desktop users open settings.
+- 5f187db: Improve organization settings so invites stay above the fold and members appear in a separate table card.
+- 6a29ba0: `ssrfSafeFetch` hardening: a new `httpsOnly` option validates the URL scheme on the initial request and on every redirect hop, so HTTPS-only callers cannot be downgraded to plain HTTP by a redirect from the untrusted origin. Followed redirect responses now also have their bodies cancelled so each hop's connection is released immediately instead of being held until GC.
+- 5f187db: Remove the divider between settings tabs and their tab content.
+- 5f187db: Preserve dashboard, chart, and label names in demo mode while continuing to anonymize free-text/contact names, emails, and numbers.
+- c32c174: add preset-driven-flow to asset template docs
+
 ## 0.92.5
 
 ### Patch Changes

package/corpus/core/docs/content/template-assets.mdx

@@ -102,6 +102,145 @@ Live demo: [assets.agent-native.com](https://assets.agent-native.com).
 4. **Use the asset elsewhere.** Copy the export, embed the picker in another
    app, or let another agent call Assets over A2A.
 
+## The preset-driven workflow
+
+Assets produces its best, most repeatable results when work is split into two
+jobs that need very different skills:
+
+1. **Designing the recipe** — slow, craft-heavy, done once per use case. A
+   designer works with the agent to build a **generation preset**: the rules,
+   references, locked-in model, and a prompt template that has been QA'd until
+   it reliably produces on-brand output.
+2. **Running the recipe** — fast and repeatable. A marketer pastes a campaign
+   brief, tags the preset, and gets a finished, brand-safe asset without
+   touching model settings, aspect ratios, masks, or prompt wording.
+
+A preset is the contract between these two people. The designer encodes taste
+and technical judgment once; everyone else inherits it on every generation.
+Think of presets as the design system for AI-generated assets: a raw prompt is
+a throwaway that drifts every time it is retyped, while a preset is durable,
+shared, and carries the decisions (model, aspect ratio, text and reference
+rules, logo handling, fixed layout) that actually determine whether the output
+is usable.
+
+### Designers: build one preset per use case
+
+Create a separate preset for each repeatable format rather than one generic
+"social post" preset that tries to do everything. Specific presets give the
+model clearer rules and produce better output. Good examples:
+
+- LinkedIn ad
+- Webinar announcement
+- Event speaker card
+- Podcast guest card
+- Customer story quote card
+- Blog hero
+- Blog body diagram
+
+The primary way to build one is **conversationally**: describe the use case to
+the agent and let it create the preset and fill in sensible defaults — model,
+aspect ratio and size, a first prompt template, and text/reference/logo
+policies — then refine in the same conversation ("make it darker", "tighten the
+text policy", "try a square variant"). Because that reasoning shows up directly
+in the defaults the agent picks, run this design conversation on the strongest
+available model.
+
+Each preset locks down:
+
+| Setting             | What it controls                                                                                                     |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| Prompt template     | The QA'd creative recipe, with slots for the campaign brief                                                          |
+| Model               | The right image engine for this job (see below)                                                                      |
+| Aspect ratio + size | Output format for the target channel                                                                                 |
+| Text policy         | Whether and how literal copy is rendered vs suppressed                                                               |
+| Reference policy    | Which brand references anchor the look                                                                               |
+| Reference board     | Named fixed or per-run visual references, such as a usual host, guest speaker, product, backdrop, or composition cue |
+| Logo                | Composites the library's canonical logo pixel-perfect after generation, so the model never redraws it                |
+| Skeleton / mask     | A fixed brand plate the subject is composited or inpainted into, for locked layouts                                  |
+
+### Choosing the model per preset
+
+Pick the model in the preset so downstream users never have to:
+
+- **A general high-quality image model** for hero images, rich scenes, and
+  complex compositions, when you need broad aspect-ratio flexibility.
+- **A fast image model** for high-volume social where turnaround matters more
+  than maximum polish.
+- **gpt-image-2** for customer-facing, text-heavy, and identity-sensitive work.
+  It renders crisp literal copy inside the image, and it is the engine used for
+  **mask inpainting** into a fixed layout.
+- **gpt-image-1** for transparent **cutout** subjects that are composited onto a
+  brand plate afterward.
+
+When a use case has a **fixed brand frame** that must survive every generation
+(a webinar template with a locked header and logo, an ad plate with a reserved
+product area), build a preset skeleton: upload the background plate, choose
+gpt-image-2, and optionally add a same-size mask. **Opaque areas are preserved,
+transparent areas are editable**, so the logo, framing, and existing copy come
+back untouched while only the art region changes. Note that gpt-image edits are
+guided semantic rewrites, not pixel-only patches, so the prompt should still
+describe the whole intended image and restate what must not change.
+
+Use the **reference board** when a preset needs annotated visual inputs that
+ride along with each run. Each board entry names one thing — a person, product,
+style, background, or composition example — and can pin up to four images plus a
+plain-language description. Fixed entries attach automatically. Variable
+entries can be replaced per run with `presetReferenceFills`, and required
+variable entries block generation until the agent supplies images from user
+attachments or the library.
+
+For example, a Webinar Announcement preset might use a skeleton plate and mask
+for the locked event chrome, a fixed "Steve" subject entry for the usual host,
+and a required variable "Guest speaker" entry for each event. Use a
+`background` entry for setting context. Use a `composition` entry for layout
+inspiration from a past poster; exact placement belongs in the skeleton plate,
+not a reference image.
+
+### QA the prompt until it is reliable
+
+The model, references, and skeleton set the stage, but the prompt template is
+what turns a brief into a consistently good asset. Have the agent generate
+several candidates against realistic briefs and tighten the template until it
+holds. Techniques worth baking in:
+
+- **Structure the prompt in a fixed order**: scene, subject, key details,
+  constraints. Name the intended use so the model picks the right polish level.
+- **For literal copy, be surgical**: put exact text in quotes or ALL CAPS,
+  specify font, size, color, and placement, and for tricky brand names spell
+  them out. Ask for the text exactly once with no extra characters.
+- **For skeleton or inpainting presets, restate the invariants every run**:
+  "change only the center region, preserve the header, logo, and framing."
+
+Before handing a preset to the wider team, run realistic QA generations
+(including briefs you did not write) and confirm it: follows the use case,
+respects the mask, preserves fixed text and logos, avoids inventing extra
+headlines or badges, uses references correctly, places the subject in the right
+region, handles short and long briefs, and still holds up after a refinement.
+
+### Everyone else: paste the brief, tag the preset, generate
+
+Once a preset exists, running it is three moves: paste the campaign brief, tag
+the preset with `@`, and generate. The tagged preset injects its full aesthetic
+brief into the agent, and the saved model, format, tier, logo, and skeleton all
+apply automatically.
+
+```text
+Create a LinkedIn ad for our webinar on AI landing pages.
+Audience: B2B marketing teams.
+Message: launch campaign pages faster while staying on brand.
+CTA: Register now.
+
+@Webinar Announcement
+```
+
+No model picking, no aspect-ratio math, no mask files, no prompt engineering.
+Rule of thumb: designers own the preset, everyone else owns the brief. If a
+user finds themselves choosing models, masks, or layout rules during normal
+use, the preset is not specific enough yet.
+
+For deeper prompting guidance on the underlying models, see OpenAI's
+[GPT Image prompting guide](https://developers.openai.com/cookbook/examples/multimodal/image-gen-models-prompting-guide).
+
 ## Useful prompts
 
 - "Generate three blog hero options using the Acme product references."

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.92.5",
+  "version": "0.92.6",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/agent/production-agent.ts

@@ -4193,7 +4193,7 @@ export async function runAgentLoop(opts: {
         // `_agentImages` result field (stripped from the JSON the model
         // reads, even in demo mode). Demo mode drops the images themselves —
         // text redaction can't scrub pixels, and a screenshot would leak the
-        // real names/emails the redaction exists to hide. The images array
+        // real contact names/emails/numbers the redaction exists to hide. The images array
         // never touches the ledger — only the compact text notes appended
         // below are persisted.
         let imageNotes: string[] = [];
@@ -4664,7 +4664,40 @@ export function backgroundContinuationReasonForRun(
 }
 
 export async function runAgentLoopWithMainChatInternalContinuations(
-  opts: Parameters<typeof runAgentLoop>[0],
+  opts: Parameters<typeof runAgentLoop>[0] & {
+    /**
+     * Opt-in: also catch a thrown `isResumableEngineError` (gateway drop /
+     * transport interruption surviving engine retries) and retry it in-process
+     * — the same "continue from where you left off" treatment already applied
+     * to in-loop `auto_continue` events below — instead of letting it
+     * propagate out to the caller. Default false/omitted preserves the exact
+     * prior behavior: such an error is NOT caught here and propagates to
+     * `startRun`'s outer catch, which marks the run "errored" and (for a
+     * background worker) hands off to `chainServerDrivenContinuation` for a
+     * fresh invocation.
+     *
+     * Only safe to enable when the CALLER is a proven durable-background
+     * worker (`isInBackgroundFunctionRuntime()`): such a worker has minutes of
+     * remaining budget on this same invocation, so resuming in-process avoids
+     * a self-dispatch entirely — critically, it avoids the bg-function
+     * self-dispatch 404 (a background function cannot invoke its own public
+     * URL from inside a live invocation) that this same recoverable-error
+     * path would otherwise hit via `chainServerDrivenContinuation`. A
+     * foreground turn (~40s budget) must NOT set this — it keeps depending on
+     * the existing cross-invocation recovery (foreground self-chain or the
+     * client's `auto_continue` re-POST), unchanged.
+     */
+    resumeResumableErrorsInProcess?: boolean;
+    /**
+     * Override for the per-invocation continuation attempt cap. Defaults to
+     * `MAIN_CHAT_INTERNAL_CONTINUATION_LIMIT` (6) when omitted — unchanged for
+     * every existing caller. A proven background-function worker (15-min
+     * budget) can pass a higher cap (e.g. `MAX_BACKGROUND_RUN_CONTINUATIONS`)
+     * so a run that needs several resumable-error recoveries within one
+     * 13-minute chunk isn't cut off at the foreground-sized limit.
+     */
+    maxContinuations?: number;
+  },
 ): Promise<Awaited<ReturnType<typeof runAgentLoop>>> {
   const usage: Awaited<ReturnType<typeof runAgentLoop>> = {
     inputTokens: 0,
@@ -4681,11 +4714,18 @@ export async function runAgentLoopWithMainChatInternalContinuations(
     usage.model = next.model;
   };
 
+  const resumeResumableErrorsInProcess =
+    opts.resumeResumableErrorsInProcess === true;
+  const maxContinuations =
+    typeof opts.maxContinuations === "number" && opts.maxContinuations > 0
+      ? opts.maxContinuations
+      : MAIN_CHAT_INTERNAL_CONTINUATION_LIMIT;
+
   const localTurnEvents: AgentChatEvent[] = [];
   let lastAttemptWasUnfinishedContinuation = false;
   for (
     let attempt = 0;
-    !opts.signal.aborted && attempt < MAIN_CHAT_INTERNAL_CONTINUATION_LIMIT;
+    !opts.signal.aborted && attempt < maxContinuations;
     attempt++
   ) {
     lastAttemptWasUnfinishedContinuation = false;
@@ -4703,8 +4743,23 @@ export async function runAgentLoopWithMainChatInternalContinuations(
       opts.send(event);
     };
 
-    const nextUsage = await runAgentLoop({ ...opts, send });
-    addUsage(nextUsage);
+    try {
+      const nextUsage = await runAgentLoop({ ...opts, send });
+      addUsage(nextUsage);
+    } catch (err) {
+      // Preserve exact prior behavior unless explicitly opted in: an aborted
+      // signal (real soft-timeout / user stop) or a non-resumable error is
+      // always rethrown, and when `resumeResumableErrorsInProcess` is not
+      // set, EVERY thrown error is rethrown exactly as before.
+      if (
+        !resumeResumableErrorsInProcess ||
+        opts.signal.aborted ||
+        !isResumableEngineError(err)
+      ) {
+        throw err;
+      }
+      continuationReason = continuationReasonForResumableError(err);
+    }
 
     if (!continuationReason || opts.signal.aborted) {
       return usage;
@@ -6525,10 +6580,25 @@ export function createProductionAgentHandler(
                   // chaining via the regular function — the Netlify
                   // `-background` function is only emitted into the deploy
                   // output when the durable flag is on.
+                  //
+                  // `&& !runsInBackgroundFunction`: a worker PROVEN to already
+                  // be executing inside the real `-background` function must
+                  // never dispatch back to that same function's own URL — a
+                  // background function invoking itself by URL from inside a
+                  // live invocation is a documented Netlify platform
+                  // limitation (404), unlike the initial foreground→background
+                  // dispatch or a worker that landed on the regular function
+                  // (a genuinely different function calling the background
+                  // one, which works). This only changes the dispatch TARGET
+                  // for that one proven-in-bg-function case — by this point
+                  // (with the in-process resumable-error resume above) it is
+                  // reached only when the chunk genuinely exhausted its
+                  // budget, so falling back to the regular `_process-run`
+                  // function (40s clamp) here is the correct, safe target.
                   chainViaDurableBackground:
                     isAgentChatDurableBackgroundEnabled({
                       appOptIn: options.durableBackgroundRuns === true,
-                    }),
+                    }) && !runsInBackgroundFunction,
                 });
               }
             } finally {
@@ -6946,6 +7016,26 @@ export function createProductionAgentHandler(
                   .slice(0, 200),
               }
             : {}),
+          // A worker PROVEN to be running inside the real 15-min Netlify
+          // `-background` function (`runsInBackgroundFunction`) has minutes of
+          // budget left on THIS invocation. Let it catch a recoverable
+          // transport/gateway error (isResumableEngineError) and resume the
+          // agent loop in-process instead of unwinding out to `startRun`'s
+          // outer catch, which would otherwise hand off to
+          // `chainServerDrivenContinuation` — and for a worker already inside
+          // the background function, that hand-off is a same-function
+          // self-dispatch that 404s on Netlify (a background function cannot
+          // invoke its own public URL from inside a live invocation). A
+          // foreground turn or a worker that landed on the regular ~60s
+          // function (runsInBackgroundFunction false) must NOT set this — it
+          // keeps depending on the existing cross-invocation recovery
+          // (foreground self-chain / client auto_continue re-POST), unchanged.
+          ...(runsInBackgroundFunction
+            ? {
+                resumeResumableErrorsInProcess: true,
+                maxContinuations: MAX_BACKGROUND_RUN_CONTINUATIONS,
+              }
+            : {}),
         };
 
         send({ type: "activity", label: "Contacting model" });

package/corpus/core/src/client/AssistantChat.tsx

@@ -674,9 +674,34 @@ function toolCallFingerprintFromContentPart(part: unknown): string | null {
   return `${name}\u0000${argsText}`;
 }
 
+function toolCallNameFromContentPart(part: unknown): string | null {
+  if (!part || typeof part !== "object") return null;
+  const candidate = part as { type?: unknown; toolName?: unknown };
+  if (candidate.type !== "tool-call") return null;
+  return typeof candidate.toolName === "string" && candidate.toolName
+    ? candidate.toolName
+    : null;
+}
+
+function toolCallIdsRepresentSameLocalCall(
+  renderedId: string,
+  reconnectId: string,
+): boolean {
+  return renderedId === reconnectId || renderedId.endsWith(`:${reconnectId}`);
+}
+
 function collectRenderedToolCallStates(messages: readonly unknown[]): {
   byId: Map<string, { rank: number }>;
   latestAssistantByFingerprint: Map<string, { rank: number }>;
+  latestAssistantByName: Map<
+    string,
+    {
+      rank: number;
+      ids: Set<string>;
+      pendingIds: Set<string>;
+      pendingRank: number;
+    }
+  >;
 } {
   const byId = new Map<string, { rank: number }>();
   for (const message of messages) {
@@ -695,22 +720,50 @@ function collectRenderedToolCallStates(messages: readonly unknown[]): {
   }
 
   const latestAssistantByFingerprint = new Map<string, { rank: number }>();
+  const latestAssistantByName = new Map<
+    string,
+    {
+      rank: number;
+      ids: Set<string>;
+      pendingIds: Set<string>;
+      pendingRank: number;
+    }
+  >();
   const latestEntry = messages.at(-1);
   const latestMessage = getRepoMessage(latestEntry as any);
   const latestContent = latestMessage?.content;
   if (latestMessage?.role === "assistant" && Array.isArray(latestContent)) {
     for (const part of latestContent) {
-      const fingerprint = toolCallFingerprintFromContentPart(part);
-      if (!fingerprint) continue;
       const rank = toolCallProgressRank(part);
-      const existing = latestAssistantByFingerprint.get(fingerprint);
-      latestAssistantByFingerprint.set(fingerprint, {
-        rank: Math.max(existing?.rank ?? 0, rank),
-      });
+      const fingerprint = toolCallFingerprintFromContentPart(part);
+      if (fingerprint) {
+        const existing = latestAssistantByFingerprint.get(fingerprint);
+        latestAssistantByFingerprint.set(fingerprint, {
+          rank: Math.max(existing?.rank ?? 0, rank),
+        });
+      }
+      const name = toolCallNameFromContentPart(part);
+      if (name) {
+        const existing = latestAssistantByName.get(name);
+        const id = toolCallIdFromContentPart(part);
+        const ids = new Set(existing?.ids);
+        const pendingIds = new Set(existing?.pendingIds);
+        if (id) ids.add(id);
+        if (id && rank < 4) pendingIds.add(id);
+        latestAssistantByName.set(name, {
+          rank: Math.max(existing?.rank ?? 0, rank),
+          ids,
+          pendingIds,
+          pendingRank:
+            rank < 4
+              ? Math.max(existing?.pendingRank ?? 0, rank)
+              : (existing?.pendingRank ?? 0),
+        });
+      }
     }
   }
 
-  return { byId, latestAssistantByFingerprint };
+  return { byId, latestAssistantByFingerprint, latestAssistantByName };
 }
 
 function assistantTextFromContent(content: unknown): string {
@@ -798,29 +851,37 @@ function trimReconnectTextAlreadyRendered(
 export function dedupeReconnectContentAgainstMessages(
   content: ContentPart[],
   messages: readonly unknown[],
+  options?: { suppressToolRepeats?: boolean },
 ): ContentPart[] {
   if (content.length === 0) return content;
   const snapshotDeduped = dedupePendingToolCallReplaysWithinContent(content);
   let changed = snapshotDeduped !== content;
   if (messages.length === 0) return changed ? snapshotDeduped : content;
-  const { byId, latestAssistantByFingerprint } =
+  const { byId, latestAssistantByFingerprint, latestAssistantByName } =
     collectRenderedToolCallStates(messages);
   const renderedAssistantText = latestRenderedAssistantText(messages);
   if (
     byId.size === 0 &&
     latestAssistantByFingerprint.size === 0 &&
+    latestAssistantByName.size === 0 &&
     !renderedAssistantText
   ) {
     return changed ? snapshotDeduped : content;
   }
 
   const filtered =
-    byId.size > 0 || latestAssistantByFingerprint.size > 0
+    byId.size > 0 ||
+    latestAssistantByFingerprint.size > 0 ||
+    latestAssistantByName.size > 0
       ? snapshotDeduped.filter((part) => {
           const reconnectRank = toolCallProgressRank(part);
           const id = toolCallIdFromContentPart(part);
           const existing = id ? byId.get(id) : undefined;
           if (existing) {
+            if (options?.suppressToolRepeats) {
+              changed = true;
+              return false;
+            }
             // Keep reconnect copies that are strictly ahead of the rendered
             // message (e.g. completed overlay vs lagging pending thread data).
             // Same-or-behind ranks are duplicates and should stay hidden.
@@ -842,14 +903,60 @@ export function dedupeReconnectContentAgainstMessages(
             : undefined;
           const isCompletedRepeat =
             reconnectRank >= 4 && latestByFingerprint?.rank === 4;
+          const keepCompletedRepeat =
+            isCompletedRepeat && !options?.suppressToolRepeats;
+          if (latestByFingerprint && options?.suppressToolRepeats) {
+            changed = true;
+            return false;
+          }
           if (
             latestByFingerprint &&
-            !isCompletedRepeat &&
+            !keepCompletedRepeat &&
             reconnectRank <= latestByFingerprint.rank
           ) {
             changed = true;
             return false;
           }
+          // Activity / arg-less fallback. A reconnect spinner (activity===true)
+          // or a pending tool whose args have not materialized yet has no
+          // fingerprint, and its reader-local id (`tc_N`) never matches the
+          // server-scoped id (`${runId}:tc_N`) rendered in the message, so it
+          // slips past BOTH checks above and paints a second card beside the
+          // live one ("one spinning, one static"). Suppress it only when the
+          // latest assistant message renders the same tool that is ITSELF still
+          // pending (rank < 4) at an equal-or-greater rank: a spinner alongside
+          // a live pending card is the same in-flight call seen by two readers.
+          // If the rendered same-name tool is already completed, a fresh spinner
+          // is more likely a genuinely repeated call, so it must stay visible
+          // (an empty-args fingerprint would over-match — see the completed
+          // repeat cases below).
+          if (!fingerprint) {
+            const name = toolCallNameFromContentPart(part);
+            const latestByName = name
+              ? latestAssistantByName.get(name)
+              : undefined;
+            const matchesRenderedLocalId =
+              id && latestByName
+                ? Array.from(latestByName.ids).some((renderedId) =>
+                    toolCallIdsRepresentSameLocalCall(renderedId, id),
+                  )
+                : false;
+            const matchesRenderedPendingLocalId =
+              id && latestByName
+                ? Array.from(latestByName.pendingIds).some((renderedId) =>
+                    toolCallIdsRepresentSameLocalCall(renderedId, id),
+                  )
+                : false;
+            if (
+              latestByName &&
+              matchesRenderedLocalId &&
+              matchesRenderedPendingLocalId &&
+              reconnectRank <= latestByName.pendingRank
+            ) {
+              changed = true;
+              return false;
+            }
+          }
           return true;
         })
       : snapshotDeduped;
@@ -3328,8 +3435,9 @@ const AssistantChatInner = forwardRef<
       return;
     }
     const stillNeeded =
-      dedupeReconnectContentAgainstMessages(reconnectContent, messages).length >
-      0;
+      dedupeReconnectContentAgainstMessages(reconnectContent, messages, {
+        suppressToolRepeats: true,
+      }).length > 0;
     if (!stillNeeded) {
       setReconnectContent([]);
       setAdapterHandoffPending(false);
@@ -3888,9 +3996,13 @@ const AssistantChatInner = forwardRef<
     ],
   );
 
-  const visibleReconnectContent = useMemo(
-    () => dedupeReconnectContentAgainstMessages(reconnectContent, messages),
-    [messages, reconnectContent],
+  // Do not memoize this on `messages` identity. assistant-ui can update the
+  // live assistant message content in place while streaming, and the reconnect
+  // overlay must hide as soon as that live message has caught up.
+  const visibleReconnectContent = dedupeReconnectContentAgainstMessages(
+    reconnectContent,
+    messages,
+    { suppressToolRepeats: adapterHandoffPending },
   );
   const chatScrollResetKey = `${tabId ?? ""}:${threadId ?? ""}`;
 

package/corpus/core/src/client/chat/tool-call-display.tsx

@@ -157,6 +157,12 @@ function inferToolTextLanguage(
 ): string {
   const keyName = (key ?? "").toLowerCase();
   const tool = (toolName ?? "").toLowerCase();
+  if (
+    keyName === "code" &&
+    (tool.includes("run-code") || tool.includes("run_code"))
+  ) {
+    return "javascript";
+  }
   if (
     keyName === "sql" ||
     keyName.endsWith("sql") ||
@@ -352,7 +358,7 @@ function ToolOutputPopover({
         side="bottom"
         sideOffset={6}
         collisionPadding={12}
-        className="flex w-[min(calc(100vw-2rem),760px)] flex-col gap-0 overflow-hidden p-0"
+        className="flex max-h-[min(calc(100vh-2rem),var(--radix-popover-content-available-height,75vh))] w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,760px),760px)] flex-col gap-0 overflow-hidden p-0"
       >
         <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
           <div className="truncate text-sm font-medium">{title}</div>
@@ -365,11 +371,11 @@ function ToolOutputPopover({
             {copied ? "Copied" : "Copy"}
           </button>
         </div>
-        <div className="p-3">
+        <div className="min-h-0 flex-1 overflow-hidden p-3">
           <SimpleCodeViewer
             text={payload.text}
             lang={payload.lang}
-            maxHeightClass="max-h-[75vh]"
+            maxHeightClass="max-h-[min(70vh,calc(var(--radix-popover-content-available-height,75vh)-4.5rem))]"
           />
         </div>
       </PopoverContent>