Delete frontend

frontend/css/main.css

@@ -1,891 +0,0 @@
-/* ============================================
-   AutoForge — Design System
-   Dark developer-tool UI with glassmorphism
-   ============================================ */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-/* ── CSS Variables ─────────────────────────── */
-
-:root {
-  /* Base palette */
-  --bg-primary:     #0a0e17;
-  --bg-secondary:   #111827;
-  --bg-tertiary:    #1a2236;
-  --bg-card:        rgba(17, 24, 39, 0.7);
-  --bg-glass:       rgba(17, 24, 39, 0.5);
-
-  /* Accent palette */
-  --accent-primary:   #6366f1;
-  --accent-secondary: #818cf8;
-  --accent-glow:      rgba(99, 102, 241, 0.3);
-  --accent-success:   #34d399;
-  --accent-warning:   #fbbf24;
-  --accent-danger:    #f87171;
-  --accent-info:      #38bdf8;
-
-  /* Gradients */
-  --gradient-brand:  linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
-  --gradient-card:   linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.05) 100%);
-  --gradient-glow:   radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 40%);
-
-  /* Text */
-  --text-primary:   #f1f5f9;
-  --text-secondary: #94a3b8;
-  --text-muted:     #64748b;
-  --text-on-accent: #ffffff;
-
-  /* Borders */
-  --border-primary:   rgba(148, 163, 184, 0.1);
-  --border-secondary: rgba(148, 163, 184, 0.06);
-  --border-accent:    rgba(99, 102, 241, 0.3);
-
-  /* Sizing */
-  --sidebar-width:  260px;
-  --header-height:  64px;
-  --radius-sm:      6px;
-  --radius-md:      10px;
-  --radius-lg:      16px;
-  --radius-xl:      20px;
-
-  /* Shadows */
-  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
-  --shadow-md:  0 4px 12px rgba(0,0,0,0.3);
-  --shadow-lg:  0 8px 30px rgba(0,0,0,0.4);
-  --shadow-glow: 0 0 20px var(--accent-glow);
-
-  /* Timing */
-  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Typography */
-  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-}
-
-
-/* ── Reset ─────────────────────────────────── */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  line-height: 1.6;
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-a {
-  color: var(--accent-secondary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-a:hover {
-  color: var(--accent-primary);
-}
-
-button {
-  font-family: inherit;
-  cursor: pointer;
-}
-
-input, textarea, select {
-  font-family: inherit;
-}
-
-
-/* ── Animated Background ───────────────────── */
-
-.bg-mesh {
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background: var(--bg-primary);
-  overflow: hidden;
-}
-
-.bg-mesh::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background:
-    radial-gradient(ellipse 600px 600px at 20% 30%, rgba(99,102,241,0.08) 0%, transparent 70%),
-    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(168,85,247,0.06) 0%, transparent 70%),
-    radial-gradient(ellipse 400px 400px at 60% 80%, rgba(236,72,153,0.04) 0%, transparent 70%);
-  animation: meshFloat 20s ease-in-out infinite;
-}
-
-@keyframes meshFloat {
-  0%, 100% { transform: translate(0, 0) rotate(0deg); }
-  33%      { transform: translate(2%, -2%) rotate(1deg); }
-  66%      { transform: translate(-1%, 1%) rotate(-0.5deg); }
-}
-
-
-/* ── Login Page ────────────────────────────── */
-
-.login-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 2rem;
-}
-
-.login-card {
-  width: 100%;
-  max-width: 420px;
-  background: var(--bg-card);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-xl);
-  padding: 2.5rem;
-  box-shadow: var(--shadow-lg);
-  animation: cardAppear 0.6s var(--transition-slow) both;
-}
-
-@keyframes cardAppear {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.login-logo {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.login-logo h1 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  background: var(--gradient-brand);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: -0.5px;
-}
-
-.login-logo p {
-  color: var(--text-muted);
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-
-.login-tabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 1.5rem;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 1px solid var(--border-primary);
-}
-
-.login-tab {
-  flex: 1;
-  padding: 0.625rem;
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all var(--transition-fast);
-}
-
-.login-tab.active {
-  background: var(--accent-primary);
-  color: var(--text-on-accent);
-}
-
-.login-tab:hover:not(.active) {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-
-/* ── Forms ─────────────────────────────────── */
-
-.form-group {
-  margin-bottom: 1.25rem;
-}
-
-.form-label {
-  display: block;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 0.375rem;
-  letter-spacing: 0.02em;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-size: 0.9375rem;
-  transition: all var(--transition-fast);
-  outline: none;
-}
-
-.form-input::placeholder {
-  color: var(--text-muted);
-}
-
-.form-input:focus {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.form-input:hover:not(:focus) {
-  border-color: rgba(148, 163, 184, 0.2);
-}
-
-.form-error {
-  display: none;
-  margin-top: 1rem;
-  padding: 0.75rem 1rem;
-  background: rgba(248, 113, 113, 0.1);
-  border: 1px solid rgba(248, 113, 113, 0.2);
-  border-radius: var(--radius-sm);
-  color: var(--accent-danger);
-  font-size: 0.8125rem;
-  animation: shake 0.3s ease-in-out;
-}
-
-.form-error.visible {
-  display: block;
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25%      { transform: translateX(-4px); }
-  75%      { transform: translateX(4px); }
-}
-
-
-/* ── Buttons ───────────────────────────────── */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  transition: all var(--transition-fast);
-  position: relative;
-  overflow: hidden;
-}
-
-.btn::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(255,255,255,0);
-  transition: background var(--transition-fast);
-}
-
-.btn:hover::after {
-  background: rgba(255,255,255,0.06);
-}
-
-.btn:active {
-  transform: scale(0.97);
-}
-
-.btn-primary {
-  background: var(--gradient-brand);
-  color: var(--text-on-accent);
-  box-shadow: var(--shadow-glow);
-}
-
-.btn-primary:hover {
-  box-shadow: 0 0 30px var(--accent-glow);
-}
-
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.btn-secondary {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-primary);
-}
-
-.btn-secondary:hover {
-  border-color: var(--border-accent);
-}
-
-.btn-block {
-  width: 100%;
-}
-
-.btn-sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-}
-
-
-/* ── App Layout ────────────────────────────── */
-
-.app-layout {
-  display: flex;
-  min-height: 100vh;
-}
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: var(--sidebar-width);
-  height: 100vh;
-  background: var(--bg-card);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-right: 1px solid var(--border-primary);
-  display: flex;
-  flex-direction: column;
-  z-index: 100;
-  transition: transform var(--transition-normal);
-}
-
-.sidebar-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.sidebar-brand {
-  font-size: 1.25rem;
-  font-weight: 700;
-  background: var(--gradient-brand);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.sidebar-subtitle {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-top: 0.125rem;
-}
-
-.sidebar-nav {
-  flex: 1;
-  padding: 1rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: var(--radius-md);
-  color: var(--text-secondary);
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all var(--transition-fast);
-  text-decoration: none;
-  position: relative;
-}
-
-.nav-link:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.nav-link.active {
-  background: rgba(99, 102, 241, 0.12);
-  color: var(--accent-secondary);
-}
-
-.nav-link.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 60%;
-  background: var(--accent-primary);
-  border-radius: 0 2px 2px 0;
-}
-
-.nav-icon {
-  font-size: 1.125rem;
-  width: 1.25rem;
-  text-align: center;
-}
-
-.sidebar-footer {
-  padding: 1rem 0.75rem;
-  border-top: 1px solid var(--border-primary);
-}
-
-.user-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  border-radius: var(--radius-md);
-  transition: background var(--transition-fast);
-  cursor: pointer;
-}
-
-.user-badge:hover {
-  background: var(--bg-tertiary);
-}
-
-.user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--gradient-brand);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--text-on-accent);
-  flex-shrink: 0;
-}
-
-.user-info {
-  overflow: hidden;
-}
-
-.user-name {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.user-role {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-
-
-/* ── Main Content ──────────────────────────── */
-
-.main-content {
-  flex: 1;
-  margin-left: var(--sidebar-width);
-  min-height: 100vh;
-}
-
-.page-header {
-  padding: 2rem 2.5rem 1.5rem;
-  border-bottom: 1px solid var(--border-secondary);
-}
-
-.page-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-}
-
-.page-subtitle {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  margin-top: 0.25rem;
-}
-
-.page-body {
-  padding: 2rem 2.5rem;
-}
-
-
-/* ── Cards ─────────────────────────────────── */
-
-.card {
-  background: var(--bg-card);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  transition: all var(--transition-normal);
-}
-
-.card:hover {
-  border-color: var(--border-accent);
-  box-shadow: var(--shadow-glow);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.card-title {
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-
-/* ── Stats Grid ────────────────────────────── */
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1.25rem;
-  margin-bottom: 2rem;
-}
-
-.stat-card {
-  background: var(--gradient-card);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem 1.5rem;
-  transition: all var(--transition-normal);
-}
-
-.stat-card:hover {
-  border-color: var(--border-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-glow);
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.stat-value {
-  font-size: 2rem;
-  font-weight: 700;
-  margin-top: 0.25rem;
-  background: var(--gradient-brand);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.stat-change {
-  font-size: 0.75rem;
-  color: var(--accent-success);
-  margin-top: 0.25rem;
-}
-
-
-/* ── Workflow List ─────────────────────────── */
-
-.workflow-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.workflow-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
-  cursor: pointer;
-}
-
-.workflow-item:hover {
-  border-color: var(--border-accent);
-  background: var(--bg-tertiary);
-}
-
-.workflow-status {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.workflow-status.pending  { background: var(--accent-warning); box-shadow: 0 0 8px rgba(251,191,36,0.4); }
-.workflow-status.running  { background: var(--accent-info); box-shadow: 0 0 8px rgba(56,189,248,0.4); animation: pulse 2s infinite; }
-.workflow-status.success  { background: var(--accent-success); box-shadow: 0 0 8px rgba(52,211,153,0.4); }
-.workflow-status.failed   { background: var(--accent-danger); box-shadow: 0 0 8px rgba(248,113,113,0.4); }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50%      { opacity: 0.4; }
-}
-
-.workflow-details {
-  flex: 1;
-  min-width: 0;
-}
-
-.workflow-prompt {
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.workflow-meta {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-top: 0.125rem;
-}
-
-.workflow-arrow {
-  color: var(--text-muted);
-  transition: transform var(--transition-fast);
-}
-
-.workflow-item:hover .workflow-arrow {
-  transform: translateX(4px);
-  color: var(--accent-secondary);
-}
-
-
-/* ── Create Workflow ───────────────────────── */
-
-.create-section {
-  margin-bottom: 2rem;
-}
-
-.prompt-input {
-  width: 100%;
-  min-height: 120px;
-  padding: 1rem;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  resize: vertical;
-  transition: all var(--transition-fast);
-  outline: none;
-}
-
-.prompt-input::placeholder {
-  color: var(--text-muted);
-}
-
-.prompt-input:focus {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.create-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-}
-
-
-/* ── Empty State ───────────────────────────── */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem;
-  text-align: center;
-}
-
-.empty-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.3;
-}
-
-.empty-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.empty-text {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  max-width: 360px;
-}
-
-
-/* ── Status Badge ──────────────────────────── */
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.625rem;
-  border-radius: 100px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.badge-pending  { background: rgba(251,191,36,0.15); color: var(--accent-warning); }
-.badge-running  { background: rgba(56,189,248,0.15); color: var(--accent-info); }
-.badge-success  { background: rgba(52,211,153,0.15); color: var(--accent-success); }
-.badge-failed   { background: rgba(248,113,113,0.15); color: var(--accent-danger); }
-
-
-/* ── Spinner ───────────────────────────────── */
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(255,255,255,0.1);
-  border-top-color: var(--accent-primary);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-
-/* ── Responsive ────────────────────────────── */
-
-@media (max-width: 768px) {
-  .sidebar {
-    transform: translateX(-100%);
-  }
-
-  .sidebar.open {
-    transform: translateX(0);
-  }
-
-  .main-content {
-    margin-left: 0;
-  }
-
-  .page-header,
-  .page-body {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-
-/* ── Scrollbar ─────────────────────────────── */
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-
-/* ── Toast ─────────────────────────────────── */
-
-.toast-container {
-  position: fixed;
-  top: 1.5rem;
-  right: 1.5rem;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.toast {
-  padding: 0.875rem 1.25rem;
-  background: var(--bg-card);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  font-size: 0.875rem;
-  animation: toastIn 0.3s ease-out;
-  max-width: 380px;
-}
-
-.toast.success { border-left: 3px solid var(--accent-success); }
-.toast.error   { border-left: 3px solid var(--accent-danger); }
-.toast.info    { border-left: 3px solid var(--accent-info); }
-
-@keyframes toastIn {
-  from { opacity: 0; transform: translateX(20px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-
-.toast-exit {
-  animation: toastOut 0.2s ease-in forwards;
-}
-
-@keyframes toastOut {
-  to { opacity: 0; transform: translateX(20px); }
-}
-
-
-/* ── Page Transitions ──────────────────────── */
-
-.page-section {
-  display: none;
-}
-
-.page-section.active {
-  display: block;
-  animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}

frontend/css/style.css

@@ -1,894 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════
-   AutoForge — Design System
-   Dark developer-tool aesthetic with glassmorphism
-   ═══════════════════════════════════════════════════════════════════ */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-/* ── CSS Custom Properties ───────────────────────────────────────── */
-
-:root {
-    /* Background */
-    --bg-primary: #0a0a0f;
-    --bg-secondary: #12121a;
-    --bg-tertiary: #1a1a28;
-    --bg-surface: rgba(255, 255, 255, 0.03);
-    --bg-surface-hover: rgba(255, 255, 255, 0.06);
-    --bg-glass: rgba(18, 18, 26, 0.75);
-
-    /* Accent gradient */
-    --accent-blue: #00d4ff;
-    --accent-purple: #7b2ff7;
-    --accent-pink: #f72fff;
-    --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-    --gradient-secondary: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
-    --gradient-glow: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 47, 247, 0.15));
-
-    /* Text */
-    --text-primary: #e8e8f0;
-    --text-secondary: #9898b0;
-    --text-muted: #5e5e78;
-    --text-accent: var(--accent-blue);
-
-    /* Status */
-    --status-success: #00e88f;
-    --status-warning: #ffb800;
-    --status-error: #ff4060;
-    --status-pending: #5e5e78;
-
-    /* Borders */
-    --border-subtle: rgba(255, 255, 255, 0.06);
-    --border-medium: rgba(255, 255, 255, 0.1);
-    --border-accent: rgba(0, 212, 255, 0.3);
-
-    /* Shadows */
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
-    --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.1);
-
-    /* Spacing */
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-
-    /* Radius */
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 16px;
-    --radius-xl: 24px;
-
-    /* Typography */
-    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-
-    /* Transitions */
-    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Layout */
-    --sidebar-width: 260px;
-    --header-height: 64px;
-}
-
-/* ── Reset ───────────────────────────────────────────────────────── */
-
-*, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html {
-    font-size: 16px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-    font-family: var(--font-sans);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    line-height: 1.6;
-    min-height: 100vh;
-    overflow-x: hidden;
-}
-
-a {
-    color: var(--text-accent);
-    text-decoration: none;
-    transition: color var(--transition-fast);
-}
-
-a:hover {
-    color: var(--accent-purple);
-}
-
-/* ── Scrollbar ───────────────────────────────────────────────────── */
-
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-secondary);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--bg-tertiary);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.15);
-}
-
-/* ── Glass Panel ─────────────────────────────────────────────────── */
-
-.glass {
-    background: var(--bg-glass);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
-}
-
-.glass-strong {
-    background: rgba(18, 18, 26, 0.9);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    border: 1px solid var(--border-medium);
-    border-radius: var(--radius-lg);
-}
-
-/* ── Layout ──────────────────────────────────────────────────────── */
-
-.app-layout {
-    display: flex;
-    min-height: 100vh;
-}
-
-.sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: var(--sidebar-width);
-    height: 100vh;
-    background: var(--bg-glass);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-right: 1px solid var(--border-subtle);
-    display: flex;
-    flex-direction: column;
-    z-index: 100;
-    transition: transform var(--transition-base);
-}
-
-.sidebar-header {
-    padding: var(--space-xl);
-    border-bottom: 1px solid var(--border-subtle);
-}
-
-.sidebar-brand {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-}
-
-.sidebar-brand .logo {
-    width: 36px;
-    height: 36px;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-    font-size: 1.1rem;
-    color: #fff;
-}
-
-.sidebar-brand h1 {
-    font-size: 1.2rem;
-    font-weight: 700;
-    background: var(--gradient-primary);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.sidebar-nav {
-    flex: 1;
-    padding: var(--space-md);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xs);
-}
-
-.nav-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-md);
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-md);
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    font-weight: 500;
-    transition: all var(--transition-fast);
-    cursor: pointer;
-    border: 1px solid transparent;
-    text-decoration: none;
-}
-
-.nav-item:hover {
-    background: var(--bg-surface-hover);
-    color: var(--text-primary);
-    border-color: var(--border-subtle);
-}
-
-.nav-item.active {
-    background: var(--gradient-glow);
-    color: var(--text-accent);
-    border-color: var(--border-accent);
-}
-
-.nav-item .icon {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-}
-
-.sidebar-footer {
-    padding: var(--space-md) var(--space-xl);
-    border-top: 1px solid var(--border-subtle);
-}
-
-.main-content {
-    margin-left: var(--sidebar-width);
-    flex: 1;
-    padding: var(--space-2xl);
-    min-height: 100vh;
-}
-
-/* ── Page Header ─────────────────────────────────────────────────── */
-
-.page-header {
-    margin-bottom: var(--space-2xl);
-}
-
-.page-header h2 {
-    font-size: 1.75rem;
-    font-weight: 700;
-    margin-bottom: var(--space-xs);
-}
-
-.page-header p {
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-}
-
-/* ── Cards ───────────────────────────────────────────────────────── */
-
-.card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
-    transition: all var(--transition-base);
-}
-
-.card:hover {
-    border-color: var(--border-medium);
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-}
-
-.card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: var(--space-lg);
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--space-md);
-}
-
-.card-title {
-    font-size: 1rem;
-    font-weight: 600;
-}
-
-/* ── Status Badges ───────────────────────────────────────────────── */
-
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: var(--space-xs) var(--space-sm);
-    border-radius: 999px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.badge-pending {
-    background: rgba(94, 94, 120, 0.2);
-    color: var(--status-pending);
-    border: 1px solid rgba(94, 94, 120, 0.3);
-}
-
-.badge-running {
-    background: rgba(0, 212, 255, 0.1);
-    color: var(--accent-blue);
-    border: 1px solid rgba(0, 212, 255, 0.3);
-    animation: pulse-glow 2s infinite;
-}
-
-.badge-completed {
-    background: rgba(0, 232, 143, 0.1);
-    color: var(--status-success);
-    border: 1px solid rgba(0, 232, 143, 0.3);
-}
-
-.badge-failed {
-    background: rgba(255, 64, 96, 0.1);
-    color: var(--status-error);
-    border: 1px solid rgba(255, 64, 96, 0.3);
-}
-
-/* ── Buttons ─────────────────────────────────────────────────────── */
-
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-sm);
-    padding: 0.65rem 1.5rem;
-    border-radius: var(--radius-md);
-    font-family: var(--font-sans);
-    font-size: 0.9rem;
-    font-weight: 600;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: all var(--transition-fast);
-    outline: none;
-}
-
-.btn:active {
-    transform: scale(0.97);
-}
-
-.btn-primary {
-    background: var(--gradient-primary);
-    color: #fff;
-    border: none;
-    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);
-}
-
-.btn-primary:hover {
-    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.35);
-    transform: translateY(-1px);
-}
-
-.btn-secondary {
-    background: var(--bg-surface);
-    color: var(--text-primary);
-    border: 1px solid var(--border-medium);
-}
-
-.btn-secondary:hover {
-    background: var(--bg-surface-hover);
-    border-color: var(--border-accent);
-}
-
-.btn-ghost {
-    background: transparent;
-    color: var(--text-secondary);
-    border: none;
-}
-
-.btn-ghost:hover {
-    color: var(--text-primary);
-    background: var(--bg-surface);
-}
-
-.btn-danger {
-    background: rgba(255, 64, 96, 0.15);
-    color: var(--status-error);
-    border: 1px solid rgba(255, 64, 96, 0.3);
-}
-
-.btn-danger:hover {
-    background: rgba(255, 64, 96, 0.25);
-}
-
-.btn-lg {
-    padding: 0.85rem 2rem;
-    font-size: 1rem;
-}
-
-.btn-sm {
-    padding: 0.4rem 0.9rem;
-    font-size: 0.8rem;
-}
-
-/* ── Forms ────────────────────────────────────────────────────────── */
-
-.form-group {
-    margin-bottom: var(--space-lg);
-}
-
-.form-label {
-    display: block;
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-    margin-bottom: var(--space-sm);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.form-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-md);
-    color: var(--text-primary);
-    font-family: var(--font-sans);
-    font-size: 0.95rem;
-    transition: all var(--transition-fast);
-    outline: none;
-}
-
-.form-input:focus {
-    border-color: var(--accent-blue);
-    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
-}
-
-.form-input::placeholder {
-    color: var(--text-muted);
-}
-
-textarea.form-input {
-    resize: vertical;
-    min-height: 120px;
-    font-family: var(--font-mono);
-    font-size: 0.9rem;
-    line-height: 1.7;
-}
-
-/* ── Auth Layout ─────────────────────────────────────────────────── */
-
-.auth-layout {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: var(--space-xl);
-    position: relative;
-}
-
-.auth-layout::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(ellipse at 30% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
-                radial-gradient(ellipse at 70% 80%, rgba(123, 47, 247, 0.08) 0%, transparent 50%);
-    animation: bg-drift 20s ease-in-out infinite alternate;
-    pointer-events: none;
-}
-
-.auth-card {
-    width: 100%;
-    max-width: 440px;
-    padding: var(--space-2xl);
-    position: relative;
-    z-index: 1;
-}
-
-.auth-header {
-    text-align: center;
-    margin-bottom: var(--space-2xl);
-}
-
-.auth-header .logo-large {
-    width: 64px;
-    height: 64px;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: #fff;
-    margin: 0 auto var(--space-lg);
-    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.25);
-}
-
-.auth-header h2 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: var(--space-xs);
-}
-
-.auth-header p {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.auth-toggle {
-    text-align: center;
-    margin-top: var(--space-xl);
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.auth-toggle a {
-    font-weight: 600;
-}
-
-.form-error {
-    color: var(--status-error);
-    font-size: 0.85rem;
-    margin-top: var(--space-sm);
-    display: none;
-}
-
-.form-error.visible {
-    display: block;
-}
-
-/* ── Workflow Card ───────────────────────────────────────────────── */
-
-.workflow-card {
-    cursor: pointer;
-}
-
-.workflow-card .prompt-preview {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    line-height: 1.5;
-    margin-bottom: var(--space-md);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.workflow-card .meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
-
-/* ── Create Workflow Card ────────────────────────────────────────── */
-
-.create-card {
-    border: 2px dashed var(--border-medium);
-    background: transparent;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 200px;
-    cursor: pointer;
-    transition: all var(--transition-base);
-}
-
-.create-card:hover {
-    border-color: var(--accent-blue);
-    background: var(--gradient-glow);
-}
-
-.create-card .icon-large {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--gradient-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    color: #fff;
-    margin-bottom: var(--space-md);
-}
-
-.create-card p {
-    color: var(--text-secondary);
-    font-weight: 500;
-}
-
-/* ── Modal ────────────────────────────────────────────────────────── */
-
-.modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--transition-base);
-}
-
-.modal-overlay.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.modal {
-    width: 100%;
-    max-width: 560px;
-    padding: var(--space-2xl);
-    transform: translateY(20px) scale(0.95);
-    transition: transform var(--transition-base);
-}
-
-.modal-overlay.active .modal {
-    transform: translateY(0) scale(1);
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--space-xl);
-}
-
-.modal-header h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-}
-
-.modal-close {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
-    color: var(--text-secondary);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-    transition: all var(--transition-fast);
-}
-
-.modal-close:hover {
-    background: var(--bg-surface-hover);
-    color: var(--text-primary);
-}
-
-/* ── Stats Bar ───────────────────────────────────────────────────── */
-
-.stats-bar {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: var(--space-lg);
-    margin-bottom: var(--space-2xl);
-}
-
-.stat-card {
-    padding: var(--space-lg);
-}
-
-.stat-card .stat-value {
-    font-size: 2rem;
-    font-weight: 700;
-    background: var(--gradient-primary);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.stat-card .stat-label {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    margin-top: var(--space-xs);
-}
-
-/* ── Empty State ─────────────────────────────────────────────────── */
-
-.empty-state {
-    text-align: center;
-    padding: var(--space-2xl) * 2;
-    color: var(--text-muted);
-}
-
-.empty-state .icon-empty {
-    font-size: 3rem;
-    margin-bottom: var(--space-lg);
-    opacity: 0.5;
-}
-
-.empty-state h3 {
-    font-size: 1.1rem;
-    color: var(--text-secondary);
-    margin-bottom: var(--space-sm);
-}
-
-/* ── Loading Spinner ─────────────────────────────────────────────── */
-
-.spinner {
-    width: 24px;
-    height: 24px;
-    border: 3px solid var(--border-subtle);
-    border-top-color: var(--accent-blue);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-.spinner-sm {
-    width: 16px;
-    height: 16px;
-    border-width: 2px;
-}
-
-/* ── Notifications ───────────────────────────────────────────────── */
-
-.toast {
-    position: fixed;
-    bottom: var(--space-xl);
-    right: var(--space-xl);
-    padding: var(--space-md) var(--space-lg);
-    border-radius: var(--radius-md);
-    font-size: 0.9rem;
-    font-weight: 500;
-    z-index: 2000;
-    transform: translateY(100px);
-    opacity: 0;
-    transition: all var(--transition-base);
-}
-
-.toast.visible {
-    transform: translateY(0);
-    opacity: 1;
-}
-
-.toast-success {
-    background: rgba(0, 232, 143, 0.15);
-    border: 1px solid rgba(0, 232, 143, 0.3);
-    color: var(--status-success);
-}
-
-.toast-error {
-    background: rgba(255, 64, 96, 0.15);
-    border: 1px solid rgba(255, 64, 96, 0.3);
-    color: var(--status-error);
-}
-
-/* ── Placeholder Pages ───────────────────────────────────────────── */
-
-.placeholder-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    text-align: center;
-}
-
-.placeholder-content .icon-placeholder {
-    font-size: 4rem;
-    margin-bottom: var(--space-lg);
-    opacity: 0.3;
-}
-
-.placeholder-content h3 {
-    font-size: 1.3rem;
-    margin-bottom: var(--space-sm);
-}
-
-.placeholder-content p {
-    color: var(--text-muted);
-    max-width: 400px;
-}
-
-/* ── User Menu ───────────────────────────────────────────────────── */
-
-.user-menu {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: background var(--transition-fast);
-}
-
-.user-menu:hover {
-    background: var(--bg-surface-hover);
-}
-
-.user-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--gradient-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-    font-size: 0.85rem;
-    color: #fff;
-}
-
-.user-name {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-}
-
-/* ── Animations ──────────────────────────────────────────────────── */
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-@keyframes pulse-glow {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-
-@keyframes bg-drift {
-    0% { transform: translate(0, 0) rotate(0deg); }
-    100% { transform: translate(-2%, -2%) rotate(1deg); }
-}
-
-@keyframes fade-in {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-in {
-    animation: fade-in 0.4s ease-out forwards;
-}
-
-/* ── Responsive ──────────────────────────────────────────────────── */
-
-@media (max-width: 768px) {
-    .sidebar {
-        transform: translateX(-100%);
-    }
-
-    .sidebar.open {
-        transform: translateX(0);
-    }
-
-    .main-content {
-        margin-left: 0;
-        padding: var(--space-lg);
-    }
-
-    .card-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .stats-bar {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}

frontend/dashboard.html

@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AutoForge Dashboard — Manage your AI coding workflows">
-    <title>AutoForge — Dashboard</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <div class="app-layout">
-        <!-- Sidebar -->
-        <nav class="sidebar" id="sidebar">
-            <div class="sidebar-header">
-                <div class="sidebar-brand">
-                    <div class="logo">⚡</div>
-                    <h1>AutoForge</h1>
-                </div>
-            </div>
-
-            <div class="sidebar-nav">
-                <a href="dashboard.html" class="nav-item active">
-                    <span class="icon">📊</span>
-                    <span>Dashboard</span>
-                </a>
-                <a href="workflow.html" class="nav-item">
-                    <span class="icon">⚙️</span>
-                    <span>Workflow</span>
-                </a>
-                <a href="history.html" class="nav-item">
-                    <span class="icon">📜</span>
-                    <span>History</span>
-                </a>
-                <a href="settings.html" class="nav-item">
-                    <span class="icon">🔧</span>
-                    <span>Settings</span>
-                </a>
-            </div>
-
-            <div class="sidebar-footer">
-                <div class="user-menu" id="logout-btn">
-                    <div class="user-avatar" id="user-avatar">U</div>
-                    <span class="user-name" id="user-display-name">User</span>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="main-content">
-            <div class="page-header">
-                <h2>Dashboard</h2>
-                <p>Overview of your autonomous coding workflows</p>
-            </div>
-
-            <!-- Stats -->
-            <div class="stats-bar">
-                <div class="stat-card card glass">
-                    <div class="stat-value" id="stat-total">0</div>
-                    <div class="stat-label">Total Workflows</div>
-                </div>
-                <div class="stat-card card glass">
-                    <div class="stat-value" id="stat-pending">0</div>
-                    <div class="stat-label">Pending</div>
-                </div>
-                <div class="stat-card card glass">
-                    <div class="stat-value" id="stat-completed">0</div>
-                    <div class="stat-label">Completed</div>
-                </div>
-                <div class="stat-card card glass">
-                    <div class="stat-value" id="stat-failed">0</div>
-                    <div class="stat-label">Failed</div>
-                </div>
-            </div>
-
-            <!-- Workflows Grid -->
-            <div class="card-header" style="margin-bottom: 1rem;">
-                <h3 class="card-title">Recent Workflows</h3>
-                <button class="btn btn-primary" onclick="App.openCreateModal()">
-                    + New Workflow
-                </button>
-            </div>
-
-            <div class="card-grid" id="workflows-list">
-                <div class="spinner" style="margin: 3rem auto;"></div>
-            </div>
-        </main>
-    </div>
-
-    <!-- Create Workflow Modal -->
-    <div class="modal-overlay" id="create-modal">
-        <div class="modal glass-strong">
-            <div class="modal-header">
-                <h3>Create New Workflow</h3>
-                <button class="modal-close" onclick="App.closeCreateModal()">✕</button>
-            </div>
-
-            <div class="form-group">
-                <label class="form-label" for="workflow-prompt">What would you like to build?</label>
-                <textarea class="form-input" id="workflow-prompt"
-                    placeholder="e.g. Create a small Python calculator package with add, subtract, multiply and divide functions, including tests and proper division-by-zero handling."></textarea>
-            </div>
-
-            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
-                <button class="btn btn-secondary" onclick="App.closeCreateModal()">Cancel</button>
-                <button class="btn btn-primary" onclick="App.createWorkflow()">Create Workflow</button>
-            </div>
-        </div>
-    </div>
-
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script src="/js/router.js"></script>
-    <script src="/js/app.js"></script>
-    <script>
-        if (Router.init()) {
-            App.initSidebar();
-            App.loadWorkflows();
-        }
-    </script>
-</body>
-</html>

frontend/history.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AutoForge Workflow History">
-    <title>AutoForge — History</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <div class="app-layout">
-        <!-- Sidebar -->
-        <nav class="sidebar">
-            <div class="sidebar-header">
-                <div class="sidebar-brand">
-                    <div class="logo">⚡</div>
-                    <h1>AutoForge</h1>
-                </div>
-            </div>
-            <div class="sidebar-nav">
-                <a href="dashboard.html" class="nav-item">
-                    <span class="icon">📊</span><span>Dashboard</span>
-                </a>
-                <a href="workflow.html" class="nav-item">
-                    <span class="icon">⚙️</span><span>Workflow</span>
-                </a>
-                <a href="history.html" class="nav-item active">
-                    <span class="icon">📜</span><span>History</span>
-                </a>
-                <a href="settings.html" class="nav-item">
-                    <span class="icon">🔧</span><span>Settings</span>
-                </a>
-            </div>
-            <div class="sidebar-footer">
-                <div class="user-menu" id="logout-btn">
-                    <div class="user-avatar" id="user-avatar">U</div>
-                    <span class="user-name" id="user-display-name">User</span>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="main-content">
-            <div class="page-header">
-                <h2>History</h2>
-                <p>Browse all past workflow executions</p>
-            </div>
-
-            <div id="history-list">
-                <div class="spinner" style="margin: 3rem auto;"></div>
-            </div>
-        </main>
-    </div>
-
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script src="/js/router.js"></script>
-    <script src="/js/app.js"></script>
-    <script>
-        if (Router.init()) {
-            App.initSidebar();
-            loadHistory();
-        }
-
-        async function loadHistory() {
-            try {
-                const workflows = await API.get('/api/workflows');
-                const container = document.getElementById('history-list');
-
-                if (workflows.length === 0) {
-                    container.innerHTML = `
-                        <div class="placeholder-content">
-                            <div class="icon-placeholder">📜</div>
-                            <h3>No history yet</h3>
-                            <p>Your completed workflows will appear here.</p>
-                        </div>
-                    `;
-                    return;
-                }
-
-                container.innerHTML = `
-                    <div class="card-grid">
-                        ${workflows.map((wf, i) => `
-                            <div class="card workflow-card fade-in" style="animation-delay: ${i * 0.05}s"
-                                 onclick="window.location.href='/workflow.html?id=${wf.id}'">
-                                <div class="card-header">
-                                    <span class="badge badge-${wf.status}">${wf.status}</span>
-                                    <span class="meta">${new Date(wf.created_at).toLocaleDateString()}</span>
-                                </div>
-                                <div class="prompt-preview">${wf.prompt}</div>
-                                <div class="meta">
-                                    <span>ID: ${wf.id.substring(0, 8)}…</span>
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                `;
-            } catch (err) {
-                App.showToast(err.message, 'error');
-            }
-        }
-    </script>
-</body>
-</html>

frontend/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AutoForge — Autonomous AI Coding System">
-    <title>AutoForge</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script>
-        // Redirect based on auth state
-        if (Auth.isAuthenticated()) {
-            window.location.replace('/dashboard.html');
-        } else {
-            window.location.replace('/login.html');
-        }
-    </script>
-</body>
-</html>

frontend/js/api.js

@@ -1,51 +0,0 @@
-/**
- * AutoForge API Client
- *
- * Wraps fetch() with JWT injection, error handling, and base URL management.
- */
-
-const API = (() => {
-    const BASE_URL = '';
-
-    /**
-     * Make an authenticated API request.
-     */
-    async function request(method, path, body = null) {
-        const headers = { 'Content-Type': 'application/json' };
-
-        const token = localStorage.getItem('autoforge_token');
-        if (token) {
-            headers['Authorization'] = `Bearer ${token}`;
-        }
-
-        const options = { method, headers };
-        if (body) {
-            options.body = JSON.stringify(body);
-        }
-
-        const response = await fetch(`${BASE_URL}${path}`, options);
-
-        if (response.status === 401) {
-            localStorage.removeItem('autoforge_token');
-            localStorage.removeItem('autoforge_user');
-            window.location.href = '/login.html';
-            throw new Error('Session expired');
-        }
-
-        const data = await response.json();
-
-        if (!response.ok) {
-            const message = data.detail || `Request failed (${response.status})`;
-            throw new Error(message);
-        }
-
-        return data;
-    }
-
-    return {
-        get:    (path)       => request('GET', path),
-        post:   (path, body) => request('POST', path, body),
-        put:    (path, body) => request('PUT', path, body),
-        delete: (path)       => request('DELETE', path),
-    };
-})();

frontend/js/app.js

@@ -1,174 +0,0 @@
-/**
- * AutoForge Dashboard Application Logic
- */
-
-const App = (() => {
-    let workflows = [];
-
-    // ── Toast Notifications ─────────────────────────────────────────
-
-    function showToast(message, type = 'success') {
-        // Remove existing toasts
-        document.querySelectorAll('.toast').forEach(t => t.remove());
-
-        const toast = document.createElement('div');
-        toast.className = `toast toast-${type}`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-
-        requestAnimationFrame(() => toast.classList.add('visible'));
-
-        setTimeout(() => {
-            toast.classList.remove('visible');
-            setTimeout(() => toast.remove(), 300);
-        }, 3000);
-    }
-
-    // ── Sidebar ─────────────────────────────────────────────────────
-
-    function initSidebar() {
-        const user = Auth.getUser();
-        const userNameEl = document.getElementById('user-display-name');
-        const userAvatarEl = document.getElementById('user-avatar');
-        const logoutBtn = document.getElementById('logout-btn');
-
-        if (user && userNameEl) {
-            userNameEl.textContent = user.username;
-        }
-        if (user && userAvatarEl) {
-            userAvatarEl.textContent = user.username.charAt(0).toUpperCase();
-        }
-        if (logoutBtn) {
-            logoutBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                Auth.logout();
-            });
-        }
-
-        // Highlight current nav item
-        const currentPage = window.location.pathname.split('/').pop() || 'dashboard.html';
-        document.querySelectorAll('.nav-item').forEach(item => {
-            const href = item.getAttribute('href');
-            if (href && currentPage === href) {
-                item.classList.add('active');
-            }
-        });
-    }
-
-    // ── Workflows ───────────────────────────────────────────────────
-
-    async function loadWorkflows() {
-        try {
-            workflows = await API.get('/api/workflows');
-            renderWorkflows();
-            updateStats();
-        } catch (err) {
-            showToast(err.message, 'error');
-        }
-    }
-
-    function renderWorkflows() {
-        const container = document.getElementById('workflows-list');
-        if (!container) return;
-
-        if (workflows.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state fade-in">
-                    <div class="icon-empty">⚡</div>
-                    <h3>No workflows yet</h3>
-                    <p>Create your first workflow to get started with autonomous code generation.</p>
-                </div>
-            `;
-            return;
-        }
-
-        container.innerHTML = workflows.map((wf, i) => `
-            <div class="card workflow-card fade-in" style="animation-delay: ${i * 0.05}s" onclick="App.viewWorkflow('${wf.id}')">
-                <div class="card-header">
-                    <span class="badge badge-${wf.status}">${wf.status}</span>
-                    <span class="meta">${_formatDate(wf.created_at)}</span>
-                </div>
-                <div class="prompt-preview">${_escapeHtml(wf.prompt)}</div>
-                <div class="meta">
-                    <span>ID: ${wf.id.substring(0, 8)}…</span>
-                </div>
-            </div>
-        `).join('');
-    }
-
-    function updateStats() {
-        const totalEl = document.getElementById('stat-total');
-        const pendingEl = document.getElementById('stat-pending');
-        const completedEl = document.getElementById('stat-completed');
-        const failedEl = document.getElementById('stat-failed');
-
-        if (totalEl) totalEl.textContent = workflows.length;
-        if (pendingEl) pendingEl.textContent = workflows.filter(w => w.status === 'pending').length;
-        if (completedEl) completedEl.textContent = workflows.filter(w => w.status === 'completed').length;
-        if (failedEl) failedEl.textContent = workflows.filter(w => w.status === 'failed').length;
-    }
-
-    // ── Create Workflow ─────────────────────────────────────────────
-
-    function openCreateModal() {
-        const overlay = document.getElementById('create-modal');
-        if (overlay) overlay.classList.add('active');
-    }
-
-    function closeCreateModal() {
-        const overlay = document.getElementById('create-modal');
-        if (overlay) overlay.classList.remove('active');
-        const input = document.getElementById('workflow-prompt');
-        if (input) input.value = '';
-    }
-
-    async function createWorkflow() {
-        const input = document.getElementById('workflow-prompt');
-        const prompt = input ? input.value.trim() : '';
-        if (!prompt) {
-            showToast('Please enter a prompt', 'error');
-            return;
-        }
-
-        try {
-            const wf = await API.post('/api/workflows', { prompt });
-            showToast('Workflow created successfully!');
-            closeCreateModal();
-            await loadWorkflows();
-        } catch (err) {
-            showToast(err.message, 'error');
-        }
-    }
-
-    function viewWorkflow(id) {
-        window.location.href = `/workflow.html?id=${id}`;
-    }
-
-    // ── Helpers ─────────────────────────────────────────────────────
-
-    function _formatDate(iso) {
-        const d = new Date(iso);
-        return d.toLocaleDateString('en-US', {
-            month: 'short', day: 'numeric', year: 'numeric',
-            hour: '2-digit', minute: '2-digit',
-        });
-    }
-
-    function _escapeHtml(str) {
-        const div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML;
-    }
-
-    // ── Public API ──────────────────────────────────────────────────
-
-    return {
-        showToast,
-        initSidebar,
-        loadWorkflows,
-        openCreateModal,
-        closeCreateModal,
-        createWorkflow,
-        viewWorkflow,
-    };
-})();

frontend/js/auth.js

@@ -1,58 +0,0 @@
-/**
- * AutoForge Authentication Helpers
- */
-
-const Auth = (() => {
-    const TOKEN_KEY = 'autoforge_token';
-    const USER_KEY  = 'autoforge_user';
-
-    function getToken() {
-        return localStorage.getItem(TOKEN_KEY);
-    }
-
-    function isAuthenticated() {
-        return !!getToken();
-    }
-
-    function saveSession(token, user = null) {
-        localStorage.setItem(TOKEN_KEY, token);
-        if (user) {
-            localStorage.setItem(USER_KEY, JSON.stringify(user));
-        }
-    }
-
-    function getUser() {
-        const data = localStorage.getItem(USER_KEY);
-        return data ? JSON.parse(data) : null;
-    }
-
-    function logout() {
-        localStorage.removeItem(TOKEN_KEY);
-        localStorage.removeItem(USER_KEY);
-        window.location.href = '/login.html';
-    }
-
-    async function signup(username, email, password) {
-        const data = await API.post('/api/auth/signup', { username, email, password });
-        saveSession(data.access_token);
-
-        // Fetch full user profile
-        const user = await API.get('/api/auth/me');
-        localStorage.setItem(USER_KEY, JSON.stringify(user));
-
-        return user;
-    }
-
-    async function login(username, password) {
-        const data = await API.post('/api/auth/login', { username, password });
-        saveSession(data.access_token);
-
-        // Fetch full user profile
-        const user = await API.get('/api/auth/me');
-        localStorage.setItem(USER_KEY, JSON.stringify(user));
-
-        return user;
-    }
-
-    return { getToken, isAuthenticated, saveSession, getUser, logout, signup, login };
-})();

frontend/js/router.js

@@ -1,26 +0,0 @@
-/**
- * AutoForge Router — Simple navigation guard
- */
-
-const Router = (() => {
-    const PUBLIC_PAGES = ['/login.html', '/login'];
-
-    function init() {
-        const path = window.location.pathname;
-        const isPublic = PUBLIC_PAGES.some(p => path.endsWith(p));
-
-        if (!Auth.isAuthenticated() && !isPublic) {
-            window.location.href = '/login.html';
-            return false;
-        }
-
-        if (Auth.isAuthenticated() && isPublic) {
-            window.location.href = '/dashboard.html';
-            return false;
-        }
-
-        return true;
-    }
-
-    return { init };
-})();

frontend/login.html

@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Sign in to AutoForge — Autonomous AI Coding System">
-    <title>AutoForge — Sign In</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <div class="auth-layout">
-        <div class="auth-card glass-strong">
-            <div class="auth-header">
-                <div class="logo-large">⚡</div>
-                <h2 id="auth-title">Welcome back</h2>
-                <p id="auth-subtitle">Sign in to your AutoForge account</p>
-            </div>
-
-            <form id="auth-form" onsubmit="return false;">
-                <!-- Signup-only fields -->
-                <div id="signup-fields" style="display: none;">
-                    <div class="form-group">
-                        <label class="form-label" for="signup-email">Email</label>
-                        <input class="form-input" type="email" id="signup-email" placeholder="you@example.com" autocomplete="email">
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label" for="auth-username">Username</label>
-                    <input class="form-input" type="text" id="auth-username" placeholder="Enter your username" autocomplete="username" required>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label" for="auth-password">Password</label>
-                    <input class="form-input" type="password" id="auth-password" placeholder="Enter your password" autocomplete="current-password" required>
-                </div>
-
-                <div id="auth-error" class="form-error"></div>
-
-                <button type="submit" class="btn btn-primary btn-lg" id="auth-submit" style="width: 100%; margin-top: 0.5rem;">
-                    Sign In
-                </button>
-            </form>
-
-            <div class="auth-toggle">
-                <span id="toggle-text">Don't have an account?</span>
-                <a href="#" id="toggle-link" onclick="toggleAuthMode(event)">Sign Up</a>
-            </div>
-        </div>
-    </div>
-
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script src="/js/router.js"></script>
-    <script>
-        let isLoginMode = true;
-
-        // Redirect if already authenticated
-        Router.init();
-
-        // Form submit handler
-        document.getElementById('auth-form').addEventListener('submit', handleAuth);
-
-        async function handleAuth(e) {
-            e.preventDefault();
-            const errorEl = document.getElementById('auth-error');
-            errorEl.classList.remove('visible');
-
-            const username = document.getElementById('auth-username').value.trim();
-            const password = document.getElementById('auth-password').value;
-
-            if (!username || !password) {
-                showError('Please fill in all fields');
-                return;
-            }
-
-            const submitBtn = document.getElementById('auth-submit');
-            submitBtn.disabled = true;
-            submitBtn.innerHTML = '<div class="spinner spinner-sm"></div>';
-
-            try {
-                if (isLoginMode) {
-                    await Auth.login(username, password);
-                } else {
-                    const email = document.getElementById('signup-email').value.trim();
-                    if (!email) {
-                        showError('Please enter your email');
-                        return;
-                    }
-                    await Auth.signup(username, email, password);
-                }
-                window.location.href = '/dashboard.html';
-            } catch (err) {
-                showError(err.message);
-            } finally {
-                submitBtn.disabled = false;
-                submitBtn.textContent = isLoginMode ? 'Sign In' : 'Create Account';
-            }
-        }
-
-        function toggleAuthMode(e) {
-            e.preventDefault();
-            isLoginMode = !isLoginMode;
-
-            document.getElementById('auth-title').textContent = isLoginMode ? 'Welcome back' : 'Create account';
-            document.getElementById('auth-subtitle').textContent = isLoginMode
-                ? 'Sign in to your AutoForge account'
-                : 'Get started with AutoForge';
-            document.getElementById('signup-fields').style.display = isLoginMode ? 'none' : 'block';
-            document.getElementById('auth-submit').textContent = isLoginMode ? 'Sign In' : 'Create Account';
-            document.getElementById('toggle-text').textContent = isLoginMode ? "Don't have an account?" : 'Already have an account?';
-            document.getElementById('toggle-link').textContent = isLoginMode ? 'Sign Up' : 'Sign In';
-
-            // Clear error
-            document.getElementById('auth-error').classList.remove('visible');
-        }
-
-        function showError(message) {
-            const el = document.getElementById('auth-error');
-            el.textContent = message;
-            el.classList.add('visible');
-        }
-    </script>
-</body>
-</html>

frontend/settings.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AutoForge Settings">
-    <title>AutoForge — Settings</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <div class="app-layout">
-        <!-- Sidebar -->
-        <nav class="sidebar">
-            <div class="sidebar-header">
-                <div class="sidebar-brand">
-                    <div class="logo">⚡</div>
-                    <h1>AutoForge</h1>
-                </div>
-            </div>
-            <div class="sidebar-nav">
-                <a href="dashboard.html" class="nav-item">
-                    <span class="icon">📊</span><span>Dashboard</span>
-                </a>
-                <a href="workflow.html" class="nav-item">
-                    <span class="icon">⚙️</span><span>Workflow</span>
-                </a>
-                <a href="history.html" class="nav-item">
-                    <span class="icon">📜</span><span>History</span>
-                </a>
-                <a href="settings.html" class="nav-item active">
-                    <span class="icon">🔧</span><span>Settings</span>
-                </a>
-            </div>
-            <div class="sidebar-footer">
-                <div class="user-menu" id="logout-btn">
-                    <div class="user-avatar" id="user-avatar">U</div>
-                    <span class="user-name" id="user-display-name">User</span>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="main-content">
-            <div class="page-header">
-                <h2>Settings</h2>
-                <p>Configure your AutoForge environment</p>
-            </div>
-
-            <div class="card glass fade-in" style="max-width: 640px; margin-bottom: 1.5rem;">
-                <div class="card-header">
-                    <span class="card-title">LLM Configuration</span>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="gemini-key">Gemini API Key</label>
-                    <input class="form-input" type="password" id="gemini-key" placeholder="Your API key (stored server-side via .env)" disabled>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="gemini-model">Model</label>
-                    <input class="form-input" type="text" id="gemini-model" placeholder="gemini-2.0-flash" disabled>
-                </div>
-                <p style="color: var(--text-muted); font-size: 0.85rem;">
-                    LLM settings are configured via the <code style="color: var(--accent-blue);">.env</code> file on the server.
-                    UI-based configuration will be available in a future phase.
-                </p>
-            </div>
-
-            <div class="card glass fade-in" style="max-width: 640px; animation-delay: 0.1s;">
-                <div class="card-header">
-                    <span class="card-title">Account</span>
-                </div>
-                <div id="account-info" style="color: var(--text-secondary); margin-bottom: 1rem;">
-                    Loading…
-                </div>
-                <button class="btn btn-danger" onclick="Auth.logout()">Sign Out</button>
-            </div>
-        </main>
-    </div>
-
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script src="/js/router.js"></script>
-    <script src="/js/app.js"></script>
-    <script>
-        if (Router.init()) {
-            App.initSidebar();
-            const user = Auth.getUser();
-            if (user) {
-                document.getElementById('account-info').innerHTML = `
-                    <p><strong>Username:</strong> ${user.username}</p>
-                    <p><strong>Email:</strong> ${user.email}</p>
-                    <p><strong>Member since:</strong> ${new Date(user.created_at).toLocaleDateString()}</p>
-                `;
-            }
-        }
-    </script>
-</body>
-</html>

frontend/workflow.html

@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AutoForge Workflow Details">
-    <title>AutoForge — Workflow</title>
-    <link rel="stylesheet" href="/css/style.css">
-</head>
-<body>
-    <div class="app-layout">
-        <!-- Sidebar -->
-        <nav class="sidebar">
-            <div class="sidebar-header">
-                <div class="sidebar-brand">
-                    <div class="logo">⚡</div>
-                    <h1>AutoForge</h1>
-                </div>
-            </div>
-            <div class="sidebar-nav">
-                <a href="dashboard.html" class="nav-item">
-                    <span class="icon">📊</span><span>Dashboard</span>
-                </a>
-                <a href="workflow.html" class="nav-item active">
-                    <span class="icon">⚙️</span><span>Workflow</span>
-                </a>
-                <a href="history.html" class="nav-item">
-                    <span class="icon">📜</span><span>History</span>
-                </a>
-                <a href="settings.html" class="nav-item">
-                    <span class="icon">🔧</span><span>Settings</span>
-                </a>
-            </div>
-            <div class="sidebar-footer">
-                <div class="user-menu" id="logout-btn">
-                    <div class="user-avatar" id="user-avatar">U</div>
-                    <span class="user-name" id="user-display-name">User</span>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="main-content">
-            <div class="page-header">
-                <h2>Workflow Details</h2>
-                <p id="workflow-id-display">Loading…</p>
-            </div>
-
-            <div id="workflow-detail">
-                <div class="spinner" style="margin: 3rem auto;"></div>
-            </div>
-        </main>
-    </div>
-
-    <script src="/js/api.js"></script>
-    <script src="/js/auth.js"></script>
-    <script src="/js/router.js"></script>
-    <script src="/js/app.js"></script>
-    <script>
-        if (Router.init()) {
-            App.initSidebar();
-
-            const params = new URLSearchParams(window.location.search);
-            const id = params.get('id');
-
-            if (id) {
-                loadWorkflowDetail(id);
-            } else {
-                document.getElementById('workflow-detail').innerHTML = `
-                    <div class="placeholder-content">
-                        <div class="icon-placeholder">⚙️</div>
-                        <h3>Select a Workflow</h3>
-                        <p>Choose a workflow from the dashboard to view its details and execution progress.</p>
-                    </div>
-                `;
-            }
-
-            async function loadWorkflowDetail(workflowId) {
-                try {
-                    const wf = await API.get(`/api/workflows/${workflowId}`);
-                    document.getElementById('workflow-id-display').textContent = `ID: ${wf.id}`;
-                    document.getElementById('workflow-detail').innerHTML = `
-                        <div class="card glass fade-in" style="margin-bottom: 1.5rem;">
-                            <div class="card-header">
-                                <span class="card-title">Prompt</span>
-                                <span class="badge badge-${wf.status}">${wf.status}</span>
-                            </div>
-                            <p style="color: var(--text-secondary); line-height: 1.7; font-family: var(--font-mono); font-size: 0.9rem;">${wf.prompt}</p>
-                        </div>
-                        <div class="card glass fade-in" style="animation-delay: 0.1s;">
-                            <div class="card-header">
-                                <span class="card-title">Tasks</span>
-                                <span class="badge badge-pending">${wf.tasks.length} task(s)</span>
-                            </div>
-                            ${wf.tasks.length === 0
-                                ? '<p style="color: var(--text-muted);">No tasks created yet. DAG execution will populate tasks in a future phase.</p>'
-                                : wf.tasks.map(t => `
-                                    <div style="padding: 0.75rem; border-bottom: 1px solid var(--border-subtle);">
-                                        <strong>${t.task_type}</strong> — <span class="badge badge-${t.status}">${t.status}</span>
-                                    </div>
-                                `).join('')
-                            }
-                        </div>
-                    `;
-                } catch (err) {
-                    document.getElementById('workflow-detail').innerHTML = `
-                        <div class="placeholder-content">
-                            <div class="icon-placeholder">❌</div>
-                            <h3>Error</h3>
-                            <p>${err.message}</p>
-                        </div>
-                    `;
-                }
-            }
-        }
-    </script>
-</body>
-</html>