@truefoundry/trueforge-ui 0.1.0-rc.1 → 0.1.0

package/dist/{chunk-Z27F4LBZ.js → chunk-QGNLP2EE.js}

@@ -12,10 +12,10 @@ import {
   useOptionalServer,
   useOptionalShellMode,
   useServerCapabilities
-} from "./chunk-U5GBGEGN.js";
+} from "./chunk-XAZ5HJXV.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-FDBJNXH2.js";
+} from "./chunk-HT5HKQXE.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -23,7 +23,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-WMRZSULD.js";
+} from "./chunk-DTF7ZMUJ.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -2212,6 +2212,8 @@ import { cloneElement, isValidElement, useLayoutEffect as useLayoutEffect2, useR
 import { createPortal } from "react-dom";
 import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function themePortalRoot(from) {
+  const dialog = from?.closest("dialog");
+  if (dialog instanceof HTMLElement) return dialog;
   return from?.closest(".aui-theme-root") ?? document.body;
 }
 function Tooltip({ content, children, className, side = "top" }) {
@@ -2391,8 +2393,37 @@ function DraftCapabilitiesPanel({
   value,
   onChange,
   disabled = false,
-  divided = false
+  divided = false,
+  layout = "list"
 }) {
+  if (layout === "cards") {
+    return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 sm:flex-row", children: CAPABILITIES.map((capability) => {
+      const checked = value[capability.id];
+      return /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          className: "border-border flex min-w-0 flex-col gap-2 rounded-lg border p-3 sm:flex-1",
+          children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx35("p", { className: "text-text-primary text-sm font-medium", children: capability.label }),
+              /* @__PURE__ */ jsx35(
+                Switch,
+                {
+                  checked,
+                  "aria-label": capability.label,
+                  disabled,
+                  className: "mt-0.5",
+                  onCheckedChange: (nextChecked) => onChange({ ...value, [capability.id]: nextChecked })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx35("p", { className: "text-text-secondary text-xs leading-snug", children: capability.description })
+          ]
+        },
+        capability.id
+      );
+    }) });
+  }
   return /* @__PURE__ */ jsx35("div", { className: cn("flex flex-col", divided && "overflow-hidden rounded-xl border border-border"), children: CAPABILITIES.map((capability, index) => {
     const checked = value[capability.id];
     return /* @__PURE__ */ jsxs24(
@@ -3304,7 +3335,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Fragment as Fragment8, jsx as jsx41 } from "react/jsx-runtime";
 function preloadMarkdownOpenUI() {
-  return import("./OpenUiFenceBlock-A2CWCPOP.js");
+  return import("./OpenUiFenceBlock-XFBUGPKQ.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -3977,32 +4008,94 @@ function editableMountsFromSpec(value) {
   }
   return mounts;
 }
-function SummarySection({
-  icon,
-  title,
-  value,
+function ConfigSection({
+  label,
   onEdit,
-  disabled
+  disabled,
+  children
 }) {
-  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3 border-b border-border px-5 py-3.5 last:border-b-0", children: [
-    /* @__PURE__ */ jsx49(Icon, { name: icon, className: "text-text-secondary size-4 shrink-0" }),
-    /* @__PURE__ */ jsxs31("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx49("p", { className: "text-text-primary text-sm font-medium", children: title }),
-      /* @__PURE__ */ jsx49("p", { className: "text-text-secondary mt-0.5 truncate text-xs", children: value })
+  return /* @__PURE__ */ jsxs31("div", { className: "mb-3", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx49("span", { className: "text-text-secondary text-xs font-semibold tracking-wide uppercase", children: label }),
+      /* @__PURE__ */ jsx49(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Edit ${label}`,
+          disabled,
+          className: auiButtonClass({ variant: "ghost", size: "icon", className: "size-7" }),
+          onClick: onEdit,
+          children: /* @__PURE__ */ jsx49(Icon, { name: "pencil", className: "size-3.5" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx49(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Edit ${title}`,
-        disabled,
-        className: auiButtonClass({ variant: "ghost", size: "icon", className: "size-8" }),
-        onClick: onEdit,
-        children: /* @__PURE__ */ jsx49(Icon, { name: "pencil", className: "size-3.5" })
-      }
-    )
+    children
   ] });
 }
+var PRELOAD_TOOLS_COPY = {
+  header: "Preload tools",
+  on: "Tool definitions load into context upfront. No discovery step, but uses more context.",
+  off: "The agent discovers tools on demand. Lighter context upfront, but a discovery step the first time it needs a tool."
+};
+function PreloadToggle({ on, disabled, onToggle }) {
+  const label = `${PRELOAD_TOOLS_COPY.header} \xB7 ${on ? "ON" : "OFF"}`;
+  const body = on ? PRELOAD_TOOLS_COPY.on : PRELOAD_TOOLS_COPY.off;
+  return /* @__PURE__ */ jsx49(
+    Tooltip,
+    {
+      className: "max-w-[17rem] whitespace-normal",
+      content: /* @__PURE__ */ jsxs31("div", { className: "text-left", children: [
+        /* @__PURE__ */ jsx49("p", { className: "mb-1 text-[11px] font-semibold tracking-wide uppercase", children: label }),
+        /* @__PURE__ */ jsx49("p", { className: "text-xs leading-snug", children: body })
+      ] }),
+      children: /* @__PURE__ */ jsx49(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          "aria-pressed": on,
+          disabled,
+          onClick: onToggle,
+          className: cn(
+            "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border",
+            "transition-[color,background-color,border-color,transform] active:scale-90",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring/40",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
+            on ? "border-primary-button-bg/40 bg-primary-button-bg/10 text-primary-button-bg hover:border-primary-button-bg/70 hover:bg-primary-button-bg/20" : "border-border text-text-secondary hover:border-text-secondary/50 hover:bg-text-secondary/10 hover:text-text-primary"
+          ),
+          children: /* @__PURE__ */ jsx49(Icon, { name: "book-open", className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+function MountChips({
+  mounts,
+  disabled,
+  emptyLabel,
+  onTogglePreload
+}) {
+  if (mounts.length === 0) {
+    return /* @__PURE__ */ jsx49("p", { className: "text-text-secondary text-xs", children: emptyLabel });
+  }
+  return /* @__PURE__ */ jsx49("div", { className: "flex flex-wrap gap-2", children: mounts.map((mount) => {
+    const on = Boolean(mount.value.preload);
+    return /* @__PURE__ */ jsxs31(
+      "span",
+      {
+        className: cn(
+          "border-border flex items-center gap-2 rounded-lg border py-1 pr-2.5",
+          onTogglePreload ? "pl-1.5" : "pl-2.5"
+        ),
+        children: [
+          onTogglePreload ? /* @__PURE__ */ jsx49(PreloadToggle, { on, disabled, onToggle: () => onTogglePreload(mount.id) }) : null,
+          /* @__PURE__ */ jsx49("span", { className: "text-text-primary text-sm", children: mount.name })
+        ]
+      },
+      mount.id
+    );
+  }) });
+}
 function SaveAgentButton({ disabled = false, className, children = "Save Agent" }) {
   return /* @__PURE__ */ jsx49(DraftCatalogProvider, { children: /* @__PURE__ */ jsx49(SaveAgentButtonContent, { disabled, className, children }) });
 }
@@ -4034,6 +4127,10 @@ function SaveAgentButtonContent({
   const errorRef = useRef11(null);
   const mcpMounts = useMemo6(() => editableMountsFromSpec(draftSpec?.mcpServers), [draftSpec?.mcpServers]);
   const skillMounts = useMemo6(() => editableMountsFromSpec(draftSpec?.skills), [draftSpec?.skills]);
+  const modelEntry = useMemo6(
+    () => catalog.models.find((model) => model.name === draftSpec?.model.name),
+    [catalog.models, draftSpec?.model.name]
+  );
   useEffect13(() => {
     if (error === null) return;
     errorRef.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
@@ -4096,6 +4193,15 @@ function SaveAgentButtonContent({
       setSaving(false);
     }
   };
+  const toggleMcpPreload = (id) => {
+    if (draftSpec === null) return;
+    const next = (draftSpec.mcpServers ?? []).map((item) => {
+      const record = item;
+      const itemId = typeof record.id === "string" ? record.id : record.name;
+      return itemId === id ? { ...record, preload: record.preload !== true } : item;
+    });
+    setDraftSpec({ ...draftSpec, mcpServers: next });
+  };
   const filteredConnectors = catalog.connectors.filter(
     (item) => `${item.name} ${item.description ?? ""}`.toLowerCase().includes(search.trim().toLowerCase())
   );
@@ -4125,12 +4231,11 @@ function SaveAgentButtonContent({
         open,
         onOpenChange: (next) => !next && close(),
         title: intent === "create" ? "Save agent" : "Update agent",
-        description: "Review the configuration before saving.",
-        className: "md:max-w-lg",
+        className: "md:h-auto md:max-h-[85dvh] md:max-w-2xl",
         "aria-label": intent === "create" ? "Save agent" : "Update agent",
-        children: draftSpec ? /* @__PURE__ */ jsxs31("div", { className: "flex min-h-0 w-[min(32rem,calc(100vw-2rem))] flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs31("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: [
-            /* @__PURE__ */ jsxs31("label", { className: "mb-4 block", children: [
+        children: draftSpec ? /* @__PURE__ */ jsxs31("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-3", children: [
+            /* @__PURE__ */ jsxs31("label", { className: "mb-3 block", children: [
               /* @__PURE__ */ jsx49("span", { className: "mb-1.5 block text-sm font-medium", children: "Agent name" }),
               /* @__PURE__ */ jsx49(
                 "input",
@@ -4143,7 +4248,7 @@ function SaveAgentButtonContent({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs31("label", { className: "mb-4 block", children: [
+            /* @__PURE__ */ jsxs31("label", { className: "mb-3 block", children: [
               /* @__PURE__ */ jsx49("span", { className: "mb-1.5 block text-sm font-medium", children: "Instructions" }),
               /* @__PURE__ */ jsx49(
                 "textarea",
@@ -4151,53 +4256,39 @@ function SaveAgentButtonContent({
                   value: draftSpec.instructions ?? "",
                   disabled: saving,
                   onChange: (event) => setDraftSpec({ ...draftSpec, instructions: event.target.value }),
-                  rows: 4,
+                  rows: 5,
                   placeholder: "You are a release notes writer for a platform team.",
                   className: auiInputClass("resize-y py-2 disabled:opacity-60")
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs31("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx49("h3", { className: "mb-2 text-sm font-medium", children: "Configuration" }),
-              /* @__PURE__ */ jsxs31("div", { className: "overflow-hidden rounded-xl border border-border", children: [
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "cpu",
-                    title: "Model",
-                    value: draftSpec.model.name ? displayModelLabel2(draftSpec.model.name) : "Not selected",
-                    disabled: saving,
-                    onEdit: () => setEditor("model")
-                  }
-                ),
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "plug",
-                    title: "Connectors",
-                    value: `${mcpMounts.length} selected`,
-                    disabled: saving,
-                    onEdit: () => setEditor("mcp")
-                  }
-                ),
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "lightbulb",
-                    title: "Skills",
-                    value: `${skillMounts.length} selected`,
-                    disabled: saving,
-                    onEdit: () => setEditor("skills")
-                  }
-                )
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Model", onEdit: () => setEditor("model"), disabled: saving, children: draftSpec.model.name ? /* @__PURE__ */ jsxs31("span", { className: "border-border inline-flex items-center gap-2 rounded-lg border py-1 pr-2.5 pl-2", children: [
+              /* @__PURE__ */ jsx49(
+                ProviderMark,
+                {
+                  logo: modelEntry?.provider.logo,
+                  label: modelEntry?.provider.name ?? draftSpec.model.name,
+                  className: "size-5 text-[10px]"
+                }
+              ),
+              /* @__PURE__ */ jsx49("span", { className: "text-text-primary text-sm", children: displayModelLabel2(draftSpec.model.name) })
+            ] }) : /* @__PURE__ */ jsx49("p", { className: "text-text-secondary text-xs", children: "No model selected." }) }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Connectors", onEdit: () => setEditor("mcp"), disabled: saving, children: /* @__PURE__ */ jsx49(
+              MountChips,
+              {
+                mounts: mcpMounts,
+                disabled: saving,
+                emptyLabel: "No connectors added.",
+                onTogglePreload: toggleMcpPreload
+              }
+            ) }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Skills", onEdit: () => setEditor("skills"), disabled: saving, children: /* @__PURE__ */ jsx49(MountChips, { mounts: skillMounts, disabled: saving, emptyLabel: "No skills added." }) }),
             /* @__PURE__ */ jsxs31("div", { children: [
-              /* @__PURE__ */ jsx49("h3", { className: "mb-2 text-sm font-medium", children: "Capabilities" }),
+              /* @__PURE__ */ jsx49("p", { className: "text-text-secondary mb-1.5 text-xs font-semibold tracking-wide uppercase", children: "Capabilities" }),
               /* @__PURE__ */ jsx49(
                 DraftCapabilitiesPanel,
                 {
-                  divided: true,
+                  layout: "cards",
                   value: readAgentCapabilities(draftSpec.config),
                   disabled: saving,
                   onChange: (values) => setDraftSpec({
@@ -6661,6 +6752,7 @@ export {
   ComposerShell,
   useIsMobile,
   BottomSheet,
+  modelPatchWithReasoningEffort,
   DraftComposerLeftSection,
   DraftComposerRightSection,
   ToasterProvider,
@@ -6716,4 +6808,4 @@ export {
   WelcomeScreen,
   defaultSlots
 };
-//# sourceMappingURL=chunk-Z27F4LBZ.js.map
+//# sourceMappingURL=chunk-QGNLP2EE.js.map