@getcatalystiq/agent-plane-ui 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +140 -36
  2. package/dist/index.d.cts +7 -6
  3. package/dist/index.d.ts +7 -6
  4. package/dist/index.js +140 -36
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1091,6 +1091,7 @@ function CancelRunButton({ runId, onCancelled }) {
1091
1091
  ] }) })
1092
1092
  ] });
1093
1093
  }
1094
+ var emptyForm = { name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" };
1094
1095
  function McpServerListPage({ initialData }) {
1095
1096
  const { mutate } = useSWR.useSWRConfig();
1096
1097
  const client = useAgentPlaneClient();
@@ -1099,21 +1100,48 @@ function McpServerListPage({ initialData }) {
1099
1100
  (c) => c.customConnectors.listServers(),
1100
1101
  initialData ? { fallbackData: initialData } : void 0
1101
1102
  );
1102
- const [showAdd, setShowAdd] = React3.useState(false);
1103
- const [adding, setAdding] = React3.useState(false);
1104
- const [newServer, setNewServer] = React3.useState({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
1103
+ const [showCreate, setShowCreate] = React3.useState(false);
1104
+ const [creating, setCreating] = React3.useState(false);
1105
+ const [createForm, setCreateForm] = React3.useState(emptyForm);
1106
+ const [createError, setCreateError] = React3.useState("");
1107
+ const [editTarget, setEditTarget] = React3.useState(null);
1108
+ const [editing, setEditing] = React3.useState(false);
1109
+ const [editForm, setEditForm] = React3.useState({ name: "", description: "" });
1110
+ const [editError, setEditError] = React3.useState("");
1105
1111
  const [deleteTarget, setDeleteTarget] = React3.useState(null);
1106
1112
  const [deleting, setDeleting] = React3.useState(false);
1107
1113
  const [deleteError, setDeleteError] = React3.useState("");
1108
- async function handleAdd() {
1109
- setAdding(true);
1114
+ async function handleCreate() {
1115
+ setCreating(true);
1116
+ setCreateError("");
1110
1117
  try {
1111
- await client.customConnectors.createServer(newServer);
1112
- setShowAdd(false);
1113
- setNewServer({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
1118
+ await client.customConnectors.createServer(createForm);
1119
+ setShowCreate(false);
1120
+ setCreateForm(emptyForm);
1114
1121
  mutate("mcp-servers");
1122
+ } catch (err) {
1123
+ setCreateError(err instanceof Error ? err.message : "Failed to create");
1115
1124
  } finally {
1116
- setAdding(false);
1125
+ setCreating(false);
1126
+ }
1127
+ }
1128
+ function openEdit(server) {
1129
+ setEditTarget(server);
1130
+ setEditForm({ name: server.name, description: server.description });
1131
+ setEditError("");
1132
+ }
1133
+ async function handleEdit() {
1134
+ if (!editTarget) return;
1135
+ setEditing(true);
1136
+ setEditError("");
1137
+ try {
1138
+ await client.customConnectors.updateServer(editTarget.id, editForm);
1139
+ setEditTarget(null);
1140
+ mutate("mcp-servers");
1141
+ } catch (err) {
1142
+ setEditError(err instanceof Error ? err.message : "Failed to update");
1143
+ } finally {
1144
+ setEditing(false);
1117
1145
  }
1118
1146
  }
1119
1147
  async function handleDelete() {
@@ -1132,7 +1160,7 @@ function McpServerListPage({ initialData }) {
1132
1160
  }
1133
1161
  if (error) {
1134
1162
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-destructive", children: [
1135
- "Failed to load MCP servers: ",
1163
+ "Failed to load connectors: ",
1136
1164
  error.message
1137
1165
  ] }) });
1138
1166
  }
@@ -1140,17 +1168,7 @@ function McpServerListPage({ initialData }) {
1140
1168
  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-96 rounded-lg" });
1141
1169
  }
1142
1170
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
1143
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Register Connector" }) }),
1144
- showAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
1145
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
1146
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Name", value: newServer.name, onChange: (e) => setNewServer({ ...newServer, name: e.target.value }) }),
1147
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Slug", value: newServer.slug, onChange: (e) => setNewServer({ ...newServer, slug: e.target.value }) }),
1148
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Description", value: newServer.description, onChange: (e) => setNewServer({ ...newServer, description: e.target.value }) }),
1149
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Base URL", value: newServer.base_url, onChange: (e) => setNewServer({ ...newServer, base_url: e.target.value }) }),
1150
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "MCP Endpoint Path", value: newServer.mcp_endpoint_path, onChange: (e) => setNewServer({ ...newServer, mcp_endpoint_path: e.target.value }) })
1151
- ] }),
1152
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newServer.name || !newServer.base_url, children: adding ? "Adding..." : "Add Server" })
1153
- ] }),
1171
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(true), children: "+ New Connector" }) }),
1154
1172
  /* @__PURE__ */ jsxRuntime.jsxs(AdminTable, { children: [
1155
1173
  /* @__PURE__ */ jsxRuntime.jsxs(AdminTableHead, { children: [
1156
1174
  /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
@@ -1164,10 +1182,17 @@ function McpServerListPage({ initialData }) {
1164
1182
  ] }),
1165
1183
  /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
1166
1184
  servers.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(AdminTableRow, { children: [
1167
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1168
- s.logo_url && /* @__PURE__ */ jsxRuntime.jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain" }),
1169
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: s.name })
1170
- ] }) }),
1185
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
1186
+ "button",
1187
+ {
1188
+ onClick: () => openEdit(s),
1189
+ className: "flex items-center gap-2 text-left hover:underline cursor-pointer",
1190
+ children: [
1191
+ s.logo_url && /* @__PURE__ */ jsxRuntime.jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain" }),
1192
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-primary", children: s.name })
1193
+ ]
1194
+ }
1195
+ ) }),
1171
1196
  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: s.slug }),
1172
1197
  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground truncate max-w-xs", title: s.base_url, children: s.base_url }),
1173
1198
  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: s.client_id ? "default" : "secondary", children: s.client_id ? "Registered" : "No DCR" }) }),
@@ -1185,9 +1210,55 @@ function McpServerListPage({ initialData }) {
1185
1210
  }
1186
1211
  ) })
1187
1212
  ] }, s.id)),
1188
- servers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyRow, { colSpan: 8, children: 'No custom connectors registered. Click "Register Connector" to add one.' })
1213
+ servers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyRow, { colSpan: 8, children: 'No custom connectors registered. Click "+ New Connector" to add one.' })
1189
1214
  ] })
1190
1215
  ] }),
1216
+ /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: showCreate, onOpenChange: setShowCreate, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-lg", children: [
1217
+ /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Register Connector" }) }),
1218
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogBody, { className: "space-y-3", children: [
1219
+ createError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: createError }),
1220
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: createForm.name, onChange: (e) => setCreateForm({ ...createForm, name: e.target.value }), placeholder: "My MCP Server" }) }),
1221
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Slug", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: createForm.slug, onChange: (e) => setCreateForm({ ...createForm, slug: e.target.value }), placeholder: "my-mcp-server" }) }),
1222
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: createForm.description, onChange: (e) => setCreateForm({ ...createForm, description: e.target.value }), placeholder: "What this connector does" }) }),
1223
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Base URL", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: createForm.base_url, onChange: (e) => setCreateForm({ ...createForm, base_url: e.target.value }), placeholder: "https://my-server.example.com" }) }),
1224
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "MCP Endpoint Path", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: createForm.mcp_endpoint_path, onChange: (e) => setCreateForm({ ...createForm, mcp_endpoint_path: e.target.value }), placeholder: "/mcp" }) })
1225
+ ] }),
1226
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
1227
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: () => setShowCreate(false), children: "Cancel" }),
1228
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleCreate, disabled: creating || !createForm.name || !createForm.base_url, children: creating ? "Creating..." : "Create" })
1229
+ ] })
1230
+ ] }) }),
1231
+ /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: !!editTarget, onOpenChange: (open) => {
1232
+ if (!open) setEditTarget(null);
1233
+ }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-lg", children: [
1234
+ /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Edit Connector" }) }),
1235
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogBody, { className: "space-y-3", children: [
1236
+ editError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: editError }),
1237
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: editForm.name, onChange: (e) => setEditForm({ ...editForm, name: e.target.value }) }) }),
1238
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { value: editForm.description, onChange: (e) => setEditForm({ ...editForm, description: e.target.value }) }) }),
1239
+ editTarget && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
1240
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1241
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Slug:" }),
1242
+ " ",
1243
+ editTarget.slug
1244
+ ] }),
1245
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1246
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Base URL:" }),
1247
+ " ",
1248
+ editTarget.base_url
1249
+ ] }),
1250
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1251
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Endpoint:" }),
1252
+ " ",
1253
+ editTarget.mcp_endpoint_path
1254
+ ] })
1255
+ ] })
1256
+ ] }),
1257
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
1258
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: () => setEditTarget(null), children: "Cancel" }),
1259
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleEdit, disabled: editing || !editForm.name, children: editing ? "Saving..." : "Save" })
1260
+ ] })
1261
+ ] }) }),
1191
1262
  /* @__PURE__ */ jsxRuntime.jsxs(
1192
1263
  ConfirmDialog,
1193
1264
  {
@@ -1198,14 +1269,14 @@ function McpServerListPage({ initialData }) {
1198
1269
  setDeleteError("");
1199
1270
  }
1200
1271
  },
1201
- title: "Delete Server",
1272
+ title: "Delete Connector",
1202
1273
  confirmLabel: "Delete",
1203
1274
  loadingLabel: "Deleting...",
1204
1275
  loading: deleting,
1205
1276
  error: deleteError,
1206
1277
  onConfirm: handleDelete,
1207
1278
  children: [
1208
- "Delete MCP server ",
1279
+ "Delete connector ",
1209
1280
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: deleteTarget?.name }),
1210
1281
  "? This cannot be undone."
1211
1282
  ]
@@ -1224,17 +1295,25 @@ function PluginMarketplaceListPage({ initialData }) {
1224
1295
  );
1225
1296
  const [showAdd, setShowAdd] = React3.useState(false);
1226
1297
  const [adding, setAdding] = React3.useState(false);
1298
+ const [addError, setAddError] = React3.useState("");
1227
1299
  const [newMarketplace, setNewMarketplace] = React3.useState({ name: "", github_repo: "" });
1228
1300
  const [deleteTarget, setDeleteTarget] = React3.useState(null);
1229
1301
  const [deleting, setDeleting] = React3.useState(false);
1230
1302
  const [deleteError, setDeleteError] = React3.useState("");
1303
+ function resetAddForm() {
1304
+ setNewMarketplace({ name: "", github_repo: "" });
1305
+ setAddError("");
1306
+ }
1231
1307
  async function handleAdd() {
1232
1308
  setAdding(true);
1309
+ setAddError("");
1233
1310
  try {
1234
1311
  await client.pluginMarketplaces.create(newMarketplace);
1235
1312
  setShowAdd(false);
1236
- setNewMarketplace({ name: "", github_repo: "" });
1313
+ resetAddForm();
1237
1314
  mutate("plugin-marketplaces");
1315
+ } catch (err) {
1316
+ setAddError(err?.message ?? "Failed to add marketplace");
1238
1317
  } finally {
1239
1318
  setAdding(false);
1240
1319
  }
@@ -1263,14 +1342,39 @@ function PluginMarketplaceListPage({ initialData }) {
1263
1342
  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-96 rounded-lg" });
1264
1343
  }
1265
1344
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
1266
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Add Marketplace" }) }),
1267
- showAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
1268
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
1269
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Name", value: newMarketplace.name, onChange: (e) => setNewMarketplace({ ...newMarketplace, name: e.target.value }) }),
1270
- /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "GitHub Repo (owner/repo)", value: newMarketplace.github_repo, onChange: (e) => setNewMarketplace({ ...newMarketplace, github_repo: e.target.value }) })
1345
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(true), children: "+ Add Marketplace" }) }),
1346
+ /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: showAdd, onOpenChange: (v) => {
1347
+ setShowAdd(v);
1348
+ if (!v) resetAddForm();
1349
+ }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-md", children: [
1350
+ /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add Marketplace" }) }),
1351
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogBody, { className: "space-y-3", children: [
1352
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsxRuntime.jsx(
1353
+ Input,
1354
+ {
1355
+ value: newMarketplace.name,
1356
+ onChange: (e) => setNewMarketplace({ ...newMarketplace, name: e.target.value }),
1357
+ placeholder: "My Marketplace"
1358
+ }
1359
+ ) }),
1360
+ /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "GitHub Repo", children: /* @__PURE__ */ jsxRuntime.jsx(
1361
+ Input,
1362
+ {
1363
+ value: newMarketplace.github_repo,
1364
+ onChange: (e) => setNewMarketplace({ ...newMarketplace, github_repo: e.target.value }),
1365
+ placeholder: "owner/repo"
1366
+ }
1367
+ ) }),
1368
+ /* @__PURE__ */ jsxRuntime.jsx(FormError, { error: addError })
1271
1369
  ] }),
1272
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newMarketplace.name || !newMarketplace.github_repo, children: adding ? "Adding..." : "Add Marketplace" })
1273
- ] }),
1370
+ /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
1371
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: () => {
1372
+ setShowAdd(false);
1373
+ resetAddForm();
1374
+ }, children: "Cancel" }),
1375
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newMarketplace.name || !newMarketplace.github_repo, children: adding ? "Adding..." : "Add Marketplace" })
1376
+ ] })
1377
+ ] }) }),
1274
1378
  /* @__PURE__ */ jsxRuntime.jsxs(AdminTable, { children: [
1275
1379
  /* @__PURE__ */ jsxRuntime.jsxs(AdminTableHead, { children: [
1276
1380
  /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Name" }),
package/dist/index.d.cts CHANGED
@@ -62,6 +62,9 @@ interface AgentPlaneClient {
62
62
  };
63
63
  customConnectors: {
64
64
  listServers(): Promise<unknown[]>;
65
+ createServer(params: Record<string, unknown>): Promise<unknown>;
66
+ updateServer(serverId: string, params: Record<string, unknown>): Promise<unknown>;
67
+ deleteServer(serverId: string): Promise<void>;
65
68
  list(agentId: string): Promise<unknown[]>;
66
69
  delete(agentId: string, serverId: string): Promise<void>;
67
70
  updateAllowedTools(agentId: string, serverId: string, allowedTools: string[]): Promise<void>;
@@ -69,8 +72,6 @@ interface AgentPlaneClient {
69
72
  initiateOauth(agentId: string, serverId: string): Promise<{
70
73
  redirectUrl: string;
71
74
  }>;
72
- createServer?(params: Record<string, unknown>): Promise<unknown>;
73
- deleteServer?(serverId: string): Promise<void>;
74
75
  };
75
76
  models: {
76
77
  list(): Promise<unknown[]>;
@@ -99,11 +100,11 @@ interface AgentPlaneClient {
99
100
  };
100
101
  pluginMarketplaces: {
101
102
  list(): Promise<unknown[]>;
102
- get?(marketplaceId: string): Promise<unknown>;
103
+ get(marketplaceId: string): Promise<unknown>;
103
104
  listPlugins(marketplaceId: string): Promise<unknown[]>;
104
- create?(params: Record<string, unknown>): Promise<unknown>;
105
- delete?(marketplaceId: string): Promise<void>;
106
- updateToken?(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;
105
+ create(params: Record<string, unknown>): Promise<unknown>;
106
+ delete(marketplaceId: string): Promise<void>;
107
+ updateToken(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;
107
108
  };
108
109
  }
109
110
  interface LinkComponentProps {
package/dist/index.d.ts CHANGED
@@ -62,6 +62,9 @@ interface AgentPlaneClient {
62
62
  };
63
63
  customConnectors: {
64
64
  listServers(): Promise<unknown[]>;
65
+ createServer(params: Record<string, unknown>): Promise<unknown>;
66
+ updateServer(serverId: string, params: Record<string, unknown>): Promise<unknown>;
67
+ deleteServer(serverId: string): Promise<void>;
65
68
  list(agentId: string): Promise<unknown[]>;
66
69
  delete(agentId: string, serverId: string): Promise<void>;
67
70
  updateAllowedTools(agentId: string, serverId: string, allowedTools: string[]): Promise<void>;
@@ -69,8 +72,6 @@ interface AgentPlaneClient {
69
72
  initiateOauth(agentId: string, serverId: string): Promise<{
70
73
  redirectUrl: string;
71
74
  }>;
72
- createServer?(params: Record<string, unknown>): Promise<unknown>;
73
- deleteServer?(serverId: string): Promise<void>;
74
75
  };
75
76
  models: {
76
77
  list(): Promise<unknown[]>;
@@ -99,11 +100,11 @@ interface AgentPlaneClient {
99
100
  };
100
101
  pluginMarketplaces: {
101
102
  list(): Promise<unknown[]>;
102
- get?(marketplaceId: string): Promise<unknown>;
103
+ get(marketplaceId: string): Promise<unknown>;
103
104
  listPlugins(marketplaceId: string): Promise<unknown[]>;
104
- create?(params: Record<string, unknown>): Promise<unknown>;
105
- delete?(marketplaceId: string): Promise<void>;
106
- updateToken?(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;
105
+ create(params: Record<string, unknown>): Promise<unknown>;
106
+ delete(marketplaceId: string): Promise<void>;
107
+ updateToken(marketplaceId: string, params: Record<string, unknown>): Promise<unknown>;
107
108
  };
108
109
  }
109
110
  interface LinkComponentProps {
package/dist/index.js CHANGED
@@ -1065,6 +1065,7 @@ function CancelRunButton({ runId, onCancelled }) {
1065
1065
  ] }) })
1066
1066
  ] });
1067
1067
  }
1068
+ var emptyForm = { name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" };
1068
1069
  function McpServerListPage({ initialData }) {
1069
1070
  const { mutate } = useSWRConfig();
1070
1071
  const client = useAgentPlaneClient();
@@ -1073,21 +1074,48 @@ function McpServerListPage({ initialData }) {
1073
1074
  (c) => c.customConnectors.listServers(),
1074
1075
  initialData ? { fallbackData: initialData } : void 0
1075
1076
  );
1076
- const [showAdd, setShowAdd] = useState(false);
1077
- const [adding, setAdding] = useState(false);
1078
- const [newServer, setNewServer] = useState({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
1077
+ const [showCreate, setShowCreate] = useState(false);
1078
+ const [creating, setCreating] = useState(false);
1079
+ const [createForm, setCreateForm] = useState(emptyForm);
1080
+ const [createError, setCreateError] = useState("");
1081
+ const [editTarget, setEditTarget] = useState(null);
1082
+ const [editing, setEditing] = useState(false);
1083
+ const [editForm, setEditForm] = useState({ name: "", description: "" });
1084
+ const [editError, setEditError] = useState("");
1079
1085
  const [deleteTarget, setDeleteTarget] = useState(null);
1080
1086
  const [deleting, setDeleting] = useState(false);
1081
1087
  const [deleteError, setDeleteError] = useState("");
1082
- async function handleAdd() {
1083
- setAdding(true);
1088
+ async function handleCreate() {
1089
+ setCreating(true);
1090
+ setCreateError("");
1084
1091
  try {
1085
- await client.customConnectors.createServer(newServer);
1086
- setShowAdd(false);
1087
- setNewServer({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
1092
+ await client.customConnectors.createServer(createForm);
1093
+ setShowCreate(false);
1094
+ setCreateForm(emptyForm);
1088
1095
  mutate("mcp-servers");
1096
+ } catch (err) {
1097
+ setCreateError(err instanceof Error ? err.message : "Failed to create");
1089
1098
  } finally {
1090
- setAdding(false);
1099
+ setCreating(false);
1100
+ }
1101
+ }
1102
+ function openEdit(server) {
1103
+ setEditTarget(server);
1104
+ setEditForm({ name: server.name, description: server.description });
1105
+ setEditError("");
1106
+ }
1107
+ async function handleEdit() {
1108
+ if (!editTarget) return;
1109
+ setEditing(true);
1110
+ setEditError("");
1111
+ try {
1112
+ await client.customConnectors.updateServer(editTarget.id, editForm);
1113
+ setEditTarget(null);
1114
+ mutate("mcp-servers");
1115
+ } catch (err) {
1116
+ setEditError(err instanceof Error ? err.message : "Failed to update");
1117
+ } finally {
1118
+ setEditing(false);
1091
1119
  }
1092
1120
  }
1093
1121
  async function handleDelete() {
@@ -1106,7 +1134,7 @@ function McpServerListPage({ initialData }) {
1106
1134
  }
1107
1135
  if (error) {
1108
1136
  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
1109
- "Failed to load MCP servers: ",
1137
+ "Failed to load connectors: ",
1110
1138
  error.message
1111
1139
  ] }) });
1112
1140
  }
@@ -1114,17 +1142,7 @@ function McpServerListPage({ initialData }) {
1114
1142
  return /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" });
1115
1143
  }
1116
1144
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
1117
- /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Register Connector" }) }),
1118
- showAdd && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
1119
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
1120
- /* @__PURE__ */ jsx(Input, { placeholder: "Name", value: newServer.name, onChange: (e) => setNewServer({ ...newServer, name: e.target.value }) }),
1121
- /* @__PURE__ */ jsx(Input, { placeholder: "Slug", value: newServer.slug, onChange: (e) => setNewServer({ ...newServer, slug: e.target.value }) }),
1122
- /* @__PURE__ */ jsx(Input, { placeholder: "Description", value: newServer.description, onChange: (e) => setNewServer({ ...newServer, description: e.target.value }) }),
1123
- /* @__PURE__ */ jsx(Input, { placeholder: "Base URL", value: newServer.base_url, onChange: (e) => setNewServer({ ...newServer, base_url: e.target.value }) }),
1124
- /* @__PURE__ */ jsx(Input, { placeholder: "MCP Endpoint Path", value: newServer.mcp_endpoint_path, onChange: (e) => setNewServer({ ...newServer, mcp_endpoint_path: e.target.value }) })
1125
- ] }),
1126
- /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newServer.name || !newServer.base_url, children: adding ? "Adding..." : "Add Server" })
1127
- ] }),
1145
+ /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(true), children: "+ New Connector" }) }),
1128
1146
  /* @__PURE__ */ jsxs(AdminTable, { children: [
1129
1147
  /* @__PURE__ */ jsxs(AdminTableHead, { children: [
1130
1148
  /* @__PURE__ */ jsx(Th, { children: "Name" }),
@@ -1138,10 +1156,17 @@ function McpServerListPage({ initialData }) {
1138
1156
  ] }),
1139
1157
  /* @__PURE__ */ jsxs("tbody", { children: [
1140
1158
  servers.map((s) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
1141
- /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1142
- s.logo_url && /* @__PURE__ */ jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain" }),
1143
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: s.name })
1144
- ] }) }),
1159
+ /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxs(
1160
+ "button",
1161
+ {
1162
+ onClick: () => openEdit(s),
1163
+ className: "flex items-center gap-2 text-left hover:underline cursor-pointer",
1164
+ children: [
1165
+ s.logo_url && /* @__PURE__ */ jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain" }),
1166
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-primary", children: s.name })
1167
+ ]
1168
+ }
1169
+ ) }),
1145
1170
  /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: s.slug }),
1146
1171
  /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground truncate max-w-xs", title: s.base_url, children: s.base_url }),
1147
1172
  /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(Badge, { variant: s.client_id ? "default" : "secondary", children: s.client_id ? "Registered" : "No DCR" }) }),
@@ -1159,9 +1184,55 @@ function McpServerListPage({ initialData }) {
1159
1184
  }
1160
1185
  ) })
1161
1186
  ] }, s.id)),
1162
- servers.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 8, children: 'No custom connectors registered. Click "Register Connector" to add one.' })
1187
+ servers.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 8, children: 'No custom connectors registered. Click "+ New Connector" to add one.' })
1163
1188
  ] })
1164
1189
  ] }),
1190
+ /* @__PURE__ */ jsx(Dialog, { open: showCreate, onOpenChange: setShowCreate, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
1191
+ /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Register Connector" }) }),
1192
+ /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
1193
+ createError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: createError }),
1194
+ /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(Input, { value: createForm.name, onChange: (e) => setCreateForm({ ...createForm, name: e.target.value }), placeholder: "My MCP Server" }) }),
1195
+ /* @__PURE__ */ jsx(FormField, { label: "Slug", children: /* @__PURE__ */ jsx(Input, { value: createForm.slug, onChange: (e) => setCreateForm({ ...createForm, slug: e.target.value }), placeholder: "my-mcp-server" }) }),
1196
+ /* @__PURE__ */ jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsx(Input, { value: createForm.description, onChange: (e) => setCreateForm({ ...createForm, description: e.target.value }), placeholder: "What this connector does" }) }),
1197
+ /* @__PURE__ */ jsx(FormField, { label: "Base URL", children: /* @__PURE__ */ jsx(Input, { value: createForm.base_url, onChange: (e) => setCreateForm({ ...createForm, base_url: e.target.value }), placeholder: "https://my-server.example.com" }) }),
1198
+ /* @__PURE__ */ jsx(FormField, { label: "MCP Endpoint Path", children: /* @__PURE__ */ jsx(Input, { value: createForm.mcp_endpoint_path, onChange: (e) => setCreateForm({ ...createForm, mcp_endpoint_path: e.target.value }), placeholder: "/mcp" }) })
1199
+ ] }),
1200
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
1201
+ /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setShowCreate(false), children: "Cancel" }),
1202
+ /* @__PURE__ */ jsx(Button, { onClick: handleCreate, disabled: creating || !createForm.name || !createForm.base_url, children: creating ? "Creating..." : "Create" })
1203
+ ] })
1204
+ ] }) }),
1205
+ /* @__PURE__ */ jsx(Dialog, { open: !!editTarget, onOpenChange: (open) => {
1206
+ if (!open) setEditTarget(null);
1207
+ }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
1208
+ /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Edit Connector" }) }),
1209
+ /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
1210
+ editError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: editError }),
1211
+ /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(Input, { value: editForm.name, onChange: (e) => setEditForm({ ...editForm, name: e.target.value }) }) }),
1212
+ /* @__PURE__ */ jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsx(Input, { value: editForm.description, onChange: (e) => setEditForm({ ...editForm, description: e.target.value }) }) }),
1213
+ editTarget && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
1214
+ /* @__PURE__ */ jsxs("div", { children: [
1215
+ /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Slug:" }),
1216
+ " ",
1217
+ editTarget.slug
1218
+ ] }),
1219
+ /* @__PURE__ */ jsxs("div", { children: [
1220
+ /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Base URL:" }),
1221
+ " ",
1222
+ editTarget.base_url
1223
+ ] }),
1224
+ /* @__PURE__ */ jsxs("div", { children: [
1225
+ /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Endpoint:" }),
1226
+ " ",
1227
+ editTarget.mcp_endpoint_path
1228
+ ] })
1229
+ ] })
1230
+ ] }),
1231
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
1232
+ /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setEditTarget(null), children: "Cancel" }),
1233
+ /* @__PURE__ */ jsx(Button, { onClick: handleEdit, disabled: editing || !editForm.name, children: editing ? "Saving..." : "Save" })
1234
+ ] })
1235
+ ] }) }),
1165
1236
  /* @__PURE__ */ jsxs(
1166
1237
  ConfirmDialog,
1167
1238
  {
@@ -1172,14 +1243,14 @@ function McpServerListPage({ initialData }) {
1172
1243
  setDeleteError("");
1173
1244
  }
1174
1245
  },
1175
- title: "Delete Server",
1246
+ title: "Delete Connector",
1176
1247
  confirmLabel: "Delete",
1177
1248
  loadingLabel: "Deleting...",
1178
1249
  loading: deleting,
1179
1250
  error: deleteError,
1180
1251
  onConfirm: handleDelete,
1181
1252
  children: [
1182
- "Delete MCP server ",
1253
+ "Delete connector ",
1183
1254
  /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: deleteTarget?.name }),
1184
1255
  "? This cannot be undone."
1185
1256
  ]
@@ -1198,17 +1269,25 @@ function PluginMarketplaceListPage({ initialData }) {
1198
1269
  );
1199
1270
  const [showAdd, setShowAdd] = useState(false);
1200
1271
  const [adding, setAdding] = useState(false);
1272
+ const [addError, setAddError] = useState("");
1201
1273
  const [newMarketplace, setNewMarketplace] = useState({ name: "", github_repo: "" });
1202
1274
  const [deleteTarget, setDeleteTarget] = useState(null);
1203
1275
  const [deleting, setDeleting] = useState(false);
1204
1276
  const [deleteError, setDeleteError] = useState("");
1277
+ function resetAddForm() {
1278
+ setNewMarketplace({ name: "", github_repo: "" });
1279
+ setAddError("");
1280
+ }
1205
1281
  async function handleAdd() {
1206
1282
  setAdding(true);
1283
+ setAddError("");
1207
1284
  try {
1208
1285
  await client.pluginMarketplaces.create(newMarketplace);
1209
1286
  setShowAdd(false);
1210
- setNewMarketplace({ name: "", github_repo: "" });
1287
+ resetAddForm();
1211
1288
  mutate("plugin-marketplaces");
1289
+ } catch (err) {
1290
+ setAddError(err?.message ?? "Failed to add marketplace");
1212
1291
  } finally {
1213
1292
  setAdding(false);
1214
1293
  }
@@ -1237,14 +1316,39 @@ function PluginMarketplaceListPage({ initialData }) {
1237
1316
  return /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" });
1238
1317
  }
1239
1318
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
1240
- /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Add Marketplace" }) }),
1241
- showAdd && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
1242
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
1243
- /* @__PURE__ */ jsx(Input, { placeholder: "Name", value: newMarketplace.name, onChange: (e) => setNewMarketplace({ ...newMarketplace, name: e.target.value }) }),
1244
- /* @__PURE__ */ jsx(Input, { placeholder: "GitHub Repo (owner/repo)", value: newMarketplace.github_repo, onChange: (e) => setNewMarketplace({ ...newMarketplace, github_repo: e.target.value }) })
1319
+ /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(true), children: "+ Add Marketplace" }) }),
1320
+ /* @__PURE__ */ jsx(Dialog, { open: showAdd, onOpenChange: (v) => {
1321
+ setShowAdd(v);
1322
+ if (!v) resetAddForm();
1323
+ }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
1324
+ /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Add Marketplace" }) }),
1325
+ /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
1326
+ /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(
1327
+ Input,
1328
+ {
1329
+ value: newMarketplace.name,
1330
+ onChange: (e) => setNewMarketplace({ ...newMarketplace, name: e.target.value }),
1331
+ placeholder: "My Marketplace"
1332
+ }
1333
+ ) }),
1334
+ /* @__PURE__ */ jsx(FormField, { label: "GitHub Repo", children: /* @__PURE__ */ jsx(
1335
+ Input,
1336
+ {
1337
+ value: newMarketplace.github_repo,
1338
+ onChange: (e) => setNewMarketplace({ ...newMarketplace, github_repo: e.target.value }),
1339
+ placeholder: "owner/repo"
1340
+ }
1341
+ ) }),
1342
+ /* @__PURE__ */ jsx(FormError, { error: addError })
1245
1343
  ] }),
1246
- /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newMarketplace.name || !newMarketplace.github_repo, children: adding ? "Adding..." : "Add Marketplace" })
1247
- ] }),
1344
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
1345
+ /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => {
1346
+ setShowAdd(false);
1347
+ resetAddForm();
1348
+ }, children: "Cancel" }),
1349
+ /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newMarketplace.name || !newMarketplace.github_repo, children: adding ? "Adding..." : "Add Marketplace" })
1350
+ ] })
1351
+ ] }) }),
1248
1352
  /* @__PURE__ */ jsxs(AdminTable, { children: [
1249
1353
  /* @__PURE__ */ jsxs(AdminTableHead, { children: [
1250
1354
  /* @__PURE__ */ jsx(Th, { children: "Name" }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@getcatalystiq/agent-plane-ui",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Embeddable React component library for AgentPlane",
5
5
  "type": "module",
6
6
  "exports": {