@tangle-network/agent-app 0.45.47 → 0.45.48

package/dist/studio-react/index.js

@@ -1,8 +1,14 @@
 import {
   CADENCES,
   DESTINATIONS,
+  IMAGE_QUALITIES,
+  IMAGE_SIZE_HINT,
+  IMAGE_SIZE_PATTERN,
   MAX_IMAGE_COUNT,
   MIN_IMAGE_COUNT,
+  VIDEO_ASPECT_RATIOS,
+  VIDEO_DURATIONS,
+  VIDEO_RESOLUTIONS,
   buildGenerationRequestBody,
   buildPublishPackage,
   failedOptimisticGeneration,
@@ -24,7 +30,10 @@ import {
   relativeTime,
   selectedModelsWithDefaults,
   userSafeGenerationMessage
-} from "../chunk-BT4QFCTB.js";
+} from "../chunk-HSBJB46C.js";
+import {
+  ProviderLogo
+} from "../chunk-MLG6XKPV.js";
 
 // src/studio-react/studio-workspace.tsx
 import { useRef as useRef3, useState as useState3 } from "react";
@@ -106,14 +115,15 @@ import { useIntegrations } from "@tangle-network/sandbox-ui/integrations";
 import { Sparkles } from "lucide-react";
 
 // src/studio-react/type-config.ts
-import { Film, FileText, Image, Mic, Video } from "lucide-react";
-var IMAGE = { label: "Image", icon: Image, color: "bg-[color-mix(in_srgb,#3b82f6_10%,hsl(var(--card)))] text-blue-600 border-blue-500/30" };
+import { FileText, Image, Mic, User, Video } from "lucide-react";
+var MEDIA_SCRIM = "bg-black/60 text-white border-white/10";
+var IMAGE = { label: "Image", icon: Image, color: MEDIA_SCRIM };
 var TYPE_CONFIG = {
   image: IMAGE,
-  video: { label: "Video", icon: Video, color: "bg-[color-mix(in_srgb,#ef4444_10%,hsl(var(--card)))] text-red-600 border-red-500/30" },
-  avatar: { label: "Avatar", icon: Film, color: "bg-[color-mix(in_srgb,#a855f7_10%,hsl(var(--card)))] text-purple-600 border-purple-500/30" },
-  speech: { label: "Audio", icon: Mic, color: "bg-[color-mix(in_srgb,#f97316_10%,hsl(var(--card)))] text-orange-600 border-orange-500/30" },
-  transcription: { label: "Transcript", icon: FileText, color: "bg-[color-mix(in_srgb,#10b981_10%,hsl(var(--card)))] text-emerald-600 border-emerald-500/30" }
+  video: { label: "Video", icon: Video, color: MEDIA_SCRIM },
+  avatar: { label: "Avatar", icon: User, color: MEDIA_SCRIM },
+  speech: { label: "Audio", icon: Mic, color: MEDIA_SCRIM },
+  transcription: { label: "Transcript", icon: FileText, color: MEDIA_SCRIM }
 };
 function typeConfigFor(type) {
   return TYPE_CONFIG[type] ?? IMAGE;
@@ -183,7 +193,7 @@ function ComposerDisclosure({ summary, children }) {
   ] });
 }
 function NativeSelect(props) {
-  return /* @__PURE__ */ jsx("select", { ...props, className: "h-9 w-full rounded-md border border-input bg-[var(--md3-surface-container-low)] px-3 text-sm" });
+  return /* @__PURE__ */ jsx("select", { ...props, className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm" });
 }
 
 // src/studio-react/image-composer.tsx
@@ -199,8 +209,17 @@ function ImageComposer({
 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ jsx2(Field, { label: "Size", children: /* @__PURE__ */ jsx2(Input, { value: size, onChange: (event) => onSizeChange(event.target.value), className: "bg-background" }) }),
-      /* @__PURE__ */ jsx2(Field, { label: "Quality", children: /* @__PURE__ */ jsx2(Input, { value: quality, onChange: (event) => onQualityChange(event.target.value), className: "bg-background" }) })
+      /* @__PURE__ */ jsx2(Field, { label: "Size", children: /* @__PURE__ */ jsx2(
+        Input,
+        {
+          value: size,
+          onChange: (event) => onSizeChange(event.target.value),
+          pattern: IMAGE_SIZE_PATTERN,
+          placeholder: IMAGE_SIZE_HINT,
+          className: "bg-background"
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(Field, { label: "Quality", children: /* @__PURE__ */ jsx2(NativeSelect, { value: quality, onChange: (event) => onQualityChange(event.target.value), children: IMAGE_QUALITIES.map((option) => /* @__PURE__ */ jsx2("option", { value: option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option)) }) })
     ] }),
     /* @__PURE__ */ jsx2(Field, { label: "Images", children: /* @__PURE__ */ jsx2(
       Stepper,
@@ -228,9 +247,9 @@ function VideoComposer({
   onReferenceImageUrlChange
 }) {
   return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
-    /* @__PURE__ */ jsx3(Field, { label: "Duration (s)", children: /* @__PURE__ */ jsx3(Input2, { value: duration, onChange: (event) => onDurationChange(event.target.value), className: "bg-background" }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Resolution", children: /* @__PURE__ */ jsx3(Input2, { value: resolution, onChange: (event) => onResolutionChange(event.target.value), className: "bg-background" }) }),
-    /* @__PURE__ */ jsx3(Field, { label: "Aspect ratio", children: /* @__PURE__ */ jsx3(Input2, { value: aspectRatio, onChange: (event) => onAspectRatioChange(event.target.value), className: "bg-background" }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Duration (s)", children: /* @__PURE__ */ jsx3(NativeSelect, { value: duration, onChange: (event) => onDurationChange(event.target.value), children: VIDEO_DURATIONS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Resolution", children: /* @__PURE__ */ jsx3(NativeSelect, { value: resolution, onChange: (event) => onResolutionChange(event.target.value), children: VIDEO_RESOLUTIONS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
+    /* @__PURE__ */ jsx3(Field, { label: "Aspect ratio", children: /* @__PURE__ */ jsx3(NativeSelect, { value: aspectRatio, onChange: (event) => onAspectRatioChange(event.target.value), children: VIDEO_ASPECT_RATIOS.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) }),
     /* @__PURE__ */ jsx3(Field, { label: "Reference image URL", children: /* @__PURE__ */ jsx3(Input2, { value: referenceImageUrl, onChange: (event) => onReferenceImageUrlChange(event.target.value), className: "bg-background" }) })
   ] });
 }
@@ -336,14 +355,15 @@ function TranscriptionOptions({
       /* @__PURE__ */ jsx6("option", { value: "verbose_json", children: "Verbose JSON" }),
       /* @__PURE__ */ jsx6("option", { value: "vtt", children: "VTT" })
     ] }) }),
-    /* @__PURE__ */ jsx6(Field, { label: "Temperature", children: /* @__PURE__ */ jsx6(Input5, { type: "number", min: "0", max: "1", step: "0.1", value: temperature, onChange: (event) => onTemperatureChange(event.target.value), className: "bg-[var(--md3-surface-container-low)]" }) })
+    /* @__PURE__ */ jsx6(Field, { label: "Temperature", children: /* @__PURE__ */ jsx6(Input5, { type: "number", min: "0", max: "1", step: "0.1", value: temperature, onChange: (event) => onTemperatureChange(event.target.value), className: "bg-background" }) })
   ] });
 }
 
 // src/studio-react/publish-package-composer.tsx
 import { Link } from "react-router";
 import { Badge, Button, Input as Input6, Textarea } from "@tangle-network/sandbox-ui/primitives";
-import { AlertTriangle, CalendarClock, Check } from "lucide-react";
+import { ProviderIcon } from "@tangle-network/sandbox-ui/integrations";
+import { AlertTriangle, Check } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function PublishPackageComposer({
   caption,
@@ -367,7 +387,7 @@ function PublishPackageComposer({
       connectionError ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 rounded-md border border-warning/25 bg-warning/10 px-2.5 py-1.5 text-xs text-warning", children: [
         /* @__PURE__ */ jsx7(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
         "Couldn't load connected apps. Check Integrations."
-      ] }) : /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: connectionsLoading ? "Checking connected apps\u2026" : "Stage captions, destinations, cadence. Saved with the generated asset." }),
+      ] }) : /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: connectionsLoading ? "Checking connected apps\u2026" : "Saved with the generated asset." }),
       integrationsHref && canManageIntegrations && /* @__PURE__ */ jsx7(Link, { to: integrationsHref, prefetch: "intent", className: "shrink-0", children: /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", children: "Connect" }) })
     ] }),
     /* @__PURE__ */ jsx7("div", { className: "grid gap-2", children: DESTINATIONS.map((destination) => {
@@ -380,11 +400,12 @@ function PublishPackageComposer({
           disabled: !connected,
           "aria-pressed": active,
           onClick: () => onDestinationToggle(destination.id),
-          className: `rounded-md border p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${active ? "border-primary bg-primary/10 ring-1 ring-primary/20" : "border-border bg-[var(--md3-surface-container-low)] hover:bg-accent"}`,
+          className: `rounded-md border p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${active ? "border-primary bg-primary/10 ring-1 ring-primary/20" : "border-border bg-background hover:bg-accent"}`,
           children: [
             /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1.5 text-xs font-medium text-foreground", children: [
                 active && /* @__PURE__ */ jsx7(Check, { className: "h-3.5 w-3.5 text-primary" }),
+                /* @__PURE__ */ jsx7(ProviderIcon, { id: destination.providerIds[0] ?? destination.id, displayName: destination.label, size: 16, className: "rounded" }),
                 destination.label
               ] }),
               /* @__PURE__ */ jsx7(Badge, { variant: active || connected ? "default" : "outline", children: active ? "Selected" : connected ? "Ready" : "Not connected" })
@@ -395,15 +416,11 @@ function PublishPackageComposer({
         destination.id
       );
     }) }),
-    /* @__PURE__ */ jsx7(Field, { label: "Caption", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: caption, onChange: (event) => onCaptionChange(event.target.value), rows: 3, placeholder: "Write or generate the caption for selected destinations...", className: "bg-[var(--md3-surface-container-low)]" }) }),
-    /* @__PURE__ */ jsx7(Field, { label: "Description / CTA", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: postDescription, onChange: (event) => onDescriptionChange(event.target.value), rows: 2, placeholder: "Release note, product context, link, or approval instruction...", className: "bg-[var(--md3-surface-container-low)]" }) }),
+    /* @__PURE__ */ jsx7(Field, { label: "Caption", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: caption, onChange: (event) => onCaptionChange(event.target.value), rows: 3, placeholder: "Write or generate the caption for selected destinations...", className: "bg-background" }) }),
+    /* @__PURE__ */ jsx7(Field, { label: "Description / CTA", className: "space-y-2", children: /* @__PURE__ */ jsx7(Textarea, { value: postDescription, onChange: (event) => onDescriptionChange(event.target.value), rows: 2, placeholder: "Release note, product context, link, or approval instruction...", className: "bg-background" }) }),
     /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ jsx7(Field, { label: "Mentions", className: "space-y-2", children: /* @__PURE__ */ jsx7(Input6, { value: mentions, onChange: (event) => onMentionsChange(event.target.value), placeholder: "@creator, @partner", className: "bg-[var(--md3-surface-container-low)]" }) }),
+      /* @__PURE__ */ jsx7(Field, { label: "Mentions", className: "space-y-2", children: /* @__PURE__ */ jsx7(Input6, { value: mentions, onChange: (event) => onMentionsChange(event.target.value), placeholder: "@creator, @partner", className: "bg-background" }) }),
       /* @__PURE__ */ jsx7(Field, { label: "Cadence", className: "space-y-2", children: /* @__PURE__ */ jsx7(NativeSelect, { value: cadence, onChange: (event) => onCadenceChange(event.target.value), children: CADENCES.map((option) => /* @__PURE__ */ jsx7("option", { value: option, children: option }, option)) }) })
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 rounded-md bg-secondary p-2 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx7(CalendarClock, { className: "h-3.5 w-3.5" }),
-      "Publish packages stay attached to generated media and can run through connected GTM apps."
     ] })
   ] });
 }
@@ -496,10 +513,10 @@ function ComposerHero({
       if (cancelled) return;
       setMediaModels(data);
       setSelectedModels((current) => selectedModelsWithDefaults(current, data));
-    }).catch((err) => {
+    }).catch(() => {
       if (cancelled) return;
       setMediaModels(null);
-      setMediaModelsError(err instanceof Error ? err.message : "Could not load media models");
+      setMediaModelsError("Could not load media models");
     }).finally(() => {
       if (!cancelled) setMediaModelsLoading(false);
     });
@@ -605,7 +622,7 @@ function ComposerHero({
   const mediaTypes = Object.entries(TYPE_CONFIG);
   return /* @__PURE__ */ jsxs7("section", { className: `rounded-2xl border border-border p-5 shadow-sm ${surfaceClassName}`, children: [
     /* @__PURE__ */ jsx8("div", { className: `mb-5 ${align === "center" ? "text-center" : "text-left"}`, children: /* @__PURE__ */ jsx8(
-      "h1",
+      "h2",
       {
         className: `font-semibold tracking-tight text-foreground transition-all duration-300 ${align === "center" ? "text-xl" : "text-base"}`,
         children: "Media Generation"
@@ -671,7 +688,7 @@ function ComposerHero({
           suggestion.label
         )) })
       ] }),
-      type === "transcription" && /* @__PURE__ */ jsx8("p", { className: "mt-2 text-xs text-muted-foreground", children: "Optional \u2014 biases the transcript's spelling, vocabulary, and speaker names. It isn't an instruction for the model to follow." })
+      type === "transcription" && /* @__PURE__ */ jsx8("p", { className: "mt-2 text-xs text-muted-foreground", children: "Optional \u2014 biases spelling, vocabulary, and speaker names (not an instruction)." })
     ] }),
     type === "avatar" && /* @__PURE__ */ jsx8(
       AvatarComposer,
@@ -703,6 +720,7 @@ function ComposerHero({
             disabled: mediaModelsLoading || Boolean(mediaModelsError) || modelsForType.length === 0,
             children: [
               /* @__PURE__ */ jsx8(SelectTrigger, { id: "studio-media-model", className: "h-9 w-full bg-background", children: selectedModelOption ? /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 items-center gap-2", children: [
+                selectedModelOption.provider && /* @__PURE__ */ jsx8(ProviderLogo, { provider: selectedModelOption.provider, size: 14 }),
                 /* @__PURE__ */ jsx8("span", { className: "truncate", children: selectedModelOption.name || selectedModelOption.id }),
                 selectedModelOption.provider && /* @__PURE__ */ jsxs7("span", { className: "shrink-0 text-muted-foreground", children: [
                   "\xB7 ",
@@ -711,9 +729,12 @@ function ComposerHero({
                 selectedModelOption.status !== "available" && /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-warning/10 px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-[0.05em] text-warning", children: selectedModelOption.status })
               ] }) : /* @__PURE__ */ jsx8(SelectValue, { placeholder: mediaModelsLoading ? "Loading models\u2026" : "Select a model" }) }),
               /* @__PURE__ */ jsx8(SelectContent, { className: "bg-background", children: modelsForType.map((model) => /* @__PURE__ */ jsx8(SelectItem, { value: model.id, disabled: model.status === "unavailable", children: /* @__PURE__ */ jsxs7("span", { className: "flex w-full items-center justify-between gap-3", children: [
-                /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
-                  model.name || model.id,
-                  model.provider ? ` \xB7 ${model.provider}` : ""
+                /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  model.provider && /* @__PURE__ */ jsx8(ProviderLogo, { provider: model.provider, size: 14 }),
+                  /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
+                    model.name || model.id,
+                    model.provider ? ` \xB7 ${model.provider}` : ""
+                  ] })
                 ] }),
                 model.status !== "available" && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[11px] capitalize text-muted-foreground", children: model.status })
               ] }) }, model.id)) })
@@ -757,10 +778,10 @@ function ComposerHero({
             onChange: (event) => setNegativePrompt(event.target.value),
             rows: 2,
             placeholder: "Avoid artifacts, off-style composition...",
-            className: "bg-[var(--md3-surface-container-low)]"
+            className: "bg-background"
           }
         ) }),
-        /* @__PURE__ */ jsx8(Field, { label: "Save to", children: /* @__PURE__ */ jsx8(Input7, { value: outputPath, onChange: (event) => setOutputPath(event.target.value), className: "bg-[var(--md3-surface-container-low)]" }) }),
+        /* @__PURE__ */ jsx8(Field, { label: "Save to", children: /* @__PURE__ */ jsx8(Input7, { value: outputPath, onChange: (event) => setOutputPath(event.target.value), className: "bg-background" }) }),
         type === "transcription" && /* @__PURE__ */ jsx8(
           TranscriptionOptions,
           {
@@ -806,11 +827,20 @@ function ComposerHero({
       )
     ] }),
     error && /* @__PURE__ */ jsx8("div", { className: "mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsxs7(Button2, { onClick: generate, disabled: !canSubmit, size: "lg", className: "mt-5 w-full", children: [
-      /* @__PURE__ */ jsx8(Sparkles, { className: "mr-2 h-4 w-4" }),
-      "Generate",
-      /* @__PURE__ */ jsx8("span", { className: "ml-2 text-[11px] opacity-60", children: "\u2318\u21B5" })
-    ] })
+    /* @__PURE__ */ jsxs7(
+      Button2,
+      {
+        onClick: generate,
+        disabled: !canSubmit,
+        size: "lg",
+        className: "mt-5 w-full disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx8(Sparkles, { className: "mr-2 h-4 w-4" }),
+          "Generate",
+          /* @__PURE__ */ jsx8("span", { className: "ml-2 text-[11px] opacity-60", children: "\u2318\u21B5" })
+        ]
+      }
+    )
   ] });
 }
 
@@ -826,7 +856,7 @@ function StudioHeader({
   return /* @__PURE__ */ jsx9("header", { className: "sticky top-0 z-20 border-b border-border bg-card", children: /* @__PURE__ */ jsxs8("div", { className: "mx-auto flex w-full max-w-3xl items-center justify-between gap-3 px-4 py-3 sm:px-6", children: [
     /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx9("h1", { className: "text-lg font-semibold tracking-tight text-foreground", children: "Studio" }),
-      /* @__PURE__ */ jsx9("p", { className: "truncate text-xs text-muted-foreground", children: canGenerate ? "Generate images, video, voice, avatars, and transcripts." : "Browse images, video, voice, avatars, and transcripts your team has created." })
+      /* @__PURE__ */ jsx9("p", { className: "truncate text-xs text-muted-foreground", children: canGenerate ? "Generate images, video, voice, avatars, and transcripts." : "Browse your team's generations." })
     ] }),
     /* @__PURE__ */ jsxs8(Button3, { size: "sm", variant: "outline", onClick: onOpenLibrary, className: "shrink-0", children: [
       /* @__PURE__ */ jsx9(Images, { className: "mr-1.5 h-4 w-4" }),
@@ -850,17 +880,21 @@ function ResultCanvas({
     return /* @__PURE__ */ jsxs9("section", { className: `${cardClass} flex min-h-[180px] flex-col items-center justify-center gap-2 p-8 text-center`, children: [
       /* @__PURE__ */ jsx10("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx10(Sparkles2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
       /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-foreground", children: "Your creations appear here" }),
-      /* @__PURE__ */ jsx10("p", { className: "max-w-xs text-xs text-muted-foreground", children: "Write a prompt above and hit Generate \u2014 your latest result blooms here, and everything lives in your library." })
+      /* @__PURE__ */ jsx10("p", { className: "max-w-xs text-xs text-muted-foreground", children: "Generate above \u2014 results appear here and are saved to your library." })
     ] });
   }
   const cfg = typeConfigFor(batch[0]?.type ?? "image");
+  const Icon = cfg.icon;
   const statuses = batch.map(generationStatus);
   const runLabel = statuses.some((s) => s === "pending" || s === "running") ? "Generating\u2026" : statuses.every((s) => s === "failed") ? "Last run failed" : "Latest creation";
   const isWorking = statuses.some((s) => s === "pending" || s === "running");
   return /* @__PURE__ */ jsxs9("section", { className: `${cardClass} p-5`, children: [
     /* @__PURE__ */ jsxs9("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx10(Badge3, { variant: "outline", className: `${cfg.color} text-[11px]`, children: cfg.label }),
+        /* @__PURE__ */ jsxs9(Badge3, { variant: "outline", className: `${cfg.color} gap-1 text-[11px]`, children: [
+          /* @__PURE__ */ jsx10(Icon, { className: "h-3 w-3" }),
+          cfg.label
+        ] }),
         /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-foreground", children: runLabel }),
         isWorking && /* @__PURE__ */ jsx10("span", { className: "h-2 w-2 animate-pulse rounded-full bg-primary" })
       ] }),
@@ -887,7 +921,7 @@ function ResultCanvas({
       },
       generation.id
     )) }),
-    batch.length > 1 && /* @__PURE__ */ jsxs9("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+    batch.length > 1 && !isWorking && /* @__PURE__ */ jsxs9("p", { className: "mt-2 text-xs text-muted-foreground", children: [
       batch.length,
       " results from this run"
     ] })
@@ -959,7 +993,7 @@ function StudioSheet({
 
 // src/studio-react/generation-grid.tsx
 import { EmptyState } from "@tangle-network/sandbox-ui/primitives";
-import { Film as Film2, Sparkles as Sparkles3 } from "lucide-react";
+import { Film, Sparkles as Sparkles3 } from "lucide-react";
 
 // src/studio-react/generation-card.tsx
 import { Card, CardContent, Badge as Badge4 } from "@tangle-network/sandbox-ui/primitives";
@@ -975,15 +1009,15 @@ function GenerationCard({
   const publishPackage = generation.metadata?.publishPackage;
   return /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => onSelect(generation), className: "group text-left animate-row-in", children: /* @__PURE__ */ jsxs11(Card, { className: "overflow-hidden transition-all group-hover:border-primary/50 group-hover:shadow-md", children: [
     /* @__PURE__ */ jsxs11("div", { className: "relative aspect-video bg-secondary", children: [
-      generation.type === "image" && generation.result ? /* @__PURE__ */ jsx12("img", { src: generation.result, alt: generation.prompt, className: "h-full w-full object-cover" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx12("video", { src: generation.result, className: "h-full w-full object-cover", muted: true }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx12(Icon, { className: "h-6 w-6 text-muted-foreground/40" }),
-        /* @__PURE__ */ jsx12("span", { className: "text-xs text-muted-foreground", children: "Audio" })
-      ] }) }) : generation.type === "transcription" && generation.result ? /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx12("p", { className: "line-clamp-5 text-xs text-muted-foreground", children: generation.result }) }) : status === "pending" || status === "running" ? /* @__PURE__ */ jsx12("div", { className: "shimmer h-full w-full" }) : /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx12(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }),
-      /* @__PURE__ */ jsx12("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx12(Badge4, { variant: "outline", className: `${cfg.color} text-[11px]`, children: cfg.label }) }),
+      generation.type === "image" && generation.result ? /* @__PURE__ */ jsx12("img", { src: generation.result, alt: generation.prompt, className: "h-full w-full object-cover" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx12("video", { src: generation.result, className: "h-full w-full object-cover", muted: true }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx12(Icon, { className: "h-6 w-6 text-muted-foreground/40" }) }) : generation.type === "transcription" && generation.result ? /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx12("p", { className: "line-clamp-5 text-xs text-muted-foreground", children: generation.result }) }) : status === "pending" || status === "running" ? /* @__PURE__ */ jsx12("div", { className: "shimmer h-full w-full" }) : /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx12(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }),
+      /* @__PURE__ */ jsx12("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsxs11(Badge4, { variant: "outline", className: `${cfg.color} gap-1 text-[11px]`, children: [
+        /* @__PURE__ */ jsx12(Icon, { className: "h-3 w-3" }),
+        cfg.label
+      ] }) }),
       /* @__PURE__ */ jsx12(GenerationStatusBadge, { generation })
     ] }),
     /* @__PURE__ */ jsxs11(CardContent, { className: "p-3", children: [
-      /* @__PURE__ */ jsx12("p", { className: "mb-2 line-clamp-2 text-xs text-foreground", children: generation.prompt }),
+      /* @__PURE__ */ jsx12("p", { className: "mb-2 line-clamp-2 text-sm font-medium text-foreground", children: generation.prompt }),
       status === "failed" && /* @__PURE__ */ jsx12("p", { className: "mb-2 line-clamp-2 text-[11px] text-destructive", children: generationError(generation) }),
       /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
         generation.model && /* @__PURE__ */ jsx12("span", { className: "truncate text-[11px] text-muted-foreground", children: generation.model }),
@@ -998,7 +1032,7 @@ function GenerationCard({
       isPublishPackage(publishPackage) && /* @__PURE__ */ jsxs11("div", { className: "mt-3 rounded-md border border-border bg-secondary p-2", children: [
         /* @__PURE__ */ jsxs11("div", { className: "mb-1 flex items-center gap-1.5 text-[11px] font-medium text-foreground", children: [
           /* @__PURE__ */ jsx12(Send, { className: "h-3 w-3" }),
-          (publishPackage.destinations ?? []).join(", ") || "Publish package"
+          (publishPackage.destinations ?? []).map((id) => DESTINATIONS.find((destination) => destination.id === id)?.label ?? id).join(", ") || "Publish package"
         ] }),
         /* @__PURE__ */ jsx12("p", { className: "line-clamp-2 text-[11px] text-muted-foreground", children: publishPackage.caption || "Caption pending" })
       ] })
@@ -1031,7 +1065,7 @@ function GenerationGrid({
     return /* @__PURE__ */ jsx13(
       EmptyState,
       {
-        icon: typeFilter ? /* @__PURE__ */ jsx13(Film2, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx13(Sparkles3, { className: "h-10 w-10 text-muted-foreground/30" }),
+        icon: typeFilter ? /* @__PURE__ */ jsx13(Film, { className: "h-8 w-8 text-muted-foreground/30" }) : /* @__PURE__ */ jsx13(Sparkles3, { className: "h-10 w-10 text-muted-foreground/30" }),
         title: typeFilter ? `No ${TYPE_CONFIG[typeFilter]?.label ?? typeFilter} generations` : "No generations yet",
         description: typeFilter ? "Try a different filter or change the type in the composer." : "Everything you and the agent create lives here.",
         className: "py-16"
@@ -1058,34 +1092,37 @@ function GenerationDetail({
   return /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx14("div", { className: "overflow-hidden rounded-lg bg-secondary", children: generation.type === "image" && generation.result ? /* @__PURE__ */ jsx14("img", { src: generation.result, alt: generation.prompt, className: "max-h-[420px] w-full object-contain" }) : (generation.type === "video" || generation.type === "avatar") && generation.result ? /* @__PURE__ */ jsx14("video", { src: generation.result, controls: true, className: "max-h-[420px] w-full" }) : generation.type === "speech" && generation.result ? /* @__PURE__ */ jsx14("div", { className: "p-6", children: /* @__PURE__ */ jsx14("audio", { src: generation.result, controls: true, className: "w-full" }) }) : /* @__PURE__ */ jsx14("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx14(Icon, { className: "h-8 w-8 text-muted-foreground/20" }) }) }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx14(Badge5, { variant: "outline", className: cfg.color, children: cfg.label }),
+      /* @__PURE__ */ jsxs12(Badge5, { variant: "outline", className: `${cfg.color} gap-1`, children: [
+        /* @__PURE__ */ jsx14(Icon, { className: "h-3 w-3" }),
+        cfg.label
+      ] }),
       /* @__PURE__ */ jsx14(GenerationStatusBadge, { generation, inline: true }),
       generationError(generation) && /* @__PURE__ */ jsx14("span", { className: "text-xs text-destructive", children: generationError(generation) })
     ] }),
     /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Prompt" }),
+      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Prompt" }),
       /* @__PURE__ */ jsx14("p", { className: "text-sm text-foreground", children: generation.prompt })
     ] }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-4", children: [
       generation.model && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-medium text-muted-foreground", children: "Model" }),
+        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx14("span", { className: "text-xs text-foreground", children: generation.model })
       ] }),
       generation.cost != null && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-medium text-muted-foreground", children: "Cost" }),
+        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Cost" }),
         /* @__PURE__ */ jsxs12("span", { className: "text-xs text-foreground", children: [
           "$",
-          generation.cost.toFixed(4)
+          generation.cost.toFixed(3)
         ] })
       ] }),
       generation.createdAt && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-medium text-muted-foreground", children: "Created" }),
-        /* @__PURE__ */ jsx14("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsx14("span", { className: "block text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Created" }),
+        /* @__PURE__ */ jsx14("span", { className: "text-xs text-foreground", children: new Date(generation.createdAt).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }) })
       ] })
     ] }),
     generation.type === "transcription" && generation.result && /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Transcription" }),
-      /* @__PURE__ */ jsx14("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-secondary p-4 text-sm text-foreground", children: generation.result })
+      /* @__PURE__ */ jsx14("span", { className: "mb-1 block text-[11px] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: "Transcription" }),
+      /* @__PURE__ */ jsx14("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg bg-secondary p-4 font-mono text-[13px] tabular-nums text-foreground", children: generation.result })
     ] }),
     href && /* @__PURE__ */ jsx14("div", { className: "border-t border-border pt-2", children: /* @__PURE__ */ jsx14(Link2, { to: href, prefetch: "intent", onClick: onNavigate, children: /* @__PURE__ */ jsxs12(Button4, { size: "sm", variant: "outline", children: [
       /* @__PURE__ */ jsx14(FolderOpen, { className: "mr-1.5 h-3.5 w-3.5" }),
@@ -1241,7 +1278,7 @@ function StudioWorkspace({
     ] }) : /* @__PURE__ */ jsxs14("section", { className: "flex flex-col items-center justify-center gap-3 rounded-xl border border-border bg-card p-10 text-center shadow-sm", children: [
       /* @__PURE__ */ jsx16("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx16(Images2, { className: "h-6 w-6 text-muted-foreground/40" }) }),
       /* @__PURE__ */ jsx16("p", { className: "text-sm font-medium text-foreground", children: mergedGenerations.length > 0 ? `${mergedGenerations.length} asset${mergedGenerations.length !== 1 ? "s" : ""} in this workspace` : "No generations yet" }),
-      /* @__PURE__ */ jsx16("p", { className: "max-w-sm text-xs text-muted-foreground", children: "When workspace members generate images, video, voice, avatars, or transcripts, they appear in the library." }),
+      /* @__PURE__ */ jsx16("p", { className: "max-w-sm text-xs text-muted-foreground", children: "Team generations appear in the library." }),
       /* @__PURE__ */ jsxs14(Button6, { size: "sm", variant: "outline", onClick: openLibrary, children: [
         /* @__PURE__ */ jsx16(Images2, { className: "mr-1.5 h-4 w-4" }),
         "Open library"
@@ -1289,7 +1326,7 @@ function LibraryPanel({
   const visible = useMemo4(() => filterGenerations(generations, typeFilter), [generations, typeFilter]);
   return /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-col", children: [
     /* @__PURE__ */ jsxs15("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx17(Tabs2, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs15(TabsList2, { className: "h-9 justify-start gap-1 overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-[var(--md3-surface-container-low)] p-1", children: [
+      /* @__PURE__ */ jsx17(Tabs2, { value: typeFilter ?? "all", onValueChange: (v) => onFilterChange(v === "all" ? null : v), children: /* @__PURE__ */ jsxs15(TabsList2, { className: "h-9 justify-start gap-1 overflow-x-auto overflow-y-hidden rounded-lg border border-border bg-background p-1", children: [
         /* @__PURE__ */ jsx17(
           TabsTrigger2,
           {
@@ -1337,7 +1374,7 @@ function GenerationDetailModal({
   return /* @__PURE__ */ jsx18(Dialog2, { open: generation != null, onOpenChange: (open) => {
     if (!open) onClose();
   }, children: /* @__PURE__ */ jsxs16(DialogContent, { className: "max-h-[85vh] max-w-2xl overflow-y-auto border-card-edge bg-popover shadow-overlay", children: [
-    /* @__PURE__ */ jsx18(DialogHeader, { children: /* @__PURE__ */ jsx18(DialogTitle, { className: "text-left text-base", children: cfg?.label ?? "Generation" }) }),
+    /* @__PURE__ */ jsx18(DialogHeader, { children: /* @__PURE__ */ jsx18(DialogTitle, { className: "text-left text-[15px] font-semibold", children: cfg ? `${cfg.label} generation` : "Generation" }) }),
     generation && /* @__PURE__ */ jsx18(GenerationDetail, { generation, vaultHref, onNavigate: onClose })
   ] }) });
 }