jarvis-hq 0.0.6 → 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 {
@@ -383,10 +396,46 @@ exports.html = `<!DOCTYPE html>
   .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;
@@ -399,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;
@@ -597,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>
@@ -1346,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;
@@ -1354,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}";
@@ -1382,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"));
@@ -1389,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) {
@@ -1397,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);
         }
       });
@@ -1466,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));
@@ -1500,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");
 
@@ -1629,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":
@@ -2450,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 () {
@@ -2463,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/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.6",
+  "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": {