@truefoundry/trueforge-ui 0.3.0-rc.1 → 0.3.0-rc.3

package/dist/AgentSessions-4IVX2SGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentSessions.tsx","../src/utils/drainListPages.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState, type ComponentType } from 'react';\nimport { Group, Panel, Separator } from 'react-resizable-panels';\n\nimport { useResourcePermissions } from '../../hooks/useResourcePermissions.js';\nimport { useSessionShareSearch } from '../../hooks/useSessionShareSearch.js';\nimport { Icon } from '../../icons/Icon.js';\nimport { buildSessionResumeHref } from '../../routing/paths.js';\nimport { useOptionalResolvedRoutes } from '../../routing/ResolvedRoutesContext.js';\nimport { useAgentSessionsServer, useServer } from '../../server/ServerContext.js';\nimport { useOptionalShellMode } from '../../server/ShellModeContext.js';\nimport type { Session, SessionEventItem, SessionListEntry } from '../../server/types.js';\nimport { useSlot } from '../../theme/SlotsProvider.js';\nimport { drainListPages } from '../../utils/drainListPages.js';\nimport { sessionTimeRangeFromCreatedAt } from '../../utils/sessionShareUrl.js';\nimport { EmptyScreen } from '../EmptyScreen.js';\nimport { cn } from '../lib/cn.js';\nimport { sessionIsCreateAgent } from '../lib/sessionCreateAgent.js';\nimport { Skeleton } from '../primitives/Skeleton.js';\nimport type { AgentSessionsProps } from './types.js';\n\nfunction sessionTitle(entry: Pick<SessionListEntry, 'title'>): string {\n  const title = entry.title?.trim();\n  return title != null && title.length > 0 ? title : 'Untitled session';\n}\n\nfunction entryIsMutable(entry: SessionListEntry): boolean {\n  if ('isMutable' in entry && typeof Reflect.get(entry, 'isMutable') === 'boolean') {\n    return Reflect.get(entry, 'isMutable') === true;\n  }\n  return entry.agentName == null;\n}\n\nfunction entrySourceType(entry: SessionListEntry): 'schedule' | undefined {\n  return 'sourceType' in entry && Reflect.get(entry, 'sourceType') === 'schedule' ? 'schedule' : undefined;\n}\n\nexport function AgentSessions({ agentId, startTimestamp, endTimestamp, shareView }: AgentSessionsProps) {\n  const sessionsServer = useAgentSessionsServer();\n  const chatServer = useServer();\n  const shell = useOptionalShellMode();\n  const routes = useOptionalResolvedRoutes();\n  const { sessionId: selectedSessionId, updateShareSearch } = useSessionShareSearch();\n  const { allows } = useResourcePermissions({\n    resourceType: 'session',\n    resourceIds: selectedSessionId == null ? [] : [selectedSessionId],\n  });\n  const canResume = allows(selectedSessionId, 'MANAGE');\n\n  const AgentSessionListRow = useSlot('AgentSessionListRow');\n  const AgentSessionDetailHeader = useSlot('AgentSessionDetailHeader');\n  const AgentSessionTimelineContainer = useSlot('AgentSessionTimelineContainer');\n\n  const [entries, setEntries] = useState<SessionListEntry[]>([]);\n  const [nextPageToken, setNextPageToken] = useState<string | undefined>();\n  const [listLoading, setListLoading] = useState(true);\n  const [listLoadingMore, setListLoadingMore] = useState(false);\n  const [listFailed, setListFailed] = useState(false);\n  const listRequestIdRef = useRef(0);\n  const [detailEvents, setDetailEvents] = useState<SessionEventItem[]>();\n  const [detailSession, setDetailSession] = useState<Session>();\n  const [detailLoading, setDetailLoading] = useState(false);\n  const [detailFailed, setDetailFailed] = useState(false);\n\n  const listRequest = useMemo(\n    () => ({\n      order: 'desc' as const,\n      limit: 20,\n      ...(agentId == null || agentId.length === 0 ? {} : { agentId }),\n      ...(startTimestamp == null ? {} : { startTimestamp }),\n      ...(endTimestamp == null ? {} : { endTimestamp }),\n    }),\n    [agentId, endTimestamp, startTimestamp],\n  );\n\n  useEffect(() => {\n    const requestId = ++listRequestIdRef.current;\n    let cancelled = false;\n    setListLoading(true);\n    setListLoadingMore(false);\n    setListFailed(false);\n    void sessionsServer\n      .listSessions(listRequest)\n      .then(page => {\n        if (cancelled || listRequestIdRef.current !== requestId) return;\n        setEntries(page.data);\n        setNextPageToken(page.nextPageToken);\n      })\n      .catch(() => {\n        if (cancelled || listRequestIdRef.current !== requestId) return;\n        setEntries([]);\n        setNextPageToken(undefined);\n        setListFailed(true);\n      })\n      .finally(() => {\n        if (!cancelled && listRequestIdRef.current === requestId) setListLoading(false);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [listRequest, sessionsServer]);\n\n  const loadMore = useCallback(async () => {\n    if (nextPageToken == null || listLoadingMore) return;\n    const requestId = listRequestIdRef.current;\n    setListLoadingMore(true);\n    try {\n      const page = await sessionsServer.listSessions({ ...listRequest, pageToken: nextPageToken });\n      if (listRequestIdRef.current !== requestId) return;\n      setEntries(current => [...current, ...page.data]);\n      setNextPageToken(page.nextPageToken);\n    } catch {\n      // Keep the current page and token visible so the user can retry.\n    } finally {\n      if (listRequestIdRef.current === requestId) setListLoadingMore(false);\n    }\n  }, [listLoadingMore, listRequest, nextPageToken, sessionsServer]);\n\n  useEffect(() => {\n    if (selectedSessionId == null || selectedSessionId.length === 0) {\n      setDetailEvents(undefined);\n      setDetailSession(undefined);\n      setDetailFailed(false);\n      setDetailLoading(false);\n      return;\n    }\n\n    let cancelled = false;\n    setDetailLoading(true);\n    setDetailFailed(false);\n    setDetailEvents(undefined);\n    setDetailSession(undefined);\n\n    void Promise.all([\n      drainListPages({\n        fetchPage: pageToken =>\n          sessionsServer.listSessionEvents({\n            sessionId: selectedSessionId,\n            limit: 100,\n            ...(pageToken == null ? {} : { pageToken }),\n          }),\n      }),\n      chatServer.getSession({ sessionId: selectedSessionId }).catch(() => undefined),\n    ])\n      .then(([itemsNewestFirst, session]) => {\n        if (cancelled) return;\n        setDetailEvents([...itemsNewestFirst].reverse());\n        setDetailSession(session);\n      })\n      .catch(() => {\n        if (!cancelled) setDetailFailed(true);\n      })\n      .finally(() => {\n        if (!cancelled) setDetailLoading(false);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [chatServer, selectedSessionId, sessionsServer]);\n\n  const selectSession = (entry: SessionListEntry) => {\n    const pinned = shareView === 'sessions' ? sessionTimeRangeFromCreatedAt(entry.createdAt) : null;\n    updateShareSearch({\n      sessionId: entry.id,\n      ...(shareView === 'sessions'\n        ? { view: 'sessions', ...(pinned == null ? {} : { timeRange: pinned }) }\n        : { agentId: agentId ?? null, tab: 'sessions', view: null, timeRange: null }),\n    });\n  };\n\n  const clearSelectedSession = () => {\n    if (selectedSessionId == null) return;\n    updateShareSearch({ sessionId: null });\n  };\n\n  const selectedEntry = entries.find(entry => entry.id === selectedSessionId);\n  const selectedTitle =\n    detailSession != null\n      ? sessionTitle(detailSession)\n      : selectedEntry != null\n        ? sessionTitle(selectedEntry)\n        : (selectedSessionId ?? 'Untitled session');\n\n  const resumeIsCreateAgent =\n    detailSession != null\n      ? sessionIsCreateAgent(detailSession)\n      : selectedEntry != null\n        ? sessionIsCreateAgent(selectedEntry)\n        : false;\n  const resumeIsMutable =\n    detailSession != null ? detailSession.isMutable : selectedEntry != null ? entryIsMutable(selectedEntry) : true;\n  const resumeLabel = resumeIsCreateAgent ? 'Resume Agent building' : 'Resume Chat';\n  const resumeHref =\n    selectedSessionId != null && routes != null\n      ? buildSessionResumeHref({ sessionId: selectedSessionId, routes })\n      : null;\n\n  const handleResume = () => {\n    if (!canResume || selectedSessionId == null || shell == null) return;\n    const agentName = detailSession?.agentName ?? selectedEntry?.agentName;\n    shell.openHistorySession({\n      sessionId: selectedSessionId,\n      isMutable: resumeIsMutable,\n      isCreateAgent: resumeIsCreateAgent,\n      ...(agentName != null && agentName.length > 0 ? { agentName } : {}),\n    });\n  };\n\n  const resumeProps =\n    resumeHref != null ? { resumeHref, resumeLabel } : shell != null ? { onResume: handleResume, resumeLabel } : {};\n\n  // Full empty only when nothing is selected — keep the detail pane for deep-linked sessionIds\n  // (filters/time range can empty the list while share state still points at a session).\n  if (\n    !listLoading &&\n    !listFailed &&\n    entries.length === 0 &&\n    (selectedSessionId == null || selectedSessionId.length === 0)\n  ) {\n    return (\n      <EmptyScreen\n        title=\"No Sessions Found\"\n        description=\"There are no sessions available at the moment.\"\n        className=\"bg-primary-bg\"\n      />\n    );\n  }\n\n  return (\n    <Group\n      id=\"agent-sessions-split\"\n      orientation=\"horizontal\"\n      className=\"h-full min-h-0 w-full\"\n      resizeTargetMinimumSize={{ coarse: 24, fine: 11 }}\n    >\n      <Panel id=\"agent-sessions-list\" defaultSize=\"35%\" minSize=\"20%\" maxSize=\"50%\">\n        <aside className=\"flex h-full min-h-0 w-full flex-col bg-sidebar-bg\">\n          <div className=\"scrollbar-none min-h-0 flex-1 overflow-y-auto\">\n            {listLoading ? (\n              <div className=\"space-y-2 p-3\" role=\"status\" aria-label=\"Loading sessions\">\n                {['a', 'b', 'c'].map(key => (\n                  <Skeleton key={key} className=\"h-16 rounded-md\" />\n                ))}\n              </div>\n            ) : listFailed ? (\n              <p className=\"px-3 py-6 text-center text-xs text-text-secondary\">Sessions could not be loaded.</p>\n            ) : (\n              entries.map(entry => (\n                <AgentSessionListRow\n                  key={entry.id}\n                  title={sessionTitle(entry)}\n                  agentName={entry.agentName ?? undefined}\n                  sourceType={entrySourceType(entry)}\n                  lastActivityAt={entry.lastActivityAt}\n                  metrics={entry.metrics}\n                  active={entry.id === selectedSessionId}\n                  onSelect={() => selectSession(entry)}\n                />\n              ))\n            )}\n          </div>\n\n          {nextPageToken != null && !listLoading ? (\n            <div className=\"shrink-0 border-t border-border p-3\">\n              <button\n                type=\"button\"\n                disabled={listLoadingMore}\n                onClick={() => void loadMore()}\n                className=\"h-8 w-full rounded-md border border-border text-xs font-medium text-text-primary hover:bg-ghost-button-hover disabled:opacity-60\"\n              >\n                {listLoadingMore ? 'Loading…' : 'Load more'}\n              </button>\n            </div>\n          ) : null}\n        </aside>\n      </Panel>\n\n      <Separator\n        id=\"agent-sessions-resizer\"\n        aria-label=\"Resize session list\"\n        className=\"group/resizer relative z-10 w-0 cursor-col-resize focus-visible:outline-none\"\n      >\n        <div aria-hidden className=\"absolute inset-y-0 -left-1.25 w-2.75\" />\n        <div aria-hidden className=\"absolute inset-y-0 left-0 w-px bg-border transition-colors\" />\n        <div\n          aria-hidden\n          className={cn(\n            'absolute top-1/2 left-0 z-10 flex h-4 w-2 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xs shadow-sm transition-colors',\n            'bg-secondary-button-bg text-text-secondary',\n            'group-hover/resizer:bg-primary-button-bg group-hover/resizer:text-primary-button-text',\n            'group-active/resizer:bg-primary-button-bg group-active/resizer:text-primary-button-text',\n            'group-focus-visible/resizer:bg-primary-button-bg group-focus-visible/resizer:text-primary-button-text',\n          )}\n        >\n          <Icon name=\"grip-vertical\" size={10} />\n        </div>\n      </Separator>\n\n      <Panel id=\"agent-session-detail\" defaultSize=\"65%\" minSize=\"30%\">\n        <section className=\"flex h-full min-w-0 flex-col bg-primary-bg\">\n          {selectedSessionId == null ? (\n            <div className=\"flex flex-1 items-center justify-center px-6 text-sm text-text-secondary\">\n              Select a session to view details\n            </div>\n          ) : detailFailed ? (\n            <div className=\"flex flex-1 items-center justify-center px-6 text-sm text-text-secondary\">\n              Session details could not be loaded.\n            </div>\n          ) : (\n            <>\n              <AgentSessionDetailHeader\n                title={selectedTitle}\n                sessionId={selectedSessionId}\n                agentId={agentId}\n                createdAt={detailSession?.createdAt ?? selectedEntry?.createdAt}\n                view={shareView}\n                onClose={clearSelectedSession}\n                canResume={canResume}\n                {...resumeProps}\n              />\n              {detailLoading || detailEvents === undefined ? (\n                <div className=\"flex flex-1 flex-col p-4\" role=\"status\" aria-label=\"Loading session details\">\n                  <Skeleton className=\"min-h-64 flex-1 rounded-lg\" />\n                </div>\n              ) : (\n                <AgentSessionTimelineContainer\n                  sessionId={selectedSessionId}\n                  events={detailEvents}\n                  listMetrics={selectedEntry?.metrics}\n                />\n              )}\n            </>\n          )}\n        </section>\n      </Panel>\n    </Group>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentSessions: ComponentType<AgentSessionsProps>;\n  }\n}\n","import type { ListResult } from '../server/types.js';\n\n/** Drain token-paginated list endpoints until `nextPageToken` is exhausted. */\nexport async function drainListPages<T>({\n  fetchPage,\n}: {\n  fetchPage: (pageToken?: string) => Promise<ListResult<T>>;\n}): Promise<T[]> {\n  const items: T[] = [];\n  let pageToken: string | undefined;\n  do {\n    const page = await fetchPage(pageToken);\n    items.push(...page.data);\n    pageToken = page.nextPageToken;\n  } while (pageToken != null && pageToken.length > 0);\n  return items;\n}\n"],"mappings":"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","names":[]}

package/dist/{ConnectorSettings-MXFRWWR6.js → ConnectorSettings-R5VEP7BO.js}

@@ -7,41 +7,45 @@ import {
   auiInputClass,
   useMCPAuth,
   useToasterOptional
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
+} from "./chunk-2O5EJ6QS.js";
+import "./chunk-KR7WYHVF.js";
 import {
-  Icon,
-  getErrorMessage
-} from "./chunk-XAU7QFG3.js";
+  Icon
+} from "./chunk-Q6TCT7ZJ.js";
 import {
+  getErrorMessage,
   useCatalogServer
-} from "./chunk-U7KURWW3.js";
+} from "./chunk-PT4EENB3.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
+import "./chunk-J5BPHEDT.js";
 import {
   cn
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-LXJMINS6.js";
 
 // src/containers/SettingsBuilder/ConnectorSettings.tsx
-import { useCallback, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
 
 // src/containers/SettingsBuilder/AddMcpServerForm.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var AUTH_OPTIONS = [
-  { value: "dcr", label: "OAuth" },
   { value: "none", label: "None" },
-  { value: "header", label: "API Key" }
+  { value: "header", label: "API Key" },
+  { value: "dcr", label: "OAuth" }
 ];
 var inputClassName = auiInputClass("h-11 shadow-sm");
 var RequiredMark = () => /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-failure-bg", "aria-hidden": true, children: "*" });
-var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
+var AddMcpServerForm = ({ open, onOpenChange, onSubmit, connector, busy = false, error }) => {
   const [name, setName] = useState("");
   const [url, setUrl] = useState("");
   const [description, setDescription] = useState("");
   const [authType, setAuthType] = useState("dcr");
   const [apiKey, setApiKey] = useState("");
   const [headerName, setHeaderName] = useState("");
+  const isEditing = connector !== void 0;
+  const nameInputClassName = auiInputClass(
+    `h-11 shadow-sm ${isEditing ? "cursor-not-allowed bg-secondary-bg/60 text-text-secondary opacity-40" : ""}`
+  );
   const resetForm = () => {
     setName("");
     setUrl("");
@@ -50,11 +54,21 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
     setApiKey("");
     setHeaderName("");
   };
+  useEffect(() => {
+    if (!open) return;
+    setName(connector?.name ?? "");
+    setUrl(connector?.url ?? "");
+    setDescription(connector?.description ?? "");
+    setAuthType(connector?.auth.type ?? "dcr");
+    setApiKey("");
+    setHeaderName(connector?.auth.type === "header" ? connector.auth.headerName ?? "" : "");
+  }, [connector, open]);
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) resetForm();
     onOpenChange(nextOpen);
   };
-  const isValid = !!name.trim() && !!description.trim() && !!url.trim() && (authType !== "header" || !!apiKey.trim());
+  const hasApiKey = !!apiKey.trim() || connector?.auth.type === "header";
+  const isValid = !!name.trim() && !!description.trim() && !!url.trim() && (authType !== "header" || hasApiKey);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!isValid || busy) return;
@@ -64,7 +78,7 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
       ...headerName.trim() ? { headerName: headerName.trim() } : {}
     } : { type: authType };
     try {
-      await onAdd({
+      await onSubmit({
         name: name.trim(),
         url: url.trim(),
         description: description.trim(),
@@ -80,8 +94,8 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
     {
       open,
       onOpenChange: handleOpenChange,
-      title: "Add MCP server",
-      description: "Point at a remote MCP endpoint. It then behaves like any other connector.",
+      title: isEditing ? "Edit MCP server" : "Add MCP server",
+      description: isEditing ? "Update how this connector authenticates." : "Point at a remote MCP endpoint. It then behaves like any other connector.",
       contentSized: true,
       headerIcon: /* @__PURE__ */ jsx(
         "span",
@@ -105,12 +119,14 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
                 type: "text",
                 required: true,
                 value: name,
+                readOnly: isEditing,
+                "aria-disabled": isEditing,
                 onChange: (event) => {
                   setName(event.target.value);
                 },
                 placeholder: "analytics-postgres-mcp",
-                autoFocus: true,
-                className: inputClassName
+                autoFocus: !isEditing,
+                className: nameInputClassName
               }
             )
           ] }),
@@ -191,14 +207,14 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-api-key", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
                 "API key",
-                /* @__PURE__ */ jsx(RequiredMark, {})
+                connector?.auth.type === "header" ? /* @__PURE__ */ jsx("span", { className: "font-normal text-text-secondary", children: " (leave blank to keep current)" }) : /* @__PURE__ */ jsx(RequiredMark, {})
               ] }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   id: "mcp-server-api-key",
                   type: "password",
-                  required: true,
+                  required: connector?.auth.type !== "header",
                   value: apiKey,
                   onChange: (event) => {
                     setApiKey(event.target.value);
@@ -231,7 +247,7 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
           error ? /* @__PURE__ */ jsx("p", { className: "text-failure-bg text-sm", children: error }) : null,
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", disabled: !isValid || busy, className: "w-full shrink-0", children: "Add" })
+          /* @__PURE__ */ jsx(Button.Primary, { type: "submit", size: "large", disabled: !isValid || busy, className: "w-full shrink-0", children: isEditing ? "Save" : "Add" })
         ] })
       ] })
     }
@@ -247,7 +263,7 @@ var AUTH_TYPE_LABELS = {
 };
 
 // src/containers/SettingsBuilder/ConnectorDetails.tsx
-import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ExpandableDescription({ text }) {
   const contentRef = useRef(null);
@@ -321,6 +337,7 @@ var ConnectorDetails = ({
   connector,
   onBack,
   onConnectorRefreshed,
+  onEdit,
   onDisconnect,
   busy = false
 }) => {
@@ -330,7 +347,7 @@ var ConnectorDetails = ({
   const [toolsLoading, setToolsLoading] = useState2(true);
   const [toolsError, setToolsError] = useState2(null);
   const [refreshingAfterAuth, setRefreshingAfterAuth] = useState2(false);
-  useEffect(() => {
+  useEffect2(() => {
     let cancelled = false;
     setTools([]);
     setToolsError(null);
@@ -385,13 +402,14 @@ var ConnectorDetails = ({
           }
         ),
         /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx2("h4", { className: "text-lg font-semibold text-text-primary", children: connector.name }),
-          /* @__PURE__ */ jsxs2("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2("h4", { className: "text-lg font-semibold text-text-primary", children: connector.name }),
+            /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-text-secondary", children: AUTH_TYPE_LABELS[connector.auth.type] ?? AUTH_TYPE_LABELS.none }),
             /* @__PURE__ */ jsxs2(
               "span",
               {
                 className: cn(
-                  "flex items-center gap-1.5 text-xs font-medium",
+                  "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
                   connector.authenticated ? "text-success-bg" : "text-text-primary"
                 ),
                 children: [
@@ -407,29 +425,30 @@ var ConnectorDetails = ({
                   connector.authenticated ? "Connected" : "Not authenticated"
                 ]
               }
-            ),
-            /* @__PURE__ */ jsxs2("span", { className: "text-text-secondary", children: [
-              "\xB7 ",
-              connector.description
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ jsx2("span", { className: "mt-2 inline-flex items-center rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-text-secondary", children: AUTH_TYPE_LABELS[connector.auth.type] ?? AUTH_TYPE_LABELS.none })
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: /* @__PURE__ */ jsx2("span", { className: "text-text-secondary", children: connector.description }) })
         ] }),
-        connector.auth.type === "dcr" && !connector.authenticated ? /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            type: "button",
-            disabled: busy || connecting,
-            onClick: () => {
-              void handleAuthorize(connector.id, (isSuccess) => {
-                if (isSuccess) void refreshAfterAuthentication();
-              });
-            },
-            children: connecting ? "Connecting\u2026" : "Connect"
-          }
-        ) : connector.auth.type === "dcr" && !connector.requiresAuth ? /* @__PURE__ */ jsx2(Button, { variant: "outline", size: "sm", type: "button", disabled: busy, onClick: onDisconnect, children: "Disconnect" }) : null
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs2(Button.Secondary, { size: "small", type: "button", disabled: busy, onClick: onEdit, children: [
+            /* @__PURE__ */ jsx2(Icon, { name: "pencil", className: "size-3" }),
+            "Edit"
+          ] }),
+          connector.auth.type === "dcr" && !connector.authenticated ? /* @__PURE__ */ jsx2(
+            Button.Secondary,
+            {
+              size: "small",
+              type: "button",
+              disabled: busy || connecting,
+              onClick: () => {
+                void handleAuthorize(connector.id, (isSuccess) => {
+                  if (isSuccess) void refreshAfterAuthentication();
+                });
+              },
+              children: connecting ? "Connecting\u2026" : "Connect"
+            }
+          ) : connector.auth.type === "dcr" && !connector.requiresAuth ? /* @__PURE__ */ jsx2(Button.Secondary, { size: "small", type: "button", disabled: busy, onClick: onDisconnect, children: "Disconnect" }) : null
+        ] })
       ] }),
       /* @__PURE__ */ jsx2("section", { className: "mt-6", "aria-labelledby": "connector-tools-heading", children: toolsLoading ? /* @__PURE__ */ jsx2("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-text-secondary", children: "Loading tools\u2026" }) : toolsError ? /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-failure-bg/30 bg-failure-bg/10 p-6 text-center text-sm text-failure-bg", children: [
         toolsError,
@@ -475,6 +494,7 @@ var ConnectorSettings = () => {
   const [busy, setBusy] = useState3(false);
   const [catalog, setCatalog] = useState3([]);
   const [addMcpServerFormOpen, setAddMcpServerFormOpen] = useState3(false);
+  const [editingConnector, setEditingConnector] = useState3(null);
   const [connectorAwaitingKey, setConnectorAwaitingKey] = useState3(null);
   const [selectedConnector, setSelectedConnector] = useState3(null);
   const [apiKey, setApiKey] = useState3("");
@@ -515,7 +535,7 @@ var ConnectorSettings = () => {
       setLoading(false);
     }
   }, [connectorCatalog]);
-  useEffect2(() => {
+  useEffect3(() => {
     void refresh();
   }, [refresh]);
   const normalizedQuery = query.trim().toLowerCase();
@@ -597,35 +617,27 @@ var ConnectorSettings = () => {
         apiKey: apiKey.trim(),
         ...entry.auth.type === "header" && entry.auth.headerName ? { headerName: entry.auth.headerName } : {}
       };
-      const existing = connectors.ordered.find(({ connector }) => connector.id === entry.id);
-      const existingConnector = existing?.isConfigured ? existing.connector : void 0;
-      if (existingConnector) {
-        await connectorCatalog.updateConnector({
-          id: existingConnector.id,
-          name: existingConnector.name,
-          description: existingConnector.description,
-          url: existingConnector.url,
-          auth
-        });
-      } else {
-        await createFromCatalog(entry, auth);
-      }
+      await createFromCatalog(entry, auth);
       closeApiKeyModal();
       setTimeout(() => {
         toaster?.showSuccess({
-          title: `${entry.name} ${existingConnector ? "updated" : "connected"}`
+          title: `${entry.name} connected`
         });
       }, 100);
     }, setFormError).catch(() => {
     });
   };
-  const handleAddMcpServer = async (draft) => {
+  const handleMcpServerSubmit = async (draft) => {
     setFormError(null);
     await runMutation(async () => {
-      await connectorCatalog.createConnector({ ...draft });
+      if (editingConnector) {
+        await connectorCatalog.updateConnector({ id: editingConnector.id, ...draft });
+      } else {
+        await connectorCatalog.createConnector({ ...draft });
+      }
     }, setFormError);
     setTimeout(() => {
-      toaster?.showSuccess({ title: `${draft.name} added` });
+      toaster?.showSuccess({ title: `${draft.name} ${editingConnector ? "updated" : "added"}` });
     }, 0);
   };
   const handleDisconnect = (connector) => {
@@ -660,7 +672,30 @@ var ConnectorSettings = () => {
         }
       ),
       /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: connector.name }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: connector.name }),
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              className: cn(
+                "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
+                connector.authenticated ? "text-success-bg" : "text-text-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "h-1.5 w-1.5 rounded-full",
+                      connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
+                    )
+                  }
+                ),
+                connector.authenticated ? "Connected" : "Added"
+              ]
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsx3("p", { className: "mt-0.5 line-clamp-2 text-sm text-text-secondary sm:truncate", children: connector.description })
       ] })
     ] });
@@ -676,45 +711,24 @@ var ConnectorSettings = () => {
           children: [
             /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: content }),
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3(
-                "span",
+              /* @__PURE__ */ jsxs3(
+                Button.Secondary,
                 {
-                  className: cn(
-                    "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
-                    connector.authenticated ? "text-success-bg" : "text-text-primary"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx3(
-                      "span",
-                      {
-                        className: cn(
-                          "h-1.5 w-1.5 rounded-full",
-                          connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
-                        )
-                      }
-                    ),
-                    connector.authenticated ? "Connected" : "Added"
-                  ]
-                }
-              ) }),
-              connector.auth.type === "header" ? /* @__PURE__ */ jsxs3(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "sm",
+                  size: "small",
                   type: "button",
                   disabled: busy,
                   onClick: (event) => {
                     event.stopPropagation();
-                    setApiKey("");
-                    setConnectorAwaitingKey(connector);
+                    setFormError(null);
+                    setEditingConnector(connector);
+                    setAddMcpServerFormOpen(true);
                   },
                   children: [
-                    /* @__PURE__ */ jsx3(Icon, { name: "wrench", className: "size-3" }),
-                    "Replace Key"
+                    /* @__PURE__ */ jsx3(Icon, { name: "pencil", className: "size-3" }),
+                    "Edit"
                   ]
                 }
-              ) : null,
+              ),
               /* @__PURE__ */ jsx3(Icon, { name: "chevron-right", className: "size-4" })
             ] })
           ]
@@ -746,10 +760,9 @@ var ConnectorSettings = () => {
           /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx3("span", { className: "hidden text-xs text-text-secondary sm:inline", children: AUTH_TYPE_LABELS[entry.auth.type] ?? AUTH_TYPE_LABELS.none }),
             /* @__PURE__ */ jsx3(
-              Button,
+              Button.Secondary,
               {
-                variant: "secondary",
-                size: "sm",
+                size: "small",
                 type: "button",
                 disabled: busy,
                 onClick: () => {
@@ -764,26 +777,45 @@ var ConnectorSettings = () => {
       entry.id
     );
   };
-  const isReplacingKey = useMemo(() => {
-    return connectorAwaitingKey !== null && connectors.ordered.some(
-      (item) => item.isConfigured && item.connector.id === connectorAwaitingKey.id
-    );
-  }, [connectorAwaitingKey, connectors.ordered]);
   if (selectedConnector) {
-    return /* @__PURE__ */ jsx3(
-      ConnectorDetails_default,
-      {
-        connector: selectedConnector,
-        busy,
-        onBack: () => {
-          setSelectedConnector(null);
-        },
-        onConnectorRefreshed: handleConnectorRefreshed,
-        onDisconnect: () => {
-          handleDisconnect(selectedConnector);
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(
+        ConnectorDetails_default,
+        {
+          connector: selectedConnector,
+          busy,
+          onBack: () => {
+            setSelectedConnector(null);
+          },
+          onConnectorRefreshed: handleConnectorRefreshed,
+          onEdit: () => {
+            setFormError(null);
+            setEditingConnector(selectedConnector);
+            setAddMcpServerFormOpen(true);
+          },
+          onDisconnect: () => {
+            handleDisconnect(selectedConnector);
+          }
         }
-      }
-    );
+      ),
+      /* @__PURE__ */ jsx3(
+        AddMcpServerForm_default,
+        {
+          open: addMcpServerFormOpen,
+          onOpenChange: (open) => {
+            setAddMcpServerFormOpen(open);
+            if (!open) {
+              setEditingConnector(null);
+              setFormError(null);
+            }
+          },
+          onSubmit: handleMcpServerSubmit,
+          connector: editingConnector ?? void 0,
+          busy,
+          error: formError
+        }
+      )
+    ] });
   }
   const hasMatches = matchingConnected.length > 0 || availableConnectors.length > 0;
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
@@ -794,12 +826,12 @@ var ConnectorSettings = () => {
       /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx3("div", { className: "flex-1", children: /* @__PURE__ */ jsx3(SearchInput_default, { query, setQuery, placeholder: "Search connectors" }) }),
         /* @__PURE__ */ jsxs3(
-          Button,
+          Button.Secondary,
           {
-            variant: "secondary",
             type: "button",
             onClick: () => {
               setFormError(null);
+              setEditingConnector(null);
               setAddMcpServerFormOpen(true);
             },
             children: [
@@ -848,7 +880,7 @@ var ConnectorSettings = () => {
           onOpenChange: (open) => {
             if (!open) closeApiKeyModal();
           },
-          title: `${isReplacingKey ? "Replace key for" : "Connect"} ${connectorAwaitingKey?.name ?? "connector"}`,
+          title: `Connect ${connectorAwaitingKey?.name ?? "connector"}`,
           description: connectorAwaitingKey?.url,
           contentSized: true,
           className: "md:max-w-xl",
@@ -896,8 +928,8 @@ var ConnectorSettings = () => {
               formError ? /* @__PURE__ */ jsx3("p", { className: "text-failure-bg text-sm", children: formError }) : null
             ] }),
             /* @__PURE__ */ jsxs3("footer", { className: "flex justify-end gap-2 border-t border-border px-5 py-4", children: [
-              /* @__PURE__ */ jsx3(Button, { variant: "ghost", type: "button", onClick: closeApiKeyModal, disabled: busy, children: "Cancel" }),
-              /* @__PURE__ */ jsx3(Button, { type: "submit", disabled: !apiKey.trim() || busy, children: isReplacingKey ? "Replace Key" : "Connect" })
+              /* @__PURE__ */ jsx3(Button.Ghost, { type: "button", onClick: closeApiKeyModal, disabled: busy, children: "Cancel" }),
+              /* @__PURE__ */ jsx3(Button.Primary, { type: "submit", disabled: !apiKey.trim() || busy, children: "Connect" })
             ] })
           ] })
         }
@@ -908,9 +940,13 @@ var ConnectorSettings = () => {
           open: addMcpServerFormOpen,
           onOpenChange: (open) => {
             setAddMcpServerFormOpen(open);
-            if (!open) setFormError(null);
+            if (!open) {
+              setEditingConnector(null);
+              setFormError(null);
+            }
           },
-          onAdd: handleAddMcpServer,
+          onSubmit: handleMcpServerSubmit,
+          connector: editingConnector ?? void 0,
           busy,
           error: formError
         }
@@ -922,4 +958,4 @@ var ConnectorSettings_default = ConnectorSettings;
 export {
   ConnectorSettings_default as default
 };
-//# sourceMappingURL=ConnectorSettings-MXFRWWR6.js.map
+//# sourceMappingURL=ConnectorSettings-R5VEP7BO.js.map