diff --git a/public/dashboard.html b/public/dashboard.html
new file mode 100644
index 0000000..9820b7e
--- /dev/null
+++ b/public/dashboard.html
@@ -0,0 +1,1257 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ImgForge — Dashboard</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.2/babel.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #08080b;
+      --surface: #0e0e13;
+      --surface-2: #161620;
+      --surface-3: #1e1e2a;
+      --border: #252533;
+      --border-active: #3a3a50;
+      --text: #dcdce5;
+      --text-2: #9494a8;
+      --text-3: #5e5e72;
+      --accent: #e85d2c;
+      --accent-dim: rgba(232, 93, 44, 0.12);
+      --green: #2dd4a0;
+      --green-dim: rgba(45, 212, 160, 0.12);
+      --blue: #5b9cf5;
+      --blue-dim: rgba(91, 156, 245, 0.12);
+      --yellow: #f0b232;
+      --yellow-dim: rgba(240, 178, 50, 0.12);
+      --red: #ef5454;
+      --red-dim: rgba(239, 84, 84, 0.12);
+      --mono: 'IBM Plex Mono', monospace;
+      --sans: 'DM Sans', sans-serif;
+      --radius: 8px;
+      --radius-lg: 12px;
+    }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* Scanline overlay */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(0,0,0,0.03) 2px,
+        rgba(0,0,0,0.03) 4px
+      );
+      pointer-events: none;
+      z-index: 10000;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateX(-12px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    @keyframes barGrow {
+      from { transform: scaleX(0); }
+      to { transform: scaleX(1); }
+    }
+
+    .app {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 32px 24px;
+    }
+
+    /* --- Header --- */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 36px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid var(--border);
+      animation: fadeIn 0.4s ease;
+    }
+
+    .header-left { display: flex; align-items: center; gap: 16px; }
+
+    .logo-mark {
+      width: 36px;
+      height: 36px;
+      background: var(--accent);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--mono);
+      font-weight: 700;
+      font-size: 16px;
+      color: #fff;
+      box-shadow: 0 0 20px rgba(232, 93, 44, 0.25);
+    }
+
+    .header-title {
+      font-family: var(--mono);
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      color: var(--text);
+    }
+
+    .header-sub {
+      font-size: 12px;
+      color: var(--text-3);
+      font-family: var(--mono);
+      margin-top: 2px;
+    }
+
+    .header-right { display: flex; align-items: center; gap: 12px; }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 8px var(--green);
+      animation: pulse 2s infinite;
+    }
+
+    .status-dot.offline { background: var(--red); box-shadow: 0 0 8px var(--red); }
+
+    .status-text {
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text-2);
+    }
+
+    .refresh-btn {
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 8px 14px;
+      color: var(--text-2);
+      font-family: var(--mono);
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.15s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .refresh-btn:hover { border-color: var(--accent); color: var(--text); }
+    .refresh-btn.spinning svg { animation: spin 0.6s linear; }
+    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+    /* --- Metric Cards --- */
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 12px;
+      margin-bottom: 32px;
+    }
+
+    .metric-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: 20px;
+      position: relative;
+      overflow: hidden;
+      animation: fadeIn 0.5s ease backwards;
+    }
+
+    .metric-card:nth-child(1) { animation-delay: 0.05s; }
+    .metric-card:nth-child(2) { animation-delay: 0.1s; }
+    .metric-card:nth-child(3) { animation-delay: 0.15s; }
+    .metric-card:nth-child(4) { animation-delay: 0.2s; }
+    .metric-card:nth-child(5) { animation-delay: 0.25s; }
+
+    .metric-card::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+    }
+
+    .metric-card.waiting::after { background: var(--yellow); }
+    .metric-card.active::after { background: var(--blue); }
+    .metric-card.completed::after { background: var(--green); }
+    .metric-card.failed::after { background: var(--red); }
+    .metric-card.total::after { background: var(--accent); }
+
+    .metric-label {
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-3);
+      margin-bottom: 10px;
+    }
+
+    .metric-value {
+      font-family: var(--mono);
+      font-size: 32px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .metric-card.waiting .metric-value { color: var(--yellow); }
+    .metric-card.active .metric-value { color: var(--blue); }
+    .metric-card.completed .metric-value { color: var(--green); }
+    .metric-card.failed .metric-value { color: var(--red); }
+    .metric-card.total .metric-value { color: var(--accent); }
+
+    /* --- Tabs --- */
+    .tabs {
+      display: flex;
+      gap: 2px;
+      margin-bottom: 20px;
+      background: var(--surface);
+      border-radius: var(--radius);
+      padding: 3px;
+      border: 1px solid var(--border);
+      width: fit-content;
+      animation: fadeIn 0.5s ease 0.3s backwards;
+    }
+
+    .tab {
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 500;
+      padding: 8px 18px;
+      border: none;
+      background: transparent;
+      color: var(--text-3);
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s;
+    }
+
+    .tab:hover { color: var(--text-2); }
+
+    .tab.active {
+      background: var(--surface-3);
+      color: var(--text);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    }
+
+    .tab .count {
+      display: inline-block;
+      min-width: 18px;
+      text-align: center;
+      padding: 1px 6px;
+      border-radius: 10px;
+      font-size: 10px;
+      margin-left: 6px;
+      background: var(--surface-2);
+      color: var(--text-3);
+    }
+
+    .tab.active .count { background: var(--accent-dim); color: var(--accent); }
+
+    /* --- Table --- */
+    .table-wrap {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      animation: fadeIn 0.5s ease 0.35s backwards;
+    }
+
+    .table-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .table-title {
+      font-family: var(--mono);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-3);
+    }
+
+    .table-actions { display: flex; gap: 8px; }
+
+    .action-btn {
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 6px 12px;
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-2);
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .action-btn:hover { border-color: var(--border-active); color: var(--text); }
+    .action-btn.danger:hover { border-color: var(--red); color: var(--red); }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    thead th {
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-3);
+      text-align: left;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      font-weight: 500;
+    }
+
+    tbody tr {
+      border-bottom: 1px solid var(--border);
+      transition: background 0.1s;
+    }
+
+    tbody tr:last-child { border-bottom: none; }
+    tbody tr:hover { background: var(--surface-2); }
+
+    td {
+      padding: 14px 16px;
+      font-size: 13px;
+      vertical-align: middle;
+    }
+
+    .job-id-cell {
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    .ops-list {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .op-chip {
+      font-family: var(--mono);
+      font-size: 10px;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background: var(--surface-3);
+      color: var(--text-2);
+      border: 1px solid var(--border);
+    }
+
+    /* Status badges */
+    .badge {
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 4px;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .badge::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+
+    .badge.waiting { background: var(--yellow-dim); color: var(--yellow); }
+    .badge.waiting::before { background: var(--yellow); }
+    .badge.active { background: var(--blue-dim); color: var(--blue); }
+    .badge.active::before { background: var(--blue); animation: pulse 1.5s infinite; }
+    .badge.completed { background: var(--green-dim); color: var(--green); }
+    .badge.completed::before { background: var(--green); }
+    .badge.failed { background: var(--red-dim); color: var(--red); }
+    .badge.failed::before { background: var(--red); }
+    .badge.delayed { background: var(--surface-3); color: var(--text-3); }
+    .badge.delayed::before { background: var(--text-3); }
+
+    /* Progress bar in table */
+    .mini-progress {
+      width: 80px;
+      height: 4px;
+      background: var(--surface-3);
+      border-radius: 2px;
+      overflow: hidden;
+      margin-top: 4px;
+    }
+
+    .mini-progress-bar {
+      height: 100%;
+      border-radius: 2px;
+      background: var(--blue);
+      transition: width 0.3s ease;
+    }
+
+    .mini-progress-bar.done { background: var(--green); }
+
+    .progress-text {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-2);
+    }
+
+    .time-cell {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-3);
+    }
+
+    .size-cell {
+      font-family: var(--mono);
+      font-size: 12px;
+    }
+
+    .savings-positive { color: var(--green); }
+    .savings-negative { color: var(--red); }
+
+    /* Row action buttons */
+    .row-actions { display: flex; gap: 4px; }
+
+    .row-btn {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-3);
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s;
+    }
+
+    .row-btn:hover { border-color: var(--border-active); color: var(--text); background: var(--surface-3); }
+    .row-btn.retry:hover { border-color: var(--blue); color: var(--blue); }
+    .row-btn.download:hover { border-color: var(--green); color: var(--green); }
+    .row-btn.remove:hover { border-color: var(--red); color: var(--red); }
+    .row-btn:disabled { opacity: 0.25; cursor: not-allowed; }
+
+    /* Empty state */
+    .empty-state {
+      text-align: center;
+      padding: 60px 20px;
+    }
+
+    .empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.3; }
+
+    .empty-text {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--text-3);
+    }
+
+    /* --- Detail Drawer --- */
+    .drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.6);
+      z-index: 1000;
+      animation: fadeIn 0.2s ease;
+    }
+
+    .drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 440px;
+      max-width: 90vw;
+      height: 100vh;
+      background: var(--surface);
+      border-left: 1px solid var(--border);
+      z-index: 1001;
+      overflow-y: auto;
+      animation: slideDrawer 0.25s ease;
+      display: flex;
+      flex-direction: column;
+    }
+
+    @keyframes slideDrawer {
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    }
+
+    .drawer-header {
+      padding: 24px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      position: sticky;
+      top: 0;
+      background: var(--surface);
+      z-index: 1;
+    }
+
+    .drawer-title {
+      font-family: var(--mono);
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .drawer-close {
+      background: none;
+      border: none;
+      color: var(--text-3);
+      cursor: pointer;
+      font-size: 20px;
+      padding: 4px;
+    }
+
+    .drawer-close:hover { color: var(--text); }
+
+    .drawer-body { padding: 24px; flex: 1; }
+
+    .detail-section {
+      margin-bottom: 24px;
+    }
+
+    .detail-label {
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-3);
+      margin-bottom: 8px;
+    }
+
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--border);
+      font-size: 13px;
+    }
+
+    .detail-row:last-child { border-bottom: none; }
+
+    .detail-key { color: var(--text-2); font-family: var(--mono); font-size: 12px; }
+    .detail-val { color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 500; }
+
+    .detail-ops {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .detail-op-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      background: var(--surface-2);
+      border-radius: 6px;
+      border: 1px solid var(--border);
+    }
+
+    .detail-op-num {
+      font-family: var(--mono);
+      font-size: 10px;
+      font-weight: 700;
+      color: var(--text-3);
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      background: var(--surface-3);
+    }
+
+    .detail-op-name {
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--accent);
+    }
+
+    .detail-op-params {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-3);
+      margin-left: auto;
+    }
+
+    .error-block {
+      background: var(--red-dim);
+      border: 1px solid rgba(239, 84, 84, 0.25);
+      border-radius: var(--radius);
+      padding: 14px;
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--red);
+      line-height: 1.5;
+    }
+
+    .drawer-actions {
+      padding: 20px 24px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      gap: 8px;
+      position: sticky;
+      bottom: 0;
+      background: var(--surface);
+    }
+
+    .drawer-btn {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.15s;
+      text-align: center;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .drawer-btn.primary {
+      background: var(--accent);
+      color: #fff;
+      border-color: var(--accent);
+    }
+
+    .drawer-btn.primary:hover { filter: brightness(1.15); }
+
+    .drawer-btn.secondary {
+      background: transparent;
+      color: var(--text-2);
+    }
+
+    .drawer-btn.secondary:hover { border-color: var(--border-active); color: var(--text); }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .metrics { grid-template-columns: repeat(3, 1fr); }
+      .metrics .metric-card:nth-child(4),
+      .metrics .metric-card:nth-child(5) { grid-column: span 1; }
+      td:nth-child(5), th:nth-child(5) { display: none; } /* hide time on mobile */
+    }
+
+    @media (max-width: 560px) {
+      .metrics { grid-template-columns: repeat(2, 1fr); }
+      .header { flex-direction: column; align-items: flex-start; gap: 12px; }
+    }
+
+    /* Loading skeleton */
+    .skeleton {
+      background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 4px;
+    }
+
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+  </style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { useState, useEffect, useCallback, useRef } = React;
+
+// --- API helpers ---
+const API = window.location.origin;
+
+async function fetchHealth() {
+  const res = await fetch(`${API}/api/health`);
+  return res.json();
+}
+
+async function fetchJob(id) {
+  const res = await fetch(`${API}/api/jobs/${id}`);
+  return res.json();
+}
+
+async function fetchAllJobs() {
+  // Bull Board API gives us queue data, but we'll use our health endpoint
+  // and track jobs client-side via localStorage + polling
+  const res = await fetch(`${API}/api/health`);
+  return res.json();
+}
+
+// --- Persistent job tracker (survives refresh) ---
+function useJobStore() {
+  const [jobs, setJobs] = useState(() => {
+    try {
+      return JSON.parse(sessionStorage.getItem('imgforge_jobs') || '[]');
+    } catch { return []; }
+  });
+
+  const save = useCallback((updated) => {
+    setJobs(updated);
+    sessionStorage.setItem('imgforge_jobs', JSON.stringify(updated));
+  }, []);
+
+  const addJob = useCallback((job) => {
+    save(prev => [job, ...prev]);
+  }, [save]);
+
+  const updateJob = useCallback((id, patch) => {
+    save(prev => prev.map(j => j.jobId === id ? { ...j, ...patch } : j));
+  }, [save]);
+
+  const removeJob = useCallback((id) => {
+    save(prev => prev.filter(j => j.jobId !== id));
+  }, [save]);
+
+  const clearCompleted = useCallback(() => {
+    save(prev => prev.filter(j => j.status !== 'completed'));
+  }, [save]);
+
+  return { jobs, addJob, updateJob, removeJob, clearCompleted, setJobs: save };
+}
+
+// --- SVG Icons ---
+const Icons = {
+  refresh: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>,
+  retry: '↻',
+  download: '↓',
+  trash: '×',
+  eye: '◉',
+  close: '×',
+};
+
+// --- Components ---
+
+function MetricCard({ label, value, type }) {
+  return (
+    <div className={`metric-card ${type}`}>
+      <div className="metric-label">{label}</div>
+      <div className="metric-value">{value}</div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }) {
+  const labels = {
+    waiting: 'Queued', queued: 'Queued',
+    active: 'Processing',
+    completed: 'Done',
+    failed: 'Failed',
+    delayed: 'Delayed',
+  };
+  const cls = status === 'queued' ? 'waiting' : status;
+  return <span className={`badge ${cls}`}>{labels[status] || status}</span>;
+}
+
+function JobRow({ job, onRetry, onRemove, onSelect }) {
+  const isActive = job.status === 'active';
+  const isDone = job.status === 'completed';
+  const isFailed = job.status === 'failed';
+
+  return (
+    <tr>
+      <td>
+        <div className="job-id-cell" style={{cursor:'pointer'}} onClick={() => onSelect(job)}>
+          #{job.jobId}
+        </div>
+      </td>
+      <td>
+        <div className="ops-list">
+          {(job.operations || []).map((op, i) => (
+            <span key={i} className="op-chip">{op}</span>
+          ))}
+        </div>
+      </td>
+      <td><StatusBadge status={job.status} /></td>
+      <td>
+        {isActive && (
+          <div>
+            <div className="progress-text">{job.progress || 0}%</div>
+            <div className="mini-progress">
+              <div className="mini-progress-bar" style={{width: `${job.progress || 0}%`}} />
+            </div>
+          </div>
+        )}
+        {isDone && (
+          <div>
+            <div className="progress-text">100%</div>
+            <div className="mini-progress">
+              <div className="mini-progress-bar done" style={{width: '100%'}} />
+            </div>
+          </div>
+        )}
+        {isFailed && <span style={{fontFamily:'var(--mono)',fontSize:11,color:'var(--red)'}}>err</span>}
+      </td>
+      <td>
+        {job.result?.savings ? (
+          <span className={`size-cell ${job.result.savings.percent > 0 ? 'savings-positive' : 'savings-negative'}`}>
+            {job.result.savings.percent > 0 ? '−' : '+'}{Math.abs(job.result.savings.percent)}%
+          </span>
+        ) : <span className="size-cell" style={{color:'var(--text-3)'}}>—</span>}
+      </td>
+      <td className="time-cell">{job.createdAt ? timeAgo(job.createdAt) : '—'}</td>
+      <td>
+        <div className="row-actions">
+          <button className="row-btn" title="Details" onClick={() => onSelect(job)}>
+            {Icons.eye}
+          </button>
+          {isDone && (
+            <a className="row-btn download" title="Download" href={`${API}/api/jobs/${job.jobId}/download`}>
+              {Icons.download}
+            </a>
+          )}
+          {isFailed && (
+            <button className="row-btn retry" title="Retry" onClick={() => onRetry(job)}>
+              {Icons.retry}
+            </button>
+          )}
+          <button className="row-btn remove" title="Remove" onClick={() => onRemove(job.jobId)}>
+            {Icons.trash}
+          </button>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function JobDetail({ job, onClose, onRetry }) {
+  if (!job) return null;
+
+  return (
+    <>
+      <div className="drawer-overlay" onClick={onClose} />
+      <div className="drawer">
+        <div className="drawer-header">
+          <div>
+            <div className="drawer-title">Job #{job.jobId}</div>
+            <div style={{marginTop:6}}><StatusBadge status={job.status} /></div>
+          </div>
+          <button className="drawer-close" onClick={onClose}>{Icons.close}</button>
+        </div>
+
+        <div className="drawer-body">
+          <div className="detail-section">
+            <div className="detail-label">Overview</div>
+            <div className="detail-row">
+              <span className="detail-key">Created</span>
+              <span className="detail-val">{job.createdAt ? new Date(job.createdAt).toLocaleString() : '—'}</span>
+            </div>
+            {job.result?.processingTime && (
+              <div className="detail-row">
+                <span className="detail-key">Processing Time</span>
+                <span className="detail-val">{job.result.processingTime}ms</span>
+              </div>
+            )}
+            {job.attempts > 0 && (
+              <div className="detail-row">
+                <span className="detail-key">Attempts</span>
+                <span className="detail-val">{job.attempts}/3</span>
+              </div>
+            )}
+          </div>
+
+          <div className="detail-section">
+            <div className="detail-label">Pipeline ({(job.operations || []).length} ops)</div>
+            <div className="detail-ops">
+              {(job.operationsDetail || job.operations || []).map((op, i) => {
+                const opObj = typeof op === 'string' ? { op } : op;
+                return (
+                  <div key={i} className="detail-op-item">
+                    <span className="detail-op-num">{i + 1}</span>
+                    <span className="detail-op-name">{opObj.op || op}</span>
+                    {opObj.params && Object.keys(opObj.params).length > 0 && (
+                      <span className="detail-op-params">
+                        {Object.entries(opObj.params).map(([k,v]) => `${k}:${v}`).join(' ')}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {job.result?.output && (
+            <div className="detail-section">
+              <div className="detail-label">Output</div>
+              <div className="detail-row">
+                <span className="detail-key">Dimensions</span>
+                <span className="detail-val">{job.result.output.width} × {job.result.output.height}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-key">Format</span>
+                <span className="detail-val">{job.result.output.format}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-key">Size</span>
+                <span className="detail-val">{formatBytes(job.result.output.size)}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-key">Savings</span>
+                <span className="detail-val" style={{color: job.result.savings.percent > 0 ? 'var(--green)' : 'var(--red)'}}>
+                  {job.result.savings.percent > 0 ? '−' : '+'}{Math.abs(job.result.savings.percent)}% ({formatBytes(Math.abs(job.result.savings.bytes))})
+                </span>
+              </div>
+            </div>
+          )}
+
+          {job.error && (
+            <div className="detail-section">
+              <div className="detail-label">Error</div>
+              <div className="error-block">{job.error}</div>
+            </div>
+          )}
+        </div>
+
+        <div className="drawer-actions">
+          {job.status === 'completed' && (
+            <a className="drawer-btn primary" href={`${API}/api/jobs/${job.jobId}/download`}>
+              {Icons.download} Download
+            </a>
+          )}
+          {job.status === 'failed' && (
+            <button className="drawer-btn primary" onClick={() => onRetry(job)}>
+              {Icons.retry} Retry Job
+            </button>
+          )}
+          <button className="drawer-btn secondary" onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// --- Main App ---
+function App() {
+  const { jobs, addJob, updateJob, removeJob, clearCompleted, setJobs } = useJobStore();
+  const [health, setHealth] = useState(null);
+  const [online, setOnline] = useState(true);
+  const [activeTab, setActiveTab] = useState('all');
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [spinning, setSpinning] = useState(false);
+  const wsRefs = useRef({});
+
+  // Poll health
+  const refreshHealth = useCallback(async () => {
+    try {
+      const data = await fetchHealth();
+      setHealth(data);
+      setOnline(data.status === 'ok');
+    } catch {
+      setOnline(false);
+    }
+  }, []);
+
+  // Poll active/queued jobs for status updates
+  const pollJobs = useCallback(async () => {
+    const pending = jobs.filter(j => j.status === 'active' || j.status === 'waiting' || j.status === 'queued');
+    for (const j of pending) {
+      try {
+        const data = await fetchJob(j.jobId);
+        if (data.jobId) {
+          updateJob(j.jobId, {
+            status: data.status === 'waiting' ? 'queued' : data.status,
+            progress: data.progress,
+            result: data.result || j.result,
+            error: data.error,
+            attempts: data.attempts,
+          });
+        }
+      } catch {}
+    }
+  }, [jobs, updateJob]);
+
+  // Hydrate jobs from server on first load
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (hydrated.current) return;
+    hydrated.current = true;
+    fetch(`${API}/api/jobs?limit=100`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.jobs?.length) {
+          // Merge: server jobs as base, overlay with any local state
+          const localMap = new Map(jobs.map(j => [String(j.jobId), j]));
+          const merged = data.jobs.map(sj => {
+            const local = localMap.get(String(sj.jobId));
+            return local ? { ...sj, ...local, result: sj.result || local.result } : sj;
+          });
+          // Add any local-only jobs not on server
+          jobs.forEach(j => {
+            if (!merged.find(m => String(m.jobId) === String(j.jobId))) merged.unshift(j);
+          });
+          setJobs(merged);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    refreshHealth();
+    const h = setInterval(refreshHealth, 10000);
+    const p = setInterval(pollJobs, 3000);
+    return () => { clearInterval(h); clearInterval(p); };
+  }, [refreshHealth, pollJobs]);
+
+  const handleRefresh = async () => {
+    setSpinning(true);
+    await refreshHealth();
+    await pollJobs();
+    setTimeout(() => setSpinning(false), 600);
+  };
+
+  // Listen to file upload from the main page
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.data?.type === 'imgforge:job_created') {
+        const { jobId, operations, createdAt } = e.data;
+        addJob({
+          jobId,
+          operations,
+          status: 'queued',
+          progress: 0,
+          createdAt: createdAt || new Date().toISOString(),
+          result: null,
+          error: null,
+        });
+        connectWs(jobId);
+      }
+    };
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  }, [addJob]);
+
+  // WebSocket connection for a job
+  const connectWs = useCallback((jobId) => {
+    if (wsRefs.current[jobId]) return;
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${proto}//${location.host}/ws?jobId=${jobId}`);
+    wsRefs.current[jobId] = ws;
+
+    ws.onmessage = (e) => {
+      const msg = JSON.parse(e.data);
+      switch (msg.type) {
+        case 'started':
+          updateJob(jobId, { status: 'active' });
+          break;
+        case 'progress':
+          updateJob(jobId, { progress: msg.progress, status: 'active' });
+          break;
+        case 'completed':
+          updateJob(jobId, { status: 'completed', progress: 100, result: msg });
+          ws.close();
+          delete wsRefs.current[jobId];
+          break;
+        case 'failed':
+          updateJob(jobId, { status: 'failed', error: msg.error });
+          ws.close();
+          delete wsRefs.current[jobId];
+          break;
+      }
+    };
+
+    ws.onerror = () => { delete wsRefs.current[jobId]; };
+    ws.onclose = () => { delete wsRefs.current[jobId]; };
+  }, [updateJob]);
+
+  // Reconnect WS for any active jobs on load
+  useEffect(() => {
+    jobs.filter(j => j.status === 'active' || j.status === 'queued' || j.status === 'waiting')
+      .forEach(j => connectWs(j.jobId));
+  }, []);
+
+  const handleRetry = async (job) => {
+    // Re-fetch the job data and resubmit... or just re-poll
+    // For now, mark as queued and let polling pick up the retry
+    updateJob(job.jobId, { status: 'queued', progress: 0, error: null });
+    connectWs(job.jobId);
+  };
+
+  // Filter jobs by tab
+  const filtered = activeTab === 'all' ? jobs
+    : jobs.filter(j => {
+        if (activeTab === 'queued') return j.status === 'queued' || j.status === 'waiting';
+        return j.status === activeTab;
+      });
+
+  const counts = {
+    all: jobs.length,
+    queued: jobs.filter(j => j.status === 'queued' || j.status === 'waiting').length,
+    active: jobs.filter(j => j.status === 'active').length,
+    completed: jobs.filter(j => j.status === 'completed').length,
+    failed: jobs.filter(j => j.status === 'failed').length,
+  };
+
+  const queueCounts = health?.queue || {};
+
+  return (
+    <div className="app">
+      {/* Header */}
+      <div className="header">
+        <div className="header-left">
+          <div className="logo-mark">▶</div>
+          <div>
+            <div className="header-title">ImgForge</div>
+            <div className="header-sub">Queue Dashboard</div>
+          </div>
+        </div>
+        <div className="header-right">
+          <div className={`status-dot ${online ? '' : 'offline'}`} />
+          <span className="status-text">{online ? 'Connected' : 'Offline'}</span>
+          <button className={`refresh-btn ${spinning ? 'spinning' : ''}`} onClick={handleRefresh}>
+            {Icons.refresh} Refresh
+          </button>
+          <a className="refresh-btn" href="/" style={{textDecoration:'none'}}>← Upload</a>
+        </div>
+      </div>
+
+      {/* Metrics */}
+      <div className="metrics">
+        <MetricCard label="Waiting" value={queueCounts.waiting || 0} type="waiting" />
+        <MetricCard label="Active" value={queueCounts.active || 0} type="active" />
+        <MetricCard label="Completed" value={queueCounts.completed || 0} type="completed" />
+        <MetricCard label="Failed" value={queueCounts.failed || 0} type="failed" />
+        <MetricCard label="Total" value={
+          (queueCounts.waiting || 0) + (queueCounts.active || 0) +
+          (queueCounts.completed || 0) + (queueCounts.failed || 0) +
+          (queueCounts.delayed || 0)
+        } type="total" />
+      </div>
+
+      {/* Tabs */}
+      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:12}}>
+        <div className="tabs">
+          {['all', 'queued', 'active', 'completed', 'failed'].map(tab => (
+            <button
+              key={tab}
+              className={`tab ${activeTab === tab ? 'active' : ''}`}
+              onClick={() => setActiveTab(tab)}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+              <span className="count">{counts[tab]}</span>
+            </button>
+          ))}
+        </div>
+        {counts.completed > 0 && (
+          <button className="action-btn" onClick={clearCompleted}>Clear completed</button>
+        )}
+      </div>
+
+      {/* Job Table */}
+      <div className="table-wrap" style={{marginTop: 12}}>
+        <table>
+          <thead>
+            <tr>
+              <th>Job</th>
+              <th>Operations</th>
+              <th>Status</th>
+              <th>Progress</th>
+              <th>Savings</th>
+              <th>Time</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.length === 0 ? (
+              <tr>
+                <td colSpan="7">
+                  <div className="empty-state">
+                    <div className="empty-icon">◇</div>
+                    <div className="empty-text">
+                      {activeTab === 'all'
+                        ? 'No jobs yet — upload an image to get started'
+                        : `No ${activeTab} jobs`}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              filtered.map(job => (
+                <JobRow
+                  key={job.jobId}
+                  job={job}
+                  onRetry={handleRetry}
+                  onRemove={removeJob}
+                  onSelect={setSelectedJob}
+                />
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Detail Drawer */}
+      {selectedJob && (
+        <JobDetail
+          job={selectedJob}
+          onClose={() => setSelectedJob(null)}
+          onRetry={(j) => { handleRetry(j); setSelectedJob(null); }}
+        />
+      )}
+    </div>
+  );
+}
+
+// --- Utils ---
+function formatBytes(b) {
+  if (!b && b !== 0) return '—';
+  if (b < 1024) return b + ' B';
+  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+  return (b / 1048576).toFixed(1) + ' MB';
+}
+
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const secs = Math.floor(diff / 1000);
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+</script>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..8d31fee
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,784 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ImgForge — Image Processing Queue</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@300;500;700&display=swap');
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #0a0a0c;
+      --surface: #111115;
+      --surface-2: #1a1a20;
+      --border: #2a2a32;
+      --text: #e8e8ed;
+      --text-dim: #7a7a88;
+      --accent: #ff6b35;
+      --accent-glow: rgba(255, 107, 53, 0.15);
+      --green: #34d399;
+      --red: #f87171;
+      --blue: #60a5fa;
+      --mono: 'JetBrains Mono', monospace;
+      --sans: 'Outfit', sans-serif;
+    }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* Grain overlay */
+    body::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: url('data:image/svg+xml,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>');
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .container {
+      max-width: 760px;
+      margin: 0 auto;
+      padding: 60px 24px;
+    }
+
+    /* Header */
+    .logo {
+      font-family: var(--mono);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--accent);
+      letter-spacing: 3px;
+      text-transform: uppercase;
+      margin-bottom: 8px;
+    }
+
+    h1 {
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.1;
+      margin-bottom: 12px;
+      background: linear-gradient(135deg, var(--text) 0%, var(--text-dim) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .subtitle {
+      color: var(--text-dim);
+      font-size: 16px;
+      font-weight: 300;
+      margin-bottom: 48px;
+      line-height: 1.6;
+    }
+
+    .subtitle code {
+      font-family: var(--mono);
+      background: var(--surface-2);
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 13px;
+      color: var(--accent);
+    }
+
+    /* Drop zone */
+    .dropzone {
+      border: 2px dashed var(--border);
+      border-radius: 12px;
+      padding: 48px;
+      text-align: center;
+      transition: all 0.25s ease;
+      cursor: pointer;
+      position: relative;
+      background: var(--surface);
+    }
+
+    .dropzone.drag-over {
+      border-color: var(--accent);
+      background: var(--accent-glow);
+    }
+
+    .dropzone.has-file {
+      border-color: var(--green);
+      border-style: solid;
+    }
+
+    .dropzone-icon { font-size: 36px; margin-bottom: 12px; }
+    .dropzone-text { color: var(--text-dim); font-size: 15px; }
+    .dropzone-text strong { color: var(--text); }
+
+    .file-info {
+      display: none;
+      margin-top: 16px;
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--green);
+    }
+
+    .dropzone.has-file .file-info { display: block; }
+    .dropzone.has-file .dropzone-prompt { display: none; }
+
+    input[type="file"] { display: none; }
+
+    /* Operations */
+    .ops-section {
+      margin-top: 32px;
+    }
+
+    .ops-section h3 {
+      font-family: var(--mono);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--text-dim);
+      margin-bottom: 16px;
+    }
+
+    .op-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 8px;
+    }
+
+    .op-btn {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      color: var(--text);
+      font-family: var(--mono);
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-align: left;
+    }
+
+    .op-btn:hover { border-color: var(--accent); background: var(--surface-2); }
+    .op-btn.selected { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }
+    .op-btn .op-icon { font-size: 18px; margin-bottom: 6px; }
+    .op-btn .op-name { font-weight: 600; }
+
+    /* Operation config panels */
+    .op-configs {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .op-config {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .op-config label {
+      font-family: var(--mono);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-dim);
+    }
+
+    .op-config input, .op-config select {
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px 12px;
+      color: var(--text);
+      font-family: var(--mono);
+      font-size: 13px;
+      width: 100px;
+    }
+
+    .op-config input:focus, .op-config select:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .op-tag {
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--accent);
+      min-width: 80px;
+    }
+
+    .remove-op {
+      margin-left: auto;
+      background: none;
+      border: none;
+      color: var(--text-dim);
+      cursor: pointer;
+      font-size: 18px;
+      padding: 4px;
+    }
+
+    .remove-op:hover { color: var(--red); }
+
+    /* Submit */
+    .submit-btn {
+      margin-top: 32px;
+      width: 100%;
+      padding: 16px;
+      border: none;
+      border-radius: 10px;
+      background: var(--accent);
+      color: #fff;
+      font-family: var(--mono);
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .submit-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
+    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+
+    /* Job result panel */
+    .job-panel {
+      display: none;
+      margin-top: 32px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .job-panel.visible { display: block; animation: slideUp 0.3s ease; }
+
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .job-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .job-id {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--text-dim);
+    }
+
+    .job-status {
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 12px;
+      border-radius: 20px;
+    }
+
+    .job-status.queued { background: var(--surface-2); color: var(--text-dim); }
+    .job-status.active { background: rgba(96, 165, 250, 0.15); color: var(--blue); }
+    .job-status.completed { background: rgba(52, 211, 153, 0.15); color: var(--green); }
+    .job-status.failed { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+
+    .job-body { padding: 20px; }
+
+    /* Progress bar */
+    .progress-wrap {
+      height: 6px;
+      background: var(--surface-2);
+      border-radius: 3px;
+      overflow: hidden;
+      margin-bottom: 12px;
+    }
+
+    .progress-bar {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 3px;
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+
+    .progress-bar.done { background: var(--green); }
+
+    .stage-text {
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text-dim);
+      margin-bottom: 16px;
+    }
+
+    /* Result stats */
+    .result-stats {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .stat {
+      background: var(--surface-2);
+      border-radius: 8px;
+      padding: 12px;
+      text-align: center;
+    }
+
+    .stat-value {
+      font-family: var(--mono);
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text);
+    }
+
+    .stat-label {
+      font-size: 11px;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-top: 4px;
+    }
+
+    .download-btn {
+      display: inline-block;
+      padding: 12px 24px;
+      background: var(--green);
+      color: #000;
+      font-family: var(--mono);
+      font-size: 13px;
+      font-weight: 700;
+      border-radius: 8px;
+      text-decoration: none;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      transition: filter 0.2s;
+    }
+
+    .download-btn:hover { filter: brightness(1.1); }
+
+    .error-msg {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--red);
+      background: rgba(248, 113, 113, 0.1);
+      padding: 12px;
+      border-radius: 8px;
+    }
+
+    /* Log */
+    .job-log {
+      margin-top: 16px;
+      max-height: 160px;
+      overflow-y: auto;
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-dim);
+      line-height: 1.8;
+    }
+
+    .job-log .log-entry { opacity: 0.7; }
+    .job-log .log-entry:last-child { opacity: 1; color: var(--text); }
+
+    /* API docs */
+    .docs {
+      margin-top: 64px;
+      padding-top: 32px;
+      border-top: 1px solid var(--border);
+    }
+
+    .docs h3 {
+      font-family: var(--mono);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--text-dim);
+      margin-bottom: 20px;
+    }
+
+    .code-block {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 20px;
+      font-family: var(--mono);
+      font-size: 12px;
+      line-height: 1.8;
+      overflow-x: auto;
+      white-space: pre;
+      color: var(--text-dim);
+    }
+
+    .code-block .keyword { color: var(--accent); }
+    .code-block .string { color: var(--green); }
+    .code-block .comment { color: #555; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="logo">ImgForge</div>
+    <h1>Process images<br>at queue speed</h1>
+    <p class="subtitle">
+      Upload → queue → process → download. Built on
+      <code>Bull</code> + <code>Sharp</code> + <code>Redis</code>.
+      Real-time progress via WebSocket.
+      <a href="/dashboard.html" style="color:var(--accent);font-family:var(--mono);font-size:13px;text-decoration:none;border-bottom:1px solid var(--accent);margin-left:4px">Open Dashboard →</a>
+    </p>
+
+    <!-- Upload -->
+    <div class="dropzone" id="dropzone">
+      <div class="dropzone-prompt">
+        <div class="dropzone-icon">📁</div>
+        <div class="dropzone-text">
+          <strong>Drop image here</strong> or click to browse<br>
+          JPEG, PNG, WebP, AVIF, TIFF, GIF — max 20MB
+        </div>
+      </div>
+      <div class="file-info" id="fileInfo"></div>
+      <input type="file" id="fileInput" accept="image/*" />
+    </div>
+
+    <!-- Operations -->
+    <div class="ops-section">
+      <h3>Operations (click to add, order matters)</h3>
+      <div class="op-grid">
+        <button class="op-btn" data-op="resize">
+          <div class="op-icon">📐</div>
+          <div class="op-name">Resize</div>
+        </button>
+        <button class="op-btn" data-op="convert">
+          <div class="op-icon">🔄</div>
+          <div class="op-name">Convert</div>
+        </button>
+        <button class="op-btn" data-op="compress">
+          <div class="op-icon">🗜️</div>
+          <div class="op-name">Compress</div>
+        </button>
+        <button class="op-btn" data-op="watermark">
+          <div class="op-icon">💧</div>
+          <div class="op-name">Watermark</div>
+        </button>
+        <button class="op-btn" data-op="strip-meta">
+          <div class="op-icon">🧹</div>
+          <div class="op-name">Strip Meta</div>
+        </button>
+        <button class="op-btn" data-op="blur">
+          <div class="op-icon">🌫️</div>
+          <div class="op-name">Blur</div>
+        </button>
+        <button class="op-btn" data-op="grayscale">
+          <div class="op-icon">🖤</div>
+          <div class="op-name">Grayscale</div>
+        </button>
+        <button class="op-btn" data-op="rotate">
+          <div class="op-icon">↻</div>
+          <div class="op-name">Rotate</div>
+        </button>
+      </div>
+      <div class="op-configs" id="opConfigs"></div>
+    </div>
+
+    <!-- Submit -->
+    <button class="submit-btn" id="submitBtn" disabled>Process Image</button>
+
+    <!-- Job result -->
+    <div class="job-panel" id="jobPanel">
+      <div class="job-header">
+        <span class="job-id" id="jobId"></span>
+        <span class="job-status queued" id="jobStatus">queued</span>
+      </div>
+      <div class="job-body">
+        <div class="progress-wrap"><div class="progress-bar" id="progressBar"></div></div>
+        <div class="stage-text" id="stageText">Waiting...</div>
+        <div id="resultArea"></div>
+        <div class="job-log" id="jobLog"></div>
+      </div>
+    </div>
+
+    <!-- API docs -->
+    <div class="docs">
+      <h3>API Usage</h3>
+      <div class="code-block"><span class="comment"># Submit a job</span>
+<span class="keyword">curl</span> -X POST /api/jobs \
+  -F <span class="string">"file=@photo.jpg"</span> \
+  -F <span class="string">'operations=[{"op":"resize","params":{"width":800}},{"op":"convert","params":{"format":"webp"}},{"op":"compress","params":{"quality":75}}]'</span>
+
+<span class="comment"># Poll status</span>
+<span class="keyword">curl</span> /api/jobs/:jobId
+
+<span class="comment"># Download result</span>
+<span class="keyword">curl</span> -O /api/jobs/:jobId/download
+
+<span class="comment"># List available operations</span>
+<span class="keyword">curl</span> /api/operations</div>
+    </div>
+  </div>
+
+  <script>
+    const $ = (s) => document.querySelector(s);
+    const dropzone = $("#dropzone");
+    const fileInput = $("#fileInput");
+    const opConfigs = $("#opConfigs");
+    const submitBtn = $("#submitBtn");
+    const jobPanel = $("#jobPanel");
+
+    let selectedFile = null;
+    let operations = [];
+
+    // --- File handling ---
+    dropzone.addEventListener("click", () => fileInput.click());
+    dropzone.addEventListener("dragover", (e) => { e.preventDefault(); dropzone.classList.add("drag-over"); });
+    dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag-over"));
+    dropzone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      dropzone.classList.remove("drag-over");
+      if (e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]);
+    });
+    fileInput.addEventListener("change", () => { if (fileInput.files[0]) setFile(fileInput.files[0]); });
+
+    function setFile(file) {
+      selectedFile = file;
+      dropzone.classList.add("has-file");
+      const size = (file.size / 1024).toFixed(1);
+      $("#fileInfo").textContent = `✓ ${file.name} (${size} KB)`;
+      updateSubmit();
+    }
+
+    // --- Operations ---
+    const OP_CONFIGS = {
+      resize: () => `
+        <span class="op-tag">resize</span>
+        <label>W <input type="number" data-param="width" placeholder="800" min="1" max="10000"></label>
+        <label>H <input type="number" data-param="height" placeholder="auto" min="1" max="10000"></label>
+        <label>Fit <select data-param="fit">
+          <option value="cover">cover</option>
+          <option value="contain">contain</option>
+          <option value="fill">fill</option>
+          <option value="inside">inside</option>
+        </select></label>`,
+      convert: () => `
+        <span class="op-tag">convert</span>
+        <label>Format <select data-param="format">
+          <option value="webp">WebP</option>
+          <option value="jpeg">JPEG</option>
+          <option value="png">PNG</option>
+          <option value="avif">AVIF</option>
+        </select></label>`,
+      compress: () => `
+        <span class="op-tag">compress</span>
+        <label>Quality <input type="number" data-param="quality" value="75" min="1" max="100"></label>`,
+      watermark: () => `
+        <span class="op-tag">watermark</span>
+        <label>Text <input type="text" data-param="text" placeholder="© ImgForge" style="width:160px"></label>
+        <label>Size <input type="number" data-param="fontSize" value="48" min="10" max="200" style="width:70px"></label>`,
+      "strip-meta": () => `<span class="op-tag">strip-meta</span><span style="color:var(--text-dim);font-size:12px">No config needed</span>`,
+      blur: () => `
+        <span class="op-tag">blur</span>
+        <label>Sigma <input type="number" data-param="sigma" value="3" min="0.3" max="100" step="0.1"></label>`,
+      grayscale: () => `<span class="op-tag">grayscale</span><span style="color:var(--text-dim);font-size:12px">No config needed</span>`,
+      rotate: () => `
+        <span class="op-tag">rotate</span>
+        <label>Angle <input type="number" data-param="angle" value="90" step="90"></label>`,
+    };
+
+    document.querySelectorAll(".op-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const op = btn.dataset.op;
+        const idx = operations.length;
+        operations.push({ op, params: {} });
+
+        const row = document.createElement("div");
+        row.className = "op-config";
+        row.dataset.idx = idx;
+        row.innerHTML = OP_CONFIGS[op]() + `<button class="remove-op" title="Remove">×</button>`;
+
+        row.querySelector(".remove-op").addEventListener("click", () => {
+          operations[idx] = null;
+          row.remove();
+          updateSubmit();
+        });
+
+        opConfigs.appendChild(row);
+        updateSubmit();
+      });
+    });
+
+    function gatherOperations() {
+      return Array.from(opConfigs.querySelectorAll(".op-config"))
+        .map((row) => {
+          const idx = parseInt(row.dataset.idx);
+          const op = operations[idx];
+          if (!op) return null;
+          const params = {};
+          row.querySelectorAll("[data-param]").forEach((input) => {
+            const val = input.value;
+            if (val === "") return;
+            params[input.dataset.param] = isNaN(val) ? val : Number(val);
+          });
+          return { op: op.op, params };
+        })
+        .filter(Boolean);
+    }
+
+    function updateSubmit() {
+      const validOps = operations.filter(Boolean);
+      submitBtn.disabled = !selectedFile || validOps.length === 0;
+    }
+
+    // --- Submit ---
+    submitBtn.addEventListener("click", async () => {
+      if (!selectedFile) return;
+
+      const ops = gatherOperations();
+      if (ops.length === 0) return;
+
+      submitBtn.disabled = true;
+      submitBtn.textContent = "Uploading...";
+
+      const form = new FormData();
+      form.append("file", selectedFile);
+      form.append("operations", JSON.stringify(ops));
+
+      try {
+        const res = await fetch("/api/jobs", { method: "POST", body: form });
+        const data = await res.json();
+
+        if (!res.ok) {
+          alert(data.error || "Upload failed");
+          submitBtn.disabled = false;
+          submitBtn.textContent = "Process Image";
+          return;
+        }
+
+        // Show job panel and connect WS
+        showJob(data.jobId);
+        connectWs(data.jobId);
+      } catch (err) {
+        alert("Network error: " + err.message);
+      }
+
+      submitBtn.textContent = "Process Image";
+    });
+
+    // --- Job panel ---
+    function showJob(id) {
+      jobPanel.classList.add("visible");
+      $("#jobId").textContent = `Job #${id}`;
+      setStatus("queued");
+      $("#progressBar").style.width = "0%";
+      $("#progressBar").classList.remove("done");
+      $("#stageText").textContent = "Waiting in queue...";
+      $("#resultArea").innerHTML = "";
+      $("#jobLog").innerHTML = "";
+    }
+
+    function setStatus(status) {
+      const el = $("#jobStatus");
+      el.textContent = status;
+      el.className = "job-status " + status;
+    }
+
+    function addLog(msg) {
+      const log = $("#jobLog");
+      const entry = document.createElement("div");
+      entry.className = "log-entry";
+      const ts = new Date().toLocaleTimeString();
+      entry.textContent = `[${ts}] ${msg}`;
+      log.appendChild(entry);
+      log.scrollTop = log.scrollHeight;
+    }
+
+    function formatBytes(b) {
+      if (b < 1024) return b + " B";
+      if (b < 1048576) return (b / 1024).toFixed(1) + " KB";
+      return (b / 1048576).toFixed(1) + " MB";
+    }
+
+    // --- WebSocket ---
+    function connectWs(jobId) {
+      const proto = location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(`${proto}//${location.host}/ws?jobId=${jobId}`);
+
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+
+        switch (msg.type) {
+          case "subscribed":
+            addLog("Connected to job stream");
+            break;
+
+          case "started":
+            setStatus("active");
+            addLog(`Processing: ${msg.operations.join(" → ")}`);
+            break;
+
+          case "info":
+            addLog(`Input: ${msg.input.width}×${msg.input.height} ${msg.input.format} (${formatBytes(msg.input.size)})`);
+            break;
+
+          case "progress":
+            $("#progressBar").style.width = msg.progress + "%";
+            $("#stageText").textContent = msg.stage;
+            addLog(msg.stage);
+            break;
+
+          case "completed": {
+            setStatus("completed");
+            $("#progressBar").style.width = "100%";
+            $("#progressBar").classList.add("done");
+            $("#stageText").textContent = "Done!";
+            addLog(`Completed in ${msg.processingTime}ms`);
+
+            const savings = msg.savings.percent;
+            const savingsColor = savings > 0 ? "var(--green)" : "var(--red)";
+
+            $("#resultArea").innerHTML = `
+              <div class="result-stats">
+                <div class="stat">
+                  <div class="stat-value">${msg.output.width}×${msg.output.height}</div>
+                  <div class="stat-label">Dimensions</div>
+                </div>
+                <div class="stat">
+                  <div class="stat-value">${formatBytes(msg.output.size)}</div>
+                  <div class="stat-label">Size</div>
+                </div>
+                <div class="stat">
+                  <div class="stat-value" style="color:${savingsColor}">${savings > 0 ? "−" : "+"}${Math.abs(savings)}%</div>
+                  <div class="stat-label">Savings</div>
+                </div>
+              </div>
+              <a class="download-btn" href="/api/jobs/${jobId}/download">↓ Download Result</a>
+            `;
+
+            submitBtn.disabled = false;
+            ws.close();
+            break;
+          }
+
+          case "failed":
+            setStatus("failed");
+            $("#stageText").textContent = "Failed";
+            $("#resultArea").innerHTML = `<div class="error-msg">Error: ${msg.error}</div>`;
+            addLog(`FAILED: ${msg.error}`);
+            submitBtn.disabled = false;
+            ws.close();
+            break;
+        }
+      };
+
+      ws.onerror = () => addLog("WebSocket error — falling back to polling");
+      ws.onclose = () => addLog("Stream closed");
+    }
+  </script>
+</body>
+</html>
