@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/agents/editor/editor.tsx

@@ -0,0 +1,774 @@
+'use client';
+
+import './editor.css';
+// The preview is the same card the agents list draws.
+import '@/app/dash/agents/(list)/page.css';
+
+import { useEffect, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { iDown, iPlus, iShuffle } from '@/comps/ui/icons';
+import { useRouter } from '@wular/pnext/navigation/client';
+import { Link } from '@wular/pnext/link';
+import type {
+  AgentDefinition,
+  AgentRow,
+  Config,
+  IntegrationInfo,
+  ModelsShape,
+} from '@coder/client/types';
+import { BrandIcon, Platform } from '@/app/dash/agents/agent/agent-pills';
+import { Hero } from '@/app/dash/agents/agent/hero';
+import { Back, PageHead } from '@/comps/frame/page-head';
+import { HEADS } from '@/comps/frame/heads';
+import { initial, reasonText } from '@/utils/format';
+import { ErrorText, Field } from '@/comps/ui/field';
+import { Badge } from '@/comps/ui/badge';
+import { Icon } from '@/comps/ui/icon';
+import { Select } from '@/comps/ui/select';
+import { Segmented } from '@/comps/ui/segmented';
+import { Search } from '@/comps/ui/toolbar';
+import { ImportPicker } from './import-picker';
+import { markdown } from '@/app/dash/agents/agent/instructions';
+import {
+  ENGINE_NAMES,
+  defaultLabel,
+  modelHeadings,
+  modelOptions,
+  modelValue,
+  splitModel,
+} from '@/app/dash/settings/model-options';
+import { suggestName } from './names';
+
+const PERMISSIONS: Array<[string, string]> = [
+  ['read-only', 'Read only'],
+  ['workspace-write', 'Edit files'],
+  ['auto', 'Auto'],
+];
+const PERMISSION_HINTS: Record<string, string> = {
+  'read-only': 'reads the repository and changes nothing',
+  'workspace-write': 'edits files inside the repository',
+  auto: 'edits files, reaches the network, and asks when it needs more',
+};
+const EFFORTS: Array<[string, string]> = [
+  ['low', 'Low'],
+  ['medium', 'Medium'],
+  ['high', 'High'],
+];
+const PRESETS = ['observe', 'comment', 'write'];
+const ACCESS: Record<string, [string, string]> = {
+  observe: ['Observe', 'reads the platform only'],
+  comment: ['Comment', 'also replies and reacts'],
+  write: ['Write', 'also changes code there, like opening pull requests'],
+};
+const TEMPLATES: Array<[Template, string, string]> = [
+  ['blank', 'Blank', 'start from nothing'],
+  ['helper', 'Slack helper', 'answers questions in chat'],
+  ['reviewer', 'Reviewer', 'reviews pull requests'],
+];
+/** A search over platforms shows once the catalog is longer than this. */
+const SEARCH_FROM = 6;
+const REVIEWER =
+  'Review each pull request for bugs, risky changes and missing tests.\nComment on the lines that matter and keep it short.\nWhen mentioned, answer questions about the code and cite file paths.';
+const HELPER =
+  "Answer the team's questions in the thread.\nRead the code before you answer, cite file paths, and say when you are unsure.\nIf asked to change code, describe the change and stop.";
+/** Summary words for common events; any other event reads as its name. */
+const DOES: Record<string, string> = {
+  mention: 'replies to @mentions',
+  pull_request: 'reviews pull requests',
+  issue: 'triages issues',
+  comment: 'reads comments',
+  message: 'reads messages',
+  reaction: 'answers reactions',
+  command: 'runs slash commands',
+};
+
+export type Template = 'import' | 'reviewer' | 'helper' | 'blank';
+
+const eventNames = (events: unknown): string[] =>
+  Array.isArray(events)
+    ? events.map(String)
+    : events && typeof events === 'object'
+      ? Object.keys(events)
+      : [];
+
+const slug = (value: string) =>
+  value
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 40);
+
+interface Draft {
+  name: string;
+  id: string;
+  description: string;
+  platforms: string[];
+  events: Record<string, string[]>;
+  match: Record<string, Record<string, string>>;
+  tools: Record<string, string | string[] | undefined>;
+  permissions: string;
+  systemPrompt: string;
+  engine: string;
+  model: string;
+  effort: string;
+}
+
+function draftOf(agent: AgentRow | undefined, suggested: string): Draft {
+  const definition = agent?.definition;
+  const draft: Draft = {
+    name: agent?.name ?? suggested,
+    id: agent?.id ?? slug(suggested),
+    description: agent?.description ?? definition?.description ?? '',
+    platforms: [],
+    events: {},
+    match: {},
+    tools: {},
+    permissions: definition?.permissions ?? 'read-only',
+    systemPrompt: agent?.systemPrompt ?? '',
+    engine: definition?.engine ?? '',
+    model: definition?.model ?? '',
+    effort: definition?.effort ?? '',
+  };
+  for (const [id, entry] of Object.entries(definition?.integrations ?? {})) {
+    draft.platforms.push(id);
+    draft.events[id] = eventNames(entry.triggers);
+    draft.match[id] = {};
+    if (entry.triggers && !Array.isArray(entry.triggers))
+      for (const [name, options] of Object.entries(entry.triggers))
+        if (options && typeof options === 'object' && 'match' in options)
+          draft.match[id]![name] = String((options as { match: unknown }).match);
+    draft.tools[id] = entry.tools as Draft['tools'][string];
+  }
+  return draft;
+}
+
+/** Every event a platform offers except the noisy ones (messages, comments), which the user opts into with a filter. */
+const defaultEvents = (info: IntegrationInfo | undefined) =>
+  Object.entries(info?.events ?? {})
+    .filter(([, spec]) => !spec.noisy)
+    .map(([name]) => name);
+
+/** What a template sets: where it listens, what wakes it, and its instructions. The name stays. */
+function fromTemplate(template: Template, catalog: IntegrationInfo[]): Partial<Draft> {
+  const listen = (pick: (info: IntegrationInfo) => boolean) => {
+    const platforms = catalog.filter(pick).map(info => info.id);
+
+    return {
+      platforms,
+      events: Object.fromEntries(
+        platforms.map(id => [id, defaultEvents(catalog.find(info => info.id === id))]),
+      ),
+      tools: Object.fromEntries(platforms.map(id => [id, 'comment'])),
+      match: {},
+    };
+  };
+  if (template === 'reviewer')
+    return {
+      ...listen(info => 'pull_request' in info.events),
+      description: 'Reviews pull requests and answers questions about the code.',
+      systemPrompt: REVIEWER,
+    };
+  if (template === 'helper')
+    return {
+      ...listen(info => info.id === 'slack'),
+      description: "Answers the team's questions in chat.",
+      systemPrompt: HELPER,
+    };
+  return { platforms: [], events: {}, tools: {}, match: {}, description: '', systemPrompt: '' };
+}
+
+/** One platform's events: a plain list unless an event carries options, which are kept. */
+function eventsFor(
+  previous: NonNullable<AgentDefinition['integrations']>[string] | undefined,
+  names: string[],
+  match: Record<string, string>,
+) {
+  const before = previous?.triggers && !Array.isArray(previous.triggers) ? previous.triggers : {};
+  const built = Object.fromEntries(
+    names.map(name => {
+      const kept = before[name];
+      const text = match[name]?.trim();
+      const options =
+        kept && typeof kept === 'object' ? { ...(kept as Record<string, unknown>) } : {};
+      if (text) options.match = text;
+      else delete options.match;
+      if (Object.keys(options).length) return [name, options];
+      return [name, kept === undefined || typeof kept === 'object' ? true : kept];
+    }),
+  );
+  return Object.values(built).every(value => value === true) ? names : built;
+}
+
+/** One line on what the agent does, from its platforms' events. */
+function summaryOf(draft: Draft) {
+  const parts = draft.platforms
+    .filter(id => draft.events[id]?.length)
+    .map(
+      id =>
+        `${draft.events[id]!.map(event => DOES[event] ?? event.replace(/_/g, ' ')).join(' and ')} in ${id}`,
+    );
+  const text = parts.length ? parts.join(', ') : 'runs from the dashboard and the CLI';
+  return `${text.charAt(0).toUpperCase()}${text.slice(1)}.`;
+}
+
+const sameTools = (a: string[] = [], b: string[] = []) =>
+  a.length === b.length && a.every(tool => b.includes(tool));
+
+/** A platform's access presets that each grant more than the one before; a single one means it has no levels. */
+function levelsOf(info?: IntegrationInfo) {
+  if (!info) return [];
+  const kept = PRESETS.filter(
+    (preset, at) => !at || !sameTools(info.presets[preset], info.presets[PRESETS[at - 1]!]),
+  );
+  return kept.length > 1 ? kept : [];
+}
+
+/** The level a preset grants among `levels`: the highest one at or below it. */
+const levelOf = (levels: string[], preset: string) =>
+  levels.filter(level => PRESETS.indexOf(level) <= PRESETS.indexOf(preset)).at(-1) ?? '';
+
+/** The workspace's run settings for whatever the agent leaves unset. */
+export interface RunDefaults {
+  engine: string;
+  engines: NonNullable<Config['engines']>;
+  builtin: ModelsShape['builtin'];
+}
+
+/** Make a dashboard agent on one page, from a template or a repository, or edit one. Saving publishes a version. */
+export function AgentEditor({
+  catalog,
+  agent,
+  suggested = '',
+  section,
+  models,
+  defaults = { engine: '', engines: {}, builtin: {} },
+  template: first,
+  connected = false,
+  connectLabel = 'Connect',
+  tunnel = false,
+  port = '',
+}: {
+  catalog: IntegrationInfo[];
+  agent?: AgentRow;
+  suggested?: string;
+  section?: string;
+  /** Model names per engine, for the model picker. */
+  models: Record<string, string[]>;
+  defaults?: RunDefaults;
+  template?: Template;
+  /** A platform that reaches repositories is installed here. */
+  connected?: boolean;
+  connectLabel?: string;
+  /** Platforms cannot reach this server yet, so connecting starts with a tunnel. */
+  tunnel?: boolean;
+  port?: string;
+}) {
+  const nav = useRouter();
+  const creating = !agent;
+  const [template, setTemplate] = useState<Template>(first ?? 'blank');
+  const [draft, setDraft] = useState(() => ({
+    ...draftOf(agent, suggested),
+    ...(creating ? fromTemplate(first ?? 'blank', catalog) : {}),
+  }));
+  const [idTouched, setIdTouched] = useState(false);
+  const [writing, setWriting] = useState('write');
+  const [query, setQuery] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const set = <K extends keyof Draft>(key: K, value: Draft[K]) =>
+    setDraft(current => ({ ...current, [key]: value }));
+  const access = (id: string, tools = draft.tools[id]) =>
+    Array.isArray(tools) ? 'custom' : (tools ?? 'observe');
+  const shared = draft.platforms.length ? access(draft.platforms[0]!) : 'comment';
+  const uniform = draft.platforms.every(id => access(id) === shared);
+
+  const leveled = draft.platforms
+    .map(id => [id, levelsOf(catalog.find(entry => entry.id === id))] as const)
+    .filter(([, kept]) => kept.length);
+  const levels = PRESETS.filter(preset => leveled.some(([, kept]) => kept.includes(preset)));
+  const picked = new Set(leveled.map(([id]) => access(id)));
+  const level = picked.size === 1 ? levelOf(levels, [...picked][0]!) : '';
+
+  const aliasOf = (engine: string, model?: string) =>
+    Object.entries(defaults.builtin[engine] ?? {}).find(([, target]) => target === model)?.[0] ??
+    model;
+  const engine = draft.engine || defaults.engine;
+  const base = defaults.engines[engine] ?? {};
+  const fallback = [
+    ENGINE_NAMES[defaults.engine] ?? defaults.engine,
+    aliasOf(defaults.engine, defaults.engines[defaults.engine]?.model),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  const permission = PERMISSIONS.find(([key]) => key === draft.permissions);
+  const run = [
+    ENGINE_NAMES[engine] ?? engine,
+    draft.model || aliasOf(engine, base.model),
+    draft.effort || base.effort,
+    permission?.[1].toLowerCase(),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+
+  useEffect(() => {
+    if (!section) return;
+    const target = document.getElementById(`agent-${section}`);
+    target?.scrollIntoView({ block: 'start' });
+    target?.querySelector<HTMLElement>('input, textarea, button')?.focus({ preventScroll: true });
+  }, []);
+
+  const pickTemplate = (next: Template) => {
+    setTemplate(next);
+    if (next !== 'import') setDraft(current => ({ ...current, ...fromTemplate(next, catalog) }));
+  };
+  const rename = (name: string) =>
+    setDraft(current => ({
+      ...current,
+      name,
+      ...(creating && !idTouched ? { id: slug(name) } : {}),
+    }));
+  const togglePlatform = (id: string, on: boolean) =>
+    setDraft(current => {
+      const names = Object.keys(catalog.find(entry => entry.id === id)?.events ?? {});
+      return {
+        ...current,
+        platforms: on
+          ? catalog
+              .map(entry => entry.id)
+              .filter(key => key === id || current.platforms.includes(key))
+          : current.platforms.filter(key => key !== id),
+        events:
+          on && !current.events[id]?.length
+            ? { ...current.events, [id]: defaultEvents(catalog.find(entry => entry.id === id)) }
+            : current.events,
+        tools:
+          on && !current.tools[id]
+            ? { ...current.tools, [id]: uniform && shared !== 'custom' ? shared : 'comment' }
+            : current.tools,
+      };
+    });
+  const toggleEvent = (id: string, event: string, on: boolean) =>
+    setDraft(current => {
+      const list = current.events[id] ?? [];
+      const match = on
+        ? current.match
+        : { ...current.match, [id]: { ...current.match[id], [event]: '' } };
+
+      return {
+        ...current,
+        events: {
+          ...current.events,
+          [id]: on ? [...new Set([...list, event])] : list.filter(name => name !== event),
+        },
+        match,
+      };
+    });
+  const setMatch = (id: string, event: string, text: string) =>
+    setDraft(current => ({
+      ...current,
+      match: { ...current.match, [id]: { ...current.match[id], [event]: text } },
+    }));
+
+  const submit = async () => {
+    const silent = draft.platforms.find(id => !draft.events[id]?.length);
+    if (silent) return setError(`Pick at least one event on ${silent}, or turn ${silent} off.`);
+    const integrations: NonNullable<AgentDefinition['integrations']> = {};
+    for (const id of draft.platforms)
+      integrations[id] = {
+        triggers: eventsFor(
+          agent?.definition?.integrations?.[id],
+          draft.events[id] ?? [],
+          draft.match[id] ?? {},
+        ),
+        tools: draft.tools[id],
+      };
+    const definition: AgentDefinition = {
+      ...agent?.definition,
+      integrations,
+      permissions: draft.permissions,
+    };
+    for (const key of ['name', 'description', 'engine', 'model', 'effort'] as const) {
+      const value = draft[key].trim();
+      if (value) (definition as Record<string, unknown>)[key] = value;
+      else delete (definition as Record<string, unknown>)[key];
+    }
+    const id = creating ? draft.id : agent.id;
+    const name = draft.name.trim();
+    setBusy(true);
+    setError('');
+    try {
+      const files = agent?.files;
+      await client.agents.put(id, {
+        definition,
+        ...(files ? { files } : {}),
+        systemPrompt: draft.systemPrompt.trim() ? draft.systemPrompt : `You are ${name || id}.\n`,
+        ...(name ? { name } : {}),
+        ...(draft.description.trim() ? { description: draft.description.trim() } : {}),
+      });
+      if (creating && draft.platforms.length)
+        nav.push('/dash/agents/[slug]/platforms', { params: { slug: id } });
+      else nav.push('/dash/agents/[slug]', { params: { slug: id } });
+    } catch (reason) {
+      setBusy(false);
+      setError(reasonText(reason));
+    }
+  };
+
+  const actions = (
+    <>
+      <ErrorText value={error} />
+      {creating ? (
+        <button
+          type="button"
+          class="btn outline"
+          aria-pressed={template === 'import'}
+          onClick={() => pickTemplate('import')}
+        >
+          Import from repo
+        </button>
+      ) : null}
+      {creating ? null : (
+        <Link class="btn ghost" href="/dash/agents/[slug]" params={{ slug: agent.id }}>
+          Cancel
+        </Link>
+      )}
+      <button class="btn" disabled={busy || !draft.name.trim() || template === 'import'}>
+        {creating ? 'Create agent' : 'Publish new version'}
+      </button>
+    </>
+  );
+  const head = creating ? (
+    <PageHead
+      {...HEADS.newAgent}
+      back={<Back href="/dash/agents" params={{}} label="Agents" />}
+      actions={actions}
+    />
+  ) : (
+    <Hero
+      agent={agent}
+      back={<Back href="/dash/agents/[slug]" params={{ slug: agent.id }} label={agent.name} />}
+      actions={actions}
+    />
+  );
+
+  const templates = creating ? (
+    <div class="templates" role="radiogroup" aria-label="Start from">
+      {TEMPLATES.map(([key, label, hint]) => (
+        <button
+          key={key}
+          type="button"
+          role="radio"
+          aria-checked={template === key}
+          class="tile"
+          onClick={() => pickTemplate(key)}
+        >
+          <b>{label}</b>
+          <small>{hint}</small>
+        </button>
+      ))}
+    </div>
+  ) : null;
+
+  if (template === 'import' && creating)
+    return (
+      <div class="agent-new">
+        {head}
+        {templates}
+        <ImportPicker
+          connected={connected}
+          connectLabel={connectLabel}
+          tunnel={tunnel}
+          port={port}
+        />
+      </div>
+    );
+
+  const needle = query.trim().toLowerCase();
+  const shown = catalog.filter(info =>
+    `${info.id} ${info.description}`.toLowerCase().includes(needle),
+  );
+  return (
+    <form
+      class="agent-new"
+      onSubmit={event => {
+        event.preventDefault();
+        void submit();
+      }}
+    >
+      {head}
+      {templates}
+      <div class="agent-form">
+        <div class="agent-main">
+          <section id="agent-name" class="form-part">
+            <h2>Name and description</h2>
+            <div class="fields">
+              <Field label="Name" hint="its handle on every platform">
+                <span class="with-btn">
+                  <input
+                    name="name"
+                    required
+                    value={draft.name}
+                    onInput={event => rename(event.currentTarget.value)}
+                  />
+                  {creating ? (
+                    <button
+                      type="button"
+                      class="btn outline"
+                      title="Suggest another name"
+                      onClick={() => rename(suggestName())}
+                    >
+                      <Icon d={iShuffle} />
+                      Suggest
+                    </button>
+                  ) : null}
+                </span>
+              </Field>
+              {creating ? (
+                <Field label="Id" hint="the folder and command name">
+                  <input
+                    class="mono"
+                    name="id"
+                    required
+                    pattern="[a-z0-9][a-z0-9_\-]*"
+                    autocomplete="off"
+                    value={draft.id}
+                    onInput={event => {
+                      setIdTouched(true);
+                      set('id', event.currentTarget.value);
+                    }}
+                  />
+                </Field>
+              ) : (
+                <div class="field">
+                  <span>
+                    Id <small>fixed once created</small>
+                  </span>
+                  <p class="fixed mono">{agent.id}</p>
+                </div>
+              )}
+            </div>
+            <Field label="Description" hint="optional, shown in lists and added to the prompt">
+              <input
+                name="description"
+                maxLength={240}
+                placeholder="Answers engineering questions about acme/app."
+                value={draft.description}
+                onInput={event => set('description', event.currentTarget.value)}
+              />
+            </Field>
+          </section>
+
+          <section id="agent-instructions" class="form-part">
+            <div class="part-head">
+              <h2>Instructions</h2>
+              <Segmented
+                label="Instructions view"
+                options={[
+                  ['write', 'Write'],
+                  ['preview', 'Preview'],
+                ]}
+                value={writing}
+                onChange={setWriting}
+              />
+            </div>
+            {writing === 'write' ? (
+              <textarea
+                name="systemPrompt"
+                rows={10}
+                aria-label="Instructions"
+                placeholder={
+                  'Markdown. The system prompt every task starts from.\nYou answer questions about acme/app from its source. Cite file paths.'
+                }
+                value={draft.systemPrompt}
+                onInput={event => set('systemPrompt', event.currentTarget.value)}
+              />
+            ) : (
+              <div class="body md md-preview">
+                {draft.systemPrompt.trim() ? (
+                  markdown(draft.systemPrompt)
+                ) : (
+                  <p class="muted">Nothing written yet.</p>
+                )}
+              </div>
+            )}
+          </section>
+
+          <section id="agent-platforms" class="form-part">
+            <div
+              class="part-head"
+              onKeyDown={event => event.key === 'Enter' && event.preventDefault()}
+            >
+              <h2>Where it listens</h2>
+              {catalog.length > SEARCH_FROM ? (
+                <Search value={query} label="Search platforms" onInput={setQuery} />
+              ) : null}
+            </div>
+            <p class="muted">
+              Each platform becomes an app, set up on the next page. With none it runs from the
+              dashboard and the CLI.
+            </p>
+            <ul class="listen">
+              {shown.map(info => {
+                const on = draft.platforms.includes(info.id);
+                const ticked = draft.events[info.id] ?? [];
+                const events = Object.entries(info.events);
+                return (
+                  <li key={info.id} class={on ? 'on' : undefined}>
+                    <label class="listen-row">
+                      <span class="pf-mark" aria-hidden="true">
+                        <BrandIcon brand={info.brand} />
+                      </span>
+                      <span class="grow">
+                        <b>{info.name}</b>
+                        <small title={info.description}>{info.description}</small>
+                      </span>
+                      <input
+                        type="checkbox"
+                        role="switch"
+                        class="switch"
+                        name="platform"
+                        value={info.id}
+                        checked={on}
+                        onChange={event => togglePlatform(info.id, event.currentTarget.checked)}
+                      />
+                    </label>
+                    {on ? (
+                      <div class="triggers">
+                        <div class="chips" role="group" aria-label={`What wakes it on ${info.id}`}>
+                          {events.map(([event, spec]) => {
+                            const pressed = ticked.includes(event);
+                            return (
+                              <button
+                                key={event}
+                                type="button"
+                                class="chip"
+                                aria-pressed={pressed}
+                                title={spec.description}
+                                onClick={() => toggleEvent(info.id, event, !pressed)}
+                              >
+                                {event.replace(/_/g, ' ')}
+                              </button>
+                            );
+                          })}
+                        </div>
+                        {events
+                          .filter(([event, spec]) => spec.noisy && ticked.includes(event))
+                          .map(([event]) => (
+                            <label key={event} class="match">
+                              <span>{event.replace(/_/g, ' ')}</span>
+                              <input
+                                class="mono"
+                                name={`match:${info.id}:${event}`}
+                                placeholder="only when the text matches, like ^help\b"
+                                aria-label={`Text filter for ${event} on ${info.id}`}
+                                value={draft.match[info.id]?.[event] ?? ''}
+                                onInput={e => setMatch(info.id, event, e.currentTarget.value)}
+                              />
+                            </label>
+                          ))}
+                      </div>
+                    ) : null}
+                  </li>
+                );
+              })}
+              {shown.length ? null : <li class="listen-none muted">No platform matches.</li>}
+            </ul>
+            {levels.length ? (
+              <Field
+                label="Platform access"
+                hint={ACCESS[level]?.[1] ?? 'differs between platforms'}
+                group
+              >
+                <Segmented
+                  label="Platform access"
+                  options={levels.map(preset => [preset, ACCESS[preset]![0]])}
+                  value={level}
+                  onChange={preset =>
+                    set('tools', Object.fromEntries(draft.platforms.map(id => [id, preset])))
+                  }
+                />
+              </Field>
+            ) : null}
+          </section>
+
+          <details id="agent-run" class="form-part run" open={section === 'run'}>
+            <summary>
+              <h2>Run settings</h2>
+              <span class="grow muted">{run}</span>
+              <Icon d={iDown} />
+            </summary>
+            <div class="run-body">
+              <div class="fields">
+                <Field label="Engine and model" hint="what runs each task" group>
+                  <Select
+                    label="Model"
+                    value={modelValue(draft.engine, draft.model)}
+                    options={modelOptions(models, defaultLabel(fallback))}
+                    headings={modelHeadings(models)}
+                    action={{
+                      label: 'Add models',
+                      icon: iPlus,
+                      onPick: () => nav.push('/dash/settings/[tab]', { params: { tab: 'models' } }),
+                    }}
+                    onChange={value => setDraft(current => ({ ...current, ...splitModel(value) }))}
+                  />
+                </Field>
+                <Field label="Effort" hint="how hard the model thinks" group>
+                  <Segmented
+                    label="Effort"
+                    options={[['', defaultLabel(base.effort)], ...EFFORTS]}
+                    value={draft.effort}
+                    onChange={value => set('effort', value)}
+                  />
+                </Field>
+              </div>
+              <Field label="Repository access" hint={PERMISSION_HINTS[draft.permissions]} group>
+                <Segmented
+                  label="Repository access"
+                  options={PERMISSIONS}
+                  value={draft.permissions}
+                  onChange={value => set('permissions', value)}
+                />
+              </Field>
+            </div>
+          </details>
+        </div>
+
+        <aside class="agent-side" aria-label="Preview">
+          <span class="side-label">Preview</span>
+          <div class="agent-card preview">
+            <div class="bc-head">
+              <span class="mark">{initial(draft.name)}</span>
+              <div class="grow">
+                <h3>{draft.name.trim() || 'Unnamed agent'}</h3>
+                <span class="pills">
+                  <Badge>dashboard</Badge>
+                  {agent?.local ? null : <Badge>v{creating ? 1 : agent.currentVersion + 1}</Badge>}
+                </span>
+              </div>
+            </div>
+            <div class="lead-clamp">
+              <span>{draft.description.trim() || 'No description yet.'}</span>
+            </div>
+            {draft.platforms.length ? (
+              <span class="pfs">
+                {draft.platforms.map(id => (
+                  <Platform
+                    key={id}
+                    id={id}
+                    info={catalog.find(entry => entry.id === id)}
+                    state="none"
+                  />
+                ))}
+              </span>
+            ) : (
+              <span class="pfs muted">Listens nowhere yet</span>
+            )}
+          </div>
+          <p class="summary">{summaryOf(draft)}</p>
+        </aside>
+      </div>
+    </form>
+  );
+}