@vibesdotdev/platform 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/components/IntegrationConnectionCard.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" module>
+	type ActionVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+
+	export type IntegrationConnectionAction = {
+		label: string;
+		icon?: string;
+		href?: string;
+		onclick?: () => void | Promise<void>;
+		variant?: ActionVariant;
+		disabled?: boolean;
+		loading?: boolean;
+	};
+
+	export type IntegrationConnectionDetail = {
+		label: string;
+		value: string;
+	};
+</script>
+
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	type Props = {
+		title: string;
+		description?: string;
+		providerName: string;
+		connected: boolean;
+		connectionCount?: number;
+		canManageConnection?: boolean;
+		providerAdminLabel?: string;
+		connectedMessage?: string;
+		disconnectedAdminMessage?: string;
+		disconnectedMemberMessage?: string;
+		actions?: IntegrationConnectionAction[];
+		details?: IntegrationConnectionDetail[];
+		error?: string | null;
+	};
+
+	let {
+		title,
+		description,
+		providerName,
+		connected,
+		connectionCount = 0,
+		canManageConnection = false,
+		providerAdminLabel = 'provider admin',
+		connectedMessage = 'Connected for this organization.',
+		disconnectedAdminMessage = `Connect with a ${providerAdminLabel} account to enable this integration for the organization.`,
+		disconnectedMemberMessage = `Ask an organization admin with ${providerAdminLabel} access to connect this integration.`,
+		actions = [],
+		details = [],
+		error = null
+	}: Props = $props();
+
+	const statusLabel = $derived(connected ? 'Connected' : 'Not connected');
+	const statusIcon = $derived(connected ? 'lucide:check-circle' : 'lucide:circle-alert');
+	const statusTone = $derived(
+		connected
+			? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
+			: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300'
+	);
+	const helperMessage = $derived(
+		connected ? connectedMessage : canManageConnection ? disconnectedAdminMessage : disconnectedMemberMessage
+	);
+</script>
+
+<Card>
+	<CardHeader>
+		<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+			<div class="min-w-0 space-y-1">
+				<CardTitle class="flex items-center gap-2">
+					<Icon icon="lucide:cable" class="size-5 shrink-0 text-muted-foreground" />
+					<span>{title}</span>
+				</CardTitle>
+				{#if description}
+					<CardDescription>{description}</CardDescription>
+				{/if}
+			</div>
+			<Badge variant="outline" class="w-fit shrink-0 gap-1.5 {statusTone}">
+				<Icon icon={statusIcon} class="size-3.5" />
+				{statusLabel}
+			</Badge>
+		</div>
+	</CardHeader>
+	<CardContent class="space-y-4">
+		<div class="flex flex-wrap gap-2">
+			<Badge variant="secondary">{providerName}</Badge>
+			{#if connected && connectionCount > 0}
+				<Badge variant="outline">
+					{connectionCount} {connectionCount === 1 ? 'connection' : 'connections'}
+				</Badge>
+			{/if}
+		</div>
+
+		<p class="text-sm text-muted-foreground">{helperMessage}</p>
+
+		{#if details.length > 0}
+			<div class="grid gap-2 text-sm sm:grid-cols-2">
+				{#each details as detail}
+					<div class="rounded-md border px-3 py-2">
+						<p class="text-xs text-muted-foreground">{detail.label}</p>
+						<p class="mt-1 font-medium">{detail.value}</p>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		{#if error}
+			<div class="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm" role="alert">
+				{error}
+			</div>
+		{/if}
+
+		{#if actions.length > 0}
+			<div class="flex flex-wrap gap-2">
+				{#each actions as action}
+					<Button
+						href={action.href}
+						variant={action.variant ?? 'default'}
+						disabled={action.disabled || action.loading}
+						onclick={action.onclick}
+					>
+						<Icon
+							icon={action.loading ? 'lucide:loader-circle' : (action.icon ?? 'lucide:arrow-right')}
+							class="mr-2 size-4 {action.loading ? 'animate-spin' : ''}"
+						/>
+						{action.label}
+					</Button>
+				{/each}
+			</div>
+		{/if}
+	</CardContent>
+</Card>

package/dist/svelte/components/IntegrationConnectionCard.svelte.d.ts

@@ -0,0 +1,33 @@
+type ActionVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+export type IntegrationConnectionAction = {
+    label: string;
+    icon?: string;
+    href?: string;
+    onclick?: () => void | Promise<void>;
+    variant?: ActionVariant;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type IntegrationConnectionDetail = {
+    label: string;
+    value: string;
+};
+type Props = {
+    title: string;
+    description?: string;
+    providerName: string;
+    connected: boolean;
+    connectionCount?: number;
+    canManageConnection?: boolean;
+    providerAdminLabel?: string;
+    connectedMessage?: string;
+    disconnectedAdminMessage?: string;
+    disconnectedMemberMessage?: string;
+    actions?: IntegrationConnectionAction[];
+    details?: IntegrationConnectionDetail[];
+    error?: string | null;
+};
+declare const IntegrationConnectionCard: import("svelte").Component<Props, {}, "">;
+type IntegrationConnectionCard = ReturnType<typeof IntegrationConnectionCard>;
+export default IntegrationConnectionCard;
+//# sourceMappingURL=IntegrationConnectionCard.svelte.d.ts.map

package/dist/svelte/components/IntegrationConnectionCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationConnectionCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/IntegrationConnectionCard.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAeF,KAAK,KAAK,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,OAAO,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAoGH,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/PlatformDeploymentsList.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { platformState, type PlatformDeployment } from '../state.svelte.js';
+	const state = platformState();
+
+	/**
+	 * PlatformDeploymentsList — table of recent platform deployments. Reads
+	 * from `state.deployments`, seeded via `<PlatformLoader>` props or
+	 * the `loadPlatformStatusData()` server loader. When the consuming app
+	 * does not track deployments, the table renders an empty state.
+	 */
+	type Props = {
+		/** Override the visible rows (skips reading from `platformState`). */
+		deployments?: PlatformDeployment[];
+		/** Maximum rows to display. Defaults to 10. */
+		limit?: number;
+		/** Message shown when no deployments are seeded. */
+		emptyLabel?: string;
+	};
+
+	let {
+		deployments,
+		limit = 10,
+		emptyLabel = 'No recent deployments.'
+	}: Props = $props();
+
+	const rows = $derived.by(() => {
+		const source = deployments ?? state.deployments;
+		return source.slice(0, limit);
+	});
+
+	function toneFor(status: PlatformDeployment['status']): string {
+		switch (status) {
+			case 'succeeded':
+				return 'text-emerald-600 dark:text-emerald-400';
+			case 'failed':
+				return 'text-red-600 dark:text-red-400';
+			case 'in_progress':
+				return 'text-blue-600 dark:text-blue-400';
+			case 'rolled_back':
+				return 'text-amber-600 dark:text-amber-400';
+			default:
+				return 'text-zinc-500';
+		}
+	}
+</script>
+
+<div class="platform-deployments-list overflow-x-auto rounded-md border">
+	<table class="w-full text-sm">
+		<thead class="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+			<tr>
+				<th class="px-3 py-2 font-medium">Deployed</th>
+				<th class="px-3 py-2 font-medium">Service</th>
+				<th class="px-3 py-2 font-medium">Version</th>
+				<th class="px-3 py-2 font-medium">Environment</th>
+				<th class="px-3 py-2 font-medium">Status</th>
+				<th class="px-3 py-2 font-medium">By</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if rows.length === 0}
+				<tr>
+					<td colspan="6" class="px-3 py-6 text-center text-sm text-muted-foreground">
+						{emptyLabel}
+					</td>
+				</tr>
+			{:else}
+				{#each rows as row (row.id)}
+					<tr class="border-t">
+						<td class="px-3 py-2 text-muted-foreground">
+							{new Date(row.deployedAt).toLocaleString()}
+						</td>
+						<td class="px-3 py-2 font-medium">{row.service}</td>
+						<td class="px-3 py-2 font-mono text-xs">{row.version}</td>
+						<td class="px-3 py-2 text-muted-foreground">{row.environment}</td>
+						<td class="px-3 py-2 {toneFor(row.status)}">{row.status}</td>
+						<td class="px-3 py-2 text-muted-foreground">{row.deployedBy ?? '—'}</td>
+					</tr>
+					{#if row.notes}
+						<tr class="border-t border-dashed">
+							<td colspan="6" class="px-3 py-1 text-xs text-muted-foreground">{row.notes}</td>
+						</tr>
+					{/if}
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>

package/dist/svelte/components/PlatformDeploymentsList.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type PlatformDeployment } from '../state.svelte.ts';
+/**
+ * PlatformDeploymentsList — table of recent platform deployments. Reads
+ * from `state.deployments`, seeded via `<PlatformLoader>` props or
+ * the `loadPlatformStatusData()` server loader. When the consuming app
+ * does not track deployments, the table renders an empty state.
+ */
+type Props = {
+    /** Override the visible rows (skips reading from `platformState`). */
+    deployments?: PlatformDeployment[];
+    /** Maximum rows to display. Defaults to 10. */
+    limit?: number;
+    /** Message shown when no deployments are seeded. */
+    emptyLabel?: string;
+};
+declare const PlatformDeploymentsList: import("svelte").Component<Props, {}, "">;
+type PlatformDeploymentsList = ReturnType<typeof PlatformDeploymentsList>;
+export default PlatformDeploymentsList;
+//# sourceMappingURL=PlatformDeploymentsList.svelte.d.ts.map

package/dist/svelte/components/PlatformDeploymentsList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformDeploymentsList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformDeploymentsList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG3E;;;;;GAKG;AACH,KAAK,KAAK,GAAG;IACZ,sEAAsE;IACtE,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6EH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/PlatformLoader.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { settle } from '@vibesdotdev/kernel';
+	import { platformState, type PlatformStateInitOptions } from '../state.svelte.js';
+
+	type Props = Omit<PlatformStateInitOptions, 'runtime'>;
+	let props: Props = $props();
+	const runtimeStore = getRuntimeSvelteContext();
+	const state = platformState();
+
+	// Seed synchronously for SSR and the first hydrated render.
+	untrack(() => state.seedInitial(props));
+	$effect(() => {
+		const runtime = runtimeStore.runtime;
+		const status = runtimeStore.status;
+		const seed = { initialStatus: props.initialStatus, initialDeployments: props.initialDeployments, skipFetch: props.skipFetch };
+		untrack(() => {
+			state.bind(runtime);
+			state.seedInitial(seed);
+		});
+		let active = true;
+		if (runtime) {
+			untrack(() => { void state.init({ runtime, ...seed }); });
+		} else if (status !== 'error') {
+			void settle(() => runtimeStore.load()).then((outcome) => {
+				if (active && !outcome.ok && runtimeStore.status === 'error' && runtimeStore.error) {
+					state.recordFailure(runtimeStore.error);
+				}
+			});
+		} else if (runtimeStore.error) {
+			state.recordFailure(runtimeStore.error);
+		}
+		return () => { active = false; };
+	});
+</script>

package/dist/svelte/components/PlatformLoader.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type PlatformStateInitOptions } from '../state.svelte.ts';
+type Props = Omit<PlatformStateInitOptions, 'runtime'>;
+declare const PlatformLoader: import("svelte").Component<Props, {}, "">;
+type PlatformLoader = ReturnType<typeof PlatformLoader>;
+export default PlatformLoader;
+//# sourceMappingURL=PlatformLoader.svelte.d.ts.map

package/dist/svelte/components/PlatformLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformLoader.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;AAuCxD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/PlatformProvider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { providePlatformState } from '../state.svelte.js';
+
+	let { children }: { children: Snippet } = $props();
+	providePlatformState();
+</script>
+
+{@render children()}

package/dist/svelte/components/PlatformProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const PlatformProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlatformProvider = ReturnType<typeof PlatformProvider>;
+export default PlatformProvider;
+//# sourceMappingURL=PlatformProvider.svelte.d.ts.map

package/dist/svelte/components/PlatformProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAahD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/PlatformServiceList.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { platformState, type PlatformService } from '../state.svelte.js';
+	const state = platformState();
+
+	/**
+	 * PlatformServiceList — table of platform services and their status.
+	 * Reads from the context projection. Pure presentation; mount
+	 * `<PlatformLoader />` beside it inside a common `<PlatformProvider>`.
+	 */
+	type Props = {
+		/** Filter to services in this category (defaults to all). */
+		category?: PlatformService['category'];
+		/** Only show services that are NOT healthy. */
+		onlyUnhealthy?: boolean;
+		/** Override the visible rows (skips reading from `platformState`). */
+		services?: PlatformService[];
+		/** Message shown when no services match the filter. */
+		emptyLabel?: string;
+	};
+
+	let {
+		category,
+		onlyUnhealthy = false,
+		services,
+		emptyLabel = 'No services reported.'
+	}: Props = $props();
+
+	const rows = $derived.by(() => {
+		const source = services ?? state.services;
+		return source.filter((svc) => {
+			if (category && svc.category !== category) return false;
+			if (onlyUnhealthy && svc.status === 'healthy') return false;
+			return true;
+		});
+	});
+
+	function toneFor(status: PlatformService['status']): string {
+		switch (status) {
+			case 'healthy':
+				return 'text-emerald-600 dark:text-emerald-400';
+			case 'degraded':
+				return 'text-amber-600 dark:text-amber-400';
+			case 'down':
+				return 'text-red-600 dark:text-red-400';
+			case 'inactive':
+				return 'text-zinc-500';
+			case 'pending':
+				return 'text-blue-600 dark:text-blue-400';
+			default:
+				return 'text-zinc-500';
+		}
+	}
+</script>
+
+<div class="platform-service-list overflow-x-auto rounded-md border">
+	<table class="w-full text-sm">
+		<thead class="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+			<tr>
+				<th class="px-3 py-2 font-medium">Service</th>
+				<th class="px-3 py-2 font-medium">Category</th>
+				<th class="px-3 py-2 font-medium">Type</th>
+				<th class="px-3 py-2 font-medium">Status</th>
+				<th class="px-3 py-2 font-medium">Last checked</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if rows.length === 0}
+				<tr>
+					<td colspan="5" class="px-3 py-6 text-center text-sm text-muted-foreground">
+						{emptyLabel}
+					</td>
+				</tr>
+			{:else}
+				{#each rows as row (row.id)}
+					<tr class="border-t">
+						<td class="px-3 py-2 font-medium">{row.name}</td>
+						<td class="px-3 py-2 text-muted-foreground">{row.category}</td>
+						<td class="px-3 py-2 text-muted-foreground">{row.type}</td>
+						<td class="px-3 py-2 {toneFor(row.status)}">{row.status}</td>
+						<td class="px-3 py-2 text-muted-foreground">
+							{row.lastCheckedAt ? new Date(row.lastCheckedAt).toLocaleString() : '—'}
+						</td>
+					</tr>
+					{#if row.lastError}
+						<tr class="border-t border-dashed">
+							<td colspan="5" class="px-3 py-1 text-xs text-red-600 dark:text-red-400">
+								{row.lastError}
+							</td>
+						</tr>
+					{/if}
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>

package/dist/svelte/components/PlatformServiceList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type PlatformService } from '../state.svelte.ts';
+/**
+ * PlatformServiceList — table of platform services and their status.
+ * Reads from the context projection. Pure presentation; mount
+ * `<PlatformLoader />` beside it inside a common `<PlatformProvider>`.
+ */
+type Props = {
+    /** Filter to services in this category (defaults to all). */
+    category?: PlatformService['category'];
+    /** Only show services that are NOT healthy. */
+    onlyUnhealthy?: boolean;
+    /** Override the visible rows (skips reading from `platformState`). */
+    services?: PlatformService[];
+    /** Message shown when no services match the filter. */
+    emptyLabel?: string;
+};
+declare const PlatformServiceList: import("svelte").Component<Props, {}, "">;
+type PlatformServiceList = ReturnType<typeof PlatformServiceList>;
+export default PlatformServiceList;
+//# sourceMappingURL=PlatformServiceList.svelte.d.ts.map

package/dist/svelte/components/PlatformServiceList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformServiceList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformServiceList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGxE;;;;GAIG;AACH,KAAK,KAAK,GAAG;IACZ,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAoFH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/PlatformStatusBadge.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { platformState, type PlatformOverallStatus } from '../state.svelte.js';
+	const state = platformState();
+
+	/**
+	 * PlatformStatusBadge — compact one-liner showing overall platform status.
+	 * Reads from the context projection. Renders a small pill with a
+	 * status dot suitable for an admin shell header.
+	 *
+	 * Click handler is optional; default behaviour is no-op (the consumer wraps
+	 * the badge in a link if they want navigation).
+	 */
+	type Props = {
+		/** When true, hide the status text and render only the dot + count. */
+		compact?: boolean;
+		/** Optional click handler (e.g. navigate to status page). */
+		onclick?: () => void;
+		/** Optional href; when provided, renders as an anchor. */
+		href?: string;
+	};
+
+	let { compact = false, onclick, href }: Props = $props();
+
+	const status = $derived<PlatformOverallStatus>(state.status);
+	const unhealthyCount = $derived(state.unhealthyServices.length);
+	const loading = $derived(state.loading);
+
+	const label = $derived.by(() => {
+		if (loading && status === 'unknown') return 'Checking…';
+		switch (status) {
+			case 'operational':
+				return 'Operational';
+			case 'degraded':
+				return 'Degraded';
+			case 'down':
+				return 'Down';
+			default:
+				return 'Status unknown';
+		}
+	});
+
+	const tone = $derived.by(() => {
+		switch (status) {
+			case 'operational':
+				return 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300';
+			case 'degraded':
+				return 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300';
+			case 'down':
+				return 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300';
+			default:
+				return 'border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300';
+		}
+	});
+
+	const dotTone = $derived.by(() => {
+		switch (status) {
+			case 'operational':
+				return 'bg-emerald-500';
+			case 'degraded':
+				return 'bg-amber-500';
+			case 'down':
+				return 'bg-red-500';
+			default:
+				return 'bg-zinc-400';
+		}
+	});
+
+	const titleText = $derived(
+		unhealthyCount > 0
+			? `${label} — ${unhealthyCount} service${unhealthyCount === 1 ? '' : 's'} unhealthy`
+			: label
+	);
+	const accessibleLabel = $derived(`Platform status: ${titleText}`);
+</script>
+
+{#if href}
+	<a
+		class="platform-status-badge inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium {tone}"
+		{href}
+		title={titleText}
+		aria-label={accessibleLabel}
+	>
+		<span class="status-dot inline-block h-2 w-2 rounded-full {dotTone}" aria-hidden="true"></span>
+		{#if !compact}
+			<span>{label}</span>
+		{/if}
+		{#if unhealthyCount > 0}
+			<span class="ml-0.5 rounded-full bg-white/40 px-1 text-[10px] tabular-nums dark:bg-black/40"
+				>{unhealthyCount}</span
+			>
+		{/if}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		class="platform-status-badge inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium {tone}"
+		title={titleText}
+		aria-label={accessibleLabel}
+		{onclick}
+	>
+		<span class="status-dot inline-block h-2 w-2 rounded-full {dotTone}" aria-hidden="true"></span>
+		{#if !compact}
+			<span>{label}</span>
+		{/if}
+		{#if unhealthyCount > 0}
+			<span class="ml-0.5 rounded-full bg-white/40 px-1 text-[10px] tabular-nums dark:bg-black/40"
+				>{unhealthyCount}</span
+			>
+		{/if}
+	</button>
+{:else}
+	<span
+		class="platform-status-badge inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium {tone}"
+		title={titleText}
+		role="status"
+		aria-live="polite"
+		aria-label={accessibleLabel}
+	>
+		<span class="status-dot inline-block h-2 w-2 rounded-full {dotTone}" aria-hidden="true"></span>
+		{#if !compact}
+			<span>{label}</span>
+		{/if}
+		{#if unhealthyCount > 0}
+			<span class="ml-0.5 rounded-full bg-white/40 px-1 text-[10px] tabular-nums dark:bg-black/40"
+				>{unhealthyCount}</span
+			>
+		{/if}
+	</span>
+{/if}
+
+<style>
+	span.platform-status-badge {
+		cursor: default;
+	}
+</style>

package/dist/svelte/components/PlatformStatusBadge.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * PlatformStatusBadge — compact one-liner showing overall platform status.
+ * Reads from the context projection. Renders a small pill with a
+ * status dot suitable for an admin shell header.
+ *
+ * Click handler is optional; default behaviour is no-op (the consumer wraps
+ * the badge in a link if they want navigation).
+ */
+type Props = {
+    /** When true, hide the status text and render only the dot + count. */
+    compact?: boolean;
+    /** Optional click handler (e.g. navigate to status page). */
+    onclick?: () => void;
+    /** Optional href; when provided, renders as an anchor. */
+    href?: string;
+};
+declare const PlatformStatusBadge: import("svelte").Component<Props, {}, "">;
+type PlatformStatusBadge = ReturnType<typeof PlatformStatusBadge>;
+export default PlatformStatusBadge;
+//# sourceMappingURL=PlatformStatusBadge.svelte.d.ts.map

package/dist/svelte/components/PlatformStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformStatusBadge.svelte.ts"],"names":[],"mappings":"AAMC;;;;;;;GAOG;AACH,KAAK,KAAK,GAAG;IACZ,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAgGH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}