fix(levelcode-ai): calm the transcript chrome — fold finished groups, one speaker label

From a real run: the grouping worked but the surrounding chrome undid it.

- A finished group never folded. `.tl-group.collapsed .groupbody{display:none}`
  existed but finalizeGroup never applied it, so a closed group showed its
  aggregate header AND every finished row — N+1 lines where the reference shows
  one. Successful groups now fold to the summary line; failures stay open, and a
  header the user clicked keeps the state they chose.

- A finished group kept wearing its spinner: the rail node stayed on the `sync`
  glyph while a second check sat at the end of the header. The rail now carries
  the outcome and the trailing state clears on success — one glyph, not three.

- Tool rows were monospace. That was right when they read `read src/agent.js`;
  now they carry the model's own sentence, and prose in the editor font read
  like a command line.

- "LEVELCODE AI" was stamped over every narration block — four times in one
  turn, chopping a single train of thought into separate announcements. One
  label per turn; continuations flow as prose with a tightened gap.

groupReducer covers all of it (14 tests): fold-on-success, userToggled respected,
failure stays open, rail glyph swap, label-once-per-turn, re-armed by a new user
message. Full gate green (20 suites).

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -76,6 +76,9 @@
   #jumpLatest:hover { opacity: 1; background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.25)); }
   .msg { white-space: normal; word-wrap: break-word; line-height: 1.5; }
   .msg .role { font-size: 11px; opacity: .55; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
+  /* continuation narration: no second speaker label, and pulled up against the 12px log gap so the
+     prose reads as one voice continuing rather than a fresh announcement */
+  .msg.cont { margin-top: -5px; }
   /* rendered-markdown block elements inside a message body */
   .msg .body p { margin: 0 0 8px; }
   .msg .body ul, .msg .body ol { margin: 0 0 8px; padding-left: 22px; }
@@ -261,7 +264,9 @@
   .tl-body { flex: 1 1 auto; min-width: 0; padding: 3px 0 8px; }
   /* light tool action (read / edit / search …) — a one-liner node */
   .tl-tool .tl-body { padding: 4px 0 6px; }
-  .tl-tool .toolt { display: block; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--muted); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* UI font, not the editor font: these rows carry the model's own sentence ("Understand how levels
+     are authored"), and monospace made prose read like a command line. */
+  .tl-tool .toolt { display: block; font-size: 12px; color: var(--muted); line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   /* heavier command action — collapsible boxed card: header (chevron · verb · chips · state)
      → highlighted command → streamed output → status foot → italic why */
   .tl-cmd .tl-node { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--vscode-editor-background, var(--field-bg))); }
@@ -1383,11 +1388,19 @@
       b.onclick = () => { const inp = document.getElementById('input'); if (!inp) { return; } inp.value = b.dataset.q || ''; inp.dispatchEvent(new Event('input', { bubbles: true })); inp.focus(); };
     });
   })();
+  // ONE speaker label per turn. A run narrates several times around its tool cards; stamping
+  // "LEVELCODE AI" over each block chopped one train of thought into four announcements. The
+  // continuation blocks flow as prose (tighter gap, no label) — the way a person keeps talking.
+  let turnLabeled = false;
   function add(role, html){
     clearEmpty();
     closeGroup();   // narration / user text ends the activity group (calm transcript)
-    const d = document.createElement('div'); d.className = 'msg ' + role;
-    d.innerHTML = '<div class="role">' + (role === 'user' ? 'You' : 'LevelCode AI') + '</div><div class="body">' + html + '</div>';
+    if (role === 'user'){ turnLabeled = false; }
+    const cont = role !== 'user' && turnLabeled;
+    if (role !== 'user'){ turnLabeled = true; }
+    const d = document.createElement('div'); d.className = 'msg ' + role + (cont ? ' cont' : '');
+    d.innerHTML = (cont ? '' : '<div class="role">' + (role === 'user' ? 'You' : 'LevelCode AI') + '</div>')
+      + '<div class="body">' + html + '</div>';
     log.appendChild(d); scrollIfStuck(); return d.querySelector('.body');
   }
   function addAutoCtx(names){
@@ -1525,6 +1538,7 @@
     const g = {
       el: wrap, body: wrap.querySelector('.groupbody'), label: wrap.querySelector('.grouplabel'),
       counts: wrap.querySelector('.groupcounts'), state: wrap.querySelector('.groupstate'),
+      node: wrap.querySelector('.tl-node'),
       stopBtn: wrap.querySelector('.groupstop'), steps: [], failed: false, closed: false, userToggled: false
     };
     wrap.querySelector('.grouphead').onclick = (e) => {
@@ -1581,10 +1595,18 @@
     g.el.classList.remove('running');
     g.label.textContent = groupAggregate(g.steps);
     g.counts.innerHTML = groupCountsHtml(g);
-    g.state.innerHTML = codicon(g.failed ? 'circle-slash' : 'check');
+    // ONE outcome glyph, in the rail. While running the rail carried a spinner and the head carried
+    // dots; a finished group must not go on wearing either. The rail states the outcome, so the
+    // trailing state clears on success and speaks up only when something failed.
+    if (g.node){ g.node.innerHTML = codicon(g.failed ? 'circle-slash' : 'check'); }
+    g.state.innerHTML = g.failed ? codicon('circle-slash') : '';
     g.state.className = 'cmdstate groupstate ' + (g.failed ? 'bad' : 'ok');
     g.stopBtn.hidden = true;
+    // A finished, successful group folds to its one-line summary — that fold IS the calm payoff.
+    // It was born expanded so the running step stayed readable; nobody needs the finished rows in
+    // the way afterwards. Failures stay open, and a group the user opened by hand keeps their choice.
     if (g.failed){ g.el.classList.remove('collapsed'); }
+    else if (!g.userToggled){ g.el.classList.add('collapsed'); }
   }
   // Narration / user text / an interactive card ends the activity group.
   function closeGroup(){ const g = curGroup; if (!g){ return; } curGroup = null; finalizeGroup(g); }
@@ -2720,7 +2742,7 @@
     else if (m.type === 'autoContext'){ addAutoCtx(m.names); }
     else if (m.type === 'mode'){ applyMode(!!m.agent); }
     else if (m.type === 'autopilot'){ applyAutopilot(!!m.on); }
-    else if (m.type === 'agentStart'){ closeGroup(); setStreaming(true); agentBubble = null; agentRaw = ''; renderPlan([]); setAgentStatus('thinking…'); }
+    else if (m.type === 'agentStart'){ closeGroup(); setStreaming(true); agentBubble = null; agentRaw = ''; turnLabeled = false; renderPlan([]); setAgentStatus('thinking…'); }
     else if (m.type === 'agentStatus'){ finishAgentBubble(); setAgentStatus(m.text || 'working…'); }
     else if (m.type === 'agentDelta'){ clearStatus(); setWork('Responding…'); if (!agentBubble){ agentBubble = makeStream(add('assistant', '')); agentRaw = ''; } agentRaw += m.text; streamFeed(agentBubble, agentRaw); }
     else if (m.type === 'agentTurnEnd'){ finishAgentBubble(); }

extensions/levelcode-ai/test/groupReducer.test.js

@@ -88,6 +88,7 @@ function newHarness(groupsOn) {
 	log.__root = true;
 	const sandbox = {};
 	const preamble = 'let curGroup = null; let groupsOn = ' + (groupsOn === false ? 'false' : 'true') + ';\n'
+		+ 'let turnLabeled = false;\n'
 		+ 'const LC_DOTS = "<dots>";\n'
 		+ 'const codicon = (n) => "<i:" + n + ">";\n'
 		+ 'const esc = (s) => String(s == null ? "" : s);\n'
@@ -97,9 +98,9 @@ function newHarness(groupsOn) {
 		+ [
 			'tenseLabel', 'groupAggregate', 'chipStep', 'cmdBase', 'groupCountsHtml', 'openGroup',
 			'collapseMember', 'groupAppend', 'refreshGroupHead', 'finalizeGroup', 'closeGroup',
-			'groupStepDone', 'groupStepCounts', 'addAgentLine'
+			'groupStepDone', 'groupStepCounts', 'addAgentLine', 'add'
 		].map(extract).join('\n')
-		+ '\nthis.api = { openGroup, groupAppend, closeGroup, groupStepDone, groupStepCounts, addAgentLine, get curGroup(){ return curGroup; } };';
+		+ '\nthis.api = { openGroup, groupAppend, closeGroup, groupStepDone, groupStepCounts, addAgentLine, add, get curGroup(){ return curGroup; } };';
 	new Function('document', 'log', src).call(sandbox, { createElement: (t) => new El(t) }, log);
 	return { log, api: /** @type {any} */ (sandbox).api };
 }
@@ -129,9 +130,38 @@ test('header flips to the past-tense aggregate when the group closes', () => {
 	const g = h.api.curGroup;
 	h.api.groupStepCounts(g.steps[1], 3, 1);
 	h.api.groupStepDone(g.steps[2], false);
+	assert.ok(!g.el.classList.contains('collapsed'), 'stays open while it runs');
 	h.api.closeGroup();
 	assert.strictEqual(g.label.textContent, 'Read and edited extension.js, ran a command');
 	assert.ok(/\+3/.test(g.counts.innerHTML) && /-1/.test(g.counts.innerHTML), 'summed diffstat in the header');
+	// The fold IS the payoff: a finished group is ONE line, not a header plus every finished row.
+	assert.ok(g.el.classList.contains('collapsed'), 'a successful group folds to its summary line');
+	assert.ok(/i:check/.test(g.node.innerHTML), 'rail states the outcome');
+	assert.ok(!/i:sync/.test(g.node.innerHTML), 'and stops wearing the running spinner');
+});
+
+test('a group the user opened by hand keeps their choice when it closes', () => {
+	const h = newHarness();
+	const a = card('tl tl-cmd'), b = card('tl tl-cmd');
+	h.api.groupAppend(a, { kind: 'cmd', base: 'Run one', status: 'done', card: a });
+	h.api.groupAppend(b, { kind: 'cmd', base: 'Run two', status: 'done', card: b });
+	const g = h.api.curGroup;
+	g.userToggled = true;                       // they clicked the header mid-run
+	h.api.closeGroup();
+	assert.ok(!g.el.classList.contains('collapsed'), 'auto-fold never overrides a deliberate click');
+});
+
+test('a FAILED group closes open, so the problem is on screen', () => {
+	const h = newHarness();
+	const a = card('tl tl-cmd'), b = card('tl tl-cmd');
+	h.api.groupAppend(a, { kind: 'cmd', base: 'Run one', status: 'done', card: a });
+	const step = { kind: 'cmd', base: 'Run two', status: 'running', card: b };
+	h.api.groupAppend(b, step);
+	const g = h.api.curGroup;
+	h.api.groupStepDone(step, true);
+	h.api.closeGroup();
+	assert.ok(!g.el.classList.contains('collapsed'), 'failures never fold away');
+	assert.ok(/circle-slash/.test(g.node.innerHTML), 'rail marks the failure');
 });
 
 // ── 2. members are one-line rows; a failure re-opens its row ───────────────────────────────────
@@ -167,7 +197,8 @@ test('a user-stopped command is NOT a failure', () => {
 	const g = h.api.curGroup;
 	h.api.groupStepDone(step, false);           // termExitFinish passes false for how === 'stopped'
 	h.api.closeGroup();
-	assert.ok(/i:check/.test(g.state.innerHTML), 'group still closes clean');
+	assert.ok(/i:check/.test(g.node.innerHTML), 'group still closes clean');
+	assert.strictEqual(g.state.innerHTML, '', 'no second glyph trailing the header');
 });
 
 // ── 3. degenerate + late-exit lifecycles ───────────────────────────────────────────────────────
@@ -226,4 +257,34 @@ test('the model label titles the row; the raw tool text stays as the tooltip', (
 	assert.ok(/title="read src\/agent\.js"/.test(row.innerHTML), 'raw text preserved as the tooltip');
 });
 
+// ── 5. one speaker label per turn ──────────────────────────────────────────────────────────────
+// A run narrates repeatedly around its tool cards. Re-stamping "LEVELCODE AI" over every block is
+// what made the transcript read as four announcements instead of one person thinking out loud.
+const roleOf = (el) => (/class="role">([^<]*)</.exec(el.innerHTML) || [, null])[1];
+
+test('the first narration of a turn is labelled; the rest flow as prose', () => {
+	const h = newHarness();
+	h.api.add('user', 'do the thing');
+	h.api.add('assistant', 'Let me look at the repo first.');
+	h.api.add('assistant', 'I have enough context now.');
+	h.api.add('assistant', 'Done: created the file.');
+	const [u, first, second, third] = h.log.children;
+	assert.strictEqual(roleOf(u), 'You');
+	assert.strictEqual(roleOf(first), 'LevelCode AI', 'the turn announces itself once');
+	assert.strictEqual(roleOf(second), null, 'continuation carries no second label');
+	assert.strictEqual(roleOf(third), null);
+	assert.ok(!first.classList.contains('cont') && second.classList.contains('cont'),
+		'continuations are marked so CSS can tighten the gap');
+});
+
+test('a new user message re-arms the label', () => {
+	const h = newHarness();
+	h.api.add('user', 'first ask');
+	h.api.add('assistant', 'working…');
+	h.api.add('assistant', 'still working…');
+	h.api.add('user', 'second ask');
+	h.api.add('assistant', 'on it');
+	assert.strictEqual(roleOf(h.log.children[4]), 'LevelCode AI', 'the next turn is labelled again');
+});
+
 console.log('groupReducer: ' + n + ' tests passed');