@wular/coder 0.3.18 → 0.4.1

package/src/server/dash/app/dash/tasks/composer.tsx

@@ -0,0 +1,890 @@
+'use client';
+
+import './composer.css';
+
+import { Fragment } from 'preact';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+import type { LocalFolder, LocalFolders } from '@coder/client/types';
+import { client } from '@/utils/client';
+import { formatDate } from '@/utils/format';
+import { iAlert, iCheck, iDown, iPlus, iRight, iSliders, iSteer, iX } from '@/comps/ui/icons';
+import { Link } from '@wular/pnext/link';
+import { useRouter } from '@wular/pnext/navigation/client';
+import { Loading } from '@/comps/ui/card';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+import { Select, type Option } from '@/comps/ui/select';
+import { MenuRadio } from '@/comps/ui/menu';
+import { connectRepositories } from '@/app/dash/agents/editor/connect-repositories';
+import {
+  ENGINES,
+  ENGINE_NAMES,
+  defaultLabel,
+  modelValue,
+  splitModel,
+} from '@/app/dash/settings/model-options';
+import { folderName } from '@/app/dash/tasks/list/task';
+import { watchTask } from '@/comps/frame/task-toasts';
+import { CHOICE, PLACEHOLDER, loadComposer, savedChoice } from './composer-data';
+
+/** What the composer runs with; the last one used comes back through the `compose` cookie. */
+export interface Choice {
+  repo: string;
+  /** A folder on the local server's machine; unset is the server's own. */
+  cwd: string;
+  agent: string;
+  engine: string;
+  model: string;
+  effort: string;
+  permissions: string;
+  runner: string;
+}
+
+/** The workspace's defaults, per engine, for settings left unset. */
+export interface Defaults {
+  engine: string;
+  engines: Record<string, { model?: string; effort?: string; permissions?: string } | undefined>;
+}
+
+type Pull = { number: number; title: string; author?: string; createdAt?: string };
+export type Lists = {
+  agents: [string, string][];
+  repos: string[];
+  models: Record<string, string[]>;
+  runners: Option[];
+  flows: string[];
+  /** Only on a local server. */
+  folders?: LocalFolders;
+};
+
+const EFFORTS: Option[] = [
+  ['', 'Default'],
+  ['low', 'Low'],
+  ['medium', 'Medium'],
+  ['high', 'High'],
+];
+const PERMISSIONS: Option[] = [
+  ['', 'Default'],
+  ['read-only', 'Read-only'],
+  ['workspace-write', 'Write'],
+  ['auto', 'Auto'],
+];
+const DRAFT = 'coder:draft';
+const CONNECT = '+connect';
+const OTHER = '+other';
+const PICK = '+pick';
+const CLONE = '+clone';
+/** `/review 40` or `/flow release pr=12`: the command, its first word, and the rest. */
+const COMMAND = /^\/(review|flow)(?:\s+(\S+))?\s*([\s\S]*)$/;
+
+/** A select's options: its unset value, then the picked value, then the rest, so it shows its label before the list loads. */
+const optionsOf = (fallback: string, value: string, values: string[]): Option[] => [
+  ['', fallback],
+  ...[...new Set([value, ...values])].filter(Boolean).map((each): Option => [each, each]),
+];
+// Named choices; a value the list lacks still shows, as itself.
+const named = (fallback: string, value: string, values: Option[]): Option[] => [
+  ['', fallback],
+  ...(value && !values.some(([id]) => id === value) ? [[value, value] as Option] : []),
+  ...values,
+];
+
+/** Unset runs in the server's own folder; then recent and chosen ones, then the machine's dialog or a path box, then a repository URL box. A saved folder the list lacks still shows. */
+const folderOptions = (folders: LocalFolders, added: LocalFolder[], value: string): Option[] => {
+  const paths = [...folders.recent, ...added].map(each => each.path);
+  return [
+    ['', 'No folder'],
+    ...[...new Set([...paths, value])]
+      .filter(path => path && path !== folders.current.path)
+      .map((path): Option => [path, folderName(path)]),
+    folders.picker ? [PICK, 'Choose…'] : [OTHER, 'Type a path…'],
+    [CLONE, 'Repository…'],
+  ];
+};
+
+/** Segments whose unset first one names the value it resolves to. */
+/** The chain.s default first, then one section per engine: its own default and its models. */
+function modelSections(
+  groups: Record<string, string[]>,
+  defaults: Defaults,
+): Array<[string, Option[]]> {
+  const sections: Array<[string, Option[]]> = [
+    [
+      '',
+      [
+        [
+          '',
+          `Default · ${[ENGINE_NAMES[defaults.engine] ?? defaults.engine, defaults.engines[defaults.engine]?.model].filter(Boolean).join(' ')}`,
+        ],
+      ],
+    ],
+  ];
+  for (const engine of ENGINES) {
+    if (!groups[engine]?.length) continue;
+    sections.push([
+      ENGINE_NAMES[engine] ?? engine,
+      [
+        [modelValue(engine, ''), defaultLabel(defaults.engines[engine]?.model)],
+        ...groups[engine]!.map((model): Option => [modelValue(engine, model), model]),
+      ],
+    ]);
+  }
+  return sections;
+}
+
+const resolved = (options: Option[], value?: string): Option[] => {
+  const label = options.find(([key]) => key && key === value)?.[1];
+  return [['', defaultLabel(label?.toLowerCase())], ...options.slice(1)];
+};
+
+/** Places an opening popover under its button, right-aligned to it. */
+function place(event: ToggleEvent) {
+  const pop = event.currentTarget as HTMLElement;
+  const box = document.querySelector(`[popovertarget="${pop.id}"]`)?.getBoundingClientRect();
+  if (event.newState !== 'open' || !box) return;
+  const top = Math.round(box.bottom + 6);
+  pop.style.top = `${top}px`;
+  pop.style.right = `${Math.round(document.documentElement.clientWidth - box.right)}px`;
+  // The menu scrolls inside the viewport instead of running off it.
+  pop.style.maxHeight = `${Math.max(160, window.innerHeight - top - 16)}px`;
+}
+
+/** `key=value` pairs; a value that reads as JSON keeps its type, a bare key is true. */
+function argsOf(text: string): Record<string, unknown> {
+  return Object.fromEntries(
+    text
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(pair => {
+        const at = pair.indexOf('=');
+        const raw = at < 0 ? 'true' : pair.slice(at + 1);
+        try {
+          return [at < 0 ? pair : pair.slice(0, at), JSON.parse(raw)];
+        } catch {
+          return [pair.slice(0, at), raw];
+        }
+      }),
+  );
+}
+
+/** One row of a picker list; `head` starts a group. */
+type Entry = { key: string; label: string; hint?: string; head?: string; pick: () => void };
+
+/** Rows under a combobox; the field keeps focus, so the mouse never takes it. */
+function Entries({
+  id,
+  entries,
+  active,
+  selected,
+  onActive,
+}: {
+  id: string;
+  entries: Entry[];
+  active: number;
+  selected?: string;
+  onActive: (index: number) => void;
+}) {
+  return (
+    <>
+      {entries.flatMap((entry, index) => [
+        entry.head ? (
+          <div key={`h:${entry.key}`} class="pop-label" role="presentation">
+            {entry.head}
+          </div>
+        ) : null,
+        <div
+          key={entry.key}
+          id={`${id}-${index}`}
+          role="option"
+          aria-selected={selected === undefined ? index === active : entry.key === selected}
+          class={index === active ? 'pop-item on' : 'pop-item'}
+          onMouseDown={event => event.preventDefault()}
+          onPointerMove={() => index !== active && onActive(index)}
+          onClick={entry.pick}
+        >
+          <span class="grow">{entry.label}</span>
+          {entry.hint ? <small>{entry.hint}</small> : null}
+          {selected === undefined ? null : <Icon d={iCheck} />}
+        </div>,
+      ])}
+    </>
+  );
+}
+
+/** Arrows move through `count` rows and wrap; returns whether the key was one of them. */
+const stepped = (
+  event: KeyboardEvent,
+  at: number,
+  count: number,
+  move: (index: number) => void,
+) => {
+  const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+  if (!step || !count) return false;
+  event.preventDefault();
+  move((at + step + count) % count);
+  return true;
+};
+
+/** A credential link that comes back here with the draft kept. */
+export function NeedsCredential({
+  reason,
+  back = '/dash/tasks',
+}: {
+  reason?: string;
+  back?: string;
+}) {
+  return (
+    <div class="notice slim" role="status">
+      <Icon d={iAlert} />
+      <span class="grow">{reason || 'Tasks need a model credential to run.'}</span>
+      <Link
+        class="btn outline sm"
+        href="/dash/settings/[tab]"
+        params={{ tab: 'credentials' }}
+        search={{ return: back }}
+      >
+        Add credential
+      </Link>
+    </div>
+  );
+}
+
+/** The dashboard's one box: type and press Enter to start a task, or `/` for reviews and flows. */
+export function Composer({
+  initial,
+  data,
+  defaults,
+  missing,
+  connectLabel,
+  tz,
+}: {
+  initial: Partial<Choice>;
+  data: Lists;
+  defaults: Defaults;
+  /** No credential can run a task yet; the page says so already. */
+  missing?: boolean;
+  /** The repository chip's last item, from the platform that reaches repositories. */
+  connectLabel: string;
+  tz: string;
+}) {
+  const nav = useRouter();
+  const [choice, setChoice] = useState({ ...CHOICE, ...initial });
+  const [lists, setLists] = useState(data);
+  const [pulls, setPulls] = useState<{ repo: string; items?: Pull[] }>();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  // Why no credential can run it, once a start says so.
+  const [needs, setNeeds] = useState<string>();
+  // The model row whose effort choices are open.
+  const [expanded, setExpanded] = useState<string>();
+  const [text, setText] = useState('');
+  const [dismissed, setDismissed] = useState(false);
+  const [at, setAt] = useState(0);
+  // Folders checked this session; `typing` swaps the Folder select for a path or repository URL box.
+  const [added, setAdded] = useState<LocalFolder[]>([]);
+  const [typing, setTyping] = useState<'' | 'path' | 'url'>('');
+  const [cloning, setCloning] = useState(false);
+  const form = useRef<HTMLFormElement>(null);
+  const box = useRef<HTMLTextAreaElement>(null);
+  const slash = useRef<HTMLDivElement>(null);
+  const path = useRef<HTMLInputElement>(null);
+  const id = useId();
+
+  useEffect(() => void (typing && path.current?.focus()), [typing]);
+
+  useEffect(() => {
+    const draft = localStorage.getItem(DRAFT);
+    if (draft && box.current && !box.current.value) box.current.value = draft;
+    setText(box.current?.value ?? '');
+    box.current?.focus();
+    // A restored draft waits for typing before its slash menu opens.
+    setDismissed(true);
+  }, []);
+
+  // The repository's open pull requests and its own flows, once a command is being typed.
+  const commanding = text.startsWith('/');
+  useEffect(() => {
+    const repo = choice.repo;
+    if (!commanding || !repo || pulls?.repo === repo) return;
+    setPulls({ repo });
+    void client.pulls
+      .list(repo)
+      .then(items => setPulls({ repo, items }))
+      .catch(reason => {
+        setPulls({ repo, items: [] });
+        setError(reasonText(reason));
+      });
+    void client.flows
+      .list(repo)
+      .then(flows => setLists(current => ({ ...current, flows: flows.map(flow => flow.name) })))
+      .catch(() => {});
+  }, [commanding, choice.repo]);
+
+  const pick = (key: keyof Choice, value: string) => {
+    if (value === OTHER) return setTyping('path');
+    if (value === CLONE) return setTyping('url');
+    if (value === PICK) return void pickFolder();
+    if (value === CONNECT)
+      return void connectRepositories('/dash/tasks').catch(reason => setError(reasonText(reason)));
+    apply({ [key]: value });
+    if (key === 'repo' || key === 'cwd') box.current?.focus({ preventScroll: true });
+  };
+  const apply = (change: Partial<Choice>) => {
+    const next = { ...choice, ...change };
+    setChoice(next);
+    document.cookie = `compose=${encodeURIComponent(JSON.stringify(next))}; path=/; max-age=31536000; samesite=lax`;
+  };
+
+  const chose = (checked: Awaited<ReturnType<typeof client.folders.check>>) => {
+    if (!checked.ok) return setError(checked.detail);
+    setError('');
+    setTyping('');
+    setAdded(current => [
+      ...current.filter(each => each.path !== checked.folder.path),
+      checked.folder,
+    ]);
+    pick('cwd', checked.folder.path === lists.folders?.current.path ? '' : checked.folder.path);
+  };
+  const checkFolder = async (path: string) => {
+    if (!path.trim()) return;
+    chose(
+      await client.folders
+        .check(path.trim())
+        .catch(reason => ({ ok: false as const, detail: reasonText(reason) })),
+    );
+  };
+  // The dialog opens on the server's machine; the cursor waits for it, and closing it changes nothing here.
+  const pickFolder = async () => {
+    document.body.style.cursor = 'progress';
+    const picked = await client.folders
+      .pick()
+      .catch(reason => ({ ok: false as const, detail: reasonText(reason) }));
+    document.body.style.cursor = '';
+    if (picked.ok || picked.detail) chose(picked);
+  };
+  const cloneFolder = async (url: string) => {
+    if (!url.trim()) return;
+    setCloning(true);
+    document.body.style.cursor = 'progress';
+    const cloned = await client.folders
+      .clone(url.trim())
+      .catch(reason => ({ ok: false as const, detail: reasonText(reason) }));
+    document.body.style.cursor = '';
+    setCloning(false);
+    chose(cloned);
+  };
+
+  const draft = (value: string) => {
+    const field = box.current!;
+    field.value = value;
+    localStorage.setItem(DRAFT, value);
+    setText(value);
+    setAt(0);
+    setDismissed(false);
+    field.focus();
+    field.setSelectionRange(value.length, value.length);
+  };
+
+  const start = async (pr?: number) => {
+    const text = box.current?.value.trim() ?? '';
+    if (busy || cloning || !(text || pr)) return;
+    const [, command, name = '', args = ''] = COMMAND.exec(text) ?? [];
+    if (!pr && command && !(command === 'flow' ? name : /^#?\d+$/.test(name)))
+      return void setDismissed(false);
+    const review = pr ?? (command === 'review' ? Number(name.replace('#', '')) : undefined);
+    if (review && !choice.repo) return setError('Pick a repository first.');
+    const { agent, engine, model, effort, permissions, runner } = choice;
+    const [repo, cwd] = lists.folders ? ['', choice.cwd] : [choice.repo, ''];
+    const fields = Object.fromEntries(
+      Object.entries({ repo, cwd, engine, model, effort, permissions, runner }).filter(
+        ([, value]) => value,
+      ),
+    );
+    setBusy(true);
+    setError('');
+    try {
+      const created = review
+        ? await client.review({ ...fields, repo: choice.repo, pr: review })
+        : command === 'flow'
+          ? await client.flows.run(name, { ...fields, agent, args: argsOf(args) })
+          : await client.tasks.create({ ...fields, agent, prompt: text });
+      if (!pr || command) localStorage.removeItem(DRAFT);
+      watchTask(created.task.id, 'queued', text || `Review of #${review}`);
+      nav.push('/dash/tasks/[id]', { params: { id: created.task.id } });
+    } catch (reason) {
+      setBusy(false);
+      if ((reason as { status?: number }).status === 409) setNeeds(reasonText(reason));
+      else setError(reasonText(reason));
+    }
+  };
+
+  // The slash menu for what is typed so far: commands, then a flow, a repository or a pull request.
+  const menu = ((): { label: string; entries: Entry[]; note?: string } | undefined => {
+    const word = /^\/(\S*)$/.exec(text)?.[1]?.toLowerCase();
+    if (word !== undefined)
+      return {
+        label: 'Commands',
+        entries: [
+          {
+            key: 'review',
+            label: '/review',
+            hint: 'Review a pull request',
+            pick: () => draft('/review '),
+          },
+          ...lists.flows.map(flow => ({
+            key: `flow ${flow}`,
+            label: `/flow ${flow}`,
+            hint: `Run the ${flow} flow`,
+            pick: () => draft(`/flow ${flow} `),
+          })),
+        ].filter(entry => entry.key.includes(word)),
+        note: 'No command matches.',
+      };
+    const flow = /^\/flow\s+(\S*)$/.exec(text)?.[1];
+    if (flow !== undefined)
+      return {
+        label: 'Flows',
+        entries: lists.flows
+          .filter(name => name.includes(flow))
+          .map(name => ({
+            key: name,
+            label: name,
+            hint: `Run the ${name} flow`,
+            pick: () => (name === flow ? void start() : draft(`/flow ${name} `)),
+          })),
+        note: 'No flow matches.',
+      };
+    const number = /^\/review\s+#?(\S*)$/.exec(text)?.[1];
+    if (number === undefined) return undefined;
+    if (!choice.repo)
+      return {
+        label: 'Pick a repository',
+        entries: [
+          ...lists.repos
+            .filter(repo => repo.includes(number))
+            .map(repo => ({ key: repo, label: repo, pick: () => pick('repo', repo) })),
+          { key: CONNECT, label: connectLabel, pick: () => pick('repo', CONNECT) },
+        ],
+      };
+    if (!pulls?.items)
+      return { label: `Pull requests in ${choice.repo}`, entries: [], note: 'loading' };
+    return {
+      label: `Pull requests in ${choice.repo}`,
+      entries: [
+        ...pulls.items
+          .filter(
+            pull =>
+              String(pull.number).startsWith(number) ||
+              pull.title.toLowerCase().includes(number.toLowerCase()),
+          )
+          // The exact number first, so `/review 39` picks #39 over #390.
+          .sort((a, b) => Number(String(b.number) === number) - Number(String(a.number) === number))
+          .map(pull => ({
+            key: `#${pull.number}`,
+            label: `#${pull.number} ${pull.title}`,
+            hint: [pull.author, pull.createdAt ? formatDate(Date.parse(pull.createdAt), tz) : '']
+              .filter(Boolean)
+              .join(' · '),
+            pick: () => void start(pull.number),
+          })),
+        ...(number
+          ? []
+          : [
+              {
+                key: '',
+                label: choice.repo,
+                hint: 'Pick another repository',
+                pick: () => apply({ repo: '' }),
+              },
+            ]),
+      ],
+      note: pulls.items.length ? 'No open pull request matches.' : 'No open pull requests.',
+    };
+  })();
+  const open = Boolean(menu && !dismissed);
+  const active = menu ? Math.min(at, Math.max(0, menu.entries.length - 1)) : 0;
+
+  // The slash menu hangs under the box in the top layer, so a dialog never clips it.
+  useLayoutEffect(() => {
+    const pop = slash.current;
+    if (!pop) return;
+    if (!open) return void (pop.matches(':popover-open') && pop.hidePopover());
+    const position = () => {
+      const rect = form.current!.getBoundingClientRect();
+      pop.style.top = `${Math.round(rect.bottom + 6)}px`;
+      pop.style.left = `${Math.round(rect.left)}px`;
+      pop.style.width = `${Math.round(Math.min(rect.width, 460))}px`;
+    };
+    position();
+    if (!pop.matches(':popover-open')) pop.showPopover();
+    addEventListener('scroll', position, true);
+    addEventListener('resize', position);
+    return () => {
+      removeEventListener('scroll', position, true);
+      removeEventListener('resize', position);
+    };
+  }, [open, text]);
+
+  const engine = choice.engine || defaults.engine;
+  const own = defaults.engines[engine] ?? {};
+  const agents = lists.agents.filter(([id]) => id !== 'coder');
+  // Only the settings that differ from the workspace's defaults.
+  const changed = [
+    choice.agent !== 'coder' && choice.agent,
+    choice.engine !== defaults.engine && choice.engine,
+    ...(['model', 'effort', 'permissions'] as const).map(
+      key => choice[key] !== own[key] && choice[key],
+    ),
+    choice.runner && (lists.runners.find(([id]) => id === choice.runner)?.[1] ?? choice.runner),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  return (
+    <>
+      <form
+        ref={form}
+        class="composer"
+        onSubmit={event => {
+          event.preventDefault();
+          void start();
+        }}
+      >
+        <textarea
+          ref={box}
+          name="prompt"
+          rows={1}
+          role="combobox"
+          aria-label="What should the agent do?"
+          aria-autocomplete="list"
+          aria-expanded={open}
+          aria-controls={`${id}-slash`}
+          aria-activedescendant={open && menu?.entries.length ? `${id}-slash-${active}` : undefined}
+          placeholder={PLACEHOLDER}
+          autofocus
+          onFocus={() => setDismissed(false)}
+          onBlur={() => setDismissed(true)}
+          onInput={event => {
+            const value = event.currentTarget.value;
+            localStorage.setItem(DRAFT, value);
+            setText(value);
+            setAt(0);
+            setDismissed(false);
+          }}
+          onKeyDown={event => {
+            if (event.isComposing) return;
+            if (open && menu) {
+              if (stepped(event, active, menu.entries.length, setAt)) return;
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                return setDismissed(true);
+              }
+              if (
+                menu.entries.length &&
+                ((event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab')
+              ) {
+                event.preventDefault();
+                return menu.entries[active]!.pick();
+              }
+            }
+            if (event.key !== 'Enter' || event.shiftKey) return;
+            event.preventDefault();
+            void start();
+          }}
+        />
+        <div class="composer-line">
+          {!lists.folders ? (
+            <Select
+              label="Repository"
+              value={choice.repo}
+              options={[
+                ...optionsOf('No repository', choice.repo, lists.repos),
+                [CONNECT, connectLabel],
+              ]}
+              onChange={value => pick('repo', value)}
+            />
+          ) : typing ? (
+            <>
+              <input
+                class="folder-path"
+                aria-label={typing === 'url' ? 'Repository URL' : 'Folder path'}
+                ref={path}
+                placeholder={
+                  typing === 'url' ? 'https://github.com/owner/repo' : 'Absolute path or ~/…'
+                }
+                readOnly={cloning}
+                aria-busy={cloning}
+                onKeyDown={event => {
+                  if (cloning) return event.preventDefault();
+                  if (event.key === 'Escape') {
+                    event.preventDefault();
+                    setError('');
+                    return setTyping('');
+                  }
+                  if (event.key !== 'Enter' || event.isComposing) return;
+                  event.preventDefault();
+                  void (typing === 'url' ? cloneFolder : checkFolder)(event.currentTarget.value);
+                }}
+                onBlur={event => !cloning && !event.currentTarget.value.trim() && setTyping('')}
+              />
+              {cloning ? <span class="folder-busy">Cloning…</span> : null}
+            </>
+          ) : (
+            <span class="folder" title={choice.cwd || lists.folders.current.path}>
+              <Select
+                label="Folder"
+                value={choice.cwd}
+                options={folderOptions(lists.folders, added, choice.cwd)}
+                subs={Object.fromEntries(
+                  folderOptions(lists.folders, added, choice.cwd).flatMap(([path]) =>
+                    path && path !== OTHER && path !== PICK && path !== CLONE
+                      ? [[path, added.find(each => each.path === path)?.url ?? path]]
+                      : [],
+                  ),
+                )}
+                onChange={value => pick('cwd', value)}
+              />
+            </span>
+          )}
+          <button
+            type="button"
+            class="quiet"
+            popovertarget={`${id}-settings`}
+            aria-label="Run options"
+            title="Model, effort, permissions and more"
+          >
+            <Icon d={iSliders} />
+            {changed ? <span>{changed}</span> : null}
+          </button>
+          <button
+            class="btn sm send"
+            disabled={busy || !text.trim()}
+            aria-busy={busy}
+            aria-label={busy ? 'Starting task' : 'Start task'}
+            title="Start task (Enter)"
+          >
+            <Icon d={iSteer} />
+          </button>
+        </div>
+        {typing === 'url' ? (
+          <small class="folder-hint">Uses this machine's git logins</small>
+        ) : null}
+        <ErrorText value={error} />
+        <div
+          id={`${id}-settings`}
+          class="pop composer-settings"
+          popover="auto"
+          onBeforeToggle={place}
+        >
+          <p class="pop-label">Model</p>
+          <div role="group" aria-label="Model" class="pop-radios">
+            {modelSections(lists.models, defaults).map(([engine, items]) => (
+              <Fragment key={engine}>
+                {engine ? <p class="pop-group">{engine}</p> : null}
+                {items.map(([value, label]) => {
+                  const on = value === modelValue(choice.engine, choice.model);
+                  const picked = splitModel(value);
+                  const efforts = resolved(
+                    EFFORTS,
+                    defaults.engines[picked.engine || defaults.engine]?.effort,
+                  );
+                  const effortLabel =
+                    on && choice.effort
+                      ? efforts.find(([key]) => key === choice.effort)?.[1]
+                      : undefined;
+                  const showing = expanded === value;
+                  return (
+                    <Fragment key={value}>
+                      <div class="pop-row">
+                        <button
+                          type="button"
+                          role="menuitemradio"
+                          aria-checked={on}
+                          class={on ? 'pop-item on' : 'pop-item'}
+                          onClick={event => {
+                            apply({ ...picked, effort: '' });
+                            event.currentTarget.closest<HTMLElement>('[popover]')?.hidePopover();
+                          }}
+                        >
+                          <span class="grow">{label}</span>
+                          {effortLabel ? <small>{effortLabel.toLowerCase()}</small> : null}
+                          {on ? <Icon d={iCheck} /> : null}
+                        </button>
+                        <button
+                          type="button"
+                          class="pop-chev"
+                          data-keep
+                          aria-label={`Effort for ${label}`}
+                          aria-expanded={showing}
+                          onClick={() => setExpanded(showing ? undefined : value)}
+                        >
+                          <Icon d={iRight} />
+                        </button>
+                      </div>
+                      {showing ? (
+                        <div role="group" aria-label={`Effort for ${label}`} class="pop-sub">
+                          {efforts.map(([effort, text]) => (
+                            <MenuRadio
+                              key={effort}
+                              on={on && choice.effort === effort}
+                              onPick={() => {
+                                apply({ ...picked, effort });
+                                document.getElementById(`${id}-settings`)?.hidePopover();
+                              }}
+                            >
+                              {text}
+                            </MenuRadio>
+                          ))}
+                        </div>
+                      ) : null}
+                    </Fragment>
+                  );
+                })}
+              </Fragment>
+            ))}
+            <Link
+              class="pop-item add-models"
+              href="/dash/settings/[tab]"
+              params={{ tab: 'models' }}
+            >
+              <Icon d={iPlus} />
+              <span class="grow">Add models</span>
+            </Link>
+          </div>
+          <p class="pop-label">Permissions</p>
+          <div role="group" aria-label="Permissions">
+            {resolved(PERMISSIONS, own.permissions ?? 'auto').map(([value, label]) => (
+              <MenuRadio
+                key={value}
+                on={choice.permissions === value}
+                onPick={() => apply({ permissions: value })}
+              >
+                {label}
+              </MenuRadio>
+            ))}
+          </div>
+          {agents.length || choice.agent !== 'coder' ? (
+            <>
+              <p class="pop-label">Agent</p>
+              <Select
+                label="Agent"
+                value={choice.agent}
+                options={named('coder', choice.agent, agents)}
+                onChange={value => apply({ agent: value })}
+              />
+            </>
+          ) : null}
+          {lists.runners.length > 1 ? (
+            <>
+              <p class="pop-label">Runs on</p>
+              <Select
+                label="Runs on"
+                options={lists.runners}
+                value={choice.runner}
+                onChange={value => apply({ runner: value })}
+              />
+            </>
+          ) : null}
+        </div>
+        <div
+          ref={slash}
+          id={`${id}-slash`}
+          class="pop composer-slash"
+          popover="manual"
+          role="listbox"
+          aria-label={menu?.label ?? 'Commands'}
+        >
+          {menu ? (
+            <>
+              <div class="pop-label">{menu.label}</div>
+              <Entries id={`${id}-slash`} entries={menu.entries} active={active} onActive={setAt} />
+              {menu.note === 'loading' ? (
+                <Loading label="Loading pull requests" inline />
+              ) : menu.note && !menu.entries.length ? (
+                <p class="pop-note">{menu.note}</p>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </form>
+      {needs === undefined || missing ? null : <NeedsCredential reason={needs} />}
+    </>
+  );
+}
+
+/** The composer before it arrives: the same box and prompt, inert. */
+export function LoadingComposer() {
+  return (
+    <div class="composer" aria-hidden="true">
+      <textarea rows={1} disabled tabIndex={-1} placeholder={PLACEHOLDER} />
+      <div class="composer-line" />
+    </div>
+  );
+}
+
+/** Opens the composer in a dialog with `agent` picked; starting a task opens it. */
+export function NewTaskButton({ agent }: { agent: string }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [setup, setSetup] = useState<Awaited<ReturnType<typeof loadComposer>>>();
+  const [error, setError] = useState('');
+  const [shown, setShown] = useState(false);
+
+  const loading = useRef<Promise<unknown>>();
+
+  // Hovering the button already loads what the composer needs.
+  const prepare = () =>
+    (loading.current ??= loadComposer(client).then(setSetup, reason =>
+      setError(reasonText(reason)),
+    ));
+  const open = () => {
+    setShown(true);
+    dialog.current?.showModal();
+    void prepare();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        class="btn new-task"
+        onClick={open}
+        onPointerEnter={prepare}
+        onFocus={prepare}
+      >
+        New task
+      </button>
+      <dialog
+        ref={dialog}
+        class="compose-dialog"
+        aria-label={`New task for ${agent}`}
+        onClose={() => setShown(false)}
+        onClick={event => event.target === event.currentTarget && dialog.current?.close()}
+      >
+        <header>
+          <h2>New task</h2>
+          <span class="sub">{agent}</span>
+          <button
+            type="button"
+            class="icon-btn"
+            aria-label="Close"
+            onClick={() => dialog.current?.close()}
+          >
+            <Icon d={iX} />
+          </button>
+        </header>
+        {!shown ? null : setup ? (
+          <Composer
+            {...setup}
+            initial={{ ...savedChoice(document.cookie), agent }}
+            tz={Intl.DateTimeFormat().resolvedOptions().timeZone}
+          />
+        ) : error ? (
+          <ErrorText value={error} />
+        ) : (
+          <LoadingComposer />
+        )}
+      </dialog>
+    </>
+  );
+}