ralphflow 0.4.0 → 0.5.0

package/src/dashboard/ui/index.html

@@ -312,6 +312,18 @@
     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;
@@ -322,6 +334,264 @@
     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);
@@ -336,6 +606,13 @@
     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;
@@ -380,457 +657,2590 @@
   .status-dot.connected { background: var(--green); }
   .status-dot.disconnected { background: var(--red); }
   .status-dot.connecting { background: var(--yellow); }
-</style>
-</head>
-<body>
 
-<div class="header">
-  <h1>RalphFlow Dashboard</h1>
-  <span class="host" id="hostDisplay"></span>
-</div>
-
-<div class="main">
-  <div class="sidebar" id="sidebar">
-    <div class="sidebar-section">
-      <div class="sidebar-label">Apps</div>
-      <div id="sidebarApps"></div>
-    </div>
-  </div>
-  <div class="content" id="content">
-    <div class="content-empty">Select an app to view details</div>
-  </div>
-</div>
+  /* 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);
+  }
 
-<div class="statusbar">
-  <span><span class="status-dot disconnected" id="statusDot"></span> <span id="statusText">Connecting...</span></span>
-  <span>Last update: <span id="lastUpdate">--</span></span>
-  <span>Events: <span id="eventCount">0</span></span>
-</div>
+  /* 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;
+  }
 
-<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;
+  /* 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;
+  }
 
-  // DOM refs
-  const $ = (sel) => document.querySelector(sel);
-  const hostDisplay = $('#hostDisplay');
-  const sidebarApps = $('#sidebarApps');
-  const content = $('#content');
+  /* 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>
+</head>
+<body>
+
+<div class="header">
+  <h1>RalphFlow Dashboard</h1>
+  <span class="host" id="hostDisplay"></span>
+</div>
+
+<div class="main">
+  <div class="sidebar" id="sidebar">
+    <div class="sidebar-section">
+      <div class="sidebar-label">Apps</div>
+      <div id="sidebarApps"></div>
+    </div>
+    <div class="sidebar-section" style="border-top: 1px solid var(--border)">
+      <div class="sidebar-label">Manage</div>
+      <div class="sidebar-item" id="templatesNav">Templates</div>
+    </div>
+  </div>
+  <div class="content" id="content">
+    <div class="content-empty">Select an app to view details</div>
+  </div>
+</div>
+
+<div class="statusbar">
+  <span><span class="status-dot disconnected" id="statusDot"></span> <span id="statusText">Connecting...</span></span>
+  <span>Last update: <span id="lastUpdate">--</span></span>
+  <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;
+  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;
+  }
 
-  // WebSocket
-  function connectWs() {
-    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    ws = new WebSocket(`${proto}//${location.host}/ws`);
+  // Notifications
+  async function fetchNotifications() {
+    try {
+      const data = await fetchJson('/api/notifications');
+      notificationsList = Array.isArray(data) ? data : [];
+      renderSidebar();
+      renderContent();
+    } catch { /* ignore */ }
+  }
 
-    ws.onopen = () => {
-      statusDot.className = 'status-dot connected';
-      statusText.textContent = 'Connected';
-      reconnectDelay = 1000;
-    };
+  async function dismissNotification(id) {
+    try {
+      await fetch(`/api/notification/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      notificationsList = notificationsList.filter(n => n.id !== id);
+      renderSidebar();
+      renderContent();
+    } catch { /* ignore */ }
+  }
 
-    ws.onclose = () => {
-      statusDot.className = 'status-dot disconnected';
-      statusText.textContent = 'Disconnected';
-      setTimeout(connectWs, reconnectDelay);
-      reconnectDelay = Math.min(reconnectDelay * 2, 30000);
-    };
+  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';
+  }
 
-    ws.onerror = () => {
-      ws.close();
-    };
+  function maybeRequestNotifPermission() {
+    if (notifPermissionRequested) return;
+    if (!('Notification' in window)) return;
+    if (Notification.permission === 'default') {
+      notifPermissionRequested = true;
+      Notification.requestPermission();
+    }
+  }
 
-    ws.onmessage = (e) => {
-      const event = JSON.parse(e.data);
-      eventCounter++;
-      eventCountEl.textContent = eventCounter;
-      lastUpdate.textContent = new Date().toLocaleTimeString();
-      handleWsEvent(event);
-    };
+  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 });
   }
 
-  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);
+  // 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>';
         }
       }
-    } else if (event.type === 'file:changed') {
-      if (selectedApp && selectedApp.appName === event.app) {
-        // Refresh status
-        fetchAppStatus(event.app);
+
+      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);
   }
 
-  // API helpers
-  async function fetchJson(url) {
-    const res = await fetch(url);
-    return res.json();
+  async function viewArchiveFile(appName, timestamp, filePath) {
+    const container = document.getElementById('archivesContainer');
+    if (!container) return;
+
+    viewingArchiveFile = filePath;
+    renderArchivesView(container, appName);
   }
 
-  async function fetchApps() {
-    apps = await fetchJson('/api/apps');
-    renderSidebar();
-    if (apps.length > 0 && !selectedApp) {
-      selectApp(apps[0]);
+  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)';
     }
   }
 
-  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();
+  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';
     }
   }
 
-  // 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;
-          html += `<div class="sidebar-item loop-item${loopActive ? ' active' : ''}" data-app="${esc(app.appName)}" data-loop="${esc(loop.key)}">
-            ${esc(loop.name)}
-          </div>`;
-        }
+  // 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';
     }
-    sidebarApps.innerHTML = html;
+  }
 
-    // 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);
-      });
+  // 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();
+      }
     });
-    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);
-        }
+
+    // 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);
+        });
       });
     });
   }
 
-  function selectApp(app) {
-    selectedApp = app;
-    selectedLoop = app.loops.length > 0 ? app.loops[0].key : null;
-    promptDirty = false;
-    renderSidebar();
-    renderContent();
-    fetchAppStatus(app.appName);
+  // -----------------------------------------------------------------------
+  // 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 selectLoop(loopKey) {
-    selectedLoop = loopKey;
-    promptDirty = false;
-    renderSidebar();
-    renderContent();
+  function initTemplateBuilderState() {
+    return { name: '', description: '', loops: [createEmptyLoop()] };
   }
 
-  // Main content
-  function renderContent() {
-    if (!selectedApp) {
-      content.innerHTML = '<div class="content-empty">Select an app to view details</div>';
+  async function renderTemplatesPage() {
+    if (showTemplateBuilder) {
+      renderTemplateBuilder();
       return;
     }
 
-    const app = selectedApp;
-    const currentLoop = app.loops.find(l => l.key === selectedLoop);
+    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>';
+    }
 
-    let html = '';
+    content.innerHTML = html;
 
-    // App header
-    html += `<div class="app-header">
-      <h2>${esc(app.appName)}</h2>
-      <span class="app-type-badge">${esc(app.appType)}</span>
-      ${app.description ? `<div class="app-desc">${esc(app.description)}</div>` : ''}
-    </div>`;
+    const createBtn = document.getElementById('createTemplateBtn');
+    if (createBtn) {
+      createBtn.addEventListener('click', () => {
+        showTemplateBuilder = true;
+        templateBuilderState = initTemplateBuilderState();
+        renderTemplatesPage();
+      });
+    }
 
-    // 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>`;
+    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>';
 
-    // Loop detail
-    if (currentLoop) {
-      const st = currentLoop.status || {};
-      html += `<div class="section">
-        <div class="section-title">Loop Detail: ${esc(currentLoop.name)}</div>
-        <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>
+    // 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 class="meta-card"><div class="meta-label">Stages</div><div class="meta-value" style="font-size:11px">${(currentLoop.stages || []).join(' → ')}</div></div>
         </div>`;
+      }
+      html += '</div>';
 
-      // Agent table
-      if (st.agents && st.agents.length > 0) {
-        html += `<div style="margin-bottom: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>';
+      // 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>';
+      html += '</div>'; // close loop-card
+    });
 
-      // Prompt editor
-      html += `<div class="section">
-        <div class="section-title">Prompt Editor</div>
-        <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>`;
+    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
 
-      // Tracker viewer
-      html += `<div class="section">
-        <div class="section-title">Tracker (live, read-only)</div>
-        <div class="tracker-viewer" id="trackerViewer">Loading...</div>
-      </div>`;
-    }
+    // 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();
+  }
 
-    // Bind pipeline node clicks
-    content.querySelectorAll('.pipeline-node').forEach(el => {
-      el.addEventListener('click', () => selectLoop(el.dataset.loop));
+  function bindTemplateBuilderEvents() {
+    const backBtn = document.getElementById('builderBackBtn');
+    if (backBtn) backBtn.addEventListener('click', () => {
+      showTemplateBuilder = false;
+      templateBuilderState = null;
+      renderTemplatesPage();
     });
 
-    // Load prompt + tracker
-    if (currentLoop) {
-      loadPrompt(app.appName, currentLoop.key);
-      loadTracker(app.appName, currentLoop.key);
-    }
-  }
+    const cancelBtn = document.getElementById('builderCancelBtn');
+    if (cancelBtn) cancelBtn.addEventListener('click', () => {
+      showTemplateBuilder = false;
+      templateBuilderState = null;
+      renderTemplatesPage();
+    });
 
-  async function loadPrompt(appName, loopKey) {
-    const editor = $('#promptEditor');
-    if (!editor) return;
+    const saveBtn = document.getElementById('builderSaveBtn');
+    if (saveBtn) saveBtn.addEventListener('click', saveTemplate);
 
-    try {
-      const data = await fetchJson(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/prompt`);
-      editor.value = data.content || '';
-      promptOriginal = editor.value;
-      promptDirty = false;
-      updateDirtyState();
+    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();
+    });
 
-      editor.addEventListener('input', () => {
-        promptDirty = editor.value !== promptOriginal;
-        updateDirtyState();
+    // 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();
       });
+    });
 
-      // Cmd/Ctrl+S to save
-      editor.addEventListener('keydown', (e) => {
-        if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+    // 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();
-          savePrompt(appName, loopKey);
+          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);
+          }
         }
       });
+    });
 
-      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();
+    // 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();
       });
-    } catch {
-      editor.value = '(Error loading prompt)';
-    }
-  }
+    });
 
-  async function savePrompt(appName, loopKey) {
-    const editor = $('#promptEditor');
-    if (!editor || !promptDirty) return;
+    // 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();
+      });
+    });
 
-    try {
-      await fetch(`/api/apps/${encodeURIComponent(appName)}/loops/${encodeURIComponent(loopKey)}/prompt`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: editor.value }),
+    // 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();
       });
-      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';
+  // 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;
+      }
+    });
   }
 
-  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 updateYamlPreview() {
+    const preview = document.getElementById('yamlPreview');
+    if (preview && templateBuilderState) {
+      preview.textContent = generateYamlPreview(templateBuilderState);
     }
   }
 
-  // Minimal markdown renderer
-  function renderMarkdown(md) {
-    let html = '';
-    const lines = md.split('\n');
-    let inTable = false;
-    let tableHtml = '';
+  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`;
+      }
 
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
+      yaml += `    model: ${loop.model || 'claude-sonnet-4-6'}\n`;
+      yaml += `    cadence: 0\n`;
 
-      // 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 = '';
+      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`;
+      }
+    });
 
-      // 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; }
+    return yaml;
+  }
 
-      // Checkboxes
-      if (line.match(/^- \[x\]/i)) {
-        html += `<div class="cb-done">${esc(line)}</div>`;
-        continue;
+  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 (line.match(/^- \[ \]/)) {
-        html += `<div class="cb-todo">${esc(line)}</div>`;
-        continue;
+      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;
       }
-
-      // Regular lines
-      html += line.trim() === '' ? '<br>' : `<div>${esc(line)}</div>`;
     }
 
-    if (inTable) {
-      tableHtml += '</tbody></table>';
-      html += tableHtml;
+    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...';
     }
 
-    return html;
-  }
+    try {
+      const res = await fetch('/api/templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(definition)
+      });
+      const data = await res.json();
 
-  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';
+      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 esc(s) {
-    if (s == null) return '';
-    const d = document.createElement('div');
-    d.textContent = String(s);
-    return d.innerHTML;
+  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>