feat(render): renderBoard + formatAge + partition (17 tests)

Pure renderer logic for the 5-col kanban view. - formatAge: m/h/d/w/mo/y with calendar-month arithmetic - partitionByStatus: canonical 5-col order - renderBoard: 5 columns, cards with data-slug/data-raw-url/data-archived, HTML-escaped fields, JSON embed escaped via \uXXXX (XSS-safe) - archived flag: done > 14d hidden by default (toggle visible) - align task acceptance emoji set to ⚪🔴🟡🔵🟢 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 14:43:29 +03:00
parent d093693795
commit 5bbbd0b533
3 changed files with 320 additions and 1 deletions
--- a/.tasks/board-viewer-html-render.md
+++ b/.tasks/board-viewer-html-render.md
@@ -15,7 +15,7 @@

 ## Acceptance criteria

- **5 колонок** по статусам: ⚪ open / 🟡 in-progress / 🟣 paused / 🔴 blocked / 🟢 done. Названия колонок — emoji + слово.
+- **5 колонок** по статусам: ⚪ open / 🔴 in-progress / 🟡 paused / 🔵 blocked / 🟢 done. Названия колонок — emoji + слово.
 - **Карточка:**
  - title (truncate на 80 chars в default-view),
  - project badge (e.g. `books`, `board-viewer`),
--- a/src/render.ts
+++ b/src/render.ts
@@ -0,0 +1,163 @@
+import type { Status, StatusEmoji } from './parser.ts';
+import type { TaskRecord } from './reader.ts';
+
+export interface StatusColumn {
+  status: Status;
+  emoji: StatusEmoji;
+  label: string;
+  records: TaskRecord[];
+}
+
+export interface RenderOptions {
+  generatedAt: Date;
+  archiveAfterDays?: number;
+}
+
+const COLUMN_ORDER: Array<{ status: Status; emoji: StatusEmoji; label: string }> = [
+  { status: 'open', emoji: '⚪', label: 'open' },
+  { status: 'in_progress', emoji: '🔴', label: 'in-progress' },
+  { status: 'paused', emoji: '🟡', label: 'paused' },
+  { status: 'blocked', emoji: '🔵', label: 'blocked' },
+  { status: 'done', emoji: '🟢', label: 'done' },
+];
+
+const TITLE_MAX = 80;
+const DEFAULT_ARCHIVE_DAYS = 14;
+const MS_PER_DAY = 86_400_000;
+
+export function formatAge(iso: string | null, now: Date): string | null {
+  if (iso === null) return null;
+  const then = new Date(iso);
+  const diffMs = Math.max(0, now.getTime() - then.getTime());
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(diffMs / 3_600_000);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(diffMs / MS_PER_DAY);
+  if (days < 7) return `${days}d`;
+  if (days < 30) return `${Math.floor(days / 7)}w`;
+  const months = calendarMonthsBetween(then, now);
+  if (months < 12) return `${months}mo`;
+  return `${Math.floor(months / 12)}y`;
+}
+
+function calendarMonthsBetween(from: Date, to: Date): number {
+  let months =
+    (to.getUTCFullYear() - from.getUTCFullYear()) * 12 +
+    (to.getUTCMonth() - from.getUTCMonth());
+  if (to.getUTCDate() < from.getUTCDate()) months -= 1;
+  return Math.max(0, months);
+}
+
+export function partitionByStatus(records: ReadonlyArray<TaskRecord>): StatusColumn[] {
+  return COLUMN_ORDER.map(({ status, emoji, label }) => ({
+    status,
+    emoji,
+    label,
+    records: records.filter((r) => r.status === status),
+  }));
+}
+
+export function renderBoard(records: ReadonlyArray<TaskRecord>, opts: RenderOptions): string {
+  const now = opts.generatedAt;
+  const archiveDays = opts.archiveAfterDays ?? DEFAULT_ARCHIVE_DAYS;
+  const columns = partitionByStatus(records);
+
+  const columnsHtml = columns
+    .map((col) => renderColumn(col, now, archiveDays))
+    .join('\n');
+
+  const recordsJson = escapeForScript(JSON.stringify(records));
+  const generated = now.toISOString();
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Board Viewer</title>
+  <link rel="stylesheet" href="static/board.css">
+</head>
+<body>
+  <header data-generated="${attr(generated)}">
+    <h1>Tasks</h1>
+    <div class="controls">
+      <input class="filter" type="search" placeholder="filter slug / title / project" />
+      <label><input type="checkbox" class="toggle-archived"> show archived</label>
+      <label><input type="checkbox" class="toggle-grouping"> group by project</label>
+      <span class="refresh-info"></span>
+    </div>
+  </header>
+  <main class="board">
+${columnsHtml}
+  </main>
+  <aside class="drawer" hidden>
+    <button class="drawer-close" type="button">×</button>
+    <div class="drawer-content"></div>
+  </aside>
+  <script id="records" type="application/json">${recordsJson}</script>
+  <script type="module" src="static/board.js"></script>
+</body>
+</html>
+`;
+}
+
+function renderColumn(col: StatusColumn, now: Date, archiveDays: number): string {
+  const cards = col.records
+    .map((r) => renderCard(r, now, archiveDays))
+    .join('\n');
+  return `    <section class="col" data-status="${attr(col.status)}">
+      <h2>${col.emoji} ${escapeHtml(col.label)} <span class="count">${col.records.length}</span></h2>
+      <ul class="cards">
+${cards}
+      </ul>
+    </section>`;
+}
+
+function renderCard(r: TaskRecord, now: Date, archiveDays: number): string {
+  const age = formatAge(r.last_commit_iso, now);
+  const archived = r.status === 'done' && isOlderThanDays(r.last_commit_iso, now, archiveDays);
+  const truncatedTitle = truncate(r.title, TITLE_MAX);
+  return `        <li class="card" data-slug="${attr(r.slug)}" data-raw-url="${attr(r.raw_url)}" data-archived="${archived ? 'true' : 'false'}">
+          <div class="card-title">${escapeHtml(truncatedTitle)}</div>
+          <div class="card-meta">
+            <span class="badge project">${escapeHtml(r.project)}</span>
+            ${age === null ? '' : `<span class="age">${escapeHtml(age)}</span>`}
+          </div>
+        </li>`;
+}
+
+function isOlderThanDays(iso: string | null, now: Date, days: number): boolean {
+  if (iso === null) return false;
+  const diffMs = now.getTime() - new Date(iso).getTime();
+  return diffMs > days * MS_PER_DAY;
+}
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, max) + '…';
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function attr(s: string): string {
+  return escapeHtml(s);
+}
+
+const LS = String.fromCharCode(0x2028);
+const PS = String.fromCharCode(0x2029);
+
+function escapeForScript(json: string): string {
+  return json
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026')
+    .split(LS).join('\\u2028')
+    .split(PS).join('\\u2029');
+}
--- a/tests/render.test.ts
+++ b/tests/render.test.ts
@@ -0,0 +1,156 @@
+import { describe, expect, test } from 'vitest';
+import type { TaskRecord } from '../src/reader.ts';
+import { formatAge, partitionByStatus, renderBoard } from '../src/render.ts';
+
+function rec(overrides: Partial<TaskRecord>): TaskRecord {
+  return {
+    slug: 'sample',
+    project: 'demo',
+    project_owner: 'o',
+    status: 'open',
+    status_emoji: '⚪',
+    title: 'sample title',
+    where_stopped: null,
+    next_action: null,
+    blocker: null,
+    branch: 'master',
+    last_commit_iso: null,
+    raw_url: 'https://example/raw',
+    ...overrides,
+  };
+}
+
+describe('formatAge', () => {
+  const now = new Date('2026-05-22T12:00:00Z');
+
+  test.each([
+    ['2026-05-22T11:00:00Z', '1h'],
+    ['2026-05-22T11:59:00Z', '1m'],
+    ['2026-05-21T12:00:00Z', '1d'],
+    ['2026-05-19T12:00:00Z', '3d'],
+    ['2026-05-08T12:00:00Z', '2w'],
+    ['2026-02-22T12:00:00Z', '3mo'],
+    ['2025-05-22T12:00:00Z', '1y'],
+  ])('formats %s relative to now as %s', (iso, expected) => {
+    expect(formatAge(iso, now)).toBe(expected);
+  });
+
+  test('returns null when iso is null', () => {
+    expect(formatAge(null, now)).toBeNull();
+  });
+
+  test('returns "0m" for sub-minute differences', () => {
+    expect(formatAge('2026-05-22T11:59:30Z', now)).toBe('0m');
+  });
+});
+
+describe('partitionByStatus', () => {
+  test('groups records into 5 columns in canonical order', () => {
+    const records = [
+      rec({ slug: 'a', status: 'done', status_emoji: '🟢' }),
+      rec({ slug: 'b', status: 'in_progress', status_emoji: '🔴' }),
+      rec({ slug: 'c', status: 'open', status_emoji: '⚪' }),
+      rec({ slug: 'd', status: 'paused', status_emoji: '🟡' }),
+      rec({ slug: 'e', status: 'blocked', status_emoji: '🔵' }),
+      rec({ slug: 'f', status: 'open', status_emoji: '⚪' }),
+    ];
+
+    const cols = partitionByStatus(records);
+
+    expect(cols.map((c) => c.status)).toEqual([
+      'open',
+      'in_progress',
+      'paused',
+      'blocked',
+      'done',
+    ]);
+    expect(cols[0]!.records.map((r) => r.slug)).toEqual(['c', 'f']);
+    expect(cols[4]!.records.map((r) => r.slug)).toEqual(['a']);
+  });
+});
+
+describe('renderBoard', () => {
+  const now = new Date('2026-05-22T12:00:00Z');
+
+  test('includes a <section> per status with canonical emoji label', () => {
+    const html = renderBoard([], { generatedAt: now });
+
+    expect(html).toContain('data-status="open"');
+    expect(html).toContain('data-status="in_progress"');
+    expect(html).toContain('data-status="paused"');
+    expect(html).toContain('data-status="blocked"');
+    expect(html).toContain('data-status="done"');
+    expect(html).toContain('⚪');
+    expect(html).toContain('🔴');
+    expect(html).toContain('🟡');
+    expect(html).toContain('🔵');
+    expect(html).toContain('🟢');
+  });
+
+  test('renders a card per record with data-slug and data-raw-url', () => {
+    const records = [
+      rec({
+        slug: 'task-a',
+        title: 'first task',
+        raw_url: 'https://git.example/raw/task-a.md',
+        last_commit_iso: '2026-05-19T12:00:00Z',
+      }),
+    ];
+
+    const html = renderBoard(records, { generatedAt: now });
+
+    expect(html).toContain('data-slug="task-a"');
+    expect(html).toContain('data-raw-url="https://git.example/raw/task-a.md"');
+    expect(html).toContain('first task');
+    expect(html).toContain('3d');
+  });
+
+  test('truncates title longer than 80 chars with ellipsis in the card body', () => {
+    const longTitle = 'x'.repeat(100);
+    const html = renderBoard([rec({ title: longTitle })], { generatedAt: now });
+    const cardMatch = /<div class="card-title">([^<]*)<\/div>/.exec(html);
+
+    expect(cardMatch).not.toBeNull();
+    expect(cardMatch![1]).toBe('x'.repeat(80) + '…');
+  });
+
+  test('escapes HTML special chars in user-provided fields', () => {
+    const html = renderBoard(
+      [rec({ slug: 'safe', title: '<script>alert(1)</script>' })],
+      { generatedAt: now },
+    );
+
+    expect(html).not.toContain('<script>alert(1)');
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+  });
+
+  test('marks done tasks older than 14 days as archived (data-archived="true")', () => {
+    const old = '2026-05-01T12:00:00Z';
+    const fresh = '2026-05-20T12:00:00Z';
+    const html = renderBoard(
+      [
+        rec({ slug: 'old-done', status: 'done', status_emoji: '🟢', last_commit_iso: old }),
+        rec({ slug: 'fresh-done', status: 'done', status_emoji: '🟢', last_commit_iso: fresh }),
+      ],
+      { generatedAt: now },
+    );
+
+    expect(html).toMatch(/data-slug="old-done"[^>]*data-archived="true"/);
+    expect(html).toMatch(/data-slug="fresh-done"[^>]*data-archived="false"/);
+  });
+
+  test('embeds records JSON in <script id="records"> for client-side use', () => {
+    const records = [rec({ slug: 'embed-test' })];
+
+    const html = renderBoard(records, { generatedAt: now });
+
+    expect(html).toMatch(/<script[^>]+id="records"[^>]+type="application\/json"[^>]*>/);
+    expect(html).toContain('"embed-test"');
+  });
+
+  test('writes generation timestamp as data-generated attribute on the header', () => {
+    const html = renderBoard([], { generatedAt: now });
+
+    expect(html).toContain('data-generated="2026-05-22T12:00:00.000Z"');
+  });
+});