npm - claudeboard - Versions diffs - 2.15.4 → 3.1.0 - Mend

claudeboard 2.15.4 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/README.md +89 -93
package/bin/cli.js +198 -230
package/bin/init-context.js +22 -0
package/package.json +22 -43
package/public/app.js +1411 -0
package/public/index.html +250 -0
package/public/style.css +1872 -0
package/src/context-template.md +20 -0
package/src/notifier.js +65 -0
package/src/orchestrator.js +800 -0
package/src/scanner.js +153 -0
package/src/server.js +205 -0
package/src/store.js +182 -0
package/src/verifier.js +131 -0
package/agents/architect.js +0 -141
package/agents/board-client.js +0 -126
package/agents/claude-api.js +0 -124
package/agents/claude-resolver.js +0 -167
package/agents/developer.js +0 -224
package/agents/expo-health.js +0 -584
package/agents/orchestrator.js +0 -303
package/agents/qa.js +0 -336
package/dashboard/index.html +0 -1980
package/dashboard/server.js +0 -412
package/sql/setup.sql +0 -57
package/tools/filesystem.js +0 -95
package/tools/screenshot.js +0 -74
package/tools/supabase-reader.js +0 -74
package/tools/terminal.js +0 -63

package/dashboard/index.html DELETED Viewed

@@ -1,1980 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>ClaudeBoard</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #1a1d27;
-    --bg2: #141620;
-    --col-bg: #1e2130;
-    --col-header: #252840;
-    --card-bg: #2a2d42;
-    --card-hover: #313550;
-    --border: #323654;
-    --text: #e2e4f0;
-    --muted: #6b7094;
-    --dim: #454868;
-    --accent: #6c8aff;
-    --green: #4ade80;
-    --yellow: #fbbf24;
-    --red: #f87171;
-    --purple: #c084fc;
-    --orange: #fb923c;
-    --todo-col: #6b7094;
-    --prog-col: #fbbf24;
-    --done-col: #4ade80;
-    --err-col: #f87171;
-    --font: 'Inter', sans-serif;
-    --mono: 'JetBrains Mono', monospace;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  html, body {
-    height: 100%;
-    background: var(--bg2);
-    color: var(--text);
-    font-family: var(--font);
-    overflow: hidden;
-  }
-  /* ── HEADER ── */
-  .header {
-    height: 56px;
-    background: var(--bg);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    gap: 16px;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 10;
-  }
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--accent);
-    text-transform: uppercase;
-  }
-  .logo-pulse {
-    width: 8px; height: 8px;
-    background: var(--accent);
-    border-radius: 50%;
-    box-shadow: 0 0 0 0 rgba(108,138,255,0.4);
-    animation: pulse-ring 2s ease-out infinite;
-  }
-  @keyframes pulse-ring {
-    0% { box-shadow: 0 0 0 0 rgba(108,138,255,0.5); }
-    70% { box-shadow: 0 0 0 6px rgba(108,138,255,0); }
-    100% { box-shadow: 0 0 0 0 rgba(108,138,255,0); }
-  }
-  .header-sep { width: 1px; height: 24px; background: var(--border); }
-  .project-badge {
-    background: rgba(108,138,255,0.12);
-    border: 1px solid rgba(108,138,255,0.25);
-    border-radius: 6px;
-    padding: 4px 10px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--accent);
-    letter-spacing: 0.05em;
-  }
-  .header-stats {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-left: 8px;
-  }
-  .hstat {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 600;
-    font-family: var(--mono);
-  }
-  .hstat.todo { background: rgba(107,112,148,0.15); color: var(--todo-col); }
-  .hstat.prog { background: rgba(251,191,36,0.12); color: var(--yellow); }
-  .hstat.done { background: rgba(74,222,128,0.12); color: var(--green); }
-  .hstat.err  { background: rgba(248,113,113,0.12); color: var(--red); }
-  .hstat-dot { width: 6px; height: 6px; border-radius: 50%; }
-  .hstat.todo .hstat-dot { background: var(--todo-col); }
-  .hstat.prog .hstat-dot { background: var(--yellow); animation: blink 1s ease-in-out infinite; }
-  .hstat.done .hstat-dot { background: var(--green); }
-  .hstat.err  .hstat-dot { background: var(--red); }
-  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
-  .header-right {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .progress-wrap {
-    width: 120px;
-    height: 6px;
-    background: var(--border);
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  .progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--accent), var(--green));
-    border-radius: 3px;
-    transition: width 0.8s ease;
-  }
-  .progress-pct {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--muted);
-    min-width: 32px;
-  }
-  .ws-badge {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 11px;
-    color: var(--muted);
-    font-family: var(--mono);
-  }
-  .ws-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
-  .ws-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
-  .btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    border: none;
-    transition: all 0.15s;
-  }
-  .btn-primary {
-    background: var(--accent);
-    color: #fff;
-  }
-  .btn-primary:hover { background: #7d9cff; }
-  .btn-ghost {
-    background: rgba(255,255,255,0.06);
-    color: var(--text);
-    border: 1px solid var(--border);
-  }
-  .btn-ghost:hover { background: rgba(255,255,255,0.1); }
-  /* ── CURRENT TASK BAR ── */
-  .running-bar {
-    height: 36px;
-    background: rgba(251,191,36,0.06);
-    border-bottom: 1px solid rgba(251,191,36,0.15);
-    display: none;
-    align-items: center;
-    padding: 0 20px;
-    gap: 10px;
-    flex-shrink: 0;
-  }
-  .running-bar.visible { display: flex; }
-  .running-spinner {
-    width: 14px; height: 14px;
-    border: 2px solid rgba(251,191,36,0.3);
-    border-top-color: var(--yellow);
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  .running-label { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
-  .running-title { font-family: var(--mono); font-size: 11px; color: var(--yellow); }
-  /* ── MAIN LAYOUT ── */
-  .main {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-    height: calc(100vh - 56px);
-  }
-  /* ── KANBAN BOARD ── */
-  .board {
-    flex: 1;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding: 20px;
-    display: flex;
-    gap: 14px;
-    align-items: flex-start;
-  }
-  .board::-webkit-scrollbar { height: 6px; }
-  .board::-webkit-scrollbar-track { background: transparent; }
-  .board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-  .board::-webkit-scrollbar-thumb:hover { background: var(--dim); }
-  /* ── KANBAN COLUMN ── */
-  .column {
-    flex-shrink: 0;
-    width: 300px;
-    background: var(--col-bg);
-    border-radius: 12px;
-    border: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 110px);
-  }
-  .column-header {
-    padding: 14px 14px 10px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    background: var(--col-header);
-    border-radius: 12px 12px 0 0;
-  }
-  .column-dot {
-    width: 10px; height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-  .column-title {
-    font-size: 13px;
-    font-weight: 700;
-    flex: 1;
-    letter-spacing: 0.03em;
-  }
-  .column-count {
-    background: rgba(255,255,255,0.08);
-    border-radius: 12px;
-    padding: 2px 8px;
-    font-size: 11px;
-    font-weight: 700;
-    font-family: var(--mono);
-    color: var(--muted);
-  }
-  .column-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 60px;
-  }
-  .column-body::-webkit-scrollbar { width: 3px; }
-  .column-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-  /* Column color accents */
-  .col-todo .column-dot { background: var(--todo-col); }
-  .col-todo .column-title { color: var(--todo-col); }
-  .col-prog .column-dot { background: var(--yellow); box-shadow: 0 0 8px rgba(251,191,36,0.4); }
-  .col-prog .column-title { color: var(--yellow); }
-  .col-done .column-dot { background: var(--green); }
-  .col-done .column-title { color: var(--green); }
-  .col-err .column-dot { background: var(--red); }
-  .col-err .column-title { color: var(--red); }
-  /* ── TASK CARD ── */
-  .card {
-    background: var(--card-bg);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 12px;
-    cursor: grab;
-    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
-    user-select: none;
-    position: relative;
-  }
-  .card:hover {
-    background: var(--card-hover);
-    border-color: var(--dim);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-    transform: translateY(-1px);
-  }
-  .card:active { cursor: grabbing; }
-  .card.dragging {
-    opacity: 0.5;
-    transform: rotate(2deg) scale(0.98);
-  }
-  .card.drag-over {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 2px rgba(108,138,255,0.3);
-  }
-  .card-top {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    margin-bottom: 8px;
-  }
-  .card-status {
-    width: 16px; height: 16px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin-top: 1px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-  }
-  .card-status.todo { border: 1.5px solid var(--dim); }
-  .card-status.in_progress {
-    border: 1.5px solid var(--yellow);
-    background: rgba(251,191,36,0.1);
-    animation: spin-border 1.2s linear infinite;
-  }
-  @keyframes spin-border {
-    from { box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px var(--yellow); }
-  }
-  .card-status.done { background: rgba(74,222,128,0.15); border: 1.5px solid var(--green); color: var(--green); }
-  .card-status.error { background: rgba(248,113,113,0.15); border: 1.5px solid var(--red); color: var(--red); }
-  .card-status.blocked { border: 1.5px solid var(--orange); background: rgba(251,146,60,0.1); }
-  .card-title {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1.4;
-    color: var(--text);
-    flex: 1;
-  }
-  .card-desc {
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.5;
-    margin-bottom: 10px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .card-footer {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    flex-wrap: wrap;
-  }
-  .tag {
-    padding: 2px 7px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    font-family: var(--mono);
-  }
-  .tag.high { background: rgba(248,113,113,0.15); color: var(--red); border: 1px solid rgba(248,113,113,0.2); }
-  .tag.medium { background: rgba(251,191,36,0.12); color: var(--yellow); border: 1px solid rgba(251,191,36,0.2); }
-  .tag.low { background: rgba(107,112,148,0.15); color: var(--muted); border: 1px solid rgba(107,112,148,0.2); }
-  .tag.feature { background: rgba(108,138,255,0.12); color: var(--accent); border: 1px solid rgba(108,138,255,0.2); }
-  .tag.bug { background: rgba(248,113,113,0.12); color: var(--red); border: 1px solid rgba(248,113,113,0.2); }
-  .tag.config { background: rgba(192,132,252,0.12); color: var(--purple); border: 1px solid rgba(192,132,252,0.2); }
-  .tag.refactor { background: rgba(251,146,60,0.12); color: var(--orange); border: 1px solid rgba(251,146,60,0.2); }
-  .tag.test { background: rgba(74,222,128,0.12); color: var(--green); border: 1px solid rgba(74,222,128,0.2); }
-  .card-epic {
-    margin-left: auto;
-    font-size: 9px;
-    font-family: var(--mono);
-    color: var(--dim);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    max-width: 80px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  /* Drop placeholder */
-  .drop-placeholder {
-    height: 60px;
-    border: 2px dashed rgba(108,138,255,0.3);
-    border-radius: 8px;
-    background: rgba(108,138,255,0.05);
-    flex-shrink: 0;
-  }
-  /* ── SIDEBAR ── */
-  .sidebar {
-    width: 320px;
-    flex-shrink: 0;
-    background: var(--bg);
-    border-left: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .sidebar-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .stab {
-    flex: 1;
-    padding: 12px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--muted);
-    cursor: pointer;
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    transition: all 0.15s;
-    font-family: var(--mono);
-  }
-  .stab.active { color: var(--accent); border-bottom-color: var(--accent); }
-  .stab:hover:not(.active) { color: var(--text); }
-  .sidebar-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px;
-  }
-  .sidebar-body::-webkit-scrollbar { width: 3px; }
-  .sidebar-body::-webkit-scrollbar-thumb { background: var(--border); }
-  /* ── LOG ENTRIES ── */
-  .log-entry {
-    display: flex;
-    gap: 8px;
-    padding: 8px 0;
-    border-bottom: 1px solid rgba(50,54,84,0.5);
-    font-family: var(--mono);
-    font-size: 10px;
-    line-height: 1.5;
-  }
-  .log-entry:last-child { border-bottom: none; }
-  .log-time { color: var(--dim); flex-shrink: 0; }
-  .log-icon { flex-shrink: 0; width: 12px; text-align: center; }
-  .log-msg { color: var(--text); word-break: break-word; }
-  .log-msg.start { color: var(--accent); }
-  .log-msg.complete { color: var(--green); }
-  .log-msg.error { color: var(--red); }
-  /* ── DETAIL PANEL ── */
-  .detail-empty {
-    text-align: center;
-    padding: 40px 16px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--dim);
-    line-height: 2;
-  }
-  .detail-title {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.4;
-    margin-bottom: 10px;
-  }
-  .detail-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
-  .detail-desc {
-    font-size: 11px;
-    font-family: var(--mono);
-    color: var(--muted);
-    line-height: 1.7;
-    margin-bottom: 14px;
-    padding: 10px;
-    background: var(--col-bg);
-    border-radius: 6px;
-    border: 1px solid var(--border);
-  }
-  .detail-logs-title {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--dim);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: 8px;
-  }
-  /* ── MODAL ── */
-  .overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.6);
-    backdrop-filter: blur(4px);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-  }
-  .overlay.open { display: flex; }
-  .modal {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    width: 480px;
-    max-width: 90vw;
-    padding: 24px;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-  }
-  .modal-title {
-    font-size: 14px;
-    font-weight: 700;
-    margin-bottom: 20px;
-    color: var(--text);
-  }
-  .field { margin-bottom: 14px; }
-  .field label {
-    display: block;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--muted);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    margin-bottom: 5px;
-    font-family: var(--mono);
-  }
-  .field input, .field textarea, .field select {
-    width: 100%;
-    background: var(--col-bg);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 8px 12px;
-    color: var(--text);
-    font-family: var(--font);
-    font-size: 13px;
-    outline: none;
-    resize: vertical;
-    transition: border-color 0.15s;
-  }
-  .field input:focus, .field textarea:focus, .field select:focus {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px rgba(108,138,255,0.1);
-  }
-  .field select option { background: var(--bg); }
-  .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
-  .btn-cancel {
-    padding: 8px 16px;
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    color: var(--muted);
-    font-size: 13px;
-    cursor: pointer;
-    font-family: var(--font);
-    transition: all 0.15s;
-  }
-  .btn-cancel:hover { border-color: var(--text); color: var(--text); }
-  .btn-create {
-    padding: 8px 20px;
-    background: var(--accent);
-    border: none;
-    border-radius: 6px;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    font-family: var(--font);
-    transition: opacity 0.15s;
-  }
-  .btn-create:hover { opacity: 0.85; }
-  /* ── EXPO PANEL ── */
-  .expo-panel {
-    position: fixed;
-    bottom: 0; left: 0; right: 320px;
-    background: var(--bg);
-    border-top: 1px solid var(--border);
-    z-index: 20;
-    transition: transform 0.25s ease;
-    transform: translateY(100%);
-  }
-  .expo-panel.open { transform: translateY(0); }
-  .expo-panel-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 16px;
-    border-bottom: 1px solid var(--border);
-    cursor: pointer;
-    user-select: none;
-  }
-  .expo-panel-title {
-    font-family: var(--mono);
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text);
-  }
-  .expo-logs {
-    height: 160px;
-    overflow-y: auto;
-    padding: 10px 16px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .expo-logs::-webkit-scrollbar { width: 3px; }
-  .expo-logs::-webkit-scrollbar-thumb { background: var(--border); }
-  .expo-qr-wrap {
-    padding: 12px 16px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    border-top: 1px solid var(--border);
-  }
-  .expo-url {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--accent);
-    word-break: break-all;
-  }
-  .expo-status-badge {
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-family: var(--mono);
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  .expo-status-badge.stopped  { background: rgba(107,112,148,0.2); color: var(--muted); }
-  .expo-status-badge.installing { background: rgba(251,191,36,0.15); color: var(--yellow); }
-  .expo-status-badge.starting { background: rgba(251,191,36,0.15); color: var(--yellow); }
-  .expo-status-badge.running  { background: rgba(74,222,128,0.15); color: var(--green); }
-  .expo-status-badge.error    { background: rgba(248,113,113,0.15); color: var(--red); }
-  /* ── TERMINAL PANEL ── */
-  .term-panel {
-    position: fixed;
-    bottom: 0; left: 0; right: 320px;
-    height: 320px;
-    background: #0d0f1a;
-    border-top: 2px solid var(--border);
-    z-index: 19;
-    display: flex;
-    flex-direction: column;
-    transform: translateY(100%);
-    transition: transform 0.25s ease;
-  }
-  .term-panel.open { transform: translateY(0); }
-  .term-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 14px;
-    background: #111320;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .term-title {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--muted);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-  #terminal {
-    flex: 1;
-    overflow: hidden;
-    padding: 4px;
-  }
-  .btn-term-close {
-    margin-left: auto;
-    background: none;
-    border: none;
-    color: var(--muted);
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 1;
-    padding: 2px 6px;
-  }
-  .btn-term-close:hover { color: var(--text); }
-  /* ── TOOLBAR BOTTOM ── */
-  .bottom-toolbar {
-    position: fixed;
-    bottom: 0; left: 0; right: 320px;
-    height: 40px;
-    background: var(--bg);
-    border-top: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    gap: 8px;
-    z-index: 15;
-  }
-  .toolbar-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 12px;
-    border-radius: 5px;
-    font-family: var(--mono);
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.04);
-    color: var(--muted);
-    transition: all 0.15s;
-  }
-  .toolbar-btn:hover { color: var(--text); border-color: var(--dim); background: rgba(255,255,255,0.08); }
-  .toolbar-btn.active { color: var(--accent); border-color: rgba(108,138,255,0.4); background: rgba(108,138,255,0.08); }
-  .toolbar-btn.expo-running { color: var(--green); border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.08); }
-  /* adjust board to not overlap toolbar */
-  .board-wrap { padding-bottom: 40px; }
-  /* ── LANGUAGE SELECTOR ── */
-  .lang-selector {
-    display: flex;
-    gap: 2px;
-    background: rgba(255,255,255,0.05);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 2px;
-  }
-  .lang-btn {
-    background: none;
-    border: none;
-    color: var(--muted);
-    font-family: var(--mono);
-    font-size: 10px;
-    font-weight: 700;
-    padding: 3px 8px;
-    border-radius: 4px;
-    cursor: pointer;
-    letter-spacing: 0.05em;
-    transition: all 0.15s;
-  }
-  .lang-btn:hover { color: var(--text); }
-  .lang-btn.active { background: var(--accent); color: #fff; }
-  /* ── RETRY BUTTON on failed cards ── */
-  .card-retry-btn {
-    margin-top: 10px;
-    width: 100%;
-    padding: 6px;
-    background: rgba(248,113,113,0.1);
-    border: 1px solid rgba(248,113,113,0.25);
-    border-radius: 6px;
-    color: var(--red);
-    font-size: 11px;
-    font-weight: 600;
-    font-family: var(--mono);
-    cursor: pointer;
-    transition: all 0.15s;
-    text-align: center;
-  }
-  .card-retry-btn:hover {
-    background: rgba(248,113,113,0.2);
-    border-color: rgba(248,113,113,0.5);
-  }
-  /* ── CARD ACTION BAR (edit/delete/retry) ── */
-  .card-actions {
-    display: flex;
-    gap: 4px;
-    margin-top: 8px;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-  .card:hover .card-actions { opacity: 1; }
-  .card-action-btn {
-    flex: 1;
-    padding: 4px 0;
-    border-radius: 4px;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,0.03);
-    color: var(--muted);
-    font-family: var(--mono);
-    font-size: 10px;
-    cursor: pointer;
-    transition: all 0.15s;
-    text-align: center;
-  }
-  .card-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
-  .card-action-btn.retry { color: var(--yellow); border-color: rgba(251,191,36,0.3); }
-  .card-action-btn.retry:hover { background: rgba(251,191,36,0.1); }
-  .card-action-btn.del { color: var(--red); border-color: rgba(248,113,113,0.2); }
-  .card-action-btn.del:hover { background: rgba(248,113,113,0.12); }
-  .card-action-btn.edit { color: var(--accent); border-color: rgba(108,138,255,0.2); }
-  .card-action-btn.edit:hover { background: rgba(108,138,255,0.1); }
-  /* Empty column state */
-  .col-empty {
-    text-align: center;
-    padding: 24px 12px;
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--dim);
-    line-height: 2;
-  }
-  .fade-in { animation: fadeIn 0.2s ease; }
-  @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
-</style>
-</head>
-<body>
-<!-- HEADER -->
-<div class="header">
-  <div class="logo">
-    <div class="logo-pulse"></div>
-    ClaudeBoard
-  </div>
-  <div class="header-sep"></div>
-  <div class="project-badge" id="projectName">—</div>
-  <div class="header-stats">
-    <div class="hstat todo"><div class="hstat-dot"></div><span id="statTodo">0</span> <span data-i18n="todo">todo</span></div>
-    <div class="hstat prog"><div class="hstat-dot"></div><span id="statProg">0</span> <span data-i18n="running">running</span></div>
-    <div class="hstat done"><div class="hstat-dot"></div><span id="statDone">0</span> <span data-i18n="done">done</span></div>
-    <div class="hstat err"><div class="hstat-dot"></div><span id="statErr">0</span> <span data-i18n="failed">failed</span></div>
-  </div>
-  <div class="header-right">
-    <div class="progress-wrap">
-      <div class="progress-fill" id="progressFill" style="width:0%"></div>
-    </div>
-    <div class="progress-pct" id="progressPct">0%</div>
-    <div class="ws-badge">
-      <div class="ws-dot" id="wsDot"></div>
-      <span id="wsLabel" data-i18n="connecting">connecting</span>
-    </div>
-    <!-- Language selector -->
-    <div class="lang-selector">
-      <button class="lang-btn active" id="lang-en" onclick="setLang('en')">EN</button>
-      <button class="lang-btn" id="lang-es" onclick="setLang('es')">ES</button>
-    </div>
-    <button class="btn btn-primary" onclick="openModal()" data-i18n="addTask">+ Add Task</button>
-  </div>
-</div>
-<!-- RUNNING BAR -->
-<div class="running-bar" id="runningBar">
-  <div class="running-spinner"></div>
-  <span class="running-label" data-i18n="agentWorking">Agent working →</span>
-  <span class="running-title" id="runningTitle">—</span>
-</div>
-<!-- MAIN -->
-<div class="main">
-  <!-- KANBAN BOARD -->
-  <div class="board" id="board">
-    <!-- TODO -->
-    <div class="column col-todo" id="col-todo">
-      <div class="column-header">
-        <div class="column-dot"></div>
-        <span class="column-title" data-i18n="colTodo">To Do</span>
-        <span class="column-count" id="cnt-todo">0</span>
-      </div>
-      <div class="column-body" id="body-todo" ondragover="onDragOver(event,'todo')" ondrop="onDrop(event,'todo')" ondragleave="onDragLeave(event)"></div>
-    </div>
-    <!-- IN PROGRESS -->
-    <div class="column col-prog" id="col-prog">
-      <div class="column-header">
-        <div class="column-dot"></div>
-        <span class="column-title" data-i18n="colProg">In Progress</span>
-        <span class="column-count" id="cnt-prog">0</span>
-      </div>
-      <div class="column-body" id="body-prog" ondragover="onDragOver(event,'in_progress')" ondrop="onDrop(event,'in_progress')" ondragleave="onDragLeave(event)"></div>
-    </div>
-    <!-- DONE -->
-    <div class="column col-done" id="col-done">
-      <div class="column-header">
-        <div class="column-dot"></div>
-        <span class="column-title" data-i18n="colDone">Done</span>
-        <span class="column-count" id="cnt-done">0</span>
-      </div>
-      <div class="column-body" id="body-done" ondragover="onDragOver(event,'done')" ondrop="onDrop(event,'done')" ondragleave="onDragLeave(event)"></div>
-    </div>
-    <!-- ERROR -->
-    <div class="column col-err" id="col-err">
-      <div class="column-header">
-        <div class="column-dot"></div>
-        <span class="column-title" data-i18n="colFailed">Failed</span>
-        <span class="column-count" id="cnt-err">0</span>
-      </div>
-      <div class="column-body" id="body-err" ondragover="onDragOver(event,'error')" ondrop="onDrop(event,'error')" ondragleave="onDragLeave(event)"></div>
-    </div>
-  </div>
-  <!-- SIDEBAR -->
-  <div class="sidebar">
-    <div class="sidebar-tabs">
-      <button class="stab active" id="tab-activity" onclick="switchTab('activity')" data-i18n="tabActivity">Activity</button>
-      <button class="stab" id="tab-detail" onclick="switchTab('detail')" data-i18n="tabDetail">Detail</button>
-    </div>
-    <div class="sidebar-body" id="sidebarBody">
-      <!-- Activity pane — always in DOM, shown/hidden -->
-      <div id="activityPane">
-        <div class="detail-empty" data-i18n="activityEmpty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>
-      </div>
-      <!-- Detail pane — always in DOM, shown/hidden -->
-      <div id="detailPane" style="display:none">
-        <div class="detail-empty" data-i18n="detailEmpty">Click any task card<br>to see its details.</div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ADD TASK MODAL -->
-<div class="overlay" id="modal" onclick="if(event.target===this)closeModal()">
-  <div class="modal">
-    <div class="modal-title" data-i18n="addTaskTitle">Add Task</div>
-    <div class="field">
-      <label data-i18n="fieldTitle">Title</label>
-      <input type="text" id="f-title" data-i18n-placeholder="placeholderTitle">
-    </div>
-    <div class="field">
-      <label data-i18n="fieldDesc">Description</label>
-      <textarea id="f-desc" rows="3" data-i18n-placeholder="placeholderDesc"></textarea>
-    </div>
-    <div class="modal-grid">
-      <div class="field">
-        <label data-i18n="fieldPriority">Priority</label>
-        <select id="f-priority">
-          <option value="high" data-i18n="prioHigh">High</option>
-          <option value="medium" selected data-i18n="prioMed">Medium</option>
-          <option value="low" data-i18n="prioLow">Low</option>
-        </select>
-      </div>
-      <div class="field">
-        <label data-i18n="fieldType">Type</label>
-        <select id="f-type">
-          <option value="feature" selected data-i18n="typeFeature">Feature</option>
-          <option value="bug" data-i18n="typeBug">Bug</option>
-          <option value="config" data-i18n="typeConfig">Config</option>
-          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
-          <option value="test" data-i18n="typeTest">Test</option>
-        </select>
-      </div>
-    </div>
-    <div class="modal-actions">
-      <button class="btn-cancel" onclick="closeModal()" data-i18n="cancel">Cancel</button>
-      <button class="btn-create" onclick="submitTask()" data-i18n="createTask">Create Task</button>
-    </div>
-  </div>
-</div>
-<!-- EDIT TASK MODAL -->
-<div class="overlay" id="editModal" onclick="if(event.target===this)closeEditTask()">
-  <div class="modal">
-    <div class="modal-title" data-i18n="editTaskTitle">Edit Task</div>
-    <input type="hidden" id="e-id">
-    <div class="field">
-      <label data-i18n="fieldTitle">Title</label>
-      <input type="text" id="e-title">
-    </div>
-    <div class="field">
-      <label data-i18n="fieldDesc">Description</label>
-      <textarea id="e-desc" rows="4"></textarea>
-    </div>
-    <div class="modal-grid">
-      <div class="field">
-        <label data-i18n="fieldPriority">Priority</label>
-        <select id="e-priority">
-          <option value="high" data-i18n="prioHigh">High</option>
-          <option value="medium" data-i18n="prioMed">Medium</option>
-          <option value="low" data-i18n="prioLow">Low</option>
-        </select>
-      </div>
-      <div class="field">
-        <label data-i18n="fieldType">Type</label>
-        <select id="e-type">
-          <option value="feature" data-i18n="typeFeature">Feature</option>
-          <option value="bug" data-i18n="typeBug">Bug</option>
-          <option value="config" data-i18n="typeConfig">Config</option>
-          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
-          <option value="test" data-i18n="typeTest">Test</option>
-        </select>
-      </div>
-    </div>
-    <div class="modal-actions">
-      <button class="btn-cancel" onclick="closeEditTask()" data-i18n="cancel">Cancel</button>
-      <button class="btn-create" onclick="submitEditTask()" data-i18n="saveTask">Save Changes</button>
-    </div>
-  </div>
-</div>
-<!-- RETRY / EDIT MODAL -->
-<div class="overlay" id="retryModal" onclick="if(event.target===this)closeRetry()">
-  <div class="modal">
-    <div class="modal-title" style="display:flex;align-items:center;gap:10px">
-      <span style="color:var(--red)">✕</span>
-      <span data-i18n="retryTitle">Edit & Retry Failed Task</span>
-    </div>
-    <div style="background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.2);border-radius:8px;padding:10px 12px;margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--red)" id="retryErrorLog" data-i18n="noErrorLog">
-      No error log found.
-    </div>
-    <div class="field">
-      <label data-i18n="fieldTitle">Title</label>
-      <input type="text" id="r-title">
-    </div>
-    <div class="field">
-      <label data-i18n="fieldDesc">Description</label>
-      <textarea id="r-desc" rows="4"></textarea>
-    </div>
-    <div class="field">
-      <label style="color:var(--accent)" data-i18n="agentNoteLabel">💬 Note for the agent (hint to fix the issue)</label>
-      <textarea id="r-note" rows="3" data-i18n-placeholder="agentNotePlaceholder"></textarea>
-    </div>
-    <div class="modal-grid">
-      <div class="field">
-        <label data-i18n="fieldPriority">Priority</label>
-        <select id="r-priority">
-          <option value="high" data-i18n="prioHigh">High</option>
-          <option value="medium" data-i18n="prioMed">Medium</option>
-          <option value="low" data-i18n="prioLow">Low</option>
-        </select>
-      </div>
-      <div class="field">
-        <label data-i18n="fieldType">Type</label>
-        <select id="r-type">
-          <option value="feature" data-i18n="typeFeature">Feature</option>
-          <option value="bug" data-i18n="typeBug">Bug</option>
-          <option value="config" data-i18n="typeConfig">Config</option>
-          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
-          <option value="test" data-i18n="typeTest">Test</option>
-        </select>
-      </div>
-    </div>
-    <div class="modal-actions">
-      <button class="btn-cancel" onclick="closeRetry()" data-i18n="cancel">Cancel</button>
-      <button class="btn-create" style="background:var(--red)" onclick="submitRetry()" data-i18n="retryBtn">↩ Retry Task</button>
-    </div>
-  </div>
-</div>
-<!-- BOTTOM TOOLBAR -->
-<div class="bottom-toolbar">
-  <button class="toolbar-btn" id="expoBtn" onclick="toggleExpoPanel()">
-    📱 Expo
-    <span class="expo-status-badge stopped" id="expoBadge" data-i18n="statusStopped">stopped</span>
-  </button>
-  <button class="toolbar-btn" id="termBtn" onclick="toggleTerminal()" data-i18n="terminal">
-    ⌨️ Terminal
-  </button>
-</div>
-<!-- EXPO PANEL -->
-<div class="expo-panel" id="expoPanel">
-  <div class="expo-panel-header" onclick="toggleExpoPanel()">
-    <span class="expo-panel-title">📱 Expo Go</span>
-    <span class="expo-status-badge stopped" id="expoPanelBadge" data-i18n="statusStopped">stopped</span>
-    <div style="margin-left:auto;display:flex;gap:8px">
-      <button class="btn btn-primary" id="expoStartBtn" onclick="event.stopPropagation();startExpo()" style="font-size:11px;padding:4px 12px" data-i18n="startExpo">Start Expo</button>
-      <button class="btn btn-ghost" id="expoStopBtn" onclick="event.stopPropagation();stopExpo()" style="font-size:11px;padding:4px 12px;display:none" data-i18n="stopExpo">Stop</button>
-    </div>
-  </div>
-  <div style="display:flex;gap:0">
-    <div style="flex:1">
-      <div class="expo-logs" id="expoLogs" data-i18n="expoIdle">Expo not started. Click "Start Expo" to install dependencies and launch with tunnel.</div>
-      <div class="expo-qr-wrap" id="expoUrlWrap" style="display:none">
-        <div>
-          <div style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:4px" data-i18n="scanWith">SCAN WITH EXPO GO</div>
-          <div class="expo-url" id="expoUrl">—</div>
-        </div>
-      </div>
-    </div>
-    <div id="qrWrap" style="padding:12px;display:none">
-      <canvas id="qrCanvas" width="120" height="120"></canvas>
-    </div>
-  </div>
-</div>
-<!-- TERMINAL PANEL -->
-<div class="term-panel" id="termPanel">
-  <div class="term-header">
-    <span style="color:var(--green);font-size:14px">⬤</span>
-    <span class="term-title">Terminal — <span style="color:var(--accent)" id="termDir">project</span></span>
-    <button class="btn-term-close" onclick="toggleTerminal()">✕</button>
-  </div>
-  <div id="terminal"></div>
-</div>
-<!-- xterm.js -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/xterm.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/xterm.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/addon-fit.min.js"></script>
-<!-- QR code via qrcodejs -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-<script>
-// ── STATE ────────────────────────────────────────────────────────────────────
-let board = { epics: [], logs: [] };
-let activeTab = 'activity';
-let selectedTask = null;
-let draggedId = null;
-let ws;
-// ── WEBSOCKET ────────────────────────────────────────────────────────────────
-function connectWS() {
-  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  ws = new WebSocket(`${proto}//${location.host}`);
-  ws.onopen = () => setWS(true);
-  ws.onclose = () => { setWS(false); setTimeout(connectWS, 2000); };
-  ws.onmessage = (e) => {
-    const { event, data } = JSON.parse(e.data);
-    // Task state changes that require a board reload (status flipped, new task, deleted)
-    if (['task_added','task_started','task_complete','task_failed','task_deleted'].includes(event)) {
-      loadBoard();
-    }
-    // Reorder: just re-render from current board data — no network call needed
-    if (event === 'task_reordered') {
-      renderKanban();
-      updateStats();
-    }
-    // Single task field update: patch in-memory and re-render (no full reload)
-    if (event === 'task_update') {
-      patchTaskInMemory(data);
-    }
-    if (event === 'log') {
-      board.logs.unshift(data);
-      if (activeTab === 'activity') renderLogs();
-    }
-    if (event === 'expo_status') {
-      setExpoStatus(data.status, data.url);
-    }
-    if (event === 'expo_log') {
-      appendExpoLog(data.message);
-    }
-  };
-}
-function setWS(on) {
-  document.getElementById('wsDot').className = 'ws-dot' + (on ? ' on' : '');
-  document.getElementById('wsLabel').textContent = on ? t('live') : t('reconnecting');
-  // Poll only when disconnected
-  if (on) {
-    if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
-  } else {
-    if (!pollInterval) pollInterval = setInterval(loadBoard, 10000);
-  }
-}
-// ── DATA ─────────────────────────────────────────────────────────────────────
-async function loadBoard() {
-  const res = await fetch('/api/board');
-  const data = await res.json();
-  board = data;
-  document.getElementById('projectName').textContent = data.project || '—';
-  renderKanban();
-  updateStats();
-  if (activeTab === 'activity') renderLogs();
-}
-function allTasks() {
-  return board.epics?.flatMap(e => (e.cb_tasks || []).map(t => ({ ...t, epicName: e.name }))) || [];
-}
-function updateStats() {
-  const tasks = allTasks();
-  const todo = tasks.filter(t => t.status === 'todo').length;
-  const prog = tasks.filter(t => t.status === 'in_progress').length;
-  const done = tasks.filter(t => t.status === 'done').length;
-  const err  = tasks.filter(t => t.status === 'error').length;
-  const total = tasks.length;
-  document.getElementById('statTodo').textContent = todo;
-  document.getElementById('statProg').textContent = prog;
-  document.getElementById('statDone').textContent = done;
-  document.getElementById('statErr').textContent = err;
-  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
-  document.getElementById('progressFill').style.width = pct + '%';
-  document.getElementById('progressPct').textContent = pct + '%';
-  // Running bar
-  const running = tasks.find(t => t.status === 'in_progress');
-  const bar = document.getElementById('runningBar');
-  if (running) {
-    bar.className = 'running-bar visible';
-    document.getElementById('runningTitle').textContent = running.title;
-  } else {
-    bar.className = 'running-bar';
-  }
-}
-// ── KANBAN RENDER ─────────────────────────────────────────────────────────────
-function renderKanban() {
-  const tasks = allTasks();
-  const groups = {
-    todo: tasks.filter(t => t.status === 'todo'),
-    in_progress: tasks.filter(t => t.status === 'in_progress'),
-    done: tasks.filter(t => t.status === 'done'),
-    error: tasks.filter(t => t.status === 'error'),
-  };
-  const map = { todo: 'todo', in_progress: 'prog', done: 'done', error: 'err' };
-  for (const [status, colKey] of Object.entries(map)) {
-    const body = document.getElementById('body-' + colKey);
-    const cnt  = document.getElementById('cnt-' + colKey);
-    const list = groups[status] || [];
-    cnt.textContent = list.length;
-    if (list.length === 0) {
-      body.innerHTML = `<div class="col-empty">No tasks here</div>`;
-      continue;
-    }
-    // Sort by priority_order before rendering
-    const sorted = [...list].sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99));
-    body.innerHTML = sorted.map((t, i) => cardHTML(t, status === 'todo' ? i + 1 : null)).join('');
-    // Attach drag events
-    body.querySelectorAll('.card').forEach(card => {
-      card.addEventListener('dragstart', e => onDragStart(e, card.dataset.id));
-      card.addEventListener('dragend', () => onDragEnd(card));
-      card.addEventListener('click', () => selectCard(card.dataset.id));
-    });
-  }
-}
-function cardHTML(task, position = null) {
-  const icons = { todo: '', in_progress: '', done: '✓', error: '✕', blocked: '—' };
-  const shortEpic = (task.epicName || '').split(' ').slice(0,2).join(' ');
-  const isError = task.status === 'error';
-  const posNum = position ? `<span style="font-family:var(--mono);font-size:9px;color:var(--dim);background:rgba(255,255,255,0.05);border-radius:3px;padding:1px 5px;flex-shrink:0">#${position}</span>` : '';
-  return `
-    <div class="card fade-in" draggable="true" data-id="${task.id}" data-status="${task.status}">
-      <div class="card-top">
-        <div class="card-status ${task.status}">${icons[task.status] || ''}</div>
-        <div class="card-title">${esc(task.title)}</div>
-        ${posNum}
-      </div>
-      ${task.description ? `<div class="card-desc">${esc(task.description.split('\n')[0])}</div>` : ''}
-      <div class="card-footer">
-        <span class="tag ${task.priority}">${task.priority}</span>
-        <span class="tag ${task.type}">${task.type}</span>
-        ${shortEpic ? `<span class="card-epic">${esc(shortEpic)}</span>` : ''}
-      </div>
-      <div class="card-actions" onclick="event.stopPropagation()">
-        ${isError ? `<button class="card-action-btn retry" onclick="openRetry('${task.id}')">${t('retryCard')}</button>` : ''}
-        <button class="card-action-btn edit" onclick="openEditTask('${task.id}')" title="Edit">✎</button>
-        <button class="card-action-btn del" onclick="deleteTask('${task.id}')" title="Delete">✕</button>
-      </div>
-    </div>`;
-}
-// ── IN-MEMORY PATCH (avoid full reload for minor updates) ─────────────────────
-function patchTaskInMemory(patch) {
-  if (!board.epics) return;
-  for (const epic of board.epics) {
-    const idx = (epic.cb_tasks || []).findIndex(t => t.id === patch.id);
-    if (idx !== -1) {
-      epic.cb_tasks[idx] = { ...epic.cb_tasks[idx], ...patch };
-      renderKanban();
-      updateStats();
-      return;
-    }
-  }
-  // Task not found in memory yet (new orphan etc), do full reload
-  loadBoard();
-}
-// ── DRAG STATE ────────────────────────────────────────────────────────────────
-// We track order in JS so we don't depend on DOM state during drag
-let dragColumnOrder = {}; // { status: [id, id, ...] } — snapshot at dragstart
-function onDragStart(e, id) {
-  // Normalize to string so comparisons with dataset values are consistent
-  draggedId = String(id);
-  // Snapshot current order of all columns from memory (reliable — not DOM-dependent)
-  // IDs are stored as strings to match dataset.id comparisons
-  dragColumnOrder = {};
-  for (const status of ['todo', 'in_progress', 'done', 'error']) {
-    dragColumnOrder[status] = allTasks()
-      .filter(t => t.status === status)
-      .sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99))
-      .map(t => String(t.id));
-  }
-  setTimeout(() => {
-    const el = document.querySelector(`.card[data-id="${id}"]`);
-    if (el) el.classList.add('dragging');
-  }, 0);
-  e.dataTransfer.effectAllowed = 'move';
-}
-function onDragEnd(card) {
-  card.classList.remove('dragging');
-  document.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
-}
-function onDragOver(e, status) {
-  e.preventDefault();
-  e.dataTransfer.dropEffect = 'move';
-  const col = e.currentTarget;
-  // Find the card being hovered over to insert placeholder before it
-  const draggingCard = document.querySelector('.card.dragging');
-  const cards = [...col.querySelectorAll('.card:not(.dragging)')];
-  // Remove existing placeholder
-  col.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
-  // Find insertion point based on mouse Y position
-  let insertBefore = null;
-  for (const card of cards) {
-    const rect = card.getBoundingClientRect();
-    if (e.clientY < rect.top + rect.height / 2) {
-      insertBefore = card;
-      break;
-    }
-  }
-  const ph = document.createElement('div');
-  ph.className = 'drop-placeholder';
-  if (insertBefore) col.insertBefore(ph, insertBefore);
-  else col.appendChild(ph);
-  // Store insertion target for onDrop
-  col.dataset.insertBefore = insertBefore?.dataset?.id || '';
-}
-function onDragLeave(e) {
-  const col = e.currentTarget;
-  const related = e.relatedTarget;
-  if (!col.contains(related)) {
-    col.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
-  }
-}
-async function onDrop(e, status) {
-  e.preventDefault();
-  document.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
-  if (!draggedId) return;
-  const col = e.currentTarget;
-  // Read insertBefore from the column body's data attribute (set by onDragOver)
-  const insertBeforeId = col.dataset.insertBefore || '';
-  delete col.dataset.insertBefore;
-  // Normalize IDs to strings for consistent comparison (dataset values are always strings)
-  const draggedIdStr = String(draggedId);
-  const insertBeforeIdStr = insertBeforeId ? String(insertBeforeId) : '';
-  // Use the JS snapshot (taken at dragstart) — not DOM which has .dragging gaps
-  const sourceStatus = allTasks().find(t => String(t.id) === draggedIdStr)?.status || status;
-  // columnIds is already an array of strings (set in onDragStart)
-  const columnIds = (dragColumnOrder[status] || []).filter(id => id !== draggedIdStr);
-  let newOrderedIds;
-  if (!insertBeforeIdStr) {
-    // Dropped at the end of the column
-    newOrderedIds = [...columnIds, draggedIdStr];
-  } else {
-    const insertIdx = columnIds.indexOf(insertBeforeIdStr);
-    if (insertIdx === -1) {
-      // insertBeforeId not found in snapshot — fall back to appending at end
-      newOrderedIds = [...columnIds, draggedIdStr];
-    } else {
-      newOrderedIds = [...columnIds.slice(0, insertIdx), draggedIdStr, ...columnIds.slice(insertIdx)];
-    }
-  }
-  // Optimistic update in memory so re-render is instant
-  const task = allTasks().find(t => String(t.id) === draggedIdStr);
-  if (task) task.status = status;
-  newOrderedIds.forEach((idStr, i) => {
-    const t = allTasks().find(t => String(t.id) === idStr);
-    if (t) t.priority_order = i + 1;
-  });
-  renderKanban();
-  updateStats();
-  // Update status if column changed
-  if (sourceStatus !== status) {
-    await fetch(`/api/tasks/${draggedIdStr}`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ status }),
-    });
-  }
-  // Persist new order (send as-is — server handles string or numeric IDs)
-  await fetch('/api/tasks/reorder', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ taskIds: newOrderedIds }),
-  });
-  draggedId = null;
-}
-// ── CARD SELECT ───────────────────────────────────────────────────────────────
-async function selectCard(id) {
-  const task = allTasks().find(t => t.id === id);
-  if (!task) return;
-  selectedTask = task;
-  const res = await fetch(`/api/tasks/${id}/logs`);
-  const { logs } = await res.json();
-  // Write into the dedicated detail pane (never touches activityPane)
-  document.getElementById('detailPane').innerHTML = `
-    <div>
-      <div class="detail-title">${esc(task.title)}</div>
-      <div class="detail-tags">
-        <span class="tag ${task.status}">${task.status.replace('_',' ')}</span>
-        <span class="tag ${task.priority}">${task.priority}</span>
-        <span class="tag ${task.type}">${task.type}</span>
-      </div>
-      ${task.description ? `<div class="detail-desc">${esc(task.description)}</div>` : ''}
-      <div class="detail-logs-title">// agent logs</div>
-      ${logs.length === 0
-        ? '<div style="font-family:var(--mono);font-size:10px;color:var(--dim);padding:8px 0">No logs yet.</div>'
-        : logs.map(l => {
-            const t = new Date(l.created_at).toLocaleTimeString('en',{hour12:false});
-            return `<div class="log-entry"><span class="log-time">${t}</span><span class="log-msg ${l.type}">${esc(l.message)}</span></div>`;
-          }).join('')
-      }
-    </div>`;
-  // Switch to detail tab
-  activeTab = 'detail';
-  document.getElementById('tab-activity').className = 'stab';
-  document.getElementById('tab-detail').className = 'stab active';
-  document.getElementById('activityPane').style.display = 'none';
-  document.getElementById('detailPane').style.display = 'block';
-}
-// ── LOGS ──────────────────────────────────────────────────────────────────────
-function renderLogs() {
-  // Only update the activity pane — never overwrites detail pane
-  const el = document.getElementById('activityPane');
-  if (!board.logs?.length) {
-    el.innerHTML = `<div class="detail-empty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>`;
-    return;
-  }
-  const icons = { start: '▶', complete: '✓', error: '✕', progress: '·', info: '·' };
-  el.innerHTML = board.logs.map(l => {
-    const t = new Date(l.created_at).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
-    return `<div class="log-entry">
-      <span class="log-time">${t}</span>
-      <span class="log-icon" style="color:${logColor(l.type)}">${icons[l.type]||'·'}</span>
-      <span class="log-msg ${l.type}">${esc(l.message)}</span>
-    </div>`;
-  }).join('');
-}
-function logColor(type) {
-  return { start:'#6c8aff', complete:'#4ade80', error:'#f87171', progress:'#6b7094', info:'#6b7094' }[type] || '#6b7094';
-}
-// ── TABS ──────────────────────────────────────────────────────────────────────
-function switchTab(tab) {
-  activeTab = tab;
-  document.getElementById('tab-activity').className = 'stab' + (tab === 'activity' ? ' active' : '');
-  document.getElementById('tab-detail').className   = 'stab' + (tab === 'detail'   ? ' active' : '');
-  // Show/hide panes — never overwrite the other pane's content
-  document.getElementById('activityPane').style.display = tab === 'activity' ? 'block' : 'none';
-  document.getElementById('detailPane').style.display   = tab === 'detail'   ? 'block' : 'none';
-  if (tab === 'activity') renderLogs();
-}
-// ── MODAL ─────────────────────────────────────────────────────────────────────
-function openModal() { document.getElementById('modal').className = 'overlay open'; }
-function closeModal() { document.getElementById('modal').className = 'overlay'; }
-async function submitTask() {
-  const title = document.getElementById('f-title').value.trim();
-  if (!title) return;
-  await fetch('/api/tasks', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      title,
-      description: document.getElementById('f-desc').value.trim(),
-      priority: document.getElementById('f-priority').value,
-      type: document.getElementById('f-type').value,
-    }),
-  });
-  document.getElementById('f-title').value = '';
-  document.getElementById('f-desc').value = '';
-  closeModal();
-  loadBoard();
-}
-// ── RETRY MODAL ───────────────────────────────────────────────────────────────
-let retryTaskId = null;
-async function openRetry(id) {
-  retryTaskId = id;
-  const task = allTasks().find(t => t.id === id);
-  if (!task) return;
-  // Fill form with current task data
-  document.getElementById('r-title').value = task.title;
-  document.getElementById('r-desc').value = task.description || '';
-  document.getElementById('r-note').value = '';
-  document.getElementById('r-priority').value = task.priority || 'medium';
-  document.getElementById('r-type').value = task.type || 'feature';
-  // Load last error log
-  const res = await fetch(`/api/tasks/${id}/logs`);
-  const { logs } = await res.json();
-  const errorLogs = logs.filter(l => l.type === 'error');
-  const lastError = errorLogs[errorLogs.length - 1];
-  document.getElementById('retryErrorLog').textContent =
-    lastError ? lastError.message : 'No error log found.';
-  document.getElementById('retryModal').className = 'overlay open';
-}
-function closeRetry() {
-  document.getElementById('retryModal').className = 'overlay';
-  retryTaskId = null;
-}
-async function submitRetry() {
-  if (!retryTaskId) return;
-  const title = document.getElementById('r-title').value.trim();
-  const desc  = document.getElementById('r-desc').value.trim();
-  const note  = document.getElementById('r-note').value.trim();
-  const priority = document.getElementById('r-priority').value;
-  const type     = document.getElementById('r-type').value;
-  if (!title) return;
-  // Build updated description — append agent note if provided
-  const updatedDesc = note
-    ? `${desc}\n\n⚠️ AGENT NOTE (from human review): ${note}`
-    : desc;
-  // Update task fields + reset status to todo
-  await fetch(`/api/tasks/${retryTaskId}`, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      title,
-      description: updatedDesc,
-      priority,
-      type,
-      status: 'todo',
-      started_at: null,
-    }),
-  });
-  // Log the retry
-  await fetch(`/api/tasks/${retryTaskId}/log`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      message: note
-        ? `↩ Retried by human with note: "${note}"`
-        : '↩ Retried by human — reset to todo',
-    }),
-  });
-  closeRetry();
-  loadBoard();
-}
-// ── EXPO ─────────────────────────────────────────────────────────────────────
-let expoOpen = false;
-let termOpen = false;
-let term = null;
-let termSocket = null;
-let termFit = null;
-let qrInstance = null;
-function toggleExpoPanel() {
-  expoOpen = !expoOpen;
-  document.getElementById('expoPanel').className = 'expo-panel' + (expoOpen ? ' open' : '');
-  document.getElementById('expoBtn').className = 'toolbar-btn' + (expoOpen ? ' active' : '');
-  if (termOpen) { termOpen = false; document.getElementById('termPanel').className = 'term-panel'; }
-}
-async function startExpo() {
-  document.getElementById('expoStartBtn').style.display = 'none';
-  document.getElementById('expoStopBtn').style.display = 'inline-flex';
-  appendExpoLog('▶ Starting Expo...');
-  await fetch('/api/expo/start', { method: 'POST' });
-}
-async function stopExpo() {
-  await fetch('/api/expo/stop', { method: 'POST' });
-  document.getElementById('expoStartBtn').style.display = 'inline-flex';
-  document.getElementById('expoStopBtn').style.display = 'none';
-  document.getElementById('expoUrlWrap').style.display = 'none';
-  document.getElementById('qrWrap').style.display = 'none';
-  appendExpoLog('■ Expo stopped.');
-}
-function appendExpoLog(msg) {
-  const el = document.getElementById('expoLogs');
-  const line = document.createElement('div');
-  line.textContent = msg;
-  el.appendChild(line);
-  el.scrollTop = el.scrollHeight;
-}
-function setExpoStatus(status, url) {
-  const statusKey = 'status' + (status || 'stopped').charAt(0).toUpperCase() + (status || 'stopped').slice(1);
-  const label = t(statusKey);
-  ['expoBadge','expoPanelBadge'].forEach(id => {
-    const el = document.getElementById(id);
-    el.className = `expo-status-badge ${status}`;
-    el.textContent = label;
-  });
-  document.getElementById('expoBtn').className = 'toolbar-btn' + (status === 'running' ? ' expo-running' : (expoOpen ? ' active' : ''));
-  if (status === 'running' && url) {
-    document.getElementById('expoUrl').textContent = url;
-    document.getElementById('expoUrlWrap').style.display = 'flex';
-    // Generate QR code
-    document.getElementById('qrWrap').style.display = 'block';
-    const canvas = document.getElementById('qrCanvas');
-    const ctx = canvas.getContext('2d');
-    ctx.clearRect(0, 0, 120, 120);
-    if (window.QRCode) {
-      document.getElementById('qrCanvas').innerHTML = '';
-      try {
-        new QRCode(document.getElementById('qrCanvas'), {
-          text: url,
-          width: 120, height: 120,
-          colorDark: '#e2e4f0',
-          colorLight: '#0d0f1a',
-        });
-      } catch {}
-    }
-  }
-  if (status === 'stopped' || status === 'error') {
-    document.getElementById('expoStartBtn').style.display = 'inline-flex';
-    document.getElementById('expoStopBtn').style.display = 'none';
-  }
-}
-// ── TERMINAL ─────────────────────────────────────────────────────────────────
-function toggleTerminal() {
-  termOpen = !termOpen;
-  document.getElementById('termPanel').className = 'term-panel' + (termOpen ? ' open' : '');
-  document.getElementById('termBtn').className = 'toolbar-btn' + (termOpen ? ' active' : '');
-  if (expoOpen) { expoOpen = false; document.getElementById('expoPanel').className = 'expo-panel'; }
-  if (termOpen && !term) initTerminal();
-  if (termOpen && termFit) setTimeout(() => termFit.fit(), 100);
-}
-function initTerminal() {
-  term = new Terminal({
-    theme: {
-      background: '#0d0f1a',
-      foreground: '#e2e4f0',
-      cursor: '#6c8aff',
-      cursorAccent: '#0d0f1a',
-      selection: 'rgba(108,138,255,0.3)',
-      black: '#1e2130', red: '#f87171', green: '#4ade80', yellow: '#fbbf24',
-      blue: '#6c8aff', magenta: '#c084fc', cyan: '#22d3ee', white: '#e2e4f0',
-      brightBlack: '#454868', brightRed: '#fca5a5', brightGreen: '#86efac',
-      brightYellow: '#fde68a', brightBlue: '#93c5fd', brightMagenta: '#d8b4fe',
-      brightCyan: '#67e8f9', brightWhite: '#f1f5f9',
-    },
-    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-    fontSize: 13,
-    lineHeight: 1.4,
-    cursorBlink: true,
-    scrollback: 2000,
-  });
-  const fitAddon = new FitAddon.FitAddon();
-  termFit = fitAddon;
-  term.loadAddon(fitAddon);
-  term.open(document.getElementById('terminal'));
-  fitAddon.fit();
-  // Connect WebSocket
-  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  termSocket = new WebSocket(`${proto}//${location.host}/terminal`);
-  termSocket.onopen = () => {
-    term.write('\x1b[32m[ClaudeBoard Terminal]\x1b[0m Connected\r\n\r\n');
-  };
-  termSocket.onmessage = (e) => {
-    const msg = JSON.parse(e.data);
-    if (msg.type === 'output') term.write(msg.data);
-    if (msg.type === 'exit') term.write('\r\n\x1b[31m[process exited]\x1b[0m\r\n');
-  };
-  termSocket.onclose = () => term.write('\r\n\x1b[33m[disconnected]\x1b[0m\r\n');
-  term.onData((data) => {
-    if (termSocket?.readyState === 1) {
-      termSocket.send(JSON.stringify({ type: 'input', data }));
-    }
-  });
-  // Resize on window resize
-  window.addEventListener('resize', () => { if (termFit) termFit.fit(); });
-  term.onResize(({ cols, rows }) => {
-    if (termSocket?.readyState === 1) termSocket.send(JSON.stringify({ type: 'resize', cols, rows }));
-  });
-}
-// ── EDIT TASK ─────────────────────────────────────────────────────────────────
-function openEditTask(id) {
-  const task = allTasks().find(t => t.id === id);
-  if (!task) return;
-  document.getElementById('e-id').value = id;
-  document.getElementById('e-title').value = task.title || '';
-  document.getElementById('e-desc').value = task.description || '';
-  document.getElementById('e-priority').value = task.priority || 'medium';
-  document.getElementById('e-type').value = task.type || 'feature';
-  document.getElementById('editModal').style.display = 'flex';
-  applyTranslations();
-}
-function closeEditTask() {
-  document.getElementById('editModal').style.display = 'none';
-}
-async function submitEditTask() {
-  const id = document.getElementById('e-id').value;
-  const title = document.getElementById('e-title').value.trim();
-  const description = document.getElementById('e-desc').value.trim();
-  const priority = document.getElementById('e-priority').value;
-  const type = document.getElementById('e-type').value;
-  if (!title) return;
-  const priorityOrder = { high: 1, medium: 2, low: 3 };
-  await fetch(`/api/tasks/${id}`, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ title, description, priority, type, priority_order: priorityOrder[priority] }),
-  });
-  closeEditTask();
-  loadBoard();
-}
-// ── DELETE TASK ───────────────────────────────────────────────────────────────
-async function deleteTask(id) {
-  if (!confirm(currentLang === 'es' ? '¿Eliminar esta tarea?' : 'Delete this task?')) return;
-  await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
-  loadBoard();
-}
-// ── UTILS ─────────────────────────────────────────────────────────────────────
-function esc(s) {
-  if (!s) return '';
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') { closeModal(); closeRetry(); closeEditTask(); }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'n') { e.preventDefault(); openModal(); }
-});
-// ── I18N ──────────────────────────────────────────────────────────────────────
-const STRINGS = {
-  en: {
-    todo:'todo', running:'running', done:'done', failed:'failed',
-    connecting:'connecting', live:'live', reconnecting:'reconnecting',
-    addTask:'+ Add Task',
-    agentWorking:'Agent working →',
-    colTodo:'To Do', colProg:'In Progress', colDone:'Done', colFailed:'Failed',
-    tabActivity:'Activity', tabDetail:'Detail',
-    activityEmpty:'Waiting for activity...<br><br>Agents will log<br>their work here.',
-    detailEmpty:'Click any task card<br>to see its details.',
-    addTaskTitle:'Add Task',
-    fieldTitle:'Title', fieldDesc:'Description', fieldPriority:'Priority', fieldType:'Type',
-    placeholderTitle:'Implement login screen...',
-    placeholderDesc:'Detailed description of what needs to be done...',
-    prioHigh:'High', prioMed:'Medium', prioLow:'Low',
-    typeFeature:'Feature', typeBug:'Bug', typeConfig:'Config', typeRefactor:'Refactor', typeTest:'Test',
-    cancel:'Cancel', createTask:'Create Task',
-    retryTitle:'Edit & Retry Failed Task',
-    noErrorLog:'No error log found.',
-    agentNoteLabel:'💬 Note for the agent (hint to fix the issue)',
-    agentNotePlaceholder:'e.g. Use tailwind v3 not v4. The error is about missing module X...',
-    retryBtn:'↩ Retry Task',
-    terminal:'⌨️ Terminal',
-    statusStopped:'stopped', statusInstalling:'installing', statusStarting:'starting',
-    statusRunning:'running', statusError:'error',
-    startExpo:'Start Expo', stopExpo:'Stop',
-    expoIdle:'Expo not started. Click "Start Expo" to install dependencies and launch with tunnel.',
-    scanWith:'SCAN WITH EXPO GO',
-    retryCard:'↩ Retry',
-    editTaskTitle:'Edit Task', saveTask:'Save Changes', deleteConfirm:'Delete this task?',
-  },
-  es: {
-    todo:'pendiente', running:'en curso', done:'listo', failed:'fallido',
-    connecting:'conectando', live:'en vivo', reconnecting:'reconectando',
-    addTask:'+ Nueva tarea',
-    agentWorking:'Agente trabajando →',
-    colTodo:'Por hacer', colProg:'En progreso', colDone:'Hecho', colFailed:'Fallido',
-    tabActivity:'Actividad', tabDetail:'Detalle',
-    activityEmpty:'Esperando actividad...<br><br>Los agentes registrarán<br>su trabajo aquí.',
-    detailEmpty:'Hacé clic en una tarea<br>para ver sus detalles.',
-    addTaskTitle:'Nueva tarea',
-    fieldTitle:'Título', fieldDesc:'Descripción', fieldPriority:'Prioridad', fieldType:'Tipo',
-    placeholderTitle:'Implementar pantalla de login...',
-    placeholderDesc:'Descripción detallada de lo que hay que hacer...',
-    prioHigh:'Alta', prioMed:'Media', prioLow:'Baja',
-    typeFeature:'Feature', typeBug:'Bug', typeConfig:'Config', typeRefactor:'Refactor', typeTest:'Test',
-    cancel:'Cancelar', createTask:'Crear tarea',
-    retryTitle:'Editar y reintentar tarea fallida',
-    noErrorLog:'No se encontró log de error.',
-    agentNoteLabel:'💬 Nota para el agente (pista para corregir el problema)',
-    agentNotePlaceholder:'Ej: Usá tailwind v3 no v4. El error es por el módulo X...',
-    retryBtn:'↩ Reintentar',
-    terminal:'⌨️ Terminal',
-    statusStopped:'detenido', statusInstalling:'instalando', statusStarting:'iniciando',
-    statusRunning:'activo', statusError:'error',
-    startExpo:'Iniciar Expo', stopExpo:'Detener',
-    expoIdle:'Expo no iniciado. Hacé clic en "Iniciar Expo" para instalar dependencias y lanzar con tunnel.',
-    scanWith:'ESCANEAR CON EXPO GO',
-    retryCard:'↩ Reintentar',
-    editTaskTitle:'Editar tarea', saveTask:'Guardar cambios', deleteConfirm:'¿Eliminar esta tarea?',
-  }
-};
-let currentLang = localStorage.getItem('cb-lang') || 'en';
-function t(key) {
-  return STRINGS[currentLang][key] ?? STRINGS.en[key] ?? key;
-}
-function setLang(lang) {
-  currentLang = lang;
-  localStorage.setItem('cb-lang', lang);
-  document.getElementById('lang-en').classList.toggle('active', lang === 'en');
-  document.getElementById('lang-es').classList.toggle('active', lang === 'es');
-  applyTranslations();
-}
-function applyTranslations() {
-  document.querySelectorAll('[data-i18n]').forEach(el => {
-    el.innerHTML = t(el.getAttribute('data-i18n'));
-  });
-  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
-    el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
-  });
-  // Re-sync expo badge text based on current status class
-  ['expoBadge','expoPanelBadge'].forEach(id => {
-    const el = document.getElementById(id);
-    if (!el) return;
-    const status = [...el.classList].find(c =>
-      ['stopped','installing','starting','running','error'].includes(c)
-    ) || 'stopped';
-    el.textContent = t('status' + status.charAt(0).toUpperCase() + status.slice(1));
-  });
-}
-// ── INIT ──────────────────────────────────────────────────────────────────────
-loadBoard();
-connectWS();
-// Only poll when WS is disconnected (fallback)
-let pollInterval = null;
-// Load expo status
-fetch('/api/expo/status').then(r => r.json()).then(d => setExpoStatus(d.status, d.url));
-// Apply saved language on load
-(function() {
-  document.getElementById('lang-en').classList.toggle('active', currentLang === 'en');
-  document.getElementById('lang-es').classList.toggle('active', currentLang === 'es');
-  applyTranslations();
-})();
-</script>
-</body>
-</html>