loopable-cli 0.2.0 → 0.3.0

package/.output/server/_ssr/new-ChKBdcXJ.mjs

@@ -0,0 +1,245 @@
+import { K as require_jsx_runtime } from "../_libs/@base-ui/react+[...].mjs";
+import { f as Link, p as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { l as connectorWorkflow, n as allTriggers, r as allWorkflows, s as connectorManifest } from "./connections-Cqvb6Gw2.mjs";
+import { f as PencilLine } from "../_libs/lucide-react.mjs";
+import { a as Route$9 } from "./router-DdwREiOf.mjs";
+import { t as ConnectorIcon } from "./connector-icon-DrhVbhs6.mjs";
+import { n as Field, o as PageHeader } from "./page-DZVxKvdn.mjs";
+import { a as SelectValue, i as SelectTrigger, n as SelectContent, r as SelectItem, t as Select$1 } from "./select-BtndHhHb.mjs";
+import { t as LoopForm } from "./loop-form-DWwOR05R.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/new-ChKBdcXJ.js
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* One of a connector's workflows, as a loop nobody has saved yet.
+*
+* Nothing here touches the database, which is the point: choosing a workflow
+* used to create the loop, so a look around the page left a live loop behind,
+* enabled and with none of its questions answered. Now choosing only fills a
+* form in, and the loop begins at Save.
+*
+* Deliberately client-safe, so the form can be filled in without a round trip
+* and without anything on the server having to remember a half-made loop.
+*/
+function draftForWorkflow(connectorId, workflowId) {
+	const workflow = connectorWorkflow(connectorId, workflowId);
+	if (!workflow) throw new Error(`Unknown workflow: ${workflowId}`);
+	return {
+		id: null,
+		name: workflow.name,
+		connectorId,
+		workflowId,
+		prompt: workflow.prompt,
+		guidance: null,
+		agentId: null,
+		settings: {},
+		actionConnectorId: workflow.actionConnectorId ?? connectorId,
+		actionId: workflow.actionId,
+		actionTarget: workflow.actionTarget ?? {},
+		pollEveryMs: workflow.pollEveryMs ?? null,
+		enabled: true
+	};
+}
+/** The trigger a custom loop starts on before anything is picked. */
+var CUSTOM_DEFAULT = {
+	connector: "slack",
+	workflow: "slack.ask"
+};
+function NewLoopPage() {
+	const { connector, workflow, custom } = Route$9.useSearch();
+	const chosen = connector && workflow && connectorWorkflow(connector, workflow) ? {
+		connector,
+		workflow
+	} : null;
+	if (custom) {
+		const start = chosen ?? CUSTOM_DEFAULT;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomLoop, {
+			connectorId: start.connector,
+			workflowId: start.workflow
+		});
+	}
+	return chosen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeLoop, {
+		connectorId: chosen.connector,
+		workflowId: chosen.workflow
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChooseWorkflow, {});
+}
+/**
+* The second step, and the one that makes a loop. Nothing is written down
+* until the form is saved.
+*/
+function ShapeLoop({ connectorId, workflowId }) {
+	const workflow = connectorWorkflow(connectorId, workflowId);
+	const connector = connectorManifest(connectorId);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+			back: {
+				to: "/loops/new",
+				label: "New loop"
+			},
+			icon: connector ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+				icon: connector.icon,
+				accent: connector.accent
+			}) : null,
+			title: workflow.name,
+			description: workflow.summary
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopForm, { loop: draftForWorkflow(connectorId, workflowId) })]
+	});
+}
+/**
+* A loop with your own prompt. Underneath it is still one of the workflows,
+* since a workflow is what knows how to watch for something and read the
+* answer, but it starts with an empty prompt and a trigger you pick.
+*/
+function CustomLoop({ connectorId, workflowId }) {
+	const navigate = useNavigate();
+	const draft = {
+		...draftForWorkflow(connectorId, workflowId),
+		name: "Custom loop",
+		prompt: ""
+	};
+	const picker = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+		label: "Starts when",
+		htmlFor: "custom-trigger",
+		className: "sm:max-w-sm",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+			value: `${connectorId}::${workflowId}`,
+			onValueChange: (value) => {
+				if (!value) return;
+				const [connector, workflow] = value.split("::");
+				navigate({
+					to: "/loops/new",
+					search: {
+						custom: true,
+						connector,
+						workflow
+					},
+					replace: true
+				});
+			},
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+				id: "custom-trigger",
+				className: "w-full",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { children: () => {
+					return connectorWorkflow(connectorId, workflowId)?.when ?? workflowId;
+				} })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: allTriggers().map(({ connector, trigger }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+				value: `${connector.id}::${trigger.id}`,
+				children: trigger.when
+			}, `${connector.id}::${trigger.id}`)) })]
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+			back: {
+				to: "/loops/new",
+				label: "New loop"
+			},
+			icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomIcon, {}),
+			title: "Custom loop",
+			description: "Pick what starts it, then say what the agent should do."
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopForm, {
+			loop: draft,
+			trigger: picker
+		}, workflowId)]
+	});
+}
+function CustomIcon() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PencilLine, { className: "size-5" })
+	});
+}
+/** How many loops already use a workflow, said as a sentence rather than a count. */
+function inUse(loops, workflowId) {
+	const count = loops.filter((loop) => loop.workflowId === workflowId).length;
+	if (count === 0) return null;
+	return count === 1 ? "You have 1 loop like this" : `You have ${count} loops like this`;
+}
+function ChoiceCard({ icon, title, summary, note, ...link }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+		to: "/loops/new",
+		search: link.search,
+		className: "flex items-start gap-3 rounded-xl bg-card p-4 ring-1 ring-foreground/10 transition-colors hover:bg-muted/50",
+		children: [icon, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: summary
+				}),
+				note ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-2 text-xs text-muted-foreground",
+					children: note
+				}) : null
+			]
+		})]
+	});
+}
+function workflowCard(connector, workflow, loops) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChoiceCard, {
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+			icon: connector.icon,
+			accent: connector.accent,
+			className: "size-8"
+		}),
+		title: workflow.name,
+		summary: workflow.summary,
+		note: inUse(loops, workflow.id),
+		search: {
+			connector: connector.id,
+			workflow: workflow.id
+		}
+	}, workflow.id);
+}
+/**
+* Every loop is one of the workflows a connector offers, or a custom one
+* built on a workflow's trigger. Custom and Schedule come first: they are the
+* two not tied to something arriving from a service.
+*/
+function ChooseWorkflow() {
+	const { loops } = Route$9.useLoaderData();
+	const all = allWorkflows();
+	const scheduled = all.filter(({ connector }) => connector.id === "schedule");
+	const rest = all.filter(({ connector }) => connector.id !== "schedule");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-6",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+				back: {
+					to: "/loops",
+					label: "Loops"
+				},
+				title: "New loop"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChoiceCard, {
+					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PencilLine, { className: "size-4" })
+					}),
+					title: "Custom loop",
+					summary: "Pick a trigger and write your own prompt.",
+					search: { custom: true }
+				}), scheduled.map(({ connector, workflow }) => workflowCard(connector, workflow, loops))]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-medium text-muted-foreground",
+					children: "From a connector"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "grid gap-3 sm:grid-cols-2",
+					children: rest.map(({ connector, workflow }) => workflowCard(connector, workflow, loops))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { NewLoopPage as component };

package/.output/server/_ssr/page-DZVxKvdn.mjs

@@ -0,0 +1,120 @@
+import "../_runtime.mjs";
+import { K as require_jsx_runtime, q as require_react } from "../_libs/@base-ui/react+[...].mjs";
+import { f as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { I as ChevronLeft } from "../_libs/lucide-react.mjs";
+import { P as cn } from "./router-DdwREiOf.mjs";
+require_react();
+var import_jsx_runtime = require_jsx_runtime();
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+/**
+* The top of every page: where it sits, what it is called, and what can be
+* done from here. One shape everywhere, so pages differ in what they show
+* rather than in how far the title is from the edge.
+*/
+function PageHeader({ title, description, back, icon, actions, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+		className: "flex flex-col gap-3",
+		children: [back ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+			to: back.to,
+			params: back.params,
+			search: back.search,
+			className: "-ml-1 flex w-fit items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { className: "size-4" }), back.label]
+		}) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-start gap-3",
+			children: [
+				icon,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1 basis-56",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+							className: "text-xl font-semibold tracking-tight",
+							children: title
+						}),
+						description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "mt-1 text-sm text-muted-foreground",
+							children: description
+						}) : null,
+						children
+					]
+				}),
+				actions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: actions
+				}) : null
+			]
+		})]
+	});
+}
+/** A labelled control, with at most one short line of help under it. */
+function Field({ label, htmlFor, hint, className, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+				htmlFor,
+				children: label
+			}),
+			children,
+			hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-xs text-muted-foreground",
+				children: hint
+			}) : null
+		]
+	});
+}
+/**
+* One titled block of a form or a detail page. Title on the left and fields
+* on the right on a wide screen, stacked on a narrow one.
+*/
+function Section({ title, description, children, className }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: cn("grid gap-4 border-t py-6 first:border-t-0 first:pt-0 md:grid-cols-[11rem_1fr] md:gap-8", className),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+			className: "text-sm font-medium",
+			children: title
+		}), description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "mt-1 text-xs text-muted-foreground",
+			children: description
+		}) : null] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex min-w-0 flex-col gap-4",
+			children
+		})]
+	});
+}
+/** A list of rows inside one bordered box, rather than a stack of cards. */
+function List({ className, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: cn("divide-y overflow-hidden rounded-xl bg-card ring-1 ring-foreground/10", className),
+		children
+	});
+}
+/** What a list says when it has nothing in it. */
+function Empty({ children, action }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-3 rounded-xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground",
+		children: [children, action]
+	});
+}
+/** Tabs that are links, so a tab can be bookmarked and shared. */
+function LinkTabs({ items }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", {
+		className: "flex gap-4 border-b",
+		children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+			to: item.to,
+			params: item.params,
+			search: item.search,
+			replace: true,
+			className: cn("-mb-px flex items-center gap-1.5 border-b-2 pb-2 text-sm transition-colors", item.active ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+			children: item.label
+		}, index))
+	});
+}
+//#endregion
+export { List as a, LinkTabs as i, Field as n, PageHeader as o, Label as r, Section as s, Empty as t };