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

package/dist/components/admin/IncidentForm.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-	import type { System, IncidentSeverity } from '../../types.js';
-
-	interface Props {
-		systems: System[];
-		onSave?: (data: {
-			title: string;
-			severity: IncidentSeverity;
-			affectedSystems: string[];
-			message: string;
-		}) => Promise<void>;
-		onCancel?: () => void;
-	}
-
-	let { systems, onSave, onCancel }: Props = $props();
-
-	let title = $state('');
-	let severity = $state<IncidentSeverity>('minor');
-	let message = $state('');
-	let selectedSystems = $state<string[]>([]);
-	let saving = $state(false);
-
-	const severities: IncidentSeverity[] = ['minor', 'major', 'critical'];
-
-	function toggleSystem(id: string) {
-		if (selectedSystems.includes(id)) {
-			selectedSystems = selectedSystems.filter((s) => s !== id);
-		} else {
-			selectedSystems = [...selectedSystems, id];
-		}
-	}
-
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		if (!title.trim() || !message.trim()) return;
-		saving = true;
-		try {
-			await onSave?.({
-				title: title.trim(),
-				severity,
-				affectedSystems: selectedSystems,
-				message: message.trim(),
-			});
-		} finally {
-			saving = false;
-		}
-	}
-</script>
-
-<form onsubmit={handleSubmit} class="space-y-4">
-	<h3 class="text-base font-semibold text-foreground">Report Incident</h3>
-
-	<div>
-		<label for="sf-inc-title" class="mb-1 block text-sm font-semibold text-foreground">
-			Title <span class="text-red-500">*</span>
-		</label>
-		<input
-			id="sf-inc-title"
-			type="text"
-			bind:value={title}
-			required
-			placeholder="Brief description of the issue"
-			class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-		/>
-	</div>
-
-	<div>
-		<label class="mb-1 block text-sm font-semibold text-foreground">Severity</label>
-		<div class="flex gap-2">
-			{#each severities as s}
-				<button
-					type="button"
-					onclick={() => (severity = s)}
-					class="rounded-md px-3 py-1.5 text-xs font-semibold capitalize transition-colors {severity === s
-						? 'bg-primary text-primary-foreground'
-						: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-				>
-					{s}
-				</button>
-			{/each}
-		</div>
-	</div>
-
-	{#if systems.length > 0}
-		<div>
-			<label class="mb-1 block text-sm font-semibold text-foreground">Affected Systems</label>
-			<div class="flex flex-wrap gap-2">
-				{#each systems as system}
-					<button
-						type="button"
-						onclick={() => toggleSystem(system.id)}
-						class="rounded-md px-2.5 py-1 text-xs transition-colors {selectedSystems.includes(system.id)
-							? 'bg-red-500/10 border border-red-500/30 text-red-500'
-							: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-					>
-						{system.name}
-					</button>
-				{/each}
-			</div>
-		</div>
-	{/if}
-
-	<div>
-		<label for="sf-inc-msg" class="mb-1 block text-sm font-semibold text-foreground">
-			Initial Update <span class="text-red-500">*</span>
-		</label>
-		<textarea
-			id="sf-inc-msg"
-			bind:value={message}
-			rows="3"
-			required
-			placeholder="What's happening and what are we doing about it?"
-			class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-		></textarea>
-	</div>
-
-	<div class="flex gap-2">
-		<button
-			type="submit"
-			disabled={saving || !title.trim() || !message.trim()}
-			class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:opacity-50"
-		>
-			{saving ? 'Creating...' : 'Create Incident'}
-		</button>
-		{#if onCancel}
-			<button
-				type="button"
-				onclick={onCancel}
-				class="rounded-md border border-border px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-surface-hover"
-			>
-				Cancel
-			</button>
-		{/if}
-	</div>
-</form>

package/dist/components/admin/IncidentForm.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { System, IncidentSeverity } from '../../types.js';
-interface Props {
-    systems: System[];
-    onSave?: (data: {
-        title: string;
-        severity: IncidentSeverity;
-        affectedSystems: string[];
-        message: string;
-    }) => Promise<void>;
-    onCancel?: () => void;
-}
-declare const IncidentForm: import("svelte").Component<Props, {}, "">;
-type IncidentForm = ReturnType<typeof IncidentForm>;
-export default IncidentForm;

package/dist/components/admin/IncidentManager.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-	import type { Incident, IncidentStatus } from '../../types.js';
-	import IncidentTimeline from '../shared/IncidentTimeline.svelte';
-
-	interface Props {
-		incidents: Incident[];
-		onAddUpdate?: (incidentId: string, data: { status: IncidentStatus; message: string }) => Promise<void>;
-		onDelete?: (incidentId: string) => Promise<void>;
-		onCreate?: () => void;
-	}
-
-	let { incidents, onAddUpdate, onDelete, onCreate }: Props = $props();
-
-	let expandedId = $state<string | null>(null);
-	let updateMessage = $state('');
-	let updateStatus = $state<IncidentStatus>('investigating');
-	let submitting = $state(false);
-
-	const statusOptions: { value: IncidentStatus; label: string }[] = [
-		{ value: 'investigating', label: 'Investigating' },
-		{ value: 'identified', label: 'Identified' },
-		{ value: 'monitoring', label: 'Monitoring' },
-		{ value: 'resolved', label: 'Resolved' },
-	];
-
-	function toggleExpand(id: string) {
-		expandedId = expandedId === id ? null : id;
-		updateMessage = '';
-	}
-
-	async function handleAddUpdate(incidentId: string) {
-		if (!updateMessage.trim()) return;
-		submitting = true;
-		try {
-			await onAddUpdate?.(incidentId, { status: updateStatus, message: updateMessage.trim() });
-			updateMessage = '';
-		} finally {
-			submitting = false;
-		}
-	}
-
-	async function handleDelete(id: string, title: string) {
-		if (!confirm(`Delete incident "${title}"?`)) return;
-		await onDelete?.(id);
-	}
-
-	function formatDate(timestamp: number): string {
-		return new Date(timestamp).toLocaleString();
-	}
-
-	const severityColors: Record<string, string> = {
-		minor: 'text-yellow-500 bg-yellow-500/10',
-		major: 'text-orange-500 bg-orange-500/10',
-		critical: 'text-red-500 bg-red-500/10',
-	};
-</script>
-
-<div class="space-y-4">
-	<div class="flex items-center justify-between">
-		<h3 class="text-base font-semibold text-foreground">
-			<i class="fa-solid fa-triangle-exclamation mr-1.5 text-foreground-tertiary"></i>
-			Incidents
-		</h3>
-		{#if onCreate}
-			<button
-				onclick={onCreate}
-				class="rounded-md bg-red-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-red-600"
-			>
-				<i class="fa-solid fa-plus mr-1"></i>
-				Report Incident
-			</button>
-		{/if}
-	</div>
-
-	{#if incidents.length === 0}
-		<div class="rounded-lg border border-border bg-surface p-6 text-center">
-			<i class="fa-solid fa-circle-check mb-2 text-xl text-green-500"></i>
-			<p class="text-sm text-foreground-secondary">No incidents</p>
-		</div>
-	{:else}
-		{#each incidents as incident}
-			<div class="rounded-lg border border-border bg-surface">
-				<button
-					onclick={() => toggleExpand(incident.id)}
-					class="flex w-full items-center justify-between p-3 text-left"
-				>
-					<div>
-						<div class="flex items-center gap-2">
-							<span class="text-sm font-semibold text-foreground">{incident.title}</span>
-							<span class="rounded px-1.5 py-0.5 text-xs capitalize {severityColors[incident.severity] || ''}">
-								{incident.severity}
-							</span>
-							<span class="rounded px-1.5 py-0.5 text-xs capitalize bg-surface-hover text-foreground-secondary">
-								{incident.status}
-							</span>
-						</div>
-						<p class="mt-0.5 text-xs text-foreground-tertiary">{formatDate(incident.createdAt)}</p>
-					</div>
-					<i class="fa-solid {expandedId === incident.id ? 'fa-chevron-up' : 'fa-chevron-down'} text-xs text-foreground-tertiary"></i>
-				</button>
-
-				{#if expandedId === incident.id}
-					<div class="border-t border-border p-3 space-y-4">
-						{#if incident.updates && incident.updates.length > 0}
-							<IncidentTimeline updates={incident.updates} />
-						{/if}
-
-						{#if incident.status !== 'resolved'}
-							<div class="rounded-lg border border-border bg-background p-3 space-y-3">
-								<div class="flex gap-2">
-									{#each statusOptions as opt}
-										<button
-											type="button"
-											onclick={() => (updateStatus = opt.value)}
-											class="rounded px-2 py-1 text-xs transition-colors {updateStatus === opt.value
-												? 'bg-primary text-primary-foreground'
-												: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-										>
-											{opt.label}
-										</button>
-									{/each}
-								</div>
-								<textarea
-									bind:value={updateMessage}
-									placeholder="Update message..."
-									rows="2"
-									class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-								></textarea>
-								<button
-									onclick={() => handleAddUpdate(incident.id)}
-									disabled={submitting || !updateMessage.trim()}
-									class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground disabled:opacity-50"
-								>
-									{submitting ? 'Posting...' : 'Post Update'}
-								</button>
-							</div>
-						{/if}
-
-						<div class="flex justify-end">
-							<button
-								onclick={() => handleDelete(incident.id, incident.title)}
-								class="text-xs text-red-500 transition-colors hover:text-red-400"
-							>
-								<i class="fa-solid fa-trash mr-1"></i>
-								Delete Incident
-							</button>
-						</div>
-					</div>
-				{/if}
-			</div>
-		{/each}
-	{/if}
-</div>

package/dist/components/admin/IncidentManager.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Incident, IncidentStatus } from '../../types.js';
-interface Props {
-    incidents: Incident[];
-    onAddUpdate?: (incidentId: string, data: {
-        status: IncidentStatus;
-        message: string;
-    }) => Promise<void>;
-    onDelete?: (incidentId: string) => Promise<void>;
-    onCreate?: () => void;
-}
-declare const IncidentManager: import("svelte").Component<Props, {}, "">;
-type IncidentManager = ReturnType<typeof IncidentManager>;
-export default IncidentManager;

package/dist/components/admin/ProjectForm.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-	import type { Project } from '../../types.js';
-
-	interface Props {
-		project?: Project;
-		onSave?: (data: { name: string; description: string; allowedOrigins: string[] }) => Promise<void>;
-		onCancel?: () => void;
-	}
-
-	let { project, onSave, onCancel }: Props = $props();
-
-	let name = $state(project?.name ?? '');
-	let description = $state(project?.description ?? '');
-	let originsText = $state(project?.allowedOrigins?.join('\n') ?? '');
-	let saving = $state(false);
-	let errorMsg = $state('');
-
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		if (!name.trim()) return;
-
-		saving = true;
-		errorMsg = '';
-
-		try {
-			const origins = originsText
-				.split('\n')
-				.map((o) => o.trim())
-				.filter(Boolean);
-			await onSave?.({ name: name.trim(), description: description.trim(), allowedOrigins: origins });
-		} catch (err) {
-			errorMsg = err instanceof Error ? err.message : 'Failed to save';
-		} finally {
-			saving = false;
-		}
-	}
-</script>
-
-<form onsubmit={handleSubmit} class="space-y-4">
-	<h3 class="text-lg font-semibold text-foreground">
-		{project ? 'Edit Project' : 'New Project'}
-	</h3>
-
-	<div>
-		<label for="sf-proj-name" class="mb-1 block text-sm font-semibold text-foreground">
-			Name <span class="text-red-500">*</span>
-		</label>
-		<input
-			id="sf-proj-name"
-			type="text"
-			bind:value={name}
-			required
-			class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-		/>
-	</div>
-
-	<div>
-		<label for="sf-proj-desc" class="mb-1 block text-sm font-semibold text-foreground">
-			Description
-		</label>
-		<textarea
-			id="sf-proj-desc"
-			bind:value={description}
-			rows="2"
-			class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
-		></textarea>
-	</div>
-
-	<div>
-		<label for="sf-proj-origins" class="mb-1 block text-sm font-semibold text-foreground">
-			Allowed Origins <span class="text-foreground-tertiary text-xs">(one per line)</span>
-		</label>
-		<textarea
-			id="sf-proj-origins"
-			bind:value={originsText}
-			rows="3"
-			placeholder="https://example.com"
-			class="w-full rounded-md border border-border bg-surface px-3 py-2 text-xs font-mono text-foreground"
-		></textarea>
-	</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">
-			{errorMsg}
-		</div>
-	{/if}
-
-	<div class="flex gap-2">
-		<button
-			type="submit"
-			disabled={saving || !name.trim()}
-			class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover disabled:opacity-50"
-		>
-			{saving ? 'Saving...' : project ? 'Update' : 'Create'}
-		</button>
-		{#if onCancel}
-			<button
-				type="button"
-				onclick={onCancel}
-				class="rounded-md border border-border px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-surface-hover"
-			>
-				Cancel
-			</button>
-		{/if}
-	</div>
-</form>

package/dist/components/admin/ProjectForm.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Project } from '../../types.js';
-interface Props {
-    project?: Project;
-    onSave?: (data: {
-        name: string;
-        description: string;
-        allowedOrigins: string[];
-    }) => Promise<void>;
-    onCancel?: () => void;
-}
-declare const ProjectForm: import("svelte").Component<Props, {}, "">;
-type ProjectForm = ReturnType<typeof ProjectForm>;
-export default ProjectForm;

package/dist/components/admin/ProjectList.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import type { Project } from '../../types.js';
-
-	interface Props {
-		projects: Project[];
-		selectedId?: string;
-		onSelect?: (project: Project) => void;
-		onCreate?: () => void;
-	}
-
-	let { projects, selectedId, onSelect, onCreate }: Props = $props();
-
-	function formatDate(timestamp: number): string {
-		return new Date(timestamp).toLocaleDateString();
-	}
-</script>
-
-<div class="space-y-3">
-	<div class="flex items-center justify-between">
-		<h2 class="text-lg font-semibold text-foreground">Projects</h2>
-		{#if onCreate}
-			<button
-				onclick={onCreate}
-				class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary-hover"
-			>
-				<i class="fa-solid fa-plus mr-1"></i>
-				New Project
-			</button>
-		{/if}
-	</div>
-
-	{#if projects.length === 0}
-		<div class="rounded-lg border border-border bg-surface p-8 text-center">
-			<i class="fa-solid fa-folder-open mb-2 text-2xl text-foreground-tertiary"></i>
-			<p class="text-sm text-foreground-secondary">No projects yet</p>
-		</div>
-	{:else}
-		<div class="space-y-2">
-			{#each projects as project}
-				<button
-					onclick={() => onSelect?.(project)}
-					class="w-full rounded-lg border p-3 text-left transition-colors {selectedId === project.id
-						? 'border-primary bg-primary/5'
-						: 'border-border bg-surface hover:bg-surface-hover'}"
-				>
-					<div class="flex items-center justify-between">
-						<span class="text-sm font-semibold text-foreground">{project.name}</span>
-						<span class="text-xs text-foreground-tertiary">{formatDate(project.createdAt)}</span>
-					</div>
-					{#if project.description}
-						<p class="mt-1 text-xs text-foreground-tertiary">{project.description}</p>
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-</div>

package/dist/components/admin/ProjectList.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Project } from '../../types.js';
-interface Props {
-    projects: Project[];
-    selectedId?: string;
-    onSelect?: (project: Project) => void;
-    onCreate?: () => void;
-}
-declare const ProjectList: import("svelte").Component<Props, {}, "">;
-type ProjectList = ReturnType<typeof ProjectList>;
-export default ProjectList;

package/dist/components/admin/StatusControl.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { System, SystemStatus } from '../../types.js';
-	import StatusIndicator from '../shared/StatusIndicator.svelte';
-
-	interface Props {
-		systems: System[];
-		onUpdateStatus?: (systemId: string, status: SystemStatus) => Promise<void>;
-	}
-
-	let { systems, onUpdateStatus }: Props = $props();
-
-	let updating = $state<string | null>(null);
-
-	const statuses: { value: SystemStatus; label: string; icon: string }[] = [
-		{ value: 'operational', label: 'Operational', icon: 'fa-circle-check' },
-		{ value: 'degraded', label: 'Degraded', icon: 'fa-exclamation-triangle' },
-		{ value: 'outage', label: 'Outage', icon: 'fa-circle-xmark' },
-		{ value: 'maintenance', label: 'Maintenance', icon: 'fa-wrench' },
-	];
-
-	async function setStatus(systemId: string, status: SystemStatus) {
-		updating = systemId;
-		try {
-			await onUpdateStatus?.(systemId, status);
-		} finally {
-			updating = null;
-		}
-	}
-</script>
-
-<div class="space-y-4">
-	<h3 class="text-base font-semibold text-foreground">
-		<i class="fa-solid fa-toggle-on mr-1.5 text-foreground-tertiary"></i>
-		Quick Status Update
-	</h3>
-
-	{#each systems as system}
-		<div class="rounded-lg border border-border bg-surface p-3">
-			<div class="flex items-center gap-2 mb-2">
-				<StatusIndicator status={system.status} size="sm" />
-				<span class="text-sm font-semibold text-foreground">{system.name}</span>
-				{#if updating === system.id}
-					<i class="fa-solid fa-spinner fa-spin text-xs text-foreground-tertiary"></i>
-				{/if}
-			</div>
-			<div class="grid grid-cols-2 gap-1 sm:grid-cols-4">
-				{#each statuses as s}
-					<button
-						onclick={() => setStatus(system.id, s.value)}
-						disabled={updating === system.id}
-						class="rounded px-2 py-1.5 text-xs transition-colors {system.status === s.value
-							? 'bg-primary text-primary-foreground'
-							: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-					>
-						<i class="fa-solid {s.icon} mr-1"></i>
-						{s.label}
-					</button>
-				{/each}
-			</div>
-		</div>
-	{/each}
-</div>

package/dist/components/admin/StatusControl.svelte.d.ts

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