From 25cbe4c21051841b5d25fcd8996ca34d85b19a52 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaan@berri.ai>
Date: Wed, 6 May 2026 14:54:37 -0700
Subject: [PATCH] feat(ui/agents): add NewAgentDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

antd Modal + Form that posts a new cloud-agent definition. Definition-
only — no VM is provisioned at creation time.
---
 .../agents/components/new-agent-dialog.tsx    | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/agents/components/new-agent-dialog.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/new-agent-dialog.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/new-agent-dialog.tsx
new file mode 100644
index 00000000000..20b64e66737
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/new-agent-dialog.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { Modal, Form, Input, message } from "antd";
+import { createCloudAgent } from "@/lib/cloud-agents-client";
+
+interface NewAgentDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+  accessToken: string | null;
+}
+
+export default function NewAgentDialog({
+  open,
+  onClose,
+  onCreated,
+  accessToken,
+}: NewAgentDialogProps) {
+  const [form] = Form.useForm<{ name: string; model: string; system_prompt?: string }>();
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      setSubmitting(true);
+      await createCloudAgent(accessToken, values);
+      message.success(`Agent "${values.name}" created`);
+      form.resetFields();
+      onCreated();
+    } catch (e) {
+      if (e instanceof Error) {
+        message.error(e.message);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="New cloud agent"
+      open={open}
+      onOk={handleOk}
+      onCancel={() => {
+        form.resetFields();
+        onClose();
+      }}
+      okText="Create"
+      confirmLoading={submitting}
+      destroyOnClose
+      data-testid="new-agent-dialog"
+    >
+      <Form form={form} layout="vertical" preserve={false}>
+        <Form.Item
+          name="name"
+          label="Name"
+          rules={[{ required: true, message: "Name is required" }]}
+        >
+          <Input placeholder="my-coding-agent" data-testid="new-agent-name" />
+        </Form.Item>
+        <Form.Item
+          name="model"
+          label="Model"
+          rules={[{ required: true, message: "Model is required" }]}
+        >
+          <Input placeholder="claude-3-5-sonnet-20241022" data-testid="new-agent-model" />
+        </Form.Item>
+        <Form.Item name="system_prompt" label="System prompt (optional)">
+          <Input.TextArea
+            rows={3}
+            placeholder="You are a helpful coding agent."
+            data-testid="new-agent-prompt"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}