@agent-native/core 0.88.0 → 0.90.1

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({

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

@@ -11,18 +11,6 @@ import {
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconArchive,
   IconClipboardList,
@@ -41,6 +29,18 @@ import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/assets/app/components/library/CreateLibraryDialog.tsx

@@ -3,7 +3,10 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -11,13 +14,10 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import { Separator } from "@agent-native/toolkit/ui/separator";
-import { useState } from "react";
-import { toast } from "sonner";
-
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 
 import type { LibraryPreset } from "../../../shared/library-presets";

package/corpus/templates/assets/app/components/library/EditLibraryDialog.tsx

@@ -1,17 +1,17 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 type EditableLibrary = {

package/corpus/templates/assets/app/components/library/LibraryCard.tsx

@@ -1,12 +1,4 @@
 import { useT } from "@agent-native/core/client";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
 import {
   IconCopy,
   IconDots,
@@ -15,6 +7,14 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { assetMediaUrl } from "@/lib/asset-urls";
 import {
   getLibraryCustomInstructions,

package/corpus/templates/assets/app/components/library/LibraryPresetGrid.tsx

@@ -1,8 +1,9 @@
 import { appPath } from "@agent-native/core/client";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconBox, IconBrush, IconLayersIntersect } from "@tabler/icons-react";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
 import type { LibraryPreset } from "../../../shared/library-presets";
 
 const PRESET_ICONS = [IconBox, IconBrush, IconLayersIntersect];

package/corpus/templates/assets/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/assets/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/assets/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/assets/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/assets/app/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/checkbox";

package/corpus/templates/assets/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/assets/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/templates/assets/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/assets/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/assets/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/assets/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/assets/app/components/ui/separator.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/separator";

package/corpus/templates/assets/app/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/templates/assets/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/assets/app/components/ui/sonner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sonner";

package/corpus/templates/assets/app/components/ui/spinner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/spinner";

package/corpus/templates/assets/app/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tabs";

package/corpus/templates/assets/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,12 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return <ToolkitProvider components={components}>{children}</ToolkitProvider>;
+}

package/corpus/templates/assets/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tooltip";

package/corpus/templates/assets/app/global.css

@@ -3,6 +3,7 @@
 
 @import "tailwindcss";
 @import "@agent-native/core/styles/agent-native.css";
+@import "@agent-native/toolkit/styles.css";
 
 @source "./**/*.{ts,tsx}";
 

package/corpus/templates/assets/app/root.tsx

@@ -11,7 +11,6 @@ import {
   useCommandMenuShortcut,
   useT,
 } from "@agent-native/core/client";
-import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
@@ -20,6 +19,8 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
+import { Toaster } from "@/components/ui/sonner";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 
 import changelog from "../CHANGELOG.md?raw";
 import { i18nCatalog } from "./i18n";
@@ -144,14 +145,16 @@ export default function Root() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
-    <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-      <DbSyncSetup />
-      <Toaster richColors position="bottom-left" />
-      <AssetsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
-      <AppLayout>
-        <Outlet />
-      </AppLayout>
-    </AppProviders>
+    <AppToolkitProvider>
+      <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
+        <DbSyncSetup />
+        <Toaster richColors position="bottom-left" />
+        <AssetsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
+        <AppLayout>
+          <Outlet />
+        </AppLayout>
+      </AppProviders>
+    </AppToolkitProvider>
   );
 }
 

package/corpus/templates/assets/app/routes/asset.$id.tsx

@@ -4,25 +4,6 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Separator } from "@agent-native/toolkit/ui/separator";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconArrowLeft,
   IconClipboard,
@@ -40,6 +21,25 @@ import {
 import { Link, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { assetPreviewSources } from "@/lib/asset-preview-sources";
 import { assetMediaUrl } from "@/lib/asset-urls";
 import { cn } from "@/lib/utils";

package/corpus/templates/assets/app/routes/audit.tsx

@@ -3,20 +3,6 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Separator } from "@agent-native/toolkit/ui/separator";
-import { Sheet, SheetContent } from "@agent-native/toolkit/ui/sheet";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   IconAlertTriangle,
   IconClipboardList,
@@ -27,6 +13,21 @@ import {
 } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+
 import {
   IMAGE_MODELS,
   VIDEO_MODELS,

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -9,60 +9,6 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  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 { Checkbox } from "@agent-native/toolkit/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@agent-native/toolkit/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Separator } from "@agent-native/toolkit/ui/separator";
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@agent-native/toolkit/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconCheck,
   IconClipboard,
@@ -112,7 +58,56 @@ import {
 import { toast } from "sonner";
 
 import { EditLibraryDialog } from "@/components/library/EditLibraryDialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { assetPreviewSources } from "@/lib/asset-preview-sources";
 import { assetMediaUrl } from "@/lib/asset-urls";
 import { getLibraryCustomInstructions } from "@/lib/libraries";