@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/analytics/server/lib/dashboard-panel-query.ts

@@ -1,5 +1,6 @@
 import type { CredentialContext } from "@agent-native/core/credentials";
 import { resolveCredential } from "@agent-native/core/credentials";
+import { runDataProgram } from "@agent-native/core/data-programs";
 import type { MissingKeyResponse } from "@agent-native/core/server";
 
 import { getUserSegmentation, queryEvents } from "./amplitude";
@@ -19,13 +20,17 @@ export const DASHBOARD_PANEL_SOURCES = [
   "first-party",
   "demo",
   "prometheus",
+  "program",
 ] as const;
 
 export type DashboardPanelSource = (typeof DASHBOARD_PANEL_SOURCES)[number];
 
+const ANALYTICS_DATA_PROGRAM_APP_ID = "analytics";
+
 export interface DashboardPanelQueryResult {
   rows: Record<string, unknown>[];
   schema: { name: string; type: string }[];
+  truncated?: boolean;
 }
 
 export function isDashboardPanelSource(
@@ -37,14 +42,62 @@ export function isDashboardPanelSource(
   );
 }
 
+/**
+ * program panels carry a JSON blob in `sql` describing which stored data
+ * program to run and with what params. Shape:
+ * { programId: string; params?: Record<string, unknown> }.
+ */
+export function serializeProgramDescriptorInput(raw: unknown): string {
+  if (typeof raw === "string") return raw;
+  if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+    const obj = raw as Record<string, unknown>;
+    if (typeof obj.programId !== "string" || !obj.programId.trim()) {
+      throw new Error("program panel descriptor requires a 'programId' field");
+    }
+    return JSON.stringify(raw);
+  }
+  throw new Error(
+    "program panel sql must be a JSON string or object with 'programId'",
+  );
+}
+
+export interface ProgramDescriptor {
+  programId: string;
+  params?: Record<string, unknown>;
+}
+
+function parseProgramDescriptor(raw: string): ProgramDescriptor {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err: any) {
+    throw new Error(
+      `program panel sql must be a JSON object: ${err?.message ?? err}`,
+    );
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("program panel sql must be a JSON object");
+  }
+  const obj = parsed as Record<string, unknown>;
+  if (typeof obj.programId !== "string" || !obj.programId.trim()) {
+    throw new Error("program panel descriptor requires a 'programId' field");
+  }
+  const params =
+    obj.params && typeof obj.params === "object" && !Array.isArray(obj.params)
+      ? (obj.params as Record<string, unknown>)
+      : undefined;
+  return { programId: obj.programId, params };
+}
+
 export function normalizeDashboardPanelQuery(
   source: DashboardPanelSource,
   rawQuery: unknown,
 ): string {
-  if (source === "prometheus" || source === "demo") {
+  if (source === "prometheus" || source === "demo" || source === "program") {
     if (rawQuery === undefined || rawQuery === null || rawQuery === "") {
       throw new Error("Missing or invalid query");
     }
+    if (source === "program") return serializeProgramDescriptorInput(rawQuery);
     return source === "demo"
       ? serializeDemoDescriptorInput(rawQuery)
       : serializePanelDescriptorInput(rawQuery);
@@ -291,6 +344,57 @@ function flattenAmplitudeResponse(
   };
 }
 
+/**
+ * program panels run a stored data program server-side through the shared
+ * data-programs runtime, with the acting VIEWER's credentials (never the
+ * program author's) — the security-load-bearing choice for shared
+ * dashboards. Errors carry a structured `code: message` shape so the
+ * existing panel error card surfaces something actionable, and a stale
+ * `lastGoodRun` is preferred over a broken panel whenever one exists.
+ */
+async function runProgramPanel(
+  raw: string,
+  ctx: CredentialContext,
+): Promise<DashboardPanelQueryResult> {
+  const descriptor = parseProgramDescriptor(raw);
+  const result = await runDataProgram({
+    programId: descriptor.programId,
+    appId: ANALYTICS_DATA_PROGRAM_APP_ID,
+    params: descriptor.params,
+    ctx: { userEmail: ctx.userEmail, orgId: ctx.orgId ?? null },
+    triggeredBy: "panel_view",
+  });
+
+  if (result.ok) {
+    return {
+      rows: result.rows,
+      schema: result.schema,
+      truncated: result.truncated,
+    };
+  }
+
+  if (result.lastGoodRun) {
+    return {
+      rows: result.lastGoodRun.rows,
+      schema: result.lastGoodRun.schema,
+      truncated: result.lastGoodRun.truncated,
+    };
+  }
+
+  const friendlyMessages: Partial<Record<string, string>> = {
+    access_denied: "You don't have access to this data program",
+    archived: "This data program was archived",
+    background_pending:
+      "This data program is still computing — check back shortly",
+  };
+  const friendly = friendlyMessages[result.error.code];
+  throw new Error(
+    friendly
+      ? `${result.error.code}: ${friendly}`
+      : `${result.error.code}: ${result.error.message}`,
+  );
+}
+
 export async function runDashboardPanelQuery(args: {
   source: DashboardPanelSource;
   query: string;
@@ -361,5 +465,9 @@ export async function runDashboardPanelQuery(args: {
     return await runPrometheusPanel(query);
   }
 
+  if (source === "program") {
+    return await runProgramPanel(query, ctx);
+  }
+
   throw new Error("Unsupported source");
 }

package/corpus/templates/analytics/server/routes/[...page].get.ts

@@ -1,4 +1,9 @@
+import { AGENT_ACCESS_PARAM } from "@agent-native/core/server";
 import { createH3SSRHandler } from "@agent-native/core/server/ssr-handler";
+import {
+  buildAgentReadableResourceDiscovery,
+  renderAgentReadableResourceDiscoveryScript,
+} from "@agent-native/core/shared";
 import {
   defineEventHandler,
   getQuery,
@@ -6,6 +11,10 @@ import {
   setResponseHeader,
 } from "h3";
 
+import {
+  ANALYTICS_ANALYSIS_AGENT_CONTEXT_ENDPOINT,
+  ANALYTICS_DASHBOARD_AGENT_CONTEXT_ENDPOINT,
+} from "../../shared/resource-agent-access.js";
 import {
   buildSessionReplayAgentContext,
   safeJsonForHtml,
@@ -43,36 +52,92 @@ function sessionRecordingIdFromPath(pathname: string): string | null {
   }
 }
 
+function analyticsResourceFromPath(
+  pathname: string,
+): { type: "dashboard" | "analysis"; id: string } | null {
+  const stripped = stripAppBasePath(pathname);
+  const dashboard = stripped.match(/^\/dashboards\/([^/]+)\/?$/);
+  const analysis = stripped.match(/^\/analyses\/([^/]+)\/?$/);
+  const type = dashboard ? "dashboard" : analysis ? "analysis" : null;
+  const rawId = dashboard?.[1] ?? analysis?.[1];
+  if (!type || !rawId) return null;
+  try {
+    return { type, id: decodeURIComponent(rawId) };
+  } catch {
+    return { type, id: rawId };
+  }
+}
+
 function queryString(value: unknown): string {
   if (typeof value === "string") return value;
   if (Array.isArray(value) && typeof value[0] === "string") return value[0];
   return "";
 }
 
-async function buildAgentDiscoveryScript(event: any): Promise<string | null> {
+interface AgentDiscoveryInjection {
+  script: string;
+  privateResponse: boolean;
+}
+
+async function buildAgentDiscoveryScript(
+  event: any,
+): Promise<AgentDiscoveryInjection | null> {
   const requestUrl = getRequestURL(event);
   const recordingId = sessionRecordingIdFromPath(requestUrl.pathname);
-  if (!recordingId) return null;
-
   const query = getQuery(event);
-  const token = queryString(query[SESSION_REPLAY_AGENT_ACCESS_PARAM]);
-  if (!token) return null;
-
-  const context = await buildSessionReplayAgentContext({
-    recordingId,
-    token,
-    origin: requestUrl.origin,
-    includeTimeline: false,
-  }).catch(() => null);
-  if (!context) return null;
-
-  return `<script type="application/agent-native+json" id="analytics-session-replay-agent-context">${safeJsonForHtml(
-    context,
-  )}</script>`;
+  if (recordingId) {
+    const token = queryString(query[SESSION_REPLAY_AGENT_ACCESS_PARAM]);
+    if (!token) return null;
+
+    const context = await buildSessionReplayAgentContext({
+      recordingId,
+      token,
+      origin: requestUrl.origin,
+      includeTimeline: false,
+    }).catch(() => null);
+    if (!context) return null;
+
+    return {
+      script: `<script type="application/agent-native+json" id="analytics-session-replay-agent-context">${safeJsonForHtml(
+        context,
+      )}</script>`,
+      privateResponse: true,
+    };
+  }
+
+  const resource = analyticsResourceFromPath(requestUrl.pathname);
+  if (!resource) return null;
+
+  const token = queryString(query[AGENT_ACCESS_PARAM]);
+  const isDashboard = resource.type === "dashboard";
+  return {
+    script: renderAgentReadableResourceDiscoveryScript(
+      buildAgentReadableResourceDiscovery({
+        resourceType: isDashboard ? "dashboard" : "analysis",
+        resourceId: resource.id,
+        path: `/${isDashboard ? "dashboards" : "analyses"}/${encodeURIComponent(resource.id)}`,
+        contextEndpoint: isDashboard
+          ? ANALYTICS_DASHBOARD_AGENT_CONTEXT_ENDPOINT
+          : ANALYTICS_ANALYSIS_AGENT_CONTEXT_ENDPOINT,
+        origin: requestUrl.origin,
+        basePath: configuredAppBasePath(),
+        token,
+        instructions:
+          "Use contextUrl to read this Analytics artifact as structured JSON. Token links are read-only and do not grant edit access.",
+      }),
+      {
+        id: isDashboard
+          ? "analytics-dashboard-agent-context"
+          : "analytics-analysis-agent-context",
+      },
+    ),
+    privateResponse: Boolean(token),
+  };
 }
 
 function injectAgentDiscovery(html: string, script: string): string {
-  if (html.includes('id="analytics-session-replay-agent-context"')) {
+  const scriptId = script.match(/\sid="([^"]+)"/)?.[1];
+  if (scriptId && html.includes(`id="${scriptId}"`)) {
     return html;
   }
   if (html.includes("</head>")) {
@@ -86,8 +151,8 @@ function injectAgentDiscovery(html: string, script: string): string {
 
 export default defineEventHandler(async (event) => {
   const response = (await ssrHandler(event)) as Response;
-  const script = await buildAgentDiscoveryScript(event);
-  if (!script) return response;
+  const discovery = await buildAgentDiscoveryScript(event);
+  if (!discovery) return response;
 
   const contentType = response.headers.get("content-type") ?? "";
   if (!contentType.includes("text/html")) return response;
@@ -95,12 +160,14 @@ export default defineEventHandler(async (event) => {
   const html = await response.text();
   const headers = new Headers(response.headers);
   headers.delete("content-length");
-  headers.set("Cache-Control", "private, max-age=0, no-store");
-  headers.set("Referrer-Policy", "no-referrer");
-  setResponseHeader(event, "Cache-Control", "private, max-age=0, no-store");
-  setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  if (discovery.privateResponse) {
+    headers.set("Cache-Control", "private, max-age=0, no-store");
+    headers.set("Referrer-Policy", "no-referrer");
+    setResponseHeader(event, "Cache-Control", "private, max-age=0, no-store");
+    setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  }
 
-  return new Response(injectAgentDiscovery(html, script), {
+  return new Response(injectAgentDiscovery(html, discovery.script), {
     status: response.status,
     statusText: response.statusText,
     headers,

package/corpus/templates/analytics/server/routes/api/analysis-agent-context.json.get.ts

@@ -0,0 +1,94 @@
+import {
+  AGENT_ACCESS_PARAM,
+  verifyScopedAgentAccessToken,
+} from "@agent-native/core/server";
+import { eq } from "drizzle-orm";
+import {
+  defineEventHandler,
+  getQuery,
+  setResponseHeader,
+  setResponseStatus,
+} from "h3";
+
+import { ANALYTICS_ANALYSIS_AGENT_RESOURCE_KIND } from "../../../shared/resource-agent-access.js";
+import { getDb, schema } from "../../db/index.js";
+import { buildAnalysisAgentContext } from "../../lib/agent-readable-resource-context.js";
+import type { AnalysisRecord } from "../../lib/dashboards-store.js";
+
+function queryString(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value) && typeof value[0] === "string") return value[0];
+  return "";
+}
+
+function parseJson<T>(value: unknown, fallback: T): T {
+  if (typeof value !== "string") return fallback;
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+function rowToAnalysis(row: any): AnalysisRecord {
+  return {
+    id: row.id,
+    name: row.name,
+    description: row.description,
+    question: row.question,
+    instructions: row.instructions,
+    dataSources: parseJson<string[]>(row.dataSources, []),
+    resultMarkdown: row.resultMarkdown,
+    resultData: row.resultData
+      ? parseJson<Record<string, unknown> | null>(row.resultData, null)
+      : null,
+    author: row.author ?? null,
+    ownerEmail: row.ownerEmail,
+    orgId: row.orgId ?? null,
+    visibility: row.visibility,
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+    hiddenAt: row.hiddenAt ?? null,
+    hiddenBy: row.hiddenBy ?? null,
+  };
+}
+
+export default defineEventHandler(async (event) => {
+  setResponseHeader(event, "Cache-Control", "no-store");
+  setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  setResponseHeader(event, "X-Content-Type-Options", "nosniff");
+
+  const query = getQuery(event);
+  const id = queryString(query.id);
+  if (!id) {
+    setResponseStatus(event, 400);
+    return { error: "Analysis id is required" };
+  }
+
+  const token = queryString(query[AGENT_ACCESS_PARAM]);
+  const db = getDb() as any;
+  // guard:allow-unscoped -- this endpoint returns analysis context only when the analysis is public or an analysis-scoped agent_access token verifies for this id.
+  const [row] = await db
+    .select()
+    .from(schema.analyses)
+    .where(eq(schema.analyses.id, id))
+    .limit(1);
+
+  if (!row) {
+    setResponseStatus(event, 404);
+    return { error: "Analysis not found" };
+  }
+
+  const tokenAccess = token
+    ? verifyScopedAgentAccessToken(token, {
+        resourceKind: ANALYTICS_ANALYSIS_AGENT_RESOURCE_KIND,
+        resourceId: id,
+      }).ok
+    : false;
+  if (row.visibility !== "public" && !tokenAccess) {
+    setResponseStatus(event, 403);
+    return { error: "Invalid or expired agent access token" };
+  }
+
+  return buildAnalysisAgentContext(rowToAnalysis(row));
+});

package/corpus/templates/analytics/server/routes/api/dashboard-agent-context.json.get.ts

@@ -0,0 +1,109 @@
+import {
+  AGENT_ACCESS_PARAM,
+  verifyScopedAgentAccessToken,
+} from "@agent-native/core/server";
+import { eq } from "drizzle-orm";
+import {
+  defineEventHandler,
+  getQuery,
+  setResponseHeader,
+  setResponseStatus,
+} from "h3";
+
+import { ANALYTICS_DASHBOARD_AGENT_RESOURCE_KIND } from "../../../shared/resource-agent-access.js";
+import { getDb, schema } from "../../db/index.js";
+import {
+  buildDashboardAgentContext,
+  buildDashboardSeedAgentContext,
+} from "../../lib/agent-readable-resource-context.js";
+import { loadDashboardSeed } from "../../lib/dashboard-seeds.js";
+import type { DashboardRecord } from "../../lib/dashboards-store.js";
+
+function queryString(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value) && typeof value[0] === "string") return value[0];
+  return "";
+}
+
+function parseJsonObject(value: unknown): Record<string, unknown> {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, unknown>;
+  }
+  if (typeof value !== "string") return {};
+  try {
+    const parsed = JSON.parse(value);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : {};
+  } catch {
+    return {};
+  }
+}
+
+function rowToDashboard(row: any): DashboardRecord {
+  return {
+    id: row.id,
+    kind: row.kind,
+    title: row.title,
+    config: parseJsonObject(row.config),
+    ownerEmail: row.ownerEmail,
+    orgId: row.orgId ?? null,
+    visibility: row.visibility,
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+    archivedAt: row.archivedAt ?? null,
+    hiddenAt: row.hiddenAt ?? null,
+    hiddenBy: row.hiddenBy ?? null,
+  };
+}
+
+export default defineEventHandler(async (event) => {
+  setResponseHeader(event, "Cache-Control", "no-store");
+  setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  setResponseHeader(event, "X-Content-Type-Options", "nosniff");
+
+  const query = getQuery(event);
+  const id = queryString(query.id);
+  if (!id) {
+    setResponseStatus(event, 400);
+    return { error: "Dashboard id is required" };
+  }
+
+  const token = queryString(query[AGENT_ACCESS_PARAM]);
+  const tokenAccess = token
+    ? verifyScopedAgentAccessToken(token, {
+        resourceKind: ANALYTICS_DASHBOARD_AGENT_RESOURCE_KIND,
+        resourceId: id,
+      }).ok
+    : false;
+  const db = getDb() as any;
+  // guard:allow-unscoped -- this endpoint returns dashboard context only when the dashboard is public or a dashboard-scoped agent_access token verifies for this id.
+  const [row] = await db
+    .select()
+    .from(schema.dashboards)
+    .where(eq(schema.dashboards.id, id))
+    .limit(1);
+
+  const seed = row ? null : loadDashboardSeed(id);
+  if (!row && seed) {
+    if (!tokenAccess) {
+      setResponseStatus(event, 403);
+      return { error: "Invalid or expired agent access token" };
+    }
+    return buildDashboardSeedAgentContext(id, seed, { includeConfig: true });
+  }
+
+  if (!row) {
+    setResponseStatus(event, 404);
+    return { error: "Dashboard not found" };
+  }
+
+  if (row.visibility !== "public" && !tokenAccess) {
+    setResponseStatus(event, 403);
+    return { error: "Invalid or expired agent access token" };
+  }
+
+  return buildDashboardAgentContext(rowToDashboard(row), {
+    includeConfig: true,
+  });
+});

package/corpus/templates/analytics/shared/resource-agent-access.ts

@@ -0,0 +1,6 @@
+export const ANALYTICS_DASHBOARD_AGENT_RESOURCE_KIND = "analytics:dashboard";
+export const ANALYTICS_ANALYSIS_AGENT_RESOURCE_KIND = "analytics:analysis";
+export const ANALYTICS_DASHBOARD_AGENT_CONTEXT_ENDPOINT =
+  "/api/dashboard-agent-context.json";
+export const ANALYTICS_ANALYSIS_AGENT_CONTEXT_ENDPOINT =
+  "/api/analysis-agent-context.json";

package/corpus/templates/assets/.agents/skills/actions/SKILL.md

@@ -161,6 +161,18 @@ to find likely URLs, `web-request` or `provider-api-docs` with clean
 `webFetch()` when you need to grep, aggregate, or compare many pages before
 returning a small result.
 
+For LONG compute, `run-code` supports durable background executions: pass
+`background: true` and the code is enqueued to a `sandbox_executions` row and
+executed out-of-band with a generous budget (default 10 min), surviving the
+hosted agent run's ~40s soft timeout. The call returns
+`{ executionId, status: "queued" }` immediately with polling guidance; check
+progress with `run-code` `{ executionId }` (or the `get-code-execution` tool
+where registered) — results persist after completion. Use background for big
+cross-source joins, multi-page provider sweeps, and heavy analysis scripts;
+keep quick scripts in the default foreground mode. Agents should continue
+other work between polls, and on `failed`/`timed_out` split the computation or
+persist intermediate progress with `workspaceWrite` and re-run.
+
 ### The `http` Option
 
 Controls how the action is exposed as an HTTP endpoint:
@@ -205,6 +217,49 @@ run: async (args) => {
 }
 ```
 
+### Returning Images the Agent Can See (`_agentImages`)
+
+An action's return object may include the well-known optional field
+`_agentImages` to attach vision images (screenshots, chart previews, rendered
+designs) to the tool result. The agent literally sees them — enabling visual
+self-review loops — while the field itself is stripped from the JSON text the
+model reads.
+
+```ts
+run: async ({ dashboardId }) => {
+  const shot = await renderDashboardPng(dashboardId); // Buffer
+  return {
+    dashboardId,
+    panelCount: 6,
+    _agentImages: [
+      // Either a public https URL (preferred — the provider fetches it)…
+      { url: "https://cdn.example.com/previews/dash-1.png", label: "overview" },
+      // …or base64 without a data: prefix (mediaType required; a full
+      // data:image/png;base64,… URL in `data` is also accepted and parsed).
+      { data: shot.toString("base64"), mediaType: "image/png" },
+    ],
+  };
+},
+```
+
+Rules and limits:
+
+- Shape: `Array<{ url?: string; data?: string; mediaType?: string; label?: string }>`.
+  Each entry needs `url` (https only) **or** `data`. Supported media types:
+  `image/jpeg`, `image/png`, `image/gif`, `image/webp`.
+- Caps: max **4 images** per result; max **~2MB of base64** per image.
+  Over-cap or invalid entries never fail the call — they become text notes in
+  the result telling the model what was dropped and why.
+- Persistence: the run ledger stores only the string result plus compact
+  `[image: …]` notes (URLs verbatim; base64 as a byte-count placeholder) —
+  never the payload. Images are re-attached only for the live turn; replayed
+  history is text-only, so prefer stable `url` images the model can re-request.
+- Engine support: native Anthropic and vision-capable AI-SDK providers
+  (anthropic, openai, google, openrouter) receive real image blocks; other
+  paths (Builder gateway, non-vision providers) degrade to the text notes.
+- External MCP tools need no changes — standard MCP `image` content parts are
+  converted automatically under the same caps.
+
 ### Validating Return Values (`outputSchema`)
 
 `schema` validates inputs; `outputSchema` validates what the action **returns**. Pass any Standard Schema-compatible schema (Zod, Valibot, ArkType) and the framework validates the result _after_ `run()` resolves — input validated before `run`, output after.

package/corpus/templates/assets/app/components/create/RecentDraftsSection.tsx

@@ -1,9 +1,10 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { IconArrowUpRight, IconPhoto } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
 type DraftAsset = {
   id: string;
   title?: string | null;

package/corpus/templates/assets/app/components/generation/GenerationResults.tsx

@@ -5,6 +5,11 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,15 +19,10 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
-import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import { assetPreviewSources } from "@/lib/asset-preview-sources";
 
 import type {
@@ -65,7 +65,13 @@ export function GenerationResults({ threadId }: { threadId: string | null }) {
     queryFn: async ({ signal }) => {
       return readClientAppState<AssetVariantState>(stateKey, { signal });
     },
-    refetchInterval: 1000,
+    refetchInterval: (query) => {
+      const state = query.state.data as AssetVariantState | undefined;
+      const hasPendingSlot = (state?.slots ?? []).some(
+        (slot) => slot.status === "pending",
+      );
+      return hasPendingSlot ? 1000 : false;
+    },
   });
   const { data: librariesData } = useActionQuery("list-libraries", {
     compact: true,

package/corpus/templates/assets/app/components/layout/Header.tsx

@@ -53,7 +53,7 @@ export function Header() {
   const showAgentToggle = location.pathname !== "/";
 
   return (
-    <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
+    <header className="hidden h-12 shrink-0 items-center gap-3 border-b border-border bg-background px-4 md:flex lg:px-6">
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {title ?? <ResolvedTitle />}
       </div>

package/corpus/templates/assets/app/components/layout/PageShell.tsx

@@ -1,12 +1,12 @@
 import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { type ReactNode } from "react";
+
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { IconInfoCircle } from "@tabler/icons-react";
-import { type ReactNode } from "react";
-
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export function PageShell({