@contractspec/example.agent-console 1.57.0 → 1.58.0

package/dist/ui/modals/index.js

@@ -1,4 +1,533 @@
-import { CreateAgentModal } from "./CreateAgentModal.js";
-import { AgentActionsModal } from "./AgentActionsModal.js";
+// @bun
+// src/ui/modals/CreateAgentModal.tsx
+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-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
+  },
+  {
+    value: "anthropic",
+    label: "Anthropic",
+    models: ["claude-3-opus", "claude-3-sonnet", "claude-3-haiku"]
+  },
+  { value: "google", label: "Google", models: ["gemini-pro", "gemini-ultra"] },
+  {
+    value: "mistral",
+    label: "Mistral",
+    models: ["mistral-large", "mistral-medium", "mistral-small"]
+  }
+];
+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-4o");
+  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-4o");
+      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);
+}
 
-export { AgentActionsModal, CreateAgentModal };
+// 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":
+      return "text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/30";
+    case "DRAFT":
+      return "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/30";
+    case "PAUSED":
+      return "text-yellow-600 bg-yellow-100 dark:text-yellow-400 dark:bg-yellow-900/30";
+    case "ARCHIVED":
+      return "text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-700";
+    default:
+      return "text-gray-600 bg-gray-100";
+  }
+}
+function AgentActionsModal({
+  isOpen,
+  agent,
+  onClose,
+  onActivate,
+  onPause,
+  onArchive,
+  onExecute,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState2("menu");
+  const [message, setMessage] = useState2("");
+  const [confirmAction, setConfirmAction] = useState2(null);
+  const [error, setError] = useState2(null);
+  const resetForm = () => {
+    setMode("menu");
+    setMessage("");
+    setConfirmAction(null);
+    setError(null);
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  const handleExecute = async () => {
+    if (!agent)
+      return;
+    setError(null);
+    if (!message.trim()) {
+      setError("Please enter a message");
+      return;
+    }
+    try {
+      await onExecute(agent.id, message.trim());
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to execute agent");
+    }
+  };
+  const handleStatusChange = async (action) => {
+    if (!agent)
+      return;
+    setError(null);
+    try {
+      switch (action) {
+        case "activate":
+          await onActivate(agent.id);
+          break;
+        case "pause":
+          await onPause(agent.id);
+          break;
+        case "archive":
+          await onArchive(agent.id);
+          break;
+      }
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to ${action} agent`);
+    }
+  };
+  if (!isOpen || !agent)
+    return null;
+  return /* @__PURE__ */ jsxDEV2("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",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "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",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-xl font-semibold",
+                children: agent.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "mt-1 flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      agent.modelProvider,
+                      " / ",
+                      agent.modelName
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: `rounded-full px-2 py-0.5 text-xs font-medium ${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",
+                children: agent.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("execute"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("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, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDFE2"
+                  }, undefined, false, undefined, this),
+                  " Activate Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("pause"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\u23F8\uFE0F"
+                  }, undefined, false, undefined, this),
+                  " Pause Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status !== "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start text-yellow-600 hover:text-yellow-700",
+                variant: "ghost",
+                onPress: () => {
+                  setConfirmAction("archive");
+                  setMode("confirm");
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("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",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV2(Button2, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "execute" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "execute-message",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Message *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("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"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    onPress: handleExecute,
+                    disabled: isLoading,
+                    children: isLoading ? "Executing..." : "\u25B6\uFE0F Execute"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "confirm" && confirmAction === "archive" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-foreground font-medium",
+                    children: agent.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Archived agents cannot be executed but can be restored later."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    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);
+}
+export {
+  CreateAgentModal,
+  AgentActionsModal
+};

package/dist/ui/overlays/demo-overlays.d.ts

@@ -1,18 +1,20 @@
-import { OverlayDefinition } from "../../shared/overlay-types.js";
-
-//#region src/ui/overlays/demo-overlays.d.ts
+/**
+ * Demo Overlay Definitions for Agent Console
+ *
+ * These overlays customize the presentation for different contexts
+ * (e.g., demo users, different roles).
+ */
+import type { OverlayDefinition } from '../../shared/overlay-types';
 /**
  * Demo user overlay - hides advanced configuration options
  */
-declare const agentConsoleDemoOverlay: OverlayDefinition;
+export declare const agentConsoleDemoOverlay: OverlayDefinition;
 /**
  * Read-only overlay - for viewing without edit permissions
  */
-declare const agentConsoleReadOnlyOverlay: OverlayDefinition;
+export declare const agentConsoleReadOnlyOverlay: OverlayDefinition;
 /**
  * All overlays for agent-console
  */
-declare const agentConsoleOverlays: OverlayDefinition[];
-//#endregion
-export { agentConsoleDemoOverlay, agentConsoleOverlays, agentConsoleReadOnlyOverlay };
+export declare const agentConsoleOverlays: OverlayDefinition[];
 //# sourceMappingURL=demo-overlays.d.ts.map

package/dist/ui/overlays/demo-overlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"demo-overlays.d.ts","names":[],"sources":["../../../src/ui/overlays/demo-overlays.ts"],"mappings":";;;;AA+CA;;cApCa,uBAAA,EAAyB,iBAAA;;;AA8DtC;cA1Ba,2BAAA,EAA6B,iBAAA;;;;cA0B7B,oBAAA,EAAsB,iBAAA"}
+{"version":3,"file":"demo-overlays.d.ts","sourceRoot":"","sources":["../../../src/ui/overlays/demo-overlays.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,iBA+BrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,iBAqBzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,EAGnD,CAAC"}