@dfsramos/foreman 0.0.0-stage → 0.3.0

package/public/agents.js

@@ -0,0 +1,435 @@
+// The Agents tab: which agent CLIs are installed, which may take work, how many at once, in what
+// order, and each one's own permission settings.
+
+import { api, banner, button, currentWindows, fill, fmtPercent, fmtReset, fmtTime, h, icon, windowLabel } from './ui.js';
+
+const MAX_CONCURRENT = 16;
+
+// Unsaved edits live here so that re-rendering the tab does not lose them.
+let draft = null;
+let serverErrors = {};
+let note = null;
+
+/** Forgets unsaved edits; called when the user leaves the tab. */
+export function resetAgentsDraft() {
+  draft = null;
+  serverErrors = {};
+  note = null;
+}
+
+const toDraft = (data) => ({
+  order: [...data.order],
+  agents: Object.fromEntries(
+    data.agents.map((agent) => [
+      agent.id,
+      {
+        enabled: agent.enabled,
+        maxConcurrent: String(agent.maxConcurrent),
+        bin: agent.bin ?? '',
+        maxUsagePercent: agent.maxUsagePercent === null ? '' : String(agent.maxUsagePercent),
+        allowOverage: agent.allowOverage,
+        settings: structuredClone(agent.settings),
+      },
+    ]),
+  ),
+});
+
+const concurrencyError = (value) =>
+  /^\d+$/.test(value.trim()) && Number(value) <= MAX_CONCURRENT ? null : `Must be a whole number between 0 and ${MAX_CONCURRENT}.`;
+
+const usageLimitError = (value) => {
+  const text = value.trim();
+  if (text === '') return null;
+  return /^\d+$/.test(text) && Number(text) >= 1 && Number(text) <= 100 ? null : 'Must be a whole number between 1 and 100, or empty to never pause.';
+};
+
+function clientErrors() {
+  const errors = {};
+  for (const [id, entry] of Object.entries(draft.agents)) {
+    const error = concurrencyError(entry.maxConcurrent);
+    if (error) errors[`${id}.maxConcurrent`] = error;
+    const limitError = usageLimitError(entry.maxUsagePercent);
+    if (limitError) errors[`${id}.maxUsagePercent`] = limitError;
+  }
+  return errors;
+}
+
+/** One line summarising an agent's finished runs, so the routing order can rest on its record. */
+function statsLine(stats) {
+  if (!stats || stats.work + stats.reviewRounds === 0) return h('span', { class: 'faint' }, 'Record: no finished runs yet.');
+  const parts = [`${stats.succeeded} of ${stats.work} ${stats.work === 1 ? 'issue' : 'issues'} opened a pull request`];
+  if (stats.failed > 0) parts.push(`${stats.failed} failed`);
+  if (stats.blocked > 0) parts.push(`${stats.blocked} needed input`);
+  if (stats.aborted > 0) parts.push(`${stats.aborted} aborted`);
+  if (stats.reviewRounds > 0) parts.push(`${stats.reviewRounds} review ${stats.reviewRounds === 1 ? 'round' : 'rounds'}`);
+  if (stats.medianMinutes !== null) parts.push(`median ${stats.medianMinutes} min per issue`);
+  if (stats.costUsd > 0) parts.push(`$${stats.costUsd.toFixed(2)} list price`);
+  return [h('span', { class: 'muted' }, 'Record: '), parts.join(' · ')];
+}
+
+/** One line describing an agent's plan usage, or why there is none. */
+function usageLine(agent) {
+  const windows = currentWindows(agent.usage);
+  if (windows.length === 0) {
+    return h('span', { class: 'faint' }, agent.usage ? 'Plan usage: every reported window has reset since the last run.' : 'Plan usage: reported after this agent’s next run.');
+  }
+  return [
+    h('span', { class: 'muted' }, 'Plan usage: '),
+    windows.map(([key, window], index) => [
+      index > 0 ? ' · ' : null,
+      `${windowLabel(key, true)} `,
+      h('b', null, fmtPercent(window.utilization)),
+      h('span', { class: 'faint' }, ` (resets ${fmtReset(window.resetsAt)})`),
+    ]),
+    agent.usage.usingOverage ? h('span', { class: 'text-fail' }, ' · spending overage') : null,
+    h('span', { class: 'faint' }, ` · as of ${fmtTime(agent.usage.at)}`),
+    agent.paused ? h('div', { class: 'text-fail' }, `Paused: ${agent.paused}`) : null,
+  ];
+}
+
+/** Refreshes the usage lines in place, leaving the form and its unsaved input alone. */
+export function updateAgentsUsage(data) {
+  for (const agent of data.agents) {
+    const line = document.getElementById(`agent-${agent.id}-usage`);
+    if (line) fill(line, usageLine(agent));
+  }
+}
+
+function payload() {
+  return {
+    order: draft.order,
+    agents: Object.fromEntries(
+      Object.entries(draft.agents).map(([id, entry]) => [
+        id,
+        {
+          enabled: entry.enabled,
+          maxConcurrent: Number(entry.maxConcurrent),
+          maxUsagePercent: entry.maxUsagePercent.trim() === '' ? null : Number(entry.maxUsagePercent),
+          allowOverage: entry.allowOverage,
+          ...(entry.bin.trim() ? { bin: entry.bin.trim() } : {}),
+          settings: entry.settings,
+        },
+      ]),
+    ),
+  };
+}
+
+function availabilityBadges(agent) {
+  const badges = [];
+  if (agent.available) {
+    badges.push(h('span', { class: 'badge tone-ok' }, icon('tick', 11), agent.version ? `Available · ${agent.version}` : 'Available'));
+  } else {
+    badges.push(
+      h('span', { class: 'badge tone-muted', title: agent.error ?? '' }, icon('x', 11), agent.error === 'not found' ? 'Not found' : 'Not available'),
+    );
+  }
+  if (!agent.verified) {
+    badges.push(
+      h(
+        'span',
+        { class: 'badge tone-warn', title: 'Written from the CLI’s documentation; not yet confirmed against the real CLI.' },
+        icon('warning', 11),
+        'Unverified adapter',
+      ),
+    );
+  }
+  if (agent.signedOut) {
+    badges.push(
+      h('span', { class: 'badge tone-fail', title: 'The CLI reports that it is not signed in. Sign it in; foreman checks again within a minute.' }, icon('x', 11), 'Not signed in'),
+    );
+  }
+  if (agent.paused) badges.push(h('span', { class: 'badge tone-fail', title: agent.paused }, icon('pause', 10), 'Paused'));
+  if (agent.active > 0) badges.push(h('span', { class: 'badge tone-run' }, icon('spinner', 11), `${agent.active} running`));
+  return badges;
+}
+
+/**
+ * @param ctx.data      the `/api/agents` response currently known
+ * @param ctx.onChange  called with a fresh response after a save or a re-check
+ * @param ctx.rerender  rebuilds the tab from the current draft
+ */
+export function agentsTab(ctx) {
+  const { data } = ctx;
+  if (!draft) draft = toDraft(data);
+  const pristine = JSON.stringify(toDraft(data));
+  const byId = new Map(data.agents.map((agent) => [agent.id, agent]));
+  const saveBar = h('div', { class: 'save-bar' });
+
+  const errorFor = (key) => clientErrors()[key] ?? serverErrors[key] ?? null;
+  const touch = (key) => {
+    delete serverErrors[key];
+    note = null;
+    refreshBar();
+  };
+
+  function refreshBar() {
+    const dirty = JSON.stringify(draft) !== pristine;
+    const errors = { ...serverErrors, ...clientErrors() };
+    const count = Object.keys(errors).length;
+    const notes = [];
+    if (dirty) notes.push(h('span', { class: 'note warn' }, h('span', { class: 'dot' }), 'Unsaved changes'));
+    if (count > 0) {
+      notes.push(h('span', { class: 'note fail' }, icon('warning', 13), `${count} ${count === 1 ? 'error' : 'errors'} to fix before saving`));
+    }
+    // Errors that belong to no visible field (e.g. the order) are spelled out.
+    for (const key of ['_', 'order']) {
+      if (errors[key]) notes.push(h('span', { class: 'note fail' }, `${key === '_' ? '' : `${key}: `}${errors[key]}`));
+    }
+    if (notes.length === 0 && note) notes.push(h('span', { class: 'note ok' }, icon('tick', 12), note));
+    fill(
+      saveBar,
+      notes,
+      h('span', { class: 'spacer' }),
+      button('Discard', {
+        disabled: !dirty,
+        onclick: () => {
+          resetAgentsDraft();
+          ctx.rerender();
+        },
+      }),
+      button('Save changes', { variant: 'primary', disabled: !dirty || Object.keys(clientErrors()).length > 0, onclick: save }),
+    );
+  }
+
+  async function save() {
+    const response = await api('PUT', '/api/agents', payload());
+    if (response.ok) {
+      resetAgentsDraft();
+      note = 'Saved. Applies from the next poll.';
+      ctx.onChange(response.data);
+    } else {
+      serverErrors = Object.fromEntries(
+        Object.entries(response.data?.errors ?? { _: `Save failed (${response.status})` }).map(([key, message]) => [key, `Server: ${message}`]),
+      );
+      ctx.rerender();
+    }
+  }
+
+  async function recheck(event) {
+    const control = event.currentTarget;
+    control.disabled = true;
+    const response = await api('POST', '/api/agents/refresh');
+    if (response.ok) {
+      note = 'Checked which CLIs are installed.';
+      ctx.onChange(response.data);
+    } else {
+      control.disabled = false;
+    }
+  }
+
+  function field(label, key, control, help) {
+    const error = errorFor(key);
+    const helpEl = h('div', { class: 'help' }, error ? `⚠ ${error}` : (help ?? ''));
+    const wrap = h(
+      'div',
+      { class: `field ${error ? 'error' : ''}` },
+      h('div', { class: 'label-row' }, h('label', { for: control.id }, label)),
+      control,
+      helpEl,
+    );
+    return { wrap, helpEl };
+  }
+
+  function textField(id, label, key, value, { help, placeholder, numeric, validate, onInput }) {
+    const input = h('input', {
+      id: `agent-${id}-${key}`,
+      class: 'input',
+      type: 'text',
+      inputmode: numeric ? 'numeric' : null,
+      autocomplete: 'off',
+      spellcheck: 'false',
+      placeholder,
+      value,
+    });
+    const { wrap, helpEl } = field(label, `${id}.${key}`, input, help);
+    input.addEventListener('input', () => {
+      onInput(input.value);
+      const error = validate?.(input.value) ?? null;
+      wrap.classList.toggle('error', Boolean(error));
+      helpEl.textContent = error ? `⚠ ${error}` : (help ?? '');
+      touch(`${id}.${key}`);
+    });
+    return wrap;
+  }
+
+  function selectField(id, spec, entry) {
+    const select = h(
+      'select',
+      { id: `agent-${id}-${spec.key}`, class: 'input' },
+      spec.options.map((option) => h('option', { value: option, selected: entry.settings[spec.key] === option }, option)),
+    );
+    select.addEventListener('change', () => {
+      entry.settings[spec.key] = select.value;
+      touch(`${id}.settings.${spec.key}`);
+    });
+    return field(spec.label, `${id}.settings.${spec.key}`, select, spec.help).wrap;
+  }
+
+  function overageField(id, entry) {
+    const select = h(
+      'select',
+      { id: `agent-${id}-allowOverage`, class: 'input' },
+      h('option', { value: 'no', selected: !entry.allowOverage }, 'Pause'),
+      h('option', { value: 'yes', selected: entry.allowOverage }, 'Keep working'),
+    );
+    select.addEventListener('change', () => {
+      entry.allowOverage = select.value === 'yes';
+      touch(`${id}.allowOverage`);
+    });
+    return field('When spending paid overage', `${id}.allowOverage`, select, 'Overage is usage billed beyond the plan’s allowance.').wrap;
+  }
+
+  function listField(id, spec, entry) {
+    const items = Array.isArray(entry.settings[spec.key]) ? entry.settings[spec.key] : (entry.settings[spec.key] = []);
+    const key = `${id}.settings.${spec.key}`;
+    const error = errorFor(key);
+    const input = h('input', {
+      id: `agent-${id}-${spec.key}`,
+      class: 'input',
+      type: 'text',
+      autocomplete: 'off',
+      spellcheck: 'false',
+      placeholder: 'Add an entry',
+      'aria-label': `Add to ${spec.label}`,
+    });
+    const add = () => {
+      const value = input.value.trim();
+      if (value === '' || items.includes(value)) return;
+      items.push(value);
+      delete serverErrors[key];
+      note = null;
+      ctx.rerender();
+      document.getElementById(input.id)?.focus();
+    };
+    input.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') add();
+    });
+    return h(
+      'div',
+      { class: `field wide ${error ? 'error' : ''}` },
+      h('div', { class: 'label-row' }, h('label', { for: input.id }, spec.label)),
+      h(
+        'div',
+        { class: 'tools' },
+        items.map((item, index) =>
+          h(
+            'div',
+            { class: 'tool' },
+            h('span', { class: 'name', title: item }, item),
+            h(
+              'button',
+              {
+                class: 'icon-btn tiny',
+                type: 'button',
+                'aria-label': `Remove ${item}`,
+                onclick: () => {
+                  items.splice(index, 1);
+                  delete serverErrors[key];
+                  note = null;
+                  ctx.rerender();
+                },
+              },
+              icon('x', 12),
+            ),
+          ),
+        ),
+        h('div', { class: 'tool-add' }, input, button('Add', { variant: 'tall', onclick: add })),
+      ),
+      h('div', { class: 'help' }, error ? `⚠ ${error}` : (spec.help ?? '')),
+    );
+  }
+
+  function move(id, delta) {
+    const index = draft.order.indexOf(id);
+    const target = index + delta;
+    if (target < 0 || target >= draft.order.length) return;
+    [draft.order[index], draft.order[target]] = [draft.order[target], draft.order[index]];
+    delete serverErrors.order;
+    note = null;
+    ctx.rerender();
+  }
+
+  function card(id, position) {
+    const agent = byId.get(id);
+    const entry = draft.agents[id];
+    if (!agent || !entry) return null;
+    const toggle = h('input', { type: 'checkbox', id: `agent-${id}-enabled`, checked: entry.enabled });
+    toggle.addEventListener('change', () => {
+      entry.enabled = toggle.checked;
+      touch(`${id}.enabled`);
+    });
+    const arrow = (label, delta, disabled) =>
+      h('button', { class: 'icon-btn tiny', type: 'button', 'aria-label': `${label} ${agent.name}`, title: label, disabled, onclick: () => move(id, delta) }, delta < 0 ? '↑' : '↓');
+
+    const simple = agent.fields.filter((spec) => spec.type !== 'list');
+    const lists = agent.fields.filter((spec) => spec.type === 'list');
+    return h(
+      'section',
+      { class: 'card agent-card', 'aria-label': agent.name },
+      h(
+        'div',
+        { class: 'card-head agent-head' },
+        h('span', { class: 'order' }, arrow('Move up', -1, position === 0), arrow('Move down', 1, position === draft.order.length - 1)),
+        h('h2', null, agent.name),
+        availabilityBadges(agent),
+        h('span', { class: 'spacer' }),
+        h('label', { class: 'switch', for: toggle.id }, toggle, 'Enabled'),
+      ),
+      agent.notes.length > 0 ? h('ul', { class: 'notes' }, agent.notes.map((text) => h('li', null, text))) : null,
+      agent.reportsUsage ? h('div', { class: 'usage-line', id: `agent-${id}-usage` }, usageLine(agent)) : null,
+      h('div', { class: 'usage-line' }, statsLine(agent.stats)),
+      h(
+        'div',
+        { class: 'fields' },
+        textField(id, 'Run at once', 'maxConcurrent', entry.maxConcurrent, {
+          help: 'How many issues this agent may work on at the same time. 0 pauses it.',
+          numeric: true,
+          validate: concurrencyError,
+          onInput: (value) => (entry.maxConcurrent = value),
+        }),
+        textField(id, 'Binary', 'bin', entry.bin, {
+          help: 'Command name or absolute path. Empty uses the default.',
+          placeholder: agent.defaultBin,
+          onInput: (value) => (entry.bin = value),
+        }),
+        agent.reportsUsage
+          ? [
+              textField(id, 'Pause above (% of plan)', 'maxUsagePercent', entry.maxUsagePercent, {
+                help: 'Take no new issues once any plan window reaches this. Empty never pauses.',
+                numeric: true,
+                validate: usageLimitError,
+                onInput: (value) => (entry.maxUsagePercent = value),
+              }),
+              overageField(id, entry),
+            ]
+          : null,
+        simple.map((spec) =>
+          spec.type === 'select'
+            ? selectField(id, spec, entry)
+            : textField(id, spec.label, `settings.${spec.key}`, entry.settings[spec.key] ?? '', {
+                help: spec.help,
+                onInput: (value) => (entry.settings[spec.key] = value),
+              }),
+        ),
+        lists.map((spec) => listField(id, spec, entry)),
+      ),
+    );
+  }
+
+  refreshBar();
+  return [
+    h(
+      'div',
+      { class: 'config' },
+      banner(
+        'run',
+        null,
+        'An issue goes to the first enabled, installed agent with a free slot, in the order below. Foreman can tell that a CLI is installed, not that it is signed in; a sign-in problem shows up as a failed run.',
+        button('Check again', { onclick: recheck }),
+        true,
+      ),
+      draft.order.map(card),
+    ),
+    saveBar,
+  ];
+}