@invect/version-control 0.0.1 → 0.0.3

package/dist/frontend/index.mjs

@@ -1 +1,705 @@
-export {};
+import { AlertTriangle, ArrowDownToLine, ArrowUpFromLine, CheckCircle2, Clock, ExternalLink, GitBranch, Loader2, Send, Unplug, X, XCircle } from "lucide-react";
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useApiClient } from "@invect/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/frontend/hooks/useFlowSync.ts
+/**
+* useFlowSync — React Query hooks for version control sync operations
+*/
+const vcQueryKeys = {
+	syncStatus: (flowId) => [
+		"vc",
+		"sync-status",
+		flowId
+	],
+	syncHistory: (flowId) => [
+		"vc",
+		"sync-history",
+		flowId
+	],
+	syncedFlows: () => ["vc", "synced-flows"]
+};
+/** Fetch sync status for a flow */
+function useFlowSyncStatus(flowId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: vcQueryKeys.syncStatus(flowId ?? ""),
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/status`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch sync status: ${response.status}`);
+			return response.json();
+		},
+		enabled: !!flowId
+	});
+}
+/** Fetch sync history for a flow */
+function useFlowSyncHistory(flowId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: vcQueryKeys.syncHistory(flowId ?? ""),
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/history?limit=20`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch sync history: ${response.status}`);
+			return response.json();
+		},
+		enabled: !!flowId
+	});
+}
+/** List all synced flows */
+function useSyncedFlows() {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: vcQueryKeys.syncedFlows(),
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch synced flows: ${response.status}`);
+			return response.json();
+		}
+	});
+}
+/** Push a flow to remote */
+function usePushFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/push`, {
+				method: "POST",
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 409) throw new Error(`Push failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncHistory(flowId) });
+		}
+	});
+}
+/** Pull a flow from remote */
+function usePullFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/pull`, {
+				method: "POST",
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error(`Pull failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncHistory(flowId) });
+		}
+	});
+}
+/** Force push (local wins) */
+function useForcePushFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/force-push`, {
+				method: "POST",
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error(`Force push failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncHistory(flowId) });
+		}
+	});
+}
+/** Force pull (remote wins) */
+function useForcePullFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/force-pull`, {
+				method: "POST",
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error(`Force pull failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncHistory(flowId) });
+		}
+	});
+}
+/** Publish flow (pr-per-publish mode) */
+function usePublishFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/publish`, {
+				method: "POST",
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error(`Publish failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncHistory(flowId) });
+		}
+	});
+}
+/** Configure sync for a flow */
+function useConfigureSync(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/configure`, {
+				method: "POST",
+				credentials: "include",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Configure failed: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncedFlows() });
+		}
+	});
+}
+/** Disconnect sync for a flow */
+function useDisconnectSync(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/version-control/vc/flows/${flowId}/disconnect`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error(`Disconnect failed: ${response.status}`);
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncStatus(flowId) });
+			queryClient.invalidateQueries({ queryKey: vcQueryKeys.syncedFlows() });
+		}
+	});
+}
+//#endregion
+//#region src/frontend/components/ConnectFlowForm.tsx
+/**
+* ConnectFlowForm — Form to configure version control sync for a flow.
+*/
+function ConnectFlowForm({ flowId, onCancel }) {
+	const configureMutation = useConfigureSync(flowId);
+	const [repo, setRepo] = useState("");
+	const [branch, setBranch] = useState("main");
+	const [filePath, setFilePath] = useState("");
+	const [mode, setMode] = useState("direct-commit");
+	const [syncDirection, setSyncDirection] = useState("push");
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		configureMutation.mutate({
+			repo: repo || void 0,
+			branch: branch || void 0,
+			filePath: filePath || void 0,
+			mode,
+			syncDirection
+		}, { onSuccess: onCancel });
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit,
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-medium",
+						children: "Connect to Git"
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "text-imp-muted-foreground hover:text-imp-foreground",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				className: "mb-1 block text-xs text-imp-muted-foreground",
+				children: "Repository (optional — uses plugin default)"
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value: repo,
+				onChange: (e) => setRepo(e.target.value),
+				placeholder: "owner/repo",
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-2.5 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:border-imp-primary focus:outline-none"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				className: "mb-1 block text-xs text-imp-muted-foreground",
+				children: "Branch"
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value: branch,
+				onChange: (e) => setBranch(e.target.value),
+				placeholder: "main",
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-2.5 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:border-imp-primary focus:outline-none"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				className: "mb-1 block text-xs text-imp-muted-foreground",
+				children: "File path (optional — auto-generated from flow name)"
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value: filePath,
+				onChange: (e) => setFilePath(e.target.value),
+				placeholder: "workflows/my-flow.flow.ts",
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-2.5 py-1.5 text-sm font-mono placeholder:text-imp-muted-foreground focus:border-imp-primary focus:outline-none"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				className: "mb-1 block text-xs text-imp-muted-foreground",
+				children: "Sync Mode"
+			}), /* @__PURE__ */ jsxs("select", {
+				value: mode,
+				onChange: (e) => setMode(e.target.value),
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-2.5 py-1.5 text-sm focus:border-imp-primary focus:outline-none",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "direct-commit",
+						children: "Direct Commit"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "pr-per-save",
+						children: "PR per Save"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "pr-per-publish",
+						children: "PR per Publish"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				className: "mb-1 block text-xs text-imp-muted-foreground",
+				children: "Sync Direction"
+			}), /* @__PURE__ */ jsxs("select", {
+				value: syncDirection,
+				onChange: (e) => setSyncDirection(e.target.value),
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-2.5 py-1.5 text-sm focus:border-imp-primary focus:outline-none",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "push",
+						children: "Push (Invect → Git)"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "pull",
+						children: "Pull (Git → Invect)"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "bidirectional",
+						children: "Bidirectional"
+					})
+				]
+			})] }),
+			configureMutation.error && /* @__PURE__ */ jsx("div", {
+				className: "rounded-md border border-red-500/30 bg-red-500/10 p-2 text-xs text-red-600",
+				children: configureMutation.error.message
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 pt-1",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: configureMutation.isPending,
+					className: "flex-1 rounded-md bg-imp-primary px-3 py-1.5 text-sm font-medium text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+					children: configureMutation.isPending ? "Connecting..." : "Connect"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-sm font-medium hover:bg-imp-muted",
+					children: "Cancel"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/VcSyncPanel.tsx
+/**
+* VcSyncPanel — Panel tab for the flow editor.
+*
+* Shows sync status, push/pull controls, and recent sync history
+* for the current flow. Registered as a panelTab contribution
+* for the 'flowEditor' context.
+*/
+function VcSyncPanel({ flowId }) {
+	const { data, isLoading, error } = useFlowSyncStatus(flowId);
+	const { data: historyData } = useFlowSyncHistory(flowId);
+	const pushMutation = usePushFlow(flowId);
+	const pullMutation = usePullFlow(flowId);
+	const forcePushMutation = useForcePushFlow(flowId);
+	const forcePullMutation = useForcePullFlow(flowId);
+	const publishMutation = usePublishFlow(flowId);
+	const disconnectMutation = useDisconnectSync(flowId);
+	const [showConnect, setShowConnect] = useState(false);
+	const [showConflictActions, setShowConflictActions] = useState(false);
+	const isBusy = pushMutation.isPending || pullMutation.isPending || forcePushMutation.isPending || forcePullMutation.isPending || publishMutation.isPending || disconnectMutation.isPending;
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center p-4",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Loading sync status..."
+		})
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center p-4",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-red-500",
+			children: error instanceof Error ? error.message : "Failed to load sync status"
+		})
+	});
+	const status = data?.status ?? "not-connected";
+	const config = data?.config;
+	const history = historyData?.history ?? [];
+	if (status === "not-connected" || !config) {
+		if (showConnect) return /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col p-4",
+			children: /* @__PURE__ */ jsx(ConnectFlowForm, {
+				flowId,
+				onCancel: () => setShowConnect(false)
+			})
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full flex-col items-center justify-center gap-3 p-4",
+			children: [
+				/* @__PURE__ */ jsx(GitBranch, { className: "h-8 w-8 text-imp-muted-foreground/50" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-imp-muted-foreground",
+					children: "Not connected to version control"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => setShowConnect(true),
+					className: "rounded-md bg-imp-primary px-3 py-1.5 text-sm font-medium text-imp-primary-foreground hover:bg-imp-primary/90",
+					children: "Connect to Git"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-medium",
+						children: "Version Control"
+					})]
+				}), /* @__PURE__ */ jsx(StatusBadge, { status })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 space-y-1 rounded-md border border-imp-border bg-imp-muted/30 p-3 text-xs",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "Repo"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: config.repo
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "Branch"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: config.branch
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "File"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono truncate max-w-[180px]",
+							title: config.filePath,
+							children: config.filePath
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "Mode"
+						}), /* @__PURE__ */ jsx("span", { children: config.mode })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "Direction"
+						}), /* @__PURE__ */ jsx("span", { children: config.syncDirection })]
+					}),
+					config.activePrUrl && /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-imp-muted-foreground",
+							children: "Active PR"
+						}), /* @__PURE__ */ jsxs("a", {
+							href: config.activePrUrl,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "flex items-center gap-1 text-imp-primary hover:underline",
+							children: [
+								"#",
+								config.activePrNumber,
+								/* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+							]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 flex gap-2",
+				children: [
+					config.syncDirection !== "pull" && /* @__PURE__ */ jsxs("button", {
+						onClick: () => pushMutation.mutate(),
+						disabled: isBusy,
+						className: "flex flex-1 items-center justify-center gap-1.5 rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-xs font-medium hover:bg-imp-muted disabled:opacity-50",
+						children: [/* @__PURE__ */ jsx(ArrowUpFromLine, { className: "h-3.5 w-3.5" }), "Push"]
+					}),
+					config.syncDirection !== "push" && /* @__PURE__ */ jsxs("button", {
+						onClick: () => pullMutation.mutate(),
+						disabled: isBusy,
+						className: "flex flex-1 items-center justify-center gap-1.5 rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-xs font-medium hover:bg-imp-muted disabled:opacity-50",
+						children: [/* @__PURE__ */ jsx(ArrowDownToLine, { className: "h-3.5 w-3.5" }), "Pull"]
+					}),
+					config.mode === "pr-per-publish" && config.syncDirection !== "pull" && /* @__PURE__ */ jsxs("button", {
+						onClick: () => publishMutation.mutate(),
+						disabled: isBusy,
+						className: "flex flex-1 items-center justify-center gap-1.5 rounded-md bg-imp-primary px-3 py-1.5 text-xs font-medium text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+						children: [/* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }), "Publish"]
+					})
+				]
+			}),
+			status === "conflict" && /* @__PURE__ */ jsxs("div", {
+				className: "mb-4 rounded-md border border-yellow-500/30 bg-yellow-500/10 p-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-xs font-medium text-yellow-600",
+					children: "Conflict detected — remote file has changed."
+				}), !showConflictActions ? /* @__PURE__ */ jsx("button", {
+					onClick: () => setShowConflictActions(true),
+					className: "text-xs text-yellow-600 underline hover:text-yellow-700",
+					children: "Resolve conflict..."
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						onClick: () => forcePushMutation.mutate(),
+						disabled: isBusy,
+						className: "flex-1 rounded-md border border-yellow-500/30 px-2 py-1 text-xs font-medium hover:bg-yellow-500/20 disabled:opacity-50",
+						children: "Force Push (local wins)"
+					}), /* @__PURE__ */ jsx("button", {
+						onClick: () => forcePullMutation.mutate(),
+						disabled: isBusy,
+						className: "flex-1 rounded-md border border-yellow-500/30 px-2 py-1 text-xs font-medium hover:bg-yellow-500/20 disabled:opacity-50",
+						children: "Force Pull (remote wins)"
+					})]
+				})]
+			}),
+			(pushMutation.data || pullMutation.data || publishMutation.data || forcePushMutation.data || forcePullMutation.data) && /* @__PURE__ */ jsx(MutationResult, { result: pushMutation.data ?? pullMutation.data ?? publishMutation.data ?? forcePushMutation.data ?? forcePullMutation.data ?? null }),
+			(pushMutation.error || pullMutation.error || publishMutation.error || forcePushMutation.error || forcePullMutation.error || disconnectMutation.error) && /* @__PURE__ */ jsx("div", {
+				className: "mb-3 rounded-md border border-red-500/30 bg-red-500/10 p-2 text-xs text-red-600",
+				children: (pushMutation.error ?? pullMutation.error ?? publishMutation.error ?? forcePushMutation.error ?? forcePullMutation.error ?? disconnectMutation.error)?.message
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [/* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("h4", {
+					className: "text-xs font-medium text-imp-muted-foreground",
+					children: "Recent History"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto space-y-1",
+				children: history.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-imp-muted-foreground",
+					children: "No sync history yet"
+				}) : history.slice(0, 10).map((entry) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2 rounded-md px-2 py-1.5 bg-imp-muted/20 text-xs",
+					children: [/* @__PURE__ */ jsx(ActionIcon, { action: entry.action }), /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate",
+							children: entry.message ?? entry.action
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "text-imp-muted-foreground",
+							children: [new Date(entry.createdAt).toLocaleString(), entry.commitSha && /* @__PURE__ */ jsx("span", {
+								className: "ml-1 font-mono",
+								children: entry.commitSha.slice(0, 7)
+							})]
+						})]
+					})]
+				}, entry.id))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-3 border-t border-imp-border pt-3",
+				children: /* @__PURE__ */ jsxs("button", {
+					onClick: () => {
+						if (window.confirm("Disconnect this flow from version control?")) disconnectMutation.mutate();
+					},
+					disabled: isBusy,
+					className: "flex items-center gap-1.5 text-xs text-imp-muted-foreground hover:text-red-500 disabled:opacity-50",
+					children: [/* @__PURE__ */ jsx(Unplug, { className: "h-3.5 w-3.5" }), "Disconnect"]
+				})
+			})
+		]
+	});
+}
+function StatusBadge({ status }) {
+	const styles = {
+		synced: "border-green-500/30 bg-green-500/10 text-green-600",
+		pending: "border-yellow-500/30 bg-yellow-500/10 text-yellow-600",
+		conflict: "border-red-500/30 bg-red-500/10 text-red-600",
+		"not-connected": "border-imp-border bg-imp-muted text-imp-muted-foreground",
+		error: "border-red-500/30 bg-red-500/10 text-red-600"
+	};
+	const icons = {
+		synced: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3" }),
+		pending: /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+		conflict: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }),
+		"not-connected": null,
+		error: /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3" })
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${styles[status]}`,
+		children: [icons[status], status]
+	});
+}
+function ActionIcon({ action }) {
+	switch (action) {
+		case "push": return /* @__PURE__ */ jsx(ArrowUpFromLine, { className: "mt-0.5 h-3 w-3 text-blue-500 shrink-0" });
+		case "pull": return /* @__PURE__ */ jsx(ArrowDownToLine, { className: "mt-0.5 h-3 w-3 text-green-500 shrink-0" });
+		case "pr-created": return /* @__PURE__ */ jsx(GitBranch, { className: "mt-0.5 h-3 w-3 text-purple-500 shrink-0" });
+		case "pr-merged": return /* @__PURE__ */ jsx(CheckCircle2, { className: "mt-0.5 h-3 w-3 text-green-600 shrink-0" });
+		case "conflict": return /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 text-yellow-500 shrink-0" });
+		default: return /* @__PURE__ */ jsx(Clock, { className: "mt-0.5 h-3 w-3 text-imp-muted-foreground shrink-0" });
+	}
+}
+function MutationResult({ result }) {
+	if (!result) return null;
+	if (!result.success) return /* @__PURE__ */ jsx("div", {
+		className: "mb-3 rounded-md border border-red-500/30 bg-red-500/10 p-2 text-xs text-red-600",
+		children: result.error ?? "Operation failed"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3 rounded-md border border-green-500/30 bg-green-500/10 p-2 text-xs text-green-600",
+		children: [
+			"Success",
+			result.commitSha && /* @__PURE__ */ jsxs("span", {
+				className: "ml-1 font-mono",
+				children: [
+					"(",
+					result.commitSha.slice(0, 7),
+					")"
+				]
+			}),
+			result.prUrl && /* @__PURE__ */ jsxs("a", {
+				href: result.prUrl,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "ml-1 underline hover:text-green-700",
+				children: ["PR #", result.prNumber]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/VcHeaderButton.tsx
+/**
+* VcHeaderButton — Header action for quick push/pull from the flow editor header.
+*
+* Shows sync status as an icon and provides one-click push/pull.
+*/
+function VcHeaderButton({ flowId }) {
+	if (!flowId) return null;
+	return /* @__PURE__ */ jsx(VcHeaderButtonInner, { flowId });
+}
+function VcHeaderButtonInner({ flowId }) {
+	const { data, isLoading } = useFlowSyncStatus(flowId);
+	const pushMutation = usePushFlow(flowId);
+	const pullMutation = usePullFlow(flowId);
+	const status = data?.status;
+	const config = data?.config;
+	if (!config || status === "not-connected") return null;
+	const isBusy = isLoading || pushMutation.isPending || pullMutation.isPending;
+	const canPush = config.syncDirection !== "pull";
+	const canPull = config.syncDirection !== "push";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `${status === "synced" ? "text-green-500" : status === "pending" ? "text-yellow-500" : status === "conflict" ? "text-red-500" : "text-imp-muted-foreground"}`,
+				title: `Sync: ${status}`,
+				children: /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" })
+			}),
+			canPush && /* @__PURE__ */ jsx("button", {
+				onClick: () => pushMutation.mutate(),
+				disabled: isBusy,
+				title: "Push to remote",
+				className: "rounded-md p-1 text-imp-muted-foreground hover:bg-imp-muted hover:text-imp-foreground disabled:opacity-50",
+				children: pushMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ArrowUpFromLine, { className: "h-3.5 w-3.5" })
+			}),
+			canPull && /* @__PURE__ */ jsx("button", {
+				onClick: () => pullMutation.mutate(),
+				disabled: isBusy,
+				title: "Pull from remote",
+				className: "rounded-md p-1 text-imp-muted-foreground hover:bg-imp-muted hover:text-imp-foreground disabled:opacity-50",
+				children: pullMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ArrowDownToLine, { className: "h-3.5 w-3.5" })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/index.ts
+/**
+* @invect/version-control/ui — Frontend Plugin Entry Point
+*
+* Browser-safe entry point that exports the Version Control frontend plugin.
+* Import via: `import { vcFrontendPlugin } from '@invect/version-control/ui'`
+*/
+const vcFrontendPlugin = {
+	id: "version-control",
+	name: "Version Control",
+	panelTabs: [{
+		context: "flowEditor",
+		label: "Git Sync",
+		icon: GitBranch,
+		component: VcSyncPanel
+	}],
+	headerActions: [{
+		context: "flowHeader",
+		component: VcHeaderButton
+	}],
+	components: {
+		"vc.SyncPanel": VcSyncPanel,
+		"vc.HeaderButton": VcHeaderButton
+	}
+};
+//#endregion
+export { useConfigureSync, useDisconnectSync, useFlowSyncHistory, useFlowSyncStatus, useForcePullFlow, useForcePushFlow, usePublishFlow, usePullFlow, usePushFlow, useSyncedFlows, vcFrontendPlugin, vcQueryKeys };
+
+//# sourceMappingURL=index.mjs.map