@tangle-network/agent-app 0.46.5 → 0.46.7

package/dist/studio-react/index.js

@@ -16,11 +16,11 @@ import {
   hashSeed,
   imageToVideoSibling,
   isLocalGeneration,
+  laneUnavailable,
   latestBatchOf,
   mergeGenerationPages,
   mergeLiveGeneration,
   mergeLoaderAndLive,
-  modelMessage,
   normalizeImageCount,
   normalizeVaultPath,
   optimisticGeneration,
@@ -34,7 +34,7 @@ import {
   textToVideoSibling,
   userSafeGenerationMessage,
   validateCustomImageSize
-} from "../chunk-LEGZX5MQ.js";
+} from "../chunk-OOE2TPY2.js";
 import {
   useInfiniteScroll
 } from "../chunk-KKBTPZIE.js";
@@ -108,7 +108,22 @@ function useStudioGenerations(loaderGenerations, options = {}) {
 
 // src/studio-react/studio-composer.tsx
 import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
-import { AudioLines, ArrowUp, Image as ImageIcon, Video } from "lucide-react";
+import {
+  AudioLines,
+  ArrowUp,
+  Clock,
+  Copy,
+  Gauge,
+  Image as ImageIcon,
+  Mic,
+  Monitor,
+  Ratio,
+  Scaling,
+  SlidersHorizontal,
+  Sparkles,
+  TriangleAlert as TriangleAlert2,
+  Video
+} from "lucide-react";
 
 // src/studio-react/composer-option-controls.tsx
 import {
@@ -117,9 +132,10 @@ import {
   useId,
   useState as useState2
 } from "react";
-import { ImagePlus, Volume2, VolumeX, X } from "lucide-react";
+import { ImagePlus, TriangleAlert, Volume2, VolumeX, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var PILL = "inline-flex h-7 flex-none items-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-card px-2.5 text-[12.5px] font-medium text-foreground transition hover:bg-accent";
+var PILL_LABEL = "[text-box:trim-both_cap_alphabetic]";
 var MENU_PANEL = `flex min-w-[184px] flex-col overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground ${OVERLAY_SHADOW}`;
 var MENU_HEADER = "px-2.5 pb-1 pt-1.5 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-muted-foreground";
 function menuRowClass(selected) {
@@ -223,28 +239,34 @@ function MenuRows({
   choices,
   onSelect
 }) {
-  return choices.map((choice) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "menuitemradio",
-      "aria-checked": choice.value === value,
-      onClick: () => onSelect(choice.value),
-      className: menuRowClass(choice.value === value),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: choice.label }),
-        choice.value === value && /* @__PURE__ */ jsx(CheckGlyph, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
-      ]
-    },
-    String(choice.value)
-  ));
+  return choices.map((choice) => {
+    const Icon = choice.icon;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": choice.value === value,
+        onClick: () => onSelect(choice.value),
+        className: menuRowClass(choice.value === value),
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: choice.label }),
+          choice.value === value && /* @__PURE__ */ jsx(CheckGlyph, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
+        ]
+      },
+      String(choice.value)
+    );
+  });
 }
 function MenuPill({
   label,
   value,
   choices,
   onSelect,
-  className
+  className,
+  icon: Icon,
+  trigger = "pill"
 }) {
   const [open, setOpen] = useState2(false);
   const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
@@ -260,10 +282,11 @@ function MenuPill({
         title: label,
         "aria-label": label,
         onClick: () => setOpen(!open),
-        className: `${PILL} ${className ?? ""}`,
+        className: `${trigger === "text" ? "inline-flex h-7 flex-none items-center gap-1 whitespace-nowrap rounded-full px-2 text-[12.5px] font-medium text-primary transition hover:bg-accent" : PILL} ${className ?? ""}`,
         children: [
-          /* @__PURE__ */ jsx("span", { children: selected?.label ?? "\u2014" }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
+          Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: selected?.label ?? "\u2014" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 ${trigger === "text" ? "text-primary" : "text-muted-foreground"}` })
         ]
       }
     ),
@@ -300,7 +323,8 @@ function OptionPill({
   choices,
   onSelect,
   bandRef,
-  custom
+  custom,
+  icon: Icon
 }) {
   const [open, setOpen] = useState2(false);
   const [customOpen, setCustomOpen] = useState2(false);
@@ -327,7 +351,8 @@ function OptionPill({
         },
         className: PILL,
         children: [
-          /* @__PURE__ */ jsx("span", { children: selected?.label ?? "\u2014" }),
+          Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: selected?.label ?? "\u2014" }),
           /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
         ]
       }
@@ -452,7 +477,7 @@ function AudioTogglePill({ on, onToggle }) {
       className: `${PILL} ${on ? "" : "text-muted-foreground"}`,
       children: [
         on ? /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4 shrink-0", strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(VolumeX, { className: "h-4 w-4 shrink-0", strokeWidth: 1.5 }),
-        /* @__PURE__ */ jsx("span", { children: on ? "Audio on" : "Audio off" })
+        /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: on ? "Audio on" : "Audio off" })
       ]
     }
   );
@@ -473,7 +498,7 @@ function ReferencePill({
   if (url) {
     return /* @__PURE__ */ jsxs("div", { className: `${PILL} border-primary bg-primary/10 pr-1.5 text-primary hover:bg-primary/10`, children: [
       /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "h-[18px] w-[18px] shrink-0 rounded-[5px] object-cover" }),
-      /* @__PURE__ */ jsx("span", { children: "Reference" }),
+      /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: "Reference" }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -517,7 +542,7 @@ function ReferencePill({
         className: PILL,
         children: [
           /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4 shrink-0 text-muted-foreground", strokeWidth: 1.5 }),
-          /* @__PURE__ */ jsx("span", { children: "Reference image" })
+          /* @__PURE__ */ jsx("span", { className: PILL_LABEL, children: "Reference image" })
         ]
       }
     ),
@@ -578,6 +603,7 @@ function ModelPill({
   value,
   displayName,
   provider,
+  unavailable,
   onSelect,
   bandRef
 }) {
@@ -593,12 +619,13 @@ function ModelPill({
         ...triggerProps,
         "aria-controls": open ? panelId : void 0,
         title: "Model",
-        "aria-label": `Model: ${displayName}`,
+        "aria-label": `Model: ${displayName}${unavailable ? " (unavailable)" : ""}`,
         onClick: () => setOpen(!open),
-        className: PILL,
+        className: `${PILL}${unavailable ? " border-warning/50" : ""}`,
         children: [
+          unavailable && /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-warning", strokeWidth: 2 }),
           provider && /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 14 }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[168px] truncate", children: displayName }),
+          /* @__PURE__ */ jsx("span", { className: `max-w-[168px] truncate ${PILL_LABEL}`, children: displayName }),
           /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
         ]
       }
@@ -621,16 +648,18 @@ function ModelPill({
               type: "button",
               role: "menuitemradio",
               "aria-checked": model.id === value,
-              disabled: model.status === "unavailable",
               onClick: () => {
                 onSelect(model.id);
                 setOpen(false);
               },
-              className: `${menuRowClass(model.id === value)} disabled:opacity-50`,
+              className: menuRowClass(model.id === value),
               children: [
-                model.provider && /* @__PURE__ */ jsx(ProviderLogo, { provider: model.provider, size: 14 }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: model.name || model.id }),
-                model.status !== "available" && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[11px] capitalize text-muted-foreground", children: model.status }),
+                model.provider && /* @__PURE__ */ jsx("span", { className: model.status === "unavailable" ? "opacity-45" : void 0, children: /* @__PURE__ */ jsx(ProviderLogo, { provider: model.provider, size: 14 }) }),
+                /* @__PURE__ */ jsx("span", { className: `truncate${model.status === "unavailable" ? " opacity-45" : ""}`, children: model.name || model.id }),
+                model.status === "unavailable" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[11px] text-warning", children: "Unavailable" }),
+                  /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 text-warning", strokeWidth: 2 })
+                ] }) : model.status === "limited" && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[11px] capitalize text-muted-foreground", children: model.status }),
                 model.id === value && /* @__PURE__ */ jsx(CheckGlyph, { className: `${model.status === "available" ? "ml-auto " : ""}h-3.5 w-3.5 shrink-0 text-primary` })
               ]
             },
@@ -679,6 +708,17 @@ var PARAM_LABELS = {
   voice: "Voice",
   speed: "Speed"
 };
+var PARAM_ICONS = {
+  size: Scaling,
+  quality: Sparkles,
+  n: Copy,
+  duration: Clock,
+  resolution: Monitor,
+  aspect_ratio: Ratio,
+  mode: SlidersHorizontal,
+  voice: Mic,
+  speed: Gauge
+};
 var SPEED_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4];
 function choicesFor(param, meta) {
   const { min, max } = meta;
@@ -696,7 +736,7 @@ function visibleParams(type, options) {
 }
 function defaultModelId(type, catalog, curated) {
   const preferred = preferredModelId(type, catalog);
-  if (preferred && curated.some((model) => model.id === preferred)) return preferred;
+  if (preferred && curated.some((model) => model.id === preferred && model.status !== "unavailable")) return preferred;
   return curated.find((model) => model.status !== "unavailable")?.id ?? curated[0]?.id ?? "";
 }
 function StudioComposer({
@@ -748,9 +788,21 @@ function StudioComposer({
   const laneModels = useMemo2(() => catalog?.models[type] ?? [], [catalog, type]);
   const curatedModels = useMemo2(() => curateComposerModels(type, laneModels), [laneModels, type]);
   const retained = selectedModels[type];
-  const retainedUsable = retained !== void 0 && (!catalog || Boolean(textToVideoSibling(retained)) || curatedModels.some((model) => model.id === retained && model.status !== "unavailable"));
+  const retainedUsable = retained !== void 0 && (!catalog || Boolean(textToVideoSibling(retained)) || curatedModels.some((model) => model.id === retained));
   const modelId = retainedUsable ? retained : defaultModelId(type, catalog, curatedModels);
   const modelOption = laneModels.find((model) => model.id === modelId);
+  useEffect3(() => {
+    setSelectedModels((current) => {
+      const retainedId = current[type];
+      if (!retainedId || !catalog) return current;
+      if (textToVideoSibling(retainedId)) return current;
+      const row = (catalog.models[type] ?? []).find((model) => model.id === retainedId);
+      if (!row || row.status !== "unavailable") return current;
+      const next = { ...current };
+      delete next[type];
+      return next;
+    });
+  }, [catalog, type]);
   const options = useMemo2(
     () => modelId ? resolveComposerOptions({
       type,
@@ -776,6 +828,7 @@ function StudioComposer({
   const unlistedSibling = !modelOption && Boolean(textToVideoSibling(modelId));
   const referenceSupported = type === "video" && Boolean(imageToVideoSibling(modelId) ?? textToVideoSibling(modelId));
   const modelReady = (Boolean(modelOption) || unlistedSibling) && modelOption?.status !== "unavailable" && !catalogLoading && !catalogError;
+  const laneDown = Boolean(catalog) && !catalogLoading && !catalogError && laneUnavailable(curatedModels);
   const canSubmit = Boolean(workspaceId) && modelReady && Boolean(prompt.trim()) && !isSubmitting;
   function selectModel(id) {
     setSelectedModels((current) => ({ ...current, [type]: id }));
@@ -804,10 +857,7 @@ function StudioComposer({
     if (!workspaceId || submitLockRef.current || isSubmitting) return;
     const promptText = prompt.trim();
     if (!promptText) return;
-    if (!modelReady) {
-      if (!catalogLoading) setError("Select an available model");
-      return;
-    }
+    if (!modelReady) return;
     submitLockRef.current = true;
     setIsSubmitting(true);
     setError(null);
@@ -879,16 +929,19 @@ function StudioComposer({
       setIsSubmitting(false);
     }
   }
-  const statusMessage = unlistedSibling ? null : modelMessage(modelOption, catalogLoading, curatedModels.length);
-  const notice = catalogError ?? error ?? statusMessage;
-  const noticeIsProblem = Boolean(catalogError || error || modelOption?.status === "unavailable");
+  const notice = catalogError ?? error;
+  const laneLabel = SEGMENTS.find((segment) => segment.type === type).label;
+  const laneDownMessage = curatedModels.length > 0 ? `${laneLabel} models are temporarily unavailable` : `No ${laneLabel.toLowerCase()} models are available`;
   return /* @__PURE__ */ jsxs2(
     "section",
     {
       "data-variant": variant,
       className: `rounded-[14px] border border-border bg-card px-2.5 pb-[9px] pt-2 shadow-sm transition focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/30 ${className ?? ""}`,
       children: [
-        /* @__PURE__ */ jsx2(
+        laneDown ? /* @__PURE__ */ jsxs2("p", { className: "flex min-h-0 items-center gap-2 px-1.5 pb-3 pt-1.5 text-[13px] font-medium text-warning", children: [
+          /* @__PURE__ */ jsx2(TriangleAlert2, { "aria-hidden": true, className: "h-4 w-4 shrink-0", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx2("span", { children: laneDownMessage })
+        ] }) : /* @__PURE__ */ jsx2(
           "textarea",
           {
             value: prompt,
@@ -914,6 +967,7 @@ function StudioComposer({
                 value: modelId,
                 displayName: modelOption?.name || modelId || "Select a model",
                 provider: modelOption?.provider,
+                unavailable: modelOption?.status === "unavailable",
                 onSelect: chooseModel,
                 bandRef
               }
@@ -922,6 +976,7 @@ function StudioComposer({
               OptionPill,
               {
                 label: PARAM_LABELS[param] ?? param,
+                icon: PARAM_ICONS[param] ?? SlidersHorizontal,
                 value: values[param],
                 choices: choicesForPill(param, options?.[param], values[param]),
                 onSelect: (value) => setOption(param, value),
@@ -973,7 +1028,7 @@ function StudioComposer({
             }
           )
         ] }),
-        notice && /* @__PURE__ */ jsx2("p", { className: `px-1.5 pt-1.5 text-[12px] ${noticeIsProblem ? "text-destructive" : "text-muted-foreground"}`, children: notice })
+        notice && /* @__PURE__ */ jsx2("p", { className: "px-1.5 pt-1.5 text-[12px] text-destructive", children: notice })
       ]
     }
   );
@@ -1001,8 +1056,8 @@ function GenerationNoticeChip({ className }) {
   return /* @__PURE__ */ jsxs3(
     "p",
     {
-      className: `inline-block rounded-full border px-3.5 py-1.5 text-center text-[12.5px] font-medium leading-relaxed text-foreground shadow-sm ${className ?? ""}`,
-      style: { background: "var(--studio-notice-bg)", borderColor: "var(--studio-notice-border)" },
+      className: `inline-block rounded-full px-3.5 py-1.5 text-center text-[12px] leading-relaxed text-muted-foreground ${className ?? ""}`,
+      style: { background: "var(--studio-notice-bg)" },
       children: [
         /* @__PURE__ */ jsx3(Info, { className: "mr-1.5 inline-block h-[14px] w-[14px] align-[-2px] text-primary", strokeWidth: 1.5, "aria-hidden": true }),
         "Each prompt starts a new generation \u2014 this chat does not remember the last one."
@@ -2172,6 +2227,7 @@ function StudioToast({ record, leave }) {
 function StudioToastProvider({ children }) {
   const [toasts, setToasts] = useState8([]);
   const [dockLift, setDockLift] = useState8(null);
+  const [mounted, setMounted] = useState8(false);
   const sequence = useRef7(0);
   const dismissed = useRef7(/* @__PURE__ */ new Set());
   const records = useRef7(/* @__PURE__ */ new Map());
@@ -2196,9 +2252,10 @@ function StudioToastProvider({ children }) {
   }, []);
   const dismiss = useCallback5((id) => leave(id, "dismissed"), [leave]);
   const value = useMemo5(() => ({ toast, dismiss, setDockLift }), [dismiss, toast]);
+  useEffect9(() => setMounted(true), []);
   return /* @__PURE__ */ jsxs8(StudioToastContext.Provider, { value, children: [
     children,
-    typeof document !== "undefined" && createPortal3(
+    mounted && createPortal3(
       /* @__PURE__ */ jsx9(
         "div",
         {
@@ -2653,7 +2710,18 @@ import {
   useMemo as useMemo9,
   useState as useState13
 } from "react";
-import { ArrowLeft as ArrowLeft2, Download as Download3, FolderPlus as FolderPlus3, Search, Trash2 as Trash23, X as X4 } from "lucide-react";
+import {
+  ArrowLeft as ArrowLeft2,
+  AudioLines as AudioLines2,
+  Download as Download3,
+  FolderPlus as FolderPlus3,
+  Image,
+  LayoutGrid,
+  Search,
+  Trash2 as Trash23,
+  Video as Video2,
+  X as X4
+} from "lucide-react";
 
 // src/studio-react/use-generation-history.ts
 import { useCallback as useCallback10, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef11, useState as useState12 } from "react";
@@ -2798,6 +2866,16 @@ var MORE_SKELETONS = 4;
 var BAR = "flex min-h-[44px] flex-wrap items-center justify-between gap-3 px-6 pb-[18px] pt-0.5 max-[900px]:px-4";
 var SEARCH_INPUT = "h-8 w-[260px] max-w-[52vw] rounded-full border border-border bg-card pl-8 pr-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary focus:ring-[3px] focus:ring-ring/30 max-[640px]:w-full max-[640px]:max-w-none";
 var OUTLINE_PILL = "inline-flex h-8 items-center gap-1.5 rounded-full border border-border px-3 text-[12.5px] font-medium hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40";
+var FILTER_ICONS = {
+  all: LayoutGrid,
+  image: Image,
+  video: Video2,
+  speech: AudioLines2
+};
+var FILTER_CHOICES = MEDIA_TYPE_FILTERS.map((choice) => ({
+  ...choice,
+  icon: FILTER_ICONS[choice.value]
+}));
 var TYPE_NOUNS = {
   image: "images",
   video: "videos",
@@ -3048,8 +3126,9 @@ function StudioHistoryScreen({
           {
             label: "Filter by media type",
             value: type,
-            choices: MEDIA_TYPE_FILTERS,
-            onSelect: setType
+            choices: FILTER_CHOICES,
+            onSelect: setType,
+            trigger: "text"
           }
         )
       ] })