ralphflow 0.5.0 → 0.5.2

package/src/dashboard/ui/index.html

@@ -4,1203 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>RalphFlow Dashboard</title>
-<style>
-  :root {
-    --bg: #0d1117;
-    --bg-surface: #161b22;
-    --bg-hover: #1c2128;
-    --bg-active: #21262d;
-    --border: #30363d;
-    --text: #e6edf3;
-    --text-dim: #8b949e;
-    --text-muted: #484f58;
-    --accent: #58a6ff;
-    --green: #3fb950;
-    --blue: #58a6ff;
-    --yellow: #d29922;
-    --red: #f85149;
-    --purple: #bc8cff;
-    --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
-    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-    --radius: 6px;
-  }
-
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-
-  body {
-    font-family: var(--sans);
-    background: var(--bg);
-    color: var(--text);
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /* Header */
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 20px;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-surface);
-    flex-shrink: 0;
-  }
-  .header h1 {
-    font-size: 15px;
-    font-weight: 600;
-    letter-spacing: -0.3px;
-  }
-  .header .host {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text-dim);
-  }
-
-  /* Main layout */
-  .main {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  /* Sidebar */
-  .sidebar {
-    width: 240px;
-    border-right: 1px solid var(--border);
-    background: var(--bg-surface);
-    overflow-y: auto;
-    flex-shrink: 0;
-  }
-  .sidebar-section {
-    padding: 12px 0;
-  }
-  .sidebar-label {
-    padding: 0 16px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-dim);
-    margin-bottom: 4px;
-  }
-  .sidebar-item {
-    display: block;
-    padding: 6px 16px;
-    font-size: 13px;
-    color: var(--text-dim);
-    cursor: pointer;
-    border-left: 2px solid transparent;
-    transition: background 0.1s;
-  }
-  .sidebar-item:hover { background: var(--bg-hover); color: var(--text); }
-  .sidebar-item.active {
-    background: var(--bg-active);
-    color: var(--text);
-    border-left-color: var(--accent);
-  }
-  .sidebar-item.app-item {
-    font-weight: 600;
-    color: var(--text);
-    padding: 8px 16px;
-  }
-  .sidebar-item.loop-item { padding-left: 32px; font-size: 12px; }
-  .sidebar-item .badge {
-    font-size: 10px;
-    font-family: var(--mono);
-    padding: 1px 6px;
-    border-radius: 10px;
-    margin-left: 6px;
-    background: var(--bg-hover);
-    color: var(--text-dim);
-  }
-
-  /* Content */
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 24px 32px;
-  }
-  .content-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--text-muted);
-    font-size: 14px;
-  }
-
-  /* App header */
-  .app-header { margin-bottom: 24px; }
-  .app-header h2 {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 4px;
-  }
-  .app-type-badge {
-    display: inline-block;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--purple);
-    background: rgba(188, 140, 255, 0.1);
-    padding: 2px 8px;
-    border-radius: 4px;
-    margin-right: 8px;
-  }
-  .app-desc {
-    color: var(--text-dim);
-    font-size: 13px;
-    margin-top: 6px;
-  }
-
-  /* Pipeline view */
-  .pipeline {
-    display: flex;
-    align-items: center;
-    gap: 0;
-    margin-bottom: 28px;
-    padding: 16px 0;
-  }
-  .pipeline-node {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    padding: 12px 20px;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    background: var(--bg-surface);
-    transition: border-color 0.15s, background 0.15s;
-    min-width: 120px;
-  }
-  .pipeline-node:hover { border-color: var(--text-dim); }
-  .pipeline-node.selected { border-color: var(--accent); background: rgba(88, 166, 255, 0.05); }
-  .pipeline-node .node-name { font-size: 12px; font-weight: 600; }
-  .pipeline-node .node-status {
-    font-family: var(--mono);
-    font-size: 10px;
-    padding: 2px 8px;
-    border-radius: 10px;
-  }
-  .pipeline-node .node-status.complete { background: rgba(63,185,80,0.15); color: var(--green); }
-  .pipeline-node .node-status.running { background: rgba(88,166,255,0.15); color: var(--blue); }
-  .pipeline-node .node-status.pending { background: rgba(139,148,158,0.1); color: var(--text-muted); }
-  .pipeline-connector {
-    width: 32px;
-    height: 2px;
-    background: var(--border);
-    flex-shrink: 0;
-  }
-
-  /* Section */
-  .section {
-    margin-bottom: 24px;
-  }
-  .section-title {
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-dim);
-    margin-bottom: 12px;
-  }
-
-  /* Loop detail */
-  .loop-meta {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-  .meta-card {
-    padding: 12px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-  }
-  .meta-label {
-    font-size: 11px;
-    color: var(--text-dim);
-    margin-bottom: 4px;
-  }
-  .meta-value {
-    font-family: var(--mono);
-    font-size: 13px;
-  }
-
-  /* Progress bar */
-  .progress-bar {
-    height: 6px;
-    background: var(--bg-active);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-top: 8px;
-  }
-  .progress-fill {
-    height: 100%;
-    background: var(--green);
-    border-radius: 3px;
-    transition: width 0.3s ease;
-  }
-
-  /* Agent table */
-  .agent-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 12px;
-    font-family: var(--mono);
-  }
-  .agent-table th {
-    text-align: left;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--border);
-    color: var(--text-dim);
-    font-weight: 500;
-    font-size: 11px;
-  }
-  .agent-table td {
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--border);
-    color: var(--text);
-  }
-  .agent-table tr:hover td { background: var(--bg-hover); }
-
-  /* Editor */
-  .editor-wrap {
-    position: relative;
-  }
-  .editor {
-    width: 100%;
-    min-height: 300px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.6;
-    padding: 16px;
-    resize: vertical;
-    outline: none;
-    tab-size: 2;
-  }
-  .editor:focus { border-color: var(--accent); }
-  .editor-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    align-items: center;
-  }
-  .btn {
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 500;
-    padding: 6px 14px;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: background 0.1s, border-color 0.1s;
-    background: var(--bg-surface);
-    color: var(--text);
-  }
-  .btn:hover { background: var(--bg-hover); border-color: var(--text-dim); }
-  .btn-primary {
-    background: var(--accent);
-    color: #000;
-    border-color: var(--accent);
-  }
-  .btn-primary:hover { background: #79c0ff; }
-  .btn-danger {
-    background: transparent;
-    color: var(--red);
-    border-color: var(--red);
-  }
-  .btn-danger:hover { background: rgba(248, 81, 73, 0.15); }
-  .btn-muted {
-    background: transparent;
-    color: var(--text-dim);
-    border-color: var(--border);
-  }
-  .btn-muted:hover { background: var(--bg-hover); color: var(--text); }
-  .btn:disabled { opacity: 0.5; cursor: default; }
-  .dirty-indicator {
-    font-size: 11px;
-    color: var(--yellow);
-  }
-  .save-ok {
-    font-size: 11px;
-    color: var(--green);
-  }
-
-  /* Three-panel layout */
-  .panel-grid {
-    display: grid;
-    grid-template-columns: 40fr 60fr;
-    gap: 16px;
-    min-height: 0;
-  }
-  .panel-col-left {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    min-height: 0;
-  }
-  .panel {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    display: flex;
-    flex-direction: column;
-  }
-  .panel-header {
-    padding: 10px 16px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-dim);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .panel-body {
-    padding: 16px;
-    overflow-y: auto;
-    flex: 1;
-    min-height: 0;
-  }
-  .panel-interactive {
-    flex-shrink: 0;
-  }
-  .panel-interactive .panel-body {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    color: var(--text-muted);
-    font-size: 12px;
-  }
-  .panel-interactive .bell-icon {
-    font-size: 14px;
-    opacity: 0.5;
-  }
-  .panel-progress {
-    flex: 1;
-    min-height: 0;
-  }
-  .panel-edit {
-    min-height: 0;
-    max-height: calc(100vh - 200px);
-  }
-  .panel-edit .panel-body {
-    display: flex;
-    flex-direction: column;
-  }
-  .panel-edit .editor {
-    flex: 1;
-    min-height: 60vh;
-  }
-
-  /* Edit tabs */
-  .edit-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .edit-tab {
-    padding: 10px 16px;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-dim);
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    transition: color 0.1s, border-color 0.1s;
-  }
-  .edit-tab:hover { color: var(--text); }
-  .edit-tab.active {
-    color: var(--text);
-    border-bottom-color: var(--accent);
-  }
-
-  /* Model selector */
-  .model-selector-wrap {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-    padding: 4px 12px;
-  }
-  .model-selector-wrap label {
-    font-size: 11px;
-    color: var(--text-dim);
-    white-space: nowrap;
-  }
-  .model-selector {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text);
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 4px 8px;
-    cursor: pointer;
-    outline: none;
-  }
-  .model-selector:hover { border-color: var(--text-dim); }
-  .model-selector:focus { border-color: var(--accent); }
-  .model-save-ok {
-    font-size: 11px;
-    color: var(--green);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-  .model-save-ok.visible { opacity: 1; }
-
-  /* Prompt mode toggle */
-  .prompt-mode-toggle {
-    display: flex;
-    gap: 0;
-    margin-bottom: 12px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    overflow: hidden;
-    width: fit-content;
-  }
-  .prompt-mode-btn {
-    padding: 6px 16px;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-dim);
-    background: var(--bg);
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-  .prompt-mode-btn:not(:last-child) {
-    border-right: 1px solid var(--border);
-  }
-  .prompt-mode-btn:hover { color: var(--text); background: var(--bg-hover); }
-  .prompt-mode-btn.active {
-    color: var(--text);
-    background: var(--bg-active);
-  }
-
-  /* Markdown preview */
-  .prompt-preview {
-    flex: 1;
-    min-height: 60vh;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-family: var(--sans);
-    font-size: 14px;
-    line-height: 1.7;
-    padding: 24px 28px;
-    overflow: auto;
-  }
-  .prompt-preview h1 { font-size: 22px; font-weight: 600; margin: 24px 0 12px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
-  .prompt-preview h1:first-child { margin-top: 0; }
-  .prompt-preview h2 { font-size: 18px; font-weight: 600; margin: 20px 0 10px; color: var(--text); }
-  .prompt-preview h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; color: var(--text); }
-  .prompt-preview h4 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
-  .prompt-preview p { margin: 0 0 12px; }
-  .prompt-preview ul, .prompt-preview ol { margin: 0 0 12px; padding-left: 24px; }
-  .prompt-preview li { margin: 4px 0; }
-  .prompt-preview li.task-done { color: var(--text-dim); text-decoration: line-through; }
-  .prompt-preview code {
-    font-family: var(--mono);
-    font-size: 12px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    padding: 2px 6px;
-  }
-  .prompt-preview pre {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 14px 16px;
-    margin: 0 0 12px;
-    overflow-x: auto;
-  }
-  .prompt-preview pre code {
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  .prompt-preview blockquote {
-    border-left: 3px solid var(--accent);
-    padding: 4px 16px;
-    margin: 0 0 12px;
-    color: var(--text-dim);
-    background: var(--bg);
-    border-radius: 0 var(--radius) var(--radius) 0;
-  }
-  .prompt-preview hr {
-    border: none;
-    border-top: 1px solid var(--border);
-    margin: 16px 0;
-  }
-  .prompt-preview strong { font-weight: 600; color: var(--text); }
-  .prompt-preview em { font-style: italic; }
-  .prompt-preview table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 0 0 12px;
-    font-size: 13px;
-  }
-  .prompt-preview th, .prompt-preview td {
-    border: 1px solid var(--border);
-    padding: 8px 12px;
-    text-align: left;
-  }
-  .prompt-preview th {
-    background: var(--bg);
-    font-weight: 600;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-    color: var(--text-dim);
-  }
-  .prompt-preview a { color: var(--accent); text-decoration: none; }
-  .prompt-preview a:hover { text-decoration: underline; }
-
-  /* Read-only code viewer */
-  .code-viewer {
-    width: 100%;
-    flex: 1;
-    min-height: 200px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text);
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.6;
-    padding: 16px;
-    overflow: auto;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    margin: 0;
-  }
-
-  /* Tracker viewer */
-  .tracker-viewer {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 16px;
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.7;
-    max-height: 400px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-  .panel-progress .tracker-viewer {
-    border: none;
-    border-radius: 0;
-    max-height: none;
-    padding: 0;
-    margin-top: 16px;
-  }
-  .tracker-viewer h1, .tracker-viewer h2, .tracker-viewer h3 {
-    font-family: var(--sans);
-    margin: 12px 0 6px;
-  }
-  .tracker-viewer h1 { font-size: 16px; }
-  .tracker-viewer h2 { font-size: 14px; }
-  .tracker-viewer h3 { font-size: 13px; }
-  .tracker-viewer .cb-done { color: var(--green); }
-  .tracker-viewer .cb-todo { color: var(--text-muted); }
-  .tracker-viewer table {
-    border-collapse: collapse;
-    margin: 8px 0;
-    width: 100%;
-  }
-  .tracker-viewer th, .tracker-viewer td {
-    border: 1px solid var(--border);
-    padding: 4px 10px;
-    text-align: left;
-    font-size: 12px;
-  }
-  .tracker-viewer th { background: var(--bg-active); color: var(--text-dim); }
-
-  /* Status bar */
-  .statusbar {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 6px 20px;
-    border-top: 1px solid var(--border);
-    background: var(--bg-surface);
-    font-size: 11px;
-    color: var(--text-dim);
-    flex-shrink: 0;
-  }
-  .status-dot {
-    display: inline-block;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    margin-right: 4px;
-  }
-  .status-dot.connected { background: var(--green); }
-  .status-dot.disconnected { background: var(--red); }
-  .status-dot.connecting { background: var(--yellow); }
-
-  /* New App button */
-  .new-app-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: calc(100% - 24px);
-    margin: 8px 12px 4px;
-    padding: 6px 12px;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-dim);
-    background: transparent;
-    border: 1px dashed var(--border);
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: background 0.1s, color 0.1s, border-color 0.1s;
-  }
-  .new-app-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text);
-    border-color: var(--text-dim);
-  }
-
-  /* Modal overlay */
-  .modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-  .modal {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    width: 420px;
-    max-width: 90vw;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
-  }
-  .modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border);
-  }
-  .modal-header h3 {
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .modal-close {
-    background: none;
-    border: none;
-    color: var(--text-dim);
-    font-size: 18px;
-    cursor: pointer;
-    padding: 0 4px;
-    line-height: 1;
-  }
-  .modal-close:hover { color: var(--text); }
-  .modal-body {
-    padding: 20px;
-  }
-
-  /* Form elements */
-  .form-group {
-    margin-bottom: 16px;
-  }
-  .form-label {
-    display: block;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-dim);
-    margin-bottom: 6px;
-  }
-  .form-select, .form-input {
-    width: 100%;
-    padding: 8px 12px;
-    font-family: var(--sans);
-    font-size: 13px;
-    color: var(--text);
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    outline: none;
-  }
-  .form-select:focus, .form-input:focus {
-    border-color: var(--accent);
-  }
-  .form-select option {
-    background: var(--bg);
-    color: var(--text);
-  }
-  .form-error {
-    font-size: 12px;
-    color: var(--red);
-    margin-top: 12px;
-  }
-  .form-warning {
-    font-size: 12px;
-    color: var(--yellow);
-    margin-top: 12px;
-  }
-
-  /* Next-steps view */
-  .next-steps-success {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    color: var(--green);
-    margin-bottom: 16px;
-  }
-  .next-steps-label {
-    font-size: 12px;
-    color: var(--text-dim);
-    margin-bottom: 8px;
-  }
-  .cmd-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 8px 12px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text);
-  }
-  .cmd-text {
-    flex: 1;
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-  .cmd-copy {
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--text-dim);
-    font-family: var(--sans);
-    font-size: 11px;
-    padding: 2px 8px;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background 0.1s, color 0.1s;
-  }
-  .cmd-copy:hover { background: var(--bg-hover); color: var(--text); }
-
-  .modal-footer {
-    padding: 12px 20px;
-    border-top: 1px solid var(--border);
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-
-  /* Notification list in interactive panel */
-  .panel-interactive.has-notifs .panel-body {
-    display: block;
-    padding: 8px;
-    max-height: 240px;
-    overflow-y: auto;
-    color: var(--text);
-  }
-  .notif-card {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 8px 10px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    margin-bottom: 6px;
-    font-size: 12px;
-  }
-  .notif-card:last-child { margin-bottom: 0; }
-  .notif-time {
-    color: var(--text-dim);
-    font-family: var(--mono);
-    font-size: 11px;
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-  .notif-msg {
-    flex: 1;
-    color: var(--text);
-    word-break: break-word;
-  }
-  .notif-dismiss {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 16px;
-    cursor: pointer;
-    padding: 0 2px;
-    line-height: 1;
-    flex-shrink: 0;
-  }
-  .notif-dismiss:hover { color: var(--red); }
-
-  /* Sidebar notification badge */
-  .notif-badge {
-    font-size: 10px;
-    font-family: var(--mono);
-    padding: 1px 6px;
-    border-radius: 10px;
-    margin-left: 6px;
-    background: var(--accent);
-    color: #000;
-    font-weight: 600;
-  }
-
-  /* App-level tabs (Loops / Archives) */
-  .app-tabs {
-    display: flex;
-    gap: 0;
-    border-bottom: 1px solid var(--border);
-    margin-bottom: 24px;
-  }
-  .app-tab {
-    padding: 10px 20px;
-    font-family: var(--sans);
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text-dim);
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    transition: color 0.1s, border-color 0.1s;
-  }
-  .app-tab:hover { color: var(--text); }
-  .app-tab.active {
-    color: var(--text);
-    border-bottom-color: var(--accent);
-  }
-
-  /* Archive timeline */
-  .archive-timeline {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .archive-empty {
-    text-align: center;
-    padding: 48px 24px;
-    color: var(--text-muted);
-    font-size: 14px;
-  }
-  .archive-empty-icon {
-    font-size: 32px;
-    margin-bottom: 12px;
-    opacity: 0.4;
-  }
-  .archive-card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    overflow: hidden;
-    transition: border-color 0.15s;
-  }
-  .archive-card:hover { border-color: var(--text-dim); }
-  .archive-card.expanded { border-color: var(--accent); }
-  .archive-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 16px;
-    cursor: pointer;
-    transition: background 0.1s;
-  }
-  .archive-card-header:hover { background: var(--bg-hover); }
-  .archive-card-date {
-    font-family: var(--mono);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text);
-  }
-  .archive-card-stats {
-    display: flex;
-    gap: 12px;
-    font-size: 12px;
-    color: var(--text-dim);
-  }
-  .archive-card-stat {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .archive-card-stat .stat-val {
-    font-family: var(--mono);
-    color: var(--text);
-  }
-  .archive-card-chevron {
-    font-size: 12px;
-    color: var(--text-muted);
-    transition: transform 0.2s;
-    margin-left: 12px;
-  }
-  .archive-card.expanded .archive-card-chevron {
-    transform: rotate(90deg);
-  }
-
-  /* Archive file browser */
-  .archive-files {
-    border-top: 1px solid var(--border);
-    max-height: 400px;
-    overflow-y: auto;
-  }
-  .archive-file-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text-dim);
-    cursor: pointer;
-    transition: background 0.1s;
-    border-bottom: 1px solid var(--border);
-  }
-  .archive-file-item:last-child { border-bottom: none; }
-  .archive-file-item:hover { background: var(--bg-hover); color: var(--text); }
-  .archive-file-item.active { background: var(--bg-active); color: var(--accent); }
-  .archive-file-icon { opacity: 0.5; font-size: 11px; }
-
-  /* Archive file viewer (inline) */
-  .archive-file-viewer {
-    border-top: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
-    max-height: 500px;
-  }
-  .archive-file-viewer-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: var(--bg-active);
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text-dim);
-    flex-shrink: 0;
-  }
-  .archive-file-viewer-close {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 16px;
-    cursor: pointer;
-    padding: 0 4px;
-    line-height: 1;
-  }
-  .archive-file-viewer-close:hover { color: var(--text); }
-  .archive-file-content {
-    flex: 1;
-    overflow: auto;
-    padding: 16px;
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    background: var(--bg);
-    color: var(--text);
-  }
-
-  /* Templates page */
-  .templates-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 24px;
-  }
-  .templates-header h2 { font-size: 20px; font-weight: 600; }
-  .template-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 12px;
-  }
-  .template-card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 16px;
-    transition: border-color 0.15s;
-  }
-  .template-card:hover { border-color: var(--text-dim); }
-  .template-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-  }
-  .template-card-name { font-size: 14px; font-weight: 600; }
-  .template-card-type {
-    font-family: var(--mono);
-    font-size: 10px;
-    padding: 2px 8px;
-    border-radius: 10px;
-  }
-  .template-card-type.built-in { background: rgba(88,166,255,0.1); color: var(--blue); }
-  .template-card-type.custom { background: rgba(63,185,80,0.1); color: var(--green); }
-  .template-card-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
-  .template-card-meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 11px;
-    color: var(--text-muted);
-  }
-
-  /* Template builder */
-  .template-builder { max-width: 800px; }
-  .builder-section { margin-bottom: 24px; }
-  .builder-section-title {
-    font-size: 13px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: var(--text);
-  }
-  .loop-cards { display: flex; flex-direction: column; gap: 12px; }
-  .loop-card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 16px;
-  }
-  .loop-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-  }
-  .loop-card-title { font-size: 13px; font-weight: 600; }
-  .loop-card-remove {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 16px;
-    cursor: pointer;
-    padding: 0 4px;
-    line-height: 1;
-  }
-  .loop-card-remove:hover { color: var(--red); }
-  .loop-card-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-  }
-  .loop-card-grid .form-group { margin-bottom: 0; }
-  .loop-card-full { grid-column: 1 / -1; }
-  .stage-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 6px 8px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    min-height: 36px;
-    align-items: center;
-    cursor: text;
-  }
-  .stage-tags:focus-within { border-color: var(--accent); }
-  .stage-tag {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-family: var(--mono);
-    font-size: 11px;
-    padding: 2px 8px;
-    background: rgba(88,166,255,0.1);
-    color: var(--accent);
-    border-radius: 4px;
-  }
-  .stage-tag-remove {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 14px;
-    cursor: pointer;
-    padding: 0 2px;
-    line-height: 1;
-  }
-  .stage-tag-remove:hover { color: var(--red); }
-  .stage-tags input {
-    border: none;
-    background: none;
-    color: var(--text);
-    font-family: var(--sans);
-    font-size: 13px;
-    outline: none;
-    min-width: 80px;
-    flex: 1;
-  }
-  .multi-agent-fields {
-    margin-top: 8px;
-    padding: 12px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-  }
-  .toggle-wrap { display: flex; align-items: center; gap: 8px; }
-  .toggle-input { accent-color: var(--accent); }
-  .toggle-label { font-size: 12px; color: var(--text-dim); }
-  .yaml-preview-section { margin-top: 24px; }
-  .yaml-preview {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 16px;
-    font-family: var(--mono);
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--text);
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: 400px;
-    overflow-y: auto;
-  }
-  .builder-actions { display: flex; gap: 8px; margin-top: 20px; }
-  .optional-toggle {
-    font-size: 12px;
-    color: var(--accent);
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin-top: 8px;
-  }
-  .optional-toggle:hover { text-decoration: underline; }
-  .optional-fields {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border);
-  }
-</style>
+<link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
@@ -1231,2018 +35,6 @@
   <span>Events: <span id="eventCount">0</span></span>
 </div>
 
-<script>
-(function() {
-  // State
-  let apps = [];
-  let selectedApp = null;
-  let selectedLoop = null;
-  let eventCounter = 0;
-  let promptDirty = false;
-  let promptOriginal = '';
-  let ws = null;
-  let reconnectDelay = 1000;
-  let activeEditTab = 'prompt';
-  let promptViewMode = 'read';
-  let cachedPromptValue = null;
-  let notificationsList = [];
-  let notifPermissionRequested = false;
-  let audioCtx = null;
-  let audioCtxInitialized = false;
-  let activeAppTab = 'loops';
-  let archivesData = [];
-  let expandedArchive = null;
-  let archiveFilesCache = {};
-  let viewingArchiveFile = null;
-  let currentPage = 'app';
-  let templatesList = [];
-  let showTemplateBuilder = false;
-  let templateBuilderState = null;
-
-  // DOM refs
-  const $ = (sel) => document.querySelector(sel);
-  const hostDisplay = $('#hostDisplay');
-  const sidebarApps = $('#sidebarApps');
-  const content = $('#content');
-  const statusDot = $('#statusDot');
-  const statusText = $('#statusText');
-  const lastUpdate = $('#lastUpdate');
-  const eventCountEl = $('#eventCount');
-
-  hostDisplay.textContent = location.host;
-
-  // Fetch project context for header display
-  fetch('/api/context')
-    .then(r => r.json())
-    .then(ctx => {
-      hostDisplay.textContent = ctx.projectName + ' :' + ctx.port;
-    })
-    .catch(() => { /* keep location.host as fallback */ });
-
-  // WebSocket
-  function connectWs() {
-    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    ws = new WebSocket(`${proto}//${location.host}/ws`);
-
-    ws.onopen = () => {
-      statusDot.className = 'status-dot connected';
-      statusText.textContent = 'Connected';
-      reconnectDelay = 1000;
-    };
-
-    ws.onclose = () => {
-      statusDot.className = 'status-dot disconnected';
-      statusText.textContent = 'Disconnected';
-      setTimeout(connectWs, reconnectDelay);
-      reconnectDelay = Math.min(reconnectDelay * 2, 30000);
-    };
-
-    ws.onerror = () => {
-      ws.close();
-    };
-
-    ws.onmessage = (e) => {
-      const event = JSON.parse(e.data);
-      eventCounter++;
-      eventCountEl.textContent = eventCounter;
-      lastUpdate.textContent = new Date().toLocaleTimeString();
-      handleWsEvent(event);
-    };
-  }
-
-  function handleWsEvent(event) {
-    if (event.type === 'status:full') {
-      apps = event.apps;
-      renderSidebar();
-      if (selectedApp) {
-        const updated = apps.find(a => a.appName === selectedApp.appName);
-        if (updated) {
-          selectedApp = updated;
-          renderContent();
-        }
-      }
-    } else if (event.type === 'tracker:updated') {
-      if (selectedApp && selectedApp.appName === event.app) {
-        // Update the loop status in our local state
-        const loopEntry = selectedApp.loops.find(l => l.key === event.loop);
-        if (loopEntry) {
-          loopEntry.status = event.status;
-        }
-        renderContent();
-        // Refresh tracker viewer if this loop is selected
-        if (selectedLoop === event.loop) {
-          loadTracker(event.app, event.loop);
-        }
-      }
-    } else if (event.type === 'file:changed') {
-      if (selectedApp && selectedApp.appName === event.app) {
-        // Refresh status
-        fetchAppStatus(event.app);
-      }
-    } else if (event.type === 'notification:attention') {
-      const n = event.notification;
-      notificationsList.unshift(n);
-      renderSidebar();
-      renderContent();
-      maybeRequestNotifPermission();
-      showBrowserNotification(n);
-      playNotificationChime();
-    } else if (event.type === 'notification:dismissed') {
-      notificationsList = notificationsList.filter(n => n.id !== event.id);
-      renderSidebar();
-      renderContent();
-    }
-  }
-
-  // API helpers
-  async function fetchJson(url) {
-    const res = await fetch(url);
-    return res.json();
-  }
-
-  async function fetchApps() {
-    apps = await fetchJson('/api/apps');
-    renderSidebar();
-    if (apps.length > 0 && !selectedApp) {
-      selectApp(apps[0]);
-    }
-  }
-
-  async function fetchAppStatus(appName) {
-    const statuses = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/status`);
-    if (selectedApp && selectedApp.appName === appName) {
-      statuses.forEach(s => {
-        const loop = selectedApp.loops.find(l => l.key === s.key);
-        if (loop) loop.status = s;
-      });
-      renderContent();
-    }
-  }
-
-  // Sidebar
-  function renderSidebar() {
-    let html = '';
-    for (const app of apps) {
-      const appActive = selectedApp && selectedApp.appName === app.appName;
-      html += `<div class="sidebar-item app-item${appActive ? ' active' : ''}" data-app="${esc(app.appName)}">
-        ${esc(app.appName)}
-        <span class="badge">${esc(app.appType)}</span>
-      </div>`;
-      if (app.loops) {
-        for (const loop of app.loops) {
-          const loopActive = appActive && selectedLoop === loop.key;
-          const loopNotifCount = notificationsList.filter(n => n.app === app.appName && n.loop === loop.key).length;
-          const badgeHtml = loopNotifCount > 0 ? ` <span class="notif-badge">${loopNotifCount}</span>` : '';
-          html += `<div class="sidebar-item loop-item${loopActive ? ' active' : ''}" data-app="${esc(app.appName)}" data-loop="${esc(loop.key)}">
-            ${esc(loop.name)}${badgeHtml}
-          </div>`;
-        }
-      }
-    }
-    sidebarApps.innerHTML = html;
-
-    // "+ New App" button
-    const newAppBtn = document.createElement('button');
-    newAppBtn.className = 'new-app-btn';
-    newAppBtn.innerHTML = '+ New App';
-    newAppBtn.addEventListener('click', openCreateAppModal);
-    sidebarApps.appendChild(newAppBtn);
-
-    // Event delegation
-    sidebarApps.querySelectorAll('.app-item').forEach(el => {
-      el.addEventListener('click', () => {
-        const app = apps.find(a => a.appName === el.dataset.app);
-        if (app) selectApp(app);
-      });
-    });
-    sidebarApps.querySelectorAll('.loop-item').forEach(el => {
-      el.addEventListener('click', () => {
-        const app = apps.find(a => a.appName === el.dataset.app);
-        if (app) {
-          selectApp(app);
-          selectLoop(el.dataset.loop);
-        }
-      });
-    });
-
-    // Update Templates nav active state
-    const templatesNav = document.getElementById('templatesNav');
-    if (templatesNav) {
-      templatesNav.classList.toggle('active', currentPage === 'templates');
-    }
-  }
-
-  function selectApp(app) {
-    currentPage = 'app';
-    selectedApp = app;
-    selectedLoop = app.loops.length > 0 ? app.loops[0].key : null;
-    promptDirty = false;
-    activeEditTab = 'prompt';
-    cachedPromptValue = null;
-    activeAppTab = 'loops';
-    archivesData = [];
-    expandedArchive = null;
-    archiveFilesCache = {};
-    viewingArchiveFile = null;
-    document.title = app.appName + ' - RalphFlow Dashboard';
-    renderSidebar();
-    renderContent();
-    fetchAppStatus(app.appName);
-  }
-
-  function selectLoop(loopKey) {
-    selectedLoop = loopKey;
-    promptDirty = false;
-    activeEditTab = 'prompt';
-    cachedPromptValue = null;
-    renderSidebar();
-    renderContent();
-  }
-
-  // Main content
-  function renderContent() {
-    if (currentPage === 'templates') {
-      renderTemplatesPage();
-      return;
-    }
-    if (!selectedApp) {
-      content.innerHTML = '<div class="content-empty">Select an app to view details</div>';
-      return;
-    }
-
-    const app = selectedApp;
-    const currentLoop = app.loops.find(l => l.key === selectedLoop);
-
-    let html = '';
-
-    // App header
-    html += `<div class="app-header">
-      <div style="display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%">
-        <div style="display:flex;align-items:center;gap:10px">
-          <h2>${esc(app.appName)}</h2>
-          <span class="app-type-badge">${esc(app.appType)}</span>
-        </div>
-        <div style="display:flex;gap:6px">
-          <button class="btn btn-muted" style="font-size:12px;padding:4px 10px" onclick="openArchiveAppModal('${esc(app.appName)}')">Archive</button>
-          <button class="btn btn-danger" style="font-size:12px;padding:4px 10px" onclick="openDeleteAppModal('${esc(app.appName)}')">Delete</button>
-        </div>
-      </div>
-      ${app.description ? `<div class="app-desc">${esc(app.description)}</div>` : ''}
-    </div>`;
-
-    // App-level tabs: Loops | Archives
-    html += `<div class="app-tabs">
-      <button class="app-tab${activeAppTab === 'loops' ? ' active' : ''}" data-app-tab="loops">Loops</button>
-      <button class="app-tab${activeAppTab === 'archives' ? ' active' : ''}" data-app-tab="archives">Archives</button>
-    </div>`;
-
-    if (activeAppTab === 'archives') {
-      html += '<div id="archivesContainer">Loading archives...</div>';
-      content.innerHTML = html;
-
-      // Bind app tab clicks
-      content.querySelectorAll('.app-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchAppTab(tab.dataset.appTab));
-      });
-
-      loadArchives(app.appName);
-      return;
-    }
-
-    // --- Loops tab content ---
-
-    // Pipeline
-    html += '<div class="section"><div class="section-title">Pipeline</div><div class="pipeline">';
-    app.loops.forEach((loop, i) => {
-      if (i > 0) html += '<div class="pipeline-connector"></div>';
-      const statusClass = getLoopStatusClass(loop);
-      const isSelected = loop.key === selectedLoop;
-      html += `<div class="pipeline-node${isSelected ? ' selected' : ''}" data-loop="${esc(loop.key)}">
-        <span class="node-name">${esc(loop.name)}</span>
-        <span class="node-status ${statusClass}">${statusClass}</span>
-      </div>`;
-    });
-    html += '</div></div>';
-
-    // Commands section
-    html += '<div class="section"><div class="section-title">Commands</div><div class="commands-list">';
-    app.loops.forEach(loop => {
-      const alias = loop.key.replace(/-loop$/, '');
-      let cmd = `npx ralphflow run ${alias} -f ${app.appName}`;
-      if (loop.multiAgent) cmd += ' --multi-agent';
-      if (loop.model) cmd += ` --model ${loop.model}`;
-      html += `<div class="cmd-item">
-        <span class="cmd-text">${esc(cmd)}</span>
-        <button class="cmd-copy" data-cmd="${esc(cmd)}">Copy</button>
-      </div>`;
-    });
-    const e2eCmd = `npx ralphflow e2e -f ${app.appName}`;
-    html += `<div class="cmd-item">
-      <span class="cmd-text">${esc(e2eCmd)}</span>
-      <button class="cmd-copy" data-cmd="${esc(e2eCmd)}">Copy</button>
-    </div>`;
-    html += '</div></div>';
-
-    // Loop detail — two-column three-panel layout
-    if (currentLoop) {
-      const st = currentLoop.status || {};
-
-      html += '<div class="panel-grid">';
-
-      // Left column: Interactive + Progress
-      html += '<div class="panel-col-left">';
-
-      // Interactive panel
-      const loopNotifs = notificationsList.filter(n => n.app === app.appName && n.loop === currentLoop.key);
-      const hasNotifs = loopNotifs.length > 0;
-      html += `<div class="panel panel-interactive${hasNotifs ? ' has-notifs' : ''}">
-        <div class="panel-header">Interactive${hasNotifs ? ' <span style="color:var(--accent)">(' + loopNotifs.length + ')</span>' : ''}</div>
-        <div class="panel-body">`;
-      if (hasNotifs) {
-        for (const n of loopNotifs) {
-          const time = new Date(n.timestamp).toLocaleTimeString();
-          const msg = extractNotifMessage(n.payload);
-          html += `<div class="notif-card" data-notif-id="${esc(n.id)}">
-            <span class="notif-time">${esc(time)}</span>
-            <span class="notif-msg">${esc(msg)}</span>
-            <button class="notif-dismiss" data-dismiss-id="${esc(n.id)}">&times;</button>
-          </div>`;
-        }
-      } else {
-        html += `<span class="bell-icon">&#128276;</span><span>No notifications</span>`;
-      }
-      html += '</div></div>';
-
-      // Progress panel
-      html += `<div class="panel panel-progress">
-        <div class="panel-header">Progress</div>
-        <div class="panel-body">
-          <div class="loop-meta">
-            <div class="meta-card"><div class="meta-label">Stage</div><div class="meta-value">${esc(st.stage || '—')}</div></div>
-            <div class="meta-card"><div class="meta-label">Active</div><div class="meta-value">${esc(st.active || 'none')}</div></div>
-            <div class="meta-card">
-              <div class="meta-label">Progress</div>
-              <div class="meta-value">${st.completed || 0}/${st.total || 0}</div>
-              <div class="progress-bar"><div class="progress-fill" style="width:${st.total ? (st.completed / st.total * 100) : 0}%"></div></div>
-            </div>
-            <div class="meta-card"><div class="meta-label">Stages</div><div class="meta-value" style="font-size:11px">${(currentLoop.stages || []).join(' → ')}</div></div>
-          </div>`;
-
-      // Agent table
-      if (st.agents && st.agents.length > 0) {
-        html += `<div style="margin-top:16px">
-          <table class="agent-table">
-            <thead><tr><th>Agent</th><th>Active Task</th><th>Stage</th><th>Heartbeat</th></tr></thead>
-            <tbody>`;
-        for (const ag of st.agents) {
-          html += `<tr><td>${esc(ag.name)}</td><td>${esc(ag.activeTask)}</td><td>${esc(ag.stage)}</td><td>${esc(ag.lastHeartbeat)}</td></tr>`;
-        }
-        html += '</tbody></table></div>';
-      }
-
-      // Tracker viewer (inside Progress panel)
-      html += `<div class="tracker-viewer" id="trackerViewer">Loading...</div>`;
-
-      html += '</div></div>'; // close .panel-body + .panel-progress
-      html += '</div>'; // close .panel-col-left
-
-      // Right column: Edit panel with tabs
-      html += `<div class="panel panel-edit">
-        <div class="edit-tabs">
-          <button class="edit-tab${activeEditTab === 'prompt' ? ' active' : ''}" data-tab="prompt">Prompt</button>
-          <button class="edit-tab${activeEditTab === 'tracker' ? ' active' : ''}" data-tab="tracker">Tracker</button>
-          <button class="edit-tab${activeEditTab === 'config' ? ' active' : ''}" data-tab="config">Config</button>
-          <div class="model-selector-wrap">
-            <label>Model</label>
-            <select class="model-selector" id="modelSelector">
-              <option value="">Default</option>
-              <option value="claude-opus-4-6">claude-opus-4-6</option>
-              <option value="claude-sonnet-4-6">claude-sonnet-4-6</option>
-              <option value="claude-haiku-4-5-20251001">claude-haiku-4-5-20251001</option>
-            </select>
-            <span class="model-save-ok" id="modelSaveOk">Saved</span>
-          </div>
-        </div>
-        <div class="panel-body" id="editTabContent"></div>
-      </div>`;
-
-      html += '</div>'; // close .panel-grid
-    }
-
-    content.innerHTML = html;
-
-    // Bind app-level tab clicks
-    content.querySelectorAll('.app-tab').forEach(tab => {
-      tab.addEventListener('click', () => switchAppTab(tab.dataset.appTab));
-    });
-
-    // Bind pipeline node clicks
-    content.querySelectorAll('.pipeline-node').forEach(el => {
-      el.addEventListener('click', () => selectLoop(el.dataset.loop));
-    });
-
-    // Bind command copy buttons
-    content.querySelectorAll('.commands-list .cmd-copy').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const cmd = btn.dataset.cmd || '';
-        navigator.clipboard.writeText(cmd).then(() => {
-          const orig = btn.textContent;
-          btn.textContent = 'Copied!';
-          setTimeout(() => { btn.textContent = orig; }, 1500);
-        });
-      });
-    });
-
-    // Bind notification dismiss buttons
-    content.querySelectorAll('.notif-dismiss').forEach(btn => {
-      btn.addEventListener('click', () => dismissNotification(btn.dataset.dismissId));
-    });
-
-    // Bind edit tabs + load content
-    if (currentLoop) {
-      content.querySelectorAll('.edit-tab').forEach(tab => {
-        tab.addEventListener('click', () => switchEditTab(tab.dataset.tab, app.appName, currentLoop.key));
-      });
-      renderEditTabContent(app.appName, currentLoop.key);
-      loadTracker(app.appName, currentLoop.key);
-      loadModelSelector(app.appName, currentLoop.key);
-    }
-  }
-
-  function bindPromptEditor(appName, loopKey) {
-    const editor = $('#promptEditor');
-    if (!editor) return;
-
-    editor.addEventListener('input', () => {
-      promptDirty = editor.value !== promptOriginal;
-      updateDirtyState();
-    });
-
-    editor.addEventListener('keydown', (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-        e.preventDefault();
-        savePrompt(appName, loopKey);
-      }
-    });
-
-    const saveBtn = $('#savePromptBtn');
-    const resetBtn = $('#resetPromptBtn');
-    if (saveBtn) saveBtn.addEventListener('click', () => savePrompt(appName, loopKey));
-    if (resetBtn) resetBtn.addEventListener('click', () => {
-      editor.value = promptOriginal;
-      promptDirty = false;
-      updateDirtyState();
-    });
-  }
-
-  async function loadPrompt(appName, loopKey) {
-    const editor = $('#promptEditor');
-    if (!editor) return;
-
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/prompt`);
-      editor.value = data.content || '';
-      promptOriginal = editor.value;
-      promptDirty = false;
-      updateDirtyState();
-    } catch {
-      editor.value = '(Error loading prompt)';
-    }
-    bindPromptEditor(appName, loopKey);
-  }
-
-  async function loadPromptPreview(appName, loopKey) {
-    const preview = $('#promptPreview');
-    if (!preview) return;
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/prompt`);
-      promptOriginal = data.content || '';
-      preview.innerHTML = renderMarkdown(promptOriginal);
-    } catch {
-      preview.innerHTML = '<p style="color:var(--text-dim)">(Error loading prompt)</p>';
-    }
-  }
-
-  async function savePrompt(appName, loopKey) {
-    const editor = $('#promptEditor');
-    if (!editor || !promptDirty) return;
-
-    try {
-      await fetch(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/prompt`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: editor.value }),
-      });
-      promptOriginal = editor.value;
-      promptDirty = false;
-      updateDirtyState();
-      const saveOk = $('#saveOk');
-      if (saveOk) {
-        saveOk.style.display = 'inline';
-        setTimeout(() => { saveOk.style.display = 'none'; }, 2000);
-      }
-    } catch {
-      alert('Failed to save prompt');
-    }
-  }
-
-  function updateDirtyState() {
-    const saveBtn = $('#savePromptBtn');
-    const resetBtn = $('#resetPromptBtn');
-    const indicator = $('#dirtyIndicator');
-    if (saveBtn) saveBtn.disabled = !promptDirty;
-    if (resetBtn) resetBtn.disabled = !promptDirty;
-    if (indicator) indicator.style.display = promptDirty ? 'inline' : 'none';
-  }
-
-  async function loadTracker(appName, loopKey) {
-    const viewer = $('#trackerViewer');
-    if (!viewer) return;
-
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/tracker`);
-      viewer.innerHTML = renderMarkdown(data.content || '(empty)');
-    } catch {
-      viewer.innerHTML = '(No tracker file found)';
-    }
-  }
-
-  function switchEditTab(tab, appName, loopKey) {
-    if (tab === activeEditTab) return;
-    if (activeEditTab === 'prompt') {
-      const editor = $('#promptEditor');
-      if (editor) {
-        cachedPromptValue = editor.value;
-      }
-    }
-    activeEditTab = tab;
-    document.querySelectorAll('.edit-tab').forEach(t => {
-      t.classList.toggle('active', t.dataset.tab === tab);
-    });
-    renderEditTabContent(appName, loopKey);
-  }
-
-  function renderMarkdown(md) {
-    if (!md) return '<p style="color:var(--text-dim)">(empty)</p>';
-    let html = md;
-    // Escape HTML
-    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    // Fenced code blocks
-    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
-      '<pre><code>' + code.trimEnd() + '</code></pre>'
-    );
-    // Tables
-    html = html.replace(/((?:^\|.+\|$\n?)+)/gm, (block) => {
-      const rows = block.trim().split('\n').filter(r => r.trim());
-      if (rows.length < 2) return block;
-      const parseRow = r => r.split('|').slice(1, -1).map(c => c.trim());
-      const headers = parseRow(rows[0]);
-      // Skip separator row
-      const isSep = rows[1] && /^\|[\s:|-]+\|$/.test(rows[1].trim());
-      const dataRows = rows.slice(isSep ? 2 : 1);
-      let t = '<table><thead><tr>' + headers.map(h => '<th>' + h + '</th>').join('') + '</tr></thead><tbody>';
-      for (const row of dataRows) {
-        const cells = parseRow(row);
-        t += '<tr>' + cells.map(c => '<td>' + c + '</td>').join('') + '</tr>';
-      }
-      t += '</tbody></table>';
-      return t;
-    });
-    // Blockquotes
-    html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
-    // Horizontal rules
-    html = html.replace(/^---+$/gm, '<hr>');
-    // Headings
-    html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
-    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
-    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
-    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
-    // Task list items
-    html = html.replace(/^- \[x\] (.+)$/gm, '<li class="task-done">&#9745; $1</li>');
-    html = html.replace(/^- \[ \] (.+)$/gm, '<li>&#9744; $1</li>');
-    // Unordered list items
-    html = html.replace(/^[-*] (.+)$/gm, '<li>$1</li>');
-    // Ordered list items
-    html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
-    // Wrap consecutive <li> in <ul>
-    html = html.replace(/((?:<li[^>]*>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
-    // Inline code (but not inside <pre>)
-    html = html.replace(/`([^`\n]+)`/g, '<code>$1</code>');
-    // Bold and italic
-    html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    // Links
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
-    // Mustache/template vars — highlight them
-    html = html.replace(/\{\{(\w+)\}\}/g, '<code style="color:var(--purple)">{{$1}}</code>');
-    // Paragraphs: wrap remaining plain text lines
-    html = html.replace(/^(?!<[a-z/])((?!$).+)$/gm, '<p>$1</p>');
-    // Clean up double-wrapped
-    html = html.replace(/<p><(h[1-4]|ul|ol|li|blockquote|pre|table|hr)/g, '<$1');
-    html = html.replace(/<\/(h[1-4]|ul|ol|li|blockquote|pre|table)><\/p>/g, '</$1>');
-    return html;
-  }
-
-  function renderEditTabContent(appName, loopKey) {
-    const container = $('#editTabContent');
-    if (!container) return;
-
-    if (activeEditTab === 'prompt') {
-      const isRead = promptViewMode === 'read';
-      const isEdit = promptViewMode === 'edit';
-      container.innerHTML = `
-        <div class="prompt-mode-toggle">
-          <button class="prompt-mode-btn${isRead ? ' active' : ''}" data-mode="read">Read</button>
-          <button class="prompt-mode-btn${isEdit ? ' active' : ''}" data-mode="edit">Edit</button>
-        </div>
-        ${isEdit ? `<div class="editor-wrap">
-          <textarea class="editor" id="promptEditor" placeholder="Loading..."></textarea>
-          <div class="editor-actions">
-            <button class="btn btn-primary" id="savePromptBtn" disabled>Save</button>
-            <button class="btn" id="resetPromptBtn" disabled>Reset</button>
-            <span class="dirty-indicator" id="dirtyIndicator" style="display:none">Unsaved changes</span>
-            <span class="save-ok" id="saveOk" style="display:none">Saved</span>
-          </div>
-        </div>` : `<div class="prompt-preview" id="promptPreview">Loading...</div>`}`;
-      // Bind toggle buttons
-      container.querySelectorAll('.prompt-mode-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-          if (btn.dataset.mode === promptViewMode) return;
-          // Cache editor value before switching away from edit
-          if (promptViewMode === 'edit') {
-            const editor = $('#promptEditor');
-            if (editor) cachedPromptValue = editor.value;
-          }
-          promptViewMode = btn.dataset.mode;
-          renderEditTabContent(appName, loopKey);
-        });
-      });
-      if (isEdit) {
-        if (cachedPromptValue !== null) {
-          const editor = $('#promptEditor');
-          if (editor) {
-            editor.value = cachedPromptValue;
-            updateDirtyState();
-            bindPromptEditor(appName, loopKey);
-          }
-          cachedPromptValue = null;
-        } else {
-          loadPrompt(appName, loopKey);
-        }
-      } else {
-        // Read mode — render markdown preview
-        if (cachedPromptValue !== null || promptOriginal) {
-          const content = cachedPromptValue !== null ? cachedPromptValue : promptOriginal;
-          const preview = $('#promptPreview');
-          if (preview) preview.innerHTML = renderMarkdown(content);
-        } else {
-          // Need to fetch
-          loadPromptPreview(appName, loopKey);
-        }
-      }
-    } else if (activeEditTab === 'tracker') {
-      container.innerHTML = '<pre class="code-viewer" id="editTrackerViewer">Loading...</pre>';
-      loadEditTracker(appName, loopKey);
-    } else if (activeEditTab === 'config') {
-      container.innerHTML = '<pre class="code-viewer" id="editConfigViewer">Loading...</pre>';
-      loadEditConfig(appName);
-    }
-  }
-
-  async function loadEditTracker(appName, loopKey) {
-    const viewer = $('#editTrackerViewer');
-    if (!viewer) return;
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/tracker`);
-      viewer.textContent = data.content || '(empty)';
-    } catch {
-      viewer.textContent = '(No tracker file found)';
-    }
-  }
-
-  async function loadEditConfig(appName) {
-    const viewer = $('#editConfigViewer');
-    if (!viewer) return;
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/config`);
-      viewer.textContent = data._rawYaml || JSON.stringify(data, null, 2);
-    } catch {
-      viewer.textContent = '(Error loading config)';
-    }
-  }
-
-  async function loadModelSelector(appName, loopKey) {
-    const selector = $('#modelSelector');
-    if (!selector) return;
-
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/config`);
-      const loopConfig = data.loops && data.loops[loopKey];
-      const currentModel = loopConfig && loopConfig.model ? loopConfig.model : '';
-      selector.value = currentModel;
-    } catch {
-      // Leave at default
-    }
-
-    selector.addEventListener('change', () => changeModel(appName, loopKey, selector.value));
-  }
-
-  async function changeModel(appName, loopKey, model) {
-    const saveOk = $('#modelSaveOk');
-    try {
-      await fetch(`/api/apps/${encodeURIComponent(appName)}/config/model`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ loop: loopKey, model: model || null }),
-      });
-      if (saveOk) {
-        saveOk.classList.add('visible');
-        setTimeout(() => saveOk.classList.remove('visible'), 2000);
-      }
-      // Refresh config tab if it's currently visible
-      if (activeEditTab === 'config') {
-        loadEditConfig(appName);
-      }
-    } catch {
-      alert('Failed to update model');
-    }
-  }
-
-  // Minimal markdown renderer
-  function renderMarkdown(md) {
-    let html = '';
-    const lines = md.split('\n');
-    let inTable = false;
-    let tableHtml = '';
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-
-      // Table detection
-      if (line.match(/^\|.+\|$/)) {
-        if (!inTable) {
-          inTable = true;
-          tableHtml = '<table>';
-          // Header row
-          const cells = line.split('|').filter(Boolean).map(c => c.trim());
-          tableHtml += '<thead><tr>' + cells.map(c => `<th>${esc(c)}</th>`).join('') + '</tr></thead><tbody>';
-          continue;
-        }
-        // Separator row
-        if (line.match(/^\|[\s\-|]+\|$/)) continue;
-        // Data row
-        const cells = line.split('|').filter(Boolean).map(c => c.trim());
-        tableHtml += '<tr>' + cells.map(c => `<td>${esc(c)}</td>`).join('') + '</tr>';
-        continue;
-      } else if (inTable) {
-        inTable = false;
-        tableHtml += '</tbody></table>';
-        html += tableHtml;
-        tableHtml = '';
-      }
-
-      // Headers
-      if (line.startsWith('### ')) { html += `<h3>${esc(line.slice(4))}</h3>`; continue; }
-      if (line.startsWith('## ')) { html += `<h2>${esc(line.slice(3))}</h2>`; continue; }
-      if (line.startsWith('# ')) { html += `<h1>${esc(line.slice(2))}</h1>`; continue; }
-
-      // Checkboxes
-      if (line.match(/^- \[x\]/i)) {
-        html += `<div class="cb-done">${esc(line)}</div>`;
-        continue;
-      }
-      if (line.match(/^- \[ \]/)) {
-        html += `<div class="cb-todo">${esc(line)}</div>`;
-        continue;
-      }
-
-      // Regular lines
-      html += line.trim() === '' ? '<br>' : `<div>${esc(line)}</div>`;
-    }
-
-    if (inTable) {
-      tableHtml += '</tbody></table>';
-      html += tableHtml;
-    }
-
-    return html;
-  }
-
-  function getLoopStatusClass(loop) {
-    if (!loop.status) return 'pending';
-    const st = loop.status;
-    if (st.total > 0 && st.completed === st.total) return 'complete';
-    // Running if: has active agents, or has partial progress, or stage indicates activity (not idle/—)
-    if (st.agents && st.agents.length > 0) return 'running';
-    if (st.total > 0 && st.completed > 0 && st.completed < st.total) return 'running';
-    if (st.stage && st.stage !== '—' && st.stage !== 'idle') return 'running';
-    return 'pending';
-  }
-
-  function esc(s) {
-    if (s == null) return '';
-    const d = document.createElement('div');
-    d.textContent = String(s);
-    return d.innerHTML;
-  }
-
-  // Notifications
-  async function fetchNotifications() {
-    try {
-      const data = await fetchJson('/api/notifications');
-      notificationsList = Array.isArray(data) ? data : [];
-      renderSidebar();
-      renderContent();
-    } catch { /* ignore */ }
-  }
-
-  async function dismissNotification(id) {
-    try {
-      await fetch(`/api/notification/${encodeURIComponent(id)}`, { method: 'DELETE' });
-      notificationsList = notificationsList.filter(n => n.id !== id);
-      renderSidebar();
-      renderContent();
-    } catch { /* ignore */ }
-  }
-
-  function extractNotifMessage(payload) {
-    if (!payload) return 'Attention needed';
-    if (typeof payload === 'string') return payload;
-    if (payload.message) return payload.message;
-    if (payload.type) return payload.type;
-    if (payload.event) return payload.event;
-    return 'Attention needed';
-  }
-
-  function maybeRequestNotifPermission() {
-    if (notifPermissionRequested) return;
-    if (!('Notification' in window)) return;
-    if (Notification.permission === 'default') {
-      notifPermissionRequested = true;
-      Notification.requestPermission();
-    }
-  }
-
-  function showBrowserNotification(n) {
-    if (!('Notification' in window)) return;
-    if (Notification.permission !== 'granted') return;
-    if (document.hasFocus()) return;
-    const msg = extractNotifMessage(n.payload);
-    new Notification('RalphFlow — ' + (n.loop || 'Notification'), { body: msg });
-  }
-
-  // Audio notification chime (Web Audio API)
-  function initAudioContext() {
-    if (audioCtxInitialized) return;
-    audioCtxInitialized = true;
-    try {
-      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    } catch (e) {
-      // Silent fail — audio is best-effort
-    }
-  }
-
-  function playNotificationChime() {
-    if (!audioCtx) return;
-    try {
-      const now = audioCtx.currentTime;
-      // First tone: E5 (659 Hz), 120ms
-      const osc1 = audioCtx.createOscillator();
-      const gain1 = audioCtx.createGain();
-      osc1.type = 'sine';
-      osc1.frequency.value = 659;
-      gain1.gain.setValueAtTime(0.15, now);
-      gain1.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
-      osc1.connect(gain1);
-      gain1.connect(audioCtx.destination);
-      osc1.start(now);
-      osc1.stop(now + 0.12);
-      // Second tone: A5 (880 Hz), 150ms, starts 80ms after first
-      const osc2 = audioCtx.createOscillator();
-      const gain2 = audioCtx.createGain();
-      osc2.type = 'sine';
-      osc2.frequency.value = 880;
-      gain2.gain.setValueAtTime(0, now + 0.08);
-      gain2.gain.linearRampToValueAtTime(0.12, now + 0.1);
-      gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.25);
-      osc2.connect(gain2);
-      gain2.connect(audioCtx.destination);
-      osc2.start(now + 0.08);
-      osc2.stop(now + 0.25);
-    } catch (e) {
-      // Silent fail
-    }
-  }
-
-  // Initialize audio context on first user interaction (autoplay policy)
-  function onFirstInteraction() {
-    initAudioContext();
-    document.removeEventListener('click', onFirstInteraction);
-    document.removeEventListener('keydown', onFirstInteraction);
-  }
-  document.addEventListener('click', onFirstInteraction);
-  document.addEventListener('keydown', onFirstInteraction);
-
-  // App-level tab switching (Loops / Archives)
-  function switchAppTab(tab) {
-    if (tab === activeAppTab) return;
-    activeAppTab = tab;
-    expandedArchive = null;
-    archiveFilesCache = {};
-    viewingArchiveFile = null;
-    renderContent();
-  }
-
-  // Archives view
-  async function loadArchives(appName) {
-    const container = document.getElementById('archivesContainer');
-    if (!container) return;
-
-    try {
-      archivesData = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/archives`);
-      renderArchivesView(container, appName);
-    } catch {
-      container.innerHTML = '<div class="archive-empty"><div>Error loading archives</div></div>';
-    }
-  }
-
-  function renderArchivesView(container, appName) {
-    if (archivesData.length === 0) {
-      container.innerHTML = `<div class="archive-empty">
-        <div class="archive-empty-icon">&#128451;</div>
-        <div>No archives yet</div>
-        <div style="margin-top:8px;font-size:12px">Use the Archive button to snapshot current work</div>
-      </div>`;
-      return;
-    }
-
-    let html = '<div class="archive-timeline">';
-    for (const archive of archivesData) {
-      const isExpanded = expandedArchive === archive.timestamp;
-      const dateStr = formatArchiveTimestamp(archive.timestamp);
-      html += `<div class="archive-card${isExpanded ? ' expanded' : ''}" data-archive="${esc(archive.timestamp)}">
-        <div class="archive-card-header" data-archive-toggle="${esc(archive.timestamp)}">
-          <span class="archive-card-date">${esc(dateStr)}</span>
-          <div class="archive-card-stats">
-            <span class="archive-card-stat">Stories: <span class="stat-val">${archive.summary.storyCount}</span></span>
-            <span class="archive-card-stat">Tasks: <span class="stat-val">${archive.summary.taskCount}</span></span>
-            <span class="archive-card-stat">Files: <span class="stat-val">${archive.fileCount}</span></span>
-            <span class="archive-card-chevron">&#9654;</span>
-          </div>
-        </div>`;
-
-      if (isExpanded) {
-        const files = archiveFilesCache[archive.timestamp];
-        if (files) {
-          html += '<div class="archive-files">';
-          for (const file of files) {
-            const isActive = viewingArchiveFile === file.path;
-            html += `<div class="archive-file-item${isActive ? ' active' : ''}" data-archive-file="${esc(file.path)}" data-archive-ts="${esc(archive.timestamp)}">
-              <span class="archive-file-icon">&#128196;</span>
-              <span>${esc(file.path)}</span>
-            </div>`;
-          }
-          html += '</div>';
-
-          if (viewingArchiveFile) {
-            html += `<div class="archive-file-viewer">
-              <div class="archive-file-viewer-header">
-                <span>${esc(viewingArchiveFile)}</span>
-                <button class="archive-file-viewer-close" data-close-viewer="true">&times;</button>
-              </div>
-              <div class="archive-file-content" id="archiveFileContent">Loading...</div>
-            </div>`;
-          }
-        } else {
-          html += '<div class="archive-files" style="padding:16px;color:var(--text-dim);font-size:12px">Loading files...</div>';
-        }
-      }
-
-      html += '</div>';
-    }
-    html += '</div>';
-
-    container.innerHTML = html;
-
-    // Bind archive card toggle clicks
-    container.querySelectorAll('.archive-card-header').forEach(header => {
-      header.addEventListener('click', () => toggleArchiveCard(appName, header.dataset.archiveToggle));
-    });
-
-    // Bind archive file clicks
-    container.querySelectorAll('.archive-file-item').forEach(item => {
-      item.addEventListener('click', () => {
-        viewArchiveFile(appName, item.dataset.archiveTs, item.dataset.archiveFile);
-      });
-    });
-
-    // Bind file viewer close button
-    const closeBtn = container.querySelector('[data-close-viewer]');
-    if (closeBtn) {
-      closeBtn.addEventListener('click', () => {
-        viewingArchiveFile = null;
-        renderArchivesView(container, appName);
-      });
-    }
-
-    // Load file content if viewer is open
-    if (viewingArchiveFile && expandedArchive) {
-      loadArchiveFileContent(appName, expandedArchive, viewingArchiveFile);
-    }
-  }
-
-  async function toggleArchiveCard(appName, timestamp) {
-    const container = document.getElementById('archivesContainer');
-    if (!container) return;
-
-    if (expandedArchive === timestamp) {
-      expandedArchive = null;
-      viewingArchiveFile = null;
-      renderArchivesView(container, appName);
-      return;
-    }
-
-    expandedArchive = timestamp;
-    viewingArchiveFile = null;
-
-    // Load files if not cached
-    if (!archiveFilesCache[timestamp]) {
-      renderArchivesView(container, appName);
-      try {
-        const files = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/archives/${encodeURIComponent(timestamp)}/files`);
-        archiveFilesCache[timestamp] = files;
-      } catch {
-        archiveFilesCache[timestamp] = [];
-      }
-    }
-
-    renderArchivesView(container, appName);
-  }
-
-  async function viewArchiveFile(appName, timestamp, filePath) {
-    const container = document.getElementById('archivesContainer');
-    if (!container) return;
-
-    viewingArchiveFile = filePath;
-    renderArchivesView(container, appName);
-  }
-
-  async function loadArchiveFileContent(appName, timestamp, filePath) {
-    const contentEl = document.getElementById('archiveFileContent');
-    if (!contentEl) return;
-
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/archives/${encodeURIComponent(timestamp)}/files/${filePath}`);
-      contentEl.textContent = data.content || '(empty file)';
-    } catch {
-      contentEl.textContent = '(Error loading file)';
-    }
-  }
-
-  function formatArchiveTimestamp(ts) {
-    // Format: 2026-03-14_15-30 → Mar 14, 2026 at 15:30
-    const match = ts.match(/^(\d{4})-(\d{2})-(\d{2})_(\d{2})-(\d{2})/);
-    if (!match) return ts;
-    const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    const [, year, month, day, hour, min] = match;
-    return `${months[parseInt(month, 10) - 1]} ${parseInt(day, 10)}, ${year} at ${hour}:${min}`;
-  }
-
-  // Delete App Modal — exposed globally for inline onclick handlers
-  window.openDeleteAppModal = openDeleteAppModal;
-  function openDeleteAppModal(appName) {
-    const existing = document.querySelector('.modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay';
-    overlay.innerHTML = `
-      <div class="modal">
-        <div class="modal-header">
-          <h3>Delete App</h3>
-          <button class="modal-close" data-action="close">&times;</button>
-        </div>
-        <div class="modal-body" id="deleteModalBody">
-          <p style="margin-bottom:12px">Are you sure you want to delete <strong>${esc(appName)}</strong>?</p>
-          <p style="color:var(--red);font-size:13px">This will permanently remove the app directory and all associated data. This action cannot be undone.</p>
-          <div id="deleteModalMessage"></div>
-        </div>
-        <div class="modal-footer">
-          <button class="btn" data-action="close">Cancel</button>
-          <button class="btn btn-danger" id="deleteModalBtn">Delete</button>
-        </div>
-      </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay || e.target.dataset.action === 'close') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    });
-
-    const escHandler = (e) => {
-      if (e.key === 'Escape') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    };
-    document.addEventListener('keydown', escHandler);
-
-    overlay.querySelector('#deleteModalBtn').addEventListener('click', () => submitDeleteApp(overlay, appName));
-  }
-
-  async function submitDeleteApp(overlay, appName) {
-    const msgEl = overlay.querySelector('#deleteModalMessage');
-    const deleteBtn = overlay.querySelector('#deleteModalBtn');
-
-    deleteBtn.disabled = true;
-    deleteBtn.textContent = 'Deleting...';
-    msgEl.innerHTML = '';
-
-    try {
-      const res = await fetch('/api/apps/' + encodeURIComponent(appName), { method: 'DELETE' });
-      const data = await res.json();
-
-      if (!res.ok) {
-        msgEl.innerHTML = `<div class="form-error">${esc(data.error || 'Failed to delete app')}</div>`;
-        deleteBtn.disabled = false;
-        deleteBtn.textContent = 'Delete';
-        return;
-      }
-
-      overlay.remove();
-
-      // Clean up client state
-      notificationsList = notificationsList.filter(n => n.app !== appName);
-      if (selectedApp && selectedApp.appName === appName) {
-        selectedApp = null;
-        selectedLoop = null;
-        document.title = 'RalphFlow Dashboard';
-      }
-      fetchApps();
-    } catch (err) {
-      msgEl.innerHTML = '<div class="form-error">Network error — could not reach server</div>';
-      deleteBtn.disabled = false;
-      deleteBtn.textContent = 'Delete';
-    }
-  }
-
-  // Archive App Modal — exposed globally for inline onclick handlers
-  window.openArchiveAppModal = openArchiveAppModal;
-  function openArchiveAppModal(appName) {
-    const existing = document.querySelector('.modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay';
-    overlay.innerHTML = `
-      <div class="modal">
-        <div class="modal-header">
-          <h3>Archive App</h3>
-          <button class="modal-close" data-action="close">&times;</button>
-        </div>
-        <div class="modal-body" id="archiveModalBody">
-          <p style="margin-bottom:12px">Archive <strong>${esc(appName)}</strong>?</p>
-          <p style="color:var(--text-dim);font-size:13px;margin-bottom:8px">This will snapshot all current work and reset to a clean slate:</p>
-          <ul style="color:var(--text-dim);font-size:13px;margin-left:18px;margin-bottom:12px;line-height:1.6">
-            <li>Stories, tasks, and trackers saved to <code style="font-family:var(--mono);font-size:12px;color:var(--text)">.archives/</code></li>
-            <li>Tracker and data files reset to template defaults</li>
-            <li>Prompts and config preserved</li>
-          </ul>
-          <div id="archiveModalMessage"></div>
-        </div>
-        <div class="modal-footer" id="archiveModalFooter">
-          <button class="btn" data-action="close">Cancel</button>
-          <button class="btn btn-primary" id="archiveModalBtn">Archive</button>
-        </div>
-      </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay || e.target.dataset.action === 'close') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    });
-
-    const escHandler = (e) => {
-      if (e.key === 'Escape') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    };
-    document.addEventListener('keydown', escHandler);
-
-    overlay.querySelector('#archiveModalBtn').addEventListener('click', () => submitArchiveApp(overlay, appName));
-  }
-
-  async function submitArchiveApp(overlay, appName) {
-    const msgEl = overlay.querySelector('#archiveModalMessage');
-    const archiveBtn = overlay.querySelector('#archiveModalBtn');
-
-    archiveBtn.disabled = true;
-    archiveBtn.textContent = 'Archiving...';
-    msgEl.innerHTML = '';
-
-    try {
-      const res = await fetch('/api/apps/' + encodeURIComponent(appName) + '/archive', { method: 'POST' });
-      const data = await res.json();
-
-      if (!res.ok) {
-        msgEl.innerHTML = `<div class="form-error">${esc(data.error || 'Failed to archive app')}</div>`;
-        archiveBtn.disabled = false;
-        archiveBtn.textContent = 'Archive';
-        return;
-      }
-
-      // Show success state
-      const body = overlay.querySelector('#archiveModalBody');
-      const footer = overlay.querySelector('#archiveModalFooter');
-
-      body.innerHTML = `
-        <p style="color:var(--green);margin-bottom:12px">Archived successfully.</p>
-        <p style="font-size:13px;color:var(--text-dim)">Snapshot saved to <code style="font-family:var(--mono);font-size:12px;color:var(--text)">${esc(data.archivePath)}</code></p>
-        <p style="font-size:13px;color:var(--text-dim);margin-top:8px">Timestamp: <strong style="color:var(--text)">${esc(data.timestamp)}</strong></p>
-      `;
-      footer.innerHTML = `<button class="btn btn-primary" data-action="close">Done</button>`;
-
-      // Clean up client state and refresh
-      notificationsList = notificationsList.filter(n => n.app !== appName);
-      fetchApps();
-    } catch (err) {
-      msgEl.innerHTML = '<div class="form-error">Network error — could not reach server</div>';
-      archiveBtn.disabled = false;
-      archiveBtn.textContent = 'Archive';
-    }
-  }
-
-  // Create App Modal
-  async function openCreateAppModal() {
-    // Remove any existing modal
-    const existing = document.querySelector('.modal-overlay');
-    if (existing) existing.remove();
-
-    // Fetch available templates (built-in + custom)
-    let templates = [];
-    try {
-      templates = await fetchJson('/api/templates');
-    } catch {
-      templates = [
-        { name: 'code-implementation', type: 'built-in' },
-        { name: 'research', type: 'built-in' }
-      ];
-    }
-
-    let optionsHtml = '';
-    for (const tpl of templates) {
-      optionsHtml += `<option value="${esc(tpl.name)}">${esc(tpl.name)}${tpl.type === 'custom' ? ' (custom)' : ''}</option>`;
-    }
-
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay';
-    overlay.innerHTML = `
-      <div class="modal">
-        <div class="modal-header">
-          <h3>Create New App</h3>
-          <button class="modal-close" data-action="close">&times;</button>
-        </div>
-        <div class="modal-body" id="modalBody">
-          <div class="form-group">
-            <label class="form-label">Template</label>
-            <select class="form-select" id="modalTemplate">
-              ${optionsHtml}
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-label">App Name</label>
-            <input class="form-input" id="modalName" type="text" placeholder="my-feature" autocomplete="off">
-          </div>
-          <div id="modalMessage"></div>
-        </div>
-        <div class="modal-footer" id="modalFooter">
-          <button class="btn" data-action="close">Cancel</button>
-          <button class="btn btn-primary" id="modalCreateBtn">Create</button>
-        </div>
-      </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    // Close on overlay click or close buttons
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay || e.target.dataset.action === 'close') {
-        overlay.remove();
-      }
-    });
-
-    // Close on Escape
-    const escHandler = (e) => {
-      if (e.key === 'Escape') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    };
-    document.addEventListener('keydown', escHandler);
-
-    // Focus name input
-    const nameInput = overlay.querySelector('#modalName');
-    setTimeout(() => nameInput.focus(), 50);
-
-    // Submit on Enter in name input
-    nameInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        submitCreateApp(overlay);
-      }
-    });
-
-    // Create button
-    const createBtn = overlay.querySelector('#modalCreateBtn');
-    createBtn.addEventListener('click', () => submitCreateApp(overlay));
-  }
-
-  async function submitCreateApp(overlay) {
-    const templateEl = overlay.querySelector('#modalTemplate');
-    const nameEl = overlay.querySelector('#modalName');
-    const msgEl = overlay.querySelector('#modalMessage');
-    const createBtn = overlay.querySelector('#modalCreateBtn');
-
-    const template = templateEl.value;
-    const name = nameEl.value.trim();
-
-    // Client-side validation
-    if (!name) {
-      msgEl.innerHTML = '<div class="form-error">Name is required</div>';
-      nameEl.focus();
-      return;
-    }
-
-    // Disable button during request
-    createBtn.disabled = true;
-    createBtn.textContent = 'Creating...';
-    msgEl.innerHTML = '';
-
-    try {
-      const res = await fetch('/api/apps', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ template, name }),
-      });
-      const data = await res.json();
-
-      if (!res.ok) {
-        msgEl.innerHTML = `<div class="form-error">${esc(data.error || 'Failed to create app')}</div>`;
-        createBtn.disabled = false;
-        createBtn.textContent = 'Create';
-        return;
-      }
-
-      // Success — show next-steps view
-      showNextSteps(overlay, data);
-    } catch (err) {
-      msgEl.innerHTML = '<div class="form-error">Network error — could not reach server</div>';
-      createBtn.disabled = false;
-      createBtn.textContent = 'Create';
-    }
-  }
-
-  function showNextSteps(overlay, data) {
-    const body = overlay.querySelector('#modalBody');
-    const footer = overlay.querySelector('#modalFooter');
-
-    let warningHtml = '';
-    if (data.warning) {
-      warningHtml = `<div class="form-warning">${esc(data.warning)}</div>`;
-    }
-
-    let cmdsHtml = '';
-    for (const cmd of data.commands) {
-      cmdsHtml += `
-        <div class="cmd-item">
-          <span class="cmd-text">${esc(cmd)}</span>
-          <button class="cmd-copy" data-cmd="${esc(cmd)}">Copy</button>
-        </div>`;
-    }
-
-    body.innerHTML = `
-      <div class="next-steps-success">&#10003; Created ${esc(data.appName)}</div>
-      ${warningHtml}
-      <div class="next-steps-label">Next steps — run one of these in your terminal:</div>
-      ${cmdsHtml}
-    `;
-
-    footer.innerHTML = `<button class="btn btn-primary" data-action="close">Done</button>`;
-    footer.querySelector('[data-action="close"]').addEventListener('click', () => overlay.remove());
-
-    // Copy-to-clipboard buttons
-    body.querySelectorAll('.cmd-copy').forEach((btn) => {
-      btn.addEventListener('click', () => {
-        const cmd = btn.dataset.cmd || '';
-        navigator.clipboard.writeText(cmd).then(() => {
-          const orig = btn.textContent;
-          btn.textContent = 'Copied!';
-          setTimeout(() => { btn.textContent = orig; }, 1500);
-        });
-      });
-    });
-  }
-
-  // -----------------------------------------------------------------------
-  // Templates page
-  // -----------------------------------------------------------------------
-
-  async function fetchTemplates() {
-    try {
-      templatesList = await fetchJson('/api/templates');
-    } catch {
-      templatesList = [];
-    }
-  }
-
-  function createEmptyLoop() {
-    return {
-      name: '',
-      stages: ['init'],
-      completion: 'LOOP COMPLETE',
-      model: 'claude-sonnet-4-6',
-      multi_agent: false,
-      max_agents: 3,
-      strategy: 'parallel',
-      agent_placeholder: '{{AGENT_NAME}}',
-      data_files: [],
-      entities: [],
-      showOptional: false
-    };
-  }
-
-  function initTemplateBuilderState() {
-    return { name: '', description: '', loops: [createEmptyLoop()] };
-  }
-
-  async function renderTemplatesPage() {
-    if (showTemplateBuilder) {
-      renderTemplateBuilder();
-      return;
-    }
-
-    await fetchTemplates();
-
-    let html = '<div class="templates-header">';
-    html += '<h2>Templates</h2>';
-    html += '<button class="btn btn-primary" id="createTemplateBtn">Create Template</button>';
-    html += '</div>';
-
-    if (templatesList.length === 0) {
-      html += '<div class="content-empty">No templates found</div>';
-    } else {
-      html += '<div class="template-grid">';
-      for (const tpl of templatesList) {
-        html += `<div class="template-card">
-          <div class="template-card-header">
-            <span class="template-card-name">${esc(tpl.name)}</span>
-            <span class="template-card-type ${tpl.type}">${esc(tpl.type)}</span>
-          </div>
-          ${tpl.description ? `<div class="template-card-desc">${esc(tpl.description)}</div>` : ''}
-          <div class="template-card-meta">
-            <span>${tpl.loopCount} loop${tpl.loopCount !== 1 ? 's' : ''}</span>
-            ${tpl.type === 'custom' ? `<button class="btn btn-danger" style="font-size:11px;padding:2px 8px" data-delete-template="${esc(tpl.name)}">Delete</button>` : ''}
-          </div>
-        </div>`;
-      }
-      html += '</div>';
-    }
-
-    content.innerHTML = html;
-
-    const createBtn = document.getElementById('createTemplateBtn');
-    if (createBtn) {
-      createBtn.addEventListener('click', () => {
-        showTemplateBuilder = true;
-        templateBuilderState = initTemplateBuilderState();
-        renderTemplatesPage();
-      });
-    }
-
-    content.querySelectorAll('[data-delete-template]').forEach(btn => {
-      btn.addEventListener('click', () => openDeleteTemplateModal(btn.dataset.deleteTemplate));
-    });
-  }
-
-  function renderTemplateBuilder() {
-    const state = templateBuilderState;
-    let html = '';
-
-    html += '<div class="templates-header">';
-    html += '<div style="display:flex;align-items:center;gap:12px"><button class="btn btn-muted" id="builderBackBtn" style="padding:4px 10px">&larr; Back</button><h2>Create Template</h2></div>';
-    html += '</div>';
-
-    html += '<div class="template-builder">';
-
-    // Basic info
-    html += '<div class="builder-section">';
-    html += '<div class="builder-section-title">Basic Info</div>';
-    html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">';
-    html += `<div class="form-group"><label class="form-label">Template Name</label>
-      <input class="form-input" id="tplName" type="text" value="${esc(state.name)}" placeholder="my-pipeline" autocomplete="off"></div>`;
-    html += `<div class="form-group"><label class="form-label">Description</label>
-      <input class="form-input" id="tplDesc" type="text" value="${esc(state.description)}" placeholder="Pipeline description" autocomplete="off"></div>`;
-    html += '</div></div>';
-
-    // Loops
-    html += '<div class="builder-section">';
-    html += '<div class="builder-section-title">Loops</div>';
-    html += '<div class="loop-cards">';
-
-    state.loops.forEach((loop, i) => {
-      html += `<div class="loop-card" data-loop-index="${i}">`;
-      html += `<div class="loop-card-header">
-        <span class="loop-card-title">Loop ${i + 1}</span>
-        ${state.loops.length > 1 ? `<button class="loop-card-remove" data-remove-loop="${i}">&times;</button>` : ''}
-      </div>`;
-
-      html += '<div class="loop-card-grid">';
-
-      // Name
-      html += `<div class="form-group"><label class="form-label">Name</label>
-        <input class="form-input loop-input" data-loop-idx="${i}" data-field="name" type="text" value="${esc(loop.name)}" placeholder="Story" autocomplete="off"></div>`;
-
-      // Model
-      html += `<div class="form-group"><label class="form-label">Model</label>
-        <select class="form-select loop-input" data-loop-idx="${i}" data-field="model">
-          <option value="claude-sonnet-4-6"${loop.model === 'claude-sonnet-4-6' ? ' selected' : ''}>claude-sonnet-4-6</option>
-          <option value="claude-opus-4-6"${loop.model === 'claude-opus-4-6' ? ' selected' : ''}>claude-opus-4-6</option>
-          <option value="claude-haiku-4-5-20251001"${loop.model === 'claude-haiku-4-5-20251001' ? ' selected' : ''}>claude-haiku-4-5-20251001</option>
-        </select></div>`;
-
-      // Stages (tag input)
-      html += `<div class="form-group loop-card-full"><label class="form-label">Stages</label>
-        <div class="stage-tags" data-loop-idx="${i}">`;
-      loop.stages.forEach((stage, si) => {
-        html += `<span class="stage-tag">${esc(stage)}<button class="stage-tag-remove" data-loop-idx="${i}" data-stage-idx="${si}">&times;</button></span>`;
-      });
-      html += `<input type="text" placeholder="Type stage, press Enter" data-stage-input="${i}" autocomplete="off">`;
-      html += '</div></div>';
-
-      // Completion
-      html += `<div class="form-group loop-card-full"><label class="form-label">Completion String</label>
-        <input class="form-input loop-input" data-loop-idx="${i}" data-field="completion" type="text" value="${esc(loop.completion)}" placeholder="LOOP COMPLETE" autocomplete="off"></div>`;
-
-      html += '</div>'; // close loop-card-grid
-
-      // Multi-agent toggle
-      html += `<div style="margin-top:12px">
-        <label class="toggle-wrap">
-          <input type="checkbox" class="toggle-input" data-loop-idx="${i}" data-field="multi_agent" ${loop.multi_agent ? 'checked' : ''}>
-          <span class="toggle-label">Multi-agent</span>
-        </label>`;
-
-      if (loop.multi_agent) {
-        html += `<div class="multi-agent-fields">
-          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
-            <div class="form-group" style="margin-bottom:0"><label class="form-label">Max Agents</label>
-              <input class="form-input loop-input" data-loop-idx="${i}" data-field="max_agents" type="number" value="${loop.max_agents}" min="2" max="10"></div>
-            <div class="form-group" style="margin-bottom:0"><label class="form-label">Strategy</label>
-              <select class="form-select loop-input" data-loop-idx="${i}" data-field="strategy">
-                <option value="parallel"${loop.strategy === 'parallel' ? ' selected' : ''}>parallel</option>
-                <option value="sequential"${loop.strategy === 'sequential' ? ' selected' : ''}>sequential</option>
-              </select></div>
-            <div class="form-group" style="margin-bottom:0"><label class="form-label">Agent Placeholder</label>
-              <input class="form-input loop-input" data-loop-idx="${i}" data-field="agent_placeholder" type="text" value="${esc(loop.agent_placeholder)}"></div>
-          </div>
-        </div>`;
-      }
-      html += '</div>';
-
-      // Optional fields toggle
-      html += `<button class="optional-toggle" data-toggle-optional="${i}">${loop.showOptional ? 'Hide optional fields' : 'Show optional fields'}</button>`;
-
-      if (loop.showOptional) {
-        html += '<div class="optional-fields">';
-        html += '<div class="loop-card-grid">';
-        html += `<div class="form-group"><label class="form-label">Data Files <span style="color:var(--text-muted)">(comma-separated)</span></label>
-          <input class="form-input loop-input" data-loop-idx="${i}" data-field="data_files" type="text" value="${esc((loop.data_files || []).join(', '))}" placeholder="stories.md, tasks.md" autocomplete="off"></div>`;
-        html += `<div class="form-group"><label class="form-label">Entities <span style="color:var(--text-muted)">(comma-separated)</span></label>
-          <input class="form-input loop-input" data-loop-idx="${i}" data-field="entities" type="text" value="${esc((loop.entities || []).join(', '))}" placeholder="STORY, TASK" autocomplete="off"></div>`;
-        html += '</div></div>';
-      }
-
-      html += '</div>'; // close loop-card
-    });
-
-    html += '</div>'; // close loop-cards
-    html += `<button class="btn btn-muted" id="addLoopBtn" style="margin-top:12px;width:100%">+ Add Loop</button>`;
-    html += '</div>'; // close builder-section
-
-    // YAML Preview
-    html += '<div class="builder-section yaml-preview-section">';
-    html += '<div class="builder-section-title">YAML Preview</div>';
-    html += `<pre class="yaml-preview" id="yamlPreview">${esc(generateYamlPreview(state))}</pre>`;
-    html += '</div>';
-
-    // Actions
-    html += '<div class="builder-actions">';
-    html += '<button class="btn" id="builderCancelBtn">Cancel</button>';
-    html += '<button class="btn btn-primary" id="builderSaveBtn">Save Template</button>';
-    html += '</div>';
-
-    html += '</div>'; // close template-builder
-
-    content.innerHTML = html;
-    bindTemplateBuilderEvents();
-  }
-
-  function bindTemplateBuilderEvents() {
-    const backBtn = document.getElementById('builderBackBtn');
-    if (backBtn) backBtn.addEventListener('click', () => {
-      showTemplateBuilder = false;
-      templateBuilderState = null;
-      renderTemplatesPage();
-    });
-
-    const cancelBtn = document.getElementById('builderCancelBtn');
-    if (cancelBtn) cancelBtn.addEventListener('click', () => {
-      showTemplateBuilder = false;
-      templateBuilderState = null;
-      renderTemplatesPage();
-    });
-
-    const saveBtn = document.getElementById('builderSaveBtn');
-    if (saveBtn) saveBtn.addEventListener('click', saveTemplate);
-
-    const addLoopBtn = document.getElementById('addLoopBtn');
-    if (addLoopBtn) addLoopBtn.addEventListener('click', () => {
-      captureBuilderInputs();
-      templateBuilderState.loops.push(createEmptyLoop());
-      renderTemplateBuilder();
-    });
-
-    // Template name/desc inputs
-    const tplName = document.getElementById('tplName');
-    const tplDesc = document.getElementById('tplDesc');
-    if (tplName) tplName.addEventListener('input', () => {
-      templateBuilderState.name = tplName.value;
-      updateYamlPreview();
-    });
-    if (tplDesc) tplDesc.addEventListener('input', () => {
-      templateBuilderState.description = tplDesc.value;
-      updateYamlPreview();
-    });
-
-    // Loop text inputs
-    content.querySelectorAll('.loop-input').forEach(input => {
-      const idx = parseInt(input.dataset.loopIdx);
-      const field = input.dataset.field;
-      const evtType = input.tagName === 'SELECT' ? 'change' : 'input';
-
-      if (field === 'multi_agent') {
-        input.addEventListener('change', () => {
-          captureBuilderInputs();
-          templateBuilderState.loops[idx].multi_agent = input.checked;
-          renderTemplateBuilder();
-        });
-        return;
-      }
-
-      input.addEventListener(evtType, () => {
-        const loop = templateBuilderState.loops[idx];
-        if (!loop) return;
-        if (field === 'max_agents') {
-          loop.max_agents = parseInt(input.value) || 3;
-        } else if (field === 'data_files') {
-          loop.data_files = input.value.split(',').map(s => s.trim()).filter(Boolean);
-        } else if (field === 'entities') {
-          loop.entities = input.value.split(',').map(s => s.trim()).filter(Boolean);
-        } else {
-          loop[field] = input.value;
-        }
-        updateYamlPreview();
-      });
-    });
-
-    // Stage tag inputs
-    content.querySelectorAll('[data-stage-input]').forEach(input => {
-      const idx = parseInt(input.dataset.stageInput);
-      input.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === ',') {
-          e.preventDefault();
-          const value = input.value.trim().replace(/,/g, '');
-          if (value && !templateBuilderState.loops[idx].stages.includes(value)) {
-            captureBuilderInputs();
-            templateBuilderState.loops[idx].stages.push(value);
-            renderTemplateBuilder();
-            setTimeout(() => {
-              const newInput = content.querySelector(`[data-stage-input="${idx}"]`);
-              if (newInput) newInput.focus();
-            }, 0);
-          }
-        }
-      });
-    });
-
-    // Stage tag remove buttons
-    content.querySelectorAll('.stage-tag-remove').forEach(btn => {
-      btn.addEventListener('click', () => {
-        captureBuilderInputs();
-        const loopIdx = parseInt(btn.dataset.loopIdx);
-        const stageIdx = parseInt(btn.dataset.stageIdx);
-        templateBuilderState.loops[loopIdx].stages.splice(stageIdx, 1);
-        renderTemplateBuilder();
-      });
-    });
-
-    // Remove loop buttons
-    content.querySelectorAll('[data-remove-loop]').forEach(btn => {
-      btn.addEventListener('click', () => {
-        captureBuilderInputs();
-        const idx = parseInt(btn.dataset.removeLoop);
-        templateBuilderState.loops.splice(idx, 1);
-        renderTemplateBuilder();
-      });
-    });
-
-    // Optional fields toggle
-    content.querySelectorAll('[data-toggle-optional]').forEach(btn => {
-      btn.addEventListener('click', () => {
-        captureBuilderInputs();
-        const idx = parseInt(btn.dataset.toggleOptional);
-        templateBuilderState.loops[idx].showOptional = !templateBuilderState.loops[idx].showOptional;
-        renderTemplateBuilder();
-      });
-    });
-  }
-
-  // Capture current input values into state before re-render
-  function captureBuilderInputs() {
-    const state = templateBuilderState;
-    if (!state) return;
-    const tplName = document.getElementById('tplName');
-    const tplDesc = document.getElementById('tplDesc');
-    if (tplName) state.name = tplName.value;
-    if (tplDesc) state.description = tplDesc.value;
-
-    content.querySelectorAll('.loop-input').forEach(input => {
-      const idx = parseInt(input.dataset.loopIdx);
-      const field = input.dataset.field;
-      const loop = state.loops[idx];
-      if (!loop || field === 'multi_agent') return;
-      if (field === 'max_agents') {
-        loop.max_agents = parseInt(input.value) || 3;
-      } else if (field === 'data_files') {
-        loop.data_files = input.value.split(',').map(s => s.trim()).filter(Boolean);
-      } else if (field === 'entities') {
-        loop.entities = input.value.split(',').map(s => s.trim()).filter(Boolean);
-      } else {
-        loop[field] = input.value;
-      }
-    });
-  }
-
-  function updateYamlPreview() {
-    const preview = document.getElementById('yamlPreview');
-    if (preview && templateBuilderState) {
-      preview.textContent = generateYamlPreview(templateBuilderState);
-    }
-  }
-
-  function generateYamlPreview(state) {
-    let yaml = '';
-    yaml += `name: ${state.name || 'my-template'}\n`;
-    yaml += `description: "${state.description || ''}"\n`;
-    yaml += `version: 1\n`;
-    yaml += `dir: .ralph-flow\n`;
-    yaml += `entities: {}\n`;
-    yaml += `loops:\n`;
-
-    state.loops.forEach((loop, index) => {
-      const baseName = (loop.name || `loop-${index + 1}`).toLowerCase().replace(/\s+/g, '-');
-      const loopKey = baseName.endsWith('-loop') ? baseName : `${baseName}-loop`;
-      const dirPrefix = String(index).padStart(2, '0');
-      const loopDirName = `${dirPrefix}-${loopKey}`;
-
-      yaml += `  ${loopKey}:\n`;
-      yaml += `    order: ${index}\n`;
-      yaml += `    name: "${loop.name || `Loop ${index + 1}`}"\n`;
-      yaml += `    prompt: ${loopDirName}/prompt.md\n`;
-      yaml += `    tracker: ${loopDirName}/tracker.md\n`;
-      yaml += `    stages: [${loop.stages.join(', ')}]\n`;
-      yaml += `    completion: "${loop.completion || 'LOOP COMPLETE'}"\n`;
-
-      if (loop.multi_agent) {
-        yaml += `    multi_agent:\n`;
-        yaml += `      enabled: true\n`;
-        yaml += `      max_agents: ${loop.max_agents || 3}\n`;
-        yaml += `      strategy: ${loop.strategy || 'parallel'}\n`;
-        yaml += `      agent_placeholder: "${loop.agent_placeholder || '{{AGENT_NAME}}'}"\n`;
-        yaml += `    lock:\n`;
-        yaml += `      file: ${loopDirName}/.tracker-lock\n`;
-        yaml += `      type: echo\n`;
-        yaml += `      stale_seconds: 60\n`;
-        yaml += `    worktree:\n`;
-        yaml += `      strategy: shared\n`;
-        yaml += `      auto_merge: true\n`;
-      } else {
-        yaml += `    multi_agent: false\n`;
-      }
-
-      yaml += `    model: ${loop.model || 'claude-sonnet-4-6'}\n`;
-      yaml += `    cadence: 0\n`;
-
-      if (loop.data_files && loop.data_files.length > 0) {
-        yaml += `    data_files:\n`;
-        loop.data_files.forEach(f => { yaml += `      - ${loopDirName}/${f}\n`; });
-      }
-      if (loop.entities && loop.entities.length > 0) {
-        yaml += `    entities: [${loop.entities.join(', ')}]\n`;
-      }
-    });
-
-    return yaml;
-  }
-
-  async function saveTemplate() {
-    captureBuilderInputs();
-    const state = templateBuilderState;
-
-    if (!state.name || !state.name.trim()) {
-      alert('Template name is required');
-      return;
-    }
-
-    for (let i = 0; i < state.loops.length; i++) {
-      const loop = state.loops[i];
-      if (!loop.name || !loop.name.trim()) {
-        alert(`Loop ${i + 1}: name is required`);
-        return;
-      }
-      if (loop.stages.length === 0) {
-        alert(`Loop "${loop.name}": at least one stage is required`);
-        return;
-      }
-      if (!loop.completion || !loop.completion.trim()) {
-        alert(`Loop "${loop.name}": completion string is required`);
-        return;
-      }
-    }
-
-    const definition = {
-      name: state.name.trim(),
-      description: state.description.trim(),
-      loops: state.loops.map(loop => {
-        const loopDef = {
-          name: loop.name.trim(),
-          stages: loop.stages,
-          completion: loop.completion.trim(),
-          model: loop.model || undefined,
-        };
-        if (loop.multi_agent) {
-          loopDef.multi_agent = {
-            enabled: true,
-            max_agents: loop.max_agents || 3,
-            strategy: loop.strategy || 'parallel',
-            agent_placeholder: loop.agent_placeholder || '{{AGENT_NAME}}'
-          };
-        }
-        if (loop.data_files && loop.data_files.length > 0) {
-          loopDef.data_files = loop.data_files;
-        }
-        if (loop.entities && loop.entities.length > 0) {
-          loopDef.entities = loop.entities;
-        }
-        return loopDef;
-      })
-    };
-
-    const saveBtn = document.getElementById('builderSaveBtn');
-    if (saveBtn) {
-      saveBtn.disabled = true;
-      saveBtn.textContent = 'Saving...';
-    }
-
-    try {
-      const res = await fetch('/api/templates', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(definition)
-      });
-      const data = await res.json();
-
-      if (!res.ok) {
-        alert(data.error || 'Failed to save template');
-        if (saveBtn) {
-          saveBtn.disabled = false;
-          saveBtn.textContent = 'Save Template';
-        }
-        return;
-      }
-
-      showTemplateBuilder = false;
-      templateBuilderState = null;
-      templatesList = [];
-      renderTemplatesPage();
-    } catch {
-      alert('Network error — could not reach server');
-      if (saveBtn) {
-        saveBtn.disabled = false;
-        saveBtn.textContent = 'Save Template';
-      }
-    }
-  }
-
-  function openDeleteTemplateModal(templateName) {
-    const existing = document.querySelector('.modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay';
-    overlay.innerHTML = `
-      <div class="modal">
-        <div class="modal-header">
-          <h3>Delete Template</h3>
-          <button class="modal-close" data-action="close">&times;</button>
-        </div>
-        <div class="modal-body">
-          <p style="margin-bottom:12px">Delete template <strong>${esc(templateName)}</strong>?</p>
-          <p style="color:var(--red);font-size:13px">This will permanently remove the template. Apps already created from it are not affected.</p>
-          <div id="deleteTemplateMessage"></div>
-        </div>
-        <div class="modal-footer">
-          <button class="btn" data-action="close">Cancel</button>
-          <button class="btn btn-danger" id="deleteTemplateBtn">Delete</button>
-        </div>
-      </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay || e.target.dataset.action === 'close') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    });
-
-    const escHandler = (e) => {
-      if (e.key === 'Escape') {
-        overlay.remove();
-        document.removeEventListener('keydown', escHandler);
-      }
-    };
-    document.addEventListener('keydown', escHandler);
-
-    overlay.querySelector('#deleteTemplateBtn').addEventListener('click', async () => {
-      const btn = overlay.querySelector('#deleteTemplateBtn');
-      const msgEl = overlay.querySelector('#deleteTemplateMessage');
-      btn.disabled = true;
-      btn.textContent = 'Deleting...';
-
-      try {
-        const res = await fetch('/api/templates/' + encodeURIComponent(templateName), { method: 'DELETE' });
-        const data = await res.json();
-
-        if (!res.ok) {
-          msgEl.innerHTML = `<div class="form-error">${esc(data.error || 'Failed to delete')}</div>`;
-          btn.disabled = false;
-          btn.textContent = 'Delete';
-          return;
-        }
-
-        overlay.remove();
-        templatesList = [];
-        renderTemplatesPage();
-      } catch {
-        msgEl.innerHTML = '<div class="form-error">Network error</div>';
-        btn.disabled = false;
-        btn.textContent = 'Delete';
-      }
-    });
-  }
-
-  // -----------------------------------------------------------------------
-  // Init
-  // -----------------------------------------------------------------------
-
-  // Templates nav click handler
-  document.getElementById('templatesNav').addEventListener('click', () => {
-    currentPage = 'templates';
-    selectedApp = null;
-    selectedLoop = null;
-    showTemplateBuilder = false;
-    templateBuilderState = null;
-    document.title = 'Templates - RalphFlow Dashboard';
-    renderSidebar();
-    renderContent();
-  });
-
-  fetchApps();
-  fetchNotifications();
-  connectWs();
-})();
-</script>
+<script type="module" src="app.js"></script>
 </body>
 </html>