@wular/coder 0.4.3 → 0.4.4

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

@@ -1,114 +0,0 @@
-.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

@@ -1,294 +0,0 @@
-'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

@@ -1,5 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,163 +0,0 @@
-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>
-              </>
-            );
-          })
-        }
-      />
-    </>
-  );
-}