@tangle-network/agent-app 0.46.4 → 0.46.6

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,7 @@ 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, Image as ImageIcon, TriangleAlert as TriangleAlert2, Video } from "lucide-react";
 
 // src/studio-react/composer-option-controls.tsx
 import {
@@ -117,7 +117,7 @@ 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 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}`;
@@ -578,6 +578,7 @@ function ModelPill({
   value,
   displayName,
   provider,
+  unavailable,
   onSelect,
   bandRef
 }) {
@@ -593,10 +594,11 @@ 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(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
@@ -621,16 +623,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` })
               ]
             },
@@ -696,7 +700,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 +752,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 +792,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 +821,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 +893,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 +931,7 @@ function StudioComposer({
                 value: modelId,
                 displayName: modelOption?.name || modelId || "Select a model",
                 provider: modelOption?.provider,
+                unavailable: modelOption?.status === "unavailable",
                 onSelect: chooseModel,
                 bandRef
               }
@@ -973,7 +991,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 })
       ]
     }
   );