@dfsramos/foreman 0.0.0-stage → 0.2.0

package/public/tasks.js

@@ -0,0 +1,253 @@
+// The Tasks tab: a git-source project's task files grouped by state, the machine that holds the
+// project's lease, and a form that adds a task as a new file on the branch. Everything is read
+// from the branch as it is on the remote, from any machine and lease or not: only polling is
+// gated, so this is where a person sees which machine holds a project and which holds each task.
+// All text from the files is inserted as text nodes.
+
+import { api, banner, button, externalLink, fill, fmtDateTime, h, prLabel } from './ui.js';
+
+const PRIORITY_NAMES = ['No priority', 'Urgent', 'High', 'Medium', 'Low'];
+/** The state groups in the order they are shown, with their names for people. */
+const STATES = [
+  ['todo', 'Todo'],
+  ['in_progress', 'In progress'],
+  ['in_review', 'In review'],
+  ['pending_approval', 'Pending approval'],
+  ['done', 'Done'],
+];
+
+const emptyForm = () => ({ title: '', description: '', priority: '0', errors: {}, busy: false });
+
+const view = {
+  projectId: null,
+  /** Counts loads, so that the answer to a load the user moved on from is dropped. */
+  request: 0,
+  loading: false,
+  data: null, // the `/api/projects/:id/tasks` response
+  error: null,
+  /** Groups folded away; done starts folded since it only grows. */
+  collapsed: new Set(['done']),
+  form: emptyForm(),
+  notice: null, // the banner after an add: { tone, title, text }
+};
+
+/** Forgets the loaded list and clears the form; called when the user leaves the tab, so that opening it loads afresh. */
+export function resetTasks() {
+  view.request += 1;
+  view.loading = false;
+  view.data = null;
+  view.error = null;
+  view.form = emptyForm();
+  view.notice = null;
+}
+
+/** The lease line: who polls the project, or nobody when the lease is missing or has lapsed. */
+const leaseText = (lease) => (lease ? `Polled by ${lease.holder}${lease.mine ? ' (this machine)' : ''} until ${fmtDateTime(lease.until)}.` : 'Not polled by any machine.');
+
+export function tasksTab(ctx) {
+  const projects = ctx.projects.filter((project) => project.sourceType === 'git');
+  if (projects.length === 0) {
+    return h('div', { class: 'config' }, h('section', { class: 'card' }, h('div', { class: 'list-empty' }, 'No project uses the git branch source yet.')));
+  }
+  // The first git project to begin with, and again once the chosen one is deleted.
+  if (!projects.some((project) => project.id === view.projectId)) choose(projects[0].id);
+  if (!view.data && !view.error && !view.loading) load();
+  const project = projects.find((candidate) => candidate.id === view.projectId);
+
+  return h('div', { class: 'config' }, headCard(), groupsCard(), formCard());
+
+  function choose(id) {
+    view.projectId = id;
+    view.data = null;
+    view.error = null;
+    view.notice = null;
+    view.form.errors = {};
+  }
+
+  /** Asks for the list; the answer rerenders unless the user has moved on since. */
+  function load() {
+    const request = ++view.request;
+    view.loading = true;
+    void api('GET', `/api/projects/${view.projectId}/tasks`).then((response) => {
+      if (view.request !== request) return;
+      view.loading = false;
+      if (response.ok) {
+        view.data = response.data;
+        view.error = null;
+      } else {
+        view.error = response.data?.error ?? `Could not load (${response.status})`;
+      }
+      ctx.rerender();
+    });
+  }
+
+  function refresh() {
+    load();
+    ctx.rerender();
+  }
+
+  /* ---------- project and lease ---------- */
+
+  function headCard() {
+    const picker = h(
+      'select',
+      { id: 'tasks-project', class: 'input' },
+      projects.map((candidate) => h('option', { value: String(candidate.id), selected: candidate.id === view.projectId }, candidate.name)),
+    );
+    picker.addEventListener('change', () => {
+      choose(Number(picker.value));
+      refresh();
+    });
+    return h(
+      'section',
+      { class: 'card' },
+      h(
+        'div',
+        { class: 'card-head' },
+        h('h2', null, 'Tasks'),
+        h('span', { class: 'sub' }, 'The task branch as it is on the remote'),
+        h('span', { class: 'spacer' }),
+        button(view.loading ? 'Loading…' : 'Refresh', { disabled: view.loading, onclick: refresh }),
+      ),
+      h(
+        'div',
+        { class: 'fields' },
+        h('div', { class: 'field' }, h('div', { class: 'label-row' }, h('label', { for: 'tasks-project' }, 'Project')), picker, h('div', { class: 'help' }, project?.sourceSummary ?? '')),
+      ),
+      whereLine(),
+    );
+  }
+
+  function whereLine() {
+    if (view.error) return h('div', { class: 'list-empty text-fail' }, `⚠ ${view.error}`);
+    if (!view.data) return h('div', { class: 'list-empty' }, 'Loading…');
+    const { repository, branch, directory, lease } = view.data;
+    return h(
+      'div',
+      { class: 'tasks-where' },
+      h('span', { class: 'mono ellipsis', title: repository }, `${repository} · ${branch} · ${directory}`),
+      h('span', { class: lease ? '' : 'muted' }, leaseText(lease)),
+    );
+  }
+
+  /* ---------- the tasks by state ---------- */
+
+  function groupsCard() {
+    if (!view.data) return null;
+    const { tasks, directory } = view.data;
+    if (tasks.length === 0) return h('section', { class: 'card' }, h('div', { class: 'list-empty' }, `No task files in ${directory} yet. Add one below.`));
+    return h(
+      'section',
+      { class: 'card' },
+      STATES.map(([state, name]) => group(state, name, tasks.filter((task) => task.state === state))),
+    );
+  }
+
+  function group(state, name, tasks) {
+    const details = h(
+      'details',
+      { class: 'task-group', open: !view.collapsed.has(state) },
+      h('summary', null, h('span', { class: 'task-state' }, name), h('span', { class: 'task-count' }, String(tasks.length))),
+      tasks.length === 0
+        ? h('div', { class: 'task-empty' }, 'None.')
+        : [h('div', { class: 'task-head' }, ...['Task', 'Title', 'Priority', 'Claimed by', 'Pull request'].map((label) => h('span', null, label))), tasks.map(row)],
+    );
+    // Folding is remembered across refreshes, not across visits to the tab.
+    details.addEventListener('toggle', () => {
+      if (details.open) view.collapsed.delete(state);
+      else view.collapsed.add(state);
+    });
+    return details;
+  }
+
+  function row(task) {
+    return h(
+      'div',
+      { class: 'task-row' },
+      externalLink(task.url, task.identifier, 'mono'),
+      h('span', { class: 'ellipsis', title: task.title }, task.title),
+      h('span', null, PRIORITY_NAMES[task.priority] ?? '—'),
+      task.claimedBy ? h('span', { class: 'ellipsis' }, task.claimedBy, h('span', { class: 'faint' }, ` since ${fmtDateTime(task.claimedAt)}`)) : h('span', { class: 'faint' }, '—'),
+      task.pr ? externalLink(task.pr, prLabel(task.pr)) : h('span', { class: 'faint' }, '—'),
+    );
+  }
+
+  /* ---------- new task ---------- */
+
+  function formCard() {
+    const { form } = view;
+    const noticeLine = h('div', { class: 'usage-line' });
+    const showNotice = () => {
+      fill(noticeLine, view.notice ? banner(view.notice.tone, view.notice.title, view.notice.text, null, true) : null);
+      noticeLine.hidden = !view.notice;
+    };
+
+    const field = (label, key, id, control, help, wide = false) => {
+      const error = form.errors[key];
+      return h(
+        'div',
+        { class: `field ${wide ? 'wide' : ''} ${error ? 'error' : ''}` },
+        h('div', { class: 'label-row' }, h('label', { for: id }, label)),
+        control,
+        h('div', { class: 'help' }, error ? `⚠ ${error}` : (help ?? '')),
+      );
+    };
+    const title = h('input', { id: 'task-title', class: 'input', type: 'text', maxlength: '200', spellcheck: 'true', value: form.title });
+    title.addEventListener('input', () => (form.title = title.value));
+    const description = h('textarea', { id: 'task-description', class: 'input', rows: '6', spellcheck: 'true' }, form.description);
+    description.addEventListener('input', () => (form.description = description.value));
+    const priority = h(
+      'select',
+      { id: 'task-priority', class: 'input' },
+      PRIORITY_NAMES.map((name, index) => h('option', { value: String(index), selected: form.priority === String(index) }, name)),
+    );
+    priority.addEventListener('change', () => (form.priority = priority.value));
+
+    async function submit() {
+      form.busy = true;
+      form.errors = {};
+      view.notice = null;
+      ctx.rerender();
+      const response = await api('POST', `/api/projects/${view.projectId}/tasks`, {
+        title: form.title,
+        description: form.description,
+        priority: Number(form.priority),
+      });
+      if (view.form !== form) return;
+      form.busy = false;
+      if (response.ok) {
+        view.notice = { tone: 'ok', title: `Added ${response.data.identifier}`, text: `${response.data.name} is on the branch, waiting as todo.` };
+        view.form = emptyForm();
+        load();
+      } else if (response.data?.errors) {
+        form.errors = response.data.errors;
+        if (form.errors._) view.notice = { tone: 'fail', title: 'Not added', text: form.errors._ };
+      } else {
+        view.notice = { tone: 'fail', title: 'Not added', text: response.data?.error ?? `Request failed (${response.status})` };
+      }
+      ctx.rerender();
+    }
+
+    showNotice();
+    return h(
+      'section',
+      { class: 'card' },
+      h('div', { class: 'card-head' }, h('h2', null, 'New task'), h('span', { class: 'sub' }, 'One todo file, pushed as one commit')),
+      noticeLine,
+      h(
+        'div',
+        { class: 'fields' },
+        field('Title', 'title', 'task-title', title, 'Names the file: <number>-<slug of the title>.md.'),
+        field('Priority', 'priority', 'task-priority', priority, 'Urgent tasks are picked up first.'),
+        field('Description', 'description', 'task-description', description, 'Markdown. What the agent is told to do.', true),
+      ),
+      h(
+        'div',
+        { class: 'save-bar' },
+        h('span', { class: 'note' }, 'Needs no lease: any machine can add a task.'),
+        h('span', { class: 'spacer' }),
+        button(form.busy ? 'Adding…' : 'Add task', { variant: 'primary', disabled: form.busy || !view.data, onclick: () => void submit() }),
+      ),
+    );
+  }
+}

package/public/ui.js

@@ -0,0 +1,165 @@
+// Shared building blocks for the console's modules: DOM helpers, icons, formatting and the API call.
+
+// Icon bodies are constants from the design handoff (16x16 viewBox).
+const STROKE = 'fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"';
+const ICONS = {
+  check: `<g ${STROKE}><circle cx="8" cy="8" r="6.5"/><path d="M5.2 8.3l1.9 1.9 3.8-4.1"/></g>`,
+  cross: `<g ${STROKE}><circle cx="8" cy="8" r="6.5"/><path d="M5.8 5.8l4.4 4.4M10.2 5.8l-4.4 4.4"/></g>`,
+  slash: `<g ${STROKE}><circle cx="8" cy="8" r="6.5"/><path d="M3.6 12.4l8.8-8.8"/></g>`,
+  warning: `<g ${STROKE}><path d="M8 2.2l6.3 11.1H1.7z"/><path d="M8 6.6v3.1M8 11.5v.1"/></g>`,
+  info: `<g ${STROKE}><circle cx="8" cy="8" r="6.5"/><path d="M8 7.3v4M8 4.8v.1"/></g>`,
+  tick: `<g ${STROKE}><path d="M3.5 8.5l3 3 6-6.5"/></g>`,
+  x: `<g ${STROKE}><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></g>`,
+  line: `<g ${STROKE}><path d="M4 12L12 4"/></g>`,
+  external: `<g ${STROKE}><path d="M6.5 3.5H3.5v9h9v-3M9.5 3h3.5v3.5M13 3L7.5 8.5"/></g>`,
+  copy: `<g ${STROKE}><rect x="5.5" y="5.5" width="7.5" height="7.5" rx="1.5"/><path d="M10.5 5.5V3.5H3v7.5h2.5"/></g>`,
+  branch: `<g ${STROKE}><circle cx="4.5" cy="3.5" r="1.6"/><circle cx="4.5" cy="12.5" r="1.6"/><circle cx="11.5" cy="5" r="1.6"/><path d="M4.5 5.1v5.8M11.5 6.6c0 2.8-3.5 2.6-6.6 4.6"/></g>`,
+  spinner: `<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="8" cy="8" r="6" opacity=".25"/><path d="M8 2a6 6 0 0 1 6 6"/></g>`,
+  play: '<path d="M4 2.5v11l9-5.5z" fill="currentColor"/>',
+  square: '<rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor"/>',
+  pause:
+    '<rect x="4" y="3.5" width="2.6" height="9" rx=".7" fill="currentColor"/><rect x="9.4" y="3.5" width="2.6" height="9" rx=".7" fill="currentColor"/>',
+};
+
+/* ---------- DOM helpers ---------- */
+
+export const $ = (selector) => document.querySelector(selector);
+
+export function h(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs ?? {})) {
+    if (value === false || value === null || value === undefined) continue;
+    if (name === 'class') el.className = value;
+    else if (name.startsWith('on')) el.addEventListener(name.slice(2), value);
+    else if (value === true) el.setAttribute(name, '');
+    else el.setAttribute(name, value);
+  }
+  el.append(...children.flat(Infinity).filter((child) => child !== null && child !== undefined && child !== false));
+  return el;
+}
+
+export function icon(name, size = 14, label) {
+  const template = document.createElement('template');
+  const a11y = label ? `role="img" aria-label="${label}"` : 'aria-hidden="true"';
+  const cls = name === 'spinner' ? 'class="spin"' : '';
+  template.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 16 16" ${a11y} ${cls}>${ICONS[name]}</svg>`;
+  return template.content.firstChild;
+}
+
+export function fill(target, ...children) {
+  target.replaceChildren(...children.flat(Infinity).filter((child) => child !== null && child !== undefined && child !== false));
+}
+
+export function button(label, { variant = '', iconName, iconSize = 10, onclick, disabled, title, autofocus } = {}) {
+  return h(
+    'button',
+    { class: `btn ${variant}`, type: 'button', onclick, disabled, title, autofocus },
+    iconName ? icon(iconName, iconSize) : null,
+    label,
+  );
+}
+
+export const externalLink = (href, label, cls = '') =>
+  h('a', { href, target: '_blank', rel: 'noopener noreferrer', class: cls }, label, ' ', icon('external', 11));
+
+/* ---------- formatting ---------- */
+
+export const pad = (n) => String(n).padStart(2, '0');
+
+export function fmtTime(iso) {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+export function fmtClock(iso) {
+  const d = new Date(iso);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export function fmtDateTime(iso) {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return `${d.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })} ${fmtTime(iso)}`;
+}
+
+export function fmtCountdown(ms) {
+  const total = Math.max(0, Math.ceil(ms / 1000));
+  return `${Math.floor(total / 60)}:${pad(total % 60)}`;
+}
+
+export function fmtDuration(ms) {
+  const total = Math.max(0, Math.round(ms / 1000));
+  if (total < 60) return `${total}s`;
+  if (total < 3600) return `${Math.floor(total / 60)}m ${pad(total % 60)}s`;
+  return `${Math.floor(total / 3600)}h ${pad(Math.floor((total % 3600) / 60))}m`;
+}
+
+export const runDurationMs = (run) => (run.finishedAt ? new Date(run.finishedAt) : new Date()) - new Date(run.startedAt);
+
+export function dayLabel(iso) {
+  const d = new Date(iso);
+  const startOf = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  const days = Math.round((startOf(new Date()) - startOf(d)) / 86_400_000);
+  const date = d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' });
+  if (days === 0) return `Today · ${date}`;
+  if (days === 1) return `Yesterday · ${date}`;
+  return date;
+}
+
+export const prLabel = (url) => {
+  const match = /\/pull\/(\d+)/.exec(url ?? '');
+  return match ? `PR #${match[1]}` : 'Pull request';
+};
+
+/* ---------- API ---------- */
+
+export async function api(method, url, body) {
+  const response = await fetch(url, {
+    method,
+    headers: body === undefined ? {} : { 'Content-Type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const data = await response.json().catch(() => null);
+  return { ok: response.ok, status: response.status, data };
+}
+
+/* ---------- components ---------- */
+
+export function banner(tone, title, text, action, inline = false) {
+  return h(
+    'div',
+    { class: `banner tone-${tone} ${inline ? 'inline' : ''}`, role: tone === 'fail' ? 'alert' : 'status' },
+    icon(tone === 'run' ? 'info' : 'warning', 15),
+    h('div', { class: 'body' }, title ? h('div', { class: 'title' }, title) : null, h('div', { class: 'text' }, text)),
+    action,
+  );
+}
+
+/* ---------- plan usage ---------- */
+
+const WINDOW_LABELS = { five_hour: ['5h', '5-hour'], seven_day: ['7d', '7-day'] };
+
+export const windowLabel = (key, long = false) => WINDOW_LABELS[key]?.[long ? 1 : 0] ?? key.replace(/_/g, ' ');
+
+/** A 0–1 fraction as a percentage; small non-zero values keep one decimal instead of rounding to 0. */
+export function fmtPercent(fraction) {
+  const percent = fraction * 100;
+  return `${percent > 0 && percent < 10 ? percent.toFixed(1) : Math.round(percent)}%`;
+}
+
+/** Windows of a usage report that have not reset yet, in a stable order. */
+export function currentWindows(usage) {
+  if (!usage) return [];
+  return Object.entries(usage.windows)
+    .filter(([, window]) => !window.resetsAt || new Date(window.resetsAt) > new Date())
+    .sort(([a], [b]) => Object.keys(WINDOW_LABELS).indexOf(a) - Object.keys(WINDOW_LABELS).indexOf(b));
+}
+
+export function fmtReset(iso) {
+  if (!iso) return '';
+  const date = new Date(iso);
+  const sameDay = date.toDateString() === new Date().toDateString();
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return sameDay ? time : `${date.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' })} ${time}`;
+}