@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/MCPServersPage.js

@@ -0,0 +1,321 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { isMCPServerHealthy as t, mcpServerDescription as n, mcpServerEndpoint as r, useCreateMCPServer as i, useDeleteMCPServer as a, useMCPServers as o, useTestMCPConnection as s } from "../hooks/useMCPServers.js";
+import { formatRelativeTime as c } from "../utils/formatters.js";
+import { PageLayout as l } from "../components/PageLayout.js";
+import { Card as u, CardContent as d, CardDescription as f, CardHeader as p, CardTitle as m } from "../components/Card.js";
+import { Button as h } from "../components/Button.js";
+import { Badge as g, StatusBadge as _ } from "../components/Badge.js";
+import { EmptyState as v } from "../components/EmptyState.js";
+import { FormField as y, Input as b } from "../components/Input.js";
+import { ErrorState as x } from "../components/ErrorState.js";
+import { useState as S } from "react";
+import { GlassCard as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { Plug as D, PlugZap as O, Plus as k, Settings as A, Trash2 as j } from "lucide-react";
+import { toast as M } from "sonner";
+//#region src/botlit/pages/MCPServersPage.tsx
+var N = () => {
+	let { navigateTo: N } = e(), { data: P, loading: F, error: I, refetch: L } = o(), [R, z] = i(), [B, V] = a(), [H, U] = s(), [W, G] = S(!1), [K, q] = S({
+		name: "",
+		description: "",
+		transport: "HTTP_JSON",
+		baseUrl: ""
+	}), J = async () => {
+		if (!(!K.name || !K.baseUrl)) {
+			try {
+				await R({
+					name: K.name,
+					type: K.transport,
+					config: {
+						url: K.baseUrl,
+						description: K.description
+					}
+				});
+			} catch (e) {
+				M.error(e instanceof Error ? e.message : "Failed to connect MCP server");
+				return;
+			}
+			M.success(`Connected "${K.name}"`), L(), q({
+				name: "",
+				description: "",
+				transport: "HTTP_JSON",
+				baseUrl: ""
+			}), G(!1);
+		}
+	}, Y = async (e) => {
+		try {
+			await B(e.id), M.success(`Disconnected "${e.name}"`), L();
+		} catch (e) {
+			M.error(e instanceof Error ? e.message : "Failed to disconnect MCP server");
+		}
+	}, X = async (e) => {
+		try {
+			await H(e.id) ? M.success(`"${e.name}" is reachable`) : M.error(`"${e.name}" did not respond`), L();
+		} catch (e) {
+			M.error(e instanceof Error ? e.message : "Failed to test MCP connection");
+		}
+	};
+	return /* @__PURE__ */ T(l, {
+		title: "MCP Servers",
+		description: "Connect Model Context Protocol servers to extend agent capabilities",
+		actions: /* @__PURE__ */ T(h, {
+			leftIcon: /* @__PURE__ */ T(k, { size: 16 }),
+			onClick: () => G(!0),
+			children: "Add MCP Server"
+		}),
+		children: /* @__PURE__ */ E("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ T(w, {
+					icon: /* @__PURE__ */ T(D, { size: 18 }),
+					children: "MCP (Model Context Protocol) servers are how your agents reach the outside world — they expose real tools an agent can call, like searching the web, reading a GitHub repo, querying a database or posting to Slack. Connect a server here and its tools become available to your agents (gated by your tool policies), turning a chatbot into something that can take action."
+				}),
+				F ? /* @__PURE__ */ T("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ T("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : I ? /* @__PURE__ */ T(x, {
+					resource: "MCP servers",
+					error: I,
+					onRetry: () => void L()
+				}) : P.length > 0 ? /* @__PURE__ */ T("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+					children: P.map((e) => /* @__PURE__ */ E(u, { children: [/* @__PURE__ */ E(p, {
+						className: "flex flex-row items-start justify-between",
+						children: [/* @__PURE__ */ E("div", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ T("div", {
+								className: `p-2 rounded-lg ${t(e.status) ? "bg-status-success-bg-subtle" : "bg-bg-sunken"}`,
+								children: t(e.status) ? /* @__PURE__ */ T(O, { className: "h-5 w-5 text-status-success-text" }) : /* @__PURE__ */ T(D, { className: "h-5 w-5 text-text-secondary" })
+							}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(m, {
+								className: "text-base",
+								children: e.name
+							}), /* @__PURE__ */ T(f, { children: n(e) })] })]
+						}), /* @__PURE__ */ T(_, { status: e.status })]
+					}), /* @__PURE__ */ T(d, { children: /* @__PURE__ */ E("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ E("div", {
+								className: "flex flex-wrap items-center gap-4 text-sm",
+								children: [/* @__PURE__ */ T(g, {
+									variant: "outline",
+									className: "capitalize",
+									children: e.type.toLowerCase().replace("_", " ")
+								}), e.lastConnectedAt && /* @__PURE__ */ E("span", {
+									className: "text-text-secondary",
+									children: ["Last connected ", c(e.lastConnectedAt)]
+								})]
+							}),
+							r(e) && /* @__PURE__ */ T("p", {
+								className: "truncate text-sm text-text-secondary",
+								children: r(e)
+							}),
+							e.errorMessage && /* @__PURE__ */ T("p", {
+								className: "text-sm text-status-error-text",
+								children: e.errorMessage
+							}),
+							/* @__PURE__ */ E("div", {
+								className: "flex items-center gap-2 pt-2 border-t border-border-subtle",
+								children: [
+									/* @__PURE__ */ T(h, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => void X(e),
+										isLoading: U.loading,
+										children: "Test connection"
+									}),
+									/* @__PURE__ */ T(h, {
+										variant: "ghost",
+										size: "sm",
+										leftIcon: /* @__PURE__ */ T(A, { size: 14 }),
+										onClick: () => N(`mcp/${e.id}`),
+										children: "Configure"
+									}),
+									/* @__PURE__ */ T(h, {
+										variant: "ghost",
+										size: "icon",
+										className: "ml-auto",
+										"aria-label": `Disconnect ${e.name}`,
+										onClick: () => void Y(e),
+										isLoading: V.loading,
+										children: /* @__PURE__ */ T(j, { size: 16 })
+									})
+								]
+							})
+						]
+					}) })] }, e.id))
+				}) : /* @__PURE__ */ T(v, {
+					illustration: "empty-generic",
+					title: "No MCP servers connected",
+					description: "Connect MCP servers to give your agents access to external tools and resources.",
+					action: /* @__PURE__ */ T(h, {
+						leftIcon: /* @__PURE__ */ T(k, { size: 16 }),
+						onClick: () => G(!0),
+						children: "Add MCP Server"
+					})
+				}),
+				/* @__PURE__ */ E(C, {
+					treatment: "glass",
+					glow: !0,
+					className: "p-6",
+					children: [/* @__PURE__ */ E("div", {
+						className: "mb-4",
+						children: [/* @__PURE__ */ T("h2", {
+							className: "text-lg font-semibold tracking-tight text-text-primary",
+							children: "Popular MCP Servers"
+						}), /* @__PURE__ */ T("p", {
+							className: "text-sm text-text-secondary",
+							children: "Quick-add common MCP servers"
+						})]
+					}), /* @__PURE__ */ T("div", {
+						className: "grid grid-cols-1 md:grid-cols-3 gap-4",
+						children: [
+							{
+								name: "GitHub",
+								description: "Repository management and code operations",
+								baseUrl: "https://mcp.github.com"
+							},
+							{
+								name: "Filesystem",
+								description: "Local file system access",
+								baseUrl: "http://localhost:3001"
+							},
+							{
+								name: "Brave Search",
+								description: "Web search capabilities",
+								baseUrl: "https://mcp.search.brave.com"
+							},
+							{
+								name: "PostgreSQL",
+								description: "Database queries and management",
+								baseUrl: "http://localhost:3002"
+							},
+							{
+								name: "Slack",
+								description: "Slack messaging integration",
+								baseUrl: "https://mcp.slack.com"
+							},
+							{
+								name: "Puppeteer",
+								description: "Browser automation",
+								baseUrl: "http://localhost:3003"
+							}
+						].map((e) => /* @__PURE__ */ E("button", {
+							className: "p-4 text-left border border-border-subtle rounded-lg hover:bg-accent transition-colors",
+							onClick: () => {
+								q({
+									name: e.name,
+									description: e.description,
+									transport: "HTTP_JSON",
+									baseUrl: e.baseUrl
+								}), G(!0);
+							},
+							children: [/* @__PURE__ */ T("p", {
+								className: "font-medium",
+								children: e.name
+							}), /* @__PURE__ */ T("p", {
+								className: "text-sm text-text-secondary mt-1",
+								children: e.description
+							})]
+						}, e.name))
+					})]
+				}),
+				W && /* @__PURE__ */ T("div", {
+					className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+					children: /* @__PURE__ */ E(u, {
+						className: "w-full max-w-lg",
+						children: [/* @__PURE__ */ E(p, { children: [/* @__PURE__ */ T(m, { children: "Add MCP Server" }), /* @__PURE__ */ T(f, { children: "Connect a new MCP server" })] }), /* @__PURE__ */ E(d, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ T(y, {
+									label: "Server Name",
+									required: !0,
+									children: /* @__PURE__ */ T(b, {
+										placeholder: "e.g., GitHub",
+										value: K.name,
+										onChange: (e) => q({
+											...K,
+											name: e.target.value
+										})
+									})
+								}),
+								/* @__PURE__ */ T(y, {
+									label: "Description",
+									children: /* @__PURE__ */ T(b, {
+										placeholder: "What does this server do?",
+										value: K.description,
+										onChange: (e) => q({
+											...K,
+											description: e.target.value
+										})
+									})
+								}),
+								/* @__PURE__ */ T(y, {
+									label: "Transport",
+									children: /* @__PURE__ */ E("select", {
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+										value: K.transport,
+										onChange: (e) => q({
+											...K,
+											transport: e.target.value
+										}),
+										children: [
+											/* @__PURE__ */ T("option", {
+												value: "HTTP_JSON",
+												children: "HTTP JSON"
+											}),
+											/* @__PURE__ */ T("option", {
+												value: "JSON_RPC",
+												children: "JSON RPC"
+											}),
+											/* @__PURE__ */ T("option", {
+												value: "SSE",
+												children: "Server-Sent Events"
+											}),
+											/* @__PURE__ */ T("option", {
+												value: "CUSTOM",
+												children: "Custom"
+											})
+										]
+									})
+								}),
+								/* @__PURE__ */ T(y, {
+									label: "Base URL",
+									required: !0,
+									children: /* @__PURE__ */ T(b, {
+										placeholder: "e.g., https://mcp.example.com",
+										value: K.baseUrl,
+										onChange: (e) => q({
+											...K,
+											baseUrl: e.target.value
+										})
+									})
+								}),
+								/* @__PURE__ */ E("div", {
+									className: "flex justify-end gap-2 pt-4",
+									children: [/* @__PURE__ */ T(h, {
+										variant: "outline",
+										onClick: () => G(!1),
+										children: "Cancel"
+									}), /* @__PURE__ */ T(h, {
+										onClick: J,
+										isLoading: z.loading,
+										disabled: !K.name || !K.baseUrl,
+										children: "Connect"
+									})]
+								})
+							]
+						})]
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { N as MCPServersPage };
+
+//# sourceMappingURL=MCPServersPage.js.map

package/dist/botlit/pages/MCPServersPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MCPServersPage.js","names":[],"sources":["../../../src/botlit/pages/MCPServersPage.tsx"],"sourcesContent":["/**\n * MCP Servers Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { Plus, Plug, PlugZap, Settings, Trash2 } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, FormField } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport {\n  useMCPServers,\n  useCreateMCPServer,\n  useDeleteMCPServer,\n  useTestMCPConnection,\n  isMCPServerHealthy,\n  mcpServerDescription,\n  mcpServerEndpoint,\n  type MCPServerRecord,\n} from '../hooks/useMCPServers';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { MCPTransport } from '../types';\n\nexport const MCPServersPage: FC = () => {\n  const { navigateTo } = useBotlit();\n  const { data: servers, loading, error, refetch } = useMCPServers();\n  const [connectServer, connectResult] = useCreateMCPServer();\n  const [deleteServer, deleteResult] = useDeleteMCPServer();\n  const [testConnection, testResult] = useTestMCPConnection();\n  const [showAddModal, setShowAddModal] = useState(false);\n  const [newServer, setNewServer] = useState({\n    name: '',\n    description: '',\n    transport: 'HTTP_JSON' as MCPTransport,\n    baseUrl: '',\n  });\n\n  const handleConnect = async () => {\n    if (!newServer.name || !newServer.baseUrl) return;\n\n    try {\n      await connectServer({\n        name: newServer.name,\n        type: newServer.transport,\n        config: {\n          url: newServer.baseUrl,\n          description: newServer.description,\n        },\n      });\n    } catch (err) {\n      // Keep the dialog open so the operator can correct and retry — closing it\n      // here is what made failed writes look like successes.\n      toast.error(err instanceof Error ? err.message : 'Failed to connect MCP server');\n      return;\n    }\n\n    toast.success(`Connected \"${newServer.name}\"`);\n    void refetch();\n    setNewServer({ name: '', description: '', transport: 'HTTP_JSON', baseUrl: '' });\n    setShowAddModal(false);\n  };\n\n  const handleDisconnect = async (server: MCPServerRecord) => {\n    try {\n      await deleteServer(server.id);\n      toast.success(`Disconnected \"${server.name}\"`);\n      void refetch();\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to disconnect MCP server');\n    }\n  };\n\n  const handleTest = async (server: MCPServerRecord) => {\n    try {\n      const ok = await testConnection(server.id);\n      if (ok) {\n        toast.success(`\"${server.name}\" is reachable`);\n      } else {\n        toast.error(`\"${server.name}\" did not respond`);\n      }\n      void refetch();\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to test MCP connection');\n    }\n  };\n\n  return (\n    <PageLayout\n      title=\"MCP Servers\"\n      description=\"Connect Model Context Protocol servers to extend agent capabilities\"\n      actions={\n        <Button leftIcon={<Plus size={16} />} onClick={() => setShowAddModal(true)}>\n          Add MCP Server\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Plug size={18} />}>\n          MCP (Model Context Protocol) servers are how your agents reach the outside world — they\n          expose real tools an agent can call, like searching the web, reading a GitHub repo,\n          querying a database or posting to Slack. Connect a server here and its tools become\n          available to your agents (gated by your tool policies), turning a chatbot into something\n          that can take action.\n        </PagePurpose>\n\n        {/* Server List */}\n        {loading ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            {[1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n              />\n            ))}\n          </div>\n        ) : error ? (\n          <ErrorState resource=\"MCP servers\" error={error} onRetry={() => void refetch()} />\n        ) : servers.length > 0 ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            {servers.map((server: MCPServerRecord) => (\n              <Card key={server.id}>\n                <CardHeader className=\"flex flex-row items-start justify-between\">\n                  <div className=\"flex items-start gap-3\">\n                    <div\n                      className={`p-2 rounded-lg ${\n                        isMCPServerHealthy(server.status)\n                          ? 'bg-status-success-bg-subtle'\n                          : 'bg-bg-sunken'\n                      }`}\n                    >\n                      {isMCPServerHealthy(server.status) ? (\n                        <PlugZap className=\"h-5 w-5 text-status-success-text\" />\n                      ) : (\n                        <Plug className=\"h-5 w-5 text-text-secondary\" />\n                      )}\n                    </div>\n                    <div>\n                      <CardTitle className=\"text-base\">{server.name}</CardTitle>\n                      <CardDescription>{mcpServerDescription(server)}</CardDescription>\n                    </div>\n                  </div>\n                  <StatusBadge status={server.status} />\n                </CardHeader>\n                <CardContent>\n                  <div className=\"space-y-4\">\n                    {/* Transport Info */}\n                    <div className=\"flex flex-wrap items-center gap-4 text-sm\">\n                      <Badge variant=\"outline\" className=\"capitalize\">\n                        {server.type.toLowerCase().replace('_', ' ')}\n                      </Badge>\n                      {server.lastConnectedAt && (\n                        <span className=\"text-text-secondary\">\n                          Last connected {formatRelativeTime(server.lastConnectedAt)}\n                        </span>\n                      )}\n                    </div>\n\n                    {/* Endpoint */}\n                    {mcpServerEndpoint(server) && (\n                      <p className=\"truncate text-sm text-text-secondary\">\n                        {mcpServerEndpoint(server)}\n                      </p>\n                    )}\n\n                    {server.errorMessage && (\n                      <p className=\"text-sm text-status-error-text\">{server.errorMessage}</p>\n                    )}\n\n                    {/* Actions */}\n                    <div className=\"flex items-center gap-2 pt-2 border-t border-border-subtle\">\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => void handleTest(server)}\n                        isLoading={testResult.loading}\n                      >\n                        Test connection\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        leftIcon={<Settings size={14} />}\n                        onClick={() => navigateTo(`mcp/${server.id}`)}\n                      >\n                        Configure\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"ml-auto\"\n                        aria-label={`Disconnect ${server.name}`}\n                        onClick={() => void handleDisconnect(server)}\n                        isLoading={deleteResult.loading}\n                      >\n                        <Trash2 size={16} />\n                      </Button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-generic\"\n            title=\"No MCP servers connected\"\n            description=\"Connect MCP servers to give your agents access to external tools and resources.\"\n            action={\n              <Button leftIcon={<Plus size={16} />} onClick={() => setShowAddModal(true)}>\n                Add MCP Server\n              </Button>\n            }\n          />\n        )}\n\n        {/* Available MCP Servers */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"text-lg font-semibold tracking-tight text-text-primary\">\n              Popular MCP Servers\n            </h2>\n            <p className=\"text-sm text-text-secondary\">Quick-add common MCP servers</p>\n          </div>\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n            {[\n              {\n                name: 'GitHub',\n                description: 'Repository management and code operations',\n                baseUrl: 'https://mcp.github.com',\n              },\n              {\n                name: 'Filesystem',\n                description: 'Local file system access',\n                baseUrl: 'http://localhost:3001',\n              },\n              {\n                name: 'Brave Search',\n                description: 'Web search capabilities',\n                baseUrl: 'https://mcp.search.brave.com',\n              },\n              {\n                name: 'PostgreSQL',\n                description: 'Database queries and management',\n                baseUrl: 'http://localhost:3002',\n              },\n              {\n                name: 'Slack',\n                description: 'Slack messaging integration',\n                baseUrl: 'https://mcp.slack.com',\n              },\n              {\n                name: 'Puppeteer',\n                description: 'Browser automation',\n                baseUrl: 'http://localhost:3003',\n              },\n            ].map((preset) => (\n              <button\n                key={preset.name}\n                className=\"p-4 text-left border border-border-subtle rounded-lg hover:bg-accent transition-colors\"\n                onClick={() => {\n                  setNewServer({\n                    name: preset.name,\n                    description: preset.description,\n                    transport: 'HTTP_JSON',\n                    baseUrl: preset.baseUrl,\n                  });\n                  setShowAddModal(true);\n                }}\n              >\n                <p className=\"font-medium\">{preset.name}</p>\n                <p className=\"text-sm text-text-secondary mt-1\">{preset.description}</p>\n              </button>\n            ))}\n          </div>\n        </GlassCard>\n\n        {/* Add Server Modal */}\n        {showAddModal && (\n          <div className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50\">\n            <Card className=\"w-full max-w-lg\">\n              <CardHeader>\n                <CardTitle>Add MCP Server</CardTitle>\n                <CardDescription>Connect a new MCP server</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                <FormField label=\"Server Name\" required>\n                  <Input\n                    placeholder=\"e.g., GitHub\"\n                    value={newServer.name}\n                    onChange={(e) => setNewServer({ ...newServer, name: e.target.value })}\n                  />\n                </FormField>\n                <FormField label=\"Description\">\n                  <Input\n                    placeholder=\"What does this server do?\"\n                    value={newServer.description}\n                    onChange={(e) => setNewServer({ ...newServer, description: e.target.value })}\n                  />\n                </FormField>\n                <FormField label=\"Transport\">\n                  <select\n                    className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                    value={newServer.transport}\n                    onChange={(e) =>\n                      setNewServer({ ...newServer, transport: e.target.value as MCPTransport })\n                    }\n                  >\n                    <option value=\"HTTP_JSON\">HTTP JSON</option>\n                    <option value=\"JSON_RPC\">JSON RPC</option>\n                    <option value=\"SSE\">Server-Sent Events</option>\n                    <option value=\"CUSTOM\">Custom</option>\n                  </select>\n                </FormField>\n                <FormField label=\"Base URL\" required>\n                  <Input\n                    placeholder=\"e.g., https://mcp.example.com\"\n                    value={newServer.baseUrl}\n                    onChange={(e) => setNewServer({ ...newServer, baseUrl: e.target.value })}\n                  />\n                </FormField>\n                <div className=\"flex justify-end gap-2 pt-4\">\n                  <Button variant=\"outline\" onClick={() => setShowAddModal(false)}>\n                    Cancel\n                  </Button>\n                  <Button\n                    onClick={handleConnect}\n                    isLoading={connectResult.loading}\n                    disabled={!newServer.name || !newServer.baseUrl}\n                  >\n                    Connect\n                  </Button>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        )}\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/botlit/pages/PoliciesPage.js

@@ -0,0 +1,224 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardHeader as a, CardTitle as o } from "../components/Card.js";
+import { Button as s } from "../components/Button.js";
+import { Badge as c, StatusBadge as l } from "../components/Badge.js";
+import { EmptyState as u } from "../components/EmptyState.js";
+import { Input as d } from "../components/Input.js";
+import { ErrorState as f } from "../components/ErrorState.js";
+import { usePolicies as p } from "../hooks/usePolicies.js";
+import "../hooks/index.js";
+import { useState as m } from "react";
+import { GlassCard as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Link as y } from "react-router";
+import { AlertTriangle as b, Clock as x, Database as S, DollarSign as C, Filter as w, MessageSquare as T, Plus as E, Search as D, Shield as O, Trash2 as k, Wrench as A } from "lucide-react";
+//#region src/botlit/pages/PoliciesPage.tsx
+var j = ({ type: e, className: t }) => {
+	switch (e) {
+		case "CONTENT": return /* @__PURE__ */ _(b, { className: t });
+		case "TOOL": return /* @__PURE__ */ _(A, { className: t });
+		case "DATA": return /* @__PURE__ */ _(S, { className: t });
+		case "RESPONSE": return /* @__PURE__ */ _(T, { className: t });
+		case "BUDGET": return /* @__PURE__ */ _(C, { className: t });
+		case "RATE_LIMIT": return /* @__PURE__ */ _(x, { className: t });
+		case "RETENTION": return /* @__PURE__ */ _(k, { className: t });
+		default: return /* @__PURE__ */ _(O, { className: t });
+	}
+}, M = {
+	CONTENT: "Content Safety",
+	TOOL: "Tool Access",
+	DATA: "Data Access",
+	RESPONSE: "Response Format",
+	BUDGET: "Budget Limits",
+	RATE_LIMIT: "Rate Limiting",
+	RETENTION: "Data Retention"
+}, N = () => {
+	let { getPath: b } = e(), [x, S] = m(""), [C, T] = m(null), { data: k, loading: A, error: N, refetch: P } = p({ search: x }), F = C ? k.filter((e) => e.type === C) : k;
+	return /* @__PURE__ */ _(n, {
+		title: "Policies & Guardrails",
+		description: "Configure safety rules, access controls, and operational limits",
+		actions: /* @__PURE__ */ _(s, {
+			leftIcon: /* @__PURE__ */ _(E, { size: 16 }),
+			children: /* @__PURE__ */ _(y, {
+				to: b("policies/new"),
+				children: "Create Policy"
+			})
+		}),
+		children: /* @__PURE__ */ v("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ _(g, {
+					icon: /* @__PURE__ */ _(O, { size: 18 }),
+					children: "Policies are the guardrails that keep your agents safe and within budget. Each policy enforces one kind of rule — blocking harmful content or PII, restricting which tools an agent may call, capping token spend, or rate-limiting requests. Define policies here and attach them to agents so every execution stays compliant and predictable."
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ _(s, {
+						variant: C === null ? "default" : "outline",
+						size: "sm",
+						onClick: () => T(null),
+						children: "All"
+					}), [
+						"CONTENT",
+						"TOOL",
+						"DATA",
+						"RESPONSE",
+						"BUDGET",
+						"RATE_LIMIT",
+						"RETENTION"
+					].map((e) => /* @__PURE__ */ _(s, {
+						variant: C === e ? "default" : "outline",
+						size: "sm",
+						onClick: () => T(e),
+						leftIcon: /* @__PURE__ */ _(j, {
+							type: e,
+							className: "h-4 w-4"
+						}),
+						children: M[e]
+					}, e))]
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ v("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ _(D, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ _(d, {
+							placeholder: "Search policies...",
+							value: x,
+							onChange: (e) => S(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ _(s, {
+						variant: "outline",
+						leftIcon: /* @__PURE__ */ _(w, { size: 16 }),
+						children: "More Filters"
+					})]
+				}),
+				A ? /* @__PURE__ */ _("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					].map((e) => /* @__PURE__ */ _("div", { className: "h-40 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : N ? /* @__PURE__ */ _(f, {
+					resource: "policies",
+					error: N,
+					onRetry: () => void P()
+				}) : F.length > 0 ? /* @__PURE__ */ _("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: F.map((e) => /* @__PURE__ */ _(y, {
+						to: b(`policies/${e.id}`),
+						children: /* @__PURE__ */ v(r, {
+							className: "h-full hover:border-primary/50 transition-colors cursor-pointer",
+							children: [/* @__PURE__ */ _(a, {
+								className: "pb-2",
+								children: /* @__PURE__ */ v("div", {
+									className: "flex items-start justify-between",
+									children: [/* @__PURE__ */ v("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ _("div", {
+											className: `p-2 rounded-lg ${e.type === "CONTENT" ? "bg-status-error-bg-subtle" : e.type === "TOOL" ? "bg-status-info-bg-subtle" : e.type === "BUDGET" ? "bg-status-warning-bg-subtle" : "bg-action-primary-bg/10"}`,
+											children: /* @__PURE__ */ _(j, {
+												type: e.type,
+												className: `h-5 w-5 ${e.type === "CONTENT" ? "text-status-error-text" : e.type === "TOOL" ? "text-status-info-text" : e.type === "BUDGET" ? "text-status-warning-text" : "text-primary"}`
+											})
+										}), /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _(o, {
+											className: "text-base",
+											children: e.name
+										}) })]
+									}), /* @__PURE__ */ _(l, { status: e.status })]
+								})
+							}), /* @__PURE__ */ _(i, { children: /* @__PURE__ */ v("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-sm text-text-secondary line-clamp-2",
+									children: e.description
+								}), /* @__PURE__ */ v("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ _(c, {
+										variant: "outline",
+										className: "text-xs",
+										children: M[e.type]
+									}), /* @__PURE__ */ _("span", {
+										className: "text-xs text-text-secondary",
+										children: t(e.createdAt)
+									})]
+								})]
+							}) })]
+						})
+					}, e.id))
+				}) : /* @__PURE__ */ _(u, {
+					illustration: "empty-generic",
+					title: C ? `No ${M[C]} policies` : "No policies",
+					description: "Create policies to enforce safety rules and operational limits across your agents.",
+					action: /* @__PURE__ */ _(s, {
+						leftIcon: /* @__PURE__ */ _(E, { size: 16 }),
+						children: /* @__PURE__ */ _(y, {
+							to: b("policies/new"),
+							children: "Create Policy"
+						})
+					})
+				}),
+				/* @__PURE__ */ v(h, {
+					treatment: "glass",
+					glow: !0,
+					className: "p-6",
+					children: [/* @__PURE__ */ v("div", {
+						className: "mb-4",
+						children: [/* @__PURE__ */ _("h2", {
+							className: "text-lg font-semibold tracking-tight text-text-primary",
+							children: "Policy Types"
+						}), /* @__PURE__ */ _("p", {
+							className: "text-sm text-text-secondary",
+							children: "Different policy types control different aspects of agent behavior"
+						})]
+					}), /* @__PURE__ */ _("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
+						children: [
+							{
+								type: "CONTENT",
+								desc: "Detect and block harmful content, jailbreaks, and PII"
+							},
+							{
+								type: "TOOL",
+								desc: "Control which tools agents can access and use"
+							},
+							{
+								type: "BUDGET",
+								desc: "Set token limits and cost caps per execution"
+							},
+							{
+								type: "RATE_LIMIT",
+								desc: "Limit request frequency to prevent abuse"
+							}
+						].map((e) => /* @__PURE__ */ v("div", {
+							className: "p-4 border border-border-subtle rounded-lg",
+							children: [/* @__PURE__ */ v("div", {
+								className: "flex items-center gap-2 mb-2",
+								children: [/* @__PURE__ */ _(j, {
+									type: e.type,
+									className: "h-5 w-5 text-primary"
+								}), /* @__PURE__ */ _("span", {
+									className: "font-medium",
+									children: M[e.type]
+								})]
+							}), /* @__PURE__ */ _("p", {
+								className: "text-sm text-text-secondary",
+								children: e.desc
+							})]
+						}, e.type))
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { N as PoliciesPage };
+
+//# sourceMappingURL=PoliciesPage.js.map

package/dist/botlit/pages/PoliciesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PoliciesPage.js","names":[],"sources":["../../../src/botlit/pages/PoliciesPage.tsx"],"sourcesContent":["/**\n * Policies Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  Shield,\n  Wrench,\n  Database,\n  MessageSquare,\n  DollarSign,\n  Clock,\n  Trash2,\n  AlertTriangle,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport { usePolicies, type PolicyRecord } from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { PolicyType } from '../types';\n\nconst PolicyTypeIcon: FC<{ type: string; className?: string }> = ({ type, className }) => {\n  switch (type) {\n    case 'CONTENT':\n      return <AlertTriangle className={className} />;\n    case 'TOOL':\n      return <Wrench className={className} />;\n    case 'DATA':\n      return <Database className={className} />;\n    case 'RESPONSE':\n      return <MessageSquare className={className} />;\n    case 'BUDGET':\n      return <DollarSign className={className} />;\n    case 'RATE_LIMIT':\n      return <Clock className={className} />;\n    case 'RETENTION':\n      return <Trash2 className={className} />;\n    default:\n      return <Shield className={className} />;\n  }\n};\n\nconst PolicyTypeLabel: Record<string, string> = {\n  CONTENT: 'Content Safety',\n  TOOL: 'Tool Access',\n  DATA: 'Data Access',\n  RESPONSE: 'Response Format',\n  BUDGET: 'Budget Limits',\n  RATE_LIMIT: 'Rate Limiting',\n  RETENTION: 'Data Retention',\n};\n\nexport const PoliciesPage: FC = () => {\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const [selectedType, setSelectedType] = useState<PolicyType | null>(null);\n  const { data: policies, loading, error, refetch } = usePolicies({ search });\n\n  const filteredPolicies = selectedType\n    ? policies.filter((policy) => policy.type === selectedType)\n    : policies;\n\n  const policyTypes: PolicyType[] = [\n    'CONTENT',\n    'TOOL',\n    'DATA',\n    'RESPONSE',\n    'BUDGET',\n    'RATE_LIMIT',\n    'RETENTION',\n  ];\n\n  return (\n    <PageLayout\n      title=\"Policies & Guardrails\"\n      description=\"Configure safety rules, access controls, and operational limits\"\n      actions={\n        <Button leftIcon={<Plus size={16} />}>\n          <Link to={getPath('policies/new')}>Create Policy</Link>\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Shield size={18} />}>\n          Policies are the guardrails that keep your agents safe and within budget. Each policy\n          enforces one kind of rule — blocking harmful content or PII, restricting which tools an\n          agent may call, capping token spend, or rate-limiting requests. Define policies here and\n          attach them to agents so every execution stays compliant and predictable.\n        </PagePurpose>\n\n        {/* Policy Type Filters */}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant={selectedType === null ? 'default' : 'outline'}\n            size=\"sm\"\n            onClick={() => setSelectedType(null)}\n          >\n            All\n          </Button>\n          {policyTypes.map((type) => (\n            <Button\n              key={type}\n              variant={selectedType === type ? 'default' : 'outline'}\n              size=\"sm\"\n              onClick={() => setSelectedType(type)}\n              leftIcon={<PolicyTypeIcon type={type} className=\"h-4 w-4\" />}\n            >\n              {PolicyTypeLabel[type]}\n            </Button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder=\"Search policies...\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            More Filters\n          </Button>\n        </div>\n\n        {/* Policies List */}\n        {loading ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {[1, 2, 3, 4, 5, 6].map((i) => (\n              <div\n                key={i}\n                className=\"h-40 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n              />\n            ))}\n          </div>\n        ) : error ? (\n          <ErrorState resource=\"policies\" error={error} onRetry={() => void refetch()} />\n        ) : filteredPolicies.length > 0 ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {filteredPolicies.map((policy: PolicyRecord) => (\n              <Link key={policy.id} to={getPath(`policies/${policy.id}`)}>\n                <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer\">\n                  <CardHeader className=\"pb-2\">\n                    <div className=\"flex items-start justify-between\">\n                      <div className=\"flex items-center gap-3\">\n                        <div\n                          className={`p-2 rounded-lg ${\n                            policy.type === 'CONTENT'\n                              ? 'bg-status-error-bg-subtle'\n                              : policy.type === 'TOOL'\n                                ? 'bg-status-info-bg-subtle'\n                                : policy.type === 'BUDGET'\n                                  ? 'bg-status-warning-bg-subtle'\n                                  : 'bg-action-primary-bg/10'\n                          }`}\n                        >\n                          <PolicyTypeIcon\n                            type={policy.type}\n                            className={`h-5 w-5 ${\n                              policy.type === 'CONTENT'\n                                ? 'text-status-error-text'\n                                : policy.type === 'TOOL'\n                                  ? 'text-status-info-text'\n                                  : policy.type === 'BUDGET'\n                                    ? 'text-status-warning-text'\n                                    : 'text-primary'\n                            }`}\n                          />\n                        </div>\n                        <div>\n                          <CardTitle className=\"text-base\">{policy.name}</CardTitle>\n                        </div>\n                      </div>\n                      <StatusBadge status={policy.status} />\n                    </div>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"space-y-3\">\n                      <p className=\"text-sm text-text-secondary line-clamp-2\">\n                        {policy.description}\n                      </p>\n\n                      {/* Type Badge */}\n                      <div className=\"flex items-center justify-between\">\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          {PolicyTypeLabel[policy.type]}\n                        </Badge>\n                        <span className=\"text-xs text-text-secondary\">\n                          {formatRelativeTime(policy.createdAt)}\n                        </span>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </Link>\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-generic\"\n            title={selectedType ? `No ${PolicyTypeLabel[selectedType]} policies` : 'No policies'}\n            description=\"Create policies to enforce safety rules and operational limits across your agents.\"\n            action={\n              <Button leftIcon={<Plus size={16} />}>\n                <Link to={getPath('policies/new')}>Create Policy</Link>\n              </Button>\n            }\n          />\n        )}\n\n        {/* Policy Types Guide */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"text-lg font-semibold tracking-tight text-text-primary\">Policy Types</h2>\n            <p className=\"text-sm text-text-secondary\">\n              Different policy types control different aspects of agent behavior\n            </p>\n          </div>\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\n            {[\n              {\n                type: 'CONTENT' as PolicyType,\n                desc: 'Detect and block harmful content, jailbreaks, and PII',\n              },\n              {\n                type: 'TOOL' as PolicyType,\n                desc: 'Control which tools agents can access and use',\n              },\n              {\n                type: 'BUDGET' as PolicyType,\n                desc: 'Set token limits and cost caps per execution',\n              },\n              {\n                type: 'RATE_LIMIT' as PolicyType,\n                desc: 'Limit request frequency to prevent abuse',\n              },\n            ].map((item) => (\n              <div key={item.type} className=\"p-4 border border-border-subtle rounded-lg\">\n                <div className=\"flex items-center gap-2 mb-2\">\n                  <PolicyTypeIcon type={item.type} className=\"h-5 w-5 text-primary\" />\n                  <span className=\"font-medium\">{PolicyTypeLabel[item.type]}</span>\n                </div>\n                <p className=\"text-sm text-text-secondary\">{item.desc}</p>\n              </div>\n            ))}\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}