@tinyviber/a2h 0.1.0

package/dist/renderer/assets/js/blocks.js

@@ -0,0 +1,301 @@
+// Presentation block rendering.
+//
+// Every block kind a producer can author is drawn by a renderer registered
+// here. Adding a new visual language to A2H means registering one more
+// function — no changes to the router, the views, or the server.
+//
+// Unknown block types are not an error: they render as a quiet, inspectable
+// fallback so a producer can adopt a newer block kind without breaking an
+// older viewer.
+
+import { el, append } from './dom.js';
+import { statusLabel, statusTone, fmtStamp, prettify } from './format.js';
+import { hrefFor } from './router.js';
+
+const renderers = new Map();
+
+export function registerBlock(type, renderer) {
+  renderers.set(type, renderer);
+}
+
+/**
+ * @param blocks  resolved blocks from the presentation payload
+ * @param ctx     { data, renderActions(ids, options) }
+ * @param options { card: boolean } — whether each block gets its own surface
+ */
+export function renderBlocks(blocks, ctx, options = {}) {
+  const out = [];
+  for (const block of blocks || []) {
+    const node = renderBlock(block, ctx, options);
+    if (node) out.push(node);
+  }
+  return out;
+}
+
+export function renderBlock(block, ctx, options = {}) {
+  if (!block || typeof block.type !== 'string') return null;
+  const renderer = renderers.get(block.type);
+  const body = renderer ? renderer(block, ctx) : unknownBlock(block);
+  if (!body) return null;
+  return options.card ? el('section', { class: 'block-card' }, [body]) : body;
+}
+
+function headline(block) {
+  if (!block.title) return null;
+  return el('h3', { class: 'block-title', text: block.title });
+}
+
+function unknownBlock(block) {
+  return el('div', { class: 'block-unknown' }, [
+    el('p', {
+      class: 'notice-inline',
+      text: `This viewer does not know how to draw a "${block.type}" block.`,
+    }),
+    el('details', {}, [
+      el('summary', { text: 'Raw block' }),
+      el('pre', { class: 'raw', text: JSON.stringify(block, null, 2) }),
+    ]),
+  ]);
+}
+
+// ---------------------------------------------------------------- text-like
+
+registerBlock('text', (block) => {
+  const tone = block.tone && block.tone !== 'neutral' ? ` tone-${block.tone}` : '';
+  return el('div', { class: 'block block-text' }, [
+    headline(block),
+    el('p', { class: `block-body${tone}`, text: block.text == null ? '' : String(block.text) }),
+  ]);
+});
+
+registerBlock('markdown', (block) => {
+  // `html` is rendered server-side by the same conservative renderer used for
+  // artifacts (raw HTML escaped, unsafe link protocols rejected).
+  const prose = el('div', { class: 'prose prose-block' });
+  prose.innerHTML = typeof block.html === 'string' ? block.html : '';
+  return el('div', { class: 'block block-markdown' }, [headline(block), prose]);
+});
+
+registerBlock('notice', (block) => {
+  const tone = block.tone || 'info';
+  return el('div', { class: `block-notice tone-${tone}` }, [
+    el('span', { class: 'notice-label', text: tone === 'error' ? 'Error' : tone === 'warn' ? 'Warning' : 'Note' }),
+    el('span', { class: 'notice-body', text: block.text == null ? '' : String(block.text) }),
+  ]);
+});
+
+// -------------------------------------------------------------------- lists
+
+registerBlock('list', (block) => {
+  const items = Array.isArray(block.items) ? block.items : [];
+  const list = el(block.ordered ? 'ol' : 'ul', { class: 'block-list' });
+  for (const item of items) {
+    if (!item || typeof item !== 'object') continue;
+    const row = el('li', { class: 'block-list-item' }, [
+      el('div', { class: 'block-list-head' }, [
+        item.href && isSafeHref(item.href) ? linkNode(item.href, item.title) : el('span', { class: 'block-list-title', text: item.title }),
+        item.status ? statusPill(item.status) : null,
+      ]),
+      item.detail ? el('p', { class: 'block-list-detail', text: item.detail }) : null,
+      item.meta ? el('p', { class: 'block-list-meta', text: item.meta }) : null,
+    ]);
+    list.appendChild(row);
+  }
+  return el('div', { class: 'block block-list' }, [headline(block), list]);
+});
+
+function linkNode(href, text) {
+  return el('a', { class: 'block-list-title link', href: resolveHref(href), text: text });
+}
+
+// The same allowlist the server applies before this block is sent, applied
+// again on the way to the DOM. `javascript:`, `data:`, `file:`, `vbscript:`
+// and protocol-relative targets are not links here.
+const SAFE_HREF_SCHEME = /^(?:https?|mailto):/i;
+const HAS_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+
+export function isSafeHref(href) {
+  if (typeof href !== 'string') return false;
+  const value = href.trim();
+  if (value === '') return false;
+  if (value.startsWith('#')) return true;
+  if (value.startsWith('//')) return false;
+  if (HAS_SCHEME.test(value)) return SAFE_HREF_SCHEME.test(value);
+  return true;
+}
+
+/** A producer may write a workspace path; we route it as an artifact. */
+export function resolveHref(href) {
+  if (typeof href !== 'string') return '#/';
+  const value = href.trim();
+  if (value === '') return '#/';
+  if (value.startsWith('#')) return value;
+  // An unsafe href loses its link rather than gaining a wrong one.
+  if (!isSafeHref(value)) return '#/';
+  if (HAS_SCHEME.test(value)) return value;
+  return hrefFor('artifact', value);
+}
+
+// ------------------------------------------------------------------- tables
+
+registerBlock('table', (block) => {
+  const columns = Array.isArray(block.columns) ? block.columns : [];
+  const rows = Array.isArray(block.rows) ? block.rows : [];
+  const table = el('table', { class: 'data-table' });
+  const thead = el('thead');
+  const headRow = el('tr');
+  for (const col of columns) {
+    headRow.appendChild(
+      el('th', { class: col.align === 'right' ? 'align-right' : '', text: col.label || col.key }),
+    );
+  }
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+
+  const tbody = el('tbody');
+  for (const row of rows) {
+    const tr = el('tr');
+    for (const col of columns) {
+      const value = row ? row[col.key] : '';
+      tr.appendChild(
+        el('td', {
+          class: col.align === 'right' ? 'align-right' : '',
+          text: value == null ? '' : String(value),
+        }),
+      );
+    }
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+
+  return el('div', { class: 'block block-table' }, [
+    headline(block),
+    el('div', { class: 'table-wrap' }, [table]),
+    block.note ? el('p', { class: 'block-note', text: block.note }) : null,
+  ]);
+});
+
+// -------------------------------------------------------------- comparison
+
+registerBlock('comparison', (block) => {
+  const options = Array.isArray(block.options) ? block.options : [];
+  const grid = el('div', { class: 'comparison' });
+  for (const option of options) {
+    const tone = option.tone && option.tone !== 'neutral' ? ` tone-${option.tone}` : '';
+    const col = el('div', { class: `comparison-option${tone}` }, [
+      el('h4', { class: 'comparison-title', text: option.title }),
+      option.summary ? el('p', { class: 'comparison-summary', text: option.summary }) : null,
+    ]);
+    const facts = Array.isArray(option.facts) ? option.facts : [];
+    if (facts.length) {
+      const dl = el('dl', { class: 'kv' });
+      for (const fact of facts) {
+        dl.appendChild(el('dt', { text: fact.label }));
+        dl.appendChild(el('dd', { text: fact.value == null ? '' : String(fact.value) }));
+      }
+      col.appendChild(dl);
+    }
+    grid.appendChild(col);
+  }
+  return el('div', { class: 'block block-comparison' }, [
+    headline(block),
+    grid,
+    block.conclusion ? el('p', { class: 'block-conclusion', text: block.conclusion }) : null,
+  ]);
+});
+
+// ------------------------------------------------------------------ metrics
+
+registerBlock('metrics', (block) => {
+  const items = Array.isArray(block.items) ? block.items : [];
+  const grid = el('div', { class: 'metrics' });
+  for (const metric of items) {
+    const tone = metric.tone && metric.tone !== 'neutral' ? ` tone-${metric.tone}` : '';
+    grid.appendChild(
+      el('div', { class: `metric${tone}` }, [
+        el('span', { class: 'metric-label', text: metric.label }),
+        el('span', { class: 'metric-value' }, [
+          String(metric.value == null ? '' : metric.value),
+          metric.unit ? el('span', { class: 'metric-unit', text: metric.unit }) : null,
+        ]),
+        metric.delta ? el('span', { class: 'metric-delta', text: metric.delta }) : null,
+      ]),
+    );
+  }
+  return el('div', { class: 'block block-metrics' }, [headline(block), grid]);
+});
+
+// ----------------------------------------------------------------- timeline
+
+registerBlock('timeline', (block) => {
+  const items = Array.isArray(block.items) ? block.items : [];
+  const list = el('ol', { class: 'timeline' });
+  for (const item of items) {
+    const tone = item.status ? statusTone(item.status) : 'neutral';
+    list.appendChild(
+      el('li', { class: 'timeline-item' }, [
+        el('span', { class: `timeline-dot tone-${tone}` }),
+        el('div', { class: 'timeline-body' }, [
+          el('div', { class: 'timeline-head' }, [
+            el('span', { class: 'timeline-title', text: item.title }),
+            item.at ? el('span', { class: 'timeline-at', text: fmtStamp(item.at) }) : null,
+          ]),
+          item.detail ? el('p', { class: 'timeline-detail', text: item.detail }) : null,
+        ]),
+      ]),
+    );
+  }
+  return el('div', { class: 'block block-timeline' }, [headline(block), list]);
+});
+
+// ------------------------------------------------------------------- status
+
+registerBlock('status', (block) => {
+  return el('div', { class: 'block block-status' }, [
+    headline(block),
+    el('div', { class: 'status-band' }, [
+      statusPill(block.status),
+      block.detail ? el('span', { class: 'status-detail', text: block.detail }) : null,
+    ]),
+  ]);
+});
+
+registerBlock('keyvalue', (block) => {
+  const items = Array.isArray(block.items) ? block.items : [];
+  const dl = el('dl', { class: 'kv' });
+  for (const item of items) {
+    dl.appendChild(el('dt', { text: item.key }));
+    dl.appendChild(el('dd', { class: item.mono ? 'mono' : '', text: item.value == null ? '' : String(item.value) }));
+  }
+  return el('div', { class: 'block block-kv' }, [headline(block), dl]);
+});
+
+// ------------------------------------------------------------------ actions
+
+registerBlock('actions', (block, ctx) => {
+  const ids = Array.isArray(block.ids) ? block.ids : [];
+  if (!ctx || !ctx.renderActions) return null;
+  const node = ctx.renderActions(ids, { compact: true });
+  if (!node) return null;
+  return el('div', { class: 'block block-actions' }, [headline(block), node]);
+});
+
+// -------------------------------------------------------------------- atoms
+
+export function statusPill(status) {
+  const tone = statusTone(status);
+  return el('span', { class: `status-pill tone-${tone}` }, [
+    el('span', { class: 'status-dot' }),
+    statusLabel(status),
+  ]);
+}
+
+export function tagRow(tags) {
+  const row = el('div', { class: 'card-tags' });
+  for (const tag of tags || []) {
+    row.appendChild(el('span', { class: `tag tag-${String(tag).toLowerCase()}`, text: tag }));
+  }
+  return row;
+}
+
+export { append, prettify };

package/dist/renderer/assets/js/bus.js

@@ -0,0 +1,21 @@
+// Minimal event bus, so views never import each other.
+
+const listeners = new Map();
+
+export function subscribe(event, handler) {
+  if (!listeners.has(event)) listeners.set(event, new Set());
+  listeners.get(event).add(handler);
+  return () => listeners.get(event).delete(handler);
+}
+
+export function emit(event) {
+  const set = listeners.get(event);
+  if (!set) return;
+  for (const handler of set) {
+    try {
+      handler();
+    } catch (err) {
+      console.error(`a2h: listener for "${event}" failed`, err);
+    }
+  }
+}

package/dist/renderer/assets/js/cards.js

@@ -0,0 +1,137 @@
+// Reusable surfaces: artifact cards, task cards, section headings.
+// All of them are quiet containers — one card is one reading unit.
+
+import { el } from './dom.js';
+import { fmtBytes, fmtStamp, kindLabel, relTime, statusLabel, statusTone, fmtDuration } from './format.js';
+import { statusPill, tagRow } from './blocks.js';
+import { hrefFor } from './router.js';
+import { renderActions } from './actions.js';
+
+export function artifactCard(view) {
+  const card = el('a', { class: 'card', href: hrefFor('artifact', view.id) });
+  card.appendChild(el('div', { class: 'card-kind', text: kindLabel(view.kind) }));
+  if (view.tags && view.tags.length) card.appendChild(tagRow(view.tags));
+  card.appendChild(el('h3', { class: 'card-title', text: view.title }));
+  if (view.summary) card.appendChild(el('p', { class: 'card-summary', text: view.summary }));
+  const foot = el('div', { class: 'card-foot' });
+  if (view.meta && view.meta.size != null) foot.appendChild(el('span', { text: fmtBytes(view.meta.size) }));
+  if (view.meta && view.meta.mtimeMs) foot.appendChild(el('span', { text: relTime(view.meta.mtimeMs) }));
+  if (foot.childNodes.length) card.appendChild(foot);
+  return card;
+}
+
+export function cardGrid(views) {
+  const grid = el('div', { class: 'card-grid' });
+  for (const view of views) grid.appendChild(artifactCard(view));
+  return grid;
+}
+
+export function sectionHead(title, count, options = {}) {
+  const head = el('div', { class: 'section-head' }, [
+    el('h2', { class: 'section-title', text: title }),
+  ]);
+  if (count != null) {
+    head.appendChild(el('span', { class: 'section-count', text: `${count} item${count === 1 ? '' : 's'}` }));
+  }
+  if (options.explicit) {
+    head.appendChild(el('span', { class: 'section-flag', text: 'declared' }));
+  }
+  return head;
+}
+
+/**
+ * A task is the biggest unit a human judges. The card leads with state and the
+ * single most recent run, because that is what "should I look at this?" needs.
+ */
+export function taskCard(task, options = {}) {
+  const card = el('a', { class: 'card card-task', href: hrefFor('task', task.id) });
+  const head = el('div', { class: 'task-head' }, [
+    el('h3', { class: 'card-title', text: task.title }),
+    statusPill(task.status),
+  ]);
+  card.appendChild(head);
+  if (task.summary) card.appendChild(el('p', { class: 'card-summary', text: task.summary }));
+
+  if (task.progress && task.progress.total > 0) {
+    card.appendChild(progressBar(task.progress));
+  }
+
+  if (task.metrics && task.metrics.length) {
+    const row = el('div', { class: 'card-metrics' });
+    for (const metric of task.metrics.slice(0, 3)) {
+      row.appendChild(
+        el('span', { class: 'card-metric' }, [
+          el('span', { class: 'card-metric-value', text: String(metric.value) + (metric.unit ? metric.unit : '') }),
+          el('span', { class: 'card-metric-label', text: metric.label }),
+        ]),
+      );
+    }
+    card.appendChild(row);
+  }
+
+  const latest = task.runs && task.runs[0];
+  if (latest) {
+    card.appendChild(
+      el('div', { class: 'card-run' }, [
+        el('span', { class: 'card-run-dot ' + `tone-${statusTone(latest.status)}` }),
+        el('span', { text: `Last run: ${latest.title}` }),
+        latest.startedAt ? el('span', { class: 'muted', text: fmtStamp(latest.startedAt) }) : null,
+      ]),
+    );
+  }
+
+  const foot = el('div', { class: 'card-foot' });
+  if (task.artifacts.length) foot.appendChild(el('span', { text: `${task.artifacts.length} artifact${task.artifacts.length === 1 ? '' : 's'}` }));
+  if (task.runs.length) foot.appendChild(el('span', { text: `${task.runs.length} run${task.runs.length === 1 ? '' : 's'}` }));
+  if (task.owner) foot.appendChild(el('span', { text: task.owner }));
+  if (foot.childNodes.length) card.appendChild(foot);
+  return card;
+}
+
+export function progressBar(progress) {
+  const pct = progress.total > 0 ? Math.round((progress.done / progress.total) * 100) : 0;
+  return el('div', { class: 'progress' }, [
+    el('div', { class: 'progress-track' }, [
+      el('div', { class: 'progress-fill', style: `width:${Math.max(0, Math.min(100, pct))}%` }),
+    ]),
+    el('span', {
+      class: 'progress-label',
+      text: `${progress.label ? progress.label + ' ' : ''}${progress.done}/${progress.total}`,
+    }),
+  ]);
+}
+
+export function runRow(run, options = {}) {
+  const wrap = el('div', { class: 'run' });
+  const head = el('div', { class: 'run-head' }, [
+    el('span', { class: 'run-title', text: run.title }),
+    statusPill(run.status),
+  ]);
+  if (run.durationMs != null) head.appendChild(el('span', { class: 'muted', text: fmtDuration(run.durationMs) }));
+  if (run.startedAt) head.appendChild(el('span', { class: 'muted', text: fmtStamp(run.startedAt) }));
+  if (run.simulated) head.appendChild(el('span', { class: 'run-sim', text: 'simulated' }));
+  wrap.appendChild(head);
+
+  if (run.summary) wrap.appendChild(el('p', { class: 'run-summary', text: run.summary }));
+
+  if (run.steps && run.steps.length) {
+    const list = el('ol', { class: 'steps' });
+    for (const step of run.steps) {
+      list.appendChild(
+        el('li', { class: 'step' }, [
+          el('span', { class: `step-dot tone-${statusTone(step.status)}` }),
+          el('span', { class: 'step-title', text: step.title }),
+          el('span', { class: 'step-status', text: statusLabel(step.status) }),
+          step.detail ? el('span', { class: 'step-detail', text: step.detail }) : null,
+        ]),
+      );
+    }
+    wrap.appendChild(list);
+  }
+  return wrap;
+}
+
+export function taskActions(task) {
+  if (!task.actions || task.actions.length === 0) return null;
+  return renderActions(task.actions.map((a) => a.id));
+}

package/dist/renderer/assets/js/dom.js

@@ -0,0 +1,61 @@
+// Tiny DOM helpers. Deliberately not a framework: the viewer is a local,
+// dependency-free app and every node here is created explicitly, so there is
+// no template-injection surface.
+
+export function el(tag, attrs, children) {
+  const node = document.createElement(tag);
+  if (attrs) {
+    for (const key of Object.keys(attrs)) {
+      const value = attrs[key];
+      if (value == null) continue;
+      if (key === 'class') node.className = value;
+      else if (key === 'text') node.textContent = value;
+      else if (key === 'html') node.innerHTML = value;
+      else if (key.startsWith('on') && typeof value === 'function') {
+        node.addEventListener(key.slice(2), value);
+      } else if (key === 'dataset') {
+        for (const d of Object.keys(value)) node.dataset[d] = value[d];
+      } else if (value !== false) {
+        node.setAttribute(key, value === true ? '' : value);
+      }
+    }
+  }
+  append(node, children);
+  return node;
+}
+
+export function append(node, children) {
+  if (children == null) return node;
+  const list = Array.isArray(children) ? children : [children];
+  for (const child of list) {
+    if (child == null || child === false) continue;
+    node.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  }
+  return node;
+}
+
+export function esc(value) {
+  return String(value == null ? '' : value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function clear(node) {
+  node.textContent = '';
+  return node;
+}
+
+export function fragment() {
+  return document.createDocumentFragment();
+}
+
+export function byId(id) {
+  return document.getElementById(id);
+}
+
+export function spacer(px) {
+  return el('div', { class: 'spacer', style: `height:${px}px` });
+}

package/dist/renderer/assets/js/format.js

@@ -0,0 +1,118 @@
+// Formatting + label vocabularies. Everything a human reads about a piece of
+// content is named here, so the visual language stays consistent.
+
+export const KIND_LABEL = {
+  readme: 'Overview',
+  report: 'Report',
+  markdown: 'Note',
+  code: 'Code',
+  json: 'Data',
+  log: 'Log',
+  diff: 'Diff',
+  image: 'Image',
+  file: 'File',
+};
+
+export const SOURCE_LABEL = {
+  explicit: 'declared',
+  frontmatter: 'frontmatter',
+  convention: 'by convention',
+  heuristic: 'inferred',
+};
+
+/**
+ * Noun form, for sentences like "declared in the manifest". SOURCE_LABEL reads
+ * as an adjective and produced "declared by declared".
+ */
+export const SOURCE_ORIGIN = {
+  explicit: 'the manifest',
+  frontmatter: 'frontmatter',
+  convention: 'convention',
+  heuristic: 'inference',
+};
+
+const STATUS_LABEL = {
+  pending: 'Pending',
+  running: 'Running',
+  succeeded: 'Succeeded',
+  failed: 'Failed',
+  partial: 'Partial',
+  blocked: 'Blocked',
+  cancelled: 'Cancelled',
+  info: 'Info',
+};
+
+const STATUS_TONE = {
+  pending: 'neutral',
+  running: 'info',
+  succeeded: 'good',
+  failed: 'bad',
+  partial: 'warn',
+  blocked: 'warn',
+  cancelled: 'neutral',
+  info: 'neutral',
+};
+
+export function statusLabel(status) {
+  if (!status) return 'Unknown';
+  return STATUS_LABEL[status] || prettify(status);
+}
+
+export function statusTone(status) {
+  return STATUS_TONE[status] || 'neutral';
+}
+
+/** Producer-defined roles/statuses get a readable label instead of raw slugs. */
+export function prettify(value) {
+  return String(value == null ? '' : value)
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function kindLabel(kind) {
+  return KIND_LABEL[kind] || prettify(kind);
+}
+
+export function fmtBytes(n) {
+  if (n == null) return '';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function relTime(ms) {
+  if (!ms) return '';
+  let diff = Date.now() - ms;
+  if (diff < 0) diff = 0;
+  if (diff < 60 * 1000) return 'just now';
+  if (diff < 3600 * 1000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 24 * 3600 * 1000) return `${Math.floor(diff / 3600000)}h ago`;
+  if (diff < 7 * 24 * 3600 * 1000) return `${Math.floor(diff / (24 * 3600000))}d ago`;
+  return new Date(ms).toLocaleDateString();
+}
+
+/** ISO strings come from producers; render them compactly and locally. */
+export function fmtStamp(value) {
+  if (!value) return '';
+  const ms = Date.parse(value);
+  if (!Number.isFinite(ms)) return String(value);
+  const diff = Date.now() - ms;
+  if (diff >= 0 && diff < 7 * 24 * 3600 * 1000) return relTime(ms);
+  return new Date(ms).toLocaleString();
+}
+
+export function fmtDuration(ms) {
+  if (ms == null) return '';
+  if (ms < 1000) return `${ms} ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(s < 10 ? 1 : 0)} s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${Math.round(s % 60)}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+/** Paths are shown, not linked, unless there is somewhere to go. */
+export function shortPath(path) {
+  if (!path) return '';
+  return path.length > 72 ? `…${path.slice(-69)}` : path;
+}