@alliance-droid/status-feedback-system 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+# @alliance-droid/status-feedback-system
+
+Drop-in system status pages and user feedback forms for SvelteKit apps.
+
+## Features
+
+- **Status Page** — Public-facing system health display with uptime bars
+- **Feedback Form** — Users submit bugs, feature requests, general feedback
+- **Admin Dashboard** — Manage projects, systems, incidents, and feedback
+- **API Key Auth** — Multi-project support with scoped API keys
+- **MSSQL** — Auto-migration, all tables prefixed `sf_`
+
+## Quick Start
+
+### Server Setup
+
+```typescript
+// src/lib/server/status.ts
+import { createStatusServer } from '@alliance-droid/status-feedback-system/server';
+
+export const statusServer = createStatusServer({
+  database: { connectionString: env.MSSQL_CONNECTION_STRING }
+});
+
+await statusServer.init();
+```
+
+### API Routes
+
+```typescript
+// src/routes/api/status/[...path]/+server.ts
+import { statusServer } from '$lib/server/status';
+
+const handlers = statusServer.createHandlers();
+export const GET = handlers.GET;
+export const POST = handlers.POST;
+export const PATCH = handlers.PATCH;
+export const DELETE = handlers.DELETE;
+```
+
+### Status Page
+
+```svelte
+<script>
+  import { StatusPage } from '@alliance-droid/status-feedback-system';
+  let { data } = $props();
+</script>
+
+<StatusPage
+  projectName="My App"
+  systems={data.systems}
+  incidents={data.incidents}
+  statusHistory={data.statusHistory}
+/>
+```
+
+### Feedback Button
+
+```svelte
+<script>
+  import { FeedbackButton } from '@alliance-droid/status-feedback-system';
+</script>
+
+<FeedbackButton
+  apiKey="sf_abc123..."
+  endpoint="/api/status"
+  position="bottom-right"
+/>
+```
+
+### Admin Dashboard
+
+```svelte
+<script>
+  import { AdminDashboard } from '@alliance-droid/status-feedback-system/admin';
+  let { data } = $props();
+</script>
+
+<AdminDashboard
+  projects={data.projects}
+  apiEndpoint="/api/status"
+/>
+```
+
+## Exports
+
+| Path | Description |
+|------|-------------|
+| `.` | Client components (StatusPage, FeedbackForm, etc.) |
+| `./server` | Server module (createStatusServer, types) |
+| `./admin` | Admin components (AdminDashboard, etc.) |
+
+## License
+
+UNLICENSED — Private package.

package/dist/components/FeedbackButton.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import FeedbackForm from './FeedbackForm.svelte';
+
+	interface Props {
+		apiKey: string;
+		endpoint: string;
+		categories?: string[];
+		userEmail?: string;
+		position?: 'bottom-right' | 'bottom-left';
+	}
+
+	let {
+		apiKey,
+		endpoint,
+		categories,
+		userEmail,
+		position = 'bottom-right',
+	}: Props = $props();
+
+	let open = $state(false);
+
+	let positionStyles = $derived(
+		position === 'bottom-right'
+			? 'right: 1rem; bottom: 1rem;'
+			: 'left: 1rem; bottom: 1rem;'
+	);
+
+	let panelStyles = $derived(
+		position === 'bottom-right'
+			? 'right: 0; bottom: 3.5rem;'
+			: 'left: 0; bottom: 3.5rem;'
+	);
+</script>
+
+<div class="fixed z-50" style={positionStyles}>
+	{#if open}
+		<div class="absolute w-80 rounded-lg border border-border bg-background shadow-lg" style={panelStyles}>
+			<div class="flex items-center justify-between border-b border-border px-4 py-3">
+				<h3 class="text-sm font-semibold text-foreground">
+					<i class="fa-solid fa-comment mr-1.5 text-primary"></i>
+					Send Feedback
+				</h3>
+				<button
+					onclick={() => (open = false)}
+					class="text-foreground-tertiary transition-colors hover:text-foreground"
+					aria-label="Close feedback"
+				>
+					<i class="fa-solid fa-xmark"></i>
+				</button>
+			</div>
+			<div class="p-4">
+				<FeedbackForm
+					{apiKey}
+					{endpoint}
+					{categories}
+					{userEmail}
+					onSuccess={() => {
+						setTimeout(() => (open = false), 2000);
+					}}
+				/>
+			</div>
+		</div>
+	{/if}
+
+	<button
+		onclick={() => (open = !open)}
+		class="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105"
+		aria-label="Send feedback"
+	>
+		<i class="fa-solid {open ? 'fa-xmark' : 'fa-comment'} text-lg"></i>
+	</button>
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    apiKey: string;
+    endpoint: string;
+    categories?: string[];
+    userEmail?: string;
+    position?: 'bottom-right' | 'bottom-left';
+}
+declare const FeedbackButton: import("svelte").Component<Props, {}, "">;
+type FeedbackButton = ReturnType<typeof FeedbackButton>;
+export default FeedbackButton;

package/dist/components/FeedbackForm.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	interface Props {
+		apiKey: string;
+		endpoint: string;
+		categories?: string[];
+		userEmail?: string;
+		onSuccess?: () => void;
+		onError?: (error: string) => void;
+	}
+
+	let {
+		apiKey,
+		endpoint,
+		categories = ['Bug', 'Feature Request', 'General'],
+		userEmail,
+		onSuccess,
+		onError,
+	}: Props = $props();
+
+	let category = $state(categories[0] || '');
+	let message = $state('');
+	let email = $state(userEmail ?? '');
+	let submitting = $state(false);
+	let submitted = $state(false);
+	let errorMsg = $state('');
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!message.trim()) return;
+
+		submitting = true;
+		errorMsg = '';
+
+		try {
+			const res = await fetch(`${endpoint}/feedback`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'x-api-key': apiKey,
+				},
+				body: JSON.stringify({
+					category,
+					message: message.trim(),
+					email: email.trim() || undefined,
+					pageUrl: window.location.href,
+				}),
+			});
+
+			if (!res.ok) {
+				const data = await res.json();
+				throw new Error(data.error || 'Failed to submit feedback');
+			}
+
+			submitted = true;
+			onSuccess?.();
+		} catch (err) {
+			errorMsg = err instanceof Error ? err.message : 'Something went wrong';
+			onError?.(errorMsg);
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function reset() {
+		message = '';
+		submitted = false;
+		errorMsg = '';
+	}
+</script>
+
+{#if submitted}
+	<div class="rounded-lg border border-green-500/30 bg-green-500/10 p-6 text-center">
+		<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
+		<h3 class="font-semibold text-foreground">Thanks for your feedback!</h3>
+		<p class="mt-1 text-sm text-foreground-secondary">We'll review it shortly.</p>
+		<button
+			onclick={reset}
+			class="mt-4 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+		>
+			Send more feedback
+		</button>
+	</div>
+{:else}
+	<form onsubmit={handleSubmit} class="space-y-4">
+		{#if categories.length > 1}
+			<div>
+				<label for="sf-category" class="mb-1 block text-sm font-semibold text-foreground">
+					Category
+				</label>
+				<select
+					id="sf-category"
+					bind:value={category}
+					class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
+				>
+					{#each categories as cat}
+						<option value={cat}>{cat}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+
+		<div>
+			<label for="sf-message" class="mb-1 block text-sm font-semibold text-foreground">
+				Message <span class="text-red-500">*</span>
+			</label>
+			<textarea
+				id="sf-message"
+				bind:value={message}
+				placeholder="Tell us what's on your mind..."
+				rows="4"
+				maxlength="5000"
+				required
+				class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
+			></textarea>
+		</div>
+
+		<div>
+			<label for="sf-email" class="mb-1 block text-sm font-semibold text-foreground">
+				Email <span class="text-foreground-tertiary">(optional)</span>
+			</label>
+			<input
+				id="sf-email"
+				type="email"
+				bind:value={email}
+				placeholder="your@email.com"
+				class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-foreground-tertiary"
+			/>
+		</div>
+
+		{#if errorMsg}
+			<div class="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-500">
+				<i class="fa-solid fa-circle-exclamation mr-1"></i>
+				{errorMsg}
+			</div>
+		{/if}
+
+		<button
+			type="submit"
+			disabled={submitting || !message.trim()}
+			class="w-full rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{#if submitting}
+				<i class="fa-solid fa-spinner fa-spin mr-1"></i>
+				Submitting...
+			{:else}
+				<i class="fa-solid fa-paper-plane mr-1"></i>
+				Submit Feedback
+			{/if}
+		</button>
+	</form>
+{/if}

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

@@ -0,0 +1,11 @@
+interface Props {
+    apiKey: string;
+    endpoint: string;
+    categories?: string[];
+    userEmail?: string;
+    onSuccess?: () => void;
+    onError?: (error: string) => void;
+}
+declare const FeedbackForm: import("svelte").Component<Props, {}, "">;
+type FeedbackForm = ReturnType<typeof FeedbackForm>;
+export default FeedbackForm;

package/dist/components/StatusBanner.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { System, SystemStatus } from '../types.js';
+	import StatusIndicator from './shared/StatusIndicator.svelte';
+
+	interface Props {
+		systems: System[];
+		statusUrl?: string;
+	}
+
+	let { systems, statusUrl }: Props = $props();
+
+	let overallStatus = $derived.by((): SystemStatus => {
+		if (systems.length === 0) return 'operational';
+		if (systems.some((s) => s.status === 'outage')) return 'outage';
+		if (systems.some((s) => s.status === 'degraded')) return 'degraded';
+		if (systems.some((s) => s.status === 'maintenance')) return 'maintenance';
+		return 'operational';
+	});
+
+	const messages: Record<SystemStatus, string> = {
+		operational: 'All systems operational',
+		degraded: 'Some systems degraded',
+		outage: 'System outage detected',
+		maintenance: 'Scheduled maintenance',
+	};
+</script>
+
+{#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"
+	>
+		<StatusIndicator status={overallStatus} size="sm" />
+		<span>{messages[overallStatus]}</span>
+	</a>
+{:else}
+	<div class="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs text-foreground-secondary">
+		<StatusIndicator status={overallStatus} size="sm" />
+		<span>{messages[overallStatus]}</span>
+	</div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { System } from '../types.js';
+interface Props {
+    systems: System[];
+    statusUrl?: string;
+}
+declare const StatusBanner: import("svelte").Component<Props, {}, "">;
+type StatusBanner = ReturnType<typeof StatusBanner>;
+export default StatusBanner;

package/dist/components/StatusPage.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
+	import StatusIndicator from './shared/StatusIndicator.svelte';
+	import SystemCard from './shared/SystemCard.svelte';
+	import IncidentTimeline from './shared/IncidentTimeline.svelte';
+
+	interface Props {
+		projectName: string;
+		systems: System[];
+		incidents: Incident[];
+		/** Map of systemId → StatusHistoryEntry[] for uptime bars */
+		statusHistory?: Record<string, StatusHistoryEntry[]>;
+		showUptime?: boolean;
+	}
+
+	let {
+		projectName,
+		systems,
+		incidents,
+		statusHistory = {},
+		showUptime = true,
+	}: Props = $props();
+
+	// ── Derived state ──
+
+	let overallStatus = $derived.by((): SystemStatus => {
+		if (systems.length === 0) return 'operational';
+		if (systems.some((s) => s.status === 'outage')) return 'outage';
+		if (systems.some((s) => s.status === 'degraded')) return 'degraded';
+		if (systems.some((s) => s.status === 'maintenance')) return 'maintenance';
+		return 'operational';
+	});
+
+	const overallMessages: Record<SystemStatus, string> = {
+		operational: 'All Systems Operational',
+		degraded: 'Partial System Degradation',
+		outage: 'Partial System Outage',
+		maintenance: 'Scheduled Maintenance',
+	};
+
+	const overallBgClasses: Record<SystemStatus, string> = {
+		operational: 'bg-green-500/10 border-green-500/30',
+		degraded: 'bg-yellow-500/10 border-yellow-500/30',
+		outage: 'bg-red-500/10 border-red-500/30',
+		maintenance: 'bg-blue-500/10 border-blue-500/30',
+	};
+
+	let activeIncidents = $derived(incidents.filter((i) => i.status !== 'resolved'));
+	let recentResolved = $derived(
+		incidents.filter((i) => i.status === 'resolved').slice(0, 10)
+	);
+
+	function formatDate(timestamp: number): string {
+		return new Date(timestamp).toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+		});
+	}
+</script>
+
+<div class="mx-auto max-w-3xl space-y-8">
+	<!-- Header -->
+	<div class="text-center">
+		<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>
+		</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}
+			</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>
+						{#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}
+
+	<!-- 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>
+						{#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}
+
+	<!-- 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}
+</div>

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

@@ -0,0 +1,12 @@
+import type { System, Incident, StatusHistoryEntry } from '../types.js';
+interface Props {
+    projectName: string;
+    systems: System[];
+    incidents: Incident[];
+    /** Map of systemId → StatusHistoryEntry[] for uptime bars */
+    statusHistory?: Record<string, StatusHistoryEntry[]>;
+    showUptime?: boolean;
+}
+declare const StatusPage: import("svelte").Component<Props, {}, "">;
+type StatusPage = ReturnType<typeof StatusPage>;
+export default StatusPage;