fix(sessions): the row actions are visible, and they render at all

Reported from the panel: the buttons on each session row are invisible. Two separate
problems, one of them a real bug rather than a preference.

1. BELOW THE LABEL THRESHOLD THE BUTTONS RENDERED EMPTY

  @container (max-width: 390px) { .sesscard .sesslbl { display: none; } }
  .sesscard .sessact .ci { display: none; }        <- unconditional

The container query collapses each button to its ICON on a narrow panel. The icon was
hidden unconditionally, so it collapsed to NOTHING: six empty boxes with working tooltips,
which is exactly what the report shows — a blank rectangle and a clipped "Done" label.

The icon is the label's fallback, so it is now hidden only while the label is showing, and
it has a size: an inline <svg> carrying only a viewBox has no intrinsic one, so revealing it
without sizing it would have traded an invisible button for a broken one.

2. THE ACTIONS WERE HOVER-ONLY

They swapped in over the file·time line on :hover. A control that exists only while the
pointer is on it is one most people never find, and one a touch device cannot reach at all.
They are always present now, sharing line 2 with the metadata — quiet at .5 opacity so a
list of sessions still reads as a list, full strength on hover or keyboard focus. The row
keeps its fixed min-height, so nothing jumps. The metadata is the half that truncates.

Both surfaces get the same treatment. chat.html's /sessions modal had the identical
hover-swap and the same missing icon size; only sessionsView.html made it visible, by
hiding the icon outright. Fixing one and not the other is how the two drift.

The NO-JUMP test asserted the SWAP — file·time on rest, actions on hover — which is the
behaviour being removed, so it was rewritten rather than deleted: the row is still
fixed-height and still never grows, but it now carries both halves. A second test pins the
icon fallback and its size, which is the bug that was reported.

Verified by rendering the real card markup at 360px and 520px: six icons below the
threshold, six labels above it, the pinned star accented, the path truncating.

Guards, each bypass-verified by reverting the fix:
  - the label collapsing to nothing (the reported bug)
  - the fallback icon left unsized
  - the actions hidden again; the hover-swap reintroduced
  - the metadata no longer truncating, which pushes the actions out of the card

27 tests in sessionsUi, 34 suites green.

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -1233,7 +1233,7 @@
   /* Line 2 swaps file·time ⇄ the labeled action buttons on hover — same fixed-height row, full width, so
      nothing wraps, reflows, or floats and the title above is left intact. The modal keeps icons + labels. */
   .sesscard .sessline2 { margin-top: 4px; min-height: 26px; display: flex; align-items: center; }
-  .sesscard .sesssub { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
+  .sesscard .sesssub { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3);  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   /* The action row is nowrap by design (the card is two fixed-height lines — nothing may reflow), so
      a button that does not fit OVERFLOWS the card rather than wrapping. Six labelled buttons
      (Rename · Fork · Copy · Done · Delete · Pin) measure 434px at this styling; icon-only they are
@@ -1244,10 +1244,15 @@
      reader — only to the eye, and only when there is no room for it.
      ADDING A BUTTON? Re-measure and raise this; test/webviewCss.test.js pins the floor. */
   .sesscard { container-type: inline-size; }
-  @container (max-width: 460px) { .sesscard .sesslbl { display: none; } }
-  .sesscard .sessacts { display: none; align-items: center; gap: 6px; flex-wrap: nowrap; }
-  .sesscard:hover .sesssub, .sesscard:focus-within .sesssub { display: none; }
-  .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { display: flex; }
+  /* Same contract as the Sessions panel (media/sessionsView.html): the actions are always present,
+     quiet until hover, and the icon is the label's fallback rather than a second hidden thing. */
+  .sesscard .sessact .ci { display: none; width: 13px; height: 13px; }
+  @container (max-width: 460px) {
+    .sesscard .sesslbl { display: none; }
+    .sesscard .sessact .ci { display: inline-flex; }
+  }
+  .sesscard .sessacts { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; opacity: .5; transition: opacity .1s; }
+  .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { opacity: 1; }
   .sesscard .sessact { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text); border-radius: 5px; cursor: pointer; font: inherit; font-size: 11.5px; white-space: nowrap; }
   .sesscard .sessact:hover { border-color: var(--cc-accent); }
   .sesscard .sessact[data-act="delete"]:hover { border-color: var(--cc-danger); color: var(--cc-danger); }

extensions/levelcode-ai/media/sessionsView.html

@@ -85,20 +85,32 @@
   /* Line 2 shares its slot: at rest the file·time line; on hover the labeled buttons take the same
      fixed-height row (min-height) at full width — nothing wraps, reflows, or floats, and the title above is
      left intact. Sidebar buttons are label-only (icon hidden) to stay compact in a narrow panel. */
-  .sesscard .sessline2 { margin: 2px 0 0 16px; min-height: 22px; display: flex; align-items: center; }
-  .sesscard .sesssub { font-size: 12px; color: var(--cc-text3); }
+  .sesscard .sessline2 { margin: 2px 0 0 16px; min-height: 22px; display: flex; align-items: center; gap: 8px; }
+  /* The metadata truncates so the actions beside it always have room; it is the expendable half. */
+  .sesscard .sesssub { font-size: 12px; color: var(--cc-text3); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   /* Same reasoning as chat.html, different numbers — this pane's buttons are smaller (22px tall,
      8px padding, 11px text, no border), so six labelled ones measure 363px rather than 434px. The
      threshold sits above that; below it the row drops to icons, keeping title + aria-label, so only
      the eye loses anything and only when there is no room.
      ADDING A BUTTON? Re-measure and raise this; test/webviewCss.test.js pins the floor. */
   .sesscard { container-type: inline-size; }
-  @container (max-width: 390px) { .sesscard .sesslbl { display: none; } }
-  .sesscard .sessacts { display: none; align-items: center; gap: 4px; flex-wrap: nowrap; }
-  .sesscard:hover .sesssub, .sesscard:focus-within .sesssub { display: none; }
-  .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { display: flex; }
+  /* ALWAYS PRESENT, not hover-revealed. A control that exists only while the pointer is on it is a
+     control most people never find — and it cannot be found at all on a touch device. Quiet by
+     default so a list of sessions still reads as a list; full strength on hover or keyboard focus. */
+  .sesscard .sessacts { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; opacity: .5; transition: opacity .1s; }
+  .sesscard:hover .sessacts, .sesscard:focus-within .sessacts { opacity: 1; }
+  @media (prefers-reduced-motion: reduce) { .sesscard .sessacts { transition: none; } }
   .sesscard .sessact { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: none; background: transparent; color: var(--cc-text2); border-radius: 4px; cursor: pointer; font: inherit; font-size: 11px; white-space: nowrap; }
-  .sesscard .sessact .ci { display: none; }
+  /* The icon is the FALLBACK for the label, so it is hidden only while the label is showing — and it
+     needs a size, because an inline <svg> with just a viewBox has no intrinsic one.
+     This is the bug that made the buttons invisible: `.ci` was display:none unconditionally, so below
+     the label threshold each button fell back to nothing and rendered as an empty box. */
+  .sesscard .sessact .ci { display: none; width: 13px; height: 13px; }
+  @container (max-width: 390px) {
+    .sesscard .sesslbl { display: none; }
+    .sesscard .sessact .ci { display: inline-flex; }
+    .sesscard .sessact { padding: 0 5px; }
+  }
   .sesscard .sessact:hover { background: color-mix(in srgb, var(--cc-text3) 20%, transparent); color: var(--cc-text); }
   .sesscard .sessact[data-act="delete"]:hover { background: color-mix(in srgb, var(--cc-danger) 18%, transparent); color: var(--cc-danger); }
   .sesscard.pinned [data-act="pin"] { color: var(--cc-accent); }

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

@@ -80,11 +80,11 @@ test('CARD (actions): six row icon buttons (rename/fork/export/done/delete/pin);
 	const h = P.sessCardHtml(e, NOW, esc, escAttr);
 	for (const a of ['rename', 'fork', 'export', 'done', 'delete', 'pin']) { assert.match(h, new RegExp('data-act="' + a + '"'), a + ' action present'); }
 	assert.ok(!/data-act="resume"/.test(h), 'no Resume button — clicking the card body resumes (default action)');
-	assert.match(h, /class="sessline2">.*class="sesssub">/, 'file·time and the actions share line 2 (swap on hover)');
+	assert.match(h, /class="sessline2">.*class="sesssub">/, 'file·time and the actions share line 2');
 	assert.ok(!/sessrich|sessbtn|sesschip|sessmeta/.test(h), 'not the old drawer/chip/meta markup');
 	assert.match(h, /<span class="sesslbl">Rename<\/span>/, 'buttons carry a visible text label…');
 	assert.match(h, /<span class="sesslbl">Done<\/span>.*<span class="sesslbl">Delete<\/span>/, '…Done and Delete too');
-	assert.match(h, /<svg class="ci"/, 'with an icon alongside (hidden by CSS on the narrow sidebar)');
+	assert.match(h, /<svg class="ci"/, 'with an icon alongside — the fallback CSS shows once the label collapses');
 	assert.match(h, /aria-label="Rename"/, 'and an a11y label');
 	assert.match(h, /title="t — 41 turns · claude-opus-5 · refund\.rb, lock\.rb"/, 'model · turns · files fold into the tooltip');
 });
@@ -254,12 +254,38 @@ test('VIEW: theme-true across the three kinds and reduced-motion-safe', () => {
 	assert.match(view, /@media \(prefers-reduced-motion: reduce\)[\s\S]{0,120}\.sesscard[\s\S]{0,80}transition:\s*none/);
 });
 
-test('NO-JUMP: line 2 swaps file·time ⇄ actions in a fixed min-height row (no drawer, no float, title intact)', () => {
+test('NO-JUMP: line 2 carries file·time AND the actions in a fixed min-height row', () => {
+	// This used to assert a SWAP — file·time on rest, actions on hover, same row. The row is still
+	// fixed-height and still never grows, but the actions no longer wait for a pointer: a control that
+	// exists only while hovered is one most people never find, and one a touch device cannot reach at
+	// all. They share the row now, and the metadata is the half that truncates.
 	for (const [name, src] of [['modal', html], ['sidebar', view]]) {
 		assert.ok(!/\.sesscard \.sessrich/.test(src), name + ': the old hover drawer is gone (nothing floats over neighbours)');
 		assert.match(src, /\.sesscard \.sessline2 \{[^}]*min-height/, name + ': line 2 reserves a fixed height, so the card never grows');
-		assert.match(src, /\.sesscard:hover \.sesssub[^{]*\{[^}]*display: none/, name + ': file·time hides on hover…');
-		assert.match(src, /\.sesscard:hover \.sessacts[^{]*\{[^}]*display: flex/, name + ': …and the actions take that same row');
+		assert.match(src, /\.sesscard \.sessacts \{[^}]*display: flex/, name + ': the actions are not present until hovered');
+		assert.ok(!/\.sesscard:hover \.sesssub[^{]*\{[^}]*display: none/.test(src),
+			name + ': hovering still hides the file·time — the row is shared now, not swapped');
+		assert.match(src, /\.sesscard \.sesssub \{[^}]*text-overflow: ellipsis/,
+			name + ': the metadata must truncate, or it pushes the actions out of the card');
+		assert.match(src, /\.sesscard:hover \.sessacts[^{]*\{[^}]*opacity: 1/,
+			name + ': the actions should still come forward on hover rather than shouting all the time');
+	}
+});
+
+test('ACTIONS: below the label threshold the buttons fall back to an ICON, not to nothing', () => {
+	// The bug this pins, reported from the panel: `.sessact .ci` was `display: none` UNCONDITIONALLY,
+	// while the container query hid `.sesslbl` below the threshold. So in a narrow panel every action
+	// button had no visible content at all — six empty boxes with working tooltips.
+	for (const [name, src] of [['modal', html], ['sidebar', view]]) {
+		const q = /@container \(max-width: (\d+)px\) \{([\s\S]*?)\n  \}/.exec(src)
+			|| /@container \(max-width: (\d+)px\) \{([^}]*\{[^}]*\}[\s\S]*?)\}/.exec(src);
+		assert.ok(q, name + ': the label-collapse container query is gone');
+		assert.match(q[2], /\.sesslbl \{ display: none/, name + ': the label no longer collapses');
+		assert.match(q[2], /\.sessact \.ci \{ display: inline-flex/,
+			name + ': the label collapses with no icon to fall back to — the button renders empty');
+		// An inline <svg> carrying only a viewBox has no intrinsic size, so showing it is not enough.
+		assert.match(src, /\.sesscard \.sessact \.ci \{[^}]*width:\s*\d+px[^}]*height:\s*\d+px/,
+			name + ': the fallback icon has no size — an svg with only a viewBox does not have one');
 	}
 });