@enderfga/claw-orchestrator 3.7.1 → 4.0.3

package/dist/src/dashboard/index.html

@@ -353,6 +353,342 @@
         border-top: 1px solid var(--border);
         background: var(--surface);
       }
+      /* ─── Forge tab ──────────────────────────────────────────── */
+      .forge-layout {
+        display: grid;
+        grid-template-columns: 1fr 380px;
+        height: 100%;
+        gap: 0;
+      }
+      .forge-chat {
+        display: flex;
+        flex-direction: column;
+        padding: 16px;
+        overflow: hidden;
+        height: 100%;
+      }
+      .forge-mode {
+        display: inline-block;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        background: var(--surface-2);
+        color: var(--muted);
+        margin-bottom: 8px;
+        text-transform: uppercase;
+        align-self: flex-start;
+      }
+      .forge-mode[data-mode='build'],
+      .forge-mode[data-mode='building'] { background: var(--info); color: white; }
+      .forge-mode[data-mode='done'],
+      .forge-mode[data-mode='build-complete'] { background: var(--accent); color: white; }
+      .forge-mode[data-mode='failed'] { background: var(--error); color: white; }
+      .forge-mode[data-mode='queued'] { background: var(--warn); color: white; }
+      .forge-empty {
+        margin: auto;
+        max-width: 440px;
+        text-align: center;
+        color: var(--muted);
+      }
+      .forge-messages {
+        flex: 1;
+        overflow-y: auto;
+        padding-right: 8px;
+        margin-bottom: 8px;
+      }
+      .forge-msg {
+        padding: 6px 10px;
+        margin: 4px 0;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+      .forge-msg.user { background: #e0eaff; align-self: flex-end; }
+      .forge-msg.assistant { background: var(--surface); border: 1px solid var(--border); }
+      .forge-msg.system { background: var(--surface-2); color: var(--muted); font-size: 12px; }
+      .forge-share {
+        background: var(--surface);
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        padding: 12px;
+        margin: 8px 0;
+      }
+      .forge-share strong { color: var(--accent); display: block; margin-bottom: 6px; }
+      .forge-share a { color: var(--accent); word-break: break-all; }
+      .forge-share-actions { display: flex; gap: 8px; margin-top: 10px; }
+      .forge-share-actions button {
+        padding: 4px 12px;
+        font-size: 12px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .forge-public-modal {
+        max-width: 600px;
+        padding: 20px;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+      }
+      .forge-public-modal pre {
+        background: var(--surface-2);
+        padding: 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        overflow-x: auto;
+      }
+      .forge-public-modal h4 { margin-bottom: 4px; }
+      .runItem .lifecycle-actions {
+        display: none;
+        gap: 4px;
+        margin-top: 4px;
+      }
+      .runItem:hover .lifecycle-actions { display: flex; }
+      .lifecycle-actions button {
+        font-size: 10px;
+        padding: 2px 6px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        border-radius: 3px;
+        cursor: pointer;
+      }
+      .lifecycle-actions button:hover { background: var(--surface-2); }
+      .forge-question {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 12px;
+        margin: 8px 0;
+      }
+      .forge-question .ctx { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
+      .forge-question .q { font-weight: 600; margin-bottom: 8px; }
+      .forge-question .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+      .forge-question .opt {
+        padding: 4px 10px;
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        cursor: pointer;
+        font-size: 12px;
+        background: var(--surface);
+      }
+      .forge-question .opt.recommended { border-color: var(--accent); }
+      .forge-question .opt.selected { background: var(--accent); color: white; border-color: var(--accent); }
+      .forge-input {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 8px;
+        padding-top: 8px;
+        border-top: 1px solid var(--border);
+      }
+      .forge-input textarea {
+        resize: vertical;
+        font-family: inherit;
+        padding: 6px;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+      }
+      .forge-input-row {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 8px;
+        margin-top: 4px;
+      }
+      .forge-input button {
+        padding: 6px 14px;
+        border-radius: 4px;
+        border: 1px solid var(--accent);
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+      }
+      .forge-input button:disabled { opacity: 0.4; cursor: not-allowed; }
+      .forge-spec {
+        border-left: 1px solid var(--border);
+        padding: 16px;
+        overflow-y: auto;
+        background: var(--surface-2);
+        display: flex;
+        flex-direction: column;
+      }
+      .forge-spec h3 { margin: 0 0 8px 0; }
+      .forge-spec textarea {
+        width: 100%;
+        font-family: ui-monospace, SFMono-Regular, monospace;
+        font-size: 11px;
+        padding: 6px;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        flex: 1;
+      }
+      .forge-spec-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+        align-items: center;
+      }
+      .forge-spec-actions button {
+        padding: 4px 10px;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        cursor: pointer;
+      }
+      .forge-spec-msg { font-size: 11px; color: var(--muted); }
+      #forgeNew,
+      #councilNew,
+      #autoloopNew {
+        margin: 8px 12px;
+        padding: 6px 12px;
+        border-radius: 4px;
+        border: 1px solid var(--accent);
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+        width: calc(100% - 24px);
+      }
+      #forgeNew:hover,
+      #councilNew:hover,
+      #autoloopNew:hover {
+        filter: brightness(0.95);
+      }
+
+      /* ─── Launcher modal (Council / Autoloop forms) ─────────────── */
+      .modal-root {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+      }
+      .modal-root[hidden] { display: none; }
+      .modal {
+        background: var(--surface);
+        border-radius: 8px;
+        min-width: 440px;
+        max-width: 600px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+      }
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 20px;
+        border-bottom: 1px solid var(--border);
+      }
+      .modal-header h2 { margin: 0; font-size: 15px; }
+      .modal-header button {
+        background: transparent;
+        border: none;
+        font-size: 22px;
+        cursor: pointer;
+        color: var(--muted);
+        padding: 0 6px;
+      }
+      .modal-body {
+        padding: 16px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .modal-body label {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      .modal-body input,
+      .modal-body textarea {
+        padding: 6px 8px;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        font: inherit;
+        color: var(--text);
+        background: var(--bg);
+      }
+      .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 12px 20px 18px;
+      }
+      .modal-footer button {
+        padding: 6px 14px;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        cursor: pointer;
+        font: inherit;
+      }
+      .modal-footer button.primary {
+        background: var(--accent);
+        color: white;
+        border-color: var(--accent);
+      }
+      .modal-footer button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      /* ─── Empty-state CTA ──────────────────────────────────────── */
+      .empty-cta {
+        text-align: center;
+        margin: 80px auto 0;
+        max-width: 420px;
+      }
+      .empty-cta h2 { margin: 0 0 8px; font-size: 16px; }
+      .empty-cta p { margin: 0 0 16px; color: var(--muted); }
+      .empty-cta button {
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: 1px solid var(--accent);
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+        font: inherit;
+      }
+      #forgeStartBuild {
+        margin-top: 8px;
+        padding: 8px 14px;
+        border-radius: 4px;
+        border: 1px solid var(--accent);
+        background: var(--accent);
+        color: white;
+        cursor: pointer;
+        font-weight: 600;
+      }
+      #forgeStartBuild:disabled { opacity: 0.4; cursor: not-allowed; }
+      .forge-versions { margin-top: 12px; }
+      .forge-versions h4 { margin: 0 0 6px 0; font-size: 12px; color: var(--muted); text-transform: uppercase; }
+      .version-list { list-style: none; padding: 0; margin: 0; }
+      .version-row {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 4px 0;
+        font-size: 12px;
+        border-top: 1px solid var(--border);
+      }
+      .version-tag {
+        background: var(--surface-2);
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-family: monospace;
+        font-weight: 600;
+      }
+      .version-meta { color: var(--muted); }
+      .version-row a { color: var(--accent); text-decoration: none; word-break: break-all; }
+      .version-row button {
+        margin-left: auto;
+        padding: 2px 8px;
+        font-size: 11px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        border-radius: 3px;
+        cursor: pointer;
+      }
+      .version-row button:disabled { opacity: 0.4; cursor: not-allowed; }
     </style>
   </head>
   <body>
@@ -362,6 +698,7 @@
         <nav class="tabs" role="tablist">
           <button class="tab" role="tab" aria-selected="true" data-tab="autoloop">Autoloop</button>
           <button class="tab" role="tab" aria-selected="false" data-tab="council">Council</button>
+          <button class="tab" role="tab" aria-selected="false" data-tab="forge">Forge</button>
         </nav>
         <div class="grow"></div>
         <small id="status">connected</small>
@@ -370,6 +707,9 @@
       <div class="body">
         <aside class="sidebar">
           <h2 id="sidebarTitle">Runs</h2>
+          <button id="autoloopNew" hidden>+ New autoloop</button>
+          <button id="councilNew" hidden>+ New council</button>
+          <button id="forgeNew" hidden>+ New forge</button>
           <ul class="runlist" id="runlist"></ul>
         </aside>
 
@@ -381,6 +721,60 @@
       <div class="footer">SSE-driven dashboard • served by claw-orchestrator embedded server</div>
     </div>
 
+    <!-- ─── Launcher modal (tab-aware) ───────────────────────────────── -->
+    <div id="modalRoot" class="modal-root" hidden>
+      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+        <div class="modal-header">
+          <h2 id="modalTitle">New run</h2>
+          <button id="modalClose" type="button" aria-label="Close">×</button>
+        </div>
+        <form id="modalForm" class="modal-body" autocomplete="off">
+          <!-- Council fields -->
+          <div data-for-tab="council" style="display: contents">
+            <label>
+              Task
+              <textarea
+                name="task"
+                rows="3"
+                placeholder="What should the council achieve?"
+              ></textarea>
+            </label>
+            <label>
+              Project directory
+              <input
+                name="projectDir"
+                type="text"
+                placeholder="/abs/path/to/workspace"
+              />
+            </label>
+            <label>
+              Max rounds
+              <input name="maxRounds" type="number" min="1" max="50" value="15" />
+            </label>
+          </div>
+          <!-- Autoloop fields -->
+          <div data-for-tab="autoloop" style="display: contents">
+            <label>
+              Workspace
+              <input
+                name="workspace"
+                type="text"
+                placeholder="/abs/path/to/git/workspace"
+              />
+            </label>
+            <label>
+              Planner model (optional)
+              <input name="planner_model" type="text" placeholder="claude-opus-4-7" />
+            </label>
+          </div>
+          <div class="modal-footer">
+            <button type="button" id="modalCancel">Cancel</button>
+            <button type="submit" id="modalSubmit" class="primary">Start</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <script>
       // ─── State ────────────────────────────────────────────────────
       const state = {
@@ -402,6 +796,14 @@
           events: [],
           eventSource: null,
         },
+        // forge run detail
+        forge: {
+          runId: null,
+          spec: null,
+          mode: 'interview',
+          currentQuestion: null,
+          eventSource: null,
+        },
       };
 
       const $ = (id) => document.getElementById(id);
@@ -423,7 +825,15 @@
         document.querySelectorAll('.tab').forEach((b) => {
           b.setAttribute('aria-selected', String(b.dataset.tab === tab));
         });
-        $('sidebarTitle').textContent = tab === 'autoloop' ? 'Autoloop runs' : 'Council sessions';
+        $('sidebarTitle').textContent =
+          tab === 'autoloop'
+            ? 'Autoloop runs'
+            : tab === 'council'
+              ? 'Council sessions'
+              : 'Forge apps';
+        $('forgeNew').hidden = tab !== 'forge';
+        $('councilNew').hidden = tab !== 'council';
+        $('autoloopNew').hidden = tab !== 'autoloop';
         state.selectedId = null;
         closeStreams();
         renderEmptyMain();
@@ -439,6 +849,10 @@
           state.council.eventSource.close();
           state.council.eventSource = null;
         }
+        if (state.forge.eventSource) {
+          state.forge.eventSource.close();
+          state.forge.eventSource = null;
+        }
         // Reset caches.
         state.autoloop.state = null;
         state.autoloop.plannerLog = [];
@@ -447,20 +861,64 @@
         state.autoloop.pushLog = [];
         state.council.session = null;
         state.council.events = [];
+        state.forge.runId = null;
+        state.forge.spec = null;
+        state.forge.currentQuestion = null;
+        state.forge.mode = 'interview';
       }
 
       function renderEmptyMain() {
-        $('main').innerHTML = '<div class="empty" style="margin-top:80px">Select a run to view.</div>';
+        // When the sidebar list is empty, invite the user to start their
+        // first run. Otherwise just say "pick one". The button delegates
+        // to the same launcher trigger as the sidebar "+ New" button.
+        const labels = {
+          autoloop: 'autoloop run',
+          council: 'council session',
+          forge: 'forge app',
+        };
+        const noun = labels[state.tab] || 'run';
+        if (state.runs.length === 0) {
+          const triggerId =
+            state.tab === 'autoloop'
+              ? 'autoloopNew'
+              : state.tab === 'council'
+                ? 'councilNew'
+                : 'forgeNew';
+          $('main').innerHTML = `
+            <div class="empty empty-cta">
+              <h2>No ${escapeHtml(noun)}s yet</h2>
+              <p>Click <strong>+ New</strong> in the sidebar to start your first one.</p>
+              <button type="button" onclick="document.getElementById('${triggerId}').click()">+ New ${escapeHtml(noun)}</button>
+            </div>
+          `;
+        } else {
+          $('main').innerHTML =
+            '<div class="empty" style="margin-top:80px">Select a run to view.</div>';
+        }
       }
 
       // ─── List polling ─────────────────────────────────────────────
       async function refreshList() {
         try {
-          const url = state.tab === 'autoloop' ? '/autoloop/list' : '/council/list';
-          const r = await fetch(url);
+          const url =
+            state.tab === 'autoloop'
+              ? '/autoloop/list'
+              : state.tab === 'council'
+                ? '/council/list'
+                : '/ultraapp/list';
+          const opts = state.tab === 'forge' ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' } : {};
+          const r = await fetch(url, opts);
           const j = await r.json();
-          state.runs = state.tab === 'autoloop' ? j.runs || [] : j.councils || [];
+          state.runs =
+            state.tab === 'autoloop'
+              ? j.runs || []
+              : state.tab === 'council'
+                ? j.councils || []
+                : j.runs || [];
           renderList();
+          // Refresh the empty-state CTA — runs may have just appeared or
+          // disappeared, and renderEmptyMain's text depends on state.runs.length.
+          if (!state.selectedId) renderEmptyMain();
           $('status').textContent = 'connected';
         } catch (err) {
           $('status').textContent = 'disconnected';
@@ -471,9 +929,11 @@
       function renderList() {
         const ul = $('runlist');
         if (state.runs.length === 0) {
+          const noun =
+            state.tab === 'autoloop' ? 'runs' : state.tab === 'council' ? 'councils' : 'apps';
           ul.innerHTML =
             '<li class="empty" style="padding:20px;list-style:none">No active ' +
-            (state.tab === 'autoloop' ? 'runs' : 'councils') +
+            noun +
             '.</li>';
           return;
         }
@@ -488,8 +948,11 @@
                     <span>iter ${r.iter}</span>
                     <span>↑${r.push_log_count}</span>
                   </div>
+                  <div class="lifecycle-actions">
+                    <button data-act="delete">Delete</button>
+                  </div>
                 </li>`;
-            } else {
+            } else if (state.tab === 'council') {
               return `
                 <li class="runItem" data-id="${escapeHtml(r.id)}" aria-selected="${r.id === state.selectedId}">
                   <div class="id">${escapeHtml(r.id)}</div>
@@ -498,16 +961,70 @@
                     <span>${r.responses?.length ?? 0} resp</span>
                   </div>
                 </li>`;
+            } else {
+              const showLifecycle = r.mode === 'done' || r.mode === 'failed' || r.mode === 'build-complete';
+              const lifecycleHtml = showLifecycle
+                ? `<div class="lifecycle-actions">
+                     ${r.mode === 'done' ? `<button data-act="stop">Stop</button>` : ''}
+                     ${r.mode !== 'done' ? `<button data-act="start">Start</button>` : ''}
+                     <button data-act="delete">Delete</button>
+                   </div>`
+                : '';
+              return `
+                <li class="runItem" data-id="${escapeHtml(r.runId)}" aria-selected="${r.runId === state.selectedId}">
+                  <div class="id">${escapeHtml(r.title || r.runId)}</div>
+                  <div class="meta">
+                    <span class="badge ${r.mode}">${r.mode}</span>
+                  </div>
+                  ${lifecycleHtml}
+                </li>`;
             }
           })
           .join('');
         ul.innerHTML = html;
         ul.querySelectorAll('.runItem').forEach((el) => {
-          el.addEventListener('click', () => {
+          // Click on item itself (not action button) opens it
+          el.addEventListener('click', (ev) => {
+            const t = ev.target;
+            if (t && t.closest('.lifecycle-actions')) return;
             state.selectedId = el.dataset.id;
             renderList();
             openDetail(el.dataset.id);
           });
+          el.querySelectorAll('.lifecycle-actions button').forEach((btn) => {
+            btn.addEventListener('click', async (ev) => {
+              ev.stopPropagation();
+              const action = btn.dataset.act;
+              const id = el.dataset.id;
+              if (state.tab === 'autoloop') {
+                if (action !== 'delete') return;
+                if (!confirm(`Delete autoloop run "${id}"? The registry entry is removed; the ledger directory under tasks/${id}/ is kept on disk.`)) return;
+                try {
+                  const r = await fetch(`/autoloop/${encodeURIComponent(id)}/delete`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
+                  if (!r.ok) {
+                    let detail = `HTTP ${r.status}`;
+                    try { const j = await r.json(); if (j && j.error) detail = j.error; } catch { /* ignore */ }
+                    alert(`Delete failed: ${detail}`);
+                    return;
+                  }
+                  // If we were viewing this run, close the detail pane and pick another.
+                  if (state.selectedId === id) {
+                    closeStreams();
+                    state.selectedId = null;
+                    $('main').innerHTML = '<div class="empty">Select a run from the left.</div>';
+                  }
+                } catch (err) {
+                  alert(`Delete failed: ${(err && err.message) || err}`);
+                  return;
+                }
+                refreshList();
+                return;
+              }
+              if (action === 'delete' && !confirm('Delete this run? Container, image, and on-disk artifacts are removed.')) return;
+              await forgeLifecycleAction(id, action);
+              refreshList();
+            });
+          });
         });
       }
 
@@ -515,7 +1032,410 @@
       function openDetail(id) {
         closeStreams();
         if (state.tab === 'autoloop') openAutoloop(id);
-        else openCouncil(id);
+        else if (state.tab === 'council') openCouncil(id);
+        else openForgeRun(id);
+      }
+
+      // ─── Forge ────────────────────────────────────────────────────
+      $('forgeNew').addEventListener('click', async () => {
+        const r = await fetch('/ultraapp/new', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: '{}',
+        });
+        const j = await r.json();
+        if (!j.ok) {
+          alert('Failed to create run: ' + (j.error || 'unknown'));
+          return;
+        }
+        state.selectedId = j.runId;
+        await refreshList();
+        openForgeRun(j.runId);
+      });
+
+      function renderForgeShell() {
+        $('main').innerHTML = `
+          <div class="forge-layout">
+            <div class="forge-chat">
+              <div class="forge-mode" id="forgeMode" data-mode="interview">interview</div>
+              <div class="forge-messages" id="forgeMessages"></div>
+              <div class="forge-input">
+                <textarea id="forgeFreeform" placeholder="Free-form input (or click an option above and Submit)" rows="2"></textarea>
+                <button id="forgeSubmit">Submit</button>
+              </div>
+              <div class="forge-input-row">
+                <input type="file" id="forgeFile" multiple />
+                <input type="text" id="forgePath" placeholder="…or paste an absolute path" />
+              </div>
+            </div>
+            <div class="forge-spec">
+              <h3>AppSpec</h3>
+              <textarea id="forgeSpecJson" rows="20" spellcheck="false"></textarea>
+              <div class="forge-spec-actions">
+                <button id="forgeSpecApply">Apply edit</button>
+                <span class="forge-spec-msg" id="forgeSpecMsg"></span>
+              </div>
+              <button id="forgeStartBuild" disabled>Start Build</button>
+              <div id="forgeVersions" class="forge-versions"></div>
+            </div>
+          </div>
+        `;
+        $('forgeSubmit').addEventListener('click', forgeOnSubmit);
+        $('forgeSpecApply').addEventListener('click', forgeOnSpecApply);
+        $('forgeStartBuild').addEventListener('click', forgeOnStartBuild);
+      }
+
+      async function forgeOnStartBuild() {
+        const runId = state.forge.runId;
+        if (!runId) return;
+        const btn = $('forgeStartBuild');
+        if (btn) btn.disabled = true;
+        try {
+          const r = await fetch('/ultraapp/' + encodeURIComponent(runId) + '/build', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}',
+          });
+          const j = await r.json();
+          if (!j.ok) {
+            renderChatEntry({ role: 'system', kind: 'error', text: '[error] start build: ' + (j.error || 'unknown') });
+            if (btn) btn.disabled = false;
+          }
+        } catch (err) {
+          renderChatEntry({ role: 'system', kind: 'error', text: '[error] start build: ' + err.message });
+          if (btn) btn.disabled = false;
+        }
+      }
+
+      async function openForgeRun(runId) {
+        state.forge.runId = runId;
+        renderForgeShell();
+        try {
+          const r = await fetch('/ultraapp/' + encodeURIComponent(runId), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}',
+          });
+          const j = await r.json();
+          if (!j.ok) {
+            $('forgeMessages').textContent = 'error: ' + (j.error || 'unknown');
+            return;
+          }
+          state.forge.spec = j.spec;
+          state.forge.mode = j.state.mode;
+          renderSpec(j.spec);
+          setForgeMode(j.state.mode);
+          for (const e of j.chat || []) renderChatEntry(e);
+        } catch (err) {
+          $('forgeMessages').textContent = 'fetch failed: ' + err.message;
+          return;
+        }
+        const es = new EventSource('/ultraapp/' + encodeURIComponent(runId) + '/events');
+        state.forge.eventSource = es;
+        es.addEventListener('ultraapp', (ev) => {
+          const data = JSON.parse(ev.data);
+          if (data.type === 'question') renderQuestion(data.question);
+          else if (data.type === 'spec-updated') {
+            state.forge.spec = data.spec;
+            renderSpec(data.spec);
+          } else if (data.type === 'chat') renderChatEntry(data.entry);
+          else if (data.type === 'interview-complete') {
+            renderChatEntry({ role: 'system', kind: 'narrator', text: 'Interview complete: ' + data.summary });
+            $('forgeStartBuild').disabled = false;
+          } else if (data.type === 'build-event') {
+            const ev = data.event;
+            if (ev.type === 'queued') setForgeMode('queued');
+            else if (ev.type === 'build-start') setForgeMode('building');
+            else if (ev.type === 'build-complete') setForgeMode('build-complete');
+            else if (ev.type === 'build-failed') {
+              setForgeMode('failed');
+              const btn = $('forgeStartBuild');
+              if (btn) btn.disabled = false;
+            } else if (ev.type === 'build-cancelled') {
+              setForgeMode('failed');
+              const btn = $('forgeStartBuild');
+              if (btn) btn.disabled = false;
+            }
+          } else if (data.type === 'app-url') {
+            setForgeMode('done');
+            renderShareCard(data.url, data.version);
+          } else if (data.type === 'error') {
+            renderChatEntry({ role: 'system', kind: 'error', text: '[error] ' + data.message });
+          }
+        });
+        es.onerror = () => {
+          /* allow auto-reconnect */
+        };
+      }
+
+      function setForgeMode(m) {
+        state.forge.mode = m;
+        const el = $('forgeMode');
+        if (el) {
+          el.dataset.mode = m;
+          el.textContent = m;
+        }
+        const btn = $('forgeStartBuild');
+        if (btn) {
+          // Disabled while interview, queued, or building. Enabled at any
+          // resting state from which a (re)build is sensible.
+          const lockedModes = new Set(['interview', 'queued', 'building']);
+          btn.disabled = lockedModes.has(m);
+        }
+        // Hint the input's role per mode (interview = answer; done = feedback).
+        const ff = $('forgeFreeform');
+        if (ff) {
+          ff.placeholder =
+            m === 'done'
+              ? 'Done — type feedback (e.g. "make button green" / "add a thumbnail step")'
+              : 'Free-form input (or click an option above and Submit)';
+        }
+        // Refresh versions panel when entering a state that may have artifacts.
+        if (m === 'done' || m === 'build-complete') {
+          void forgeRefreshVersions();
+        }
+      }
+
+      function renderSpec(spec) {
+        const ta = $('forgeSpecJson');
+        if (!ta) return;
+        if (document.activeElement !== ta) {
+          ta.value = JSON.stringify(spec, null, 2);
+        }
+      }
+
+      function renderChatEntry(entry) {
+        const m = $('forgeMessages');
+        if (!m) return;
+        const div = document.createElement('div');
+        div.className = 'forge-msg ' + entry.role;
+        div.textContent = entry.text;
+        m.appendChild(div);
+        m.scrollTop = m.scrollHeight;
+      }
+
+      function renderShareCard(url, version) {
+        const m = $('forgeMessages');
+        if (!m) return;
+        const card = document.createElement('div');
+        card.className = 'forge-share';
+        card.innerHTML =
+          `<strong>App deployed (${escapeHtml(version)})</strong>` +
+          `<div><a href="${escapeHtml(url)}" target="_blank">${escapeHtml(url)}</a></div>` +
+          `<div class="forge-share-actions">` +
+          `<button data-act="copy">Copy</button>` +
+          `<button data-act="open">Open</button>` +
+          `<button data-act="public">Make Public…</button>` +
+          `</div>`;
+        card.querySelector('[data-act="copy"]').addEventListener('click', () => {
+          navigator.clipboard?.writeText(url);
+        });
+        card.querySelector('[data-act="open"]').addEventListener('click', () => {
+          window.open(url, '_blank');
+        });
+        card.querySelector('[data-act="public"]').addEventListener('click', () => openPublicModal(url));
+        m.appendChild(card);
+        m.scrollTop = m.scrollHeight;
+      }
+
+      function openPublicModal(localUrl) {
+        const dlg = document.createElement('dialog');
+        dlg.className = 'forge-public-modal';
+        const u = new URL(localUrl);
+        dlg.innerHTML =
+          `<h3>Make this app public</h3>` +
+          `<p>This app currently only runs on your machine. To share it, expose port ${escapeHtml(String(u.port || '19000'))} with one of these tools:</p>` +
+          `<h4>Cloudflare Tunnel</h4>` +
+          `<pre>cloudflared tunnel --url ${escapeHtml(u.origin)}</pre>` +
+          `<h4>ngrok</h4>` +
+          `<pre>ngrok http ${escapeHtml(u.port || '19000')}</pre>` +
+          `<h4>Tailscale Funnel</h4>` +
+          `<pre>tailscale serve --bg ${escapeHtml(u.origin)}</pre>` +
+          `<h4>Self-hosted (Caddy)</h4>` +
+          `<pre>example.com {\n  reverse_proxy ${escapeHtml(u.host)}\n}</pre>` +
+          `<p>Once exposed, your app will be reachable at <code>{your-public-host}${escapeHtml(u.pathname)}</code>.</p>` +
+          `<button data-act="close">Close</button>`;
+        document.body.appendChild(dlg);
+        dlg.showModal();
+        dlg.querySelector('[data-act="close"]').addEventListener('click', () => {
+          dlg.close();
+          dlg.remove();
+        });
+      }
+
+      async function forgeLifecycleAction(runId, action) {
+        try {
+          const r = await fetch('/ultraapp/' + encodeURIComponent(runId) + '/' + action, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}',
+          });
+          const j = await r.json();
+          if (!j.ok) {
+            renderChatEntry({ role: 'system', kind: 'error', text: '[error] ' + action + ': ' + (j.error || 'unknown') });
+          }
+          if (action === 'delete' && j.ok && state.forge.runId === runId) {
+            // Run is gone — close it and refresh sidebar
+            state.forge.runId = null;
+            $('forgeMessages').innerHTML = '';
+          }
+        } catch (err) {
+          renderChatEntry({ role: 'system', kind: 'error', text: '[error] ' + action + ': ' + err.message });
+        }
+      }
+
+      function renderQuestion(q) {
+        state.forge.currentQuestion = q;
+        const m = $('forgeMessages');
+        if (!m) return;
+        const card = document.createElement('div');
+        card.className = 'forge-question';
+        card.innerHTML =
+          (q.context ? `<div class="ctx">${escapeHtml(q.context)}</div>` : '') +
+          `<div class="q">${escapeHtml(q.question)}</div>` +
+          `<div class="opts">` +
+          q.options
+            .map(
+              (o) =>
+                `<span class="opt ${o.value === q.recommended ? 'recommended' : ''}" data-val="${escapeHtml(o.value)}">${escapeHtml(o.label)}</span>`,
+            )
+            .join('') +
+          `</div>`;
+        card.querySelectorAll('.opt').forEach((el) => {
+          el.addEventListener('click', () => {
+            card.querySelectorAll('.opt').forEach((x) => x.classList.remove('selected'));
+            el.classList.add('selected');
+            state.forge.currentQuestion._selected = el.dataset.val;
+          });
+        });
+        m.appendChild(card);
+        m.scrollTop = m.scrollHeight;
+      }
+
+      async function forgeOnSubmit() {
+        const runId = state.forge.runId;
+        if (!runId) return;
+        const ff = $('forgeFreeform');
+        const path = $('forgePath');
+        const fileInput = $('forgeFile');
+
+        for (const f of fileInput.files) {
+          const buf = await f.arrayBuffer();
+          const b64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
+          await fetch('/ultraapp/' + encodeURIComponent(runId) + '/files', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename: f.name, dataB64: b64 }),
+          });
+        }
+        fileInput.value = '';
+
+        if (path.value.trim()) {
+          await fetch('/ultraapp/' + encodeURIComponent(runId) + '/files', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ absolutePath: path.value.trim() }),
+          });
+          path.value = '';
+        }
+
+        const freeform = ff.value.trim();
+        const selected = state.forge.currentQuestion?._selected;
+        // Mode-aware routing: in done mode, free-form text is feedback,
+        // not an interview answer. /feedback runs through the classifier
+        // and routes to patcher / spec-delta / structural-suggest.
+        if (state.forge.mode === 'done' && freeform) {
+          await fetch('/ultraapp/' + encodeURIComponent(runId) + '/feedback', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text: freeform }),
+          });
+          ff.value = '';
+          return;
+        }
+        if (freeform || selected) {
+          const body = freeform ? { value: selected ?? '', freeform } : { value: selected };
+          await fetch('/ultraapp/' + encodeURIComponent(runId) + '/answer', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+          ff.value = '';
+          state.forge.currentQuestion = null;
+        }
+      }
+
+      async function forgeRefreshVersions() {
+        const runId = state.forge.runId;
+        if (!runId) return;
+        const panel = $('forgeVersions');
+        if (!panel) return;
+        try {
+          const r = await fetch('/ultraapp/' + encodeURIComponent(runId) + '/artifacts', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}',
+          });
+          const j = await r.json();
+          if (!j.ok || !j.artifacts || j.artifacts.length === 0) {
+            panel.innerHTML = '';
+            return;
+          }
+          const html = j.artifacts
+            .map((a) => {
+              const isDeployed = !!a.deploy;
+              const url = a.deploy?.url || '';
+              return `<li class="version-row">
+                <span class="version-tag">${escapeHtml(a.version)}</span>
+                <span class="version-meta">${a.builtAt ? new Date(a.builtAt).toLocaleString() : ''}</span>
+                ${isDeployed ? `<a href="${escapeHtml(url)}" target="_blank">${escapeHtml(url)}</a>` : '<span class="version-meta">(not deployed)</span>'}
+                ${isDeployed ? `<button data-promote="${escapeHtml(a.version)}">Promote</button>` : ''}
+              </li>`;
+            })
+            .join('');
+          panel.innerHTML = '<h4>Versions</h4><ul class="version-list">' + html + '</ul>';
+          panel.querySelectorAll('button[data-promote]').forEach((btn) => {
+            btn.addEventListener('click', async () => {
+              const v = btn.dataset.promote;
+              if (!confirm(`Promote ${v} as the deployed version?`)) return;
+              btn.disabled = true;
+              const r = await fetch('/ultraapp/' + encodeURIComponent(runId) + '/promote-version', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ version: v }),
+              });
+              const j = await r.json();
+              if (!j.ok) {
+                renderChatEntry({ role: 'system', kind: 'error', text: '[error] promote: ' + (j.error || 'unknown') });
+              }
+              btn.disabled = false;
+              await forgeRefreshVersions();
+            });
+          });
+        } catch (err) {
+          /* best-effort */
+        }
+      }
+
+      async function forgeOnSpecApply() {
+        const runId = state.forge.runId;
+        if (!runId) return;
+        const msg = $('forgeSpecMsg');
+        msg.textContent = '';
+        let next;
+        try {
+          next = JSON.parse($('forgeSpecJson').value);
+        } catch (e) {
+          msg.textContent = 'JSON parse error: ' + e.message;
+          return;
+        }
+        const r = await fetch('/ultraapp/' + encodeURIComponent(runId) + '/spec-edit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ patch: [{ op: 'replace', path: '', value: next }] }),
+        });
+        const j = await r.json();
+        msg.textContent = j.ok ? 'Saved.' : 'Error: ' + (j.error ?? 'unknown');
       }
 
       // ─── Autoloop detail ──────────────────────────────────────────
@@ -590,9 +1510,21 @@
         });
         es.addEventListener('planner_reply', (e) => {
           const { text } = JSON.parse(e.data);
+          // Clear the "waiting…" placeholder, if any, before appending the reply.
+          state.autoloop.plannerLog = state.autoloop.plannerLog.filter((m) => m.who !== 'pending');
           state.autoloop.plannerLog.push({ who: 'planner', text, ts: new Date().toISOString() });
           paintPlanner();
         });
+        es.addEventListener('planner_error', (e) => {
+          const { message } = JSON.parse(e.data);
+          state.autoloop.plannerLog = state.autoloop.plannerLog.filter((m) => m.who !== 'pending');
+          state.autoloop.plannerLog.push({
+            who: 'system',
+            text: `[planner error] ${message}`,
+            ts: new Date().toISOString(),
+          });
+          paintPlanner();
+        });
         es.addEventListener('coder_reply', (e) => {
           const { text } = JSON.parse(e.data);
           state.autoloop.coderLog.push({ who: 'coder', text, ts: new Date().toISOString() });
@@ -741,16 +1673,47 @@
         const btn = $('auto-send');
         btn.disabled = true;
         ta.disabled = true;
+        // Clear input optimistically — the message is already echoed in the
+        // planner log below, and the new server contract is fire-and-forget
+        // (returns 202 immediately; reply streams via SSE). If the POST fails
+        // synchronously we surface the error in the log.
+        ta.value = '';
         state.autoloop.plannerLog.push({ who: 'user', text, ts: new Date().toISOString() });
+        state.autoloop.plannerLog.push({
+          who: 'pending',
+          text: 'Planner is thinking…',
+          ts: new Date().toISOString(),
+        });
         paintPlanner();
         try {
-          await fetch('/v1/openclaw/tools/autoloop_chat', {
+          const r = await fetch(`/autoloop/${encodeURIComponent(id)}/chat`, {
             method: 'POST',
             headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ run_id: id, text }),
+            body: JSON.stringify({ text }),
           });
-          ta.value = '';
+          // Server returns 202 on accepted (queued); 200 is also fine for
+          // legacy clients. Anything else is a real failure.
+          if (!r.ok) {
+            let detail = `HTTP ${r.status}`;
+            try {
+              const j = await r.json();
+              if (j && typeof j.error === 'string') detail = j.error;
+            } catch {
+              /* non-JSON body — keep the status code */
+            }
+            state.autoloop.plannerLog = state.autoloop.plannerLog.filter((m) => m.who !== 'pending');
+            state.autoloop.plannerLog.push({
+              who: 'system',
+              text: `[error] ${detail}`,
+              ts: new Date().toISOString(),
+            });
+            paintPlanner();
+          }
+          // On success, do nothing — the planner_reply / planner_error SSE
+          // handler upstairs clears the "thinking…" placeholder when the
+          // Planner actually replies (or errors).
         } catch (err) {
+          state.autoloop.plannerLog = state.autoloop.plannerLog.filter((m) => m.who !== 'pending');
           state.autoloop.plannerLog.push({
             who: 'system',
             text: `[error] ${(err && err.message) || 'send failed'}`,
@@ -903,7 +1866,98 @@
         el.scrollTop = el.scrollHeight;
       }
 
+      // ─── Modal launcher (Council / Autoloop) ─────────────────────
+      //
+      // forgeNew uses a different shape (no form: ultraapp is interview-
+      // driven, so POST /ultraapp/new with an empty body is enough). For
+      // Council / Autoloop we need real form input; one modal handles
+      // both, switching visible fields by state.tab.
+      function openLauncherModal() {
+        const root = $('modalRoot');
+        $('modalTitle').textContent =
+          state.tab === 'council' ? 'New Council session' : 'New Autoloop run';
+        root.querySelectorAll('[data-for-tab]').forEach((el) => {
+          const visible = el.dataset.forTab === state.tab;
+          el.style.display = visible ? 'contents' : 'none';
+          // Only the visible group's required fields actually count.
+          el.querySelectorAll('input,textarea').forEach((f) => {
+            if (visible && (f.name === 'task' || f.name === 'projectDir' || f.name === 'workspace')) {
+              f.required = true;
+            } else {
+              f.required = false;
+            }
+          });
+        });
+        root.hidden = false;
+        setTimeout(() => {
+          const firstVisible = root.querySelector(
+            `[data-for-tab="${state.tab}"] input, [data-for-tab="${state.tab}"] textarea`,
+          );
+          firstVisible?.focus();
+        }, 0);
+      }
+      function closeLauncherModal() {
+        $('modalRoot').hidden = true;
+        $('modalForm').reset();
+      }
+      $('councilNew').addEventListener('click', openLauncherModal);
+      $('autoloopNew').addEventListener('click', openLauncherModal);
+      $('modalClose').addEventListener('click', closeLauncherModal);
+      $('modalCancel').addEventListener('click', closeLauncherModal);
+      $('modalRoot').addEventListener('click', (e) => {
+        if (e.target.id === 'modalRoot') closeLauncherModal();
+      });
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !$('modalRoot').hidden) closeLauncherModal();
+      });
+      $('modalForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const fd = new FormData(e.target);
+        const body = {};
+        if (state.tab === 'council') {
+          body.task = (fd.get('task') || '').toString().trim();
+          body.projectDir = (fd.get('projectDir') || '').toString().trim();
+          const mr = (fd.get('maxRounds') || '').toString().trim();
+          if (mr) body.maxRounds = Number(mr);
+        } else if (state.tab === 'autoloop') {
+          body.workspace = (fd.get('workspace') || '').toString().trim();
+          const pm = (fd.get('planner_model') || '').toString().trim();
+          if (pm) body.planner_model = pm;
+        }
+        const url = state.tab === 'council' ? '/council/new' : '/autoloop/new';
+        const submitBtn = $('modalSubmit');
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Starting...';
+        try {
+          const r = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+          const j = await r.json();
+          if (!j.ok) {
+            alert('Failed: ' + (j.error || `HTTP ${r.status}`));
+            return;
+          }
+          const id = j.id ?? j.run_id;
+          closeLauncherModal();
+          await refreshList();
+          state.selectedId = id;
+          renderList();
+          openDetail(id);
+        } catch (err) {
+          alert('Failed: ' + err.message);
+        } finally {
+          submitBtn.disabled = false;
+          submitBtn.textContent = 'Start';
+        }
+      });
+
       // ─── Boot ────────────────────────────────────────────────────
+      // Make the right "+ New" button visible for the default tab.
+      $('autoloopNew').hidden = state.tab !== 'autoloop';
+      $('councilNew').hidden = state.tab !== 'council';
+      $('forgeNew').hidden = state.tab !== 'forge';
       refreshList();
     </script>
   </body>