@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/agents/[slug]/(tabs)/settings/agent-settings-form.css

@@ -0,0 +1,114 @@
+.checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+}
+
+/* vertical section tabs */
+.vsettings {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+}
+.tabs.vertical {
+  flex-direction: column;
+  gap: 2px;
+  padding: 16px 12px;
+  box-shadow: none;
+  border-right: 1px solid var(--line);
+}
+/* section tabs stay in view beside a long panel */
+.page .tabs.vertical {
+  top: var(--stuck);
+  align-self: start;
+  height: auto;
+  overflow: visible;
+  background: none;
+}
+.tabs.vertical .tabs-label {
+  padding: 12px 10px 6px;
+  font-size: 10px;
+  color: var(--dim);
+}
+.tabs-label:first-child {
+  padding-top: 0;
+}
+.tabs.vertical > button {
+  height: 34px;
+  padding: 0 10px;
+  margin: 0;
+  border-bottom: 0;
+  border-left: 2px solid transparent;
+  text-align: left;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 13px;
+}
+.tabs.vertical > button:hover {
+  background: var(--wash);
+}
+.tabs.vertical > button[aria-current] {
+  background: var(--wash2);
+  border-left-color: var(--deep);
+}
+.vsearch {
+  position: absolute;
+  top: 16px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.tabs.vertical > button.miss {
+  opacity: 0.4;
+}
+.vbody {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 18px;
+  padding: 24px;
+  min-width: 0;
+}
+.vpanel {
+  display: grid;
+  gap: 16px;
+}
+.vpanel h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+.save {
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+@media (max-width: 760px) {
+  .vsettings {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .page .tabs.vertical {
+    position: static;
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 8px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .tabs.vertical .tabs-label {
+    display: none;
+  }
+  .tabs.vertical > button {
+    flex: none;
+    border-left: 0;
+    border-bottom: 2px solid transparent;
+  }
+  .tabs.vertical > button[aria-current] {
+    border-bottom-color: var(--deep);
+  }
+  .vbody {
+    padding: 18px 16px;
+  }
+  .vsearch {
+    position: static;
+  }
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/settings/agent-settings-form.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import './agent-settings-form.css';
+
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import type { AgentRow, AgentSettings } from '@coder/client/types';
+import { reasonText } from '@/utils/format';
+import { ErrorText, Field } from '@/comps/ui/field';
+import { Chips } from '@/comps/ui/badge';
+import { Select, type Option } from '@/comps/ui/select';
+import { Search } from '@/comps/ui/toolbar';
+import {
+  ENGINE_NAMES,
+  defaultLabel,
+  modelHeadings,
+  modelOptions,
+  modelValue,
+  splitModel,
+} from '@/app/dash/settings/model-options';
+import type { Defaults } from '@/app/dash/tasks/composer';
+
+const EFFORTS = ['low', 'medium', 'high'];
+const PERMISSIONS = ['read-only', 'workspace-write', 'auto'];
+const PRESETS = ['observe', 'comment', 'write'];
+
+const eventNames = (events: unknown): string[] =>
+  Array.isArray(events)
+    ? events.map(String)
+    : events && typeof events === 'object'
+      ? Object.keys(events)
+      : [];
+
+function Choice({
+  name,
+  label,
+  hint,
+  value,
+  options,
+  blank,
+}: {
+  name: string;
+  label: string;
+  hint?: string;
+  value?: string;
+  options: string[];
+  blank: string;
+}) {
+  const list = value && !options.includes(value) ? [...options, value] : options;
+  return (
+    <Field label={label} hint={hint} group>
+      <Select
+        name={name}
+        label={label}
+        defaultValue={value ?? ''}
+        options={[['', blank], ...list.map((option): Option => [option, option])]}
+      />
+    </Field>
+  );
+}
+
+/** How this agent runs here: engine settings, then one tab per platform to narrow access and events. One Save. */
+export function AgentSettingsForm({
+  agent,
+  models,
+  defaults,
+  runners,
+}: {
+  agent: AgentRow;
+  models: Record<string, string[]>;
+  defaults: Defaults;
+  runners: Option[];
+}) {
+  const [panel, setPanel] = useState(0);
+  const [error, setError] = useState('');
+  const [saved, setSaved] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [query, setQuery] = useState('');
+  const [hits, setHits] = useState<number[]>();
+  const form = useRef<HTMLFormElement>(null);
+  const settings = agent.settings ?? {};
+  const [model, setModel] = useState(modelValue(settings.engine, settings.model));
+  const declared = agent.definition?.integrations ?? {};
+  const platforms = Object.keys(declared).sort();
+  const own = agent.definition;
+  const engine = own?.engine ?? defaults.engine;
+
+  // Filters every panel's fields by label and current value, and moves to a panel that has a match.
+  useLayoutEffect(() => {
+    const needle = query.trim().toLowerCase();
+    const found: number[] = [];
+    form.current!.querySelectorAll('.vpanel').forEach((section, index) => {
+      let any = false;
+      section.querySelectorAll<HTMLElement>('.field').forEach(field => {
+        const values = [...field.querySelectorAll('input')].map(input => input.value).join(' ');
+        const match = !needle || `${field.textContent} ${values}`.toLowerCase().includes(needle);
+        field.hidden = !match;
+        any ||= match;
+      });
+      if (any) found.push(index);
+    });
+    setHits(needle ? found : undefined);
+    if (needle && found.length && !found.includes(panel)) setPanel(found[0]!);
+  }, [query]);
+
+  const submit = async (event: SubmitEvent) => {
+    event.preventDefault();
+    const values = new FormData(event.currentTarget as HTMLFormElement);
+    const text = (key: string) => String(values.get(key) ?? '').trim();
+    const next: AgentSettings = {};
+    for (const key of ['effort', 'permissions', 'runner'] as const)
+      if (text(key)) next[key] = text(key);
+    const picked = splitModel(model);
+    if (picked.engine) next.engine = picked.engine;
+    if (picked.model) next.model = picked.model;
+    for (const id of platforms) {
+      const current = settings.integrations?.[id] ?? {};
+      const entry: NonNullable<AgentSettings['integrations']>[string] = {};
+      if (Array.isArray(current.allowedTools)) entry.allowedTools = current.allowedTools;
+      else if (text(`tools:${id}`)) entry.allowedTools = text(`tools:${id}`);
+      const names = eventNames(declared[id]?.triggers);
+      const picked = values.getAll(`event:${id}`).map(String);
+      if (names.length && picked.length < names.length) entry.allowedEvents = picked;
+      if (Object.keys(entry).length) (next.integrations ??= {})[id] = entry;
+    }
+    setBusy(true);
+    setError('');
+    setSaved('');
+    try {
+      await client.agents.settings(agent.id, next);
+      setSaved('Saved. New tasks use these settings.');
+    } catch (reason) {
+      setError(reasonText(reason));
+    }
+    setBusy(false);
+  };
+
+  return (
+    <form ref={form} class="vsettings card frame" onSubmit={submit}>
+      <nav class="tabs vertical" aria-label="Settings sections">
+        <p class="tabs-label">Runtime</p>
+        <button
+          type="button"
+          aria-current={panel === 0 ? 'true' : undefined}
+          class={hits && !hits.includes(0) ? 'miss' : undefined}
+          onClick={() => setPanel(0)}
+        >
+          How it runs
+        </button>
+        {platforms.length ? <p class="tabs-label">Platforms</p> : null}
+        {platforms.map((id, index) => (
+          <button
+            key={id}
+            type="button"
+            aria-current={panel === index + 1 ? 'true' : undefined}
+            class={hits && !hits.includes(index + 1) ? 'miss' : undefined}
+            onClick={() => setPanel(index + 1)}
+          >
+            {id}
+          </button>
+        ))}
+      </nav>
+      <div class="vbody">
+        <div class="vsearch">
+          <Search value={query} label="Search settings" onInput={setQuery} />
+          {hits && !hits.length ? <span class="muted">No setting matches.</span> : null}
+        </div>
+        <section class="vpanel" hidden={panel !== 0}>
+          <h2>How it runs</h2>
+          <p class="muted">Anything left on Default follows the agent's own definition.</p>
+          <div class="fields">
+            <Field label="Model" hint="picking a model picks its engine" group>
+              <Select
+                label="Model"
+                value={model}
+                options={[
+                  ...modelOptions(
+                    models,
+                    defaultLabel(
+                      [
+                        ENGINE_NAMES[engine] ?? engine,
+                        own?.model ?? defaults.engines[engine]?.model,
+                      ]
+                        .filter(Boolean)
+                        .join(' · '),
+                    ),
+                  ),
+                  ...(!settings.engine && settings.model
+                    ? [[modelValue(undefined, settings.model), settings.model] as Option]
+                    : []),
+                ]}
+                headings={modelHeadings(models)}
+                onChange={setModel}
+              />
+            </Field>
+            <Choice
+              name="effort"
+              label="Effort"
+              value={settings.effort}
+              options={EFFORTS}
+              blank={defaultLabel(
+                own?.effort ?? defaults.engines[splitModel(model).engine ?? engine]?.effort,
+              )}
+            />
+            <Choice
+              name="permissions"
+              label="Permissions"
+              hint="what the runner may change in the checkout"
+              value={settings.permissions}
+              options={PERMISSIONS}
+              blank={defaultLabel(own?.permissions ?? 'read-only')}
+            />
+            {runners.length > 1 ? (
+              <Field label="Runs on" group>
+                <Select
+                  name="runner"
+                  label="Runs on"
+                  defaultValue={settings.runner ?? ''}
+                  options={runners}
+                />
+              </Field>
+            ) : null}
+          </div>
+        </section>
+        {platforms.map((id, index) => {
+          const current = settings.integrations?.[id] ?? {};
+          const names = eventNames(declared[id]?.triggers);
+          const allowed = current.allowedEvents;
+          const tools = declared[id]?.tools;
+          return (
+            <section key={id} class="vpanel" hidden={panel !== index + 1}>
+              <h2>{id}</h2>
+              <p class="muted">
+                Narrow what the agent does here. Only the events its definition declares can be
+                picked.
+              </p>
+              {Array.isArray(current.allowedTools) ? (
+                <div class="field">
+                  <span>Platform access</span>
+                  <Chips values={current.allowedTools} />
+                </div>
+              ) : (
+                <Choice
+                  name={`tools:${id}`}
+                  label="Platform access"
+                  hint="observe reads, comment also replies, write also pushes and merges"
+                  value={
+                    typeof current.allowedTools === 'string' ? current.allowedTools : undefined
+                  }
+                  options={PRESETS}
+                  blank={defaultLabel(
+                    typeof tools === 'string' ? tools : tools ? 'custom' : 'observe',
+                  )}
+                />
+              )}
+              {names.length ? (
+                <div class="field">
+                  <span>
+                    Events <small>all declared events unless you narrow it</small>
+                  </span>
+                  <div class="checks">
+                    {names.map(name => (
+                      <label key={name} class="check">
+                        <input
+                          type="checkbox"
+                          name={`event:${id}`}
+                          value={name}
+                          defaultChecked={!allowed || allowed.includes(name)}
+                        />
+                        {name}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </section>
+          );
+        })}
+        <div class="form-actions save">
+          <button class="btn" disabled={busy}>
+            Save
+          </button>
+          <ErrorText value={error} />
+          {saved ? (
+            <span class="flash" role="status">
+              {saved}
+            </span>
+          ) : null}
+        </div>
+      </div>
+    </form>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/settings/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingCard } from '@/comps/frame/loading-card';
+
+export default function AgentSettingsLoading() {
+  return <LoadingCard label="Loading settings" h={339} />;
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/settings/page.tsx

@@ -0,0 +1,54 @@
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { load } from '@/api/load';
+import { Settle } from '@/comps/frame/stream';
+import { loadAgent } from '@/api/load';
+import { NO_MODELS, modelsByEngine } from '@/app/dash/settings/model-options';
+import { runnerOptions } from '@/app/dash/tasks/composer-data';
+
+const AgentSettingsForm = dynamic(() =>
+  import('./agent-settings-form').then(m => m.AgentSettingsForm),
+);
+
+export default async function AgentSettingsPage({
+  request,
+  params,
+}: {
+  request?: Request;
+  params: Promise<Record<string, string | string[]>>;
+}) {
+  if (!request) return null;
+  const { slug: raw } = await params;
+  const slug = Array.isArray(raw) ? raw[0]! : raw!;
+  const agent = loadAgent(request, slug);
+  const models = load(request)
+    .models.list()
+    .catch(() => NO_MODELS);
+  const config = load(request)
+    .config.get()
+    .catch(() => undefined);
+  const runners = load(request)
+    .runners.list()
+    .then(
+      rows => rows.items,
+      () => [],
+    );
+
+  return (
+    <Settle
+      load={() =>
+        Promise.all([agent, models, config, runners]).then(([row, shape, shown, rows]) => (
+          <AgentSettingsForm
+            agent={row}
+            models={modelsByEngine(shape)}
+            defaults={{
+              engine: shown?.effective.chain?.[0] ?? 'claude',
+              engines: shown?.effective.engines ?? {},
+            }}
+            runners={runnerOptions(rows)}
+          />
+        ))
+      }
+    />
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/tasks/loading.tsx

@@ -0,0 +1,5 @@
+import { TasksLoading } from '@/app/dash/tasks/list/tasks-section';
+
+export default function AgentTasksLoading() {
+  return <TasksLoading agent />;
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/tasks/page.tsx

@@ -0,0 +1,14 @@
+import { TasksSection, loadTasks } from '@/app/dash/tasks/list/tasks-section';
+
+export default async function AgentTasksPage({
+  request,
+  params,
+}: {
+  request?: Request;
+  params: Promise<Record<string, string | string[]>>;
+}) {
+  if (!request) return null;
+  const { slug: raw } = await params;
+  const slug = Array.isArray(raw) ? raw[0]! : raw!;
+  return <TasksSection tasks={loadTasks(request, slug)} agent={slug} />;
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/usage/loading.tsx

@@ -0,0 +1,31 @@
+import '@/comps/ui/segmented.css';
+import '@/app/dash/usage/range-bar.css';
+import { LoadingRange } from '@/app/dash/usage/range-bar';
+import { Stat, Stats } from '@/app/dash/usage/stats';
+import { Card, Loading } from '@/comps/ui/card';
+import { BLANK } from '@/comps/frame/loading-card';
+
+/** The usage tab's shape before its numbers arrive: totals, the day chart and the two breakdowns, blank. */
+export default function AgentUsageLoading() {
+  return (
+    <>
+      <LoadingRange />
+      <Stats label="Totals">
+        {['Tasks', 'Runner time', 'Tokens', 'Average task'].map(label => (
+          <Stat key={label} label={label} value={BLANK} />
+        ))}
+      </Stats>
+      <Card title="Tasks per day">
+        <Loading label="Loading usage" h={232} />
+      </Card>
+      <div class="grid-2">
+        <Card title="By installation">
+          <Loading label="Loading installations" h={173} />
+        </Card>
+        <Card title="By engine">
+          <Loading label="Loading engines" h={173} />
+        </Card>
+      </div>
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/usage/page.css

@@ -0,0 +1,12 @@
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  align-items: start;
+}
+
+@media (max-width: 1000px) {
+  .grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/usage/page.tsx

@@ -0,0 +1,163 @@
+import '@/comps/ui/segmented.css';
+import '@/app/dash/usage/range-bar.css';
+import './page.css';
+import { formatCount, formatDuration, zoneOf } from '@/utils/format';
+import { daysIn, rangeFor } from '@/utils/range';
+import { load } from '@/api/load';
+import type { UsageTotal } from '@coder/client/types';
+import { Card, Empty } from '@/comps/ui/card';
+import { Stat, Stats } from '@/app/dash/usage/stats';
+import { Settle } from '@/comps/frame/stream';
+import { unwrap } from '@/api/load';
+import { DayChart } from '@/app/dash/usage/day-chart';
+import { RangeBar } from '@/app/dash/usage/range-bar';
+
+function Breakdown({
+  title,
+  head,
+  rows,
+  label,
+}: {
+  title: string;
+  head: string;
+  rows: UsageTotal[];
+  label: (key: string) => { name: string; sub?: string };
+}) {
+  const sorted = [...rows].sort((a, b) => b.tokenCount - a.tokenCount || b.tasks - a.tasks);
+
+  return (
+    <Card title={title} count={rows.length}>
+      {rows.length ? (
+        <div class="table-scroll scroll-box" style="--max:420px">
+          <table>
+            <thead>
+              <tr>
+                <th>{head}</th>
+                <th class="num">Tasks</th>
+                <th class="num">Runner time</th>
+                <th class="num">Tokens</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map(row => {
+                const { name, sub } = label(row.key);
+                return (
+                  <tr key={row.key}>
+                    <td>
+                      {name}
+                      {sub ? <span class="sub">{sub}</span> : null}
+                    </td>
+                    <td class="num">{formatCount(row.tasks)}</td>
+                    <td class="num">{formatDuration(row.runnerMs)}</td>
+                    <td class="num">{formatCount(row.tokenCount)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <Empty title="Nothing in this range" />
+      )}
+    </Card>
+  );
+}
+
+/** One agent's usage: the range at once, then figures and tasks per day, then where and on what it ran. */
+export default async function AgentUsagePage({
+  request,
+  params,
+}: {
+  request?: Request;
+  params: Promise<Record<string, string | string[]>>;
+}) {
+  if (!request) return null;
+  const { slug: raw } = await params;
+  const slug = Array.isArray(raw) ? raw[0]! : raw!;
+  const tz = zoneOf(request);
+  const range = rangeFor(request, tz);
+
+  const totals = (by: 'day' | 'installation' | 'engine') =>
+    load(request)
+      .usage({
+        by,
+        since: range.since,
+        until: range.until,
+        agent: slug,
+        ...(by === 'day' ? { tz } : {}),
+      })
+      .then(value => value.totals);
+  const data = Promise.all([totals('day'), totals('installation'), totals('engine')]);
+  const installations = load(request).installations.list(slug).then(unwrap);
+  data.catch(() => {});
+  installations.catch(() => {});
+
+  return (
+    <>
+      <RangeBar
+        range={range}
+        to={{ href: '/dash/agents/[slug]/usage', params: { slug } }}
+        tz={tz}
+      />
+      <Settle
+        load={() =>
+          Promise.all([data, installations]).then(([[days, where, engines], installed]) => {
+            const sum = (pick: (row: UsageTotal) => number) =>
+              engines.reduce((total, row) => total + pick(row), 0);
+            const tasks = sum(row => row.tasks);
+            const runner = sum(row => row.runnerMs);
+            const place = (key: string) => {
+              const found = installed.find(entry => entry.id === key);
+              return found
+                ? { name: found.account.login, sub: found.integration }
+                : { name: key, sub: 'removed installation' };
+            };
+            return (
+              <>
+                <Stats label="Totals">
+                  <Stat label="Tasks" value={formatCount(tasks)} />
+                  <Stat label="Runner time" value={formatDuration(runner)} />
+                  <Stat label="Tokens" value={formatCount(sum(row => row.tokenCount))} />
+                  <Stat
+                    label="Average task"
+                    value={tasks ? formatDuration(runner / tasks) : 'Not available'}
+                  />
+                </Stats>
+                <Card title="Tasks per day">
+                  <div class="body">
+                    {tasks ? (
+                      <DayChart
+                        days={daysIn(range, tz)}
+                        totals={days}
+                        metric="tasks"
+                        label="Tasks per day"
+                      />
+                    ) : (
+                      <Empty title="Nothing ran in this range">
+                        Pick a longer range, or run a task.
+                      </Empty>
+                    )}
+                  </div>
+                </Card>
+                <div class="grid-2">
+                  <Breakdown
+                    title="By installation"
+                    head="Installed on"
+                    rows={where}
+                    label={place}
+                  />
+                  <Breakdown
+                    title="By engine"
+                    head="Engine"
+                    rows={engines}
+                    label={key => ({ name: key })}
+                  />
+                </div>
+              </>
+            );
+          })
+        }
+      />
+    </>
+  );
+}