@agent-native/core 0.120.1 → 0.120.3

package/corpus/templates/analytics/server/plugins/agent-chat.ts

@@ -709,7 +709,7 @@ export default createAgentChatPlugin({
     // render every organization metric before the model request starts.
     const sourceGuidance =
       analyticsSourceGuidanceOpening() +
-      "DASHBOARD CREATION RULE — You may create dashboards, analyses, SQL panels, or other resources only when the user explicitly asks you to (e.g. 'build me a dashboard for...', 'create a new analysis', 'add a chart for...'). Never create any resource proactively during research, trend analysis, or answering questions. If you think a dashboard would be useful, suggest it and wait for explicit confirmation before creating anything. Never add new items to the sidebar or modify existing dashboards without an explicit user directive. " +
+      "DASHBOARD CREATION RULE — You may create dashboard artifacts, SQL panels, or other resources only when the user explicitly asks you to (e.g. 'build me a dashboard for...', 'save this analysis', 'add a chart for...'). Treat a requested saved analysis or deep-dive report as a dashboard request. Never create any resource proactively during research, trend analysis, or answering questions. If you think a dashboard would be useful, suggest it and wait for explicit confirmation before creating anything. Never add new items to the sidebar or modify existing dashboards without an explicit user directive. " +
       "DASHBOARD MUTATION RULE — For dashboard edits, default to `mutate-dashboard` with the typed `dashboard.*` script API so the main payload is a string and avoids native-array serialization traps. It can move panels by id, edit titles/SQL/config, insert, duplicate, remove, and patch dashboard fields in one atomic save. The script API is constrained: no variables/imports/loops/functions, only JSON-compatible arguments on documented dashboard methods. Do not count shifting `/panels/<index>` positions for ordinary dashboard edits unless the user specifically asks for low-level JSON-pointer operations. " +
       'DASHBOARD EXTENSION BOX RULE — Analytics dashboards support extension boxes. For ordinary requests such as "put X in this dashboard," insert a `chartType: "extension"` panel with `config.extensionId`; this author-selected embed is shared with the dashboard, appears in scheduled reports, and receives dashboard/panel/current-filter context. Use `config.extensionSlotId` only when the user explicitly asks for a personal/per-viewer slot. Slot ids use `analytics.dashboard.<dashboard-id>.panel.<panel-id>` and require `add-extension-slot-target` plus `install-extension`; installs are per-user, so viewers can see different content and report identities may see an empty slot. Use `get-sql-dashboard` panel summaries to inspect an existing box. ' +
       'EXTENSION DATA-REPAIR RULE — When fixing data in an existing extension-backed dashboard or migrated surface such as Risk Meeting, inspect the current dashboard and extension first, then call `update-extension` with exactly `id`, `operation="edit"`, and a `payloadJson` string containing focused patches/edits that change only the data-loading seam. Never send empty placeholder fields. Preserve the existing layout, CSS, copy, and interactions; never reconstruct the full HTML body for a data-only fix. A request that combines a visual rewrite such as compacting, removing sections, renaming, or changing padding with a data repair is a broad rewrite; after inspecting the current extension, use `operation="replace"` with the complete replacement in `payloadJson`. If a focused edit fails, change the target instead of retrying identical arguments. ' +
@@ -721,20 +721,19 @@ export default createAgentChatPlugin({
       "When the user names a provider such as first-party Analytics, BigQuery, HubSpot, Gong, Jira, Pylon, Slack, Sentry, GA4, or another connected source, that source is authoritative for the turn. Use its first-class query action when available; if it is not on the initial tool surface, use tool-search for that provider instead of loading unrelated catalogs. For an ordinary structured lookup, make one bounded query and stop on success. " +
       "Load provider API, corpus, staging, or code tools only when the user explicitly requests cross-source work, exhaustive unstructured-record coverage, or an absence claim that the first-class action cannot support. For those genuinely broad workflows, fetch every relevant page or an explicitly bounded cohort, preserve coverage counts, and state any uncovered records. " +
       "For named deal, account, renewal, churn-risk, or customer deep dives that need HubSpot and Gong context, `account-deep-dive` can provide a bounded evidence bundle. Do not answer a requested transcript deep dive from call metadata alone. " +
-      "When the user refers to the current analysis, this analysis, this project, or asks to spin off, adapt, modify, or reuse a saved analysis, call `view-screen` first and use the returned analysis details; if an analysis id or @mention is provided, call `get-analysis` before responding. " +
+      "When the user refers to the current dashboard artifact, this analysis, this project, or asks to spin off, adapt, modify, or reuse a saved analysis, call `view-screen` first and use the returned dashboard details; for an explicitly named legacy analysis id, call `get-analysis` before responding and preserve its legacy deep link only for compatibility. " +
       "If a query action fails because its arguments are invalid, correct the arguments once. Never repeat the identical failed call. For credential, permission, quota, network, or repeated schema failures, stop using that source for the turn and surface the actual error instead of trying unrelated providers. " +
       "For ordinary ad-hoc structured data questions, answer the explicit question after the first relevant successful query or bounded evidence batch. The words all, total, or exact do not require cross-source validation when a single structured query fully covers the requested source and filters. " +
-      "If the user challenges coverage, asks why more records were not included, or asks for the updated answer, rerun the relevant source query or revise from the corrected cohort and provide the updated deliverable directly. Do not claim an analysis was revised unless the revised answer is included in the response or saved with `save-analysis`. " +
+      "If the user challenges coverage, asks why more records were not included, or asks for the updated answer, rerun the relevant source query or revise from the corrected cohort and provide the updated deliverable directly. Do not claim a dashboard artifact was revised unless the revised answer is included in the response or saved with `update-dashboard`. " +
       "Unstructured source records are valid analytics evidence: Pylon tickets, Jira issues, Gong calls/transcripts, Slack messages, and similar text records may be coded for themes, mention counts, sentiment, objections, and qualitative patterns as long as the answer states the inspected sample size and does not imply unsupported statistical certainty. " +
       "For schema questions, prefer data-dictionary entries and configured warehouse schemas over assumptions; use `search-bigquery-schema` for BigQuery metadata before inventing datasets, tables, or columns. " +
       "Before finalizing any analytics answer, make the evidence trail explicit enough to audit: answer the user's question, name the source(s), time window, sample size or row count, filters, join/match method, caveats/gaps, and recommended next action when useful. Never substitute fabricated numbers for a failed query or unavailable provider. It is fine to ask a clarifying question, provide a plan, or say exactly which source is unavailable as long as you do not present metrics or source-record conclusions without evidence.\n" +
       "</data-source-guidance>";
     const artifactGuidance =
       "<analytics-artifact-guidance>\n" +
-      "Native Analytics dashboards and saved analyses are constrained artifacts: dashboards are JSON configs rendered by the built-in dashboard components, and analyses are Markdown reports with generated chart images plus structured resultData. " +
-      "If the user's requested dashboard, analysis surface, visualization, interaction model, custom layout, or bespoke workflow cannot be faithfully represented within those native components/config fields, do not hand-wave, force an approximate JSON dashboard, or route to source-code changes. In production mode, automatically create a sandboxed extension with `create-extension` instead, using Alpine.js HTML and the available app/data helpers. " +
-      "After creating the extension, briefly tell the user that the request needed bespoke UI/code beyond the native Analytics dashboard or analysis format, so you built it as an extension. " +
-      "Do not also create a same-named dashboard or saved analysis unless the user explicitly asked for multiple artifacts; saved analyses appear in the sidebar and should not be used for throwaway notes or scratch summaries.\n" +
+      "Analytics has one user-facing artifact type: dashboards. Dashboards are JSON configs rendered by the built-in dashboard components, and an extension is a dashboard block—not a separate Analytics result. " +
+      'If the user\'s requested dashboard, saved analysis/report, visualization, interaction model, custom layout, or bespoke workflow cannot be faithfully represented within the native dashboard components/config fields, do not hand-wave, force an approximate JSON dashboard, or route to source-code changes. In production mode, automatically create a sandboxed extension with `create-extension`, then immediately call `update-dashboard` to embed it as one or more `chartType: "extension"` panels with `config.extensionId`. ' +
+      "After creating the dashboard, briefly tell the user that a dashboard block uses an embedded extension because the request needed bespoke UI/code. Never leave a newly created extension standalone, never create a separate saved analysis for the same request, and never direct the user to an Extensions page from Analytics. Legacy analyses may be read or updated only for compatibility with an existing deep link.\n" +
       "</analytics-artifact-guidance>";
 
     return `${sourceGuidance}\n\n${artifactGuidance}\n\n${analyticsDataDictionaryRoutingContext()}`;
@@ -779,50 +778,5 @@ export default createAgentChatPlugin({
         }
       },
     },
-    analyses: {
-      label: "Analyses",
-      icon: "document",
-      search: async (query: string, event?: any) => {
-        if (!event) return [];
-        try {
-          const { getOrgContext } = await import("@agent-native/core/org");
-          const { listAnalyses } = await import("../lib/dashboards-store.js");
-          const ctx = await getOrgContext(event);
-          const rows = await listAnalyses({
-            email: ctx.email,
-            orgId: ctx.orgId ?? null,
-          });
-          const q = (query || "").toLowerCase().trim();
-          const filtered = q
-            ? rows.filter(
-                (analysis) =>
-                  (analysis.name || "").toLowerCase().includes(q) ||
-                  (analysis.description || "").toLowerCase().includes(q) ||
-                  analysis.id.toLowerCase().includes(q),
-              )
-            : rows;
-
-          return filtered
-            .sort(
-              (a, b) =>
-                new Date(b.updatedAt).getTime() -
-                new Date(a.updatedAt).getTime(),
-            )
-            .slice(0, 20)
-            .map((analysis) => ({
-              id: `analysis:${analysis.id}`,
-              label: analysis.name || "Untitled analysis",
-              description: `/analyses/${analysis.id}`,
-              icon: "document",
-              refType: "analysis",
-              refId: analysis.id,
-              refPath: `/analyses/${analysis.id}`,
-            }));
-        } catch (err) {
-          console.error("[analytics] Analysis mention provider failed:", err);
-          return [];
-        }
-      },
-    },
   },
 });

package/corpus/templates/analytics/server/plugins/core-routes.ts

@@ -10,7 +10,7 @@ export default createCoreRoutesPlugin({
   resolveOpenPath: ({ view, params }) => {
     if (params.dashboardId) return `/dashboards/${params.dashboardId}`;
     if (params.analysisId) return `/analyses/${params.analysisId}`;
-    if (view === "analyses") return "/analyses";
+    if (view === "analyses") return "/dashboards";
     // `adhoc`/unknown with no id: there is no bare `/dashboards` record route —
     // send to the app root rather than 404 (the polled `navigate` command
     // still applies any record focus once the SPA is loaded).

package/corpus/templates/analytics/server/plugins/db.ts

@@ -1265,6 +1265,25 @@ const runAnalyticsMigrations = runMigrations(
       name: "error-events-user-key-filter-idx",
       sql: `CREATE INDEX IF NOT EXISTS error_events_user_key_filter_idx ON error_events (user_key, owner_email, org_id, issue_id)`,
     },
+    {
+      version: 121,
+      name: "analytics-events-org-path-event-idx",
+      sql: `CREATE INDEX IF NOT EXISTS analytics_events_org_path_event_idx ON analytics_events (org_id, path, event_name)`,
+    },
+    {
+      version: 122,
+      name: "dashboard-revisions-org-dashboard-idx",
+      sql: `CREATE INDEX IF NOT EXISTS dashboard_revisions_org_dashboard_idx ON dashboard_revisions (org_id, dashboard_id)`,
+    },
+    {
+      version: 123,
+      name: "dashboard-report-capture-diagnostics",
+      sql: `
+        ALTER TABLE dashboard_report_subscriptions ADD COLUMN IF NOT EXISTS last_capture_at TEXT;
+        ALTER TABLE dashboard_report_subscriptions ADD COLUMN IF NOT EXISTS last_capture_mode TEXT;
+        ALTER TABLE dashboard_report_subscriptions ADD COLUMN IF NOT EXISTS last_capture_error TEXT;
+      `,
+    },
   ],
   { table: "analytics_migrations" },
 );

package/corpus/templates/analytics/shared/dashboard-report-timeouts.ts

@@ -1,3 +1,3 @@
 export const FIRST_PARTY_ANALYTICS_QUERY_TIMEOUT_MS = 30_000;
 export const DASHBOARD_REPORT_ACTION_TIMEOUT_MS = 38_000;
-export const DASHBOARD_REPORT_READY_TIMEOUT_MS = 45_000;
+export const DASHBOARD_REPORT_READY_TIMEOUT_MS = 60_000;

package/corpus/templates/assets/actions/generate-image-batch.ts

@@ -33,13 +33,47 @@ const presetReferenceFillSchema = z.object({
   assetIds: z.array(z.string().min(1)).min(1).max(4),
 });
 
+const imageBatchAgentInputSchema = z.object({
+  libraryId: z
+    .string()
+    .min(1)
+    .describe("Brand kit/library ID to use for every generated image."),
+  collectionId: z.string().optional(),
+  presetId: z.string().optional(),
+  presetReferenceFills: z.array(presetReferenceFillSchema).max(6).optional(),
+  sessionId: z.string().optional(),
+  slots: z
+    .array(
+      z.object({
+        slotId: z.string(),
+        prompt: z.string().min(1),
+        embeddedText: z.string().optional(),
+        textPlacement: z.string().optional(),
+        aspectRatio: z.enum(ASPECT_RATIOS).optional(),
+        imageSize: z.enum(IMAGE_SIZES).optional(),
+        categories: z.array(z.enum(IMAGE_CATEGORIES)).optional(),
+        referenceAssetIds: z.array(z.string()).optional(),
+        sourceAssetId: z.string().optional(),
+        subjectAssetId: z.string().optional(),
+        intent: z.enum(GENERATION_INTENTS).optional(),
+        styleStrength: z.enum(STYLE_STRENGTHS).optional(),
+      }),
+    )
+    .min(1)
+    .max(12),
+  model: z.enum(IMAGE_MODELS).optional(),
+  tier: z.enum(IMAGE_QUALITY_TIERS).optional(),
+  includeLogo: z.boolean().optional(),
+  groundingMode: z.enum(["auto", "off", "google-search"]).optional(),
+});
+
 export default defineAction({
   description:
     "Generate several brand-consistent images in parallel from one brand kit/library. Use @brand-kit mentions as libraryId and @preset mentions as presetId when present. If no preset is tagged, call list-generation-presets first and use a matching preset's presetId; the user may not know presets exist. Generate presetless only when no preset matches the request. This is synchronous for images: one call waits for every slot and returns final image artifacts. Use this for slide decks, landing pages, and multi-slot design work. Do not call get-generation-run or refresh-generation-run after a normal image batch result.",
   schema: z.object({
     libraryId: z
       .string()
-      .optional()
+      .min(1)
       .describe(
         "Brand kit/library ID. Pass the refId from a brand-kit @mention, or choose a kit from view-screen/list-libraries.",
       ),
@@ -135,6 +169,7 @@ export default defineAction({
         "Disable Creative Context for this batch only without changing the saved preference.",
       ),
   }),
+  agentInputSchema: imageBatchAgentInputSchema,
   parallelSafe: true,
   timeoutMs: IMAGE_GENERATION_TOOL_TIMEOUT_MS,
   run: async ({ slots, ...inputBase }, context?: ActionRunContext) => {

package/corpus/templates/assets/actions/generate-image.ts

@@ -83,13 +83,39 @@ const presetReferenceFillSchema = z.object({
   assetIds: z.array(z.string().min(1)).min(1).max(4),
 });
 
+const imageGenerationAgentInputSchema = z.object({
+  libraryId: z
+    .string()
+    .min(1)
+    .describe("Brand kit/library ID to use for this image."),
+  collectionId: z.string().optional(),
+  presetId: z.string().optional(),
+  sessionId: z.string().optional(),
+  prompt: z.string().min(1),
+  embeddedText: z.string().optional(),
+  textPlacement: z.string().optional(),
+  aspectRatio: z.enum(ASPECT_RATIOS).optional(),
+  imageSize: z.enum(IMAGE_SIZES).optional(),
+  model: z.enum(IMAGE_MODELS).optional(),
+  tier: z.enum(IMAGE_QUALITY_TIERS).optional(),
+  intent: z.enum(GENERATION_INTENTS).optional(),
+  styleStrength: z.enum(STYLE_STRENGTHS).optional(),
+  categories: z.array(z.enum(IMAGE_CATEGORIES)).optional(),
+  referenceAssetIds: z.array(z.string()).optional(),
+  presetReferenceFills: z.array(presetReferenceFillSchema).max(6).optional(),
+  includeLogo: z.boolean().optional(),
+  sourceAssetId: z.string().optional(),
+  subjectAssetId: z.string().optional(),
+  groundingMode: z.enum(["auto", "off", "google-search"]).optional(),
+});
+
 export default defineAction({
   description:
     "Generate one brand-consistent image from a brand kit/library. This is synchronous for images and returns the final asset with preview/download/embed URLs. Use @brand-kit mentions as libraryId and @preset mentions as presetId when present. If no preset is tagged, call list-generation-presets first and use a matching preset's presetId; the user may not know presets exist. Generate presetless only when no preset matches the request. Use generate-image-batch for multiple independent slots; do not poll image runs after this action returns.",
   schema: z.object({
     libraryId: z
       .string()
-      .optional()
+      .min(1)
       .describe(
         "Brand kit/library ID. Pass the refId from a brand-kit @mention, or choose a kit from view-screen/list-libraries.",
       ),
@@ -205,6 +231,7 @@ export default defineAction({
         "When false, attach the output to the session without making it the active asset. Batch generation selects the active asset deterministically after all slots finish.",
       ),
   }),
+  agentInputSchema: imageGenerationAgentInputSchema,
   parallelSafe: true,
   timeoutMs: IMAGE_GENERATION_TOOL_TIMEOUT_MS,
   run: async (input, context?: ActionRunContext) => {

package/corpus/templates/assets/app/components/asset/AssetPreviewDialog.tsx

@@ -0,0 +1,376 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDownload,
+  IconInfoCircle,
+  IconX,
+} from "@tabler/icons-react";
+import { useEffect, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { assetPreviewSources } from "@/lib/asset-preview-sources";
+import { assetMediaUrl } from "@/lib/asset-urls";
+
+export type PreviewAsset = {
+  id: string;
+  libraryId?: string | null;
+  role?: string | null;
+  status?: string | null;
+  title?: string | null;
+  description?: string | null;
+  altText?: string | null;
+  prompt?: string | null;
+  mediaType?: string | null;
+  mimeType?: string | null;
+  width?: number | null;
+  height?: number | null;
+  url?: string | null;
+  previewUrl?: string | null;
+  thumbnailUrl?: string | null;
+  downloadUrl?: string | null;
+  folderId?: string | null;
+  category?: string | null;
+  model?: string | null;
+  aspectRatio?: string | null;
+  durationSeconds?: number | null;
+  metadata?: Record<string, unknown> | null;
+  lineage?: { label?: string | null } | null;
+};
+
+/**
+ * The single side-panel asset preview used everywhere an asset is opened:
+ * large media on the left, details on the right, a top toolbar (download,
+ * details toggle, close), and previous/next navigation across `assets`.
+ */
+export function AssetPreviewDialog({
+  asset,
+  assets,
+  onAssetChange,
+  renderImage,
+}: {
+  asset: PreviewAsset | null;
+  assets: PreviewAsset[];
+  onAssetChange: (asset: PreviewAsset | null) => void;
+  /** Optional media renderer (e.g. an embed/COEP-aware image loader). */
+  renderImage?: (asset: PreviewAsset) => ReactNode;
+}) {
+  const t = useT();
+  const exportAsset = useActionMutation("export-asset");
+  const [showDetails, setShowDetails] = useState(true);
+  return (
+    <Dialog
+      open={Boolean(asset)}
+      onOpenChange={(open) => {
+        if (!open) onAssetChange(null);
+      }}
+    >
+      {asset &&
+        (() => {
+          const previewIndex = assets.findIndex(
+            (candidate) => candidate.id === asset.id,
+          );
+          const hasPrev = previewIndex > 0;
+          const hasNext = previewIndex >= 0 && previewIndex < assets.length - 1;
+          const showPreviousAsset = () => {
+            if (hasPrev) onAssetChange(assets[previewIndex - 1]);
+          };
+          const showNextAsset = () => {
+            if (hasNext) onAssetChange(assets[previewIndex + 1]);
+          };
+          const isVideo =
+            asset.mediaType === "video" ||
+            Boolean(asset.mimeType?.startsWith("video/"));
+          const videoSrc = assetPreviewSources(asset)[0];
+          const downloadAsset = () => {
+            // Synthetic starter-preset assets aren't database rows, so
+            // export-asset can't resolve them; download the source directly.
+            if (isStarterPreviewAsset(asset)) {
+              const directUrl = assetPreviewSources(asset)[0];
+              if (directUrl) window.location.href = directUrl;
+              else toast.error(t("assetDetail.downloadFailed"));
+              return;
+            }
+            exportAsset.mutate(
+              { assetId: asset.id },
+              {
+                onSuccess: (result: any) => {
+                  const url =
+                    assetMediaUrl(result?.downloadUrl) ?? result?.downloadUrl;
+                  if (url) window.location.href = url;
+                  else toast.error(t("assetDetail.downloadFailed"));
+                },
+                onError: () => toast.error(t("assetDetail.downloadFailed")),
+              },
+            );
+          };
+          return (
+            <DialogContent
+              hideClose
+              onKeyDown={(event) => {
+                if (event.key === "ArrowLeft") showPreviousAsset();
+                if (event.key === "ArrowRight") showNextAsset();
+              }}
+              className="assets-preview-dialog flex max-h-[92vh] w-[94vw] max-w-6xl flex-col gap-0 overflow-hidden p-0"
+            >
+              <DialogTitle className="sr-only">
+                {assetPreviewTitle(asset)}
+              </DialogTitle>
+              <DialogDescription className="sr-only">
+                {t("library.fullSizePreview", {
+                  title: assetPreviewTitle(asset),
+                })}
+              </DialogDescription>
+
+              <div className="flex items-center justify-end gap-1 border-b border-border px-3 py-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="gap-2"
+                  disabled={exportAsset.isPending}
+                  onClick={downloadAsset}
+                >
+                  <IconDownload className="h-4 w-4" />
+                  {t("assetDetail.download")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="gap-2"
+                  aria-pressed={showDetails}
+                  onClick={() => setShowDetails((value) => !value)}
+                >
+                  <IconInfoCircle className="h-4 w-4" />
+                  {t("library.viewDetails")}
+                </Button>
+                <DialogClose
+                  aria-label={t("library.closePreview")}
+                  className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <IconX className="h-5 w-5" />
+                </DialogClose>
+              </div>
+
+              <div className="flex min-h-0 flex-1 flex-col md:flex-row">
+                <div className="relative flex min-h-0 flex-1 items-center justify-center bg-muted/30 p-4">
+                  {isVideo ? (
+                    <video
+                      src={videoSrc}
+                      poster={asset.thumbnailUrl ?? undefined}
+                      controls
+                      autoPlay
+                      playsInline
+                      className="max-h-[72vh] max-w-full rounded-lg bg-black object-contain"
+                    />
+                  ) : renderImage ? (
+                    renderImage(asset)
+                  ) : (
+                    <AssetPreviewImage asset={asset} />
+                  )}
+                </div>
+                {showDetails && (
+                  <aside className="w-full shrink-0 overflow-y-auto border-t border-border p-5 md:w-80 md:border-l md:border-t-0">
+                    <AssetPreviewDetails asset={asset} isVideo={isVideo} />
+                  </aside>
+                )}
+              </div>
+
+              {(hasPrev || hasNext) && (
+                <div className="flex justify-center gap-2 border-t border-border py-3">
+                  <button
+                    type="button"
+                    aria-label={t("library.previousImage")}
+                    onClick={showPreviousAsset}
+                    disabled={!hasPrev}
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background text-foreground transition hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    <IconChevronLeft className="h-5 w-5" />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label={t("library.nextImage")}
+                    onClick={showNextAsset}
+                    disabled={!hasNext}
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background text-foreground transition hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    <IconChevronRight className="h-5 w-5" />
+                  </button>
+                </div>
+              )}
+            </DialogContent>
+          );
+        })()}
+    </Dialog>
+  );
+}
+
+function AssetPreviewImage({ asset }: { asset: PreviewAsset }) {
+  const t = useT();
+  const sources = assetPreviewSources(asset);
+  const [sourceIndex, setSourceIndex] = useState(0);
+  const [unavailable, setUnavailable] = useState(false);
+  const sourcesKey = sources.join("\n");
+
+  useEffect(() => {
+    setSourceIndex(0);
+    setUnavailable(false);
+  }, [sourcesKey]);
+
+  const src = sources[sourceIndex];
+  if (!src || unavailable) {
+    return (
+      <div className="flex aspect-square w-full max-w-sm items-center justify-center rounded-lg border border-dashed border-border bg-background px-6 text-sm font-medium text-muted-foreground">
+        {t("assetDetail.previewUnavailable")}
+      </div>
+    );
+  }
+  return (
+    <img
+      src={src}
+      alt={asset.altText ?? asset.title ?? ""}
+      className="max-h-[72vh] max-w-full rounded-lg object-contain"
+      onError={() => {
+        const nextIndex = sourceIndex + 1;
+        if (nextIndex < sources.length) setSourceIndex(nextIndex);
+        else setUnavailable(true);
+      }}
+    />
+  );
+}
+
+function AssetPreviewDetails({
+  asset,
+  isVideo,
+}: {
+  asset: PreviewAsset;
+  isVideo: boolean;
+}) {
+  const t = useT();
+  const category = assetPreviewCategoryLabel(asset, t);
+  return (
+    <div className="space-y-5">
+      <div>
+        <h2 className="text-base font-semibold leading-tight tracking-tight">
+          {assetPreviewTitle(asset)}
+        </h2>
+        <div className="mt-2 flex flex-wrap gap-1.5">
+          {asset.status ? (
+            <Badge variant="secondary">{asset.status}</Badge>
+          ) : null}
+          {asset.role ? <Badge variant="outline">{asset.role}</Badge> : null}
+          <Badge variant="outline">{isVideo ? "video" : "image"}</Badge>
+          {category ? <Badge variant="outline">{category}</Badge> : null}
+        </div>
+      </div>
+      <div className="space-y-4 text-sm">
+        {isVideo ? (
+          <PreviewField
+            label={t("assetDetail.video")}
+            value={`${asset.durationSeconds || "?"}s · ${asset.aspectRatio || "n/a"} · ${asset.model || "n/a"}`}
+          />
+        ) : (
+          <PreviewField
+            label={t("assetDetail.dimensions")}
+            value={formatPreviewDimensions(asset.width, asset.height)}
+          />
+        )}
+        <PreviewField label="MIME" value={asset.mimeType || "n/a"} />
+        <PreviewField
+          label={t("assetDetail.folder")}
+          value={asset.folderId || t("assetDetail.unfiled")}
+        />
+        <PreviewField
+          label={t("assetDetail.description")}
+          value={
+            asset.description || asset.altText || t("assetDetail.noDescription")
+          }
+          multiline
+        />
+        <PreviewField
+          label={t("assetDetail.prompt")}
+          value={asset.prompt || t("assetDetail.noPrompt")}
+          multiline
+        />
+      </div>
+    </div>
+  );
+}
+
+function PreviewField({
+  label,
+  value,
+  multiline,
+}: {
+  label: string;
+  value: ReactNode;
+  multiline?: boolean;
+}) {
+  return (
+    <div>
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className={multiline ? "mt-1 whitespace-pre-wrap" : "mt-1 truncate"}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function assetPreviewTitle(asset: PreviewAsset): string {
+  return (
+    asset.lineage?.label || asset.title || asset.prompt || "Untitled asset"
+  );
+}
+
+function assetPreviewCategoryLabel(
+  asset: PreviewAsset,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string | null {
+  const metadata = (asset.metadata ?? {}) as Record<string, unknown>;
+  if (metadata.intent === "subject" || asset.role === "subject_reference") {
+    return t("assetDetail.contentOnly");
+  }
+  const category = (metadata.category as string | undefined) ?? asset.category;
+  if (typeof category !== "string") return null;
+  if (category === "style-only") return t("assetDetail.styleReference");
+  if (category === "skeleton") return t("assetDetail.skeletonPlate");
+  return category.replace(/-/g, " ");
+}
+
+function formatPreviewDimensions(
+  width?: number | null,
+  height?: number | null,
+) {
+  const dimensions = `${width || "?"} x ${height || "?"}`;
+  if (!width || !height) return dimensions;
+  const divisor = previewGcd(width, height);
+  return (
+    <span className="flex items-center gap-2">
+      {dimensions}
+      <span className="h-4 w-px bg-border" />
+      {`${width / divisor}:${height / divisor}`}
+    </span>
+  );
+}
+
+function previewGcd(a: number, b: number): number {
+  return b === 0 ? a : previewGcd(b, a % b);
+}
+
+function isStarterPreviewAsset(asset: PreviewAsset): boolean {
+  return (
+    asset.id.startsWith("starter-") ||
+    Boolean(asset.libraryId?.startsWith("starter:"))
+  );
+}

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

@@ -5,8 +5,10 @@ import {
   IconArrowUpRight,
   IconPhoto,
 } from "@tabler/icons-react";
+import { useState } from "react";
 import { Link } from "react-router";
 
+import { AssetPreviewDialog } from "@/components/asset/AssetPreviewDialog";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -32,6 +34,7 @@ export function RecentDraftsSection() {
     },
   );
   const drafts = ((data as any)?.assets ?? []) as DraftAsset[];
+  const [previewAsset, setPreviewAsset] = useState<DraftAsset | null>(null);
 
   if (isError) {
     return (
@@ -74,18 +77,25 @@ export function RecentDraftsSection() {
               <Skeleton key={index} className="aspect-square rounded-lg" />
             ))
           : drafts.map((draft) => (
-              <Link
+              <button
                 key={draft.id}
-                to={`/asset/${encodeURIComponent(draft.id)}`}
+                type="button"
+                onClick={() => setPreviewAsset(draft)}
                 title={draft.title || draft.prompt || t("library.draftAsset")}
-                className="group block overflow-hidden rounded-lg border border-border bg-card shadow-sm transition hover:border-primary/60 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="group block overflow-hidden rounded-lg border border-border bg-card text-left shadow-sm transition hover:border-primary/60 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <div className="aspect-square bg-muted">
                   <DraftThumbnail draft={draft} />
                 </div>
-              </Link>
+              </button>
             ))}
       </div>
+
+      <AssetPreviewDialog
+        asset={previewAsset}
+        assets={drafts}
+        onAssetChange={(next) => setPreviewAsset(next as DraftAsset | null)}
+      />
     </section>
   );
 }