@tinyviber/a2h 0.1.0

package/dist/renderer/assets/js/main.js

@@ -0,0 +1,125 @@
+// Entry point: boot the viewer, own the chrome, dispatch routes.
+//
+// Note there is no bundler and no framework here on purpose — A2H ships as a
+// local CLI, so the viewer is plain ES modules served from disk. Extensibility
+// comes from the block registry, not from a build step.
+
+import { el, byId } from './dom.js';
+import { loadPresentation, invalidate, openEvents } from './api.js';
+import { getData, setData, subscribe } from './store.js';
+import { parseHash } from './router.js';
+import { renderNav, highlightNav, renderFoot } from './nav.js';
+import {
+  overviewView,
+  sectionView,
+  tasksView,
+  taskView,
+  runsView,
+  actionsView,
+  artifactContainer,
+} from './views.js';
+
+const nav = byId('nav');
+const content = byId('content');
+const foot = byId('sidebarFoot');
+
+async function refresh() {
+  invalidate();
+  try {
+    const data = await loadPresentation(true);
+    setData(data);
+    renderNav(nav, data);
+    renderFoot(foot, data);
+    route();
+  } catch (err) {
+    content.textContent = '';
+    content.appendChild(
+      el('div', { class: 'notice', text: `Could not load the workspace: ${err.message}` }),
+    );
+  }
+}
+
+function route() {
+  const data = getData();
+  if (!data) return;
+  const { name, arg } = parseHash(location.hash);
+
+  let view;
+  switch (name) {
+    case 'section':
+      view = sectionView(arg);
+      break;
+    case 'artifact':
+      view = artifactContainer(arg);
+      break;
+    case 'tasks':
+      view = tasksView();
+      break;
+    case 'task':
+      view = taskView(arg);
+      break;
+    case 'runs':
+      view = runsView();
+      break;
+    case 'actions':
+      view = actionsView();
+      break;
+    default:
+      view = overviewView();
+  }
+
+  content.textContent = '';
+  content.appendChild(view);
+  highlightNav(nav, location.hash || '#/');
+  closeDrawer();
+  window.scrollTo(0, 0);
+}
+
+// ------------------------------------------------------------------- chrome
+
+function closeDrawer() {
+  const sidebar = byId('sidebar');
+  const scrim = byId('scrim');
+  const toggle = byId('navToggle');
+  sidebar.classList.remove('open');
+  toggle.setAttribute('aria-expanded', 'false');
+  scrim.hidden = true;
+}
+
+function bindChrome() {
+  const toggle = byId('navToggle');
+  const sidebar = byId('sidebar');
+  const scrim = byId('scrim');
+
+  toggle.addEventListener('click', () => {
+    const open = sidebar.classList.toggle('open');
+    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    scrim.hidden = !open;
+  });
+  scrim.addEventListener('click', closeDrawer);
+}
+
+// --------------------------------------------------------------------- boot
+
+function boot() {
+  bindChrome();
+
+  window.addEventListener('hashchange', route);
+  subscribe('refresh', () => {
+    void refresh();
+  });
+
+  // Watch mode: the server pushes a change event after a rescan.
+  openEvents({
+    onChange: () => void refresh(),
+    onAction: () => void refresh(),
+  });
+
+  void refresh();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}

package/dist/renderer/assets/js/nav.js

@@ -0,0 +1,80 @@
+// Sidebar navigation. The nav mirrors the same information architecture the
+// presentation layer produced: tasks first (they are what a human acts on),
+// then the producer's groups, then inferred sections.
+
+import { el } from './dom.js';
+import { statusTone, statusLabel } from './format.js';
+import { hrefFor } from './router.js';
+
+export function renderNav(nav, data) {
+  nav.textContent = '';
+
+  nav.appendChild(navLink('Overview', '#/', 'nav-overview'));
+
+  if (data.tasks.length > 0) {
+    const group = el('div', { class: 'nav-section' });
+    group.appendChild(navLink('Tasks', '#/tasks', 'nav-section-title-link'));
+    const list = el('div', { class: 'nav-artifacts' });
+    for (const task of data.tasks) {
+      const link = navLink(task.title, hrefFor('task', task.id), 'nav-artifact', task.summary);
+      link.prepend(
+        el('span', { class: `nav-dot tone-${statusTone(task.status)}`, title: statusLabel(task.status) }),
+      );
+      if (task.runs.length) link.appendChild(el('span', { class: 'nav-count', text: String(task.runs.length) }));
+      list.appendChild(link);
+    }
+    group.appendChild(list);
+    nav.appendChild(group);
+  }
+
+  if (data.runs.length > 0 || data.actions.length > 0) {
+    const group = el('div', { class: 'nav-section' });
+    if (data.runs.length > 0) group.appendChild(navLink('Runs', '#/runs', 'nav-section-title-link'));
+    if (data.actions.length > 0) {
+      const link = navLink('Actions', '#/actions', 'nav-section-title-link');
+      link.appendChild(el('span', { class: 'nav-count', text: String(data.actions.length) }));
+      group.appendChild(link);
+    }
+    nav.appendChild(group);
+  }
+
+  for (const section of data.sections) {
+    const group = el('div', { class: 'nav-section' });
+    // No "declared" flag here: it repeated on every producer section, crowded
+    // the labels into an ellipsis, and the section page already says it once.
+    group.appendChild(navLink(section.title, hrefFor('section', section.id), 'nav-section-title-link'));
+
+    const list = el('div', { class: 'nav-artifacts' });
+    for (const artifact of section.artifacts) {
+      list.appendChild(
+        navLink(artifact.title, hrefFor('artifact', artifact.id), 'nav-artifact', artifact.path || artifact.title),
+      );
+    }
+    group.appendChild(list);
+    nav.appendChild(group);
+  }
+}
+
+function navLink(label, href, className, title) {
+  return el('a', {
+    class: `nav-item ${className || ''}`.trim(),
+    href,
+    title: title || label,
+    text: label,
+  });
+}
+
+export function highlightNav(nav, hash) {
+  const current = hash || '#/';
+  for (const link of nav.querySelectorAll('.nav-item')) {
+    link.classList.toggle('is-active', link.getAttribute('href') === current);
+  }
+}
+
+export function renderFoot(foot, data) {
+  const lines = [];
+  if (data.git && data.git.branch) lines.push(`branch ${data.git.branch}`);
+  lines.push(`${data.stats.files} file${data.stats.files === 1 ? '' : 's'}`);
+  if (data.semantics !== 'inferred') lines.push(`semantics: ${data.semantics}`);
+  foot.textContent = lines.join(' · ');
+}

package/dist/renderer/assets/js/router.js

@@ -0,0 +1,64 @@
+// Hash routing. Three shapes, all readable in a URL:
+//
+//   #/                 overview
+//   #/s/:sectionId     a section
+//   #/a/:artifactPath  an artifact (path is URL-encoded)
+//   #/tasks #/t/:id    task list / a task
+//   #/runs #/actions   runs / action surface
+
+export function parseHash(hash) {
+  const raw = (hash || '#/').replace(/^#\/?/, '');
+  if (!raw) return { name: 'overview', arg: '' };
+
+  const slash = raw.indexOf('/');
+  const head = slash >= 0 ? raw.slice(0, slash) : raw;
+  const tail = slash >= 0 ? raw.slice(slash + 1) : '';
+
+  switch (head) {
+    case 's':
+      return { name: 'section', arg: decode(tail) };
+    case 'a':
+      return { name: 'artifact', arg: decode(tail) };
+    case 'tasks':
+      return { name: 'tasks', arg: '' };
+    case 't':
+      return { name: 'task', arg: decode(tail) };
+    case 'runs':
+      return { name: 'runs', arg: '' };
+    case 'actions':
+      return { name: 'actions', arg: '' };
+    default:
+      return { name: 'overview', arg: '' };
+  }
+}
+
+export function hrefFor(name, arg) {
+  switch (name) {
+    case 'section':
+      return `#/s/${encodeURIComponent(arg)}`;
+    case 'artifact':
+      return `#/a/${encodeURIComponent(arg)}`;
+    case 'task':
+      return `#/t/${encodeURIComponent(arg)}`;
+    case 'tasks':
+      return '#/tasks';
+    case 'runs':
+      return '#/runs';
+    case 'actions':
+      return '#/actions';
+    default:
+      return '#/';
+  }
+}
+
+export function navigate(name, arg) {
+  location.hash = hrefFor(name, arg);
+}
+
+function decode(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}

package/dist/renderer/assets/js/store.js

@@ -0,0 +1,69 @@
+// Application state. Small on purpose: one presentation payload, plus the
+// transient state of actions the human just triggered.
+
+import { subscribe as on, emit } from './bus.js';
+
+const state = {
+  data: null,
+  /** actionId -> last ActionResult */
+  actionResults: new Map(),
+  /** actionIds currently in flight */
+  pending: new Set(),
+};
+
+export function getData() {
+  return state.data;
+}
+
+export function setData(data) {
+  state.data = data;
+  emit('data');
+}
+
+export function getPresentation() {
+  return fetchPresentationData();
+}
+
+export function getActionResult(id) {
+  return state.actionResults.get(id) || null;
+}
+
+export function setActionResult(id, result) {
+  state.actionResults.set(id, result);
+  emit('action');
+}
+
+export function isPending(id) {
+  return state.pending.has(id);
+}
+
+export function setPending(id, value) {
+  if (value) state.pending.add(id);
+  else state.pending.delete(id);
+  emit('action');
+}
+
+export function findTask(id) {
+  if (!state.data) return null;
+  return state.data.tasks.find((t) => t.id === id) || null;
+}
+
+export function findAction(id) {
+  if (!state.data) return null;
+  return state.data.actions.find((a) => a.id === id) || null;
+}
+
+export function findArtifact(path) {
+  if (!state.data) return null;
+  for (const section of state.data.sections) {
+    for (const a of section.artifacts) if (a.id === path) return a;
+  }
+  return null;
+}
+
+export function artifactViews() {
+  if (!state.data) return [];
+  return state.data.sections.flatMap((s) => s.artifacts);
+}
+
+export { on as subscribe, emit };

package/dist/renderer/assets/js/views.js

@@ -0,0 +1,356 @@
+// Page-level views. Each returns a detached DOM subtree for #content.
+//
+// The visual language is fixed by design.md: warm, quiet, reading-first. Tasks
+// and actions are added without turning the page into a dashboard — state is
+// expressed in words first, colour second.
+
+import { el, append, spacer } from './dom.js';
+import { fmtBytes, fmtStamp, fmtDuration, statusLabel, statusTone, SOURCE_ORIGIN } from './format.js';
+import { cardGrid, sectionHead, taskCard, runRow, progressBar } from './cards.js';
+import { renderBlocks, statusPill } from './blocks.js';
+import { renderActions, renderAudit } from './actions.js';
+import { hrefFor } from './router.js';
+import { renderArtifactView } from './artifacts.js';
+import { loadArtifact } from './api.js';
+import { getData, findTask } from './store.js';
+
+/**
+ * What to say about simulation, given that it is a per-action fact.
+ *
+ * A workspace may hand one action to a real provider and let the next one fall
+ * through to the built-in simulator, so "everything here is simulated" would
+ * be false in that case — and telling a human a simulated click is real is the
+ * failure this whole path exists to prevent.
+ */
+function simulatedNotice(data) {
+  const actions = data.actions || [];
+  const simulated = actions.filter((a) => a.simulated).length;
+  if (actions.length === 0 || simulated === 0) return '';
+  if (simulated === actions.length) {
+    return 'No external agent is connected. Every action here is simulated: it changes A2H state only, and says so when it runs.';
+  }
+  return `${simulated} of ${actions.length} actions fall through to the built-in simulator. Those are marked "simulated" where they appear; the rest run against a connected provider.`;
+}
+
+export function overviewView() {
+  const data = getData();
+  const wrap = el('div', {});
+  wrap.appendChild(headerBlock(data));
+
+  if (data.panels && data.panels.length) {
+    const panels = el('section', { class: 'panel-region' });
+    append(panels, renderBlocks(data.panels, ctx(), { card: true }));
+    wrap.appendChild(panels);
+    wrap.appendChild(spacer(32));
+  }
+
+  if (data.tasks.length > 0) {
+    wrap.appendChild(sectionHead('Work in progress', data.tasks.length));
+    wrap.appendChild(
+      el('p', { class: 'section-desc', text: 'Tasks this workspace is tracking. Each one can be inspected and acted on.' }),
+    );
+    const grid = el('div', { class: 'card-grid' });
+    for (const task of data.tasks) grid.appendChild(taskCard(task));
+    wrap.appendChild(grid);
+    wrap.appendChild(spacer(32));
+  }
+
+  if (data.highlights.length) {
+    wrap.appendChild(sectionHead('Start here', null));
+    wrap.appendChild(cardGrid(data.highlights));
+    wrap.appendChild(spacer(32));
+  }
+
+  for (const section of data.sections) {
+    wrap.appendChild(sectionHead(section.title, section.artifacts.length, { explicit: section.explicit }));
+    if (section.description) wrap.appendChild(el('p', { class: 'section-desc', text: section.description }));
+    wrap.appendChild(cardGrid(section.artifacts));
+  }
+
+  append(wrap, warningsView(data.warnings));
+  return wrap;
+}
+
+export function sectionView(id) {
+  const data = getData();
+  const section = data.sections.find((s) => s.id === id);
+  const wrap = el('div', {});
+  wrap.appendChild(backLink('Overview'));
+
+  if (!section) {
+    wrap.appendChild(el('div', { class: 'notice', text: 'Section not found.' }));
+    return wrap;
+  }
+  wrap.appendChild(el('h1', { class: 'artifact-title', text: section.title }));
+  if (section.description) wrap.appendChild(el('p', { class: 'artifact-meta', text: section.description }));
+  if (section.explicit) {
+    wrap.appendChild(el('p', { class: 'artifact-meta', text: 'Declared by the workspace manifest.' }));
+  }
+  wrap.appendChild(spacer(16));
+  wrap.appendChild(cardGrid(section.artifacts));
+  return wrap;
+}
+
+export function tasksView() {
+  const data = getData();
+  const wrap = el('div', {});
+  wrap.appendChild(backLink('Overview'));
+  wrap.appendChild(el('h1', { class: 'artifact-title', text: 'Tasks' }));
+  wrap.appendChild(
+    el('p', { class: 'artifact-meta', text: `${data.tasks.length} task${data.tasks.length === 1 ? '' : 's'} declared by this workspace.` }),
+  );
+
+  if (data.simulatedActions) {
+    wrap.appendChild(
+      el('div', { class: 'block-notice tone-info' }, [
+        el('span', { class: 'notice-label', text: 'Note' }),
+        el('span', { class: 'notice-body', text: simulatedNotice(data) }),
+      ]),
+    );
+  }
+
+  wrap.appendChild(spacer(16));
+  const grid = el('div', { class: 'card-grid' });
+  for (const task of data.tasks) grid.appendChild(taskCard(task));
+  wrap.appendChild(grid);
+  return wrap;
+}
+
+export function taskView(id) {
+  const task = findTask(id);
+  const wrap = el('div', {});
+  wrap.appendChild(backLink('Tasks', hrefFor('tasks')));
+
+  if (!task) {
+    wrap.appendChild(el('div', { class: 'notice', text: 'Task not found.' }));
+    return wrap;
+  }
+
+  // ---- head
+  const head = el('div', { class: 'artifact-head' }, [
+    el('div', { class: 'task-title-row' }, [
+      el('h1', { class: 'artifact-title', text: task.title }),
+      statusPill(task.status),
+    ]),
+  ]);
+  if (task.summary) head.appendChild(el('p', { class: 'workspace-summary', text: task.summary }));
+
+  const meta = [];
+  if (task.owner) meta.push(task.owner);
+  if (task.updatedAt) meta.push(`updated ${fmtStamp(task.updatedAt)}`);
+  meta.push(`declared in ${SOURCE_ORIGIN[task.source] || task.source}`);
+  head.appendChild(el('p', { class: 'artifact-meta', text: meta.join(' · ') }));
+  wrap.appendChild(head);
+
+  if (task.progress) wrap.appendChild(progressBar(task.progress));
+  wrap.appendChild(spacer(16));
+
+  if (task.actions.length) {
+    const actions = renderActions(task.actions.map((a) => a.id));
+    if (actions) {
+      wrap.appendChild(el('section', { class: 'block-card' }, [
+        el('h3', { class: 'block-title', text: 'What you can do' }),
+        actions,
+      ]));
+      wrap.appendChild(spacer(24));
+    }
+  }
+
+  if (task.metrics && task.metrics.length) {
+    append(wrap, renderBlocks([{ type: 'metrics', items: task.metrics }], ctx(), { card: true }));
+    wrap.appendChild(spacer(24));
+  }
+
+  if (task.blocks && task.blocks.length) {
+    append(wrap, renderBlocks(task.blocks, ctx(), { card: true }));
+    wrap.appendChild(spacer(24));
+  }
+
+  // ---- runs
+  wrap.appendChild(sectionHead('Runs', task.runs.length));
+  if (task.runs.length === 0) {
+    wrap.appendChild(el('p', { class: 'empty', text: 'No runs recorded for this task yet.' }));
+  } else {
+    const list = el('div', { class: 'run-list' });
+    for (const run of task.runs) list.appendChild(runCard(run));
+    wrap.appendChild(list);
+  }
+  wrap.appendChild(spacer(24));
+
+  // ---- artifacts
+  wrap.appendChild(sectionHead('Artifacts', task.artifacts.length));
+  const views = task.artifacts.map((p) => findArtifactView(p)).filter(Boolean);
+  if (views.length === 0) {
+    wrap.appendChild(el('p', { class: 'empty', text: 'No artifacts are attached to this task.' }));
+  } else {
+    wrap.appendChild(cardGrid(views));
+  }
+
+  return wrap;
+}
+
+export function runsView() {
+  const data = getData();
+  const wrap = el('div', {});
+  wrap.appendChild(backLink('Overview'));
+  wrap.appendChild(el('h1', { class: 'artifact-title', text: 'Runs' }));
+  wrap.appendChild(
+    el('p', { class: 'artifact-meta', text: `${data.runs.length} recorded run${data.runs.length === 1 ? '' : 's'}, newest first.` }),
+  );
+  wrap.appendChild(spacer(16));
+
+  if (data.runs.length === 0) {
+    wrap.appendChild(el('p', { class: 'empty', text: 'No runs have been recorded in this workspace.' }));
+    return wrap;
+  }
+  const list = el('div', { class: 'run-list' });
+  for (const run of data.runs) list.appendChild(runCard(run));
+  wrap.appendChild(list);
+  return wrap;
+}
+
+export function actionsView() {
+  const data = getData();
+  const wrap = el('div', {});
+  wrap.appendChild(backLink('Overview'));
+  wrap.appendChild(el('h1', { class: 'artifact-title', text: 'Actions' }));
+  wrap.appendChild(
+    el('p', { class: 'artifact-meta', text: 'Everything this workspace lets a human do, and what happened when it was tried.' }),
+  );
+
+  if (data.simulatedActions) {
+    wrap.appendChild(
+      el('div', { class: 'block-notice tone-info' }, [
+        el('span', { class: 'notice-label', text: 'Note' }),
+        el('span', { class: 'notice-body', text: simulatedNotice(data) }),
+      ]),
+    );
+  }
+
+  wrap.appendChild(spacer(16));
+
+  if (data.actions.length === 0) {
+    wrap.appendChild(
+      el('p', { class: 'empty', text: 'This workspace declares no actions. Add an "actions" array to .a2h/manifest.json to give a human something to do.' }),
+    );
+    return wrap;
+  }
+
+  const byTask = new Map();
+  for (const action of data.actions) {
+    const key = action.taskId || '';
+    if (!byTask.has(key)) byTask.set(key, []);
+    byTask.get(key).push(action);
+  }
+
+  for (const [taskId, actions] of byTask) {
+    const task = taskId ? findTask(taskId) : null;
+    const card = el('section', { class: 'block-card' });
+    card.appendChild(el('h3', { class: 'block-title', text: task ? task.title : 'Workspace' }));
+    if (task) card.appendChild(el('p', { class: 'section-desc', text: `task ${task.id} · ${statusLabel(task.status)}` }));
+    card.appendChild(renderActions(actions.map((a) => a.id)));
+    wrap.appendChild(card);
+    wrap.appendChild(spacer(16));
+  }
+
+  wrap.appendChild(sectionHead('Session audit', null));
+  wrap.appendChild(
+    el('p', { class: 'section-desc', text: 'Actions taken since this viewer started. Nothing is written to disk.' }),
+  );
+  wrap.appendChild(el('div', { class: 'artifact-body' }, [renderAudit(data.audit)]));
+  return wrap;
+}
+
+// ------------------------------------------------------------------ artifact
+
+export function artifactContainer(path) {
+  const wrap = el('div', {});
+  wrap.appendChild(el('div', { class: 'placeholder', text: 'Loading…' }));
+
+  loadArtifact(path)
+    .then((payload) => {
+      wrap.textContent = '';
+      wrap.appendChild(renderArtifactView(payload));
+    })
+    .catch(() => {
+      wrap.textContent = '';
+      wrap.appendChild(backLink('Overview'));
+      wrap.appendChild(el('div', { class: 'notice', text: 'Could not load this artifact.' }));
+    });
+
+  return wrap;
+}
+
+// ------------------------------------------------------------------ helpers
+
+export function ctx() {
+  return { data: getData(), renderActions };
+}
+
+function runCard(run) {
+  const card = el('div', { class: 'run-card' });
+  card.appendChild(runRow(run));
+  if (run.artifacts && run.artifacts.length) {
+    const links = el('div', { class: 'run-artifacts' });
+    for (const path of run.artifacts) {
+      links.appendChild(el('a', { class: 'provenance-link', href: hrefFor('artifact', path), text: path }));
+    }
+    card.appendChild(links);
+  }
+  if (run.blocks && run.blocks.length) {
+    append(card, renderBlocks(run.blocks, ctx(), { card: false }));
+  }
+  return card;
+}
+
+function findArtifactView(path) {
+  const data = getData();
+  for (const section of data.sections) {
+    for (const artifact of section.artifacts) if (artifact.id === path) return artifact;
+  }
+  return null;
+}
+
+function headerBlock(data) {
+  const head = el('header', { class: 'page-head' });
+  head.appendChild(el('h1', { class: 'workspace-name', text: data.identity.name }));
+  if (data.identity.summary) head.appendChild(el('p', { class: 'workspace-summary', text: data.identity.summary }));
+
+  const meta = el('p', { class: 'meta-line' });
+  const push = (text) => {
+    if (meta.childNodes.length) meta.appendChild(el('span', { class: 'dot', text: '·' }));
+    meta.appendChild(el('span', { text }));
+  };
+  if (data.git && data.git.branch) push(`branch ${data.git.branch}`);
+  if (data.git && data.git.lastCommit && data.git.lastCommit.hash) {
+    push(`${data.git.lastCommit.hash} ${data.git.lastCommit.subject}`);
+  }
+  push(`${data.stats.files} files`);
+  push(fmtBytes(data.stats.bytes));
+  if (data.semantics !== 'inferred') push(`semantics: ${data.semantics}`);
+  head.appendChild(meta);
+  return head;
+}
+
+export function backLink(label, href) {
+  return el('button', {
+    class: 'back-link',
+    text: `← ${label}`,
+    onclick: () => {
+      location.hash = href || '#/';
+    },
+  });
+}
+
+function warningsView(warnings) {
+  if (!warnings || warnings.length === 0) return null;
+  const box = el('div', { class: 'artifact-body' }, [
+    el('div', { class: 'bar' }, [el('span', { text: `${warnings.length} notice(s) from the scanner and manifest` })]),
+  ]);
+  const list = el('div', { class: 'warning-list' });
+  for (const warning of warnings) list.appendChild(el('div', { text: warning }));
+  box.appendChild(list);
+  return box;
+}
+
+export { statusTone, fmtDuration };