From 1a54a8191dd0b4ba808f9bd5ae09c640b61832c6 Mon Sep 17 00:00:00 2001
From: David Hagerty <david@dathagerty.com>
Date: Wed, 11 Feb 2026 13:33:03 -0500
Subject: [PATCH] feat(web): add shared StatusBadge, PriorityBadge,
 LoadingSpinner, ErrorMessage components

Implemented four reusable UI components following Svelte 5 conventions:
- StatusBadge: colored badge for NodeStatus with color mapping
- PriorityBadge: colored indicator for Priority (renders nothing if null)
- LoadingSpinner: CSS-based spinner animation with configurable size
- ErrorMessage: styled error box with icon and message

All components use proper TypeScript types and follow house style conventions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/ErrorMessage.svelte   | 48 +++++++++++++++
 web/src/components/LoadingSpinner.svelte | 38 ++++++++++++
 web/src/components/PriorityBadge.svelte  | 61 +++++++++++++++++++
 web/src/components/StatusBadge.svelte    | 77 ++++++++++++++++++++++++
 4 files changed, 224 insertions(+)
 create mode 100644 web/src/components/ErrorMessage.svelte
 create mode 100644 web/src/components/LoadingSpinner.svelte
 create mode 100644 web/src/components/PriorityBadge.svelte
 create mode 100644 web/src/components/StatusBadge.svelte

diff --git a/web/src/components/ErrorMessage.svelte b/web/src/components/ErrorMessage.svelte
new file mode 100644
index 0000000..9e49722
--- /dev/null
+++ b/web/src/components/ErrorMessage.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  /**
+   * ErrorMessage component.
+   * Displays a styled error box with the provided message.
+   */
+
+  type Props = {
+    message: string;
+  };
+
+  let { message }: Props = $props();
+</script>
+
+<div class="error-box">
+  <div class="error-icon">!</div>
+  <div class="error-text">{message}</div>
+</div>
+
+<style>
+  .error-box {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: #7f1d1d;
+    border: 1px solid #dc2626;
+    border-radius: 0.5rem;
+    color: #fecaca;
+  }
+
+  .error-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #dc2626;
+    color: white;
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+
+  .error-text {
+    flex: 1;
+    font-size: 0.875rem;
+  }
+</style>
diff --git a/web/src/components/LoadingSpinner.svelte b/web/src/components/LoadingSpinner.svelte
new file mode 100644
index 0000000..023ae33
--- /dev/null
+++ b/web/src/components/LoadingSpinner.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * LoadingSpinner component.
+   * A simple CSS-based spinner animation.
+   * Accepts optional size prop (default: 24px).
+   */
+
+  type Props = {
+    size?: string;
+  };
+
+  let { size = '24px' }: Props = $props();
+</script>
+
+<div class="spinner" style="width: {size}; height: {size}">
+  <div class="spinner-inner"></div>
+</div>
+
+<style>
+  .spinner {
+    display: inline-block;
+  }
+
+  .spinner-inner {
+    width: 100%;
+    height: 100%;
+    border: 3px solid #4b5563;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/web/src/components/PriorityBadge.svelte b/web/src/components/PriorityBadge.svelte
new file mode 100644
index 0000000..e86b836
--- /dev/null
+++ b/web/src/components/PriorityBadge.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  /**
+   * PriorityBadge component.
+   * Displays a colored indicator for a priority level.
+   * Renders nothing if priority is null.
+   */
+
+  import type { Priority } from '../types';
+
+  type Props = {
+    priority: Priority | null;
+  };
+
+  let { priority }: Props = $props();
+
+  /**
+   * Map priority to background color.
+   */
+  function getBackgroundColor(p: Priority): string {
+    switch (p) {
+      case 'critical':
+        return '#ef4444'; // red
+      case 'high':
+        return '#f97316'; // orange
+      case 'medium':
+        return '#eab308'; // yellow
+      case 'low':
+        return '#6b7280'; // gray
+      default:
+        return '#6b7280'; // gray as fallback
+    }
+  }
+
+  /**
+   * Format priority for display (lowercase to Title Case).
+   */
+  function formatPriority(p: Priority): string {
+    return p.charAt(0).toUpperCase() + p.slice(1);
+  }
+
+  const bgColor = $derived(priority ? getBackgroundColor(priority) : '');
+  const displayText = $derived(priority ? formatPriority(priority) : '');
+</script>
+
+{#if priority}
+  <span class="priority-badge" style="background-color: {bgColor}">
+    {displayText}
+  </span>
+{/if}
+
+<style>
+  .priority-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: white;
+    white-space: nowrap;
+  }
+</style>
diff --git a/web/src/components/StatusBadge.svelte b/web/src/components/StatusBadge.svelte
new file mode 100644
index 0000000..470e1f5
--- /dev/null
+++ b/web/src/components/StatusBadge.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  /**
+   * StatusBadge component.
+   * Displays a colored pill badge for a node status.
+   * Color mapping based on status value.
+   */
+
+  import type { NodeStatus } from '../types';
+
+  type Props = {
+    status: NodeStatus;
+  };
+
+  let { status }: Props = $props();
+
+  /**
+   * Map status to background color.
+   */
+  function getBackgroundColor(st: NodeStatus): string {
+    switch (st) {
+      case 'completed':
+        return '#10b981'; // green
+      case 'active':
+      case 'in_progress':
+        return '#3b82f6'; // blue
+      case 'ready':
+      case 'claimed':
+        return '#14b8a6'; // teal
+      case 'pending':
+        return '#6b7280'; // gray
+      case 'blocked':
+      case 'failed':
+        return '#ef4444'; // red
+      case 'decided':
+      case 'chosen':
+        return '#a855f7'; // purple
+      case 'rejected':
+      case 'abandoned':
+      case 'superseded':
+      case 'cancelled':
+        return '#f59e0b'; // orange/muted
+      case 'review':
+        return '#eab308'; // yellow
+      default:
+        return '#6b7280'; // gray as fallback
+    }
+  }
+
+  /**
+   * Format status for display (snake_case to Title Case).
+   */
+  function formatStatus(st: NodeStatus): string {
+    return st
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  }
+
+  const bgColor = $derived(getBackgroundColor(status));
+  const displayText = $derived(formatStatus(status));
+</script>
+
+<span class="status-badge" style="background-color: {bgColor}">
+  {displayText}
+</span>
+
+<style>
+  .status-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: white;
+    white-space: nowrap;
+  }
+</style>
-- 
2.51.2