@datatechsolutions/ui 3.7.5 → 3.8.1

package/dist/platform/pages/index.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-4HP7XS5I.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-4HP7XS5I.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-DCBRGVD3.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-DCBRGVD3.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-EIZM2EQA.mjs';
+import { WorkflowWorkspace } from '../../chunk-5W6LMDXV.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-5W6LMDXV.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-A4A3SQTV.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-A4A3SQTV.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-5YVOLHSW.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-N5365CGD.mjs';
-import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, ManagementPageLayout, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent } from '../../chunk-Z3BMHKKH.mjs';
+import '../../chunk-57E4TCB2.mjs';
+import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, ManagementPageLayout, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent } from '../../chunk-E6C7MFHJ.mjs';
+import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-RHRJXK5R.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
-import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-PLTLRL2V.mjs';
 import { Badge, Button } from '../../chunk-WR55H7DH.mjs';
 import '../../chunk-D2JF6C3E.mjs';
@@ -2342,6 +2342,7 @@ function AgentsWorkspacePageView({
       {
         labels,
         models,
+        connections,
         onClose: () => setCreateOpen(false),
         onSubmit: async (input) => {
           await onCreateAgent(input);
@@ -2770,30 +2771,152 @@ function ModelTab({
   );
 }
 var AGENT_PRESETS = [
-  { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600" },
-  { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600" },
-  { id: "finance", emoji: "\u{1F4CA}", name: "Financial Analyst", role: "Revenue, margins, reports", systemPrompt: "You are a financial analyst. Analyze revenue, calculate margins, generate performance reports, and identify trends. Use data-driven insights for recommendations.", temperature: 0.4, maxTokens: 4096, accent: "from-amber-500 to-orange-600" },
-  { id: "security", emoji: "\u{1F6E1}\uFE0F", name: "Security Analyst", role: "Threat monitoring & compliance", systemPrompt: "You are a security analyst. Monitor for threats, audit data access, ensure compliance with privacy regulations, and manage incident response.", temperature: 0.3, maxTokens: 2048, accent: "from-rose-500 to-red-600" },
-  { id: "data", emoji: "\u{1F52C}", name: "Data Analyst", role: "Pattern detection & cleaning", systemPrompt: "You are a data analyst. Process raw data inputs, identify patterns, clean datasets, and prepare structured analysis for downstream agents.", temperature: 0.5, maxTokens: 4096, accent: "from-violet-500 to-purple-600" },
+  { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600", framework: "anthropic" },
+  { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600", framework: "crewai" },
+  { id: "finance", emoji: "\u{1F4CA}", name: "Financial Analyst", role: "Revenue, margins, reports", systemPrompt: "You are a financial analyst. Analyze revenue, calculate margins, generate performance reports, and identify trends. Use data-driven insights for recommendations.", temperature: 0.4, maxTokens: 4096, accent: "from-amber-500 to-orange-600", framework: "langchain" },
+  { id: "security", emoji: "\u{1F6E1}\uFE0F", name: "Security Analyst", role: "Threat monitoring & compliance", systemPrompt: "You are a security analyst. Monitor for threats, audit data access, ensure compliance with privacy regulations, and manage incident response.", temperature: 0.3, maxTokens: 2048, accent: "from-rose-500 to-red-600", framework: "anthropic" },
+  { id: "data", emoji: "\u{1F52C}", name: "Data Analyst", role: "Pattern detection & cleaning", systemPrompt: "You are a data analyst. Process raw data inputs, identify patterns, clean datasets, and prepare structured analysis for downstream agents.", temperature: 0.5, maxTokens: 4096, accent: "from-violet-500 to-purple-600", framework: "google-adk" },
   { id: "custom", emoji: "\u2728", name: "", role: "", systemPrompt: "", temperature: 0.2, maxTokens: 2048, accent: "from-slate-500 to-slate-700" }
 ];
+var DIFFICULTY_OPTIONS = [
+  { id: "beginner", emoji: "\u{1F331}", accent: "from-emerald-500 to-teal-600" },
+  { id: "intermediate", emoji: "\u26A1", accent: "from-sky-500 to-indigo-600" },
+  { id: "advanced", emoji: "\u{1F680}", accent: "from-amber-500 to-orange-600" },
+  { id: "expert", emoji: "\u{1F9E0}", accent: "from-rose-500 to-purple-600" }
+];
 var EMOJI_PALETTE = ["\u{1F4BC}", "\u{1F3A7}", "\u{1F4CA}", "\u{1F6E1}\uFE0F", "\u{1F52C}", "\u2728", "\u{1F916}", "\u26A1", "\u{1F3AF}", "\u{1F680}", "\u{1F9E0}", "\u{1F9BE}", "\u{1F4E1}", "\u{1F52E}", "\u{1F310}", "\u{1F5C2}\uFE0F"];
+function RangeSliderField({
+  sliderId,
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  zones,
+  trackGradient,
+  formatValue,
+  ariaLabel
+}) {
+  const percent = (value - min) / (max - min) * 100;
+  const activeZone = zones?.find((z) => value <= z.max) ?? zones?.[zones.length - 1];
+  const thumbColor = activeZone?.thumbColor ?? "#6366f1";
+  const glow = hexToGlow(thumbColor);
+  const displayValue = formatValue ? formatValue(value) : value.toString();
+  const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(0, Math.min(100, percent))}%`,
+            background: trackGradient ?? `linear-gradient(90deg, ${thumbColor}, ${thumbColor})`
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: sliderId,
+          "data-slider-id": sliderId,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => onChange(parseFloat(e.target.value)),
+          "aria-label": ariaLabel ?? label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-valuetext": ariaText,
+          className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
+    ] }),
+    zones && zones.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center justify-between", children: zones.map((z) => {
+      const isActive = z.label === activeZone?.label;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          children: z.label
+        },
+        z.label
+      );
+    }) })
+  ] });
+}
+function hexToGlow(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return "rgba(99,102,241,0.5)";
+  const int = parseInt(m[1], 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `rgba(${r},${g},${b},0.5)`;
+}
 function CreateAgentDialog({
   labels,
   models,
+  connections,
   onClose,
   onSubmit
 }) {
-  const modelOptions = models.map((m) => ({ value: m.id, label: `${m.name} (${m.provider})` }));
   const [presetId, setPresetId] = useState("custom");
   const [emoji, setEmoji] = useState("\u2728");
   const [name, setName] = useState("");
   const [role, setRole] = useState("");
+  const [description, setDescription] = useState("");
   const [systemPrompt, setSystemPrompt] = useState("");
+  const [userPrompt, setUserPrompt] = useState("");
   const [temperature, setTemperature] = useState(0.2);
   const [maxTokens, setMaxTokens] = useState(2048);
-  const [modelId, setModelId] = useState(modelOptions[0]?.value ?? "");
+  const [topP, setTopP] = useState(1);
+  const [topK, setTopK] = useState(0);
+  const [connectionId, setConnectionId] = useState("");
+  const [framework, setFramework] = useState("");
+  const [difficulty, setDifficulty] = useState("intermediate");
+  const [tagsInput, setTagsInput] = useState("");
+  const [outputSchema, setOutputSchema] = useState("");
+  const [modelId, setModelId] = useState(models[0]?.id ?? "");
   const activePreset = AGENT_PRESETS.find((p) => p.id === presetId) ?? AGENT_PRESETS[AGENT_PRESETS.length - 1];
+  const matchingModels = useMemo(() => {
+    if (!connectionId) return models;
+    const conn = connections.find((c) => c.id === connectionId);
+    const slug = conn?.providerSlug;
+    if (!slug) return models;
+    const matches = models.filter(
+      (m) => (m.provider ?? "") === slug || String(m.provider ?? "").startsWith(slug)
+    );
+    return matches.length > 0 ? matches : models;
+  }, [models, connections, connectionId]);
+  const modelOptions = matchingModels.map((m) => ({ value: m.id, label: `${m.name} (${m.provider})` }));
+  const connectionOptions = useMemo(() => {
+    const inline = { value: "", label: labels.connectionInline ?? "Inline model (no connection)" };
+    return [
+      inline,
+      ...connections.map((c) => ({
+        value: c.id,
+        label: `${c.name}${c.providerSlug ? " \xB7 " + c.providerSlug : ""}`
+      }))
+    ];
+  }, [connections, labels.connectionInline]);
+  const frameworkOptions = useMemo(() => [
+    { value: "", label: labels.connectionInline ?? "\u2014" },
+    { value: "anthropic", label: labels.frameworkAnthropic ?? "Anthropic" },
+    { value: "langchain", label: labels.frameworkLangChain ?? "LangChain" },
+    { value: "crewai", label: labels.frameworkCrewAI ?? "CrewAI" },
+    { value: "google-adk", label: labels.frameworkGoogleADK ?? "Google ADK" },
+    { value: "openai", label: labels.frameworkOpenAI ?? "OpenAI" }
+  ], [labels]);
   function applyPreset(preset) {
     setPresetId(preset.id);
     setEmoji(preset.emoji);
@@ -2803,6 +2926,7 @@ function CreateAgentDialog({
       setSystemPrompt(preset.systemPrompt);
       setTemperature(preset.temperature);
       setMaxTokens(preset.maxTokens);
+      if (preset.framework) setFramework(preset.framework);
     }
   }
   return /* @__PURE__ */ jsx(
@@ -2826,12 +2950,24 @@ function CreateAgentDialog({
       submitLabel: labels.save,
       onSubmit: async (event) => {
         event.preventDefault();
+        const parsedTags = tagsInput.split(",").map((t) => t.trim()).filter((t) => t.length > 0);
         await onSubmit({
           name: name.trim() || activePreset.name || "Untitled Agent",
+          role: role.trim() || void 0,
+          description: description.trim() || void 0,
+          avatar: emoji,
           modelId,
+          connectionId: connectionId || void 0,
+          framework: framework || void 0,
           systemPrompt,
+          userPrompt: userPrompt.trim() || void 0,
           maxTokens,
-          temperature
+          temperature,
+          topP,
+          topK,
+          difficulty: difficulty || void 0,
+          tags: parsedTags.length > 0 ? parsedTags : void 0,
+          outputSchema: outputSchema.trim() || void 0
         });
       },
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
@@ -2921,7 +3057,17 @@ function CreateAgentDialog({
                     placeholder: labels.rolePlaceholder
                   }
                 )
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                FormTextarea,
+                {
+                  label: labels.descriptionLabel ?? labels.description,
+                  value: description,
+                  onValueChange: setDescription,
+                  rows: 2,
+                  placeholder: labels.descriptionPlaceholder ?? "A short summary of what this agent does."
+                }
+              )
             ] })
           }
         ),
@@ -2930,21 +3076,30 @@ function CreateAgentDialog({
           {
             variant: "glass",
             header: {
-              title: labels.behaviorSection ?? "Behavior",
-              subtitle: labels.behaviorSubtitle ?? "System prompt shapes how the agent thinks"
+              title: labels.modelSection ?? "Model and connection",
+              subtitle: labels.connectionPickPrompt ?? "Pick the provider connection or use an inline model"
             },
             children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx(
-                FormTextarea,
-                {
-                  label: labels.promptSystemPrompt ?? "System prompt",
-                  value: systemPrompt,
-                  onValueChange: setSystemPrompt,
-                  rows: 5,
-                  placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
-                }
-              ),
               /* @__PURE__ */ jsxs(FormGrid, { children: [
+                /* @__PURE__ */ jsx(
+                  FormSelect,
+                  {
+                    label: labels.connectionLabel ?? labels.connection,
+                    value: connectionId,
+                    onValueChange: setConnectionId,
+                    options: connectionOptions,
+                    icon: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FormSelect,
+                  {
+                    label: labels.frameworkLabel ?? "Framework",
+                    value: framework,
+                    onValueChange: setFramework,
+                    options: frameworkOptions
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   FormSelect,
                   {
@@ -2953,31 +3108,212 @@ function CreateAgentDialog({
                     onValueChange: setModelId,
                     options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
                   }
-                ),
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                FormTextarea,
+                {
+                  label: labels.outputSchemaLabel ?? "Output schema (JSON)",
+                  value: outputSchema,
+                  onValueChange: setOutputSchema,
+                  rows: 4,
+                  placeholder: labels.outputSchemaPlaceholder ?? '{\n  "type": "object",\n  "properties": { "summary": { "type": "string" } }\n}'
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SectionCard,
+          {
+            variant: "glass",
+            header: {
+              title: labels.behaviorSection ?? "Behavior",
+              subtitle: labels.behaviorSubtitle ?? "System prompt shapes how the agent thinks"
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-system-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.promptSystemPrompt ?? "System prompt" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    systemPrompt.length,
+                    " chars"
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  FormInput,
+                  "textarea",
                   {
-                    label: labels.maxTokens,
-                    type: "number",
-                    value: String(maxTokens),
-                    onValueChange: (v) => setMaxTokens(Number(v) || 0),
-                    min: 1,
-                    max: 32e3
+                    id: "create-agent-system-prompt",
+                    value: systemPrompt,
+                    onChange: (e) => setSystemPrompt(e.target.value),
+                    rows: 8,
+                    className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                    placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
                   }
-                ),
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-user-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.userPromptLabel ?? "User prompt template" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    userPrompt.length,
+                    " chars"
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  FormInput,
+                  "textarea",
+                  {
+                    id: "create-agent-user-prompt",
+                    value: userPrompt,
+                    onChange: (e) => setUserPrompt(e.target.value),
+                    rows: 5,
+                    className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                    placeholder: labels.userPromptPlaceholder ?? "Analyze {{ nodeId.path }} and produce a summary."
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                RangeSliderField,
+                {
+                  sliderId: "create-agent-temperature",
+                  label: labels.temperature,
+                  value: temperature,
+                  onChange: setTemperature,
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  trackGradient: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)",
+                  formatValue: (v) => v.toFixed(2),
+                  zones: [
+                    { label: "Precise", max: 0.3, color: "text-blue-500", thumbColor: "#3b82f6" },
+                    { label: "Balanced", max: 0.7, color: "text-purple-500", thumbColor: "#8b5cf6" },
+                    { label: "Creative", max: 1, color: "text-pink-500", thumbColor: "#ec4899" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSliderField,
+                {
+                  sliderId: "create-agent-top-p",
+                  label: labels.topPLabel ?? "Top-P",
+                  value: topP,
+                  onChange: setTopP,
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  trackGradient: "linear-gradient(90deg, #6366f1, #8b5cf6)",
+                  formatValue: (v) => v.toFixed(2),
+                  zones: [
+                    { label: "Top-P", max: 1, color: "text-violet-500", thumbColor: "#8b5cf6" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSliderField,
+                {
+                  sliderId: "create-agent-top-k",
+                  label: labels.topKLabel ?? "Top-K",
+                  value: topK,
+                  onChange: (v) => setTopK(Math.max(0, Math.floor(v))),
+                  min: 0,
+                  max: 500,
+                  step: 1,
+                  trackGradient: "linear-gradient(90deg, #10b981, #14b8a6)",
+                  formatValue: (v) => v.toString(),
+                  zones: [
+                    { label: "Top-K", max: 500, color: "text-emerald-500", thumbColor: "#10b981" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "create-agent-max-tokens", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.maxTokens }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
                   {
-                    label: `${labels.temperature} (${temperature.toFixed(2)})`,
+                    id: "create-agent-max-tokens",
                     type: "number",
-                    value: String(temperature),
-                    onValueChange: (v) => setTemperature(Number(v) || 0),
-                    step: 0.1,
-                    min: 0,
-                    max: 2
+                    value: maxTokens,
+                    onChange: (e) => setMaxTokens(Math.max(1, Math.floor(Number(e.target.value) || 0))),
+                    min: 1,
+                    max: 32e3,
+                    step: 1,
+                    className: "w-full rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 text-sm tabular-nums text-gray-700 outline-none transition-colors focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20"
                   }
                 )
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-gray-200/30 dark:bg-white/10", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.model }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: matchingModels.find((m) => m.id === modelId)?.name ?? labels.modelEmpty })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.maxTokens }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.temperature }),
+                  /* @__PURE__ */ jsxs("p", { className: `text-xs font-semibold ${temperature <= 0.3 ? "text-blue-500" : temperature <= 0.7 ? "text-purple-500" : "text-pink-500"}`, children: [
+                    temperature.toFixed(2),
+                    " \xB7 ",
+                    temperature <= 0.3 ? "Precise" : temperature <= 0.7 ? "Balanced" : "Creative"
+                  ] })
+                ] })
+              ] }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SectionCard,
+          {
+            variant: "glass",
+            header: {
+              title: labels.metadataSection ?? "Metadata",
+              subtitle: labels.metadataSubtitle ?? "Difficulty tier and free-form tags"
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.difficultyLabel ?? "Difficulty" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: DIFFICULTY_OPTIONS.map((opt) => {
+                  const selected = difficulty === opt.id;
+                  const label = opt.id === "beginner" ? labels.difficultyBeginner ?? "Beginner" : opt.id === "intermediate" ? labels.difficultyIntermediate ?? "Intermediate" : opt.id === "advanced" ? labels.difficultyAdvanced ?? "Advanced" : labels.difficultyExpert ?? "Expert";
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDifficulty(opt.id),
+                      "aria-pressed": selected,
+                      className: [
+                        "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2 text-left transition-all",
+                        selected ? "ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent" : "hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${opt.accent} text-base shadow-sm`,
+                            children: opt.emoji
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label })
+                      ]
+                    },
+                    opt.id
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                FormInput,
+                {
+                  label: labels.tagsLabel ?? "Tags",
+                  value: tagsInput,
+                  onValueChange: setTagsInput,
+                  placeholder: labels.tagsPlaceholder ?? "comma, separated, tags"
+                }
+              )
             ] })
           }
         )