@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/settings/[tab]/runners-list.css

@@ -0,0 +1,153 @@
+.runner-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+/* the icon shifts the inline-flex baseline, so this row centers its badges instead */
+.row-title:has(> b.runner-name) {
+  align-items: center;
+}
+.runner-name > .ic {
+  color: var(--muted);
+}
+.runner-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.runner-status .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--dim);
+}
+.runner-status.ok .dot {
+  background: var(--ok);
+}
+.runner-status.bad {
+  color: var(--bad);
+}
+.runner-status.bad .dot {
+  background: var(--bad);
+}
+.runner-rename {
+  height: 22px;
+  padding: 0 6px;
+  font-weight: 600;
+}
+.runner-add {
+  display: grid;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--line);
+}
+.runner-pick {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.runner-pick > input {
+  flex: 1 1 180px;
+}
+.runner-pick .pop-item:disabled {
+  opacity: 0.5;
+}
+.runner-pair {
+  display: grid;
+  gap: 10px;
+}
+.runner-cmd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.runner-cmd > code {
+  flex: 1;
+  padding: 8px 10px;
+  background: var(--wash2);
+  font: 12px/1.5 var(--mono);
+  overflow-wrap: anywhere;
+}
+.runner-wait {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.runner-wait > .loading {
+  justify-content: flex-start;
+}
+.runner-pair code {
+  font-size: 12px;
+}
+.runner-step {
+  display: grid;
+  gap: 8px;
+}
+.runner-step > p,
+.runner-step > summary {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+.runner-step > summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  cursor: pointer;
+  list-style: none;
+}
+.runner-step > summary::-webkit-details-marker {
+  display: none;
+}
+.runner-step > summary::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border: solid currentColor;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(-45deg);
+  transition: transform 0.15s;
+}
+.runner-step[open] > summary::before {
+  transform: rotate(45deg);
+}
+.runner-step > summary:hover {
+  color: var(--fg);
+}
+
+@media (max-width: 760px) {
+  .runner-pick > * {
+    flex: 1 1 100%;
+  }
+}
+.runner-help {
+  flex: 1 1 100%;
+  margin: 0;
+}
+.runner-pick > .add-grid {
+  flex: 1 1 100%;
+}
+.runner-foot {
+  display: flex;
+  flex: 1 1 100%;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 6px;
+}
+.runner-pick .add-grid > .field {
+  flex: 1 1 200px;
+}
+.runner-pick .field > span:first-child {
+  display: grid;
+  gap: 2px;
+}
+.runner-pick .field small {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/server/dash/app/dash/settings/[tab]/runners-list.tsx

@@ -0,0 +1,457 @@
+'use client';
+
+import './runners-list.css';
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import {
+  iCheck,
+  iCopy,
+  iDots,
+  iDown,
+  iGit,
+  iMonitor,
+  iPlug,
+  iPlus,
+  iSpark,
+  iTerminal,
+} from '@/comps/ui/icons';
+import { Card, Loading } from '@/comps/ui/card';
+import { Badge } from '@/comps/ui/badge';
+import { ErrorText, Field } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+import { Menu, MenuItem } from '@/comps/ui/menu';
+import { Select } from '@/comps/ui/select';
+import { formatDuration, reasonText } from '@/utils/format';
+import { sortedRunners } from '@/app/dash/tasks/composer-data';
+import { useRemove } from './list';
+import type { Me, RunnerKind, RunnerPairing, RunnerRow, RunnerSpec } from '@coder/client/types';
+
+type Runners = { items: RunnerRow[]; catalog: RunnerSpec[] };
+type Tested = { ok: boolean; detail: string; ms: number } | 'testing';
+
+const KIND_ICONS: Record<RunnerKind, string> = {
+  local: iMonitor,
+  'local-docker': iTerminal,
+  'vercel-sandbox': iSpark,
+  'github-actions': iGit,
+  http: iPlug,
+};
+const BUILT_IN = new Set(['default', 'local']);
+const SCOPES: Array<[string, string]> = [
+  ['personal', 'Just me'],
+  ['workspace', 'Workspace'],
+];
+const ADMIN_ROLES = new Set(['owner', 'admin']);
+
+const ago = (at: number) =>
+  Date.now() - at < 60_000
+    ? 'just now'
+    : `${formatDuration(Date.now() - at).replace(/\.\d/, '')} ago`;
+
+function Status({ runner, tested }: { runner: RunnerRow; tested?: Tested }) {
+  if (tested === 'testing')
+    return (
+      <span class="sub runner-status">
+        <i class="dot" />
+        Testing…
+      </span>
+    );
+  if (tested)
+    return (
+      <span class={`sub runner-status ${tested.ok ? 'ok' : 'bad'}`}>
+        <i class="dot" />
+        {tested.ok ? `Reached in ${formatDuration(tested.ms)}` : tested.detail}
+      </span>
+    );
+  return (
+    <span class={`sub runner-status${runner.online ? ' ok' : ''}`}>
+      <i class="dot" />
+      {runner.online
+        ? 'Online'
+        : runner.lastSeen
+          ? `Last seen ${ago(runner.lastSeen)}`
+          : 'Not seen yet'}
+    </span>
+  );
+}
+
+function RunnerItem({
+  runner,
+  manage,
+  onChange,
+  onError,
+}: {
+  runner: RunnerRow;
+  manage: boolean;
+  onChange: (act: () => Promise<unknown>) => Promise<boolean>;
+  onError: (message: string) => void;
+}) {
+  const [making, setMaking] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [tested, setTested] = useState<Tested>();
+  const rename = useRef<HTMLInputElement>(null);
+  useEffect(() => rename.current?.select(), [renaming]);
+  const builtIn = BUILT_IN.has(runner.id);
+  const removing = useRemove(
+    manage && !builtIn
+      ? {
+          title: `Remove ${runner.name}?`,
+          body: 'Its tasks go to another runner.',
+          onRemove: () => onChange(() => client.runners.remove(runner.id)),
+        }
+      : undefined,
+  );
+  const test = () => {
+    setTested('testing');
+    client.runners.test(runner.id).then(setTested, reason => {
+      setTested(undefined);
+      onError(reasonText(reason));
+    });
+  };
+  return (
+    <tr>
+      <td>
+        <span class="row-title">
+          <b class="runner-name">
+            <Icon d={KIND_ICONS[runner.kind] ?? iPlug} />
+            {renaming ? (
+              <input
+                class="runner-rename"
+                aria-label="Runner name"
+                defaultValue={runner.name}
+                ref={rename}
+                onKeyDown={event => {
+                  const name = event.currentTarget.value.trim();
+                  if (event.key === 'Escape') setRenaming(false);
+                  if (event.key === 'Enter' && name)
+                    void onChange(() => client.runners.update(runner.id, { name })).then(() =>
+                      setRenaming(false),
+                    );
+                }}
+                onBlur={() => setRenaming(false)}
+              />
+            ) : (
+              runner.name
+            )}
+          </b>
+          <Badge>{runner.scope}</Badge>
+          {runner.default ? <Badge tone="acc">default</Badge> : null}
+        </span>
+        <Status runner={runner} tested={tested} />
+      </td>
+      <td class="acts">
+        {runner.default || !manage ? null : (
+          <button
+            type="button"
+            class="btn secondary sm"
+            disabled={making}
+            aria-busy={making}
+            onClick={() => {
+              setMaking(true);
+              void onChange(() => client.runners.update(runner.id, { default: true })).finally(() =>
+                setMaking(false),
+              );
+            }}
+          >
+            Make default
+          </button>
+        )}
+        <Menu summaryClass="icon-btn" label="Actions" summary={<Icon d={iDots} />}>
+          <MenuItem title="Test" onClick={test} />
+          {manage && !builtIn ? (
+            <MenuItem title="Rename" onClick={() => setRenaming(true)} />
+          ) : null}
+          {removing.item}
+        </Menu>
+        {removing.dialog}
+      </td>
+    </tr>
+  );
+}
+
+/** One command to copy. */
+function Command({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div class="runner-cmd">
+      <code>{value}</code>
+      <button
+        type="button"
+        class={copied ? 'icon-btn copied' : 'icon-btn'}
+        aria-label={copied ? 'Copied' : 'Copy command'}
+        title={copied ? 'Copied' : 'Copy command'}
+        onClick={() => void navigator.clipboard.writeText(value).then(() => setCopied(true))}
+      >
+        <Icon d={copied ? iCheck : iCopy} />
+      </button>
+    </div>
+  );
+}
+
+/** A pairing in progress: what to run on the other computer, step by step, and a wait until it connects. */
+function Pairing({ pairing, onCancel }: { pairing: RunnerPairing; onCancel: () => void }) {
+  return (
+    <div class="runner-pair">
+      <details class="runner-step">
+        <summary>Install the Coder CLI on that computer, if it is not there yet</summary>
+        <Command value="npm install -g @wular/coder" />
+      </details>
+      <div class="runner-step">
+        <p>Run this there. The token works once and expires in 15 minutes.</p>
+        <Command value={pairing.command} />
+      </div>
+      <details class="runner-step">
+        <summary>Behind a firewall? This server has to reach that computer over HTTPS</summary>
+        <p>
+          Open a tunnel on that computer first, then add its address to the command above as{' '}
+          <code>--runner-url</code>.
+        </p>
+        <Command value="cloudflared tunnel --url http://localhost:4100" />
+      </details>
+      <div class="runner-wait">
+        <Loading label="Waiting for that computer to connect" inline dots />
+        <button type="button" class="btn secondary-danger sm" onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** Add a runner: pick a kind, then fill its fields or pair a machine. */
+function AddRunner({
+  catalog,
+  admin,
+  personal,
+  known,
+  onAdded,
+}: {
+  catalog: RunnerSpec[];
+  admin: boolean;
+  /** A signed-in user can own a runner; a local server without one only has workspace runners. */
+  personal: boolean;
+  known: string[];
+  onAdded: (rows: Runners) => void;
+}) {
+  const [kind, setKind] = useState<RunnerKind>();
+  const [scope, setScope] = useState(personal ? 'personal' : 'workspace');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [pairing, setPairing] = useState<RunnerPairing>();
+  const spec = catalog.find(each => each.kind === kind);
+
+  // A paired machine shows up in the list once it calls home.
+  useEffect(() => {
+    if (!pairing) return;
+    const until = Math.min(pairing.expiresAt, Date.now() + 15 * 60_000);
+    const timer = setInterval(() => {
+      if (Date.now() > until) return cancel();
+      void client.runners.list().then(rows => {
+        if (!rows.items.some(row => !known.includes(row.id))) return;
+        onAdded(rows);
+        cancel();
+      });
+    }, 2000);
+    return () => clearInterval(timer);
+  }, [pairing]);
+
+  const cancel = () => {
+    setPairing(undefined);
+    setKind(undefined);
+  };
+
+  // Picking another kind drops a pairing still waiting.
+  const pick = (next: RunnerSpec) => {
+    setError('');
+    setPairing(undefined);
+    setKind(next.kind);
+    if (next.connect !== 'pair') return;
+    setBusy(true);
+    client.runners
+      .pair({ scope: scope as RunnerRow['scope'] })
+      .then(setPairing, reason => {
+        setKind(undefined);
+        setError(reasonText(reason));
+      })
+      .finally(() => setBusy(false));
+  };
+
+  const add = async (event: SubmitEvent) => {
+    event.preventDefault();
+    if (!spec || busy) return;
+    const values = Object.fromEntries(
+      [...new FormData(event.currentTarget as HTMLFormElement)].map(([key, value]) => [
+        key,
+        String(value).trim(),
+      ]),
+    );
+    const { name, ...config } = values;
+    setBusy(true);
+    setError('');
+    try {
+      await client.runners.add({
+        kind: spec.kind,
+        name: name || spec.name,
+        scope: scope as RunnerRow['scope'],
+        config: Object.fromEntries(Object.entries(config).filter(([, value]) => value)),
+      });
+      onAdded(await client.runners.list());
+      setKind(undefined);
+    } catch (reason) {
+      setError(reasonText(reason));
+    }
+    setBusy(false);
+  };
+
+  return (
+    <form class="runner-add" method="post" onSubmit={add}>
+      <div class="runner-pick">
+        <Menu
+          summaryClass="btn secondary"
+          label="Runner kind"
+          align="left"
+          wide
+          summary={
+            <>
+              <Icon d={spec ? KIND_ICONS[spec.kind] : iPlus} />
+              {spec ? spec.name : 'Add a runner'}
+              <Icon d={iDown} />
+            </>
+          }
+        >
+          {catalog
+            .filter(each => each.available)
+            .map(each => (
+              <button
+                key={each.kind}
+                type="button"
+                role="menuitemradio"
+                aria-checked={each.kind === kind}
+                class="pop-item rich"
+                onClick={() => pick(each)}
+              >
+                <Icon d={KIND_ICONS[each.kind] ?? iPlug} />
+                <span class="grow">
+                  {each.name}
+                  <small>{each.available ? each.description : each.reason}</small>
+                </span>
+                <Icon d={iCheck} />
+              </button>
+            ))}
+        </Menu>
+        {spec?.connect === 'fields' ? (
+          <>
+            {spec.help ? <p class="muted runner-help">{spec.help}</p> : null}
+            <div class="add-grid">
+              <Field label="Name" hint="shown in the list">
+                <input name="name" placeholder={spec.name} autocomplete="off" />
+              </Field>
+              {spec.fields.map(field => (
+                <Field
+                  key={`${spec.kind}:${field.key}`}
+                  label={field.label}
+                  hint={field.hint ?? (field.optional ? 'optional' : undefined)}
+                >
+                  <input
+                    name={field.key}
+                    type={field.secret ? 'password' : 'text'}
+                    placeholder={field.placeholder}
+                    required={!field.optional}
+                    autocomplete="off"
+                  />
+                </Field>
+              ))}
+            </div>
+          </>
+        ) : null}
+        {spec?.connect === 'fields' ? (
+          <div class="runner-foot">
+            <ErrorText value={error} />
+            {personal ? (
+              <Select
+                label="Who can use this runner"
+                options={SCOPES}
+                value={admin ? scope : 'personal'}
+                onChange={setScope}
+                disabled={!admin}
+              />
+            ) : null}
+            <button class="btn" aria-busy={busy} disabled={busy}>
+              Add runner
+            </button>
+          </div>
+        ) : (
+          <>
+            {spec && personal ? (
+              <Select
+                label="Who can use this runner"
+                options={SCOPES}
+                value={admin ? scope : 'personal'}
+                onChange={setScope}
+                disabled={!admin || Boolean(pairing)}
+              />
+            ) : null}
+            {busy && !pairing ? <Loading label="Pairing" inline /> : null}
+            <ErrorText value={error} />
+          </>
+        )}
+      </div>
+      {pairing ? <Pairing pairing={pairing} onCancel={cancel} /> : null}
+    </form>
+  );
+}
+
+/** Where tasks run: every runner by name, the default first, and how to add one. */
+export function RunnersList({ first, me }: { first: Runners; me: Me }) {
+  const [rows, setRows] = useState(first);
+  const [error, setError] = useState('');
+  const admin = !me.user || ADMIN_ROLES.has(me.organization?.role ?? '');
+  const items = sortedRunners(rows.items);
+
+  // Online dots stay fresh while the tab is open.
+  useEffect(() => {
+    const timer = setInterval(() => void client.runners.list().then(setRows, () => {}), 30_000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const change = async (act: () => Promise<unknown>) => {
+    setError('');
+    try {
+      await act();
+      setRows(await client.runners.list());
+      return true;
+    } catch (reason) {
+      setError(reasonText(reason));
+      return false;
+    }
+  };
+
+  return (
+    <Card title="Runners" count={items.length} actions={<ErrorText value={error} />}>
+      <div class="table-scroll">
+        <table class="rows settings">
+          <tbody>
+            {items.map(runner => (
+              <RunnerItem
+                key={runner.id}
+                runner={runner}
+                manage={runner.scope === 'personal' || admin}
+                onChange={change}
+                onError={setError}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <AddRunner
+        catalog={rows.catalog}
+        admin={admin}
+        personal={Boolean(me.user)}
+        known={items.map(row => row.id)}
+        onAdded={setRows}
+      />
+    </Card>
+  );
+}

package/src/server/dash/app/dash/settings/layout.tsx

@@ -0,0 +1,50 @@
+import type { ComponentChildren } from 'preact';
+import { Suspense } from 'preact/compat';
+
+import { load } from '@/api/load';
+import type { Me } from '@coder/client/types';
+import { Page } from '@/comps/frame/page-head';
+import { Tabs } from '@/comps/ui/tabs';
+import { SETTINGS, SettingsHead } from '@/app/dash/settings/settings-head';
+
+async function Members({ me }: { me: Promise<Me> }) {
+  const url = (await me.catch(() => undefined))?.manageMembersUrl;
+  return url ? (
+    <a class="btn outline" href={url} target="_blank" rel="noreferrer">
+      Members in Wular Auth ↗
+    </a>
+  ) : null;
+}
+
+/** Settings' head and tabs around the open tab; a tab switch keeps them and swaps only the tab. */
+export default function SettingsTabsLayout({
+  request,
+  children,
+}: {
+  request?: Request;
+  children: ComponentChildren;
+}) {
+  if (!request) return null;
+  const me = load(request).me();
+
+  return (
+    <Page>
+      <SettingsHead
+        actions={
+          <Suspense fallback={null}>
+            <Members me={me} />
+          </Suspense>
+        }
+      />
+      <Tabs
+        label="Settings"
+        items={SETTINGS.map(({ tab, label }) => ({
+          href: '/dash/settings/[tab]',
+          params: { tab },
+          label,
+        }))}
+      />
+      <div class="tab-body">{children}</div>
+    </Page>
+  );
+}