@wular/coder 0.4.2 → 0.4.4

package/src/server/dash/app/dash/settings/[tab]/credentials.tsx

@@ -1,36 +0,0 @@
-import { dynamic } from '@wular/pnext/dynamic';
-
-import { load } from '@/api/load';
-import { Settle } from '@/comps/frame/stream';
-import { localServer } from '@/api/types';
-
-// Hydrates as soon as the page does, so its sign-in buttons are live at once.
-const CredentialsList = dynamic(() => import('./credentials-list').then(m => m.CredentialsList));
-const EngineLogins = dynamic(() => import('./credentials-list').then(m => m.EngineLogins));
-
-/** Same-origin dashboard path to go back to after signing in. */
-const backPath = (value: string | null) => (value && /^\/(?!\/)/.test(value) ? value : undefined);
-
-/** The credentials settings tab. */
-export function Credentials({ request }: { request: Request }) {
-  const params = new URL(request.url).searchParams;
-  const me = load(request).me();
-  const rows = load(request).credentials.list();
-
-  return (
-    <Settle
-      load={async () => {
-        const who = await me;
-        if (localServer(who)) return <EngineLogins status={await load(request).engines.status()} />;
-        return rows.then(list => (
-          <CredentialsList
-            rows={list}
-            me={who}
-            focus={params.get('engine') ?? ''}
-            back={backPath(params.get('return'))}
-          />
-        ));
-      }}
-    />
-  );
-}

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

@@ -1,16 +0,0 @@
-.inline-picks {
-  margin-top: 6px;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px 14px;
-}
-.inline-picks label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.inline-picks .select > button {
-  min-height: 28px;
-  padding: 2px 8px;
-  font-size: 11.5px;
-}

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

@@ -1,135 +0,0 @@
-'use client';
-
-import './engines-list.css';
-
-import { useState } from 'preact/hooks';
-
-import { Badge } from '@/comps/ui/badge';
-import { MenuItem } from '@/comps/ui/menu';
-import { Select, type Option } from '@/comps/ui/select';
-import { ENGINES, ENGINE_NAMES, defaultLabel } from '@/app/dash/settings/model-options';
-import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from './list';
-import type { ConfigShape, EngineEntry } from '@coder/client/types';
-
-/** Each engine's defaults, the order tasks try them, and the hosts tasks may reach. */
-export function EnginesList({
-  first,
-  defaults,
-}: {
-  first: ConfigShape;
-  defaults: Record<string, EngineEntry | undefined>;
-}) {
-  const [making, setMaking] = useState('');
-  const config = useConfig(first.config);
-  const chain = config.value.chain ?? first.effective.chain ?? ENGINES;
-  const hosts = config.value.approvals?.allowedNetworkHosts ?? [];
-  const rows = [
-    ...chain.filter(name => ENGINES.includes(name)),
-    ...ENGINES.filter(name => !chain.includes(name)),
-  ];
-  // What an unset select resolves to: the inherited value, else the built-in default.
-  const resolved = (name: string, key: 'effort' | 'permissions') =>
-    (first.config.engines?.[name]?.[key] ? undefined : first.effective.engines?.[name]?.[key]) ??
-    defaults[name]?.[key];
-  const pick = (name: string, key: 'effort' | 'permissions', options: string[]) => (
-    <label>
-      {key}
-      <Select
-        label={`${ENGINE_NAMES[name]} ${key}`}
-        value={config.value.engines?.[name]?.[key] ?? ''}
-        options={[
-          ['', defaultLabel(resolved(name, key) ?? (key === 'permissions' ? 'auto' : undefined))],
-          ...options.map((option): Option => [option, option]),
-        ]}
-        onChange={value => void config.patch({ engines: { [name]: { [key]: value || null } } })}
-      />
-    </label>
-  );
-  return (
-    <>
-      <List title="Engines" count={chain.length} error={config.error}>
-        {rows.map(name => (
-          <Row
-            key={name}
-            title={ENGINE_NAMES[name]!}
-            badges={
-              <>
-                {chain[0] === name ? <Badge tone="acc">default</Badge> : null}
-                {chain.includes(name) ? null : <Badge>off</Badge>}
-              </>
-            }
-            sub={
-              <span class="inline-picks">
-                {pick(name, 'effort', EFFORTS)}
-                {pick(name, 'permissions', PERMISSIONS)}
-              </span>
-            }
-            actions={
-              chain[0] === name ? null : (
-                <button
-                  type="button"
-                  class="btn secondary sm"
-                  disabled={making === name}
-                  aria-busy={making === name}
-                  onClick={() => {
-                    setMaking(name);
-                    void config
-                      .patch({ chain: [name, ...chain.filter(each => each !== name)] })
-                      .finally(() => setMaking(''));
-                  }}
-                >
-                  Make default
-                </button>
-              )
-            }
-            menu={
-              chain.includes(name) ? (
-                chain.length > 1 ? (
-                  <MenuItem
-                    title="Disable"
-                    onClick={() =>
-                      void config.patch({ chain: chain.filter(each => each !== name) })
-                    }
-                  />
-                ) : undefined
-              ) : (
-                <MenuItem
-                  title="Enable"
-                  onClick={() => void config.patch({ chain: [...chain, name] })}
-                />
-              )
-            }
-          />
-        ))}
-      </List>
-      <List
-        title="Allowed network hosts"
-        count={hosts.length}
-        error=""
-        add={
-          <AddRow
-            fields={[['host', 'Host, like registry.npmjs.org']]}
-            onAdd={({ host }) =>
-              config.patch({ approvals: { allowedNetworkHosts: [...new Set([...hosts, host!])] } })
-            }
-          />
-        }
-      >
-        {hosts.map(host => (
-          <Row
-            key={host}
-            title={host}
-            remove={{
-              title: `Remove ${host}?`,
-              body: 'Tasks lose access to it.',
-              onRemove: () =>
-                config.patch({
-                  approvals: { allowedNetworkHosts: hosts.filter(each => each !== host) },
-                }),
-            }}
-          />
-        ))}
-      </List>
-    </>
-  );
-}

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

@@ -1,98 +0,0 @@
-/* phones: a row's title and actions share the first line; badges, picks and details take the full width under them */
-@media (max-width: 760px) {
-  .settings tr {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 8px 12px;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--line);
-  }
-  .settings tr:last-child {
-    border-bottom: 0;
-  }
-  .settings td {
-    padding: 0;
-    border: 0;
-  }
-  .settings td:first-child,
-  .settings .row-title {
-    display: contents;
-  }
-  .settings .row-title > :not(b),
-  .settings .sub {
-    grid-column: 1 / -1;
-    justify-self: start;
-  }
-  .settings td.acts {
-    grid-row: 1;
-    grid-column: 2;
-  }
-}
-
-/* settings lists */
-.add-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--line);
-}
-.acts dialog {
-  text-align: left;
-  white-space: normal;
-}
-.add-kind {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  font-size: 12.5px;
-}
-.add-grid + .add-grid {
-  margin-top: 12px;
-}
-/* room for the longest option, so a pick never shifts the row */
-/* Advanced and the button share a row; an open Advanced takes the row and the button drops under it */
-.add-foot {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 12px;
-  margin-top: 12px;
-}
-.add-foot > .add-more {
-  flex: 1 1 auto;
-}
-.add-foot > .add-more[open] {
-  flex-basis: 100%;
-}
-.add-foot > .btn {
-  margin-left: auto;
-}
-.add-form .select:has([aria-label="Engine"]) {
-  min-width: 190px;
-}
-.add-form .select:has([aria-label="Provider"]) {
-  min-width: 200px;
-}
-.add-form .select:has([aria-label="Scope"]) {
-  min-width: 150px;
-}
-.add-more > summary {
-  width: max-content;
-  color: var(--muted);
-  font-size: 12.5px;
-  cursor: pointer;
-}
-.add-more > .add-grid {
-  margin-top: 12px;
-}
-/* a long name or URL wraps, so the row's actions stay on screen at phone width */
-.settings .row-title {
-  flex-wrap: wrap;
-  overflow-wrap: anywhere;
-}
-.settings .sub {
-  overflow-wrap: anywhere;
-}

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

@@ -1,215 +0,0 @@
-'use client';
-
-import './list.css';
-
-import type { ComponentChildren } from 'preact';
-import { useRef, useState } from 'preact/hooks';
-
-import { client } from '@/utils/client';
-import type { Config, ConfigPatch } from '@coder/client/types';
-
-import { iDots } from '@/comps/ui/icons';
-import { Card } from '@/comps/ui/card';
-import { reasonText } from '@/utils/format';
-import { ErrorText } from '@/comps/ui/field';
-import { Icon } from '@/comps/ui/icon';
-import { Menu, MenuItem } from '@/comps/ui/menu';
-import { ConfirmDialog } from '@/comps/ui/confirm';
-
-/** RFC 7396: objects merge, null deletes, anything else replaces. */
-function merged<T>(target: T, patch: unknown): T {
-  if (!patch || typeof patch !== 'object' || Array.isArray(patch)) return patch as T;
-  const out: Record<string, unknown> =
-    target && typeof target === 'object' && !Array.isArray(target) ? { ...target } : {};
-  for (const [key, value] of Object.entries(patch)) {
-    if (value === null) delete out[key];
-    else out[key] = merged(out[key], value);
-  }
-  return out as T;
-}
-
-/** Config edits shown at once and sent as merge patches; the newest answer wins and a failure rolls back. */
-export function useConfig(first: Config) {
-  const [value, setValue] = useState(first);
-  const [error, setError] = useState('');
-  const sent = useRef(0);
-  const saved = useRef(first);
-  const patch = (body: ConfigPatch) => {
-    const seq = ++sent.current;
-    setError('');
-    setValue(now => merged(now, body));
-    return client.config.patch(body).then(
-      answer => {
-        saved.current = answer;
-        if (seq === sent.current) setValue(answer);
-        return true;
-      },
-      reason => {
-        if (seq === sent.current) {
-          setValue(saved.current);
-          setError(reasonText(reason));
-        }
-        return false;
-      },
-    );
-  };
-  return { value, error, patch };
-}
-
-export const EFFORTS = ['low', 'medium', 'high'];
-
-export const PERMISSIONS = ['read-only', 'workspace-write', 'auto'];
-
-/** A change sent to the server; its answer replaces what the list shows. */
-export function useSend<T>(first: T) {
-  const [value, setValue] = useState(first);
-  const [error, setError] = useState('');
-  const send = async <R,>(act: () => Promise<R>, apply?: (answer: R) => T) => {
-    setError('');
-    try {
-      const answer = await act();
-      if (apply) setValue(apply(answer));
-      return true;
-    } catch (reason) {
-      setError(reasonText(reason));
-      return false;
-    }
-  };
-  return { value, setValue, error, setError, send };
-}
-
-/** The add row: its fields, and Enter in any of them adds. */
-export function AddRow({
-  fields,
-  onAdd,
-}: {
-  fields: Array<[name: string, placeholder: string]>;
-  onAdd: (values: Record<string, string>) => Promise<boolean>;
-}) {
-  return (
-    <form
-      class="add-row"
-      method="post"
-      onSubmit={async event => {
-        event.preventDefault();
-        const form = event.currentTarget;
-        const values = Object.fromEntries(
-          [...new FormData(form)].map(([key, value]) => [key, String(value).trim()]),
-        );
-        if (Object.values(values).some(value => !value)) return;
-        if (await onAdd(values)) form.reset();
-      }}
-    >
-      {fields.map(([name, placeholder]) => (
-        <input
-          key={name}
-          name={name}
-          placeholder={placeholder}
-          aria-label={placeholder}
-          autocomplete="off"
-        />
-      ))}
-      <button class="btn">Add</button>
-    </form>
-  );
-}
-
-export type Removal = {
-  title: string;
-  body?: string;
-  label?: string;
-  onRemove: () => Promise<unknown>;
-};
-
-/** A ghost-danger item for a row's ⋯ menu, and the shared dialog that asks before it removes; the dialog sits outside the menu. */
-export function useRemove(removal?: Removal) {
-  const [open, setOpen] = useState(false);
-  const [busy, setBusy] = useState(false);
-  if (!removal) return {};
-  const { title, body, label = 'Remove', onRemove } = removal;
-  return {
-    item: <MenuItem title={label} danger onClick={() => setOpen(true)} />,
-    dialog: open ? (
-      <ConfirmDialog
-        open
-        title={title}
-        body={body}
-        confirmLabel={label}
-        busy={busy}
-        onClose={() => setOpen(false)}
-        onConfirm={() => {
-          setBusy(true);
-          void onRemove().finally(() => {
-            setBusy(false);
-            setOpen(false);
-          });
-        }}
-      />
-    ) : null,
-  };
-}
-
-/** A settings row: its primary action as a button, the rest and Remove in the ⋯ menu. */
-export function Row({
-  title,
-  badges,
-  sub,
-  actions,
-  menu,
-  remove,
-}: {
-  title: string;
-  badges?: ComponentChildren;
-  sub?: ComponentChildren;
-  actions?: ComponentChildren;
-  menu?: ComponentChildren;
-  remove?: Removal;
-}) {
-  const removing = useRemove(remove);
-  return (
-    <tr>
-      <td>
-        <span class="row-title">
-          <b>{title}</b>
-          {badges}
-        </span>
-        {sub ? <span class="sub mono">{sub}</span> : null}
-      </td>
-      <td class="acts">
-        {actions}
-        {menu || removing.item ? (
-          <Menu summaryClass="icon-btn" label="Actions" summary={<Icon d={iDots} />}>
-            {menu}
-            {removing.item}
-          </Menu>
-        ) : null}
-        {removing.dialog}
-      </td>
-    </tr>
-  );
-}
-
-export function List({
-  title,
-  count,
-  error,
-  children,
-  add,
-}: {
-  title: string;
-  count: number;
-  error: string;
-  children: ComponentChildren;
-  add?: ComponentChildren;
-}) {
-  return (
-    <Card title={title} count={count} actions={<ErrorText value={error} />}>
-      <div class="table-scroll">
-        <table class="rows settings">
-          <tbody>{children}</tbody>
-        </table>
-      </div>
-      {add}
-    </Card>
-  );
-}

package/src/server/dash/app/dash/settings/[tab]/loading.tsx

@@ -1,6 +0,0 @@
-import { Loading } from '@/comps/ui/card';
-
-/** Any settings tab before it arrives. */
-export default function LoadingSettings() {
-  return <Loading label="Loading settings" />;
-}

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

@@ -1,43 +0,0 @@
-.registry {
-  display: grid;
-  gap: 8px;
-  padding: 16px 16px 0;
-}
-/* one height for searching, results, none and errors, so the form under it stays put */
-.registry-results {
-  height: 170px;
-  border: 1px solid var(--line2);
-  background: var(--field);
-}
-.registry-results .pop-item b {
-  font-weight: 500;
-}
-.registry-results .badge {
-  margin-left: 6px;
-}
-.registry-note {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  font-size: 12px;
-  color: var(--muted);
-}
-.registry-note.err {
-  color: var(--bad);
-}
-.skel {
-  padding: 8px 10px;
-  animation: loader-in 0s 150ms both;
-}
-.skel i {
-  display: block;
-  width: 35%;
-  height: 10px;
-  margin: 3px 0;
-  background: var(--wash2);
-}
-.skel i + i {
-  width: 70%;
-  background: var(--wash);
-}