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

package/dist/lib/components/user-component/UserComponent.svelte

@@ -0,0 +1,179 @@
+<!--
+  UserComponent — renders a user-authored Svelte component published to the
+  Vibes Platform component registry.
+
+  Fetches the component manifest, dynamically imports the compiled ES module,
+  and mounts it into a container div with the host-supplied props.
+
+  Props:
+    - id:       Component record ID (uuid) to load
+    - version:  'latest' (default) or an explicit version string
+    - props:    string-keyed props passed through to the mounted component
+    - origin:   The platform origin, supplied by the host from its own
+                configuration (defaults to this page's origin; kit reads no env)
+    - fallback: Optional snippet to render while loading
+    - errorFallback: Optional snippet to render on error, receives `error` prop
+-->
+<script lang="ts">import { onMount, onDestroy } from "svelte";
+import * as z from "zod/v4";
+import { kitLogger } from "../../kit-logger";
+import { settle, settleNow } from "../../attempt.js";
+import { failureClass } from "../../failure-class.js";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger("vibeskit-user-component");
+let { id, version = "latest", props = {}, origin, fallback, errorFallback } = $props();
+/** Each export is checked to be callable before it is used; signatures are the bundle contract. */
+const callableSchema = z.function();
+const bundleComponentSchema = z.custom((value) => callableSchema.safeParse(value).success);
+const bundleMountSchema = z.custom((value) => callableSchema.safeParse(value).success);
+const bundleUnmountSchema = z.custom((value) => callableSchema.safeParse(value).success);
+/** The manifest response: the published version (if any) and the display manifest. */
+const manifestResponseSchema = z.looseObject({
+	publishedVersion: z.string().nullish(),
+	manifest: z.looseObject({ title: z.string().optional() }).nullish()
+});
+let container = $state();
+let loading = $state(true);
+let error = $state(null);
+let manifest = $state(null);
+let instance = null;
+let bundleUnmount = null;
+/** One URL path segment: no separator and no dot-segment (`.` or `..`). */
+const PATH_SEGMENT = /^(?!\.{1,2}$)[A-Za-z0-9._-]+$/;
+/**
+* The platform origin the host supplies (from its own runtime configuration);
+* otherwise this page's origin. Kit reads no environment. Called only from the
+* mounted loader, so the page location exists.
+*/
+function resolveOrigin() {
+	if (origin) return origin.replace(/\/$/, "");
+	return window.location.origin;
+}
+async function mountBundle() {
+	// The id and version become URL path segments: a separator or dot-segment
+	// would reach another same-origin path, so either is refused before any request.
+	if (!PATH_SEGMENT.test(id)) {
+		throw new Error("Component id is not a single URL path segment");
+	}
+	const base = resolveOrigin();
+	const componentPath = `${base}/components/${id}`;
+	const metaUrl = `${componentPath}/manifest.json`;
+	// Same-origin uses cookies automatically; cross-origin fetch sends no
+	// credentials so the platform can serve public components with
+	// Access-Control-Allow-Origin: * (which is incompatible with
+	// credentialed requests).
+	const sameOrigin = new URL(metaUrl, window.location.href).origin === window.location.origin;
+	const metaRes = await fetch(metaUrl, { credentials: sameOrigin ? "include" : "omit" });
+	if (!metaRes.ok) {
+		throw new Error(`Failed to load component metadata (HTTP ${metaRes.status})`);
+	}
+	const metaBody = manifestResponseSchema.safeParse(await metaRes.json());
+	if (!metaBody.success) {
+		throw new Error("Component metadata response is malformed");
+	}
+	const meta = metaBody.data;
+	const v = version === "latest" ? meta.publishedVersion : version;
+	if (!v) {
+		throw new Error("Component has no published version yet");
+	}
+	if (!PATH_SEGMENT.test(v)) {
+		throw new Error("Component version is not a single URL path segment");
+	}
+	manifest = meta.manifest ?? null;
+	const bundleUrl = `${componentPath}/${v}.js`;
+	// SAFETY: dynamic import function constructed from async function prototype to load runtime user-authored component bundles.
+	const loadBundle = Object.getPrototypeOf(async () => {}).constructor("url", "return import(url)");
+	const bundle = await loadBundle(bundleUrl);
+	const component = bundleComponentSchema.safeParse(bundle.default);
+	if (!component.success) {
+		throw new Error("Component bundle did not export a default Svelte component");
+	}
+	const mount = bundleMountSchema.safeParse(bundle.__mount);
+	const unmount = bundleUnmountSchema.safeParse(bundle.__unmount);
+	if (!mount.success || !unmount.success) {
+		throw new Error("Component bundle is missing __mount/__unmount exports — recompile against the current platform.");
+	}
+	if (!container) {
+		throw new Error("Container element not yet mounted");
+	}
+	instance = mount.data(component.data, {
+		target: container,
+		props
+	});
+	bundleUnmount = unmount.data;
+}
+async function load() {
+	loading = true;
+	error = null;
+	const loaded = await settle(mountBundle);
+	if (!loaded.ok) {
+		// The component's own refusals carry safe, authored text; the log carries the class only.
+		error = loaded.error instanceof Error ? loaded.error.message : "A non-Error value was thrown";
+		logger.warn("Component failed to load", { reason: failureClass(loaded.error) });
+	}
+	loading = false;
+}
+onMount(() => {
+	load();
+});
+onDestroy(() => {
+	if (instance && bundleUnmount) {
+		const mounted = instance;
+		const unmount = bundleUnmount;
+		// Teardown continues past a failing unmount; the failure is reported by class only.
+		const unmounted = settleNow(() => unmount(mounted));
+		if (!unmounted.ok) {
+			logger.warn("Component unmount failed", { reason: failureClass(unmounted.error) });
+		}
+	}
+	instance = null;
+	bundleUnmount = null;
+});
+</script>
+
+<div class="user-component-host" data-component-id={id} data-component-version={version}>
+	{#if loading}
+		{#if fallback}
+			{@render fallback()}
+		{:else}
+			<div class="user-component-loading">Loading component…</div>
+		{/if}
+	{:else if error}
+		{#if errorFallback}
+			{@render errorFallback({ error })}
+		{:else}
+			<div class="user-component-error" role="alert">
+				<strong>Component failed to load.</strong>
+				<p>{error}</p>
+			</div>
+		{/if}
+	{/if}
+	<div bind:this={container} class="user-component-slot" class:hidden={loading || !!error}></div>
+</div>
+
+<style>
+	.user-component-host {
+		display: contents;
+	}
+	.user-component-loading {
+		padding: 16px;
+		color: var(--muted-foreground, #888);
+		font-size: 13px;
+	}
+	.user-component-error {
+		padding: 12px 16px;
+		border: 1px solid color-mix(in srgb, var(--destructive, #ef4444) 40%, transparent);
+		border-radius: 8px;
+		background: color-mix(in srgb, var(--destructive, #ef4444) 10%, transparent);
+		color: var(--destructive, #b91c1c);
+		font-size: 13px;
+	}
+	.user-component-error p {
+		margin: 4px 0 0;
+		font-size: 12px;
+		opacity: 0.85;
+	}
+	.user-component-slot.hidden {
+		display: none;
+	}
+</style>

package/dist/lib/components/user-component/UserComponent.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+/** Props handed to the mounted component; its bundle owns what it accepts (callbacks included). */
+type MountProps = object;
+interface Props {
+    id: string;
+    version?: string;
+    props?: MountProps;
+    origin?: string;
+    fallback?: Snippet;
+    errorFallback?: Snippet<[{
+        error: string;
+    }]>;
+}
+declare const UserComponent: import("svelte").Component<Props, {}, "">;
+type UserComponent = ReturnType<typeof UserComponent>;
+export default UserComponent;

package/dist/lib/components/user-component/index.d.ts

@@ -0,0 +1 @@
+export { default as UserComponent } from './UserComponent.svelte';

package/dist/lib/components/user-component/index.js

@@ -0,0 +1 @@
+export { default as UserComponent } from './UserComponent.svelte';

package/dist/lib/components/viz/MultiSeriesChart.svelte

@@ -0,0 +1,428 @@
+<!-- Neutral SVG series renderer. Callers supply measured values and their colors. -->
+<script lang="ts">let { series, width = 480, height = 160, label = "Multi-series chart", showGrid = false, showPoints = false, showAxes = false, showData = true, includeData = true, xLabel = "", yLabel = "" } = $props();
+const instanceId = $props.id();
+const descriptionId = `${instanceId}-axis-description`;
+const legend = $derived.by(() => {
+	const entries = new Map();
+	const colorCounts = new Map();
+	const patterns = [
+		undefined,
+		"6 3",
+		"2 3",
+		"8 3 2 3",
+		"10 3 2 3 2 3"
+	];
+	for (const item of series) {
+		const key = JSON.stringify([item.label, item.color]);
+		if (entries.has(key)) continue;
+		const count = colorCounts.get(item.color) ?? 0;
+		colorCounts.set(item.color, count + 1);
+		const dash = count < patterns.length ? patterns[count] : `${(count + 1) * 2} 3 2 3`;
+		entries.set(key, {
+			label: item.label,
+			color: item.color,
+			dash
+		});
+	}
+	return entries;
+});
+function toNumber(t) {
+	return t instanceof Date ? t.getTime() : t;
+}
+function valid(point) {
+	return Number.isFinite(toNumber(point.t)) && Number.isFinite(point.v);
+}
+const extents = $derived.by(() => {
+	let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+	let minTime, maxTime;
+	for (const item of series) {
+		for (const point of item.data) {
+			if (!valid(point)) continue;
+			const x = toNumber(point.t);
+			if (x < minX) {
+				minX = x;
+				minTime = point.t;
+			}
+			if (x > maxX) {
+				maxX = x;
+				maxTime = point.t;
+			}
+			minY = Math.min(minY, point.v);
+			maxY = Math.max(maxY, point.v);
+		}
+	}
+	return Number.isFinite(minX) ? {
+		minX,
+		maxX,
+		minY,
+		maxY,
+		minTime,
+		maxTime
+	} : null;
+});
+// Series and points carry no ids of their own; a row's identity is its
+// series index and its point's index within that series.
+const rows = $derived(includeData ? series.flatMap((item, seriesIndex) => item.data.map((point, pointIndex) => ({
+	key: `${seriesIndex}:${pointIndex}`,
+	label: item.label,
+	point
+}))) : []);
+const pageSize = 50;
+let page = $state(0);
+const pageCount = $derived(Math.max(1, Math.ceil(rows.length / pageSize)));
+const currentPage = $derived(Math.min(page, pageCount - 1));
+$effect(() => {
+	if (page >= pageCount) page = pageCount - 1;
+});
+const visibleRows = $derived(rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize));
+const minTime = $derived(extents?.minTime);
+const maxTime = $derived(extents?.maxTime);
+const padding = 4;
+let plotWidth = $state(0);
+let cursor = $state(null);
+const selected = $derived.by(() => {
+	if (!cursor) return null;
+	const item = series[cursor.seriesIndex];
+	const point = item?.data[cursor.pointIndex];
+	return point && valid(point) ? {
+		item,
+		point
+	} : null;
+});
+function findObservation(from, direction) {
+	let seriesIndex = from?.seriesIndex ?? (direction === 1 ? 0 : series.length - 1);
+	let pointIndex = from?.pointIndex ?? (direction === 1 ? -1 : series[seriesIndex]?.data.length ?? 0);
+	while (seriesIndex >= 0 && seriesIndex < series.length) {
+		const data = series[seriesIndex].data;
+		for (pointIndex += direction; pointIndex >= 0 && pointIndex < data.length; pointIndex += direction) {
+			if (valid(data[pointIndex])) return {
+				seriesIndex,
+				pointIndex
+			};
+		}
+		seriesIndex += direction;
+		pointIndex = direction === 1 ? -1 : series[seriesIndex]?.data.length ?? 0;
+	}
+	return null;
+}
+const previousObservation = $derived(findObservation(selected ? cursor : null, -1));
+const nextObservation = $derived(findObservation(selected ? cursor : null, 1));
+function position(point, index = -1) {
+	const { minX, maxX, minY, maxY } = extents;
+	const x = minX === maxX ? .5 : (toNumber(point.t) - minX) / (maxX - minX);
+	const y = minY === maxY ? .5 : (point.v - minY) / (maxY - minY);
+	return {
+		index,
+		x: padding + x * (width - padding * 2),
+		y: padding + (1 - y) * (height - padding * 2)
+	};
+}
+function segments(data) {
+	const result = [];
+	let segment = [];
+	const close = () => {
+		if (segment.length) result.push({
+			start: segment[0].index,
+			points: segment
+		});
+		segment = [];
+	};
+	data.forEach((point, index) => {
+		if (valid(point)) segment.push(position(point, index));
+		else close();
+	});
+	close();
+	return result;
+}
+function formatValue(value) {
+	return String(value);
+}
+function formatTime(t) {
+	if (t instanceof Date) return Number.isFinite(t.getTime()) ? t.toISOString() : "Missing";
+	return Number.isFinite(t) ? String(t) : "Missing";
+}
+export {};
+</script>
+
+{#if extents}
+	{#if legend.size}
+		<ul class="legend" aria-label="Series legend">
+			{#each [...legend] as [key, item] (key)}
+				<li>
+					<svg class="legend-swatch" viewBox="0 0 24 4" aria-hidden="true"
+						><line
+							x1="0"
+							y1="2"
+							x2="24"
+							y2="2"
+							stroke={item.color}
+							stroke-width="2"
+							stroke-dasharray={item.dash}
+						/></svg
+					><span>{item.label}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	{#if showAxes && yLabel}<div class="axis-unit" aria-hidden="true">{yLabel}</div>{/if}
+	<div class:with-axes={showAxes}>
+		{#if showAxes}<div class="axis-y" aria-hidden="true">
+				<span>{formatValue(extents.maxY)}</span><span
+					>{formatValue((extents.maxY + extents.minY) / 2)}</span
+				><span>{formatValue(extents.minY)}</span>
+			</div>{/if}
+		<div class="plot" bind:clientWidth={plotWidth}>
+			<svg
+				class="w-full"
+				{width}
+				{height}
+				viewBox="0 0 {width} {height}"
+				preserveAspectRatio="none"
+				role="img"
+				aria-label={label}
+				aria-describedby={xLabel || yLabel ? descriptionId : undefined}
+			>
+				{#if xLabel || yLabel}<desc id={descriptionId}
+						>{xLabel ? `Horizontal axis: ${xLabel}.` : ''}
+						{yLabel ? `Vertical axis: ${yLabel}.` : ''}</desc
+					>{/if}
+				{#if showGrid}
+					{#each [0.25, 0.5, 0.75] as fraction (fraction)}
+						<line
+							x1={padding}
+							x2={width - padding}
+							y1={padding + fraction * (height - padding * 2)}
+							y2={padding + fraction * (height - padding * 2)}
+							stroke="var(--border, currentColor)"
+							stroke-opacity="0.6"
+							vector-effect="non-scaling-stroke"
+						/>
+					{/each}
+				{/if}
+				{#each series as item, i (i)}
+					{@const dash = legend.get(JSON.stringify([item.label, item.color]))?.dash}
+					{#each segments(item.data) as segment (segment.start)}
+						{#if segment.points.length > 1}
+							<polyline
+								fill="none"
+								stroke={item.color}
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-dasharray={dash}
+								vector-effect="non-scaling-stroke"
+								points={segment.points.map((point) => `${point.x},${point.y}`).join(' ')}
+							/>
+						{/if}
+						{#if showPoints || segment.points.length === 1}
+							{#each segment.points as point (point.index)}
+								<ellipse
+									cx={point.x}
+									cy={point.y}
+									rx={(2.5 * width) / (plotWidth || width)}
+									ry="2.5"
+									fill={item.color}
+								/>
+							{/each}
+						{/if}
+					{/each}
+				{/each}
+				{#if selected}
+					{@const point = position(selected.point)}
+					<ellipse
+						class="inspected-point"
+						cx={point.x}
+						cy={point.y}
+						rx={(4 * width) / (plotWidth || width)}
+						ry="4"
+						fill={selected.item.color}
+						stroke="var(--background, white)"
+						stroke-width="1.5"
+						vector-effect="non-scaling-stroke"
+						aria-hidden="true"
+					/>
+				{/if}
+			</svg>
+			{#if showAxes}<div class="axis-x" aria-hidden="true">
+					<span>{minTime === undefined ? '' : formatTime(minTime)}</span>{#if xLabel}<span
+							>{xLabel}</span
+						>{/if}<span>{maxTime === undefined ? '' : formatTime(maxTime)}</span>
+				</div>{/if}
+		</div>
+	</div>
+{:else}
+	<div class="text-xs text-muted-foreground">No data</div>
+{/if}
+{#if includeData && rows.length}
+	<details class:sr-only={!showData} open={!showData}>
+		<summary>View {label} data</summary>
+		<table>
+			<caption>{label}: source data</caption>
+			<thead
+				><tr
+					><th scope="col">Series</th><th scope="col">{xLabel || 'Time or bucket'}</th><th
+						scope="col">{yLabel ? `Value (${yLabel})` : 'Value'}</th
+					></tr
+				></thead
+			>
+			<tbody>
+				{#each visibleRows as row (row.key)}
+					<tr
+						><th scope="row">{row.label}</th><td>{formatTime(row.point.t)}</td><td
+							>{Number.isFinite(row.point.v) ? row.point.v : 'Missing'}</td
+						></tr
+					>
+				{/each}
+			</tbody>
+		</table>
+		{#if pageCount > 1}<nav aria-label="Chart data pages">
+				<button type="button" disabled={currentPage === 0} onclick={() => (page = currentPage - 1)}
+					>Previous</button
+				><span aria-live="polite">Page {currentPage + 1} of {pageCount}</span><button
+					type="button"
+					disabled={currentPage >= pageCount - 1}
+					onclick={() => (page = currentPage + 1)}>Next</button
+				>
+			</nav>{/if}
+	</details>
+{/if}
+
+{#if extents}
+	<div class="inspection" role="group" aria-label="Observation inspection">
+		<button
+			type="button"
+			aria-label="Previous observation"
+			disabled={!previousObservation}
+			onclick={() => (cursor = previousObservation)}>Previous</button
+		>
+		<button
+			type="button"
+			aria-label="Next observation"
+			disabled={!nextObservation}
+			onclick={() => (cursor = nextObservation)}>Next</button
+		>
+		<p role="status">
+			{#if selected}{selected.item.label} · {formatTime(selected.point.t)} · {formatValue(
+					selected.point.v
+				)}{yLabel ? ` ${yLabel}` : ''}{:else}Select an observation to inspect.{/if}
+		</p>
+	</div>
+{/if}
+
+<style>
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.4rem 1rem;
+		margin: 0 0 0.65rem;
+		padding: 0;
+		list-style: none;
+		color: var(--foreground);
+		font-size: 0.75rem;
+	}
+	.legend li {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.legend-swatch {
+		flex: none;
+		width: 1.5rem;
+		height: 0.25rem;
+	}
+	.with-axes {
+		display: flex;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+	.plot {
+		min-width: 0;
+		flex: 1;
+	}
+	.plot svg {
+		display: block;
+		width: 100%;
+	}
+	.axis-y {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		text-align: right;
+		padding-bottom: 1.5rem;
+	}
+	.axis-x {
+		display: flex;
+		justify-content: space-between;
+		gap: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+	.axis-x span {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.axis-x span:last-child {
+		text-align: right;
+	}
+	.axis-unit {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		margin-bottom: 0.25rem;
+	}
+	nav {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-top: 0.75rem;
+	}
+	.inspection {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+	.inspection p {
+		margin: 0;
+		font-size: 0.875rem;
+		color: var(--foreground);
+		overflow-wrap: anywhere;
+	}
+	button {
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		padding: 0.35rem 0.65rem;
+	}
+	button:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+	button:disabled {
+		opacity: 0.5;
+	}
+	details {
+		margin-top: 0.75rem;
+	}
+	summary {
+		cursor: pointer;
+	}
+	summary:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+		font-size: 0.875rem;
+	}
+	th,
+	td {
+		padding: 0.5rem;
+		border-bottom: 1px solid var(--border);
+	}
+</style>

package/dist/lib/components/viz/MultiSeriesChart.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { MultiSeries } from './types.ts';
+interface Props {
+    series: MultiSeries[];
+    width?: number;
+    height?: number;
+    label?: string;
+    showGrid?: boolean;
+    showPoints?: boolean;
+    showAxes?: boolean;
+    showData?: boolean;
+    includeData?: boolean;
+    xLabel?: string;
+    yLabel?: string;
+}
+declare const MultiSeriesChart: import("svelte").Component<Props, {}, "">;
+type MultiSeriesChart = ReturnType<typeof MultiSeriesChart>;
+export default MultiSeriesChart;

package/dist/lib/components/viz/RunStatusBadge.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { Badge } from "../ui/badge";
+import { cn } from "../../utils.js";
+let { status, class: className } = $props();
+const normalizedStatus = $derived(status?.trim().toLowerCase() || "unknown");
+const label = $derived(status?.trim() || "unknown");
+const variant = $derived.by(() => {
+	switch (normalizedStatus) {
+		case "running": return "success";
+		case "paused":
+		case "pending":
+		case "queued": return "warning";
+		case "failed":
+		case "error": return "destructive";
+		case "completed":
+		case "succeeded":
+		case "success": return "info";
+		default: return "secondary";
+	}
+});
+</script>
+
+<Badge {variant} data-status={normalizedStatus} class={cn('tracking-wide uppercase', className)}>
+	{label}
+</Badge>

package/dist/lib/components/viz/RunStatusBadge.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    status: string | null | undefined;
+    class?: string;
+}
+declare const RunStatusBadge: import("svelte").Component<Props, {}, "">;
+type RunStatusBadge = ReturnType<typeof RunStatusBadge>;
+export default RunStatusBadge;