@seanmars/tospec 0.23.0 → 0.24.0

package/assets/dashboard/views/home.js

@@ -0,0 +1,357 @@
+// The hub's front page (總覽): every project as one line on a shared stage
+// grid, with the changes that need the user listed above it.
+
+import { el, marker, paintLine, icon, lineBadge, note, activityDot } from '../lib/dom.js';
+import {
+  STATIONS,
+  SIGNAL_LABEL,
+  ACTIVITY_LABEL,
+  UNKNOWN_STATION,
+  sessionStatus,
+  sessionDetail,
+  projectActivity,
+  stationOf,
+  stationIndex,
+  stationLabel,
+  signalOf,
+  lineSignal,
+  gapOf,
+  unreadableInfo,
+  idleDays,
+  noticeItems,
+  staleDaysOf,
+  relTime,
+  parseLooseDate,
+} from '../lib/derive.js';
+import { store, dataOf, slotOf, loadDetail } from '../lib/store.js';
+import { routes } from '../lib/routes.js';
+import { openSessionPanel } from './session.js';
+
+/** Trains whose detail drawer is open; module-level so a live re-render keeps them open. */
+const expanded = new Set();
+
+export function renderHome() {
+  const now = Date.now();
+  const page = el('div', { class: 'page page-home' });
+
+  if (!store.projectsLoaded) {
+    page.append(el('h1', { class: 'page-title', text: '總覽' }), note(store.hubConnected ? '正在讀取 project 清單.' : '無法連到 dashboard hub.'));
+    return page;
+  }
+  if (store.projects.length === 0) {
+    page.append(renderOnboarding());
+    return page;
+  }
+
+  const changeCount = store.projects.reduce((n, p) => n + ((dataOf(p.key).overview || { changes: [] }).changes.length), 0);
+  const sessions = store.projects.flatMap((p) => p.sessions);
+  const working = sessions.filter((s) => sessionStatus(s) === 'working').length;
+  const sub = [`${store.projects.length} 個 project`, `${sessions.length} 個 session`];
+  if (working) sub.push(`${working} 個工作中`);
+  sub.push(`${changeCount} 個進行中的 change`);
+  page.append(
+    el('header', { class: 'page-head' }, [
+      el('div', { class: 'page-head-text' }, [
+        el('h1', { class: 'page-title', text: '總覽' }),
+        el('p', { class: 'page-sub num', text: sub.join(' · ') }),
+      ]),
+      legend(),
+    ])
+  );
+  page.append(renderNotices(now));
+  page.append(renderMap(now));
+  return page;
+}
+
+function legend() {
+  const items = ['moving', 'call', 'idle', 'stop', 'parked'].map((signal) =>
+    el('li', { class: 'legend-item' }, [marker(signal, 12), el('span', { text: SIGNAL_LABEL[signal] })])
+  );
+  return el('ul', { class: 'legend', 'aria-label': '標記說明' }, items);
+}
+
+function renderOnboarding() {
+  const stations = el('ol', { class: 'onboard-stations' }, STATIONS.map((s) => el('li', {}, [el('span', { class: 'station-dot' }), el('strong', { text: s.label }), el('span', { class: 'muted', text: s.hint })])));
+  return el('section', { class: 'onboard' }, [
+    el('h1', { class: 'page-title', text: '還沒有 project' }),
+    el('p', { class: 'onboard-lead', text: '在任何一個 tospec project 裡啟動 Claude Code session. tospec init 或 tospec update 寫入 .claude/skills/ 的 tospec-dashboard mod 會把 project 註冊到這個 hub, 它的 change 就會出現在總覽上.' }),
+    stations,
+    el('p', { class: 'muted', text: '每個 change 依檔案狀態落在一個階段: artifact 寫完就進 apply, task 全部勾完就到 sync, sync 通過就能 archive.' }),
+  ]);
+}
+
+// --- notices -------------------------------------------------------------------
+
+const NOTICE_SIGNAL = { stop: 'stop', call: 'call', idle: 'idle', drift: 'idle' };
+
+function renderNotices(now) {
+  const items = noticeItems(store.projects, store.data, now);
+  const section = el('section', { class: 'notices', 'aria-labelledby': 'notices-title' });
+  if (items.length === 0) {
+    const anyLoaded = store.projects.some((p) => dataOf(p.key).overview);
+    section.classList.add('notices-clear');
+    section.append(el('h2', { id: 'notices-title', class: 'notices-title', text: anyLoaded ? '沒有需要處理的 change' : '正在讀取各 project 的快照' }));
+    return section;
+  }
+  section.append(el('h2', { id: 'notices-title', class: 'notices-title' }, ['需要處理', el('span', { class: 'count', text: String(items.length) })]));
+  const list = el('ul', { class: 'notice-list' });
+  for (const item of items) {
+    const slot = slotOf(item.project.key);
+    if (item.kind === 'wait') {
+      list.append(el('li', { class: 'notice notice-wait' }, [
+        activityDot('waiting'),
+        lineBadge(item.project.name, slot),
+        sessionButton(item.project, item.session, 'notice-subject', [el('span', { text: '等你回覆 · session ' }), el('span', { class: 'mono', text: item.session.id.slice(0, 8) })]),
+        el('span', { class: 'notice-text', text: item.text }),
+      ]));
+      continue;
+    }
+    const subject = item.change
+      ? el('a', { class: 'notice-subject', href: routes.change(item.project.key, item.change.name), text: item.change.name })
+      : item.ticket
+        ? el('a', { class: 'notice-subject', href: routes.project(item.project.key), text: item.ticket.title || item.ticket.file })
+        : el('a', { class: 'notice-subject', href: routes.project(item.project.key), text: '整個 project' });
+    list.append(
+      el('li', { class: 'notice notice-' + item.kind }, [
+        marker(NOTICE_SIGNAL[item.kind], 14),
+        lineBadge(item.project.name, slot),
+        subject,
+        el('span', { class: 'notice-text' }, [item.text, item.hint ? el('span', { class: 'notice-hint', text: item.hint }) : null]),
+      ])
+    );
+  }
+  section.append(list);
+  return section;
+}
+
+// --- the map -----------------------------------------------------------------
+
+function renderMap(now) {
+  const counts = STATIONS.map(() => 0);
+  for (const project of store.projects) {
+    const overview = dataOf(project.key).overview;
+    if (!overview) continue;
+    for (const change of overview.changes) {
+      const i = stationIndex(stationOf(change));
+      if (i >= 0) counts[i] += 1;
+    }
+  }
+  const head = el('div', { class: 'map-head', 'aria-hidden': 'true' }, [
+    el('span', { class: 'map-head-label', text: 'project' }),
+    ...STATIONS.map((s, i) =>
+      el('span', { class: 'map-head-station' }, [
+        el('strong', { text: s.label }),
+        el('span', { class: 'map-head-hint', text: s.hint }),
+        // Always present, so every station label sits on the same baseline.
+        el('span', { class: 'map-head-count' + (counts[i] ? '' : ' is-zero'), text: String(counts[i]) }),
+      ])
+    ),
+  ]);
+  const map = el('section', { class: 'map', 'aria-label': '各 project 的 change 階段' }, [head]);
+  for (const project of store.projects) map.append(renderLine(project, now));
+  return map;
+}
+
+/** One project's line; also used, alone, at the top of the project page. */
+export function renderLine(project, now, { asTitle = true } = {}) {
+  const data = dataOf(project.key);
+  const slot = slotOf(project.key);
+  const overview = data.overview;
+  const staleDays = staleDaysOf(data);
+  const row = paintLine(el('article', { class: 'line-row', 'data-key': project.key }), slot);
+  if (!project.online) row.classList.add('is-offline');
+
+  const trainsAt = STATIONS.map(() => []);
+  const depot = [];
+  if (overview) {
+    for (const change of overview.changes) {
+      const i = stationIndex(stationOf(change));
+      if (i >= 0) trainsAt[i].push(change);
+      else depot.push(change);
+    }
+  }
+  const running = project.online && overview && overview.changes.some((c) => signalOf(c, staleDays, now) === 'running');
+  if (running) row.classList.add('has-running');
+  // A session at work right now: the whole line flows, visible from across the map.
+  if (projectActivity(project) === 'working') row.classList.add('is-working');
+
+  const label = el('header', { class: 'line-label' }, [
+    asTitle
+      ? el('h2', { class: 'line-title' }, [el('a', { href: routes.project(project.key) }, [el('span', { class: 'line-swatch', 'aria-hidden': 'true' }), el('span', { text: project.name })])])
+      : null,
+    // The project page states the status and lists its sessions in its own sections.
+    asTitle ? el('p', { class: 'line-status' + (project.online ? '' : ' is-offline') }, statusText(project, now)) : null,
+    asTitle ? sessionList(project, now) : null,
+    terminalText(data, now),
+  ]);
+  // Before the line starts: changes whose stage the files cannot give.
+  if (depot.length) {
+    label.append(el('div', { class: 'depot' }, [
+      el('p', { class: 'depot-title', text: '無法判斷階段' }),
+      el('ul', { class: 'trains' }, depot.map((change) => renderTrain(project, change, data, staleDays, now))),
+    ]));
+  }
+  row.append(label);
+
+  const stations = el('ol', { class: 'stations' }, [
+    el('span', { class: 'track', 'aria-hidden': 'true' }),
+    el('span', { class: 'run-segment', 'aria-hidden': 'true' }),
+  ]);
+  STATIONS.forEach((station, i) => {
+    const trains = trainsAt[i];
+    const li = el('li', { class: 'station' + (trains.length ? ' is-occupied' : ''), 'data-station': station.id }, [
+      el('span', { class: 'station-dot', 'aria-hidden': 'true' }),
+      el('span', { class: 'sr-only', text: `${station.label}: ${trains.length} 個 change` }),
+    ]);
+    if (trains.length) {
+      li.append(el('ul', { class: 'trains' }, trains.map((change) => renderTrain(project, change, data, staleDays, now))));
+    }
+    stations.append(li);
+  });
+  row.append(stations);
+
+  if (data.error) {
+    row.append(el('p', { class: 'line-note line-error' }, [marker('stop', 12), el('span', { text: '快照讀取失敗: ' + data.error })]));
+  } else if (!overview) {
+    row.append(el('p', { class: 'line-note', text: '正在讀取快照.' }));
+  } else if (overview.changes.length === 0) {
+    row.append(el('p', { class: 'line-note', text: '沒有進行中的 change. 用 tospec new change <name> 建立新的 change.' }));
+  }
+  return row;
+}
+
+function statusText(project, now) {
+  const snapshot = relTime(project.updatedAt, now);
+  if (!project.online) return [activityDot('offline'), el('span', { class: 'status-word', text: '離線' }), ` · 最後快照 ${snapshot}`];
+  const n = project.sessions.length;
+  return [activityDot(projectActivity(project)), `${n} 個 session · 快照 ${snapshot}`];
+}
+
+/** A button that opens a session's panel: its log, its question, a prompt box. */
+export function sessionButton(project, session, cls, children) {
+  const button = el('button', { type: 'button', class: cls, title: `開啟 session ${session.id} 的 log` }, children);
+  button.addEventListener('click', () => openSessionPanel(project.key, session.id));
+  return button;
+}
+
+/** Each live session as one line: its state and what it is doing, one click from its log. */
+function sessionList(project, now) {
+  if (!project.sessions.length) return null;
+  return el('ul', { class: 'line-sessions' }, project.sessions.map((session) => {
+    const status = sessionStatus(session);
+    const detail = sessionDetail(session, now);
+    return el('li', {}, [
+      sessionButton(project, session, 'session-chip is-' + status, [
+        activityDot(status),
+        el('span', { class: 'session-chip-state', text: ACTIVITY_LABEL[status] }),
+        detail ? el('span', { class: 'session-chip-detail', text: detail }) : null,
+      ]),
+    ]);
+  }));
+}
+
+function terminalText(data, now) {
+  const archived = data.archive && data.archive.changes;
+  if (!archived || archived.length === 0) return null;
+  const latest = archived[0];
+  const when = parseLooseDate(latest.stamp);
+  return el('p', { class: 'line-terminal' }, [`已歸檔 ${archived.length}`, when ? ` · 最近 ${relTime(when, now)}` : '']);
+}
+
+function renderTrain(project, change, data, staleDays, now) {
+  const signal = lineSignal(signalOf(change, staleDays, now), project.online);
+  const station = stationOf(change);
+  const detail = data.details.get(change.name);
+  const id = project.key + '/' + change.name;
+  const drawerId = 'train-' + project.key + '-' + change.name.replace(/[^a-z0-9_-]/gi, '_');
+  const open = expanded.has(id);
+
+  const toggle = el('button', {
+    type: 'button',
+    class: 'train-toggle',
+    'aria-expanded': open ? 'true' : 'false',
+    'aria-controls': drawerId,
+    title: open ? '收合細節' : '展開細節',
+  }, [icon('chevron', 14), el('span', { class: 'sr-only', text: '細節' })]);
+
+  const idle = signal === 'idle' ? ` · 閒置 ${idleDays(change, now)} 天` : '';
+  const gap = el('p', { class: 'train-gap' }, [el('span', { class: 'sr-only', text: SIGNAL_LABEL[signal] + ': ' })]);
+  if (signal === 'stop') {
+    // The parser's reason and the fix ride in the notice list and the drawer;
+    // the row keeps to the file and line, each kept whole.
+    const summary = unreadableInfo(change).summary;
+    const space = summary.indexOf(' ');
+    gap.append(
+      el('span', { class: 'badge-unreadable', text: '無法解析' }),
+      ' ',
+      el('span', { class: 'keep', text: summary.slice(0, space) }),
+      ' ',
+      el('span', { class: 'keep', text: summary.slice(space + 1) })
+    );
+  } else {
+    gap.append(gapOf(change, detail) + idle);
+  }
+
+  const drawer = el('div', { class: 'train-drawer', id: drawerId }, drawerContent(change, detail, now));
+  drawer.hidden = !open;
+
+  const item = el('li', { class: 'train signal-' + signal, 'data-train': id, 'data-station': station }, [
+    el('div', { class: 'train-head' }, [
+      marker(signal),
+      el('a', { class: 'train-name', href: routes.change(project.key, change.name), text: change.name }),
+      toggle,
+    ]),
+    miniRoute(station),
+    gap,
+    drawer,
+  ]);
+  toggle.addEventListener('click', () => {
+    const next = drawer.hidden;
+    drawer.hidden = !next;
+    toggle.setAttribute('aria-expanded', String(next));
+    toggle.title = next ? '收合細節' : '展開細節';
+    if (next) expanded.add(id);
+    else expanded.delete(id);
+    // Only planning trains preload their detail; the drawer fills in when it lands.
+    if (next && !detail) loadDetail(project.key, change.name);
+  });
+  return item;
+}
+
+/** Narrow layouts lose the shared station grid; each train carries its own four-stop strip. */
+function miniRoute(station) {
+  const at = stationIndex(station);
+  return el('span', { class: 'mini-route' + (station === UNKNOWN_STATION ? ' is-unknown' : ''), 'aria-hidden': 'true' }, [
+    ...STATIONS.map((s, i) => el('span', { class: 'mini-stop' + (i === at ? ' is-here' : at >= 0 && i < at ? ' is-passed' : '') })),
+    el('span', { class: 'mini-label', text: stationLabel(station) }),
+  ]);
+}
+
+function drawerContent(change, detail, now) {
+  const rows = [];
+  if (detail && detail.artifacts.length) {
+    rows.push(
+      el('ul', { class: 'artifact-chips', 'aria-label': 'artifact' }, detail.artifacts.map((a) =>
+        el('li', { class: 'artifact-chip status-' + a.status, title: a.missingDeps ? '等 ' + a.missingDeps.join(', ') : a.status }, [
+          el('span', { class: 'chip-dot', 'aria-hidden': 'true' }),
+          el('span', { text: a.id }),
+          el('span', { class: 'sr-only', text: ' ' + a.status }),
+        ])
+      ))
+    );
+  }
+  const { completed, total } = change.taskProgress;
+  if (total > 0) {
+    const meter = el('span', { class: 'meter', 'aria-hidden': 'true' }, [el('span', { class: 'meter-fill' })]);
+    meter.firstChild.style.setProperty('width', Math.round((completed / total) * 100) + '%');
+    rows.push(el('p', { class: 'drawer-line' }, [el('span', { class: 'drawer-key', text: 'task' }), meter, el('span', { class: 'num', text: `${completed}/${total}` })]));
+  }
+  rows.push(el('p', { class: 'drawer-line' }, [el('span', { class: 'drawer-key', text: '更新' }), relTime(change.lastModified, now)]));
+  if (change.goal) rows.push(el('p', { class: 'drawer-goal', text: change.goal }));
+  if (change.unreadable) {
+    const info = unreadableInfo(change);
+    rows.push(el('p', { class: 'train-reason', text: info.reason }));
+    rows.push(el('p', { class: 'drawer-goal' }, ['修正 ', el('code', { text: info.file }), ' 後, 下一次快照就會恢復.']));
+  }
+  return rows;
+}

package/assets/dashboard/views/project.js

@@ -0,0 +1,168 @@
+// One project: its line at full width, its live sessions, the four health
+// charts, and the lists the overview leaves out (specs, tickets, archive).
+
+import { el, note, paintLine, icon, activityDot } from '../lib/dom.js';
+import { STATIONS, staleDaysOf, relTime, formatStamp, sessionStatus, sessionDetail, ACTIVITY_LABEL } from '../lib/derive.js';
+import { store, dataOf, slotOf, projectByKey, loadDecisions } from '../lib/store.js';
+import { transitChart, archiveRateChart, decisionTimeline, specSizeChart } from '../lib/charts.js';
+import { routes } from '../lib/routes.js';
+import { renderLine, sessionButton } from './home.js';
+
+export function projectHeader(project, active) {
+  const data = dataOf(project.key);
+  const now = Date.now();
+  const decisionCount = data.decisions ? data.decisions.length : null;
+  const head = paintLine(el('header', { class: 'project-head' }), slotOf(project.key));
+  head.append(
+    el('h1', { class: 'page-title project-title' }, [el('span', { class: 'line-swatch', 'aria-hidden': 'true' }), el('span', { text: project.name })]),
+    el('p', { class: 'project-root mono', text: project.root, title: project.root }),
+    el('p', { class: 'project-status' + (project.online ? '' : ' is-offline') }, project.online
+      ? [el('span', { class: 'status-dot', 'aria-hidden': 'true' }), `${project.sessions.length} 個 session 連線中 · 快照 ${relTime(project.updatedAt, now)}`]
+      : [el('span', { class: 'status-word', text: '離線' }), ` · 最後快照 ${relTime(project.updatedAt, now)}. 沒有 session 時只能讀快照; 文件內容與勾 task 要等 session 回來.`]),
+    el('nav', { class: 'subnav', 'aria-label': 'project' }, [
+      el('a', { href: routes.project(project.key), class: 'subnav-link', 'aria-current': active === 'overview' ? 'page' : null, text: '總覽' }),
+      el('a', { href: routes.decisions(project.key), class: 'subnav-link', 'aria-current': active === 'decisions' ? 'page' : null }, ['Decisions', decisionCount != null ? el('span', { class: 'count', text: String(decisionCount) }) : null]),
+    ])
+  );
+  return head;
+}
+
+export function renderProject(route) {
+  const project = projectByKey(route.key);
+  if (!project) return unknownProject(route.key);
+  const data = dataOf(project.key);
+  if (!data.decisions && !data.decisionsError) loadDecisions(project.key);
+  const now = Date.now();
+  const page = paintLine(el('div', { class: 'page page-project' }), slotOf(project.key));
+  page.append(projectHeader(project, 'overview'));
+
+  const map = el('section', { class: 'map map-single', 'aria-label': project.name + ' 的 change 階段' }, [
+    el('div', { class: 'map-head', 'aria-hidden': 'true' }, [el('span', { class: 'map-head-label' }), ...STATIONS.map((s) => el('span', { class: 'map-head-station' }, [el('strong', { text: s.label }), el('span', { class: 'map-head-hint', text: s.hint })]))]),
+    renderLine(project, now, { asTitle: false }),
+  ]);
+  page.append(map);
+  page.append(sessionsSection(project, now));
+
+  const overview = data.overview;
+  if (!overview) {
+    page.append(note(data.error ? '快照讀取失敗: ' + data.error : '正在讀取快照.'));
+    return page;
+  }
+  if (data.activity && data.activity.available && data.activity.specDrift) {
+    page.append(el('p', { class: 'drift-note', text: '近 7 天程式碼有變動, tospec/ 沒有. 實作可能已經走在 spec 前面.' }));
+  }
+
+  const charts = el('section', { class: 'charts', 'aria-label': '圖表' }, [
+    transitChart(overview.changes, staleDaysOf(data), now),
+    archiveRateChart((data.archive && data.archive.changes) || [], now),
+    data.decisions
+      ? decisionTimeline(project.key, data.decisions, now)
+      : el('figure', { class: 'chart chart-empty' }, [el('figcaption', { class: 'chart-caption' }, [el('h3', { class: 'chart-title', text: 'ADR 時間軸' })]), note(data.decisionsError ? '決策讀取失敗: ' + data.decisionsError : '正在讀取決策.')]),
+    specSizeChart(project.key, overview.specs),
+  ]);
+  page.append(charts);
+
+  page.append(
+    el('div', { class: 'project-lists' }, [
+      specsList(project.key, overview.specs),
+      ticketsList(project.key, overview.tickets),
+      archiveList(data.archive, now),
+    ])
+  );
+  return page;
+}
+
+function unknownProject(key) {
+  return el('div', { class: 'page' }, [
+    el('h1', { class: 'page-title', text: '找不到這個 project' }),
+    note(store.projectsLoaded ? `hub 上沒有 key 為 ${key} 的 project. 它的 session 可能還沒向重新啟動的 hub 註冊.` : '正在讀取 project 清單.'),
+    el('p', {}, [el('a', { href: routes.home(), text: '回到總覽' })]),
+  ]);
+}
+
+function listSection(title, count, body) {
+  return el('section', { class: 'list-section' }, [
+    el('h2', { class: 'section-title' }, [title, count != null ? el('span', { class: 'count', text: String(count) }) : null]),
+    body,
+  ]);
+}
+
+function specsList(key, specs) {
+  if (!specs.length) return listSection('Specs', 0, note('還沒有 spec.'));
+  return listSection('Specs', specs.length, el('ul', { class: 'plain-list' }, specs.map((s) =>
+    el('li', { class: 'row' }, [el('a', { class: 'row-name', href: routes.spec(key, s.id), text: s.id }), el('span', { class: 'row-meta num', text: `${s.requirementCount} 條 requirement` })])
+  )));
+}
+
+function ticketsList(key, tickets) {
+  if (!tickets.length) return listSection('Tickets', 0, note('沒有進行中的 ticket.'));
+  return listSection('Tickets', tickets.length, el('ul', { class: 'plain-list' }, tickets.map((t) =>
+    el('li', { class: 'row ticket-row' + (t.parseError ? ' row-error' : '') }, [
+      el('span', { class: 'row-time mono', text: formatStamp(t.date) }),
+      el('span', { class: 'row-name', text: t.title }),
+      t.type ? el('span', { class: 'tag', text: t.type }) : null,
+      t.change ? el('a', { class: 'ticket-change', href: routes.change(key, t.change), text: t.change }) : null,
+      t.parseError
+        ? el('span', { class: 'badge-unreadable', text: 'frontmatter 無法解析' })
+        : t.summary ? el('span', { class: 'ticket-summary', text: t.summary }) : null,
+    ])
+  )));
+}
+
+/**
+ * Every live session by its full id, so the person can tell which terminal is
+ * which (Claude Code shows the id in `/status`), with its state beside it.
+ */
+function sessionsSection(project, now) {
+  const section = el('section', { class: 'sessions-board', 'aria-labelledby': 'sessions-title' }, [
+    el('h2', { id: 'sessions-title', class: 'section-title' }, ['Sessions', el('span', { class: 'count', text: String(project.sessions.length) })]),
+  ]);
+  if (!project.sessions.length) {
+    section.append(note('沒有 Claude Code session 連線, 畫面是最後一次快照.'));
+    return section;
+  }
+  section.append(el('ul', { class: 'plain-list session-list' }, project.sessions.map((s) => sessionRow(project, s, now))));
+  return section;
+}
+
+function sessionRow(project, session, now) {
+  const status = sessionStatus(session);
+  const copy = el('button', { type: 'button', class: 'icon-button', title: '複製 session id' }, [icon('copy', 14), el('span', { class: 'sr-only', text: '複製 session id' })]);
+  copy.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(session.id);
+      copy.title = '已複製';
+    } catch {
+      copy.title = '無法複製, 請手動選取';
+    }
+  });
+  const detail = sessionDetail(session, now);
+  return el('li', { class: 'session-row is-' + status }, [
+    el('span', { class: 'session-state' }, [activityDot(status), el('span', { text: ACTIVITY_LABEL[status] })]),
+    el('span', { class: 'session-main' }, [
+      el('span', { class: 'session-id mono', text: session.id }),
+      detail ? el('span', { class: 'session-detail', text: detail }) : null,
+    ]),
+    // Always a cell, so every row's time and buttons line up in their columns.
+    session.id === project.updatedBy ? el('span', { class: 'tag tag-strong', text: '目前快照' }) : el('span'),
+    el('span', { class: 'row-time', text: '連線於 ' + relTime(session.connectedAt, now) }),
+    el('span', { class: 'session-actions' }, [
+      copy,
+      sessionButton(project, session, 'button button-small', [icon('log', 14), el('span', { text: status === 'waiting' ? '回覆' : 'Log' })]),
+    ]),
+  ]);
+}
+
+function archiveList(archive, now) {
+  const changes = (archive && archive.changes) || [];
+  if (!changes.length) return listSection('Archive', 0, note('還沒有歸檔的 change.'));
+  const LIMIT = 12;
+  const list = el('ul', { class: 'plain-list' }, changes.slice(0, LIMIT).map((c) =>
+    el('li', { class: 'row archive-row' }, [
+      el('span', { class: 'row-name', text: c.name || c.dirName }),
+      el('span', { class: 'row-time mono', text: formatStamp(c.stamp) }),
+    ])
+  ));
+  const more = changes.length > LIMIT ? note(`另有 ${changes.length - LIMIT} 個較早的歸檔, 在 tospec/changes/archive/.`) : null;
+  return listSection('Archive', changes.length, el('div', {}, [list, more]));
+}