@tangle-network/agent-app 0.46.6 → 0.46.7

package/dist/studio-react/composer-option-controls.d.ts

@@ -51,17 +51,21 @@ export declare function ComposerBand({ bandRef, resetKey, children, }: {
 export interface OptionChoice {
     value: ModelOptionValue;
     label: string;
+    icon?: LucideIcon;
 }
 /** A standalone enum picker using the studio composer's pill and menu grammar. */
-export declare function MenuPill<T extends string>({ label, value, choices, onSelect, className, }: {
+export declare function MenuPill<T extends string>({ label, value, choices, onSelect, className, icon: Icon, trigger, }: {
     label: string;
     value: T;
     choices: readonly {
         value: T;
         label: string;
+        icon?: LucideIcon;
     }[];
     onSelect: (value: T) => void;
     className?: string;
+    icon?: LucideIcon;
+    trigger?: 'pill' | 'text';
 }): JSX.Element;
 /**
  * A value pill and the menu it opens.
@@ -71,12 +75,13 @@ export declare function MenuPill<T extends string>({ label, value, choices, onSe
  * and "5s" alone tells a screen-reader user nothing about which parameter it
  * belongs to.
  */
-export declare function OptionPill({ label, value, choices, onSelect, bandRef, custom, }: {
+export declare function OptionPill({ label, value, choices, onSelect, bandRef, custom, icon: Icon, }: {
     label: string;
     value: ModelOptionValue | undefined;
     choices: readonly OptionChoice[];
     onSelect: (value: ModelOptionValue) => void;
     bandRef: RefObject<HTMLDivElement | null>;
+    icon?: LucideIcon;
     /** A trailing row that swaps the menu to a form (the gpt-image-2 custom
      *  size). Absent for every parameter whose values are an enum. */
     custom?: {

package/dist/studio-react/generation-notice.d.ts

@@ -4,10 +4,9 @@
  *
  * A chat card sets the expectation that the thing on the other side remembers
  * the conversation. This one does not, and the cost of learning that by
- * experiment is a wasted generation. So the notice sits above the composer as a
- * statement of fact rather than a warning — `text-foreground`, not muted, since
- * a rule the reader must know before typing cannot be the quietest text on the
- * page.
+ * experiment is a wasted generation. The chip is a soft brand-tinted hint: its
+ * primary-tinted surface and primary icon keep it noticeable, while the hard
+ * border and shadow read as an alert and were cut after gtm QA (issue #465).
  *
  * The icon is INLINE in the text flow rather than a flex sibling, so a narrow
  * viewport wraps it with the sentence instead of stranding a lone glyph beside

package/dist/studio-react/index.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, TriangleAlert as TriangleAlert2, 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 {
@@ -120,6 +135,7 @@ import {
 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" })
         ]
       }
     ),
@@ -600,7 +625,7 @@ function ModelPill({
         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" })
         ]
       }
@@ -683,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;
@@ -940,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),
@@ -1019,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."
@@ -2190,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());
@@ -2214,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",
         {
@@ -2671,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";
@@ -2816,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",
@@ -3066,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"
           }
         )
       ] })