@alliance-droid/status-feedback-system 0.1.0 → 0.1.1

package/dist/api.d.ts

@@ -0,0 +1,57 @@
+/**
+ * API client for communicating with the status-feedback-admin backend.
+ *
+ * Usage:
+ *   import { createStatusClient } from '@alliance-droid/status-feedback-system';
+ *
+ *   const client = createStatusClient({
+ *     apiUrl: 'https://status-admin.yourcompany.com',
+ *     apiKey: 'sf_abc123...',
+ *   });
+ *
+ *   const { systems, incidents } = await client.getStatus();
+ */
+import type { System, Incident, StatusHistoryEntry, Feedback } from './types.js';
+export interface StatusClientConfig {
+    /** Base URL of the status-feedback-admin app */
+    apiUrl: string;
+    /** API key for the project (sf_ prefixed) */
+    apiKey: string;
+    /** Optional custom fetch function (for SSR) */
+    fetch?: typeof globalThis.fetch;
+}
+export interface StatusData {
+    systems: System[];
+    overallStatus: string;
+}
+export interface IncidentData {
+    incidents: Incident[];
+}
+export interface UptimeData {
+    history: Record<string, StatusHistoryEntry[]>;
+}
+export interface StatusClient {
+    /** Get current system statuses */
+    getStatus(): Promise<StatusData>;
+    /** Get incidents (active + recent resolved) */
+    getIncidents(options?: {
+        limit?: number;
+        includeResolved?: boolean;
+    }): Promise<IncidentData>;
+    /** Get uptime history for all systems (90 days) */
+    getUptime(options?: {
+        days?: number;
+    }): Promise<UptimeData>;
+    /** Submit user feedback */
+    submitFeedback(data: {
+        message: string;
+        category?: string;
+        email?: string;
+        pageUrl?: string;
+        metadata?: Record<string, unknown>;
+    }): Promise<Feedback>;
+}
+/**
+ * Create a status API client instance
+ */
+export declare function createStatusClient(config: StatusClientConfig): StatusClient;

package/dist/api.js

@@ -0,0 +1,76 @@
+/**
+ * API client for communicating with the status-feedback-admin backend.
+ *
+ * Usage:
+ *   import { createStatusClient } from '@alliance-droid/status-feedback-system';
+ *
+ *   const client = createStatusClient({
+ *     apiUrl: 'https://status-admin.yourcompany.com',
+ *     apiKey: 'sf_abc123...',
+ *   });
+ *
+ *   const { systems, incidents } = await client.getStatus();
+ */
+/**
+ * Create a status API client instance
+ */
+export function createStatusClient(config) {
+    const { apiUrl, apiKey } = config;
+    const fetchFn = config.fetch ?? globalThis.fetch;
+    const baseUrl = apiUrl.replace(/\/$/, '');
+    async function request(path, options) {
+        const url = `${baseUrl}${path}${path.includes('?') ? '&' : '?'}key=${encodeURIComponent(apiKey)}`;
+        const response = await fetchFn(url, {
+            ...options,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options?.headers,
+            },
+        });
+        if (!response.ok) {
+            const body = await response.text();
+            let message = `API error: ${response.status}`;
+            try {
+                const parsed = JSON.parse(body);
+                if (parsed.error)
+                    message = parsed.error;
+            }
+            catch {
+                // ignore parse errors
+            }
+            throw new Error(message);
+        }
+        const json = (await response.json());
+        if (!json.success) {
+            throw new Error(json.error ?? 'Unknown API error');
+        }
+        return json.data;
+    }
+    return {
+        async getStatus() {
+            return request('/api/status');
+        },
+        async getIncidents(options) {
+            const params = new URLSearchParams();
+            if (options?.limit)
+                params.set('limit', String(options.limit));
+            if (options?.includeResolved !== undefined)
+                params.set('includeResolved', String(options.includeResolved));
+            const qs = params.toString();
+            return request(`/api/incidents${qs ? `?${qs}` : ''}`);
+        },
+        async getUptime(options) {
+            const params = new URLSearchParams();
+            if (options?.days)
+                params.set('days', String(options.days));
+            const qs = params.toString();
+            return request(`/api/uptime${qs ? `?${qs}` : ''}`);
+        },
+        async submitFeedback(data) {
+            return request('/api/feedback', {
+                method: 'POST',
+                body: JSON.stringify(data),
+            });
+        },
+    };
+}

package/dist/components/FeedbackButton.svelte

@@ -3,7 +3,7 @@
 
 	interface Props {
 		apiKey: string;
-		endpoint: string;
+		apiUrl: string;
 		categories?: string[];
 		userEmail?: string;
 		position?: 'bottom-right' | 'bottom-left';
@@ -11,7 +11,7 @@
 
 	let {
 		apiKey,
-		endpoint,
+		apiUrl,
 		categories,
 		userEmail,
 		position = 'bottom-right',
@@ -51,7 +51,7 @@
 			<div class="p-4">
 				<FeedbackForm
 					{apiKey}
-					{endpoint}
+					{apiUrl}
 					{categories}
 					{userEmail}
 					onSuccess={() => {

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

@@ -1,6 +1,6 @@
 interface Props {
     apiKey: string;
-    endpoint: string;
+    apiUrl: string;
     categories?: string[];
     userEmail?: string;
     position?: 'bottom-right' | 'bottom-left';

package/dist/components/FeedbackForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	interface Props {
 		apiKey: string;
-		endpoint: string;
+		apiUrl: string;
 		categories?: string[];
 		userEmail?: string;
 		onSuccess?: () => void;
@@ -10,7 +10,7 @@
 
 	let {
 		apiKey,
-		endpoint,
+		apiUrl,
 		categories = ['Bug', 'Feature Request', 'General'],
 		userEmail,
 		onSuccess,
@@ -32,7 +32,7 @@
 		errorMsg = '';
 
 		try {
-			const res = await fetch(`${endpoint}/feedback`, {
+			const res = await fetch(`${apiUrl.replace(/\/$/, '')}/api/feedback`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',

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

@@ -1,6 +1,6 @@
 interface Props {
     apiKey: string;
-    endpoint: string;
+    apiUrl: string;
     categories?: string[];
     userEmail?: string;
     onSuccess?: () => void;

package/dist/components/StatusBanner.svelte

@@ -1,13 +1,41 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { System, SystemStatus } from '../types.js';
+	import { createStatusClient } from '../api.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
 
 	interface Props {
-		systems: System[];
+		/** Systems data (pass-through mode) */
+		systems?: System[];
+		/** API URL for self-fetching mode */
+		apiUrl?: string;
+		/** API key for self-fetching mode */
+		apiKey?: string;
+		/** Link to full status page */
 		statusUrl?: string;
 	}
 
-	let { systems, statusUrl }: Props = $props();
+	let { systems: systemsProp, apiUrl, apiKey, statusUrl }: Props = $props();
+
+	let systems: System[] = $state(systemsProp ?? []);
+	let loading = $state(!systemsProp && !!apiUrl && !!apiKey);
+
+	onMount(async () => {
+		if (systemsProp || !apiUrl || !apiKey) return;
+		try {
+			const client = createStatusClient({ apiUrl, apiKey });
+			const data = await client.getStatus();
+			systems = data.systems;
+		} catch (err) {
+			console.error('StatusBanner fetch error:', err);
+		} finally {
+			loading = false;
+		}
+	});
+
+	$effect(() => {
+		if (systemsProp) systems = systemsProp;
+	});
 
 	let overallStatus = $derived.by((): SystemStatus => {
 		if (systems.length === 0) return 'operational';
@@ -25,7 +53,12 @@
 	};
 </script>
 
-{#if statusUrl}
+{#if loading}
+	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-tertiary">
+		<div class="h-2 w-2 animate-pulse rounded-full bg-foreground-tertiary"></div>
+		<span>Loading...</span>
+	</div>
+{:else if statusUrl}
 	<a
 		href={statusUrl}
 		class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary transition-colors hover:bg-surface-hover"

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

@@ -1,6 +1,12 @@
 import type { System } from '../types.js';
 interface Props {
-    systems: System[];
+    /** Systems data (pass-through mode) */
+    systems?: System[];
+    /** API URL for self-fetching mode */
+    apiUrl?: string;
+    /** API key for self-fetching mode */
+    apiKey?: string;
+    /** Link to full status page */
     statusUrl?: string;
 }
 declare const StatusBanner: import("svelte").Component<Props, {}, "">;

package/dist/components/StatusPage.svelte

@@ -1,26 +1,81 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
+	import { createStatusClient } from '../api.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
 	import SystemCard from './shared/SystemCard.svelte';
 	import IncidentTimeline from './shared/IncidentTimeline.svelte';
 
 	interface Props {
+		/** Project display name */
 		projectName: string;
-		systems: System[];
-		incidents: Incident[];
-		/** Map of systemId → StatusHistoryEntry[] for uptime bars */
+		/** API URL for fetching data (self-fetching mode) */
+		apiUrl?: string;
+		/** API key for fetching data (self-fetching mode) */
+		apiKey?: string;
+		/** Systems data (pass-through mode — overrides API fetching) */
+		systems?: System[];
+		/** Incidents data (pass-through mode) */
+		incidents?: Incident[];
+		/** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
 		statusHistory?: Record<string, StatusHistoryEntry[]>;
 		showUptime?: boolean;
 	}
 
 	let {
 		projectName,
-		systems,
-		incidents,
-		statusHistory = {},
+		apiUrl,
+		apiKey,
+		systems: systemsProp,
+		incidents: incidentsProp,
+		statusHistory: statusHistoryProp,
 		showUptime = true,
 	}: Props = $props();
 
+	// ── State ──
+	let systems: System[] = $state(systemsProp ?? []);
+	let incidents: Incident[] = $state(incidentsProp ?? []);
+	let statusHistory: Record<string, StatusHistoryEntry[]> = $state(statusHistoryProp ?? {});
+	let loading = $state(!systemsProp);
+	let error = $state('');
+
+	// ── Self-fetching mode ──
+	const usesApi = $derived(!!apiUrl && !!apiKey && !systemsProp);
+
+	onMount(async () => {
+		if (!usesApi) return;
+
+		try {
+			const client = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+
+			const [statusData, incidentData, uptimeData] = await Promise.all([
+				client.getStatus(),
+				client.getIncidents(),
+				client.getUptime(),
+			]);
+
+			systems = statusData.systems;
+			incidents = incidentData.incidents;
+			statusHistory = uptimeData.history;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load status data';
+			console.error('StatusPage fetch error:', err);
+		} finally {
+			loading = false;
+		}
+	});
+
+	// ── Sync props when in pass-through mode ──
+	$effect(() => {
+		if (systemsProp) systems = systemsProp;
+	});
+	$effect(() => {
+		if (incidentsProp) incidents = incidentsProp;
+	});
+	$effect(() => {
+		if (statusHistoryProp) statusHistory = statusHistoryProp;
+	});
+
 	// ── Derived state ──
 
 	let overallStatus = $derived.by((): SystemStatus => {
@@ -65,92 +120,104 @@
 		<h1 class="text-2xl font-semibold text-foreground">{projectName} Status</h1>
 	</div>
 
-	<!-- Overall Status Banner -->
-	<div class="rounded-lg border p-4 text-center {overallBgClasses[overallStatus]}">
-		<div class="flex items-center justify-center gap-2">
-			<StatusIndicator status={overallStatus} size="lg" />
-			<span class="text-lg font-semibold text-foreground">{overallMessages[overallStatus]}</span>
+	{#if loading}
+		<div class="rounded-lg border border-border bg-surface p-12 text-center">
+			<div class="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-foreground-tertiary border-t-primary"></div>
+			<p class="text-sm text-foreground-secondary">Loading status...</p>
 		</div>
-	</div>
-
-	<!-- Systems -->
-	{#if systems.length > 0}
-		<section>
-			<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
-			<div class="space-y-3">
-				{#each systems as system}
-					<SystemCard
-						{system}
-						history={statusHistory[system.id] || []}
-						{showUptime}
-					/>
-				{/each}
+	{:else if error}
+		<div class="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center">
+			<i class="fa-solid fa-circle-exclamation mb-2 text-2xl text-red-500"></i>
+			<p class="text-sm text-red-400">{error}</p>
+		</div>
+	{:else}
+		<!-- Overall Status Banner -->
+		<div class="rounded-lg border p-4 text-center {overallBgClasses[overallStatus]}">
+			<div class="flex items-center justify-center gap-2">
+				<StatusIndicator status={overallStatus} size="lg" />
+				<span class="text-lg font-semibold text-foreground">{overallMessages[overallStatus]}</span>
 			</div>
-		</section>
-	{/if}
+		</div>
 
-	<!-- Active Incidents -->
-	{#if activeIncidents.length > 0}
-		<section>
-			<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
-			<div class="space-y-4">
-				{#each activeIncidents as incident}
-					<div class="rounded-lg border border-border bg-surface p-4">
-						<div class="flex items-start justify-between">
-							<div>
-								<h3 class="font-semibold text-foreground">{incident.title}</h3>
-								<div class="mt-1 flex items-center gap-2 text-xs text-foreground-tertiary">
-									<span class="rounded bg-red-500/10 px-1.5 py-0.5 text-red-500">
-										{incident.severity}
-									</span>
-									<span>{formatDate(incident.createdAt)}</span>
+		<!-- Systems -->
+		{#if systems.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
+				<div class="space-y-3">
+					{#each systems as system}
+						<SystemCard
+							{system}
+							history={statusHistory[system.id] || []}
+							{showUptime}
+						/>
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Active Incidents -->
+		{#if activeIncidents.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
+				<div class="space-y-4">
+					{#each activeIncidents as incident}
+						<div class="rounded-lg border border-border bg-surface p-4">
+							<div class="flex items-start justify-between">
+								<div>
+									<h3 class="font-semibold text-foreground">{incident.title}</h3>
+									<div class="mt-1 flex items-center gap-2 text-xs text-foreground-tertiary">
+										<span class="rounded bg-red-500/10 px-1.5 py-0.5 text-red-500">
+											{incident.severity}
+										</span>
+										<span>{formatDate(incident.createdAt)}</span>
+									</div>
 								</div>
+								<StatusIndicator status={incident.status === 'resolved' ? 'operational' : 'outage'} size="sm" />
 							</div>
-							<StatusIndicator status={incident.status === 'resolved' ? 'operational' : 'outage'} size="sm" />
+							{#if incident.updates && incident.updates.length > 0}
+								<div class="mt-4 border-t border-border pt-4">
+									<IncidentTimeline updates={incident.updates} />
+								</div>
+							{/if}
 						</div>
-						{#if incident.updates && incident.updates.length > 0}
-							<div class="mt-4 border-t border-border pt-4">
-								<IncidentTimeline updates={incident.updates} />
-							</div>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		</section>
-	{/if}
+					{/each}
+				</div>
+			</section>
+		{/if}
 
-	<!-- Resolved Incidents -->
-	{#if recentResolved.length > 0}
-		<section>
-			<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
-			<div class="space-y-4">
-				{#each recentResolved as incident}
-					<div class="rounded-lg border border-border bg-surface p-4">
-						<div class="flex items-start justify-between">
-							<div>
-								<h3 class="font-semibold text-foreground">{incident.title}</h3>
-								<p class="mt-1 text-xs text-foreground-tertiary">
-									Resolved {incident.resolvedAt ? formatDate(incident.resolvedAt) : ''}
-								</p>
+		<!-- Resolved Incidents -->
+		{#if recentResolved.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
+				<div class="space-y-4">
+					{#each recentResolved as incident}
+						<div class="rounded-lg border border-border bg-surface p-4">
+							<div class="flex items-start justify-between">
+								<div>
+									<h3 class="font-semibold text-foreground">{incident.title}</h3>
+									<p class="mt-1 text-xs text-foreground-tertiary">
+										Resolved {incident.resolvedAt ? formatDate(incident.resolvedAt) : ''}
+									</p>
+								</div>
+								<StatusIndicator status="operational" size="sm" />
 							</div>
-							<StatusIndicator status="operational" size="sm" />
+							{#if incident.updates && incident.updates.length > 0}
+								<div class="mt-4 border-t border-border pt-4">
+									<IncidentTimeline updates={incident.updates} />
+								</div>
+							{/if}
 						</div>
-						{#if incident.updates && incident.updates.length > 0}
-							<div class="mt-4 border-t border-border pt-4">
-								<IncidentTimeline updates={incident.updates} />
-							</div>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		</section>
-	{/if}
+					{/each}
+				</div>
+			</section>
+		{/if}
 
-	<!-- No Incidents -->
-	{#if activeIncidents.length === 0 && recentResolved.length === 0}
-		<div class="rounded-lg border border-border bg-surface p-8 text-center">
-			<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
-			<p class="text-sm text-foreground-secondary">No incidents reported</p>
-		</div>
+		<!-- No Incidents -->
+		{#if activeIncidents.length === 0 && recentResolved.length === 0}
+			<div class="rounded-lg border border-border bg-surface p-8 text-center">
+				<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
+				<p class="text-sm text-foreground-secondary">No incidents reported</p>
+			</div>
+		{/if}
 	{/if}
 </div>

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

@@ -1,9 +1,16 @@
 import type { System, Incident, StatusHistoryEntry } from '../types.js';
 interface Props {
+    /** Project display name */
     projectName: string;
-    systems: System[];
-    incidents: Incident[];
-    /** Map of systemId → StatusHistoryEntry[] for uptime bars */
+    /** API URL for fetching data (self-fetching mode) */
+    apiUrl?: string;
+    /** API key for fetching data (self-fetching mode) */
+    apiKey?: string;
+    /** Systems data (pass-through mode — overrides API fetching) */
+    systems?: System[];
+    /** Incidents data (pass-through mode) */
+    incidents?: Incident[];
+    /** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
     statusHistory?: Record<string, StatusHistoryEntry[]>;
     showUptime?: boolean;
 }

package/dist/index.d.ts

@@ -2,17 +2,14 @@
  * @alliance-droid/status-feedback-system
  *
  * Drop-in system status pages and user feedback forms for SvelteKit apps.
+ * All data is fetched from a remote status-feedback-admin backend via API.
  *
- * Client exports (components):
- *   import { StatusPage, FeedbackForm } from '@alliance-droid/status-feedback-system';
- *
- * Server exports:
- *   import { createStatusServer } from '@alliance-droid/status-feedback-system/server';
- *
- * Admin exports:
- *   import { AdminDashboard } from '@alliance-droid/status-feedback-system/admin';
+ * Usage:
+ *   import { StatusPage, FeedbackButton, createStatusClient } from '@alliance-droid/status-feedback-system';
  */
-export type { Project, System, Incident, IncidentUpdate, Feedback, StatusHistoryEntry, SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus, StatusServerConfig, ApiResponse, } from './types.js';
+export type { Project, System, Incident, IncidentUpdate, Feedback, StatusHistoryEntry, SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus, ApiResponse, } from './types.js';
+export { createStatusClient } from './api.js';
+export type { StatusClient, StatusClientConfig, StatusData, IncidentData, UptimeData } from './api.js';
 export { default as StatusPage } from './components/StatusPage.svelte';
 export { default as StatusBanner } from './components/StatusBanner.svelte';
 export { default as FeedbackForm } from './components/FeedbackForm.svelte';

package/dist/index.js

@@ -2,16 +2,13 @@
  * @alliance-droid/status-feedback-system
  *
  * Drop-in system status pages and user feedback forms for SvelteKit apps.
+ * All data is fetched from a remote status-feedback-admin backend via API.
  *
- * Client exports (components):
- *   import { StatusPage, FeedbackForm } from '@alliance-droid/status-feedback-system';
- *
- * Server exports:
- *   import { createStatusServer } from '@alliance-droid/status-feedback-system/server';
- *
- * Admin exports:
- *   import { AdminDashboard } from '@alliance-droid/status-feedback-system/admin';
+ * Usage:
+ *   import { StatusPage, FeedbackButton, createStatusClient } from '@alliance-droid/status-feedback-system';
  */
+// ── API Client ──
+export { createStatusClient } from './api.js';
 // ── Client Components ──
 export { default as StatusPage } from './components/StatusPage.svelte';
 export { default as StatusBanner } from './components/StatusBanner.svelte';

package/dist/types.d.ts

@@ -8,7 +8,6 @@ export type FeedbackStatus = 'new' | 'reviewed' | 'resolved' | 'archived';
 export interface Project {
     id: string;
     name: string;
-    apiKey: string;
     description: string | null;
     allowedOrigins: string[];
     createdAt: number;
@@ -61,11 +60,6 @@ export interface StatusHistoryEntry {
     status: SystemStatus;
     changedAt: number;
 }
-export interface StatusServerConfig {
-    database: {
-        connectionString: string;
-    };
-}
 export interface ApiResponse<T = unknown> {
     success: boolean;
     data?: T;