@datatechsolutions/ui 3.7.4 → 3.8.0

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,74 @@ 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 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 +2848,7 @@ function CreateAgentDialog({
       setSystemPrompt(preset.systemPrompt);
       setTemperature(preset.temperature);
       setMaxTokens(preset.maxTokens);
+      if (preset.framework) setFramework(preset.framework);
     }
   }
   return /* @__PURE__ */ jsx(
@@ -2826,12 +2872,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: [
@@ -2907,7 +2965,7 @@ function CreateAgentDialog({
                   {
                     label: labels.name,
                     value: name,
-                    onChange: (event) => setName(event.target.value),
+                    onValueChange: setName,
                     required: true,
                     placeholder: labels.namePlaceholder ?? "Sales Specialist"
                   }
@@ -2917,11 +2975,73 @@ function CreateAgentDialog({
                   {
                     label: labels.role,
                     value: role,
-                    onChange: (event) => setRole(event.target.value),
+                    onValueChange: setRole,
                     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."
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SectionCard,
+          {
+            variant: "glass",
+            header: {
+              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__ */ 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,
+                  {
+                    label: labels.model,
+                    value: modelId,
+                    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}'
+                }
+              )
             ] })
           }
         ),
@@ -2939,19 +3059,32 @@ function CreateAgentDialog({
                 {
                   label: labels.promptSystemPrompt ?? "System prompt",
                   value: systemPrompt,
-                  onChange: (event) => setSystemPrompt(event.target.value),
+                  onValueChange: setSystemPrompt,
                   rows: 5,
                   placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
                 }
               ),
+              /* @__PURE__ */ jsx(
+                FormTextarea,
+                {
+                  label: labels.userPromptLabel ?? "User prompt template",
+                  value: userPrompt,
+                  onValueChange: setUserPrompt,
+                  rows: 4,
+                  placeholder: labels.userPromptPlaceholder ?? "Analyze {{ nodeId.path }} and produce a summary."
+                }
+              ),
               /* @__PURE__ */ jsxs(FormGrid, { children: [
                 /* @__PURE__ */ jsx(
-                  FormSelect,
+                  FormInput,
                   {
-                    label: labels.model,
-                    value: modelId,
-                    onChange: (event) => setModelId(event.target.value),
-                    options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
+                    label: `${labels.temperature} (${temperature.toFixed(2)})`,
+                    type: "number",
+                    value: String(temperature),
+                    onValueChange: (v) => setTemperature(Number(v) || 0),
+                    step: 0.1,
+                    min: 0,
+                    max: 2
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -2960,7 +3093,7 @@ function CreateAgentDialog({
                     label: labels.maxTokens,
                     type: "number",
                     value: String(maxTokens),
-                    onChange: (event) => setMaxTokens(Number(event.target.value) || 0),
+                    onValueChange: (v) => setMaxTokens(Number(v) || 0),
                     min: 1,
                     max: 32e3
                   }
@@ -2968,18 +3101,82 @@ function CreateAgentDialog({
                 /* @__PURE__ */ jsx(
                   FormInput,
                   {
-                    label: `${labels.temperature} (${temperature.toFixed(2)})`,
+                    label: `${labels.topPLabel ?? "Top-P"} (${topP.toFixed(2)})`,
                     type: "number",
-                    value: String(temperature),
-                    onChange: (event) => setTemperature(Number(event.target.value) || 0),
-                    step: 0.1,
+                    value: String(topP),
+                    onValueChange: (v) => setTopP(Number(v) || 0),
+                    step: 0.05,
                     min: 0,
-                    max: 2
+                    max: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FormInput,
+                  {
+                    label: labels.topKLabel ?? "Top-K",
+                    type: "number",
+                    value: String(topK),
+                    onValueChange: (v) => setTopK(Math.max(0, Math.floor(Number(v) || 0))),
+                    step: 1,
+                    min: 0,
+                    max: 500
                   }
                 )
               ] })
             ] })
           }
+        ),
+        /* @__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"
+                }
+              )
+            ] })
+          }
         )
       ] })
     }