@galda/cli 0.10.49 → 0.10.50

package/app/index.html

@@ -472,7 +472,17 @@
      scoped here, since every other .qsub stays a one-liner. */
   .replynote{white-space:normal;overflow:visible;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
   .replynote .qchips{margin-top:6px}
-  .replynote .txr.note .m{color:var(--ink3)}
+  /* The .txr You/Claude rows are styled by `.redesign .txr` — which the See-all card
+     (.sa-item.redesign) provides, but the goal-detail overlay and review dialog do NOT.
+     There the same note rendered as unstyled run-in black text ("Youこんにちは" with no
+     gap/weight — Masa 2026-07-24 "弾"). Scope the row layout to .replynote too so the
+     reply thread reads the same wherever its box lives. */
+  .replynote .txr{display:flex;gap:12px;padding:5px 0;font-size:13px;line-height:1.55;align-items:baseline}
+  .replynote .txr .w{flex:0 0 46px;font-size:11px;color:var(--ink3)}
+  .replynote .txr.you .w,.replynote .txr.cl .w{color:var(--ink);font-weight:600}
+  .replynote .txr .m{flex:1;min-width:0;color:var(--ink2)}
+  .replynote .txr.cl .m{color:var(--ink)}
+  .replynote .txr.note .m{font-family:var(--mono);font-size:12px;color:var(--ink3)}
   .ob-unsent{color:rgb(var(--danger-rgb));cursor:pointer}
   [data-oresend]{cursor:pointer}
   .chip2{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;padding:2px 7px;border-radius:6px;border:1px solid var(--hair2);color:var(--ink3);flex:0 0 auto}
@@ -2283,7 +2293,7 @@
   #fsRoot .trow .st{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--hair2);flex:0 0 13px;position:relative;top:1px} /* top:1px = optical nudge so the whole status column (To Do/Doing/Failed/Done) centres on the row text, not the line-box (Masa 2026-07-24, board=C) */
   /* Doing marker = a broken green ring that spins (pattern B · flagship #316). Running only —
      .bad (failed) / .int (paused) stay static: no dead motion (DESIGN-RULES §5.5). Reuses @keyframes spin. */
-  #fsRoot .trow .st.run{border-color:var(--green);border-top-color:transparent;background:none;box-shadow:0 0 6px color-mix(in srgb,var(--green) 40%,transparent);animation:spin 1.8s linear infinite}
+  #fsRoot .trow .st.run{border-color:var(--green);border-top-color:transparent;background:none;box-shadow:0 0 6px color-mix(in srgb,var(--green) 40%,transparent);animation:spin 1.8s linear infinite;animation-delay:var(--spd,0ms)} /* --spd = wall-clock phase (set in render()) so a re-created board marker doesn't restart the spin at 0deg */
   #fsRoot .trow .st.run.bad{border-color:var(--danger);background:radial-gradient(circle,rgba(var(--danger-rgb),.42),transparent 70%);animation:none;box-shadow:none}
   #fsRoot .trow .st.run.int{border-color:var(--amber);background:radial-gradient(circle,rgba(var(--amber-rgb),.4),transparent 70%);animation:none;box-shadow:none}
   @media (prefers-reduced-motion:reduce){#fsRoot .trow .st.run{animation:none}}
@@ -6195,6 +6205,11 @@ function renderFlagship(){
   if (state.layout !== 'flagship') return;
   const root = $('fsRoot'); if (!root) return;
   root.dataset.rv = String(fsUI.rv);
+  // Wall-clock phase for the spinning markers: any ring re-created this render (the board
+  // re-renders often on progress %) starts at the angle a continuous one would be at now,
+  // instead of snapping back to 0deg — no "jump". The rail ring is guarded separately and
+  // doesn't read --spd, so changing it here can't disturb the persistent rail ring. (Masa 2026-07-24)
+  root.style.setProperty('--spd', (-(Date.now() % 1800)) + 'ms');
   renderFsRail(); renderFsFeed(); renderFsLane();
 }
 function renderFsRail(){
@@ -6269,6 +6284,14 @@ function fsActiveContext(){
 // Per-project last non-empty center feed — the whiteout guard (see below): keeps
 // what the user was looking at when a render pass momentarily produces no lines.
 const _fsLastFeed = {};
+// H-CENTERLANE decision 1: pure merge-sort of timed HTML blocks (the focused task's
+// activity block + each chat turn) so the center lane renders in the order things
+// actually happened. Stable sort (spec-guaranteed since ES2019) keeps same-ts blocks
+// in their original relative order. Pure/no DOM — covered directly in
+// engine/test/center-lane-timeline.test.mjs.
+function fsMergeTimelineBlocks(blocks){
+  return [...blocks].sort((a, b) => a.ts - b.ts).map((b) => b.html).join('');
+}
 function renderFsFeed(){
   if (state.layout !== 'flagship') return;
   const feed = $('fsFeed'); if (!feed) return;
@@ -6313,7 +6336,12 @@ function renderFsFeed(){
     } else { nd.hidden = true; nd.innerHTML = ''; }
   }
   let html = '';
+  // H-CENTERLANE decision 1: the focused task's activity block is anchored at its
+  // startedAt so it can be merge-sorted against chat turns below (state.act carries
+  // no per-line timestamp, so the whole block — not each line — is the sort unit).
+  let focusTs = 0;
   if (focus) {
+    focusTs = focus.startedAt ? Date.parse(focus.startedAt) : 0;
     const lines = state.act[focus.id] ?? [];
     const lineLimit = fsUI.logOpen.has(focus.id) || focus.status === 'running' || ['running', 'partial'].includes(goal?.status) ? 1000 : 80;
     html += lines.slice(-lineLimit).map(fsFeedRow).join('');
@@ -6380,29 +6408,39 @@ function renderFsFeed(){
   // whole-feed re-render (SSE act events) can't drop them. Order per turn:
   // You → (mark, if it became a task) and, for a reply, speaker line → reply.
   const turns = (state.chatTurns[state.active] || []).slice(-40);
-  let chatHtml = '';
+  // H-CENTERLANE decision 1: each turn becomes its own timed block (ts, html) so it
+  // can be merge-sorted against the focused task's activity block below, instead of
+  // always rendering as one chat block stapled after the task feed regardless of
+  // when either actually happened.
+  const chatBlocks = [];
   for (const turn of turns) {
+    let t = '';
     if (turn.role === 'you') {
-      chatHtml += `<div class="cc-you"><span class="cy-n">You</span><div class="cy-t">${esc(turn.text)}</div></div>`;
+      t += `<div class="cc-you"><span class="cy-n">You</span><div class="cy-t">${esc(turn.text)}</div></div>`;
       if (turn.markGoalId != null && !turn.undone) {
         const mg = state.goals.find((x) => x.id === turn.markGoalId);
         const n = mg ? goalReviewNumber({ goal: mg, tasks: state.tasks }) : turn.markGoalId;
-        chatHtml += `<div class="cc-mark"><span class="cm-ar">→</span><span class="cm-t">Added to To Do</span><span class="cm-no">#${n}</span><button class="cm-undo" type="button" data-ccundo="${turn.markGoalId}">Undo</button></div>`;
+        t += `<div class="cc-mark"><span class="cm-ar">→</span><span class="cm-t">Added to To Do</span><span class="cm-no">#${n}</span><button class="cm-undo" type="button" data-ccundo="${turn.markGoalId}">Undo</button></div>`;
       }
     } else { // Claude Code reply — speaker line first (You → speaker → reply), then the text
       const app = connectedAppMeta(turn.agent);
-      chatHtml += `<div class="cc-who">${app.icon}<span class="cs-n">${esc(app.label)}</span></div>`;
+      t += `<div class="cc-who">${app.icon}<span class="cs-n">${esc(app.label)}</span></div>`;
       const shown = esc((turn.text || '').slice(0, turn.revealed || 0));
-      chatHtml += turn.done
+      t += turn.done
         ? `<div class="cc-say">${shown}</div>`
         : `<div class="cc-say"><span id="ccTyping">${shown}</span><span class="cc-caret"></span></div>`;
     }
+    chatBlocks.push({ ts: turn.ts ?? 0, html: t });
   }
   const pgoals = state.goals.filter((g) => g.projectId === state.active);
   const ptasks = state.tasks.filter((t) => t.projectId === state.active);
   const hasWork = pgoals.length > 0 || ptasks.length > 0 || turns.length > 0;
-  // task feed (with its own speaker line) → conversation turns → question (bottom)
-  let out = html + chatHtml + askHtml;
+  // H-CENTERLANE decision 1: interleave the focused task's activity block with the
+  // chat turns in the order they actually happened (stable sort keeps same-ts items
+  // in their original relative order); the question card(s) stay pinned at the very
+  // end (H18/H19 — a pending question must never be lost mid-scroll).
+  const timelineBlocks = html ? [{ ts: focusTs, html }, ...chatBlocks] : chatBlocks;
+  let out = fsMergeTimelineBlocks(timelineBlocks) + askHtml;
   if (out) _fsLastFeed[state.active] = out;
   else if (hasWork) out = _fsLastFeed[state.active] || `<div class="cc-c">⎿  ${esc(running.length ? 'working…' : 'no active task')}</div>`;
   $('fsRoot').classList.toggle('clawdhero', !hasWork);
@@ -6819,7 +6857,10 @@ function fsBucketTodo(){
     needsInput: pgoals.filter((g) => g.status === 'needsInput'), // a clarifying question is waiting on the user (board's "Needs you")
     reviewGoals: pgoals.filter((g) => g.status === 'review'),
     queued: list.filter((t) => t.status === 'queued' && !t.reply).sort(byQueue),
-    doneAll: list.filter((t) => ['done', 'skipped'].includes(t.status) && !closedGoalIds.has(t.goalId)).sort((a, b) => b.num - a.num),
+    // A reply task's completion is already visible inline in the center-lane timeline
+    // (H-CENTERLANE decision 3) — showing it again as an independent Done row is the
+    // same event twice. `queued` already guards `!t.reply` above; mirror it here.
+    doneAll: list.filter((t) => ['done', 'skipped'].includes(t.status) && !closedGoalIds.has(t.goalId) && !t.reply).sort((a, b) => b.num - a.num),
     later: pgoals.filter((g) => g.status === 'pending'),
     rejected: pgoals.filter((g) => g.status === 'rejected'), // 07-20c: Reject parks goals here (own fold, like Done)
   };
@@ -6946,7 +6987,7 @@ function renderFsTodo(){
       <button class="qadd" data-fsnew="1" title="New goal"><span class="paplus"></span>New</button>
     </div>
     ${doneAll.length ? `<div class="doneline${fsUI.doneOpen ? ' open' : ''}" id="fsDoneLine">✓ Done<span class="num">${doneAll.length}</span><span class="fold">▾</span></div>
-      <div id="fsDonelist"${fsUI.doneOpen ? '' : ' hidden'}>${doneAll.slice(0, 3).map((t) => `<div class="trow up dim done"><span class="st ok"></span>${noSpan(t.goalId)}<span class="tt">${tt(t.title)}</span></div>`).join('')}</div>` : ''}`;
+      <div id="fsDonelist"${fsUI.doneOpen ? '' : ' hidden'}>${doneAll.map((t) => `<div class="trow up dim done"><span class="st ok"></span>${noSpan(t.goalId)}<span class="tt">${tt(t.title)}</span></div>`).join('')}</div>` : ''}`;
   el.classList.toggle('folded', !!fsUI.todoFold);
   $('fsTodoHd').onclick = () => { fsUI.todoFold = !fsUI.todoFold; el.classList.toggle('folded', fsUI.todoFold); };
   const qadd = el.querySelector('.qadd[data-fsnew]');            // + New → focus the composer (the real create path)
@@ -8218,7 +8259,7 @@ async function postOutboxItem(item){
       // .peraanswer bar. Never land()/upsert(): a kind:'chat' response has no id.
       outbox.remove(item.oid);
       if (state.layout === 'flagship') {
-        const turn = { role: 'clawd', text: String(goal.reply || ''), revealed: 0, done: false, agent: item.agent };
+        const turn = { role: 'clawd', text: String(goal.reply || ''), revealed: 0, done: false, agent: item.agent, ts: Date.now() };
         (state.chatTurns[item.projectId] ||= []).push(turn);
         renderFsFeed();
         typeChatTurn(turn);
@@ -9995,7 +10036,7 @@ async function argItems(cmd){
 // Read the raw input → decide what the palette shows (null = closed).
 function paletteState(val){
   if (val[0] !== '/') return null;
-  const m = val.match(/^\/(\w*)(\s)?([\s\S]*)$/);
+  const m = val.match(/^\/([\w-]*)(\s)?([\s\S]*)$/); // allow '-' so hyphenated skill names filter (english-practice)
   if (!m) return null;
   const word = m[1], hadSpace = m[2] != null, rest = m[3];
   if (!hadSpace) return { level: 'top', query: word };   // still typing the command name
@@ -10018,11 +10059,18 @@ function renderPalette(){
   if (!p || !el) return;
   const head = p.level === 'top' ? 'Commands' : '/' + p.cmd;
   if (!p.items.length) { el.innerHTML = `<div class="sphead">${esc(head)}</div><div class="empty">No match</div>`; el.classList.add('show'); return; }
-  el.innerHTML = `<div class="sphead">${esc(head)}</div>` + p.items.map((it, i) => {
-    const name = p.level === 'top' ? '/' + it.cmd + (it.arg ? ' …' : '') : it.v;
-    const desc = p.level === 'top' ? it.desc : (it.d || '');
-    return `<button type="button" class="spopt${i === p.sel ? ' on' : ''}" data-i="${i}" role="option"><span class="spn">${esc(name)}</span><span class="spd">${esc(desc)}</span></button>`;
-  }).join('');
+  let html = '', lastGroup = null;
+  p.items.forEach((it, i) => {
+    // group headers: top-level splits Commands vs Skills; arg-level shows the "/cmd" head once.
+    if (p.level === 'top') {
+      const group = it.skill ? 'Skills' : 'Commands';
+      if (group !== lastGroup) { html += `<div class="sphead">${group}</div>`; lastGroup = group; }
+    } else if (i === 0) { html += `<div class="sphead">${esc('/' + p.cmd)}</div>`; }
+    const name = p.level === 'top' ? (it.skill ? '/' + it.skill : '/' + it.cmd + (it.arg ? ' …' : '')) : it.v;
+    const desc = p.level === 'top' ? (it.desc || '') : (it.d || '');
+    html += `<button type="button" class="spopt${i === p.sel ? ' on' : ''}" data-i="${i}" role="option"><span class="spn">${esc(name)}</span><span class="spd">${esc(desc)}</span></button>`;
+  });
+  el.innerHTML = html;
   el.classList.add('show');
   for (const b of el.querySelectorAll('[data-i]')) b.onmousedown = (e) => { e.preventDefault(); state.palette.sel = Number(b.dataset.i); acceptPalette(); };
 }
@@ -10034,6 +10082,13 @@ async function refreshPalette(){
   if (info.level === 'top') {
     const q = info.query.toLowerCase();
     items = SLASH_CMDS.filter((s) => !q || s.cmd.startsWith(q));
+    // Once the user types after "/", also offer their registered skills (type-to-filter, so a
+    // bare "/" stays a short command list). Selecting one runs the goal with that skill first.
+    if (q) {
+      const skills = (await loadSkills()).filter((s) => s.name.toLowerCase().includes(q));
+      if ($('input').value !== val) return; // input changed while awaiting skills
+      items = items.concat(skills.map((s) => ({ skill: s.name, desc: `${s.kind || 'skill'}${s.description ? ' · ' + s.description : ''}`.trim() })));
+    }
   } else {
     const all = await argItems(info.cmd);
     if ($('input').value !== val) return; // input changed while awaiting skills
@@ -10054,7 +10109,8 @@ function acceptPalette(){
   const p = state.palette; if (!p) return false;
   const item = p.items[p.sel]; if (!item) return true;
   if (p.level === 'top') {
-    if (item.arg) { $('input').value = '/' + item.cmd + ' '; refreshPalette(); }
+    if (item.skill) { applySlash('skill', item.skill); $('input').value = $('input').value.replace(/^\s*\/\S*\s*/, ''); closePalette(); } // hyphen-safe strip of the "/skillname" token
+    else if (item.arg) { $('input').value = '/' + item.cmd + ' '; refreshPalette(); }
     else { applySlash(item.cmd, null); $('input').value = stripLeadingCmd($('input').value); closePalette(); }
   } else {
     applySlash(p.cmd, item.v);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galda/cli",
-  "version": "0.10.49",
+  "version": "0.10.50",
   "type": "module",
   "description": "Galda - hand off work to Claude Code or Codex, get proof back. Runs on your existing subscription, no extra API cost.",
   "scripts": {