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

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

@@ -0,0 +1,19 @@
+interface Props {
+    apiUrl: string;
+    apiKey: string;
+    /** Category labels and icons — order determines sidebar order */
+    categoryConfig?: Record<string, {
+        label?: string;
+        icon?: string;
+        description?: string;
+    }>;
+    /** Title shown at the top */
+    title?: string;
+    /** Show the submit form inline */
+    showSubmit?: boolean;
+    /** Available categories for the submit form */
+    submitCategories?: string[];
+}
+declare const FeedbackBoard: import("svelte").Component<Props, {}, "">;
+type FeedbackBoard = ReturnType<typeof FeedbackBoard>;
+export default FeedbackBoard;

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,20 +2,18 @@
  * @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, FeedbackResponse, FeedbackVisibility, StatusHistoryEntry, SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus, ApiResponse, } from './types.js';
+export { createStatusClient } from './api.js';
+export type { StatusClient, StatusClientConfig, StatusData, IncidentData, UptimeData, BoardData, BoardItem, BoardCategory } 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';
+export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
 export { default as StatusIndicator } from './components/shared/StatusIndicator.svelte';
 export { default as UptimeBar } from './components/shared/UptimeBar.svelte';

package/dist/index.js

@@ -2,20 +2,18 @@
  * @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';
 export { default as FeedbackForm } from './components/FeedbackForm.svelte';
+export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
 // ── Shared Components ──
 export { default as StatusIndicator } from './components/shared/StatusIndicator.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;
@@ -43,9 +42,18 @@ export interface IncidentUpdate {
     message: string;
     createdAt: number;
 }
+export type FeedbackVisibility = 'public' | 'private';
+export interface FeedbackResponse {
+    id: string;
+    feedbackId: string;
+    message: string;
+    author: string | null;
+    createdAt: number;
+}
 export interface Feedback {
     id: string;
     projectId: string;
+    title: string | null;
     category: string | null;
     message: string;
     email: string | null;
@@ -53,6 +61,10 @@ export interface Feedback {
     pageUrl: string | null;
     metadata: Record<string, unknown> | null;
     status: FeedbackStatus;
+    visibility: FeedbackVisibility;
+    votes: number;
+    adminResponse: string | null;
+    responses?: FeedbackResponse[];
     createdAt: number;
 }
 export interface StatusHistoryEntry {
@@ -61,11 +73,6 @@ export interface StatusHistoryEntry {
     status: SystemStatus;
     changedAt: number;
 }
-export interface StatusServerConfig {
-    database: {
-        connectionString: string;
-    };
-}
 export interface ApiResponse<T = unknown> {
     success: boolean;
     data?: T;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",
@@ -9,14 +9,6 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		},
-		"./server": {
-			"types": "./dist/server/index.d.ts",
-			"default": "./dist/server/index.js"
-		},
-		"./admin": {
-			"types": "./dist/components/admin/index.d.ts",
-			"svelte": "./dist/components/admin/index.js"
 		}
 	},
 	"files": [
@@ -37,9 +29,7 @@
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {
-		"@alliance-droid/svelte-component-library": "^0.1.27",
-		"mssql": "^11.0.0",
-		"nanoid": "^5.0.0"
+		"@alliance-droid/svelte-component-library": "^0.1.27"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
@@ -47,7 +37,6 @@
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/vite": "^4.1.0",
-		"@types/mssql": "^9.1.0",
 		"publint": "^0.3.0",
 		"svelte": "^5.48.0",
 		"svelte-check": "^4.3.0",