loopable-cli 0.1.0

package/.output/server/_connectorId-8nb5yOzG.mjs

@@ -0,0 +1,421 @@
+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 { f as Link, m as useRouter } from "./_libs/@tanstack/react-router+[...].mjs";
+import { a as connectorManifest } from "./_ssr/connections-qnw2GVlP.mjs";
+import { a as registrableCallbackUrl } from "./_ssr/callback-CUINvl7M.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 { n as toast } from "./_libs/sonner.mjs";
+import { B as CardTitle, C as Button$1, F as verifyConnection, I as Badge, L as Card, M as continueQrLogin, N as disconnectConnection, P as saveConnectionSettings, R as CardContent, V as cn, j as beginQrLogin, u as Route$14, x as Separator$1, z as CardHeader } from "./_ssr/router-3WmpE5b_.mjs";
+import { r as initialFieldValues, t as SettingFieldInputs } from "./_ssr/setting-fields-8vKFj4df.mjs";
+import { t as ConnectionStatusBadge } from "./_ssr/connection-status-Bi5peUAk.mjs";
+import { t as ConnectorIcon } from "./_ssr/connector-icon-DZXQLLFo.mjs";
+import { n as AlertDescription, r as AlertTitle, t as Alert } from "./_ssr/alert-NEiOCTOl.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/_connectorId-8nb5yOzG.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. */
+function ConnectionSettingsForm({ fields, connection }) {
+	const router = useRouter();
+	const [values, setValues] = (0, import_react.useState)(() => initialFieldValues(fields, connection.settings));
+	const [saving, setSaving] = (0, import_react.useState)(false);
+	if (fields.length === 0) return null;
+	const save = async () => {
+		setSaving(true);
+		try {
+			await saveConnectionSettings({ data: {
+				id: connection.id,
+				settings: values
+			} });
+			await router.invalidate();
+			toast.success("Settings saved");
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : String(error));
+		} finally {
+			setSaving(false);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-5",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingFieldInputs, {
+			fields,
+			values,
+			onChange: (key, value) => setValues((prev) => ({
+				...prev,
+				[key]: value
+			}))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+			onClick: save,
+			disabled: saving,
+			children: saving ? "Saving..." : "Save settings"
+		}) })]
+	});
+}
+var LOOK_EVERY_MS = 2e3;
+/**
+* A login that finishes on a phone.
+*
+* The waiting is the whole component: a code lasts about two minutes, so it
+* has to say plainly whether it is still good, and offer another the moment it
+* is not. A dead square with no explanation is the failure to avoid.
+*/
+function QrConnect({ connectorId, note, onDone }) {
+	const router = useRouter();
+	const [code, setCode] = (0, import_react.useState)(null);
+	const [hint, setHint] = (0, import_react.useState)(null);
+	const [expired, setExpired] = (0, import_react.useState)(null);
+	const [loading, setLoading] = (0, import_react.useState)(true);
+	/** Polling reads this, so a code replaced mid-flight is not polled again. */
+	const current = (0, import_react.useRef)(null);
+	const fetchCode = async () => {
+		setLoading(true);
+		setExpired(null);
+		setHint(null);
+		try {
+			const started = await beginQrLogin({ data: { connectorId } });
+			current.current = started.attempt;
+			setCode({
+				image: started.image,
+				attempt: started.attempt
+			});
+		} catch (error) {
+			setExpired(error instanceof Error ? error.message : String(error));
+			setCode(null);
+		} finally {
+			setLoading(false);
+		}
+	};
+	(0, import_react.useEffect)(() => {
+		fetchCode();
+	}, [connectorId]);
+	(0, import_react.useEffect)(() => {
+		if (!code || expired) return;
+		let stop = false;
+		const look = async () => {
+			while (!stop) {
+				await new Promise((resolve) => setTimeout(resolve, LOOK_EVERY_MS));
+				if (stop || current.current === null) return;
+				try {
+					const outcome = await continueQrLogin({ data: {
+						connectorId,
+						attempt: current.current
+					} });
+					if (stop) return;
+					if (outcome.state === "connected") {
+						toast.success(`Connected ${outcome.accountLabel ?? connectorId}`);
+						await router.invalidate();
+						onDone?.();
+						return;
+					}
+					if (outcome.state === "expired") {
+						setExpired(outcome.reason ?? "The code expired before it was scanned.");
+						return;
+					}
+					current.current = outcome.attempt;
+					setHint(outcome.hint ?? null);
+				} catch (error) {
+					if (stop) return;
+					setHint(error instanceof Error ? error.message : String(error));
+				}
+			}
+		};
+		look();
+		return () => {
+			stop = true;
+		};
+	}, [
+		code,
+		expired,
+		connectorId,
+		router,
+		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",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "max-w-md text-center text-sm text-muted-foreground",
+				children: note
+			}),
+			expired ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				className: "max-w-md",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: expired })]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex size-[240px] items-center justify-center rounded-lg border bg-white",
+				children: loading || !code ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loader, { className: "size-5 animate-spin text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+					src: code.image,
+					alt: "Scan with WeChat to connect",
+					className: "size-[240px]"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm text-muted-foreground",
+				children: expired ? "Ask for another and scan it this time." : hint ?? "Waiting for a scan..."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				variant: expired ? "default" : "outline",
+				size: "sm",
+				onClick: fetchCode,
+				disabled: loading,
+				children: expired ? "New code" : "Start over"
+			})
+		]
+	}) });
+}
+function Avatar$1({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarRoot, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage$1, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback$1, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
+		...props
+	});
+}
+function ConnectorDetailPage() {
+	const { connectorId } = Route$14.useParams();
+	const state = Route$14.useLoaderData();
+	const manifest = connectorManifest(connectorId);
+	const canAddAccount = manifest.allowsMultipleAccounts || state.connections.length === 0;
+	const scans = manifest.auth.kind === "qr_scan";
+	const [scanning, setScanning] = (0, import_react.useState)(false);
+	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"
+					}) : /* @__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
+				]
+			}),
+			scanning && manifest.auth.kind === "qr_scan" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QrConnect, {
+				connectorId,
+				note: manifest.auth.note,
+				onDone: () => setScanning(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 ? /* @__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 account 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
+				]
+			}) }) : null,
+			state.connections.map((connection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionCard, {
+				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",
+				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.",
+						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.",
+						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", {
+			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",
+			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: "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))
+		})
+	] });
+}
+function ConnectionCard({ connection, manifest }) {
+	const router = useRouter();
+	const [busy, setBusy] = (0, import_react.useState)(null);
+	const broken = connection.status === "needs_reauth" || connection.status === "error";
+	const run = async (action) => {
+		setBusy(action);
+		try {
+			if (action === "verify") {
+				const updated = await verifyConnection({ data: { id: connection.id } });
+				toast[updated.status === "connected" ? "success" : "error"](updated.status === "connected" ? `${updated.accountLabel} is reachable` : updated.lastError ?? "This connection is not usable");
+			} else {
+				await disconnectConnection({ data: { id: connection.id } });
+				toast.success(`Disconnected ${connection.accountLabel}`);
+			}
+			await router.invalidate();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : String(error));
+		} finally {
+			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",
+		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"]
+			}),
+			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"]
+			}) : 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 };