@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/graphql/GraphQLExplorer.svelte

@@ -0,0 +1,661 @@
+<script lang="ts">import { onMount } from "svelte";
+import { formatTypeRef, INTROSPECTION_QUERY } from "./types";
+import { CodeEditor } from "../code";
+import * as z from "zod/v4";
+import { settle, settleNow } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { PaneGroup, Pane, Handle } from "../ui/resizable";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { ScrollArea } from "../ui/scroll-area";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Icon } from "../icon";
+import { error as toastError } from "../toast/index.js";
+import { attachGraphQLMode } from "./graphql-mode.js";
+import { kitLogger } from "../../kit-logger";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger("vibeskit-graphql");
+let { endpoint, monacoSetup: monacoSetupProp } = $props();
+/* ─── Schema ─── */
+let schema = $state(null);
+let schemaError = $state(null);
+let schemaLoading = $state(true);
+/* ─── Editor / request state ─── */
+let query = $state(`# GraphQL Explorer
+# This interface provides access to auto-generated GraphQL operations.
+#
+# Try running this query to explore the schema:
+
+{
+  __schema {
+    queryType { name }
+    mutationType { name }
+    types(includeDeprecated: false) {
+      name
+      kind
+      description
+      fields(includeDeprecated: false) {
+        name
+        description
+      }
+    }
+  }
+}`);
+let variables = $state("{}");
+let result = $state("");
+let running = $state(false);
+let activeTab = $state("response");
+let headers = $state([]);
+let lastRequest = $state(null);
+let lastResponse = $state(null);
+/* ─── Sidebar ─── */
+let filter = $state("");
+/* ─── Layout refs ─── */
+let mainAreaEl = $state(null);
+let bottomDefaultPercent = $state(34);
+let monacoDetail = $state(null);
+let languageModeStatus = $state("loading");
+let languageModeFailureNotified = false;
+/* ─── Introspection ─── */
+async function loadSchema() {
+	const res = await fetch(endpoint, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ query: INTROSPECTION_QUERY })
+	});
+	if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+	const data = await res.json();
+	if (data.errors?.length) {
+		throw new Error(data.errors.map((e) => e.message).join("; "));
+	}
+	if (!data.data) throw new Error("No data in introspection response");
+	return data.data.__schema;
+}
+async function fetchSchema() {
+	schemaLoading = true;
+	schemaError = null;
+	const loaded = await settle(loadSchema);
+	if (loaded.ok) {
+		schema = loaded.value;
+	} else {
+		schemaError = failureMessage(loaded.error);
+		logger.warn(`Schema introspection failed (${failureClass(loaded.error)})`);
+	}
+	schemaLoading = false;
+}
+onMount(() => {
+	fetchSchema();
+});
+/* ─── Derived schema helpers ─── */
+const typesAll = $derived(schema?.types ?? []);
+const getType = (name) => typesAll.find((t) => t.name === name);
+const queryRoot = $derived(getType(schema?.queryType?.name));
+const mutationRoot = $derived(getType(schema?.mutationType?.name));
+function opHasFields(op) {
+	return Array.isArray(op?.fields) && op.fields.length > 0;
+}
+const filteredFields = (root) => (root?.fields ?? []).filter((field) => field.name.toLowerCase().includes(filter.toLowerCase()));
+/* ─── Operation generation ─── */
+function buildOperation(kind, field) {
+	const args = field.args ?? [];
+	const varDecl = args.map((a) => `$${a.name}: ${formatTypeRef(a.type)}`).join(", ");
+	const argUse = args.map((a) => `${a.name}: $${a.name}`).join(", ");
+	const head = varDecl ? `${kind} (${varDecl})` : kind;
+	const call = argUse ? `${field.name}(${argUse})` : field.name;
+	return `${head} {
+  ${call} {
+    # select fields here
+  }
+}`;
+}
+function scaffoldVariables(field) {
+	const args = field.args ?? [];
+	const obj = Object.fromEntries(args.map((a) => [a.name, null]));
+	return JSON.stringify(obj, null, 2);
+}
+function insertOperation(kind, field) {
+	query = buildOperation(kind, field);
+	if ((field.args ?? []).length > 0) {
+		variables = scaffoldVariables(field);
+	}
+	activeTab = "response";
+}
+/* ─── Query runner ─── */
+const variablesSchema = z.json();
+/** The variables document, or undefined when it is empty or not valid JSON. */
+function safeParseJSON(s) {
+	if (!s) return undefined;
+	const parsed = settleNow(() => JSON.parse(s));
+	return parsed.ok ? variablesSchema.safeParse(parsed.value).data : undefined;
+}
+async function performQuery() {
+	const vars = safeParseJSON(variables);
+	if (variables && vars === undefined) {
+		result = JSON.stringify({ error: "Variables must be valid JSON" }, null, 2);
+		activeTab = "response";
+		return;
+	}
+	const customHeaders = Object.fromEntries(headers.filter((h) => h.key).map((h) => [h.key, h.value]));
+	const body = {
+		query,
+		variables: vars
+	};
+	const started = performance.now();
+	const res = await fetch(endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...customHeaders
+		},
+		body: JSON.stringify(body)
+	});
+	const durationMs = Math.round(performance.now() - started);
+	const respHeaders = {};
+	const read = settleNow(() => res.headers.forEach((v, k) => {
+		respHeaders[k] = v;
+	}));
+	if (!read.ok) {
+		logger.warn(`Response headers unavailable (${failureClass(read.error)})`);
+	}
+	lastRequest = {
+		url: endpoint,
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...customHeaders
+		},
+		body
+	};
+	lastResponse = {
+		status: res.status,
+		statusText: res.statusText,
+		headers: respHeaders,
+		durationMs
+	};
+	const json = await res.json();
+	result = JSON.stringify(json, null, 2);
+	activeTab = "response";
+}
+async function runQuery() {
+	running = true;
+	const ran = await settle(performQuery);
+	if (!ran.ok) {
+		result = JSON.stringify({ error: failureMessage(ran.error) }, null, 2);
+		activeTab = "response";
+	}
+	running = false;
+}
+function clearResult() {
+	result = "";
+}
+/* ─── Vertical split sizing ─── */
+function computeBottomPercent() {
+	const h = mainAreaEl?.clientHeight || 900;
+	const pct = Math.round(300 / h * 100);
+	bottomDefaultPercent = Math.min(70, Math.max(20, pct));
+}
+onMount(() => {
+	computeBottomPercent();
+});
+/* ─── Monaco GraphQL setup ─── */
+function modelUriFromEditor(editor) {
+	return editor.getModel()?.uri.toString() ?? null;
+}
+/** The text a failure shows the user: an Error's message, or a fixed line for any other thrown value. */
+function failureMessage(failure) {
+	return failure instanceof Error ? failure.message : "A non-Error value was thrown";
+}
+function handleMonacoSetup(detail) {
+	monacoDetail = detail;
+	monacoSetupProp?.(detail);
+}
+$effect(() => {
+	const detail = monacoDetail;
+	const activeSchema = schema;
+	if (!detail?.monaco || !activeSchema) return;
+	const modelUri = modelUriFromEditor(detail.editor);
+	if (!modelUri) return;
+	// Captured after the check: the hoisted attach function below cannot see the narrowing.
+	const attachUri = modelUri;
+	let cancelled = false;
+	let lease = null;
+	languageModeStatus = "loading";
+	async function attachLanguageMode() {
+		const attached = await settle(() => attachGraphQLMode({
+			modelUri: attachUri,
+			introspectionJSON: { __schema: activeSchema }
+		}));
+		if (attached.ok) {
+			if (cancelled) {
+				attached.value.dispose();
+				return;
+			}
+			lease = attached.value;
+			languageModeStatus = "ready";
+			languageModeFailureNotified = false;
+			return;
+		}
+		if (cancelled) return;
+		languageModeStatus = "failed";
+		logger.error(`language assistance failed (${failureClass(attached.error)})`);
+		if (!languageModeFailureNotified) {
+			languageModeFailureNotified = true;
+			toastError("GraphQL editor assistance is unavailable", { description: "The query editor remains available without diagnostics or suggestions." });
+		}
+	}
+	void attachLanguageMode();
+	return () => {
+		cancelled = true;
+		lease?.dispose();
+	};
+});
+</script>
+
+<svelte:window onresize={computeBottomPercent} />
+
+<svelte:head>
+	<title>GraphQL Explorer</title>
+	<meta name="robots" content="noindex" />
+	<meta name="referrer" content="no-referrer" />
+</svelte:head>
+
+<div
+	class="h-full w-full"
+	data-testid="graphql-explorer"
+	data-graphql-language-mode={languageModeStatus}
+>
+	<PaneGroup direction="horizontal" class="h-full w-full" autoSaveId="graphql-explorer:layout">
+		<!-- Sidebar -->
+		<Pane defaultSize={20} minSize={16} maxSize={40} order={1}>
+			<aside class="flex h-full w-full flex-col overflow-hidden border-r">
+				<div class="px-2 py-2">
+					<Input placeholder="Search operations" bind:value={filter} class="h-8 text-xs" />
+				</div>
+
+				<Tabs
+					value={opHasFields(queryRoot)
+						? 'queries'
+						: opHasFields(mutationRoot)
+							? 'mutations'
+							: 'debug'}
+					class="flex w-full flex-1 flex-col"
+				>
+					<TabsList class="w-full px-2">
+						<TabsTrigger value="queries" class="text-xs">Queries</TabsTrigger>
+						<TabsTrigger value="mutations" class="text-xs">Mutations</TabsTrigger>
+						<TabsTrigger value="debug" class="text-xs">Debug</TabsTrigger>
+					</TabsList>
+
+					<TabsContent value="queries" class="min-h-0 flex-1">
+						<ScrollArea class="h-full px-1">
+							<ul class="space-y-0.5 p-1">
+								{#if schemaLoading}
+									<li class="px-2 py-2 text-xs text-muted-foreground">Loading schema…</li>
+								{:else if opHasFields(queryRoot)}
+									{#each filteredFields(queryRoot) as f (f.name)}
+										<li>
+											<button
+												class="w-full rounded px-2 py-1 text-left text-xs transition hover:bg-accent"
+												onclick={() => insertOperation('query', f)}
+											>
+												{f.name}
+											</button>
+										</li>
+									{/each}
+								{:else}
+									<li class="px-2 py-2 text-xs text-muted-foreground">
+										No query fields
+										{#if schemaError}
+											<div class="mt-1 text-xs text-destructive">
+												• Introspection failed: {schemaError}
+											</div>
+										{:else if !queryRoot}
+											<div class="mt-1 text-xs text-amber-500">• No query root found</div>
+										{:else}
+											<div class="mt-1 text-xs text-amber-500">• Query root has no fields</div>
+										{/if}
+									</li>
+								{/if}
+							</ul>
+						</ScrollArea>
+					</TabsContent>
+
+					<TabsContent value="mutations" class="min-h-0 flex-1">
+						<ScrollArea class="h-full px-1">
+							<ul class="space-y-0.5 p-1">
+								{#if schemaLoading}
+									<li class="px-2 py-2 text-xs text-muted-foreground">Loading schema…</li>
+								{:else if opHasFields(mutationRoot)}
+									{#each filteredFields(mutationRoot) as f (f.name)}
+										<li>
+											<button
+												class="w-full rounded px-2 py-1 text-left text-xs transition hover:bg-accent"
+												onclick={() => insertOperation('mutation', f)}
+											>
+												{f.name}
+											</button>
+										</li>
+									{/each}
+								{:else}
+									<li class="px-2 py-2 text-xs text-muted-foreground">
+										No mutation fields
+										{#if schemaError}
+											<div class="mt-1 text-xs text-destructive">
+												• Introspection failed: {schemaError}
+											</div>
+										{:else if !mutationRoot}
+											<div class="mt-1 text-xs text-amber-500">• No mutation root found</div>
+										{:else}
+											<div class="mt-1 text-xs text-amber-500">• Mutation root has no fields</div>
+										{/if}
+									</li>
+								{/if}
+							</ul>
+						</ScrollArea>
+					</TabsContent>
+
+					<TabsContent value="debug" class="min-h-0 flex-1">
+						<ScrollArea class="h-full">
+							<div class="space-y-2 p-2 text-xs">
+								<div>
+									<div class="font-semibold text-foreground">Schema Status</div>
+									<div class="text-muted-foreground">
+										Introspection: {schema ? '✓ Loaded' : schemaError ? '✗ Failed' : 'Loading'}<br
+										/>
+										Types: {typesAll.length}<br />
+										Query Root: {queryRoot
+											? `${queryRoot.name} (${queryRoot.fields?.length || 0} fields)`
+											: 'None'}<br />
+										Mutation Root: {mutationRoot
+											? `${mutationRoot.name} (${mutationRoot.fields?.length || 0} fields)`
+											: 'None'}
+										{#if schemaError}
+											<br /><span class="text-destructive">Error: {schemaError}</span>
+										{/if}
+									</div>
+								</div>
+
+								{#if typesAll.length > 0}
+									<div>
+										<div class="font-semibold text-foreground">Available Types</div>
+										<div class="space-y-1 text-muted-foreground">
+											{#each typesAll.slice(0, 10) as type (type.name)}
+												<div>{type.name} ({type.kind})</div>
+											{/each}
+											{#if typesAll.length > 10}
+												<div>… and {typesAll.length - 10} more</div>
+											{/if}
+										</div>
+									</div>
+								{/if}
+
+								<div>
+									<div class="font-semibold text-foreground">Quick Tests</div>
+									<div class="mt-1 flex flex-col gap-1">
+										<Button
+											size="sm"
+											class="h-6 px-2 text-xs"
+											onclick={() => {
+												query = `{
+  __schema {
+    queryType { name }
+    mutationType { name }
+    types(includeDeprecated: false) {
+      name
+      kind
+      fields(includeDeprecated: false) {
+        name
+        type { name kind }
+      }
+    }
+  }
+}`;
+												activeTab = 'response';
+											}}
+										>
+											Load Schema Info
+										</Button>
+										<Button
+											size="sm"
+											variant="outline"
+											class="h-6 px-2 text-xs"
+											onclick={() => fetchSchema()}
+										>
+											Refresh Schema
+										</Button>
+									</div>
+								</div>
+							</div>
+						</ScrollArea>
+					</TabsContent>
+				</Tabs>
+			</aside>
+		</Pane>
+
+		<Handle />
+
+		<!-- Main -->
+		<Pane order={2}>
+			<section class="flex h-full w-full flex-col overflow-hidden rounded-md border bg-card">
+				<!-- Toolbar -->
+				<div class="flex items-center justify-between border-b px-2 py-1">
+					<div class="flex items-center gap-1">
+						<Button size="sm" class="h-7 gap-1 px-2" onclick={runQuery} disabled={running}>
+							<Icon icon="lucide:play" class="h-3.5 w-3.5" />
+							Run
+						</Button>
+						<Button size="sm" variant="ghost" class="h-7 px-2" onclick={clearResult}>Clear</Button>
+					</div>
+
+					<div class="flex items-center gap-1">
+						<Button
+							size="sm"
+							variant="ghost"
+							class="h-7 w-7 px-0"
+							aria-label="Refresh"
+							onclick={fetchSchema}
+						>
+							<Icon icon="lucide:rotate-ccw" class="h-3.5 w-3.5" />
+						</Button>
+						<Button size="sm" variant="ghost" class="h-7 w-7 px-0" aria-label="Magic">
+							<Icon icon="lucide:sparkles" class="h-3.5 w-3.5" />
+						</Button>
+						<Popover>
+							<PopoverTrigger
+								class="inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md border bg-transparent px-2 text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+								data-testid="graphql-headers"
+							>
+								Headers
+							</PopoverTrigger>
+							<PopoverContent side="bottom" align="end" class="w-[320px] space-y-2 p-2">
+								<div class="text-xs text-muted-foreground">Custom request headers</div>
+								{#each headers as h, i (i)}
+									<div class="flex gap-2">
+										<Input class="h-8 text-xs" placeholder="Key" bind:value={headers[i].key} />
+										<Input class="h-8 text-xs" placeholder="Value" bind:value={headers[i].value} />
+										<Button
+											aria-label={`Remove request header ${i + 1}`}
+											size="icon"
+											variant="ghost"
+											class="h-8 w-8"
+											onclick={() => {
+												headers = headers.toSpliced(i, 1);
+											}}
+										>
+											<Icon icon="lucide:x" class="h-4 w-4" />
+										</Button>
+									</div>
+								{/each}
+								<div class="flex items-center gap-2">
+									<Button
+										size="sm"
+										class="h-7 px-2"
+										onclick={() => {
+											headers = [...headers, { key: '', value: '' }];
+										}}
+									>
+										<Icon icon="lucide:plus" class="mr-1 h-3.5 w-3.5" />
+										Add
+									</Button>
+									<Button
+										size="sm"
+										variant="ghost"
+										class="h-7 px-2"
+										onclick={() => {
+											headers = [];
+										}}
+									>
+										Clear
+									</Button>
+								</div>
+							</PopoverContent>
+						</Popover>
+					</div>
+				</div>
+
+				<!-- Vertical split -->
+				<div class="min-h-0 flex-1" bind:this={mainAreaEl}>
+					<PaneGroup
+						direction="vertical"
+						class="h-full w-full"
+						autoSaveId="graphql-explorer:vertical"
+					>
+						<!-- Query editor -->
+						<Pane minSize={20} order={1}>
+							<div class="flex h-full w-full flex-col">
+								<div
+									class="border-b px-2 py-1 text-[10px] tracking-wide text-muted-foreground uppercase"
+								>
+									Query
+								</div>
+								<div class="min-h-0 flex-1">
+									<CodeEditor
+										bind:code={query}
+										language="graphql"
+										fill
+										deferMount={false}
+										unmountOnHide={false}
+										monacoSetup={handleMonacoSetup}
+									/>
+								</div>
+							</div>
+						</Pane>
+
+						<Handle withHandle />
+
+						<!-- Response / Variables / Request -->
+						<Pane defaultSize={bottomDefaultPercent} minSize={20} maxSize={70} order={2}>
+							<Tabs bind:value={activeTab} class="flex h-full w-full flex-col">
+								<TabsList class="w-full px-2">
+									<TabsTrigger value="response">Response</TabsTrigger>
+									<TabsTrigger value="variables">Variables</TabsTrigger>
+									<TabsTrigger value="request">Request</TabsTrigger>
+								</TabsList>
+
+								<TabsContent value="response" class="min-h-0 flex-1 overflow-hidden">
+									<CodeEditor
+										code={result}
+										language="json"
+										readOnly
+										fill
+										deferMount={false}
+										unmountOnHide={false}
+									/>
+								</TabsContent>
+
+								<TabsContent value="variables" class="min-h-0 flex-1 overflow-hidden">
+									<CodeEditor
+										bind:code={variables}
+										language="json"
+										fill
+										deferMount={false}
+										unmountOnHide={false}
+									/>
+								</TabsContent>
+
+								<TabsContent value="request" class="min-h-0 flex-1 overflow-hidden">
+									<div class="flex h-full flex-col">
+										<div class="grid grid-cols-1 gap-2 border-b px-2 py-1 text-xs md:grid-cols-4">
+											<div class="flex items-center gap-2">
+												<span class="text-muted-foreground">Method</span>
+												<span class="font-mono">{lastRequest?.method ?? 'POST'}</span>
+											</div>
+											<div class="flex items-center gap-2">
+												<span class="text-muted-foreground">URL</span>
+												<span class="font-mono break-all">
+													{lastRequest?.url ?? endpoint}
+												</span>
+											</div>
+											<div class="flex items-center gap-2">
+												<span class="text-muted-foreground">Status</span>
+												<span class="font-mono">
+													{lastResponse?.status ?? '-'}
+													{lastResponse?.statusText ?? ''}
+												</span>
+											</div>
+											<div class="flex items-center gap-2">
+												<span class="text-muted-foreground">Duration</span>
+												<span class="font-mono">{lastResponse?.durationMs ?? 0} ms</span>
+											</div>
+										</div>
+
+										<div class="grid flex-1 grid-cols-2 gap-2 p-2">
+											<div class="flex h-full flex-col overflow-hidden">
+												<div
+													class="border-b px-2 py-1 text-[10px] tracking-wide text-muted-foreground uppercase"
+												>
+													Request
+												</div>
+												<div class="min-h-0 flex-1">
+													<CodeEditor
+														code={JSON.stringify(
+															{
+																headers: lastRequest?.headers ?? {
+																	'Content-Type': 'application/json'
+																},
+																body: lastRequest?.body ?? {
+																	query,
+																	variables: safeParseJSON(variables)
+																}
+															},
+															null,
+															2
+														)}
+														language="json"
+														readOnly
+														fill
+														deferMount={false}
+														unmountOnHide={false}
+													/>
+												</div>
+											</div>
+
+											<div class="flex h-full flex-col overflow-hidden">
+												<div
+													class="border-b px-2 py-1 text-[10px] tracking-wide text-muted-foreground uppercase"
+												>
+													Response Headers
+												</div>
+												<div class="min-h-0 flex-1">
+													<CodeEditor
+														code={JSON.stringify(lastResponse?.headers ?? {}, null, 2)}
+														language="json"
+														readOnly
+														fill
+														deferMount={false}
+														unmountOnHide={false}
+													/>
+												</div>
+											</div>
+										</div>
+									</div>
+								</TabsContent>
+							</Tabs>
+						</Pane>
+					</PaneGroup>
+				</div>
+			</section>
+		</Pane>
+	</PaneGroup>
+</div>

package/dist/lib/components/graphql/GraphQLExplorer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MonacoSetupDetail } from '../code/monaco-setup';
+interface Props {
+    /** GraphQL endpoint URL. */
+    endpoint: string;
+    /** Optional consumer hook for Monaco setup. */
+    monacoSetup?: (detail: MonacoSetupDetail) => void;
+}
+declare const GraphQLExplorer: import("svelte").Component<Props, {}, "">;
+type GraphQLExplorer = ReturnType<typeof GraphQLExplorer>;
+export default GraphQLExplorer;

package/dist/lib/components/graphql/graphql-mode.d.ts

@@ -0,0 +1,13 @@
+export interface GraphQLModeLease {
+    dispose(): void;
+}
+/**
+ * Attach one introspected schema to one Monaco model URI.
+ *
+ * Monaco's language registry is document-global. This lease keeps concurrent
+ * explorers isolated by exact model URI and removes stale schemas on teardown.
+ */
+export declare function attachGraphQLMode(input: {
+    modelUri: string;
+    introspectionJSON: unknown;
+}): Promise<GraphQLModeLease>;