loopable-cli 0.2.1 → 0.3.0

package/.output/server/{_connectorId-C9yydJrC.mjs → _connectorId-COuQN02a.mjs}

@@ -1,16 +1,19 @@
 import { i as __toESM } from "./_runtime.mjs";
-import { U as require_jsx_runtime, W as require_react, a as AvatarFallback$1, o as AvatarImage$1, s as AvatarRoot } from "./_libs/@base-ui/react+[...].mjs";
+import { K as require_jsx_runtime, c as AvatarFallback$1, l as AvatarImage$1, q as require_react, u as AvatarRoot } from "./_libs/@base-ui/react+[...].mjs";
 import { f as Link, m as useRouter } from "./_libs/@tanstack/react-router+[...].mjs";
-import { i as connectionNoun, o as connectorManifest } from "./_ssr/connections-Df-aDpfJ.mjs";
+import { a as connectionNoun, d as destinationLabel, s as connectorManifest } from "./_ssr/connections-Cqvb6Gw2.mjs";
 import { l as registrableCallbackUrl } from "./_ssr/access-DTttr563.mjs";
-import { B as ArrowLeft, C as ExternalLink, M as CircleAlert, c as RotateCcw, g as Loader, i as Trash2, l as RefreshCw } from "./_libs/lucide-react.mjs";
+import { F as ChevronRight, N as CircleAlert, c as RefreshCw, g as Loader, l as Plus, s as RotateCcw } from "./_libs/lucide-react.mjs";
 import { n as toast } from "./_libs/sonner.mjs";
-import { B as Card, F as disconnectConnection, H as CardHeader, I as saveConnectionSettings, L as verifyConnection, M as beginQrLogin, N as connectWithToken, P as continueQrLogin, R as Badge, S as Input$1, U as CardTitle, V as CardContent, W as cn, b as Label, u as Route$14, x as Separator$1, z as Button$1 } from "./_ssr/router-54IDWTVz.mjs";
-import { n as initialFieldValues, t as SettingFieldInputs } from "./_ssr/setting-fields-DzBlslan.mjs";
-import { t as ConnectionStatusBadge } from "./_ssr/connection-status-BZr3Y-IC.mjs";
-import { t as ConnectorIcon } from "./_ssr/connector-icon-WvxwZ5TF.mjs";
-import { n as AlertDescription, r as AlertTitle, t as Alert } from "./_ssr/alert-DQvzE7bu.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/_connectorId-C9yydJrC.js
+import { A as continueQrLogin, M as saveConnectionSettings, N as verifyConnection, O as beginQrLogin, P as cn, _ as Badge, g as Input$1, j as disconnectConnection, k as connectWithToken, u as Route$14, v as Button$1 } from "./_ssr/router-DdwREiOf.mjs";
+import { t as ConnectorIcon } from "./_ssr/connector-icon-DrhVbhs6.mjs";
+import { a as List, o as PageHeader, r as Label, t as Empty } from "./_ssr/page-DZVxKvdn.mjs";
+import { n as initialFieldValues, t as SettingFieldInputs } from "./_ssr/setting-fields-LNgywAW7.mjs";
+import { t as ConnectionStatusBadge } from "./_ssr/connection-status-BogAL-Fj.mjs";
+import { n as AlertDescription, r as AlertTitle, t as Alert } from "./_ssr/alert-C2WBWfzo.mjs";
+import { n as CardContent, t as Card } from "./_ssr/card-r1cV-PCN.mjs";
+import { t as ago } from "./_ssr/time-Cy8TZP0Z.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/_connectorId-COuQN02a.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
 /** Renders a connector's settings from its manifest, so no page knows the fields. */
@@ -130,7 +133,7 @@ function QrConnect({ connectorId, note, onDone }) {
 		onDone
 	]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-		className: "flex flex-col items-center gap-4 py-8",
+		className: "flex flex-col items-center gap-4 py-4",
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 				className: "max-w-md text-center text-sm text-muted-foreground",
@@ -189,18 +192,17 @@ function TokenConnect({ connectorId, fields, note, helpUrl, onDone }) {
 		}
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-		className: "flex flex-col gap-4 py-6",
+		className: "flex flex-col gap-4 py-2",
 		children: [
-			note ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-				className: "text-sm text-muted-foreground",
-				children: note
-			}) : null,
-			helpUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-				href: helpUrl,
-				target: "_blank",
-				rel: "noreferrer",
-				className: "text-sm text-muted-foreground hover:text-foreground",
-				children: "Open the app dashboard"
+			note ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-xs text-muted-foreground",
+				children: [note, helpUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+					href: helpUrl,
+					target: "_blank",
+					rel: "noreferrer",
+					className: "underline hover:text-foreground",
+					children: "Open the app dashboard"
+				})] }) : null]
 			}) : null,
 			fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-1.5",
@@ -259,44 +261,47 @@ function ConnectorDetailPage() {
 	const tokens = manifest.auth.kind === "token";
 	const [scanning, setScanning] = (0, import_react.useState)(false);
 	const [pasting, setPasting] = (0, import_react.useState)(false);
+	const connectButton = state.readiness.ready && canAddAccount ? scans ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+		onClick: () => setScanning((open) => !open),
+		children: scanning ? "Cancel" : "Connect"
+	}) : tokens ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+		onClick: () => setPasting((open) => !open),
+		children: pasting ? "Cancel" : "Add bot"
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+		nativeButton: false,
+		render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/api/connectors/${connectorId}/authorize` }),
+		children: state.connections.length > 0 ? "Add account" : "Connect"
+	}) : null;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col gap-6",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
-				to: "/connectors",
-				className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "size-4" }), "Connectors"]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
-				className: "flex items-start gap-4",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
-						icon: manifest.icon,
-						accent: manifest.accent,
-						className: "size-11"
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "flex-1",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
-							className: "text-2xl font-semibold tracking-tight",
-							children: manifest.name
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-							className: "mt-1 text-sm text-muted-foreground",
-							children: manifest.tagline
-						})]
-					}),
-					state.readiness.ready && canAddAccount ? scans ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
-						onClick: () => setScanning((open) => !open),
-						children: scanning ? "Cancel" : "Connect"
-					}) : tokens ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
-						onClick: () => setPasting((open) => !open),
-						children: pasting ? "Cancel" : "Add bot"
-					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
-						render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/api/connectors/${connectorId}/authorize` }),
-						children: state.connections.length > 0 ? "Add another account" : "Connect"
-					}) : null
-				]
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+				back: {
+					to: "/connectors",
+					label: "Connectors"
+				},
+				icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+					icon: manifest.icon,
+					accent: manifest.accent
+				}),
+				title: manifest.name,
+				description: manifest.tagline,
+				actions: connectButton
 			}),
+			!state.readiness.ready ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Not available in this build" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, {
+					className: "flex flex-col gap-1",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: state.readiness.reason }),
+						state.readiness.fixHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: state.readiness.fixHint }) : null,
+						manifest.auth.kind === "oauth_redirect" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "text-xs",
+							children: ["Callback URL: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: registrableCallbackUrl(connectorId) })]
+						}) : null
+					]
+				})]
+			}) : null,
 			scanning && manifest.auth.kind === "qr_scan" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QrConnect, {
 				connectorId,
 				note: manifest.auth.note,
@@ -309,111 +314,118 @@ function ConnectorDetailPage() {
 				helpUrl: manifest.auth.helpUrl,
 				onDone: () => setPasting(false)
 			}) : null,
-			!state.readiness.ready ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
-				variant: "destructive",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertTitle, { children: [manifest.name, " is not available in this build"] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, {
-					className: "flex flex-col gap-2",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: state.readiness.reason }),
-						state.readiness.fixHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: state.readiness.fixHint }) : null,
-						manifest.auth.kind === "oauth_redirect" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-							className: "text-xs",
-							children: ["Callback URL to register: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: registrableCallbackUrl(connectorId) })]
-						}) : null
-					]
-				})]
-			}) : null,
-			state.connections.length === 0 && state.readiness.ready && !scanning && !pasting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-				className: "py-8 text-center text-sm text-muted-foreground",
-				children: [
-					"No ",
-					connectionNoun(connectorId),
-					" connected yet.",
-					manifest.auth.kind === "oauth_redirect" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-						" ",
-						"Connecting opens ",
-						manifest.name,
-						" and asks for",
-						" ",
-						manifest.auth.scopes.join(", "),
-						"."
-					] }) : null,
-					manifest.auth.kind === "qr_scan" ? " Connecting shows a code to scan." : null,
-					manifest.auth.kind === "token" ? " Connecting asks for app credentials, not a personal login." : null
-				]
-			}) }) : null,
-			state.connections.map((connection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionCard, {
+			state.connections.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { children: state.connections.map((connection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionRow, {
 				connection,
 				manifest
-			}, connection.id)),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-				className: "text-base",
-				children: "What this connector can do"
-			}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-				className: "flex flex-col gap-4",
+			}, connection.id)) }) : state.readiness.ready && !scanning && !pasting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+				"No ",
+				connectionNoun(connectorId),
+				" connected yet."
+			] }), manifest.auth.kind === "oauth_redirect" && manifest.auth.note ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "max-w-md text-xs",
+				children: manifest.auth.note
+			}) : null] }) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+						className: "text-sm font-medium",
+						children: "Loops"
+					}), manifest.triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						variant: "ghost",
+						size: "sm",
+						nativeButton: false,
+						render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { to: "/loops/new" }),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {}), "New loop"]
+					}) : null]
+				}), state.loops.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"No loop uses ",
+						manifest.name,
+						" yet."
+					]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { children: state.loops.map((loop) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+					to: "/loops/$loopId",
+					params: { loopId: loop.id },
+					className: "flex items-center gap-3 px-4 py-2.5 transition-colors hover:bg-muted/50",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "truncate text-sm font-medium",
+								children: loop.name
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "truncate text-xs text-muted-foreground",
+								children: loop.connectorId === connectorId ? destinationLabel(loop.actionConnectorId, loop.actionId) : `Answers here, from ${connectorManifest(loop.connectorId)?.name ?? loop.connectorId}`
+							})]
+						}),
+						loop.enabled ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+							variant: "secondary",
+							children: "Off"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "size-4 text-muted-foreground" })
+					]
+				}, loop.id)) })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid gap-6 sm:grid-cols-3",
 				children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CapabilityList, {
-						title: "Workflows it offers",
-						note: "Turn one on from the loops page.",
-						empty: "None yet. An account can be connected, but no loop can be built on it.",
+						title: "Starts when",
+						empty: "Nothing. This connector cannot start a loop.",
+						items: manifest.triggers.map((trigger) => ({
+							id: trigger.id,
+							name: trigger.when,
+							summary: `When ${trigger.trigger}.`
+						}))
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CapabilityList, {
+						title: "Workflows",
+						empty: "None. Use a custom loop.",
 						items: manifest.workflows.map((workflow) => ({
 							id: workflow.id,
 							name: workflow.name,
 							summary: workflow.summary
 						}))
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator$1, {}),
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CapabilityList, {
-						title: "What it writes",
-						note: "A loop writes these back on its own.",
-						empty: "Nothing. Loopable can read this account but cannot write to it.",
+						title: "Send to",
+						empty: "Nothing. This connector only reads.",
 						items: manifest.actions.map((action) => ({
 							id: action.id,
 							name: action.name,
 							summary: action.summary
 						}))
-					}),
-					manifest.docsUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
-						href: manifest.docsUrl,
-						target: "_blank",
-						rel: "noreferrer",
-						className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
-						children: ["API documentation", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExternalLink, { className: "size-3.5" })]
-					}) : null
+					})
 				]
-			})] })
+			})
 		]
 	});
 }
-function CapabilityList({ title, note, empty, items }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+function CapabilityList({ title, empty, items }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
 			className: "text-sm font-medium",
 			children: title
-		}),
-		note && items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "mt-0.5 text-xs text-muted-foreground",
-			children: note
-		}) : null,
-		items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "mt-2 text-sm text-muted-foreground",
+		}), items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-sm text-muted-foreground",
 			children: empty
 		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
-			className: "mt-3 flex flex-col gap-2",
-			children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+			className: "flex flex-col gap-2",
+			children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 				className: "text-sm",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "font-medium",
-					children: item.name
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-					className: "text-muted-foreground",
-					children: [" — ", item.summary]
-				})]
-			}, item.id))
-		})
-	] });
+				children: item.name
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-xs text-muted-foreground",
+				children: item.summary
+			})] }, item.id))
+		})]
+	});
 }
-function ConnectionCard({ connection, manifest }) {
+function ConnectionRow({ connection, manifest }) {
 	const router = useRouter();
 	const [busy, setBusy] = (0, import_react.useState)(null);
 	const broken = connection.status === "needs_reauth" || connection.status === "error";
@@ -434,69 +446,67 @@ function ConnectionCard({ connection, manifest }) {
 			setBusy(null);
 		}
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-		className: "flex flex-row items-center gap-3",
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-4 px-4 py-3",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Avatar$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, {
-				src: connection.avatarUrl ?? void 0,
-				alt: connection.accountLabel
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { children: connection.accountLabel.slice(0, 2).toUpperCase() })] }),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex-1",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: "font-medium",
-						children: connection.accountLabel
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionStatusBadge, { status: connection.status })]
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-					className: "mt-0.5 text-xs text-muted-foreground",
-					children: connection.lastSyncedAt ? `Last checked ${new Date(connection.lastSyncedAt).toLocaleString()}` : "Not checked yet"
-				})]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
-				variant: "outline",
-				size: "sm",
-				onClick: () => run("verify"),
-				disabled: busy !== null,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: busy === "verify" ? "animate-spin" : void 0 }), "Verify"]
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Avatar$1, {
+						className: "size-8",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, {
+							src: connection.avatarUrl ?? void 0,
+							alt: connection.accountLabel
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { children: connection.accountLabel.slice(0, 2).toUpperCase() })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "truncate text-sm font-medium",
+								children: connection.accountLabel
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionStatusBadge, { status: connection.status })]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							suppressHydrationWarning: true,
+							className: "mt-0.5 truncate text-xs text-muted-foreground",
+							children: [connection.lastSyncedAt ? `Checked ${ago(connection.lastSyncedAt)}` : "Not checked yet", connection.scopes.length > 0 ? connection.scopes.join(", ") : null].filter(Boolean).join(" · ")
+						})]
+					}),
+					broken ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						size: "sm",
+						nativeButton: false,
+						render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/api/connectors/${connection.connectorId}/authorize` }),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, {}), "Reconnect"]
+					}) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => run("verify"),
+						disabled: busy !== null,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: busy === "verify" ? "animate-spin" : void 0 }), "Verify"]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => {
+							if (window.confirm(`Disconnect ${connection.accountLabel}?`)) run("disconnect");
+						},
+						disabled: busy !== null,
+						children: "Disconnect"
+					})
+				]
 			}),
-			broken ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
-				size: "sm",
-				render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `/api/connectors/${connection.connectorId}/authorize` }),
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, {}), "Reconnect"]
+			connection.lastError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-xs text-destructive",
+				children: connection.lastError
 			}) : null,
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
-				variant: "outline",
-				size: "sm",
-				onClick: () => run("disconnect"),
-				disabled: busy !== null,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {}), "Disconnect"]
-			})
-		]
-	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-		className: "flex flex-col gap-5 border-t pt-5",
-		children: [
-			connection.lastError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Alert, {
-				variant: "destructive",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: connection.lastError })
-			}) : null,
-			connection.scopes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
-				className: "text-sm font-medium",
-				children: "Granted access"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "mt-2 flex flex-wrap gap-1.5",
-				children: connection.scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
-					variant: "outline",
-					children: scope
-				}, scope))
-			})] }) : null,
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionSettingsForm, {
 				fields: manifest.settings,
 				connection
 			})
 		]
-	})] });
+	});
 }
 //#endregion
 export { ConnectorDetailPage as component };