@dfsramos/foreman 0.0.0-stage → 0.2.0

package/public/projects.js

@@ -0,0 +1,481 @@
+// The Projects tab: each project's tracker, repository, settings and allowed agents, with its own
+// start and stop. Secrets can be set here but are never shown: the server only says whether one is set.
+
+import { api, banner, button, fill, fmtTime, h } from './ui.js';
+
+const REVIEW_MODE_LABELS = {
+  none: 'No review',
+  copilot: 'Copilot review',
+  other_agent: 'Another agent',
+  any_agent: 'Any agent (prefers another)',
+};
+const REVIEW_MODE_HELP =
+  'Who is asked to review a pull request when it opens. No review: a person requests or does it. Copilot: GitHub Copilot is requested. Another agent: an agent other than the author reviews; with no other agent, nothing happens. Any agent: as before, but the author’s agent reviews in a fresh session when no other can.';
+
+// The project being added or edited, if any. Kept here so re-rendering the tab does not lose input.
+let form = null;
+// The last save and what its source check found, shown above the list until a form opens or the tab is left.
+let saved = null;
+
+export const isEditingProject = () => form !== null;
+
+/** Closes the add/edit form, discarding its input; called when the user leaves the tab. */
+export function resetProjectForm() {
+  form = null;
+  saved = null;
+}
+
+function openForm(data, project) {
+  saved = null;
+  const source = data.sources.find((type) => type.id === (project?.sourceType ?? data.sources[0]?.id));
+  form = {
+    id: project?.id ?? null,
+    title: project ? `Edit ${project.name}` : 'Add a project',
+    draft: {
+      name: project?.name ?? '',
+      priority: project?.priority ?? 'normal',
+      sourceType: source?.id ?? '',
+      // Secrets start empty: an empty secret on an existing project means "keep the stored one".
+      sourceSettings: Object.fromEntries(
+        (source?.fields ?? []).map((field) => [
+          field.key,
+          field.type === 'secret' ? '' : (project?.sourceSettings[field.key] ?? field.default ?? ''),
+        ]),
+      ),
+      repoPath: project?.repoPath ?? '',
+      worktreeRoot: project?.worktreeRoot ?? '',
+      pollIntervalSeconds: String(project?.pollIntervalSeconds ?? data.defaults.pollIntervalSeconds),
+      agentTimeoutMinutes: String(project?.agentTimeoutMinutes ?? data.defaults.agentTimeoutMinutes),
+      agents: [...(project?.agents ?? [])],
+      autostart: project?.autostart ?? false,
+      reviewMaxRounds: String(project?.reviewMaxRounds ?? data.defaults.reviewMaxRounds),
+      reviewIgnoreAuthors: (project?.reviewIgnoreAuthors ?? data.defaults.reviewIgnoreAuthors).join(', '),
+      reviewMode: project?.reviewMode ?? data.defaults.reviewMode,
+      waitForCi: project?.waitForCi ?? data.defaults.waitForCi,
+    },
+    secretsSet: Object.fromEntries(
+      (source?.fields ?? []).filter((field) => field.type === 'secret').map((field) => [field.key, project?.sourceSettings[field.key]?.set === true]),
+    ),
+    errors: {},
+    check: null,
+    // Choices the source listed for its fields (teams, projects, states), once loaded.
+    options: null,
+    lookup: { busy: false, ok: null, message: null },
+  };
+}
+
+const payload = () => ({ ...form.draft, ...(form.id === null ? {} : { id: form.id }) });
+
+/**
+ * @param ctx.data        the `/api/projects` response currently known
+ * @param ctx.status      the latest runner status, for each project's live state
+ * @param ctx.agents      agents, for the allow-list
+ * @param ctx.onChange    called with a fresh `/api/projects` response after a change
+ * @param ctx.action      posts a runner action (start/stop) and applies the result
+ * @param ctx.rerender    rebuilds the tab
+ */
+export function projectsTab(ctx) {
+  const { data } = ctx;
+  return h('div', { class: 'config' }, form ? formCard(ctx) : listView(ctx));
+
+  function listView() {
+    if (data.projects.length === 0) {
+      return h(
+        'div',
+        { class: 'card stopped-card' },
+        h('h1', { class: 'title-l' }, 'No projects yet'),
+        h('p', null, 'A project connects a tracker to a repository. Add one to give foreman something to work on.'),
+        h('div', { class: 'actions' }, button('Add a project', { variant: 'primary tall', onclick: () => edit(null) })),
+      );
+    }
+    return [
+      banner(
+        'run',
+        null,
+        'Each project polls its own tracker and works in its own repository. When projects compete for an agent they take turns, weighted by priority: high gets three turns for every one of low, normal gets two.',
+        button('Add a project', { variant: 'primary', onclick: () => edit(null) }),
+        true,
+      ),
+      savedBanner(),
+      data.projects.map(projectCard),
+    ];
+  }
+
+  /** What the last save's source check found, shown until a form opens again. */
+  function savedBanner() {
+    if (!saved) return null;
+    const { name, check } = saved;
+    return banner('run', null, h('span', { class: check.ok ? 'text-ok' : 'text-fail' }, check.ok ? '✓ ' : '⚠ ', `Saved ${name}. `, check.message), null, true);
+  }
+
+  function edit(project) {
+    openForm(data, project);
+    ctx.rerender();
+    // With a stored key the choices can be listed straight away.
+    if (project && Object.values(form.secretsSet).some(Boolean)) void loadOptions();
+  }
+
+  /** Asks the source what the entered credentials can see, so fields can become lists to choose from. */
+  async function loadOptions() {
+    const current = form;
+    form.lookup = { busy: true, ok: null, message: null };
+    ctx.rerender();
+    const response = await api('POST', '/api/projects/lookup', payload());
+    // The form may have been closed, or another opened, while the tracker answered.
+    if (form !== current) return;
+    if (response.ok && response.data.ok) {
+      form.options = response.data.options;
+      form.lookup = { busy: false, ok: true, message: 'Loaded. Choose from the lists above.' };
+    } else if (response.data?.errors) {
+      form.errors = { ...form.errors, ...response.data.errors };
+      form.lookup = { busy: false, ok: false, message: null };
+    } else {
+      form.lookup = { busy: false, ok: false, message: response.data?.message ?? response.data?.error ?? `Could not load (${response.status})` };
+    }
+    ctx.rerender();
+  }
+
+  function projectCard(project) {
+    const status = ctx.status?.projects.find((candidate) => candidate.id === project.id) ?? project.status;
+    const started = status.state === 'idle' || status.state === 'working';
+    const countdown = h('span', { class: 'mono' }, ctx.nextPollText(status));
+    ctx.countdowns.push({ el: countdown, id: project.id });
+    const runs = status.activeRunIds.length;
+    const allowed =
+      project.agents.length === 0
+        ? 'Any agent'
+        : project.agents.map((id) => ctx.agents.find((agent) => agent.id === id)?.name ?? id).join(', ');
+    const facts = [
+      ['Source', project.sourceSummary],
+      ['Repository', project.repoPath],
+      ['Worktrees', project.worktreeRoot],
+      ['Agents', allowed],
+      [
+        'Review loop',
+        project.reviewMaxRounds > 0
+          ? `up to ${project.reviewMaxRounds} ${project.reviewMaxRounds === 1 ? 'round' : 'rounds'} of feedback per issue`
+          : 'off: pull requests are not watched',
+      ],
+      ['Polling', `every ${project.pollIntervalSeconds}s · agent timeout ${project.agentTimeoutMinutes}m${project.autostart ? ' · starts with foreman' : ''}`],
+    ];
+    return h(
+      'section',
+      { class: 'card', 'aria-label': project.name },
+      h(
+        'div',
+        { class: 'card-head agent-head' },
+        h('h2', null, project.name),
+        h('span', { class: `badge tone-${project.priority === 'high' ? 'run' : 'muted'}` }, `${project.priority} priority`),
+        ctx.stateBadge(status.state, runs > 0 ? `${runs} ${runs === 1 ? 'run' : 'runs'}` : null),
+        h('span', { class: 'spacer' }),
+        status.state === 'stopped'
+          ? button('Start', { variant: 'primary', iconName: 'play', onclick: () => ctx.action(`/api/projects/${project.id}/start`) })
+          : started
+            ? button('Stop', { iconName: 'square', onclick: () => ctx.action(`/api/projects/${project.id}/stop`) })
+            : null,
+        button('Edit', { onclick: () => edit(project) }),
+        button('Delete', { variant: 'danger', disabled: status.state !== 'stopped', title: status.state === 'stopped' ? '' : 'Stop the project first', onclick: () => remove(project) }),
+      ),
+      h(
+        'div',
+        { class: 'usage-line' },
+        status.lastError
+          ? h('span', { class: 'text-fail' }, status.lastError)
+          : status.state === 'stopped'
+            ? h('span', { class: 'faint' }, 'Not polling.')
+            : [
+                h('span', { class: 'muted' }, status.waiting ? 'Work waiting for a free agent · ' : ''),
+                h('span', { class: 'muted' }, 'next poll '),
+                countdown,
+                status.lastPollAt ? h('span', { class: 'faint' }, ` · last poll ${fmtTime(status.lastPollAt)}`) : null,
+                project.reviewMaxRounds > 0
+                  ? h('span', { class: 'faint' }, ` · ${status.inReview} in review · ${status.awaitingApproval} pending approval`)
+                  : null,
+              ],
+      ),
+      h('div', { class: 'kv-grid' }, facts.map(([key, value]) => h('div', null, h('div', { class: 'k' }, key), h('div', { class: 'v' }, value)))),
+    );
+  }
+
+  async function remove(project) {
+    if (!window.confirm(`Delete the project "${project.name}"? Its past runs stay in the history. Nothing is changed in the tracker or the repository.`)) return;
+    const response = await api('DELETE', `/api/projects/${project.id}`);
+    if (response.ok) {
+      saved = null;
+      ctx.onChange(response.data);
+    } else {
+      window.alert(response.data?.error ?? `Delete failed (${response.status})`);
+    }
+  }
+
+  function formCard() {
+    const source = data.sources.find((type) => type.id === form.draft.sourceType);
+    const { draft } = form;
+    const statusLine = h('div', { class: 'usage-line' });
+    const actions = h('div', { class: 'save-bar' });
+
+    const field = (label, key, control, help, wide = false) => {
+      const error = form.errors[key];
+      return h(
+        'div',
+        { class: `field ${error ? 'error' : ''} ${wide ? 'wide' : ''}` },
+        h('div', { class: 'label-row' }, h('label', { for: control.id }, label)),
+        control,
+        h('div', { class: 'help' }, error ? `⚠ ${error}` : (help ?? '')),
+      );
+    };
+    const text = (label, key, read, write, { help, placeholder, secret = false, numeric = false, wide = false } = {}) => {
+      const input = h('input', {
+        id: `project-${key.replace(/\W/g, '-')}`,
+        class: 'input',
+        type: secret ? 'password' : 'text',
+        inputmode: numeric ? 'numeric' : null,
+        autocomplete: secret ? 'new-password' : 'off',
+        spellcheck: 'false',
+        placeholder,
+        value: read(),
+      });
+      input.addEventListener('input', () => {
+        write(input.value);
+        // The check result describes the settings as they were.
+        form.check = null;
+        refreshStatus();
+      });
+      return field(label, key, input, help, wide);
+    };
+    const select = (label, key, options, read, write, help) => {
+      const control = h(
+        'select',
+        { id: `project-${key.replace(/\W/g, '-')}`, class: 'input' },
+        options.map(([value, name]) => h('option', { value, selected: read() === value }, name)),
+      );
+      control.addEventListener('change', () => write(control.value));
+      return field(label, key, control, help);
+    };
+
+    function refreshStatus() {
+      const messages = [];
+      if (form.check) {
+        messages.push(h('span', { class: form.check.ok ? 'text-ok' : 'text-fail' }, form.check.ok ? '✓ ' : '⚠ ', form.check.message));
+      }
+      for (const key of ['_', 'sourceType']) {
+        if (form.errors[key]) messages.push(h('span', { class: 'text-fail' }, `⚠ ${form.errors[key]}`));
+      }
+      fill(statusLine, messages);
+      statusLine.hidden = messages.length === 0;
+    }
+
+    async function check(event) {
+      const control = event.currentTarget;
+      control.disabled = true;
+      form.check = null;
+      const response = await api('POST', '/api/projects/check', payload());
+      if (!form) return;
+      if (response.ok) form.check = response.data;
+      else if (response.data?.errors) form.errors = response.data.errors;
+      else form.check = { ok: false, message: response.data?.error ?? `Check failed (${response.status})` };
+      ctx.rerender();
+    }
+
+    async function save() {
+      const response =
+        form.id === null ? await api('POST', '/api/projects', payload()) : await api('PUT', `/api/projects/${form.id}`, payload());
+      if (!form) return;
+      if (response.ok) {
+        saved = { name: draft.name.trim(), check: response.data.check };
+        form = null;
+        ctx.onChange(response.data);
+      } else {
+        form.errors = response.data?.errors ?? { _: response.data?.error ?? `Save failed (${response.status})` };
+        ctx.rerender();
+      }
+    }
+
+    /** A field the source listed choices for: a list narrowed by the field it depends on. */
+    const choice = (spec) => {
+      const settings = draft.sourceSettings;
+      const dependsOn = spec.lookup.dependsOn;
+      const parentField = source.fields.find((field) => field.key === dependsOn);
+      // An option without `for` applies whatever the parent field holds.
+      const available = (key, parentValue) => form.options[key].filter((option) => !option.for || option.for.includes(parentValue));
+      const options = available(spec.key, settings[dependsOn]);
+      const current = settings[spec.key] ?? '';
+      const blank = dependsOn && !settings[dependsOn] ? `Choose a ${parentField?.label.toLowerCase() ?? 'value'} first` : spec.required ? 'Choose…' : 'Any (no filter)';
+      const choices = [['', blank], ...options.map((option) => [option.value, option.label])];
+      if (current !== '' && !options.some((option) => option.value === current)) choices.push([current, `${current} (not in the list)`]);
+      return select(
+        spec.label,
+        `sourceSettings.${spec.key}`,
+        choices,
+        () => current,
+        (value) => {
+          settings[spec.key] = value;
+          form.check = null;
+          // Fields narrowed by this one lose a value that the new choice does not offer.
+          for (const other of source.fields) {
+            if (other.lookup?.dependsOn !== spec.key || !form.options[other.key]) continue;
+            if (!available(other.key, value).some((option) => option.value === settings[other.key])) settings[other.key] = '';
+          }
+          ctx.rerender();
+        },
+        spec.help,
+      );
+    };
+
+    const canLookUp = (source?.fields ?? []).some((spec) => spec.lookup);
+    const lookupRow = canLookUp
+      ? h(
+          'div',
+          { class: 'lookup-row' },
+          button(form.options ? `Reload from ${source.name}` : `Load teams and projects from ${source.name}`, {
+            disabled: form.lookup.busy,
+            title: 'Uses the key above to list what it can see. Nothing is changed in the tracker.',
+            onclick: () => void loadOptions(),
+          }),
+          form.lookup.busy
+            ? h('span', { class: 'muted' }, 'Loading…')
+            : form.lookup.message
+              ? h('span', { class: form.lookup.ok ? 'text-ok' : 'text-fail' }, form.lookup.ok ? '✓ ' : '⚠ ', form.lookup.message)
+              : !form.options
+                ? h('span', { class: 'faint' }, 'Or enter the IDs and state names by hand.')
+                : null,
+        )
+      : null;
+
+    const sourceFields = (source?.fields ?? []).map((spec) =>
+      spec.lookup && form.options?.[spec.key]
+        ? choice(spec)
+        : text(
+        spec.label,
+        `sourceSettings.${spec.key}`,
+        () => draft.sourceSettings[spec.key] ?? '',
+        (value) => (draft.sourceSettings[spec.key] = value),
+        {
+          help: spec.type === 'secret' && form.secretsSet[spec.key] ? `${spec.help ?? ''} A key is set; leave empty to keep it.`.trim() : spec.help,
+          placeholder: spec.type === 'secret' && form.secretsSet[spec.key] ? '•••••••• (unchanged)' : undefined,
+          secret: spec.type === 'secret',
+        },
+      ),
+    );
+
+    const agentBoxes = h(
+      'div',
+      { class: 'checks' },
+      ctx.agents.map((agent) => {
+        const box = h('input', { type: 'checkbox', id: `project-agent-${agent.id}`, checked: draft.agents.includes(agent.id) });
+        box.addEventListener('change', () => {
+          draft.agents = box.checked ? [...draft.agents, agent.id] : draft.agents.filter((id) => id !== agent.id);
+        });
+        return h('label', { class: 'switch', for: box.id }, box, agent.name, agent.available && agent.enabled ? null : h('span', { class: 'faint' }, agent.available ? '(off)' : '(not installed)'));
+      }),
+    );
+    const autostart = h('input', { type: 'checkbox', id: 'project-autostart', checked: draft.autostart });
+    autostart.addEventListener('change', () => (draft.autostart = autostart.checked));
+    const waitForCi = h('input', { type: 'checkbox', id: 'project-wait-for-ci', checked: draft.waitForCi });
+    waitForCi.addEventListener('change', () => (draft.waitForCi = waitForCi.checked));
+
+    const section = (title, sub, body) =>
+      h('section', { class: 'card' }, h('div', { class: 'card-head' }, h('h2', null, title), sub ? h('span', { class: 'sub' }, sub) : null), body);
+
+    fill(
+      actions,
+      h('span', { class: 'note' }, form.id === null ? 'The project is created stopped.' : 'Changes apply from the project’s next poll.'),
+      h('span', { class: 'spacer' }),
+      button('Cancel', {
+        onclick: () => {
+          form = null;
+          ctx.rerender();
+        },
+      }),
+      button('Check source', { onclick: check, title: 'Try these source settings against the tracker without saving' }),
+      button(form.id === null ? 'Create project' : 'Save changes', { variant: 'primary', onclick: save }),
+    );
+    refreshStatus();
+
+    return [
+      h('h1', { class: 'title-l' }, form.title),
+      section(
+        'Project',
+        null,
+        h(
+          'div',
+          { class: 'fields' },
+          text('Name', 'name', () => draft.name, (value) => (draft.name = value)),
+          select(
+            'Priority',
+            'priority',
+            data.priorities.map((value) => [value, value[0].toUpperCase() + value.slice(1)]),
+            () => draft.priority,
+            (value) => (draft.priority = value),
+            'Decides how often this project gets an agent when projects compete.',
+          ),
+        ),
+      ),
+      section(
+        `Source · ${source?.name ?? draft.sourceType}`,
+        'Where this project’s issues come from',
+        [h('div', { class: 'fields' }, sourceFields), lookupRow, statusLine],
+      ),
+      section(
+        'Repository',
+        'One project per repository',
+        h(
+          'div',
+          { class: 'fields' },
+          text('Repository path', 'repoPath', () => draft.repoPath, (value) => (draft.repoPath = value), {
+            help: 'An existing local git repository with an origin remote.',
+          }),
+          text('Worktree root', 'worktreeRoot', () => draft.worktreeRoot, (value) => (draft.worktreeRoot = value), {
+            help: 'One folder per issue; failed runs keep theirs. Empty uses a folder in foreman’s data directory.',
+            placeholder: `${data.defaults.worktreeRoot}/<project>`,
+          }),
+        ),
+      ),
+      section(
+        'Polling and agents',
+        null,
+        h(
+          'div',
+          { class: 'fields' },
+          text('Poll interval (seconds)', 'pollIntervalSeconds', () => draft.pollIntervalSeconds, (value) => (draft.pollIntervalSeconds = value), { numeric: true }),
+          text('Agent timeout (minutes)', 'agentTimeoutMinutes', () => draft.agentTimeoutMinutes, (value) => (draft.agentTimeoutMinutes = value), {
+            numeric: true,
+          }),
+          field('Allowed agents', 'agents', agentBoxes, 'None selected means any agent may be used.', true),
+          h('div', { class: 'field wide' }, h('label', { class: 'switch', for: autostart.id }, autostart, 'Start polling when foreman starts')),
+        ),
+      ),
+      section(
+        'Review loop',
+        'What happens after the pull request is open',
+        h(
+          'div',
+          { class: 'fields' },
+          select(
+            'Review',
+            'reviewMode',
+            data.reviewModes.map((value) => [value, REVIEW_MODE_LABELS[value] ?? value]),
+            () => draft.reviewMode,
+            (value) => (draft.reviewMode = value),
+            REVIEW_MODE_HELP,
+          ),
+          text('Rounds of feedback per issue', 'reviewMaxRounds', () => draft.reviewMaxRounds, (value) => (draft.reviewMaxRounds = value), {
+            numeric: true,
+            help: 'New review feedback is handed to an agent this many times; after that the issue goes to a person. 0 turns the loop off.',
+          }),
+          text('Ignore comments from', 'reviewIgnoreAuthors', () => draft.reviewIgnoreAuthors, (value) => (draft.reviewIgnoreAuthors = value), {
+            help: 'GitHub accounts, comma-separated, whose comments are not review feedback: deployment bots and the like.',
+          }),
+          field(
+            'CI',
+            'waitForCi',
+            h('label', { class: 'switch', for: waitForCi.id }, waitForCi, 'Wait for green CI'),
+            'Failing checks go back to the agent, approvals wait until the checks pass, and failures the agent cannot fix are rerun at most twice before a person takes over.',
+            true,
+          ),
+        ),
+      ),
+      actions,
+    ];
+  }
+}