feat(sessions): the History panel in the webview (minimal cards)

The visible surface. An in-webview overlay (`/sessions`, or a 'sessions'
message from the host) rendering the session index in the classic look:
- minimal card at rest (title + one quiet line: primary file · relative time),
  state SILENT when done, a 2px left-edge only when noteworthy (interrupted/
  error/resumed), pin only when pinned; hover/focus expands to files, model,
  turns, sparkline, and inline actions;
- time buckets (Pinned/Today/Yesterday/This week/Earlier), instant local search
  over title+files+preview, Esc/backdrop close.

Theme-true across One Dark / One Light / high-contrast (reuses the account
modal's --cc-* tokens); reduced-motion-safe. Renders against MOCK_SESSIONS for
now (TODO: the extension.js adapter posts real entries via 'sessions').

The pure render helpers sit in a [SESSIONS-PURE] block, extracted + unit-tested
(test/sessionsUi.test.js): time/bucket/match/group/sparkline + the card HTML
(esc injected), plus static invariants for the 3 theme token blocks, the
reduced-motion guard, the state->--cc-token mapping, and the wiring.

sessionsUi: 13 tests. Full suite: 31 suites, 0 failures.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -1058,6 +1058,43 @@
     .acctcard.lc-modal { animation: none; }
     .lc-btn:hover, .lc-btn-primary:hover, .lc-btn-primary:hover .lc-arrow { transform: none; }
   }
+  /* ── Sessions panel (History) — the classic look, minimal cards. docs/levelcode-sessions-experience.md ── */
+  .sesspanel { --cc-bg:#282c34; --cc-surface:#21252b; --cc-text:#dcdfe4; --cc-text2:#abb2bf; --cc-text3:#828997; --cc-line:#3e4451; --cc-accent:#7d6bff; --cc-warn:#d19a66; --cc-danger:#e06c75;
+    position: relative; width: 100%; max-width: 440px; max-height: 82vh; display: flex; flex-direction: column;
+    background: var(--cc-surface); color: var(--cc-text); border: 1px solid var(--cc-line); border-radius: 12px; overflow: hidden;
+    box-shadow: 0 18px 50px rgba(0,0,0,.34); font-variant-numeric: tabular-nums; }
+  body.vscode-light .sesspanel { --cc-bg:#ffffff; --cc-surface:#fafaf9; --cc-text:#333; --cc-text2:#555; --cc-text3:#777; --cc-line:#e0e0e0; --cc-accent:#5b3fd6; --cc-warn:#b9761f; --cc-danger:#d9534f; }
+  body.vscode-high-contrast .sesspanel, body.vscode-high-contrast-light .sesspanel {
+    --cc-bg: var(--vscode-editor-background); --cc-surface: var(--vscode-editorWidget-background, var(--vscode-editor-background));
+    --cc-text: var(--vscode-foreground); --cc-text2: var(--vscode-foreground); --cc-text3: var(--vscode-descriptionForeground, var(--vscode-foreground));
+    --cc-line: var(--vscode-contrastBorder, var(--vscode-widget-border)); --cc-accent: var(--vscode-textLink-foreground, var(--vscode-focusBorder));
+    --cc-warn: var(--vscode-editorWarning-foreground, var(--vscode-foreground)); --cc-danger: var(--vscode-errorForeground); }
+  .sesspanel .sessbar { display: flex; align-items: center; gap: 9px; padding: 12px 14px 10px; border-bottom: 1px solid var(--cc-line); }
+  .sesspanel .sesstitle { font-weight: 600; font-size: 14px; }
+  .sesspanel .sesssearch { margin: 10px 12px 6px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 6px; color: var(--cc-text3); }
+  .sesspanel .sesssearch input { flex: 1; background: transparent; border: none; outline: none; color: var(--cc-text); font: inherit; font-size: 12.5px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); }
+  .sesspanel .sesslist { flex: 1 1 auto; overflow-y: auto; padding: 2px 12px 14px; }
+  .sesspanel .sessbucket { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text3); margin: 12px 4px 7px; }
+  .sesspanel .sessempty { padding: 44px 18px; text-align: center; color: var(--cc-text3); font-size: 13px; line-height: 1.6; }
+  .sesscard { position: relative; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 7px; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
+  .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within { border-color: var(--cc-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); outline: none; }
+  .sesscard.warn { border-left: 2px solid var(--cc-warn); }
+  .sesscard.err { border-left: 2px solid var(--cc-danger); }
+  .sesscard.res { border-left: 2px solid var(--cc-accent); }
+  .sesscard .sesstop { display: flex; align-items: center; gap: 8px; }
+  .sesscard .sessname { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
+  .sesscard .sessstar { color: var(--cc-accent); font-size: 13px; }
+  .sesscard .sesssub { margin-top: 4px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
+  .sesscard .sessrich { display: none; margin-top: 8px; }
+  .sesscard:hover .sessrich, .sesscard:focus-within .sessrich { display: block; }
+  .sesscard .sessfiles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+  .sesscard .sesschip { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; color: var(--cc-text2); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 4px; padding: 1px 6px; }
+  .sesscard .sessmeta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
+  .sesscard .sessacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
+  .sesscard .sessbtn { font: inherit; font-size: 11.5px; color: var(--cc-text); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 5px; padding: 3px 9px; cursor: pointer; }
+  .sesscard .sessbtn.pri { color: #fff; background: var(--cc-accent); border-color: transparent; }
+  .sesscard .sessbtn:hover { border-color: var(--cc-accent); }
+  @media (prefers-reduced-motion: reduce) { .sesscard { transition: none; } .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within { transform: none; } }
 </style>
 </head>
 <body>
@@ -1183,6 +1220,15 @@
     </div>
   </div>
 
+  <div id="sessOverlay" class="overlay" style="display:none">
+    <div class="sesspanel" role="dialog" aria-modal="true" aria-label="Sessions">
+      <button class="ovclose" id="sessClose" title="Close" aria-label="Close">&#10005;</button>
+      <div class="sessbar"><span class="sesstitle">Sessions</span></div>
+      <div class="sesssearch"><span aria-hidden="true">&#8981;</span><input id="sessSearch" type="text" placeholder="Search sessions, files…" aria-label="Search sessions" /></div>
+      <div class="sesslist" id="sessList"></div>
+    </div>
+  </div>
+
 <script nonce="__NONCE__">
   const vscode = acquireVsCodeApi();
   window.onerror = function(msg){
@@ -2830,6 +2876,7 @@
     // Slash commands — handled locally (deterministic, no LLM call).
     if (/^\/skills\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); vscode.postMessage({ type: 'listSkills' }); return; }
     if (/^\/mcp\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); vscode.postMessage({ type: 'listMcp' }); return; }
+    if (/^\/sessions\b/i.test(t)){ input.value = ''; auto(); openSessions(); return; }
     if (/^\/rme\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); addReminder(); return; }
     add('user', render(t)); forceStick(); input.value = ''; auto();
     vscode.postMessage({ type: 'send', text: t });
@@ -3230,6 +3277,111 @@
     d.innerHTML = inner + '</div>';
     log.appendChild(d); scrollIfStuck();
   }
+  // ── Sessions panel (History) — renders the session index. docs/levelcode-sessions-experience.md ──
+  // [SESSIONS-PURE-START] — dependency-free helpers; extracted + unit-tested in test/sessionsUi.test.js.
+  function sessRelTime(iso, nowMs){
+    const t = Date.parse(iso); if (!isFinite(t)) { return ''; }
+    const s = Math.max(0, Math.round((nowMs - t) / 1000));
+    if (s < 45) { return 'just now'; }
+    const m = Math.round(s / 60); if (m < 60) { return m + 'm'; }
+    const h = Math.round(m / 60); if (h < 24) { return h + 'h'; }
+    const d = Math.round(h / 24); if (d < 7) { return d + 'd'; }
+    const w = Math.round(d / 7); if (w < 5) { return w + 'w'; }
+    try { return new Date(t).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); } catch (e) { return d + 'd'; }
+  }
+  function sessBucket(iso, nowMs){
+    const t = Date.parse(iso); if (!isFinite(t)) { return 'Earlier'; }
+    const startOfDay = (ms) => { const dt = new Date(ms); dt.setHours(0, 0, 0, 0); return dt.getTime(); };
+    const days = Math.round((startOfDay(nowMs) - startOfDay(t)) / 86400000);
+    if (days <= 0) { return 'Today'; }
+    if (days === 1) { return 'Yesterday'; }
+    if (days <= 7) { return 'This week'; }
+    return 'Earlier';
+  }
+  function sessMatch(entry, q){
+    if (!q) { return true; }
+    const s = String(q).toLowerCase();
+    if (String(entry.title || '').toLowerCase().indexOf(s) >= 0) { return true; }
+    if (String(entry.preview || '').toLowerCase().indexOf(s) >= 0) { return true; }
+    return (entry.filesEdited || []).some((f) => String(f).toLowerCase().indexOf(s) >= 0);
+  }
+  function sessModelShort(m){ const s = String(m || ''); const i = s.lastIndexOf('/'); return i >= 0 ? s.slice(i + 1) : s; }
+  function sessSparkSvg(spark){
+    const a = (Array.isArray(spark) ? spark : []).map((x) => Math.max(0, Number(x) || 0));
+    if (!a.length) { return ''; }
+    const max = Math.max(1, Math.max.apply(null, a)), bw = 4, gap = 2, h = 15;
+    let bars = '';
+    for (let i = 0; i < a.length; i++){ const bh = Math.max(1, Math.round((a[i] / max) * h)); bars += '<rect x="' + (i * (bw + gap)) + '" y="' + (h - bh) + '" width="' + bw + '" height="' + bh + '" opacity="' + (0.4 + 0.5 * (a[i] / max)).toFixed(2) + '"/>'; }
+    const w = a.length * (bw + gap);
+    return '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '" aria-hidden="true"><g fill="var(--cc-accent)">' + bars + '</g></svg>';
+  }
+  var SESS_BUCKETS = ['Pinned', 'Today', 'Yesterday', 'This week', 'Earlier'];
+  function sessGroup(entries, nowMs){
+    const by = {}; SESS_BUCKETS.forEach((b) => { by[b] = []; });
+    for (const e of entries){ const b = e.pinned ? 'Pinned' : sessBucket(e.updatedAt || e.createdAt, nowMs); (by[b] || by.Earlier).push(e); }
+    return SESS_BUCKETS.filter((b) => by[b].length).map((b) => ({ bucket: b, entries: by[b] }));
+  }
+  // esc/escAttr are INJECTED so this whole block stays pure (unit-testable without the webview globals).
+  function sessCardHtml(e, nowMs, escFn, escAttrFn){
+    const st = e.state === 'interrupted' ? ' warn' : e.state === 'error' ? ' err' : e.state === 'resumed' ? ' res' : '';
+    const files = e.filesEdited || [];
+    const sub = (files.length ? escFn(files[0]) + ' · ' : '') + escFn(sessRelTime(e.updatedAt || e.createdAt, nowMs));
+    const chips = files.slice(0, 3).map((f) => '<span class="sesschip">' + escFn(f) + '</span>').join('') + (files.length > 3 ? '<span class="sesschip">+' + (files.length - 3) + '</span>' : '');
+    const turns = e.turns || 0;
+    const rich = '<div class="sessrich">'
+      + (files.length ? '<div class="sessfiles">' + chips + '</div>' : '')
+      + '<div class="sessmeta">' + (e.model ? escFn(sessModelShort(e.model)) + ' · ' : '') + turns + ' turn' + (turns === 1 ? '' : 's') + ' ' + sessSparkSvg(e.spark) + '</div>'
+      + '<div class="sessacts"><button class="sessbtn pri" data-act="resume">Resume &#9166;</button><button class="sessbtn" data-act="done">Done</button><button class="sessbtn" data-act="rename">Rename</button><button class="sessbtn" data-act="delete">Delete</button></div>'
+      + '</div>';
+    return '<div class="sesscard' + st + '" data-id="' + escAttrFn(e.id || '') + '" tabindex="0" role="button" aria-label="' + escAttrFn(e.title || 'Untitled') + '">'
+      + '<div class="sesstop"><span class="sessname" title="' + escAttrFn(e.title || '') + '">' + escFn(e.title || 'Untitled') + '</span>' + (e.pinned ? '<span class="sessstar" aria-label="pinned">★</span>' : '') + '</div>'
+      + '<div class="sesssub">' + sub + '</div>' + rich + '</div>';
+  }
+  // [SESSIONS-PURE-END]
+  // Placeholder data so /sessions renders the panel before the extension.js adapter posts real entries.
+  const MOCK_SESSIONS = [
+    { id: 's1', title: 'Idempotent refunds via Redis keys', createdAt: '2026-07-28T09:00:00Z', updatedAt: '2026-07-28T10:00:00Z', turns: 41, model: 'anthropic/claude-opus-5', state: 'done', lifecycle: 'active', pinned: true, filesEdited: ['refund.rb', 'redis_lock.rb', 'ledger.rb', 'spec.rb'], spark: [1, 3, 2, 5, 8, 6, 4, 2, 1] },
+    { id: 's2', title: 'Debug the flaky payment webhook test', createdAt: '2026-07-28T05:00:00Z', updatedAt: '2026-07-28T05:30:00Z', turns: 12, model: 'moonshotai/kimi-k2.7-code', state: 'interrupted', lifecycle: 'active', pinned: false, filesEdited: ['webhook_spec.rb'], spark: [2, 6, 3, 1] },
+    { id: 's3', title: 'Tidy the CHANGELOG for v1.0.4', createdAt: '2026-07-27T12:00:00Z', updatedAt: '2026-07-27T12:20:00Z', turns: 6, model: 'anthropic/claude-opus-5', state: 'done', lifecycle: 'active', pinned: false, filesEdited: ['RELEASE-NOTES.md'], spark: [1, 2, 1] }
+  ];
+  let sessData = null, sessQuery = '';
+  function renderSessions(){
+    const list = document.getElementById('sessList'); if (!list) { return; }
+    const entries = (sessData || []).filter((e) => (e.lifecycle || 'active') === 'active' && sessMatch(e, sessQuery));
+    if (!entries.length){
+      list.innerHTML = '<div class="sessempty">' + (sessQuery ? 'Nothing matches “' + esc(sessQuery) + '”.' : 'Every chat you have is saved here — automatically, on your machine.') + '</div>';
+      return;
+    }
+    const now = Date.now(); let html = '';
+    for (const g of sessGroup(entries, now)){
+      html += '<div class="sessbucket">' + (g.bucket === 'Pinned' ? '★ ' : '') + esc(g.bucket) + '</div>';
+      for (const e of g.entries){ html += sessCardHtml(e, now, esc, escAttr); }
+    }
+    list.innerHTML = html;
+  }
+  function openSessions(){
+    const ov = document.getElementById('sessOverlay'); if (!ov) { return; }
+    if (sessData == null) { vscode.postMessage({ type: 'listSessions' }); sessData = MOCK_SESSIONS.slice(); }  // TODO(adapter): drop the mock once extension.js posts 'sessions'
+    sessQuery = ''; const inp = document.getElementById('sessSearch'); if (inp) { inp.value = ''; }
+    renderSessions(); ov.style.display = 'flex';
+    if (inp && inp.focus) { try { inp.focus(); } catch (e) {} }
+  }
+  function closeSessions(){ const ov = document.getElementById('sessOverlay'); if (ov) { ov.style.display = 'none'; } }
+  (function wireSessions(){
+    const close = document.getElementById('sessClose'); if (close) { close.onclick = closeSessions; }
+    const ov = document.getElementById('sessOverlay'); if (ov) { ov.addEventListener('click', (e) => { if (e.target === ov) { closeSessions(); } }); }
+    const inp = document.getElementById('sessSearch'); if (inp) { inp.addEventListener('input', () => { sessQuery = inp.value; renderSessions(); }); }
+    const list = document.getElementById('sessList');
+    if (list) { list.addEventListener('click', (e) => {
+      const card = e.target.closest && e.target.closest('.sesscard'); if (!card) { return; }
+      const id = card.getAttribute('data-id'); const btn = e.target.closest('[data-act]');
+      const action = btn ? btn.getAttribute('data-act') : 'resume';
+      vscode.postMessage({ type: 'sessionAction', action: action, id: id });
+      if (action === 'resume') { closeSessions(); }
+    }); }
+    document.addEventListener('keydown', (e) => { const o = document.getElementById('sessOverlay'); if (e.key === 'Escape' && o && o.style.display !== 'none'){ e.preventDefault(); closeSessions(); } });
+  })();
+
   window.addEventListener('message', ev => {
     const m = ev.data;
     if (m.type === 'config'){
@@ -3283,6 +3435,7 @@
     else if (m.type === 'checkpointBusy'){ checkpointBusyNotice(m); }
     else if (m.type === 'skillsList'){ renderSkillsList(m); }
     else if (m.type === 'mcpList'){ renderMcpList(m.mcp || {}); }
+    else if (m.type === 'sessions'){ sessData = Array.isArray(m.entries) ? m.entries : []; if (m.open === false) { renderSessions(); } else { openSessions(); } }
     else if (m.type === 'verifyRun'){ addVerifyRun(m); }
     else if (m.type === 'verifyOutput'){ verifyOutputAppend(m); }
     else if (m.type === 'verifyDone'){ verifyDoneFinish(m); }