kaizen-agent 1.43.1 → 1.43.3

package/web/board/rich.ts

@@ -0,0 +1,160 @@
+import { esc } from "./dom.ts";
+import { md } from "./markdown.ts";
+
+// The card note box formats as you type: a contenteditable editor over a hidden
+// textarea that stays the field's value, so drafts, dictation and send are unchanged.
+// The editor is turned back into markdown on every edit; typing a markdown pattern
+// (`**b**`, `` `c` ``, `- `, `1. `, `# `) re-renders the editor with md().
+
+const ZW = /\u200b/g;
+// Editor DOM to markdown. Paragraph blocks are separated by a blank line, list items
+// by a newline, so md() renders them back as the same blocks.
+export function toMd(root) {
+  const inl = (n) => {
+    // pre-wrap: a soft break typed in Chrome is a "\n" in the text.
+    if (n.nodeType === 3)
+      return n.textContent
+        .replace(ZW, "")
+        .replace(/\u00a0/g, " ")
+        .replace(/\n/g, "  \n");
+    if (n.nodeType !== 1) return "";
+    const t = n.nodeName.toLowerCase(),
+      kids = () => [...n.childNodes].map(inl).join("");
+    if (t === "br") return "  \n";
+    if (t === "b" || t === "strong") return ((s) => (s.trim() ? `**${s}**` : s))(kids());
+    if (t === "i" || t === "em") return ((s) => (s.trim() ? `*${s}*` : s))(kids());
+    if (t === "code") return ((s) => (s ? "`" + s + "`" : s))(n.textContent.replace(ZW, ""));
+    if (t === "img") return `![${n.getAttribute("alt") || ""}](${n.getAttribute("src")})`;
+    if (t === "a") {
+      const img = [...n.childNodes].find((c) => c.nodeName.toLowerCase() === "img");
+      return img ? inl(img) : `[${kids()}](${n.getAttribute("href")})`;
+    }
+    return kids();
+  };
+  const out = [];
+  let buf = "";
+  const flush = () => {
+    if (buf.trim()) out.push(buf.replace(/^\n+|\s*\n+$/g, ""));
+    buf = "";
+  };
+  for (const n of root.childNodes) {
+    const t = n.nodeType === 1 ? n.nodeName.toLowerCase() : "";
+    if (/^h[1-6]$/.test(t)) {
+      flush();
+      out.push("#".repeat(+t[1]) + " " + inl(n).trim());
+    } else if (t === "ul" || t === "ol") {
+      flush();
+      const lis = [...n.childNodes].filter((c) => c.nodeName.toLowerCase() === "li");
+      out.push(lis.map((li, i) => (t === "ol" ? `${i + 1}. ` : "- ") + inl(li).trim()).join("\n"));
+    } else if (t === "pre") {
+      flush();
+      out.push("```\n" + n.textContent + "\n```");
+    } else if (t === "p" || t === "div") {
+      flush();
+      buf = toMd(n);
+      flush();
+    } else buf += inl(n);
+  }
+  flush();
+  return out.join("\n\n");
+}
+
+// A line just typed into a markdown pattern md() would format. Text already inside
+// code or bold is not raw markdown: a code span showing `**` must not match.
+const INL = /\*\*[^*]+\*\*|`[^`]+`|(^|[^*])\*[^*\s][^*]*\*(?!\*)/;
+const typed = (line) => {
+  const raw = [];
+  const walk = (n) => {
+    if (n.nodeType === 3) raw.push(n.textContent.replace(/\u00a0/g, " "));
+    else if (!/^(CODE|B|STRONG|I|EM)$/.test(n.nodeName)) n.childNodes.forEach(walk);
+  };
+  walk(line);
+  const txt = raw.join("");
+  return (
+    INL.test(txt) ||
+    (!/^(LI|H\d)$/.test(line.nodeName) && /^\s*([-*]|\d+\.|#{1,6})\s/.test(line.textContent.replace(/\u00a0/g, " ")))
+  );
+};
+
+export function rich(ta) {
+  const ed = document.createElement("div");
+  ed.className = "rich";
+  ed.contentEditable = "true";
+  ed.setAttribute("role", "textbox");
+  ed.setAttribute("aria-multiline", "true");
+  ed.dataset.ph = ta.placeholder;
+  ta.hidden = true;
+  ta.after(ed);
+  // Top-level lines, list items counted one each: where the caret goes back to.
+  const lines = () => [...ed.querySelectorAll(":scope > :not(ul):not(ol), :scope > ul > li, :scope > ol > li")];
+  const render = (src) => {
+    // An empty item or heading needs a <br> to hold the caret.
+    ed.innerHTML = md(src).replace(/<(li|h\d)><\/\1>/g, "<$1><br></$1>");
+    for (const l of lines()) {
+      const last = l.lastChild;
+      if (last && last.nodeType === 1 && /^(B|I|CODE|A)$/.test(last.nodeName)) l.append("\u200b");
+    }
+  };
+  const caretAt = (el) => {
+    const r = document.createRange();
+    r.selectNodeContents(el || ed);
+    r.collapse(false);
+    const s = getSelection();
+    s.removeAllRanges();
+    s.addRange(r);
+  };
+  let own = false;
+  const sync = () => {
+    own = true;
+    ta.value = toMd(ed);
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+    own = false;
+  };
+  ed.addEventListener("input", () => {
+    const s = getSelection();
+    const all = lines();
+    const i = s.rangeCount ? all.findIndex((l) => l.contains(s.anchorNode)) : -1;
+    const line = all[i] || (s.anchorNode && s.anchorNode.parentNode === ed ? ed : null);
+    sync();
+    // Emptied: leave no stray <br>, so the placeholder shows again.
+    if (!ta.value.trim() && !ed.querySelector("img")) ed.replaceChildren();
+    else if (line && typed(line)) {
+      // ponytail: whole-editor re-render, caret to the end of the same line; per-line patching if notes grow long.
+      const at = i < 0 ? 0 : i;
+      render(ta.value);
+      caretAt(lines()[at]);
+    }
+  });
+  // Dictation or a restored draft changed the value: show it.
+  ta.addEventListener("input", () => {
+    if (own) return;
+    render(ta.value);
+    if (document.activeElement === ed) caretAt(null);
+  });
+  ed.addEventListener("keydown", (e) => {
+    const mod = e.ctrlKey || e.metaKey;
+    if (mod && e.key.toLowerCase() === "b") {
+      e.preventDefault();
+      document.execCommand("bold");
+    } else if (mod && e.key.toLowerCase() === "e") {
+      e.preventDefault();
+      const t = String(getSelection());
+      if (t) document.execCommand("insertHTML", false, `<code>${esc(t)}</code>\u200b`);
+    } else if (e.key === "Enter" && e.shiftKey) {
+      e.preventDefault();
+      // A new item in a list or after a heading; a soft line break in a paragraph.
+      const n = getSelection().anchorNode;
+      const el = n && (n.nodeType === 1 ? n : n.parentElement);
+      document.execCommand(el && el.closest("li,h1,h2,h3,h4,h5,h6") ? "insertParagraph" : "insertLineBreak");
+    }
+  });
+  // Files are handled by the caller; text comes in plain, never as foreign HTML.
+  ed.addEventListener("paste", (e) => {
+    if ([...e.clipboardData.items].some((it) => it.kind === "file")) return;
+    const t = e.clipboardData.getData("text/plain");
+    e.preventDefault();
+    if (t) document.execCommand("insertText", false, t);
+  });
+  if (ta.value) render(ta.value);
+  return ed;
+}

package/web/board/terms.ts

@@ -29,12 +29,18 @@ const save = () => {
 // key -> its tile and the function that unmounts its terminal.
 const tiles = new Map<string, { el: HTMLElement; off: (() => void) | null }>();
 let showing = false;
+// A phone shows one terminal at a time, picked from tabs: stacked, each terminal took every
+// swipe and the page could only be scrolled by its thin headers. The pick is per visit.
+// Made on first show, so importing this module needs no window.
+let phone: MediaQueryList | null = null,
+  pick: string | null = null;
 
 // The header: run name - project name. A run's name is its id without the date, as card chips name runs.
 const nameOf = (c) =>
   c.kind === "run"
     ? String(c.id || c.text).replace(/^\d{4}-\d\d-\d\d-/, "").replace(/-/g, " ")
     : String(c.text).split("\n")[0].slice(0, 80);
+const tst = (c) => (!c.pty.alive ? "ended" : c.pty.asking ? "asking" : "running");
 const projOf = (c) => String(c.where || "").split(/[\\/]/).filter(Boolean).pop() || c.where || "";
 // One card per session; the newest card wins a shared key.
 function sessions() {
@@ -52,6 +58,7 @@ export function termsStop() {
 
 export function openTerms() {
   showing = true;
+  if (!phone) (phone = matchMedia("(max-width:640px)")).onchange = () => showing && openTerms();
   // A /state tick mid-drag would rebuild the handle being dragged.
   if (document.body.classList.contains("tdrag")) return;
   const box = $("terms"),
@@ -68,6 +75,8 @@ export function openTerms() {
   const keys = [...all.keys()].filter((k) => !lay.hidden.includes(k)).sort((a, b) => ended(a) - ended(b) || rank(a) - rank(b));
   for (const k of keys) if (!lay.order.includes(k)) lay.order.push(k);
   if (lay.max && !keys.includes(lay.max)) lay.max = null;
+  // The one tile showing: on a phone the tab picked (the first by default), else the maximised one.
+  const one = phone.matches ? (pick && keys.includes(pick) ? pick : keys[0]) : lay.max;
   let grid = box.querySelector<HTMLElement>(".tgrid"),
     bar = box.querySelector<HTMLElement>(".tbar");
   if (!grid) {
@@ -77,7 +86,15 @@ export function openTerms() {
   }
   // An ended session closed with × has nothing to come back to: no chip for it.
   const hid = [...all.keys()].filter((k) => lay.hidden.includes(k) && all.get(k).pty.alive);
-  bar!.innerHTML = html`<span class="bar" role="group" aria-label="Layout">${MODES.map(([v, l]) => html`<button data-mode="${v}" class="${lay.mode === v ? "on" : ""}" aria-pressed="${String(lay.mode === v)}">${l}</button>`)}</span>${hid.length ? html`<span class="dim">Hidden</span>${hid.map((k) => html`<button class="chip" data-show="${k}" title="Show this terminal">${ico("plus")}${nameOf(all.get(k))} - ${projOf(all.get(k))}</button>`)}` : ""}`.s;
+  bar!.innerHTML = html`<span class="bar" role="group" aria-label="Layout">${MODES.map(([v, l]) => html`<button data-mode="${v}" class="${lay.mode === v ? "on" : ""}" aria-pressed="${String(lay.mode === v)}">${l}</button>`)}</span>${hid.length ? html`<span class="dim">Hidden</span>${hid.map((k) => html`<button class="chip" data-show="${k}" title="Show this terminal">${ico("plus")}${nameOf(all.get(k))} - ${projOf(all.get(k))}</button>`)}` : ""}${phone.matches && keys.length > 1 ? html`<span class="ttabs" role="group" aria-label="Terminals">${keys.map((k) => html`<button class="${k === one ? "on" : ""}" data-pick="${k}" aria-pressed="${String(k === one)}"><span class="tdot ${tst(all.get(k))}"></span>${nameOf(all.get(k))} - ${projOf(all.get(k))}</button>`)}</span>` : ""}`.s;
+  bar!.querySelectorAll<HTMLElement>("[data-pick]").forEach(
+    (b) =>
+      (b.onclick = () => {
+        pick = b.dataset.pick!;
+        openTerms();
+      }),
+  );
+  bar!.querySelector(".ttabs .on")?.scrollIntoView({ block: "nearest", inline: "nearest" });
   bar!.querySelectorAll<HTMLElement>("[data-mode]").forEach(
     (b) =>
       (b.onclick = () => {
@@ -118,24 +135,24 @@ export function openTerms() {
       mount(k, t);
       wire(el);
     }
-    const st = !c.pty.alive ? "ended" : c.pty.asking ? "asking" : "running",
+    const st = tst(c),
       off = st === "ended";
     const hd = t.el.querySelector("header")!;
     hd.title = (c.kind === "run" ? c.id : c.text) + " · " + c.where;
     // An ended run can be resumed from here; an idea whose agent ended has no run to resume.
     hd.innerHTML = html`<span class="tdot ${st}" role="img" title="${st}" aria-label="${st}"></span><b>${nameOf(c)} - ${projOf(c)}</b>${off ? html`<span class="tend">ended</span>` : ""}<span class="sp"></span>${off && c.kind === "run" ? html`<button class="btn sm" data-a="resume" title="Continue this run's agent">Resume</button>` : ""}<button class="ib sm" data-a="card" title="Open card" aria-label="Open card">${ico("open")}</button><button class="ib sm" data-a="max" title="${lay.max === k ? "Restore" : "Maximise"}" aria-label="${lay.max === k ? "Restore" : "Maximise"}">${ico(lay.max === k ? "min" : "max")}</button><button class="ib sm" data-a="hide" title="${off ? "Close" : "Hide"}" aria-label="${off ? "Close" : "Hide"}">${ico("close")}</button>`.s;
     t.el.classList.toggle("ended", off);
-    t.el.classList.toggle("off", !!lay.max && lay.max !== k);
+    t.el.classList.toggle("off", !!one && one !== k);
     t.el.style.gridColumn = "";
     grid.append(t.el); // in order
   }
   // Grid is √n, the last tile spanning what its row leaves empty; side by side is one row, stacked one column.
-  const n = lay.max ? 1 : keys.length,
+  const n = one ? 1 : keys.length,
     cols = lay.mode === "cols" ? n : lay.mode === "rows" ? 1 : Math.ceil(Math.sqrt(n)),
     rows = Math.ceil(n / cols);
   // The column where the last row's tile starts spanning; borders right of it are not inner ones there.
   let spanFrom = cols;
-  if (!lay.max && cols * rows > n) {
+  if (!one && cols * rows > n) {
     tiles.get(keys[keys.length - 1])!.el.style.gridColumn = `span ${cols * rows - n + 1}`;
     spanFrom = n - (rows - 1) * cols - 1;
   }
@@ -143,7 +160,7 @@ export function openTerms() {
     sz = lay.sizes[shape];
   const c = sz?.c?.length === cols ? sz.c : Array(cols).fill(1),
     r = sz?.r?.length === rows ? sz.r : Array(rows).fill(1);
-  layout(grid, c, r, shape, spanFrom);
+  layout(grid, c, r, shape, spanFrom, !one);
 }
 
 function mount(k, t) {
@@ -177,7 +194,8 @@ function wire(el: HTMLElement) {
     openTerms();
   };
   el.querySelector("header")!.ondblclick = (e) => {
-    if ((e.target as HTMLElement).closest("button")) return;
+    // A phone shows one tile anyway: a double-tap there would only leave desktop maximised.
+    if ((e.target as HTMLElement).closest("button") || phone?.matches) return;
     lay.max = lay.max === k ? null : k;
     save();
     openTerms();
@@ -215,7 +233,7 @@ const at = (tr: number[], i: number) => {
     S = tr.slice(0, i + 1).reduce((a, b) => a + b, 0);
   return `calc((100% - ${(tr.length - 1) * GAP}px) * ${S / F} + ${i * GAP + GAP / 2}px)`;
 };
-function layout(grid: HTMLElement, c: number[], r: number[], shape: string, spanFrom: number) {
+function layout(grid: HTMLElement, c: number[], r: number[], shape: string, spanFrom: number, splits: boolean) {
   grid.querySelectorAll(".tsplit").forEach((s) => s.remove());
   const place = () => {
     grid.style.gridTemplateColumns = c.map((x) => x + "fr").join(" ");
@@ -227,7 +245,7 @@ function layout(grid: HTMLElement, c: number[], r: number[], shape: string, span
       h.style.bottom = i >= spanFrom ? `calc(100% - ${at(r, r.length - 2)} + ${GAP / 2}px)` : "0px";
     });
   };
-  if (!lay.max)
+  if (splits)
     for (const [axis, tr] of [["c", c], ["r", r]] as const)
       for (let i = 0; i < tr.length - 1; i++) {
         const h = document.createElement("div");

package/web/board.html

@@ -240,7 +240,7 @@ dialog.kz{border:0;padding:0;background:none;width:min(480px,calc(100vw - 32px))
 aside.wide{width:100%;border-left:0}#pbody:has(.term){display:flex;flex-direction:column}#pbody .term{flex:1;min-height:0;min-height:320px;background:var(--bg);border-radius:var(--r-s)}#pbody .term .xterm{height:100%;padding:4px}#pbody .term .xterm-viewport{background:transparent!important}.termkeys{padding:6px 0}.termkeys button{height:52px;padding:0;border:1px solid var(--line);border-bottom-width:4px;border-radius:10px;background:var(--bg-2);color:var(--ink-hi);font:600 17px var(--mono);touch-action:manipulation}.termkeys button:active{transform:translateY(2px);border-bottom-width:2px;background:var(--hover)}.termkeys button.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.keygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.ctrlpad{margin-bottom:8px}.ctrlpad div{display:flex;gap:4px;margin-bottom:5px}.ctrlpad div:nth-child(2){padding:0 5%}.ctrlpad div:nth-child(3){padding:0 10%}.ctrlpad button{flex:1;min-width:0;height:44px;font-size:15px}.termkeys [hidden]{display:none}.keytop{display:flex;gap:8px;margin-bottom:6px}.keytop button{flex:1;height:30px;border-bottom-width:1px;font-size:14px}
 .desc{border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:14px}.desc h3{margin-top:14px}
 .chat{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}.msg{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--bg)}.msg time{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}.msg p:last-child{margin-bottom:0}.msg img{max-width:100%;max-height:260px;border-radius:var(--r-s);display:block;margin:4px 0}
-.notes .tools{display:flex;gap:6px;align-items:center}.notes .tools span{flex:1;font-size:11px;color:var(--dim)}.notes .att{font-size:11px;color:var(--dim)}
+.notes .tools{display:flex;gap:6px;align-items:center}.notes .tools span{flex:1;font-size:11px;color:var(--dim)}.notes .att{font-size:11px;color:var(--dim)}.notes .rich{min-height:160px;max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;background:var(--bg-2);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}.notes .rich:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.notes .rich:empty::before{content:attr(data-ph);color:var(--dim)}.notes .rich>:first-child{margin-top:0}
 .inl pre.files{margin:0;max-height:140px;overflow:auto;font:12px/1.5 var(--mono);color:var(--dim)}
 .inl.fix{margin-top:16px}.inl.fix label{display:flex;gap:8px;align-items:baseline;font-size:13px;cursor:pointer}.inl.fix label.off{color:var(--dim);cursor:default}.inl.fix label.done span{text-decoration:line-through}.inl.fix input{flex:none;width:auto;margin:0;accent-color:var(--accent);position:relative;top:2px}
 .inl.qa{max-height:60vh;overflow:auto}.inl.qa fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.inl.qa legend{font-size:13px;font-weight:500;padding:0;margin-bottom:4px}.inl.qa label{display:flex;gap:8px;align-items:baseline;font-size:13px;cursor:pointer}.inl.qa label input{flex:none;width:auto;margin:0;accent-color:var(--accent);position:relative;top:2px}
@@ -283,8 +283,9 @@ body.termv #terms{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px
 .tsplit{position:absolute;z-index:2;touch-action:none}.tsplit.c{top:0;width:10px;margin-left:-5px;cursor:col-resize}.tsplit.r{left:0;right:0;height:10px;margin-top:-5px;cursor:row-resize}.tsplit:hover,.tdrag .tsplit:active{background:color-mix(in srgb,var(--accent) 35%,transparent)}
 body.tdrag{user-select:none}body.tdrag .tile{pointer-events:none}
 @media(max-width:900px){body.termv #terms{padding-inline:16px}}
-/* A phone has no room for a grid: tiles stack, each most of a screen tall, and the splits go */
-@media(max-width:640px){.tbar .bar{display:none}.tgrid{display:flex;flex-direction:column;overflow:auto}.tile{flex:none;height:70vh}.tile.off{display:none}.tsplit{display:none}}
+/* A phone has no room for a grid or a stack: one terminal fills the page, and tabs above pick which */
+.ttabs{display:none}
+@media(max-width:640px){.tbar .bar,.tile [data-a=max],.tsplit{display:none}.ttabs{display:flex;order:-1;flex:1 0 100%;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none}.ttabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;color:var(--dim);font:inherit;font-size:12px;white-space:nowrap}.ttabs button.on{color:var(--ink);background:var(--hover);border-color:var(--accent)}.tgrid{display:flex;flex-direction:column}.tile{flex:1}.tile.off{display:none}}
 aside.docked{position:static;z-index:auto;flex:1;min-height:0;width:auto;transform:none;visibility:visible;transition:none;box-shadow:none;border:0;background:none}
 aside.docked>header,aside.docked>.body{padding-inline:28px}
 aside.docked>header{border-bottom:0;padding-top:28px;padding-bottom:12px}