@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/tasks/list/status.css

@@ -0,0 +1,50 @@
+.st {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 2px 8px;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  white-space: nowrap;
+  color: var(--muted);
+  background: var(--wash);
+}
+.st i {
+  align-self: center;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.st.running {
+  color: var(--acc);
+  background: var(--accbg);
+}
+.st.running i {
+  width: 9px;
+  height: 9px;
+  background: none;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+.st.waiting {
+  color: var(--warn);
+  background: var(--warnbg);
+}
+.st.completed {
+  color: var(--ok);
+  background: var(--okbg);
+}
+.st.failed {
+  color: var(--bad);
+  background: var(--badbg);
+}
+.st.queued i,
+.st.cancelled i {
+  background: none;
+  border: 1.5px solid currentColor;
+}
+.stats .st {
+  justify-self: start;
+}

package/src/server/dash/app/dash/tasks/list/status.tsx

@@ -0,0 +1,20 @@
+import './status.css';
+import type { TaskState } from '@coder/client/types';
+
+export function Status({ status }: { status: TaskState }) {
+  return (
+    <span class={`st ${status}`}>
+      <i />
+      {STATUS_LABEL[status] ?? status}
+    </span>
+  );
+}
+
+export const STATUS_LABEL: Record<TaskState, string> = {
+  queued: 'waiting for slot',
+  running: 'running',
+  waiting: 'needs approval',
+  completed: 'completed',
+  failed: 'failed',
+  cancelled: 'cancelled',
+};

package/src/server/dash/app/dash/tasks/list/task.ts

@@ -0,0 +1,45 @@
+import type { TaskRow } from '@coder/client/types';
+
+/** Task statuses a list filters by. */
+export const STATUSES: Array<[string, string]> = [
+  ['', 'Recent'],
+  ['active', 'Active'],
+  ['waiting', 'Needs approval'],
+  ['running', 'Running'],
+  ['queued', 'Queued'],
+  ['completed', 'Completed'],
+  ['failed', 'Failed'],
+  ['cancelled', 'Cancelled'],
+  ['archived', 'Archived'],
+];
+
+/** The list request's filters; "archived" is its own switch, not a status. */
+export function listFilters<T extends { status: string }>(
+  filters: T,
+): Omit<T, 'status'> & { status?: string; archived?: boolean } {
+  const { status, ...rest } = filters;
+  return status === 'archived' ? { ...rest, archived: true } : { ...rest, status };
+}
+
+/** Where tasks come from besides platforms, which join by their integration id. */
+export const SOURCES: Array<[string, string]> = [
+  ['', 'All sources'],
+  ['dashboard', 'Dashboard'],
+  ['cli', 'CLI'],
+  ['schedule', 'Schedule'],
+];
+
+export const sourceLabel = (value: string) =>
+  (SOURCES.find(([key]) => key === value) ?? [value, value])[1];
+
+export const taskActive = (task: TaskRow) =>
+  task.status === 'queued' || task.status === 'running' || task.status === 'waiting';
+
+export const taskTitle = (task: TaskRow) =>
+  task.task.name?.trim() ||
+  task.task.prompt?.trim() ||
+  task.task.event?.text?.trim() ||
+  `${task.task.event?.type ?? 'task'} on ${task.task.agent}`;
+
+/** A folder path's last segment. */
+export const folderName = (path: string) => path.split(/[\\/]/).filter(Boolean).at(-1) ?? path;

package/src/server/dash/app/dash/tasks/list/tasks-list.css

@@ -0,0 +1,85 @@
+.tasks {
+  table-layout: fixed;
+  min-width: 720px;
+}
+.tasks th:nth-child(2) {
+  width: 160px;
+}
+.tasks th:nth-child(3) {
+  width: 140px;
+}
+.tasks th:nth-child(4) {
+  width: 130px;
+}
+.tasks th:nth-child(5) {
+  width: 150px;
+}
+.tasks td {
+  padding-block: 9px;
+  vertical-align: middle;
+}
+.tasks .cover {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.tasks td:first-child .sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tasks td:first-child .sub {
+  margin-top: 1px;
+}
+
+@media (max-width: 760px) {
+  .tasks {
+    min-width: 0;
+  }
+  .tasks td:nth-child(3) {
+    display: flex;
+    align-items: center;
+    justify-self: end;
+  }
+  .tasks td.when,
+  .tasks td.num {
+    font-size: 11.5px;
+  }
+  .tasks td.num {
+    justify-self: end;
+    color: var(--muted);
+  }
+}
+.source {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.source .ic {
+  color: var(--dim);
+}
+
+/* a row's menu waits at its right edge, above the cover link, and shows on hover, focus or while open */
+.tasks th.num,
+.tasks td.num {
+  padding-right: 64px;
+}
+.tasks td.num {
+  position: relative;
+}
+.row-acts {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  z-index: 1;
+  translate: 0 -50%;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.tasks tr:is(:hover, :focus-within) .row-acts,
+.row-acts:has(.pop:popover-open) {
+  opacity: 1;
+}

package/src/server/dash/app/dash/tasks/list/tasks-list.tsx

@@ -0,0 +1,402 @@
+'use client';
+
+import './tasks-list.css';
+
+import { useEffect, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { formatCount, formatDate, formatDay, formatDuration } from '@/utils/format';
+import { iClock, iDots, iMonitor, iPlug, iTerminal } from '@/comps/ui/icons';
+import { Menu, MenuItem, MenuRadio } from '@/comps/ui/menu';
+import { Link } from '@wular/pnext/link';
+import { usePaged } from '@/utils/paged';
+import type { TaskCounts, TaskRow, TasksPage } from '@coder/client/types';
+import { Card, Empty } from '@/comps/ui/card';
+import { Id } from '@/comps/ui/badge';
+import { ConfirmDialog } from '@/comps/ui/confirm';
+import { ErrorText } from '@/comps/ui/field';
+import { approvalParts } from '@/app/dash/tasks/[id]/task-actions';
+import { reasonText } from '@/utils/format';
+import { Status } from './status';
+import { Icon } from '@/comps/ui/icon';
+import { Select } from '@/comps/ui/select';
+import { taskActive } from '@/app/dash/tasks/list/task';
+import { taskTitle } from '@/app/dash/tasks/list/task';
+import { LIST_PAGE } from '@/utils/paged';
+import { Search, Toolbar, queryOf, useFilters } from '@/comps/ui/toolbar';
+import { Tail } from '@/comps/ui/tail';
+import {
+  SOURCES,
+  STATUSES,
+  folderName,
+  listFilters,
+  sourceLabel,
+} from '@/app/dash/tasks/list/task';
+import { NeedsCredential } from '@/app/dash/tasks/composer';
+
+type Keys = 'q' | 'status' | 'source' | 'agent';
+
+const SOURCE_ICONS: Record<string, string> = {
+  dashboard: iMonitor,
+  cli: iTerminal,
+  schedule: iClock,
+};
+
+/** How often a list with running tasks refreshes their status. */
+const LIVE_MS = 4000;
+
+/** How long ago, under a day; the date after that. */
+function ago(value: number, now: number, tz: string) {
+  const minutes = Math.round((now - value) / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes} min ago`;
+  if (minutes < 1440) return `${Math.round(minutes / 60)} h ago`;
+  return formatDay(value, tz);
+}
+
+function TaskRowView({
+  task,
+  back,
+  scoped,
+  tz,
+  now,
+  onDone,
+  onError,
+}: {
+  task: TaskRow;
+  onDone: (what: RowAction) => void;
+  onError: (message: string) => void;
+  /** The list to return to, when it is not the plain Tasks page. */
+  back?: string;
+  /** On an agent's own list, which names no agent. */
+  scoped?: boolean;
+  tz: string;
+  now: number;
+}) {
+  const elapsed =
+    task.startedAt === undefined ? undefined : (task.finishedAt ?? now) - task.startedAt;
+  const source = task.task.event?.integration ?? task.task.source ?? 'dashboard';
+  const kind = task.task.event?.type ?? (task.task.flow === 'default' ? undefined : task.task.flow);
+
+  return (
+    <tr>
+      <td>
+        <Link
+          class="cover"
+          href="/dash/tasks/[id]"
+          params={{ id: task.task.id }}
+          search={back ? { back } : undefined}
+        >
+          {taskTitle(task)}
+        </Link>
+        <span class="sub">
+          {scoped ? null : `${task.task.agent} · `}
+          <Id value={task.task.id} />
+          {kind ? ` · ${kind}` : null}
+          {task.task.cwd ? (
+            <span title={task.task.cwd}>{` · ${folderName(task.task.cwd)}`}</span>
+          ) : null}
+        </span>
+      </td>
+      <td>
+        <Status status={task.status} />
+      </td>
+      <td>
+        <span class="source" title={sourceLabel(source)}>
+          <Icon d={SOURCE_ICONS[source] ?? iPlug} />
+          {sourceLabel(source)}
+        </span>
+      </td>
+      <td class="when" title={formatDate(task.createdAt, tz)}>
+        {ago(task.createdAt, now, tz)}
+      </td>
+      <td class="num">
+        {formatDuration(elapsed)}
+        <span class="row-acts">
+          <RowActions task={task} onDone={onDone} onError={onError} />
+        </span>
+      </td>
+    </tr>
+  );
+}
+
+/** Stop, Archive and Delete behind a row's ⋯ menu; the list hears what happened and drops or refreshes the row. */
+type RowAction = 'cancel' | 'archive' | 'delete' | 'approve';
+
+function RowActions({
+  task,
+  onDone,
+  onError,
+}: {
+  task: TaskRow;
+  onDone: (what: RowAction) => void;
+  onError: (message: string) => void;
+}) {
+  const [deleting, setDeleting] = useState<'ask' | 'busy'>();
+  const act = (what: RowAction, decision?: 'accept' | 'decline') => {
+    onError('');
+    const call =
+      what === 'approve'
+        ? client.tasks.approve(
+            task.task.id,
+            approvalParts(task.approval).id ?? '',
+            decision ?? 'decline',
+          )
+        : what === 'delete'
+          ? client.tasks.delete(task.task.id)
+          : client.tasks[what](task.task.id);
+
+    void call
+      .then(
+        () => onDone(what),
+        reason => onError(reasonText(reason)),
+      )
+      .finally(() => setDeleting(undefined));
+  };
+  return (
+    <>
+      <Menu summary={<Icon d={iDots} />} summaryClass="icon-btn" label="Task actions" align="right">
+        {task.approval ? (
+          <MenuItem title="Approve" onClick={() => act('approve', 'accept')} />
+        ) : null}
+        {task.approval ? <MenuItem title="Deny" onClick={() => act('approve', 'decline')} /> : null}
+        {taskActive(task) ? <MenuItem title="Stop" onClick={() => act('cancel')} /> : null}
+        {task.archivedAt ? null : <MenuItem title="Archive" onClick={() => act('archive')} />}
+        <MenuItem title="Delete" danger onClick={() => setDeleting('ask')} />
+      </Menu>
+      <ConfirmDialog
+        open={Boolean(deleting)}
+        title="Delete this task?"
+        body="Its conversation, activity and diff go with it."
+        confirmLabel="Delete"
+        busy={deleting === 'busy'}
+        onConfirm={() => {
+          setDeleting('busy');
+          act('delete');
+        }}
+        onClose={() => setDeleting(undefined)}
+      />
+    </>
+  );
+}
+
+/** Tasks newest first, in pages as the list scrolls; search and filters run on the server, running ones stay live. */
+export function TasksList({
+  first,
+  platforms,
+  agents = [],
+  filters,
+  agent,
+  head,
+  missing,
+  tz,
+  now,
+}: {
+  first: TasksPage;
+  /** Platform ids, the sources besides the dashboard, CLI and schedule. */
+  platforms: [string, string][];
+  /** Every agent's id, for the agent filter. */
+  agents?: [string, string][];
+  filters: Record<Keys, string>;
+  agent?: string;
+  /** On the tasks page the toolbar is the page head. */
+  head?: { title: string };
+  /** No credential can run a task yet. */
+  missing?: boolean;
+  tz: string;
+  now: number;
+}) {
+  const { values, set, query } = useFilters<Keys>(filters);
+  const initial = queryOf(filters);
+  const scope = agent ? `&agent=${encodeURIComponent(agent)}` : '';
+  const path = agent ? `/dash/agents/${encodeURIComponent(agent)}/tasks` : '/dash/tasks';
+  const back = query || agent ? `${path}${query ? `?${query}` : ''}` : undefined;
+  const options = {
+    limit: LIST_PAGE,
+    summary: true,
+    counts: true,
+    ...listFilters(values),
+    agent: agent ?? values.agent,
+  };
+  const list = usePaged<TaskRow>({
+    name: `tasks${scope}`,
+    fetchPage: cursor => client.tasks.list({ ...options, cursor }),
+    query,
+    first,
+    initial,
+  });
+  const [fresh, setFresh] = useState<{
+    rows: Record<string, TaskRow>;
+    counts?: TaskCounts;
+    query?: string;
+  }>({ rows: {} });
+  const [gone, setGone] = useState<string[]>([]);
+  // Rows hidden after an archive or delete come back into view when the filters change.
+  useEffect(() => setGone([]), [query]);
+  const [actionError, setActionError] = useState('');
+  const rows = list.rows
+    .filter(task => !gone.includes(task.task.id))
+    .map(task => fresh.rows[task.task.id] ?? task);
+  const counts =
+    (fresh.query === query ? fresh.counts : undefined) ??
+    (list.meta.counts as TaskCounts | undefined);
+  const live = rows.some(taskActive) || !!counts?.active;
+
+  // Running tasks' status follows while they run; the rows themselves stay where they are.
+  useEffect(() => {
+    if (!live) return;
+
+    const byId = (items: TaskRow[]) => Object.fromEntries(items.map(row => [row.task.id, row]));
+    const timer = setInterval(() => {
+      void Promise.all([
+        client.tasks.list({ ...options, cursor: '' }),
+        // A row whose status leaves the filter still takes its new status.
+        options.status
+          ? client.tasks.list({ ...options, status: undefined, counts: false, cursor: '' })
+          : undefined,
+      ])
+        .then(([page, recent]) =>
+          setFresh(current => ({
+            rows: { ...current.rows, ...byId(recent?.items ?? []), ...byId(page.items) },
+            counts: page.counts,
+            query,
+          })),
+        )
+        .catch(() => {});
+    }, LIVE_MS);
+    return () => clearInterval(timer);
+  }, [live, query, agent]);
+
+  return (
+    <>
+      <Toolbar head={head}>
+        <Search value={values.q} label="Search tasks" onInput={value => set('q', value, 250)} />
+        <Select
+          label="Status"
+          value={values.status}
+          options={STATUSES}
+          onChange={value => set('status', value)}
+        />
+        <Menu
+          class="filter-more"
+          label="More filters"
+          summaryClass={`field-btn${values.source || values.agent ? ' on' : ''}`}
+          summary="Filter"
+        >
+          <p class="pop-label">Source</p>
+          <div role="group" aria-label="Source">
+            {[...SOURCES, ...platforms].map(([value, label]) => (
+              <MenuRadio
+                key={value}
+                on={values.source === value}
+                onPick={() => set('source', value)}
+              >
+                {label}
+              </MenuRadio>
+            ))}
+          </div>
+          {agent ? null : (
+            <>
+              <p class="pop-label">Agent</p>
+              <div role="group" aria-label="Agent">
+                {[
+                  ['', 'All agents'] as [string, string],
+                  ...(values.agent && !agents.some(([id]) => id === values.agent)
+                    ? [[values.agent, values.agent] as [string, string]]
+                    : []),
+                  ...agents,
+                ].map(([value, label]) => (
+                  <MenuRadio
+                    key={value}
+                    on={values.agent === value}
+                    onPick={() => set('agent', value)}
+                  >
+                    {label}
+                  </MenuRadio>
+                ))}
+              </div>
+            </>
+          )}
+        </Menu>
+      </Toolbar>
+      {missing ? <NeedsCredential /> : null}
+      <Card
+        title="Tasks"
+        count={counts ? formatCount(counts.all) : undefined}
+        actions={
+          counts ? (
+            <>
+              <ErrorText value={actionError} />
+              {counts.active ? (
+                <button type="button" class="badge acc" onClick={() => set('status', 'active')}>
+                  {formatCount(counts.active)} active
+                </button>
+              ) : null}
+              {counts.waiting ? (
+                <button type="button" class="badge warn" onClick={() => set('status', 'waiting')}>
+                  {formatCount(counts.waiting)} awaiting approval
+                </button>
+              ) : null}
+            </>
+          ) : undefined
+        }
+      >
+        {rows.length ? (
+          <div class="table-scroll">
+            <table class="rows tasks stacked" aria-busy={list.stale}>
+              <thead>
+                <tr>
+                  <th>Task</th>
+                  <th>Status</th>
+                  <th>Source</th>
+                  <th>Created</th>
+                  <th class="num">Duration</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map(task => (
+                  <TaskRowView
+                    key={task.task.id}
+                    task={task}
+                    back={back}
+                    scoped={Boolean(agent)}
+                    tz={tz}
+                    now={now}
+                    onError={setActionError}
+                    onDone={what => {
+                      // An archived row leaves every view but the archive; a stopped one just refreshes.
+                      if (what === 'delete' || (what === 'archive' && values.status !== 'archived'))
+                        setGone(current => [...current, task.task.id]);
+                      void client.tasks
+                        .list({ ...options, cursor: '' })
+                        .then(page =>
+                          setFresh(current => ({
+                            rows: {
+                              ...current.rows,
+                              ...Object.fromEntries(page.items.map(row => [row.task.id, row])),
+                            },
+                            counts: page.counts,
+                            query,
+                          })),
+                        )
+                        .catch(() => {});
+                    }}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : list.stale ? null : query ? (
+          <Empty title="No tasks match">Try another search or filter.</Empty>
+        ) : (
+          <Empty title="No tasks yet">
+            {agent
+              ? 'Tasks appear here as this agent runs.'
+              : 'Type what you want done in the box above and press Enter. Tasks from the dashboard, the CLI and platforms like GitHub show up here, newest first.'}
+          </Empty>
+        )}
+        <Tail noun="tasks" {...list} />
+      </Card>
+    </>
+  );
+}

package/src/server/dash/app/dash/tasks/list/tasks-section.tsx

@@ -0,0 +1,96 @@
+import './tasks-list.css';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { zoneOf } from '@/utils/format';
+import { LIST_PAGE } from '@/utils/paged';
+import { load } from '@/api/load';
+import { Settle } from '@/comps/frame/stream';
+import { LoadingCard, LoadingToolbar } from '@/comps/frame/loading-card';
+import { SOURCES, STATUSES, listFilters } from '@/app/dash/tasks/list/task';
+
+// Rows arrive rendered; paging and filters hydrate once the list is in view.
+const TasksList = dynamic(() => import('./tasks-list').then(m => m.TasksList), {
+  load: 'visible',
+  ssr: true,
+});
+
+/** A task list before it arrives; an agent's own tab has no head and no agent filter. */
+export function TasksLoading({ head, agent }: { head?: { title: string }; agent?: boolean }) {
+  return (
+    <>
+      <LoadingToolbar head={head} search="Search tasks" selects={[STATUSES[0]![1]]} more />
+      <LoadingCard title="Tasks" label="Loading tasks" />
+    </>
+  );
+}
+
+/** The tasks the address bar's filters select; the page starts these loads before it renders. */
+export function loadTasks(
+  request: Request,
+  agent?: string,
+  agentChoices?: Promise<[string, string][]>,
+) {
+  const params = new URL(request.url).searchParams;
+  const filters = {
+    q: params.get('q') ?? '',
+    status: params.get('status') ?? '',
+    source: params.get('source') ?? '',
+    agent: agent ? '' : (params.get('agent') ?? ''),
+  };
+
+  const first = load(request).tasks.list({
+    cursor: '',
+    limit: LIST_PAGE,
+    summary: true,
+    counts: true,
+    ...listFilters(filters),
+    agent: agent ?? filters.agent,
+  });
+  const catalog = load(request).integrations.list();
+  // The agent filter's choices; an agent's own tab has none.
+  const agents = agent
+    ? undefined
+    : (agentChoices ??
+      load(request)
+        .agents.list({ cursor: '', limit: 100 })
+        .then(
+          page => page.items.map((row): [string, string] => [row.id, row.name]),
+          () => [],
+        ));
+  return { filters, first, catalog, agents, tz: zoneOf(request) };
+}
+
+export function TasksSection({
+  tasks: { filters, first, catalog, agents, tz },
+  agent,
+  head,
+  missing,
+}: {
+  tasks: ReturnType<typeof loadTasks>;
+  agent?: string;
+  head?: { title: string };
+  /** No credential can run a task yet. */
+  missing?: Promise<boolean>;
+}) {
+  return (
+    <Settle
+      load={() =>
+        Promise.all([first, catalog.catch(() => []), agents, missing]).then(
+          ([page, integrations, ids, needs]) => (
+            <TasksList
+              first={page}
+              platforms={integrations.map((entry): [string, string] => [entry.id, entry.name])}
+              agents={ids}
+              filters={filters}
+              agent={agent}
+              head={head}
+              missing={needs}
+              tz={tz}
+              now={Date.now()}
+            />
+          ),
+        )
+      }
+    />
+  );
+}