@getcatalystiq/agent-plane-ui 0.1.18 → 0.1.20

package/dist/chunk-VZ43ATC5.cjs

@@ -0,0 +1,454 @@
+'use strict';
+
+var chunkXXF4U7WL_cjs = require('./chunk-XXF4U7WL.cjs');
+var useSWR = require('swr');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var CodeMirror = require('@uiw/react-codemirror');
+var langMarkdown = require('@codemirror/lang-markdown');
+var langJavascript = require('@codemirror/lang-javascript');
+var langJson = require('@codemirror/lang-json');
+var themeOneDark = require('@codemirror/theme-one-dark');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
+
+function useApi(key, fetcher, options) {
+  const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const onAuthError = chunkXXF4U7WL_cjs.useAuthError();
+  return useSWR__default.default(
+    key,
+    () => fetcher(client),
+    {
+      revalidateOnFocus: false,
+      errorRetryCount: 3,
+      onError: (err) => {
+        if (onAuthError && err && typeof err === "object" && "status" in err && err.status === 401) {
+          onAuthError(err instanceof Error ? err : new Error(String(err)));
+        }
+      },
+      ...options
+    }
+  );
+}
+var Card = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkXXF4U7WL_cjs.cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkXXF4U7WL_cjs.cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkXXF4U7WL_cjs.cn("font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkXXF4U7WL_cjs.cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkXXF4U7WL_cjs.cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkXXF4U7WL_cjs.cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+}
+function getLanguageExtension(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "md":
+      return [langMarkdown.markdown()];
+    case "json":
+      return [langJson.json()];
+    case "js":
+    case "ts":
+    case "jsx":
+    case "tsx":
+      return [langJavascript.javascript({ typescript: ext === "ts" || ext === "tsx", jsx: ext === "jsx" || ext === "tsx" })];
+    default:
+      return [];
+  }
+}
+function buildTree(files) {
+  const rootFiles = [];
+  const dirMap = /* @__PURE__ */ new Map();
+  function ensureDir(dirPath) {
+    const existing = dirMap.get(dirPath);
+    if (existing) return existing;
+    const parts = dirPath.split("/");
+    const node = {
+      name: parts[parts.length - 1] ?? dirPath,
+      fullPath: dirPath,
+      children: [],
+      files: []
+    };
+    dirMap.set(dirPath, node);
+    if (parts.length > 1) {
+      const parentPath = parts.slice(0, -1).join("/");
+      const parent = ensureDir(parentPath);
+      if (!parent.children.some((c) => c.fullPath === dirPath)) {
+        parent.children.push(node);
+      }
+    }
+    return node;
+  }
+  for (const file of files) {
+    const slashIdx = file.path.lastIndexOf("/");
+    if (slashIdx === -1) {
+      rootFiles.push(file);
+    } else {
+      const dirPath = file.path.slice(0, slashIdx);
+      const dir = ensureDir(dirPath);
+      dir.files.push(file);
+    }
+  }
+  const topLevel = [];
+  for (const node of dirMap.values()) {
+    if (!node.fullPath.includes("/")) {
+      topLevel.push(node);
+    }
+  }
+  function sortNode(node) {
+    node.children.sort((a, b) => a.name.localeCompare(b.name));
+    node.files.sort((a, b) => a.path.localeCompare(b.path));
+    node.children.forEach(sortNode);
+  }
+  topLevel.forEach(sortNode);
+  topLevel.sort((a, b) => a.name.localeCompare(b.name));
+  rootFiles.sort((a, b) => a.path.localeCompare(b.path));
+  return { rootFiles, rootDirs: topLevel };
+}
+function collectAllDirPaths(nodes) {
+  const paths = /* @__PURE__ */ new Set();
+  function walk(node) {
+    paths.add(node.fullPath);
+    node.children.forEach(walk);
+  }
+  nodes.forEach(walk);
+  return paths;
+}
+function FileTreeEditor({
+  initialFiles,
+  onSave,
+  onChange,
+  readOnly = false,
+  hideSave = false,
+  title = "Files",
+  saveLabel = "Save",
+  addFolderLabel = "Folder",
+  newFileTemplate = { filename: "SKILL.md", content: "# New\n\nDescribe this...\n" },
+  savedVersion
+}) {
+  const [files, setFiles] = React.useState(initialFiles);
+  const [selectedPath, setSelectedPath] = React.useState(
+    initialFiles.length > 0 ? initialFiles[0]?.path ?? null : null
+  );
+  const [saving, setSaving] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(() => {
+    const { rootDirs } = buildTree(initialFiles);
+    return collectAllDirPaths(rootDirs);
+  });
+  const [showAddFolder, setShowAddFolder] = React.useState(false);
+  const [newFolderName, setNewFolderName] = React.useState("");
+  const [addingFileInDir, setAddingFileInDir] = React.useState(null);
+  const [newFileName, setNewFileName] = React.useState("");
+  const [savedSnapshot, setSavedSnapshot] = React.useState(() => JSON.stringify(initialFiles));
+  React.useEffect(() => {
+    const snap = JSON.stringify(initialFiles);
+    setSavedSnapshot(snap);
+    setFiles(initialFiles);
+    const { rootDirs } = buildTree(initialFiles);
+    setExpanded(collectAllDirPaths(rootDirs));
+  }, [initialFiles]);
+  React.useEffect(() => {
+    if (savedVersion !== void 0 && savedVersion > 0) {
+      setSavedSnapshot(JSON.stringify(files));
+    }
+  }, [savedVersion]);
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  React.useEffect(() => {
+    if (onChangeRef.current && JSON.stringify(files) !== savedSnapshot) {
+      onChangeRef.current(files);
+    }
+  }, [files, savedSnapshot]);
+  const isDirty = React.useMemo(
+    () => JSON.stringify(files) !== savedSnapshot,
+    [files, savedSnapshot]
+  );
+  const tree = React.useMemo(() => buildTree(files), [files]);
+  const activeFile = React.useMemo(
+    () => selectedPath ? files.find((f) => f.path === selectedPath) ?? null : null,
+    [files, selectedPath]
+  );
+  const handleEditorChange = React.useCallback((value) => {
+    if (readOnly || !selectedPath) return;
+    setFiles((prev) => prev.map((f) => f.path === selectedPath ? { ...f, content: value } : f));
+  }, [readOnly, selectedPath]);
+  function toggleExpand(dirPath) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(dirPath)) {
+        next.delete(dirPath);
+      } else {
+        next.add(dirPath);
+      }
+      return next;
+    });
+  }
+  function addFolder() {
+    const name = newFolderName.trim();
+    if (!name) return;
+    const filePath = `${name}/${newFileTemplate.filename}`;
+    if (files.some((f) => f.path === filePath)) return;
+    const content = newFileTemplate.content.replace("# New", `# ${name}`);
+    setFiles((prev) => [...prev, { path: filePath, content }]);
+    setSelectedPath(filePath);
+    setExpanded((prev) => /* @__PURE__ */ new Set([...prev, name]));
+    setNewFolderName("");
+    setShowAddFolder(false);
+  }
+  function removeDir(dirPath) {
+    const prefix = dirPath + "/";
+    const affectedFiles = files.filter((f) => f.path.startsWith(prefix));
+    if (affectedFiles.length === 0) return;
+    if (!confirm(`Remove "${dirPath}" and all ${affectedFiles.length} file(s)?`)) return;
+    setFiles((prev) => prev.filter((f) => !f.path.startsWith(prefix)));
+    if (selectedPath && selectedPath.startsWith(prefix)) {
+      setSelectedPath(null);
+    }
+  }
+  function removeFile(filePath) {
+    const fileName = filePath.split("/").pop() ?? filePath;
+    if (!confirm(`Remove file "${fileName}"?`)) return;
+    setFiles((prev) => prev.filter((f) => f.path !== filePath));
+    if (selectedPath === filePath) {
+      setSelectedPath(null);
+    }
+  }
+  function addFileInDir(dirPath) {
+    const name = newFileName.trim();
+    if (!name) return;
+    const filePath = dirPath ? `${dirPath}/${name}` : name;
+    if (files.some((f) => f.path === filePath)) return;
+    setFiles((prev) => [...prev, { path: filePath, content: "" }]);
+    setSelectedPath(filePath);
+    setNewFileName("");
+    setAddingFileInDir(null);
+  }
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave(files);
+    } finally {
+      setSaving(false);
+    }
+  }
+  function renderTreeNode(node, depth) {
+    const isExpanded = expanded.has(node.fullPath);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `flex items-center justify-between cursor-pointer hover:bg-muted/50 py-1 pr-2`,
+          style: { paddingLeft: `${depth * 16 + 8}px` },
+          onClick: () => toggleExpand(node.fullPath),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-xs truncate flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: isExpanded ? "\u25BE" : "\u25B8" }),
+              node.name,
+              "/"
+            ] }),
+            !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeDir(node.fullPath);
+                },
+                className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
+                children: "\xD7"
+              }
+            )
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        node.children.map((child) => renderTreeNode(child, depth + 1)),
+        node.files.map((file) => {
+          const fileName = file.path.split("/").pop() ?? file.path;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between cursor-pointer hover:bg-muted/30 py-1 pr-2 ${selectedPath === file.path ? "bg-primary/10 text-primary" : ""}`,
+              style: { paddingLeft: `${(depth + 1) * 16 + 8}px` },
+              onClick: () => setSelectedPath(file.path),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate", children: fileName }),
+                !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFile(file.path);
+                    },
+                    className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            file.path
+          );
+        }),
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkXXF4U7WL_cjs.Input,
+            {
+              value: newFileName,
+              onChange: (e) => setNewFileName(e.target.value),
+              placeholder: "file.md",
+              className: "h-6 text-xs",
+              onKeyDown: (e) => e.key === "Enter" && addFileInDir(node.fullPath),
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: () => addFileInDir(node.fullPath), size: "sm", className: "h-6 text-xs px-2", children: "+" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setAddingFileInDir(node.fullPath);
+              setNewFileName("");
+            },
+            className: "text-xs text-primary hover:underline",
+            children: "+ File"
+          }
+        ) })
+      ] })
+    ] }, node.fullPath);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: title }),
+        isDirty && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
+        readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
+      ] }),
+      !readOnly && !hideSave && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-muted/50 border-b border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowAddFolder(!showAddFolder),
+              className: "text-xs text-primary hover:underline",
+              children: [
+                "+ ",
+                addFolderLabel
+              ]
+            }
+          )
+        ] }),
+        showAddFolder && !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkXXF4U7WL_cjs.Input,
+            {
+              value: newFolderName,
+              onChange: (e) => setNewFolderName(e.target.value),
+              placeholder: "folder-name",
+              className: "h-7 text-xs",
+              onKeyDown: (e) => e.key === "Enter" && addFolder(),
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: addFolder, size: "sm", className: "h-7 text-xs px-2", children: "Add" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm overflow-y-auto", children: [
+          tree.rootFiles.map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between cursor-pointer hover:bg-muted/30 py-1 pr-2 ${selectedPath === file.path ? "bg-primary/10 text-primary" : ""}`,
+              style: { paddingLeft: "8px" },
+              onClick: () => setSelectedPath(file.path),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate", children: file.path }),
+                !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFile(file.path);
+                    },
+                    className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            file.path
+          )),
+          tree.rootDirs.map((node) => renderTreeNode(node, 0)),
+          files.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-3 text-xs text-muted-foreground", children: readOnly ? "No files." : `No ${title.toLowerCase()} yet. Add a ${addFolderLabel.toLowerCase()} to get started.` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border border-border rounded-md overflow-hidden", children: activeFile ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 bg-muted/50 border-b border-border text-xs text-muted-foreground", children: activeFile.path }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeMirror__default.default,
+          {
+            value: activeFile.content,
+            onChange: handleEditorChange,
+            readOnly,
+            theme: themeOneDark.oneDark,
+            extensions: getLanguageExtension(activeFile.path),
+            height: "100%",
+            className: "flex-1 overflow-auto",
+            basicSetup: {
+              lineNumbers: true,
+              foldGutter: true,
+              bracketMatching: true
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm", children: [
+        "Select a file to ",
+        readOnly ? "view" : "edit"
+      ] }) })
+    ] }) })
+  ] });
+}
+
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.FileTreeEditor = FileTreeEditor;
+exports.Skeleton = Skeleton;
+exports.useApi = useApi;

package/dist/{chunk-P4N2P42X.js → chunk-XFI227OB.js}

@@ -1,7 +1,6 @@
-import * as React3 from 'react';
+import * as React4 from 'react';
 import { createContext, useRef, useMemo, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import useSWR from 'swr';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -75,24 +74,6 @@ function useNavigation() {
   }
   return ctx;
 }
-function useApi(key, fetcher, options) {
-  const client = useAgentPlaneClient();
-  const onAuthError = useAuthError();
-  return useSWR(
-    key,
-    () => fetcher(client),
-    {
-      revalidateOnFocus: false,
-      errorRetryCount: 3,
-      onError: (err) => {
-        if (onAuthError && err && typeof err === "object" && "status" in err && err.status === 401) {
-          onAuthError(err instanceof Error ? err : new Error(String(err)));
-        }
-      },
-      ...options
-    }
-  );
-}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -124,7 +105,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React3.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -137,26 +118,6 @@ var Button = React3.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })
-);
-Card.displayName = "Card";
-var CardHeader = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
-);
-CardContent.displayName = "CardContent";
 var badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -176,7 +137,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var Input = React3.forwardRef(
+var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -193,8 +154,78 @@ var Input = React3.forwardRef(
   }
 );
 Input.displayName = "Input";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+function FormField({ label, children, error, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: label }),
+    children,
+    hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1", children: error })
+  ] });
+}
+function Dialog({ open, onOpenChange, children }) {
+  React4.useEffect(() => {
+    if (!open) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") onOpenChange(false);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  React4.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/60 animate-dialog-overlay",
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    children
+  ] });
+}
+function DialogContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative z-10 w-full bg-background border border-border rounded-xl shadow-2xl mx-4 max-h-[85vh] overflow-y-auto animate-dialog-content",
+        className
+      ),
+      onClick: (e) => e.stopPropagation(),
+      ...props,
+      children
+    }
+  );
+}
+function DialogHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-6 pt-6 pb-0", className), ...props, children });
+}
+function DialogBody({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-6 py-4", className), ...props, children });
+}
+function DialogFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 px-6 py-4 border-t border-border bg-muted/30 rounded-b-xl", className),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTitle({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("h2", { className: cn("text-base font-semibold", className), ...props, children });
+}
+function DialogDescription({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground mt-1", className), ...props, children });
 }
 
-export { AgentPlaneProvider, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Skeleton, badgeVariants, buttonVariants, cn, supportsClaudeRunner, useAgentPlaneClient, useApi, useAuthError, useNavigation };
+export { AgentPlaneProvider, Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FormField, Input, badgeVariants, buttonVariants, cn, supportsClaudeRunner, useAgentPlaneClient, useAuthError, useNavigation };