@contractspec/example.agent-console 3.7.6 → 3.7.7

package/dist/ui/modals/index.js

@@ -1,250 +1,9 @@
 // @bun
-// src/ui/modals/CreateAgentModal.tsx
+// src/ui/modals/AgentActionsModal.tsx
+import { Button } from "@contractspec/lib.design-system";
 import { useState } from "react";
-import { Button, Input } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var MODEL_PROVIDERS = [
-  {
-    value: "openai",
-    label: "OpenAI",
-    models: ["gpt-5.4", "gpt-5-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
-  },
-  {
-    value: "anthropic",
-    label: "Anthropic",
-    models: ["claude-sonnet-4-6", "claude-opus-4-6", "claude-haiku-4-5"]
-  },
-  {
-    value: "google",
-    label: "Google",
-    models: [
-      "gemini-2.5-flash",
-      "gemini-2.5-pro",
-      "gemini-pro",
-      "gemini-ultra"
-    ]
-  },
-  {
-    value: "mistral",
-    label: "Mistral",
-    models: [
-      "mistral-large-2512",
-      "mistral-large-latest",
-      "mistral-medium-latest",
-      "mistral-small-latest"
-    ]
-  }
-];
-function CreateAgentModal({
-  isOpen,
-  onClose,
-  onSubmit,
-  isLoading = false
-}) {
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [modelProvider, setModelProvider] = useState("openai");
-  const [modelName, setModelName] = useState("gpt-5.4");
-  const [systemPrompt, setSystemPrompt] = useState("");
-  const [error, setError] = useState(null);
-  const selectedProvider = MODEL_PROVIDERS.find((p) => p.value === modelProvider);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
-    if (!name.trim()) {
-      setError("Agent name is required");
-      return;
-    }
-    try {
-      await onSubmit({
-        name: name.trim(),
-        description: description.trim() || undefined,
-        modelProvider,
-        modelName,
-        systemPrompt: systemPrompt.trim() || undefined
-      });
-      setName("");
-      setDescription("");
-      setModelProvider("openai");
-      setModelName("gpt-5.4");
-      setSystemPrompt("");
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create agent");
-    }
-  };
-  const handleProviderChange = (provider) => {
-    setModelProvider(provider);
-    const providerConfig = MODEL_PROVIDERS.find((p) => p.value === provider);
-    if (providerConfig) {
-      setModelName(providerConfig.models[0]);
-    }
-  };
-  if (!isOpen)
-    return null;
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
-        onClick: onClose,
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ")
-            onClose();
-        },
-        "aria-label": "Close modal"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "bg-card border-border relative z-10 max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border p-6 shadow-xl",
-        children: [
-          /* @__PURE__ */ jsxDEV("h2", {
-            className: "mb-4 text-xl font-semibold",
-            children: "Create New Agent"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("form", {
-            onSubmit: handleSubmit,
-            className: "space-y-4",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("label", {
-                    htmlFor: "agent-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
-                    children: "Agent Name *"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Input, {
-                    id: "agent-name",
-                    value: name,
-                    onChange: (e) => setName(e.target.value),
-                    placeholder: "e.g., Customer Support Bot",
-                    disabled: isLoading
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("label", {
-                    htmlFor: "agent-description",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
-                    children: "Description"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("textarea", {
-                    id: "agent-description",
-                    value: description,
-                    onChange: (e) => setDescription(e.target.value),
-                    placeholder: "Describe what this agent does...",
-                    rows: 2,
-                    disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex gap-3",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "flex-1",
-                    children: [
-                      /* @__PURE__ */ jsxDEV("label", {
-                        htmlFor: "model-provider",
-                        className: "text-muted-foreground mb-1 block text-sm font-medium",
-                        children: "Provider *"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("select", {
-                        id: "model-provider",
-                        value: modelProvider,
-                        onChange: (e) => handleProviderChange(e.target.value),
-                        disabled: isLoading,
-                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
-                        children: MODEL_PROVIDERS.map((p) => /* @__PURE__ */ jsxDEV("option", {
-                          value: p.value,
-                          children: p.label
-                        }, p.value, false, undefined, this))
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "flex-1",
-                    children: [
-                      /* @__PURE__ */ jsxDEV("label", {
-                        htmlFor: "model-name",
-                        className: "text-muted-foreground mb-1 block text-sm font-medium",
-                        children: "Model *"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("select", {
-                        id: "model-name",
-                        value: modelName,
-                        onChange: (e) => setModelName(e.target.value),
-                        disabled: isLoading,
-                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
-                        children: selectedProvider?.models.map((m) => /* @__PURE__ */ jsxDEV("option", {
-                          value: m,
-                          children: m
-                        }, m, false, undefined, this))
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("label", {
-                    htmlFor: "system-prompt",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
-                    children: "System Prompt"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("textarea", {
-                    id: "system-prompt",
-                    value: systemPrompt,
-                    onChange: (e) => setSystemPrompt(e.target.value),
-                    placeholder: "You are a helpful assistant that...",
-                    rows: 4,
-                    disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground mt-1 text-xs",
-                    children: "Instructions that define the agent's behavior"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              error && /* @__PURE__ */ jsxDEV("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
-                children: error
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex justify-end gap-3 pt-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Button, {
-                    type: "button",
-                    variant: "ghost",
-                    onPress: onClose,
-                    disabled: isLoading,
-                    children: "Cancel"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Button, {
-                    type: "submit",
-                    disabled: isLoading,
-                    children: isLoading ? "Creating..." : "Create Agent"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/ui/modals/AgentActionsModal.tsx
-import { useState as useState2 } from "react";
-import { Button as Button2 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
 function getStatusColor(status) {
   switch (status) {
     case "ACTIVE":
@@ -269,10 +28,10 @@ function AgentActionsModal({
   onExecute,
   isLoading = false
 }) {
-  const [mode, setMode] = useState2("menu");
-  const [message, setMessage] = useState2("");
-  const [confirmAction, setConfirmAction] = useState2(null);
-  const [error, setError] = useState2(null);
+  const [mode, setMode] = useState("menu");
+  const [message, setMessage] = useState("");
+  const [confirmAction, setConfirmAction] = useState(null);
+  const [error, setError] = useState(null);
   const resetForm = () => {
     setMode("menu");
     setMessage("");
@@ -321,11 +80,11 @@ function AgentActionsModal({
   };
   if (!isOpen || !agent)
     return null;
-  return /* @__PURE__ */ jsxDEV2("div", {
+  return /* @__PURE__ */ jsxDEV("div", {
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: handleClose,
         role: "button",
         tabIndex: 0,
@@ -335,20 +94,20 @@ function AgentActionsModal({
         },
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border mb-4 border-b pb-4",
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "mb-4 border-border border-b pb-4",
             children: [
-              /* @__PURE__ */ jsxDEV2("h2", {
-                className: "text-xl font-semibold",
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "font-semibold text-xl",
                 children: agent.name
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
+              /* @__PURE__ */ jsxDEV("div", {
                 className: "mt-1 flex items-center gap-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       agent.modelProvider,
@@ -356,60 +115,60 @@ function AgentActionsModal({
                       agent.modelName
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("span", {
-                    className: `rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(agent.status)}`,
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: `rounded-full px-2 py-0.5 font-medium text-xs ${getStatusColor(agent.status)}`,
                     children: agent.status
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              agent.description && /* @__PURE__ */ jsxDEV2("p", {
-                className: "text-muted-foreground mt-2 text-sm",
+              agent.description && /* @__PURE__ */ jsxDEV("p", {
+                className: "mt-2 text-muted-foreground text-sm",
                 children: agent.description
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          mode === "menu" && /* @__PURE__ */ jsxDEV2("div", {
+          mode === "menu" && /* @__PURE__ */ jsxDEV("div", {
             className: "space-y-3",
             children: [
-              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button2, {
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV(Button, {
                 className: "w-full justify-start",
                 variant: "ghost",
                 onPress: () => setMode("execute"),
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "mr-2",
                     children: "\u25B6\uFE0F"
                   }, undefined, false, undefined, this),
                   " Execute Agent"
                 ]
               }, undefined, true, undefined, this),
-              (agent.status === "DRAFT" || agent.status === "PAUSED") && /* @__PURE__ */ jsxDEV2(Button2, {
+              (agent.status === "DRAFT" || agent.status === "PAUSED") && /* @__PURE__ */ jsxDEV(Button, {
                 className: "w-full justify-start",
                 variant: "ghost",
                 onPress: () => handleStatusChange("activate"),
                 disabled: isLoading,
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "mr-2",
                     children: "\uD83D\uDFE2"
                   }, undefined, false, undefined, this),
                   " Activate Agent"
                 ]
               }, undefined, true, undefined, this),
-              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button2, {
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV(Button, {
                 className: "w-full justify-start",
                 variant: "ghost",
                 onPress: () => handleStatusChange("pause"),
                 disabled: isLoading,
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "mr-2",
                     children: "\u23F8\uFE0F"
                   }, undefined, false, undefined, this),
                   " Pause Agent"
                 ]
               }, undefined, true, undefined, this),
-              agent.status !== "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button2, {
+              agent.status !== "ARCHIVED" && /* @__PURE__ */ jsxDEV(Button, {
                 className: "w-full justify-start text-yellow-600 hover:text-yellow-700",
                 variant: "ghost",
                 onPress: () => {
@@ -417,33 +176,33 @@ function AgentActionsModal({
                   setMode("confirm");
                 },
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "mr-2",
                     children: "\uD83D\uDCE6"
                   }, undefined, false, undefined, this),
                   " Archive Agent"
                 ]
               }, undefined, true, undefined, this),
-              agent.status === "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button2, {
+              agent.status === "ARCHIVED" && /* @__PURE__ */ jsxDEV(Button, {
                 className: "w-full justify-start",
                 variant: "ghost",
                 onPress: () => handleStatusChange("activate"),
                 disabled: isLoading,
                 children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
+                  /* @__PURE__ */ jsxDEV("span", {
                     className: "mr-2",
                     children: "\uD83D\uDD04"
                   }, undefined, false, undefined, this),
                   " Restore Agent"
                 ]
               }, undefined, true, undefined, this),
-              error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
+              /* @__PURE__ */ jsxDEV("div", {
                 className: "border-border border-t pt-3",
-                children: /* @__PURE__ */ jsxDEV2(Button2, {
+                children: /* @__PURE__ */ jsxDEV(Button, {
                   className: "w-full",
                   variant: "outline",
                   onPress: handleClose,
@@ -452,41 +211,41 @@ function AgentActionsModal({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          mode === "execute" && /* @__PURE__ */ jsxDEV2("div", {
+          mode === "execute" && /* @__PURE__ */ jsxDEV("div", {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV2("div", {
+              /* @__PURE__ */ jsxDEV("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV2("label", {
+                  /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "execute-message",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Message *"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("textarea", {
+                  /* @__PURE__ */ jsxDEV("textarea", {
                     id: "execute-message",
                     value: message,
                     onChange: (e) => setMessage(e.target.value),
                     placeholder: "Enter your message to the agent...",
                     rows: 4,
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
+              /* @__PURE__ */ jsxDEV("div", {
                 className: "flex justify-end gap-3 pt-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV2(Button2, {
+                  /* @__PURE__ */ jsxDEV(Button, {
                     variant: "ghost",
                     onPress: () => setMode("menu"),
                     disabled: isLoading,
                     children: "Back"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(Button2, {
+                  /* @__PURE__ */ jsxDEV(Button, {
                     onPress: handleExecute,
                     disabled: isLoading,
                     children: isLoading ? "Executing..." : "\u25B6\uFE0F Execute"
@@ -495,42 +254,283 @@ function AgentActionsModal({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          mode === "confirm" && confirmAction === "archive" && /* @__PURE__ */ jsxDEV2("div", {
+          mode === "confirm" && confirmAction === "archive" && /* @__PURE__ */ jsxDEV("div", {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV2("p", {
+              /* @__PURE__ */ jsxDEV("p", {
                 className: "text-muted-foreground",
                 children: [
                   "Are you sure you want to archive",
                   " ",
-                  /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-foreground font-medium",
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "font-medium text-foreground",
                     children: agent.name
                   }, undefined, false, undefined, this),
                   "?"
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV2("p", {
+              /* @__PURE__ */ jsxDEV("p", {
                 className: "text-muted-foreground text-sm",
                 children: "Archived agents cannot be executed but can be restored later."
               }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    onPress: () => handleStatusChange("archive"),
+                    disabled: isLoading,
+                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/modals/CreateAgentModal.tsx
+import { Button as Button2, Input } from "@contractspec/lib.design-system";
+import { useState as useState2 } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var MODEL_PROVIDERS = [
+  {
+    value: "openai",
+    label: "OpenAI",
+    models: ["gpt-5.4", "gpt-5-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
+  },
+  {
+    value: "anthropic",
+    label: "Anthropic",
+    models: ["claude-sonnet-4-6", "claude-opus-4-6", "claude-haiku-4-5"]
+  },
+  {
+    value: "google",
+    label: "Google",
+    models: [
+      "gemini-2.5-flash",
+      "gemini-2.5-pro",
+      "gemini-pro",
+      "gemini-ultra"
+    ]
+  },
+  {
+    value: "mistral",
+    label: "Mistral",
+    models: [
+      "mistral-large-2512",
+      "mistral-large-latest",
+      "mistral-medium-latest",
+      "mistral-small-latest"
+    ]
+  }
+];
+function CreateAgentModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false
+}) {
+  const [name, setName] = useState2("");
+  const [description, setDescription] = useState2("");
+  const [modelProvider, setModelProvider] = useState2("openai");
+  const [modelName, setModelName] = useState2("gpt-5.4");
+  const [systemPrompt, setSystemPrompt] = useState2("");
+  const [error, setError] = useState2(null);
+  const selectedProvider = MODEL_PROVIDERS.find((p) => p.value === modelProvider);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Agent name is required");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        modelProvider,
+        modelName,
+        systemPrompt: systemPrompt.trim() || undefined
+      });
+      setName("");
+      setDescription("");
+      setModelProvider("openai");
+      setModelName("gpt-5.4");
+      setSystemPrompt("");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create agent");
+    }
+  };
+  const handleProviderChange = (provider) => {
+    setModelProvider(provider);
+    const providerConfig = MODEL_PROVIDERS.find((p) => p.value === provider);
+    if (providerConfig) {
+      setModelName(providerConfig.models[0]);
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "relative z-10 max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border border-border bg-card p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "mb-4 font-semibold text-xl",
+            children: "Create New Agent"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "agent-name",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
+                    children: "Agent Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Input, {
+                    id: "agent-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., Customer Support Bot",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "agent-description",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("textarea", {
+                    id: "agent-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Describe what this agent does...",
+                    rows: 2,
+                    disabled: isLoading,
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex gap-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("label", {
+                        htmlFor: "model-provider",
+                        className: "mb-1 block font-medium text-muted-foreground text-sm",
+                        children: "Provider *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("select", {
+                        id: "model-provider",
+                        value: modelProvider,
+                        onChange: (e) => handleProviderChange(e.target.value),
+                        disabled: isLoading,
+                        className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
+                        children: MODEL_PROVIDERS.map((p) => /* @__PURE__ */ jsxDEV2("option", {
+                          value: p.value,
+                          children: p.label
+                        }, p.value, false, undefined, this))
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("label", {
+                        htmlFor: "model-name",
+                        className: "mb-1 block font-medium text-muted-foreground text-sm",
+                        children: "Model *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("select", {
+                        id: "model-name",
+                        value: modelName,
+                        onChange: (e) => setModelName(e.target.value),
+                        disabled: isLoading,
+                        className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
+                        children: selectedProvider?.models.map((m) => /* @__PURE__ */ jsxDEV2("option", {
+                          value: m,
+                          children: m
+                        }, m, false, undefined, this))
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "system-prompt",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
+                    children: "System Prompt"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("textarea", {
+                    id: "system-prompt",
+                    value: systemPrompt,
+                    onChange: (e) => setSystemPrompt(e.target.value),
+                    placeholder: "You are a helpful assistant that...",
+                    rows: 4,
+                    disabled: isLoading,
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("p", {
+                    className: "mt-1 text-muted-foreground text-xs",
+                    children: "Instructions that define the agent's behavior"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV2("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2("div", {
                 className: "flex justify-end gap-3 pt-2",
                 children: [
                   /* @__PURE__ */ jsxDEV2(Button2, {
+                    type: "button",
                     variant: "ghost",
-                    onPress: () => setMode("menu"),
+                    onPress: onClose,
                     disabled: isLoading,
                     children: "Cancel"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2(Button2, {
-                    onPress: () => handleStatusChange("archive"),
+                    type: "submit",
                     disabled: isLoading,
-                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                    children: isLoading ? "Creating..." : "Create Agent"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this)