jarvis-hq 0.0.5 → 0.0.7

package/dist/client-html.js

@@ -5,7 +5,7 @@ exports.html = `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
 <title>Jarvis</title>
 <style>
   :root {
@@ -349,12 +349,25 @@ exports.html = `<!DOCTYPE html>
   .msg.user .who { text-align: right; }
 
   .tool {
-    display: flex; align-items: center; gap: 9px; margin-top: 7px;
+    display: flex; align-items: center; gap: 9px; margin-top: 7px; width: 100%; text-align: left;
     background: var(--surface-2); border-radius: 10px; padding: 7px 11px;
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted);
+    cursor: default;
+  }
+  .tool b { color: var(--text); font-weight: 600; flex: none; align-self: flex-start; }
+  .tool-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* Only chips with more to show become interactive; the rest stay plain labels. */
+  .tool.more { cursor: pointer; }
+  .tool.more:hover { background: var(--border); }
+  .tool-chev { display: none; flex: none; align-self: flex-start; color: var(--faint); font-size: 15px; line-height: 1.3; transition: transform .15s ease; }
+  .tool.more .tool-chev { display: block; }
+  @media (prefers-reduced-motion: reduce) { .tool-chev { transition: none; } }
+  .tool.open { align-items: flex-start; }
+  .tool.open .tool-chev { transform: rotate(90deg); }
+  .tool.open .tool-text {
+    white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; cursor: auto;
+    max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
   }
-  .tool b { color: var(--text); font-weight: 600; flex: none; }
-  .tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .note { color: var(--faint); font-size: 12.5px; text-align: center; font-style: italic; }
 
   .perm {
@@ -367,12 +380,62 @@ exports.html = `<!DOCTYPE html>
     color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 150px; overflow: auto;
   }
   .perm .acts { display: flex; gap: 8px; }
+  .ask-questions { display: flex; flex-direction: column; gap: 16px; margin-bottom: 14px; }
+  .ask-q { display: flex; flex-direction: column; gap: 8px; }
+  .ask-q-text { font-size: 13.5px; font-weight: 500; }
+  .ask-opts { display: flex; flex-direction: column; gap: 6px; }
+  .ask-opt-btn {
+    text-align: left; padding: 7px 12px; border-radius: 8px; font-size: 13px;
+    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
+    cursor: pointer; box-shadow: none;
+  }
+  .ask-opt-btn:hover { border-color: var(--accent); }
+  .ask-opt-btn.selected { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); color: var(--text); }
+  .ask-opt-desc { font-size: 11.5px; color: var(--muted); margin-top: 1px; padding-left: 2px; }
+  .ask-other { width: 100%; padding: 7px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); outline: none; }
+  .ask-other:focus { border-color: var(--accent); }
 
   /* --- Composer --- */
-  .composer { border-top: 1px solid var(--border); background: var(--bg); }
+  .composer { border-top: 1px solid var(--border); background: var(--bg); position: relative; }
+  /* Only on screen once the reader has left the tail and missed something. */
+  .jump {
+    position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; margin: 0 auto;
+    display: none; align-items: center; gap: 7px; width: max-content;
+    padding: 8px 15px; border-radius: 999px; border: none;
+    background: var(--accent); color: var(--accent-text);
+    font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md);
+  }
+  .jump.show { display: flex; }
+  .jump .chev { font-size: 15px; line-height: 1; }
   .composer .wrap { padding-top: 12px; padding-bottom: 18px; }
   .activity { display: flex; align-items: center; gap: 8px; height: 22px; padding-left: 4px; color: var(--muted); font-size: 12.5px; }
   .activity:empty { display: none; }
+
+  /* --- Plan panel --- */
+  /* The agent's todo list, kept above the input so the current step is always
+     in view. Collapsed to a single line by default; the list it hides is capped
+     in height so a long plan can never crowd out the conversation. */
+  .plan { margin-bottom: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
+  .plan-bar {
+    display: flex; align-items: center; gap: 9px; width: 100%;
+    padding: 9px 12px; font-size: 12.5px; text-align: left;
+  }
+  .plan-now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+  .plan.active .plan-now { color: var(--accent); font-weight: 500; }
+  .plan-count { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }
+  .plan-chev { flex: none; color: var(--faint); font-size: 15px; line-height: 1; transition: transform .15s ease; }
+  .plan.open .plan-chev { transform: rotate(90deg); }
+  @media (prefers-reduced-motion: reduce) { .plan-chev { transition: none; } }
+  .plan-list {
+    margin: 0; padding: 3px 12px 10px; list-style: none;
+    max-height: 33vh; overflow-y: auto; border-top: 1px solid var(--border);
+  }
+  .plan-item { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; font-size: 13px; }
+  .plan-mark { flex: none; width: 13px; text-align: center; color: var(--faint); }
+  .plan-item.in_progress .plan-mark, .plan-item.in_progress { color: var(--accent); }
+  .plan-item.in_progress { font-weight: 500; }
+  .plan-item.completed { color: var(--faint); text-decoration: line-through; }
+  .plan-item.completed .plan-mark { color: var(--ok); text-decoration: none; }
   .spinner {
     width: 11px; height: 11px; flex: none; border-radius: 50%;
     border: 1.5px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite;
@@ -385,7 +448,7 @@ exports.html = `<!DOCTYPE html>
     padding: 9px 9px 9px 16px; box-shadow: var(--shadow-sm);
   }
   .box:focus-within { border-color: var(--accent); }
-  .box textarea { flex: 1; border: 0; background: none; resize: none; outline: none; max-height: 200px; padding: 6px 0; }
+  .box textarea { flex: 1; border: 0; background: none; resize: none; outline: none; max-height: 200px; padding: 6px 0; font-size: 16px; }
   .send {
     width: 36px; height: 36px; border-radius: 11px; flex: none;
     background: var(--accent); color: var(--accent-text); font-size: 17px;
@@ -487,6 +550,11 @@ exports.html = `<!DOCTYPE html>
     box-shadow: var(--shadow-md); animation: rise .18s ease;
   }
   @keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
+  .toast-action {
+    margin-left: 10px; padding: 2px 10px; border-radius: 999px;
+    background: var(--bg); color: var(--text); border: none;
+    font-size: 13px; font-weight: 600; cursor: pointer;
+  }
 
   @media (max-width: 640px) {
     .wrap { padding: 0 16px; }
@@ -578,14 +646,25 @@ exports.html = `<!DOCTYPE html>
     </div>
   </div></div>
   <div class="messages" id="messages"><div class="wrap narrow" id="messages-inner"></div></div>
-  <div class="composer"><div class="wrap narrow">
-    <div class="activity" id="activity"></div>
-    <div class="box">
-      <textarea id="input" rows="1" placeholder="Message…"></textarea>
-      <button class="mic" id="mic" title="Dictate" aria-label="Dictate"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4zm6-4a6 6 0 0 1-5 5.92V20h3v2H8v-2h3v-3.08A6 6 0 0 1 6 11h2a4 4 0 0 0 8 0h2z"/></svg></button>
-      <button class="send" id="send" title="Send" aria-label="Send">&uarr;</button>
+  <div class="composer">
+    <button class="jump" id="jump"><span class="chev">&darr;</span> New messages</button>
+    <div class="wrap narrow">
+      <div class="plan" id="plan" hidden>
+        <button class="plan-bar" id="plan-bar" aria-expanded="false">
+          <span class="plan-now" id="plan-now"></span>
+          <span class="plan-count" id="plan-count"></span>
+          <span class="plan-chev" id="plan-chev">&rsaquo;</span>
+        </button>
+        <ul class="plan-list" id="plan-list" hidden></ul>
+      </div>
+      <div class="activity" id="activity"></div>
+      <div class="box">
+        <textarea id="input" rows="1" placeholder="Message…"></textarea>
+        <button class="mic" id="mic" title="Dictate" aria-label="Dictate"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4zm6-4a6 6 0 0 1-5 5.92V20h3v2H8v-2h3v-3.08A6 6 0 0 1 6 11h2a4 4 0 0 0 8 0h2z"/></svg></button>
+        <button class="send" id="send" title="Send" aria-label="Send">&uarr;</button>
+      </div>
     </div>
-  </div></div>
+  </div>
 </section>
 
 <script>
@@ -1327,6 +1406,65 @@ exports.html = `<!DOCTYPE html>
     box.hidden = false;
   }
 
+  // --- Plan panel ---
+  // The agent's own todo list, mirrored above the input so the step it is on is
+  // always in view. TodoWrite always writes the whole plan, so each call simply
+  // replaces what the panel shows; there is nothing to merge or diff. Collapsed
+  // to one line by default, and the line itself is the cue — it changes as the
+  // agent moves through the list.
+
+  var planOpen = false;   // sticky across updates, reset when a thread opens
+  var PLAN_MARKS = { completed: "\\u2713", in_progress: "\\u25b8", pending: "\\u2610" };
+
+  function renderTodos(todos) {
+    var box = $("plan");
+    if (!todos || !todos.length) { box.hidden = true; return; }
+
+    var done = 0, current = null, firstPending = null;
+    todos.forEach(function (t) {
+      if (t.status === "completed") done++;
+      else if (t.status === "in_progress" && !current) current = t;
+      else if (t.status === "pending" && !firstPending) firstPending = t;
+    });
+    var shown = current || firstPending;
+
+    // activeForm is the present-continuous wording the tool asks for, which is
+    // exactly what a status line wants; content is the fallback.
+    $("plan-now").textContent = shown ? (shown.activeForm || shown.content) : "Plan complete";
+    $("plan-count").textContent = done + "/" + todos.length;
+
+    var list = $("plan-list");
+    list.innerHTML = "";
+    todos.forEach(function (t) {
+      var li = el("li", "plan-item " + t.status);
+      li.appendChild(el("span", "plan-mark", PLAN_MARKS[t.status] || PLAN_MARKS.pending));
+      li.appendChild(el("span", null, t.content));
+      list.appendChild(li);
+    });
+
+    setPlanOpen(planOpen);
+    box.hidden = false;
+  }
+
+  function setPlanOpen(open) {
+    planOpen = open;
+    var box = $("plan");
+    var lit = box.querySelector(".plan-item.in_progress");
+    box.className = "plan" + (lit ? " active" : "") + (open ? " open" : "");
+    $("plan-list").hidden = !open;
+    $("plan-bar").setAttribute("aria-expanded", open ? "true" : "false");
+  }
+
+  /** The last plan the thread ever wrote, so reopening it days later still
+   *  shows where the work got to rather than an empty panel. */
+  function seedPlan(msgs) {
+    var last = null;
+    msgs.forEach(function (m) {
+      (m.content || []).forEach(function (b) { if (b.todos) last = b.todos; });
+    });
+    renderTodos(last);
+  }
+
   // --- Thread ---
   function openThread(thread) {
     activeThread = thread;
@@ -1335,6 +1473,8 @@ exports.html = `<!DOCTYPE html>
     $("thread-sub").textContent = shortPath(thread.repoPath, 30);
     $("thread-sub").title = thread.repoPath || "";
     renderContext(thread.context);
+    planOpen = false;
+    renderTodos(null);
     $("to-bot-label").textContent = threadBack === "jarvis" ? "Jarvis" : (activeBot ? activeBot.name : "Back");
     var av = $("thread-avatar");
     av.textContent = activeBot ? (activeBot.emoji || "\\u{1F916}") : "\\u{1F916}";
@@ -1363,6 +1503,7 @@ exports.html = `<!DOCTYPE html>
   function renderTranscript(msgs) {
     var box = $("messages-inner");
     box.innerHTML = "";
+    forceBottom();   // a freshly opened transcript always starts at its tail
     if (!msgs.length) {
       var e = el("div", "empty");
       e.appendChild(el("h3", null, "Say the first thing"));
@@ -1370,6 +1511,7 @@ exports.html = `<!DOCTYPE html>
       box.appendChild(e);
       return;
     }
+    seedPlan(msgs);
     msgs.forEach(function (m) {
       var content = startMessage(m.role === "user" ? "user" : "assistant");
       (m.content || []).forEach(function (b) {
@@ -1378,6 +1520,7 @@ exports.html = `<!DOCTYPE html>
         else if (b.type === "image_url") {
           var img = document.createElement("img");
           img.src = b.url; img.style.maxWidth = "100%"; img.style.borderRadius = "12px";
+          img.onload = scrollDown;   // an image finishing late grows the list under us
           content.appendChild(img);
         }
       });
@@ -1447,21 +1590,105 @@ exports.html = `<!DOCTYPE html>
     }
   }
 
+  var TOOL_PEEK = 200;   // how much of the input the collapsed one-liner carries
+
+  /** A chip's full text, laid out to be read: dense JSON gets indented, anything
+   *  else is shown as the agent wrote it. */
+  function toolFullText(summary) {
+    var t = summary.charAt(0);
+    if (t === "{" || t === "[") {
+      try { return JSON.stringify(JSON.parse(summary), null, 2); } catch (e) {}
+    }
+    return summary;
+  }
+
   function appendTool(content, name, input) {
     var chip = el("div", "tool");
     // Jarvis's own tools read better without the MCP plumbing in the name.
     chip.appendChild(el("b", null, name.replace(/^mcp__jarvis__/, "")));
     var summary = typeof input === "string" ? input : JSON.stringify(input || {});
-    chip.appendChild(el("span", null, summary.slice(0, 200)));
+    var text = el("span", "tool-text", summary.slice(0, TOOL_PEEK));
+    chip.appendChild(text);
+    chip.appendChild(el("span", "tool-chev", "\u203A"));
     content.appendChild(chip);
+
+    // The chip only becomes clickable when the one-liner is actually hiding
+    // something: text cut by the peek, newlines flattened into it, or an
+    // ellipsis from the overflow. Measured now that it is laid out.
+    var hidden = summary.length > TOOL_PEEK || summary.indexOf("\\n") >= 0
+      || text.scrollWidth > text.clientWidth + 1;
+    if (hidden) {
+      var open = false;
+      chip.className = "tool more";
+      chip.setAttribute("role", "button");
+      chip.setAttribute("tabindex", "0");
+      chip.setAttribute("aria-expanded", "false");
+      chip.title = "Show the full input";
+      var toggle = function () {
+        open = !open;
+        chip.className = "tool more" + (open ? " open" : "");
+        chip.setAttribute("aria-expanded", open ? "true" : "false");
+        chip.title = open ? "Hide the full input" : "Show the full input";
+        text.textContent = open ? toolFullText(summary) : summary.slice(0, TOOL_PEEK);
+      };
+      // Once open the text belongs to the reader: clicks land in it to select or
+      // scroll it, and the name and chevron are what close it again.
+      chip.onclick = function (ev) {
+        if (!open || !text.contains(ev.target)) toggle();
+      };
+      chip.onkeydown = function (ev) {
+        if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); toggle(); }
+      };
+    }
+
     scrollDown();
   }
 
-  function scrollDown() {
+  // --- Sticking to the tail ---
+  // The list follows new content only while the reader is already at the bottom.
+  // Scroll up to read something and the conversation stays where you put it,
+  // with a pill offering the way back down once it has moved on without you.
+  var stick = true;           // following the tail?
+  var missed = false;         // has anything arrived since we stopped following?
+  var SLACK = 64;             // px from the bottom that still counts as "at the bottom"
+
+  function atBottom() {
+    var m = $("messages");
+    return m.scrollHeight - m.scrollTop - m.clientHeight <= SLACK;
+  }
+
+  function pin() {
     var m = $("messages");
     m.scrollTop = m.scrollHeight;
   }
 
+  function renderJump() {
+    $("jump").classList.toggle("show", !stick && missed);
+  }
+
+  /** New content arrived: follow it, or note that the reader has missed it. */
+  function scrollDown() {
+    if (stick) pin();
+    else if (!missed) { missed = true; renderJump(); }
+  }
+
+  /** Go to the tail whatever the reader was doing — for the moments that mean
+   *  "show me the latest": opening a thread, sending, tapping the pill. */
+  function forceBottom() {
+    stick = true;
+    missed = false;
+    pin();
+    renderJump();
+  }
+
+  function watchScroll() {
+    var here = atBottom();
+    if (here === stick) return;
+    stick = here;
+    if (stick) missed = false;
+    renderJump();
+  }
+
   function showError(err) {
     var content = startMessage("error");
     appendText(content, err && err.message ? err.message : String(err));
@@ -1481,6 +1708,7 @@ exports.html = `<!DOCTYPE html>
   function sendText(text) {
     if (!text || !activeThread || state !== "idle") return;
     appendText(startMessage("user"), text);
+    forceBottom();   // your own message always brings you back down
     setState("starting");
     setActivity("Sending\u2026");
 
@@ -1610,6 +1838,7 @@ exports.html = `<!DOCTYPE html>
       case "tool_use":
         if (!liveBubble) liveBubble = startMessage("assistant");
         appendTool(liveBubble, data.tool_name, data.tool_input);
+        if (data.todos) renderTodos(data.todos);
         break;
 
       case "context":
@@ -1731,6 +1960,7 @@ exports.html = `<!DOCTYPE html>
   }
 
   function renderPermission(data) {
+    if (data.toolName === "AskUserQuestion") { renderAskUser(data); return; }
     var card = el("div", "perm");
     card.appendChild(el("div", "head", "Allow " + data.toolName + "?"));
     card.appendChild(el("pre", null, JSON.stringify(data.input, null, 2)));
@@ -1756,6 +1986,100 @@ exports.html = `<!DOCTYPE html>
     scrollDown();
   }
 
+  function renderAskUser(data) {
+    var input = data.input || {};
+    var questions = Array.isArray(input.questions) ? input.questions : [];
+    var answers = {}; // question text -> selected label(s)
+
+    var card = el("div", "perm");
+    card.appendChild(el("div", "head", "Questions"));
+
+    var qsDiv = el("div", "ask-questions");
+
+    questions.forEach(function (q, qi) {
+      answers[q.question] = q.multiSelect ? [] : null;
+
+      var qDiv = el("div", "ask-q");
+      qDiv.appendChild(el("div", "ask-q-text", q.question));
+
+      var optsDiv = el("div", "ask-opts");
+
+      (q.options || []).forEach(function (opt) {
+        var row = el("div");
+        var btn = el("button", "ask-opt-btn", opt.label);
+        btn.onclick = function () {
+          if (q.multiSelect) {
+            var arr = answers[q.question];
+            var idx = arr.indexOf(opt.label);
+            if (idx >= 0) { arr.splice(idx, 1); btn.classList.remove("selected"); }
+            else { arr.push(opt.label); btn.classList.add("selected"); }
+          } else {
+            answers[q.question] = opt.label;
+            optsDiv.querySelectorAll(".ask-opt-btn").forEach(function (b) { b.classList.remove("selected"); });
+            btn.classList.add("selected");
+          }
+        };
+        row.appendChild(btn);
+        if (opt.description) row.appendChild(el("div", "ask-opt-desc", opt.description));
+        optsDiv.appendChild(row);
+      });
+
+      var otherInput = el("input");
+      otherInput.type = "text";
+      otherInput.placeholder = "Other\u2026";
+      otherInput.className = "ask-other";
+      otherInput.oninput = function () {
+        var val = otherInput.value.trim();
+        if (q.multiSelect) {
+          // handled on submit
+        } else {
+          if (val) {
+            answers[q.question] = val;
+            optsDiv.querySelectorAll(".ask-opt-btn").forEach(function (b) { b.classList.remove("selected"); });
+          } else if (!answers[q.question] || typeof answers[q.question] === "string") {
+            answers[q.question] = null;
+          }
+        }
+      };
+      optsDiv.appendChild(otherInput);
+      qDiv.appendChild(optsDiv);
+      qsDiv.appendChild(qDiv);
+    });
+
+    card.appendChild(qsDiv);
+
+    var acts = el("div", "acts");
+    var submit = el("button", "btn primary", "Submit");
+    submit.onclick = function () {
+      // Collect "other" text inputs for multi-select questions
+      var qDivs = qsDiv.querySelectorAll(".ask-q");
+      questions.forEach(function (q, qi) {
+        if (q.multiSelect) {
+          var inp = qDivs[qi].querySelector(".ask-other");
+          var val = inp ? inp.value.trim() : "";
+          if (val && answers[q.question].indexOf(val) === -1) answers[q.question].push(val);
+        }
+      });
+      submit.disabled = true;
+      api("/sessions/" + encodeURIComponent(sessionId) + "/permission", {
+        method: "POST",
+        body: { toolUseID: data.toolUseID, answers: answers }
+      }).then(function () {
+        var summary = questions.map(function (q) {
+          var a = answers[q.question];
+          return Array.isArray(a) ? a.join(", ") : (a || "\u2014");
+        }).join(" \u00b7 ");
+        card.replaceWith(el("div", "note", summary));
+        pendingPerms = Math.max(0, pendingPerms - 1);
+        if (!pendingPerms && state === "running") setActivity("Thinking\u2026");
+      }).catch(showError);
+    };
+    acts.appendChild(submit);
+    card.appendChild(acts);
+    $("messages-inner").appendChild(card);
+    scrollDown();
+  }
+
   function finishTurn() {
     closeStream();
     liveBubble = null;
@@ -1924,6 +2248,70 @@ exports.html = `<!DOCTYPE html>
     });
   }
 
+  // IndexedDB helpers — save the raw audio before the API call so a failed
+  // transcription can be retried without re-recording.
+  var _dictDb = null;
+  function openDictationDb() {
+    if (_dictDb) return Promise.resolve(_dictDb);
+    return new Promise(function (resolve, reject) {
+      var req = indexedDB.open("dictation", 1);
+      req.onupgradeneeded = function () { req.result.createObjectStore("pending"); };
+      req.onsuccess = function () { _dictDb = req.result; resolve(_dictDb); };
+      req.onerror = function () { reject(req.error); };
+    });
+  }
+  function savePendingAudio(audio, mimeType) {
+    return openDictationDb().then(function (db) {
+      return new Promise(function (resolve, reject) {
+        var tx = db.transaction("pending", "readwrite");
+        tx.objectStore("pending").put({ audio: audio, mimeType: mimeType }, "clip");
+        tx.oncomplete = resolve;
+        tx.onerror = function () { reject(tx.error); };
+      });
+    }).catch(function () {}); // best-effort
+  }
+  function deletePendingAudio() {
+    return openDictationDb().then(function (db) {
+      return new Promise(function (resolve) {
+        var tx = db.transaction("pending", "readwrite");
+        tx.objectStore("pending").delete("clip");
+        tx.oncomplete = resolve;
+        tx.onerror = resolve;
+      });
+    }).catch(function () {});
+  }
+  function loadPendingAudio() {
+    return openDictationDb().then(function (db) {
+      return new Promise(function (resolve) {
+        var req = db.transaction("pending", "readonly").objectStore("pending").get("clip");
+        req.onsuccess = function () { resolve(req.result || null); };
+        req.onerror = function () { resolve(null); };
+      });
+    }).catch(function () { return null; });
+  }
+
+  function sendDictation(audio, mimeType, btn, textarea) {
+    return api("/dictate", { method: "POST", body: { audio: audio, mimeType: mimeType } })
+      .then(function (d) {
+        deletePendingAudio();
+        insertDictation(textarea, d.text);
+      }).catch(function (err) {
+        toast(err.message || "Dictation failed", {
+          label: "Retry",
+          fn: function () {
+            loadPendingAudio().then(function (saved) {
+              if (!saved) { toast("No saved clip to retry"); return; }
+              btn.classList.add("busy");
+              sendDictation(saved.audio, saved.mimeType, btn, textarea)
+                .then(function () { btn.classList.remove("busy"); });
+            });
+          },
+        });
+      }).then(function () {
+        btn.classList.remove("busy");
+      });
+  }
+
   function stopRecording() {
     var rec = recording;
     if (!rec) return;
@@ -1941,6 +2329,7 @@ exports.html = `<!DOCTYPE html>
     if (!window.isSecureContext) {
       toast("Dictation needs https or localhost"); return;
     }
+    deletePendingAudio();
     navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
       var mime = recordingMime();
       var recorder = mime ? new MediaRecorder(stream, { mimeType: mime }) : new MediaRecorder(stream);
@@ -1951,12 +2340,11 @@ exports.html = `<!DOCTYPE html>
         var blob = new Blob(chunks, { type: type });
         if (blob.size < 1000) { btn.classList.remove("busy"); return; }   // tapped twice by accident
         blobToBase64(blob).then(function (audio) {
-          return api("/dictate", { method: "POST", body: { audio: audio, mimeType: type } });
-        }).then(function (d) {
-          insertDictation(textarea, d.text);
+          return savePendingAudio(audio, type).then(function () {
+            return sendDictation(audio, type, btn, textarea);
+          });
         }).catch(function (err) {
           toast(err.message || "Dictation failed");
-        }).then(function () {
           btn.classList.remove("busy");
         });
       };
@@ -1977,12 +2365,19 @@ exports.html = `<!DOCTYPE html>
     };
   }
 
-  function toast(text) {
+  function toast(text, action) {
     var old = document.querySelector(".toast");
     if (old) old.remove();
     var t = el("div", "toast", text);
+    if (action) {
+      var btn = document.createElement("button");
+      btn.className = "toast-action";
+      btn.textContent = action.label;
+      btn.onclick = function () { t.remove(); action.fn(); };
+      t.appendChild(btn);
+    }
     document.body.appendChild(t);
-    setTimeout(function () { t.remove(); }, 2400);
+    setTimeout(function () { if (t.parentNode) t.remove(); }, action ? 7000 : 2400);
   }
 
   function copyText(text) {
@@ -2265,6 +2660,7 @@ exports.html = `<!DOCTYPE html>
   $("to-jarvis").onclick = function () { goJarvis(); };
   $("to-projects").onclick = function () { goHome(); };
   $("to-bot").onclick = function () { if (threadBack === "jarvis") goJarvis(); else goBotView(); };
+  $("plan-bar").onclick = function () { setPlanOpen(!planOpen); };
   $("ask-send").onclick = function () { askJarvis($("ask-input").value); };
   var ask = $("ask-input");
   ask.addEventListener("input", function () {
@@ -2278,10 +2674,16 @@ exports.html = `<!DOCTYPE html>
   wireMic($("ask-mic"), $("ask-input"));
   wireMic($("mic"), $("input"));
 
+  $("messages").addEventListener("scroll", watchScroll, { passive: true });
+  $("jump").onclick = forceBottom;
+  // The on-screen keyboard and rotation both shrink the list out from under us.
+  window.addEventListener("resize", function () { if (stick) pin(); });
+
   var input = $("input");
   input.addEventListener("input", function () {
     input.style.height = "auto";
     input.style.height = Math.min(input.scrollHeight, 200) + "px";
+    if (stick) pin();   // a growing composer eats into the list; hold the tail
   });
   input.addEventListener("keydown", function (ev) {
     if (ev.key === "Enter" && !ev.shiftKey) { ev.preventDefault(); if (state === "idle") send(); }

package/dist/dictation.js

@@ -21,15 +21,17 @@ const OPENAI_URL = "https://api.openai.com/v1/chat/completions";
 const CLEANUP_MODEL = "gpt-4o-mini";
 // Roughly two minutes of opus; anything longer is a mistake, not a message.
 const MAX_AUDIO_BYTES = 8 * 1024 * 1024;
-const CLEANUP_PROMPT = `You are an intent extraction engine for a voice assistant.
-The user will provide a messy, unedited voice transcript containing filler words, pauses, and self-corrections.
+const CLEANUP_PROMPT = `You are a voice transcription cleanup assistant.
+The user will provide a raw voice transcript. Your job is light editing only — preserve their exact words and phrasing as much as possible.
 
 Your task:
-1. Analyze the spoken words to find the user's ultimate intent.
-2. Completely remove filler words ("uh", "um", "like") and resolve self-corrections (e.g., "set a meeting for 5, no, make it 6 PM" becomes "6 PM").
-3. Output ONLY the final, polished instructions. Do not include introductory text, explanations, or quotes.
+1. Remove filler words ("uh", "um", "er", "like") and false starts.
+2. If the user spells out a word (e.g., "t-h-r-e-s-h-o-l-d"), replace the previous misspelled or unclear attempt with the correctly spelled word and drop the spelling itself.
+3. Resolve simple self-corrections (e.g., "delete the file, actually remove the folder" → "remove the folder").
+4. Apply light markdown formatting where it clearly fits: wrap code, file names, variable names, and commands in backticks; use a bullet list if the user enumerates multiple items.
+5. Output ONLY the cleaned transcript. No explanations, no quotes, no commentary.
 
-Keep the user's wording and voice where it is already clear; do not summarize, expand, or answer the request.`;
+Do not paraphrase, summarize, reorder, or interpret — just clean up the words they said.`;
 function dictationConfigured() {
     return {
         deepgram: Boolean(process.env.DEEPGRAM_API_KEY),

package/dist/server.js

@@ -221,7 +221,7 @@ async function handleRequest(req, res, availableAgents, workspaceCwd) {
                 return;
             }
             const body = await (0, server_common_1.readBody)(req);
-            const { toolUseID, approved, updatedInput } = body;
+            const { toolUseID, approved, updatedInput, answers } = body;
             if (!toolUseID) {
                 (0, server_common_1.jsonError)(res, 400, "toolUseID is required");
                 return;
@@ -232,9 +232,20 @@ async function handleRequest(req, res, availableAgents, workspaceCwd) {
                 if (pending) {
                     store.pendingPermissions.delete(toolUseID);
                     (0, server_common_1.notifyPermissionsChanged)();
-                    pending.resolve(approved
-                        ? { behavior: "allow", updatedInput: updatedInput ?? pending.input }
-                        : { behavior: "deny", message: "User denied" });
+                    if (pending.toolName === "AskUserQuestion" && answers) {
+                        const questions = pending.input?.questions ?? [];
+                        const lines = questions.map((q) => {
+                            const a = answers[q.question];
+                            const answer = Array.isArray(a) ? (a.length ? a.join(", ") : "(none selected)") : (a || "(no answer)");
+                            return `- ${q.question}: ${answer}`;
+                        });
+                        pending.resolve({ behavior: "deny", message: "User's answers:\n" + lines.join("\n") });
+                    }
+                    else {
+                        pending.resolve(approved
+                            ? { behavior: "allow", updatedInput: updatedInput ?? pending.input }
+                            : { behavior: "deny", message: "User denied" });
+                    }
                 }
             }
             else if (store.agent === "opencode" && store.sdkSessionId) {

package/dist/start-claude-code.js

@@ -332,6 +332,7 @@ function formatMessage(msg) {
                         type: "tool_use",
                         tool_name: block.name,
                         tool_input: formatToolInput(block.name, block.input),
+                        ...todoList(block.name, block.input),
                     });
                 }
             }
@@ -445,7 +446,7 @@ async function loadTranscript(sessionId, cwd) {
                             catch {
                                 tool_input = JSON.stringify(b.input) ?? "";
                             }
-                            blocks.push({ type: "tool_use", tool_name: b.name, tool_input });
+                            blocks.push({ type: "tool_use", tool_name: b.name, tool_input, ...todoList(b.name, b.input) });
                         }
                     }
                 }
@@ -537,6 +538,25 @@ async function listSessions(cwd) {
         return [];
     }
 }
+/**
+ * The plan panel needs the list as a list, not as the one-line summary the tool
+ * chip shows. Carried as a separate field so the chip keeps rendering unchanged,
+ * and spread in so every other tool's payload stays exactly as it was.
+ */
+function todoList(toolName, input) {
+    if (toolName !== "TodoWrite")
+        return {};
+    const todos = input.todos;
+    if (!Array.isArray(todos))
+        return {};
+    return {
+        todos: todos.map((t) => ({
+            content: String(t?.content ?? ""),
+            status: String(t?.status ?? "pending"),
+            activeForm: String(t?.activeForm ?? ""),
+        })),
+    };
+}
 function formatToolInput(toolName, input) {
     switch (toolName) {
         case "Bash":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jarvis-hq",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Jarvis — a persistent AI engineering partner. One entry point from any device; project-aware handoff and delegation to Claude Code running on your machine.",
   "main": "dist/index.js",
   "bin": {