@wular/coder 0.4.2 → 0.4.5

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

@@ -1,50 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,85 +0,0 @@
-.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

@@ -1,402 +0,0 @@
-'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

@@ -1,96 +0,0 @@
-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()}
-            />
-          ),
-        )
-      }
-    />
-  );
-}