docs: Add OP_08 report generation and update protocol numbering

- Add OP_08 to cheatsheet task lookup table - Create Report Generation section in cheatsheet - Update SYS_16/17/18 numbering (SAT, Insights, Context) - Create StatusBadge component for dashboard - Create OP_08_GENERATE_REPORT.md protocol document 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 08:55:56 -05:00
parent b8a04c62b8
commit 155e2a1b8e
2 changed files with 157 additions and 6 deletions
--- a/atomizer-dashboard/frontend/src/components/dashboard/StatusBadge.tsx
+++ b/atomizer-dashboard/frontend/src/components/dashboard/StatusBadge.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { CheckCircle, PauseCircle, StopCircle, PlayCircle, AlertCircle } from 'lucide-react';
+
+export type OptimizationStatus = 'running' | 'paused' | 'stopped' | 'completed' | 'error' | 'not_started';
+
+interface StatusBadgeProps {
+  status: OptimizationStatus;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  pulse?: boolean;
+}
+
+const statusConfig = {
+  running: {
+    label: 'Running',
+    icon: PlayCircle,
+    dotClass: 'bg-green-500',
+    textClass: 'text-green-400',
+    bgClass: 'bg-green-500/10 border-green-500/30',
+  },
+  paused: {
+    label: 'Paused',
+    icon: PauseCircle,
+    dotClass: 'bg-yellow-500',
+    textClass: 'text-yellow-400',
+    bgClass: 'bg-yellow-500/10 border-yellow-500/30',
+  },
+  stopped: {
+    label: 'Stopped',
+    icon: StopCircle,
+    dotClass: 'bg-dark-500',
+    textClass: 'text-dark-400',
+    bgClass: 'bg-dark-700 border-dark-600',
+  },
+  completed: {
+    label: 'Completed',
+    icon: CheckCircle,
+    dotClass: 'bg-primary-500',
+    textClass: 'text-primary-400',
+    bgClass: 'bg-primary-500/10 border-primary-500/30',
+  },
+  error: {
+    label: 'Error',
+    icon: AlertCircle,
+    dotClass: 'bg-red-500',
+    textClass: 'text-red-400',
+    bgClass: 'bg-red-500/10 border-red-500/30',
+  },
+  not_started: {
+    label: 'Not Started',
+    icon: StopCircle,
+    dotClass: 'bg-dark-600',
+    textClass: 'text-dark-500',
+    bgClass: 'bg-dark-800 border-dark-700',
+  },
+};
+
+const sizeConfig = {
+  sm: { dot: 'w-2 h-2', text: 'text-xs', padding: 'px-2 py-0.5', icon: 'w-3 h-3' },
+  md: { dot: 'w-3 h-3', text: 'text-sm', padding: 'px-3 py-1', icon: 'w-4 h-4' },
+  lg: { dot: 'w-4 h-4', text: 'text-base', padding: 'px-4 py-2', icon: 'w-5 h-5' },
+};
+
+export function StatusBadge({
+  status,
+  showLabel = true,
+  size = 'md',
+  pulse = true
+}: StatusBadgeProps) {
+  const config = statusConfig[status];
+  const sizes = sizeConfig[size];
+
+  return (
+    <div
+      className={`inline-flex items-center gap-2 rounded-full border ${config.bgClass} ${sizes.padding}`}
+    >
+      <div
+        className={`rounded-full ${config.dotClass} ${sizes.dot} ${
+          pulse && status === 'running' ? 'animate-pulse' : ''
+        }`}
+      />
+      {showLabel && (
+        <span className={`font-semibold uppercase tracking-wide ${config.textClass} ${sizes.text}`}>
+          {config.label}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Helper function to determine status from process state
+ */
+export function getStatusFromProcess(
+  isRunning: boolean,
+  isPaused: boolean,
+  completedTrials: number,
+  totalTrials: number,
+  hasError?: boolean
+): OptimizationStatus {
+  if (hasError) return 'error';
+  if (completedTrials >= totalTrials && totalTrials > 0) return 'completed';
+  if (isPaused) return 'paused';
+  if (isRunning) return 'running';
+  if (completedTrials === 0) return 'not_started';
+  return 'stopped';
+}
+
+export default StatusBadge;