@wular/coder 0.3.17 → 0.4.0

package/src/server/dash/app/dash/settings/model-options.ts

@@ -0,0 +1,117 @@
+import type { ModelsShape } from '@coder/client/types';
+
+export const NO_MODELS: ModelsShape = { builtin: {}, models: {} };
+
+export const ENGINES = ['claude', 'codex', 'custom'];
+export const ENGINE_NAMES: Record<string, string> = {
+  claude: 'Claude',
+  codex: 'Codex',
+  custom: 'Custom',
+};
+
+/** Each engine's usable model names: built-ins, then aliases and endpoints; turned-off ones left out. */
+export function modelsByEngine(shape: ModelsShape): Record<string, string[]> {
+  const own = Object.entries(shape.models).filter(([, entry]) => !entry.disabled);
+  return Object.fromEntries(
+    ENGINES.map(engine => [
+      engine,
+      [
+        ...Object.keys(shape.builtin[engine] ?? {}).filter(name => !shape.models[name]?.disabled),
+        ...own
+          .filter(([, entry]) => (engine === 'custom' ? entry.baseUrl : entry.provider === engine))
+          .map(([name]) => name),
+      ],
+    ]),
+  );
+}
+
+/** An unset setting's label, naming what it resolves to; the engine picks when nothing sets it. */
+export const defaultLabel = (value?: string) => `Default (${value || "engine's own"})`;
+
+/** One picker for engine and model: `engine:model`, or `engine:` for an engine's own default. */
+export function modelOptions(
+  byEngine: Record<string, string[]>,
+  blank: string,
+): Array<[string, string]> {
+  return [
+    ['', blank],
+    ...ENGINES.filter(engine => byEngine[engine]?.length).flatMap(
+      (engine): Array<[string, string]> => [
+        [`${engine}:`, 'Its default model'],
+        ...byEngine[engine]!.map((model): [string, string] => [`${engine}:${model}`, model]),
+      ],
+    ),
+  ];
+}
+
+export const modelValue = (engine?: string, model?: string) =>
+  engine || model ? `${engine ?? ''}:${model ?? ''}` : '';
+
+export function splitModel(value: string): { engine: string; model: string } {
+  const at = value.indexOf(':');
+  return at < 0
+    ? { engine: '', model: '' }
+    : { engine: value.slice(0, at), model: value.slice(at + 1) };
+}
+
+/** Section titles for `modelOptions`: each engine's name above its first option. */
+export const modelHeadings = (byEngine: Record<string, string[]>): Record<string, string> =>
+  Object.fromEntries(
+    ENGINES.filter(engine => byEngine[engine]?.length).map(engine => [
+      `${engine}:`,
+      ENGINE_NAMES[engine]!,
+    ]),
+  );
+
+export interface CustomProvider {
+  id: string;
+  name: string;
+  baseUrl: string;
+  envKey: string;
+  keyUrl?: string;
+  needsKey: boolean;
+}
+
+/** OpenAI-compatible providers the custom endpoint form prefills. */
+export const CUSTOM_PROVIDERS: CustomProvider[] = [
+  {
+    id: 'openrouter',
+    name: 'OpenRouter',
+    baseUrl: 'https://openrouter.ai/api/v1',
+    envKey: 'OPENROUTER_API_KEY',
+    keyUrl: 'https://openrouter.ai/keys',
+    needsKey: true,
+  },
+  {
+    id: 'vercel',
+    name: 'Vercel AI Gateway',
+    baseUrl: 'https://ai-gateway.vercel.sh/v1',
+    envKey: 'AI_GATEWAY_API_KEY',
+    keyUrl: 'https://vercel.com/d?to=%2F%5Bteam%5D%2F~%2Fai-gateway%2Fapi-keys&title=AI+Gateway+API+Keys',
+    needsKey: true,
+  },
+  {
+    id: 'groq',
+    name: 'Groq',
+    baseUrl: 'https://api.groq.com/openai/v1',
+    envKey: 'GROQ_API_KEY',
+    keyUrl: 'https://console.groq.com/keys',
+    needsKey: true,
+  },
+  {
+    id: 'together',
+    name: 'Together AI',
+    baseUrl: 'https://api.together.xyz/v1',
+    envKey: 'TOGETHER_API_KEY',
+    keyUrl: 'https://api.together.ai/settings/api-keys',
+    needsKey: true,
+  },
+  {
+    id: 'ollama',
+    name: 'Ollama',
+    baseUrl: 'http://localhost:11434/v1',
+    envKey: '',
+    needsKey: false,
+  },
+  { id: 'other', name: 'Other', baseUrl: '', envKey: '', needsKey: true },
+];

package/src/server/dash/app/dash/settings/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from '@wular/pnext/navigation';
+
+/** Settings opens on its first tab. */
+export default function SettingsPage({ request }: { request?: Request }) {
+  if (!request) return null;
+  redirect('/dash/settings/credentials');
+}

package/src/server/dash/app/dash/settings/settings-head.tsx

@@ -0,0 +1,24 @@
+import type { ComponentChildren } from 'preact';
+
+import { PageHead } from '@/comps/frame/page-head';
+
+export const SETTINGS = [
+  { tab: 'credentials', label: 'Credentials' },
+  { tab: 'models', label: 'Models' },
+  { tab: 'engines', label: 'Engines' },
+  { tab: 'mcp', label: 'MCP' },
+  { tab: 'runners', label: 'Runners' },
+] as const;
+
+export type SettingsTab = (typeof SETTINGS)[number]['tab'];
+
+/** Settings' head; members are managed in Wular. */
+export function SettingsHead({ actions }: { actions?: ComponentChildren }) {
+  return (
+    <PageHead
+      title="Settings"
+      lead="What every task runs with. Changes apply to the next task."
+      actions={actions}
+    />
+  );
+}

package/src/server/dash/app/dash/settings/tunnel-guide.tsx

@@ -0,0 +1,28 @@
+import { Card } from '@/comps/ui/card';
+
+/** How a server on this machine receives platform events: a public tunnel to its port, then PUBLIC_URL. */
+export function TunnelGuide({ port }: { port: string }) {
+  return (
+    <Card title="Receive platform events">
+      <div class="guide">
+        <p>
+          Platforms reach this server through a public address. Expose port {port} with one of
+          these.
+        </p>
+        <ul class="steps-list">
+          <li>
+            <code>ngrok http {port}</code>
+          </li>
+          <li>
+            <code>cloudflared tunnel --url http://localhost:{port}</code>
+          </li>
+          <li>VS Code's Ports panel, with the port's visibility set to Public</li>
+        </ul>
+        <p>
+          Then restart with <code>PUBLIC_URL=&lt;tunnel URL&gt; coder server serve</code>. The
+          tunnel serves only webhooks and app setup, never this dashboard.
+        </p>
+      </div>
+    </Card>
+  );
+}

package/src/server/dash/app/dash/tasks/[id]/activity.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'preact/hooks';
+import {
+  Virtualizer,
+  observeWindowOffset,
+  observeWindowRect,
+  windowScroll,
+} from '@tanstack/virtual-core';
+
+import type { TaskDisplayRow } from '@coder/core/task/log-view';
+import {
+  iActivity,
+  iAlert,
+  iChart,
+  iCheck,
+  iDown,
+  iKey,
+  iMessage,
+  iSpark,
+  iSteer,
+  iTerminal,
+  iX,
+} from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+import { formatDuration, formatTime } from '@/utils/format';
+
+const ICONS: Record<TaskDisplayRow['kind'], string> = {
+  assistant: iMessage,
+  tool: iTerminal,
+  'tool-result': iCheck,
+  approval: iKey,
+  status: iActivity,
+  error: iAlert,
+  line: iActivity,
+  reasoning: iSpark,
+  steer: iSteer,
+  usage: iChart,
+};
+
+/** Rows long enough to fold to one line. */
+const foldable = (row: TaskDisplayRow) =>
+  Boolean(row.detail) || row.title.length > 120 || row.title.includes('\n');
+
+const atEnd = () => innerHeight + scrollY >= document.documentElement.scrollHeight - 48;
+
+/** The list scrolls with the page; only rows near the viewport are in the DOM. */
+function useWindowVirtualizer(count: number, list: { current: HTMLElement | null }) {
+  const [, rerender] = useReducer((n: number) => n + 1, 0);
+  const options = {
+    count,
+    estimateSize: () => 30,
+    overscan: 16,
+    getScrollElement: () => window,
+    observeElementRect: observeWindowRect,
+    observeElementOffset: observeWindowOffset,
+    scrollToFn: windowScroll,
+    scrollMargin: list.current ? list.current.getBoundingClientRect().top + scrollY : 0,
+    onChange: () => rerender(0),
+  };
+  const [virtual] = useState(() => new Virtualizer<Window, HTMLElement>(options));
+  virtual.setOptions(options);
+  useLayoutEffect(() => virtual._didMount(), []);
+  useLayoutEffect(() => virtual._willUpdate());
+  return virtual;
+}
+
+function Row({
+  row,
+  tz,
+  open,
+  onToggle,
+}: {
+  row: TaskDisplayRow;
+  tz: string;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const title = useRef<HTMLSpanElement>(null);
+  const [clipped, setClipped] = useState(false);
+  useLayoutEffect(() => {
+    if (title.current) setClipped(title.current.scrollWidth > title.current.clientWidth);
+  }, [row.title]);
+  const fold = open || clipped || foldable(row);
+  const failed = row.tone === 'error';
+  const extra =
+    row.kind === 'tool-result'
+      ? [
+          row.tool,
+          row.exitCode !== undefined ? `exit ${row.exitCode}` : undefined,
+          row.durationMs ? formatDuration(row.durationMs) : undefined,
+        ]
+          .filter(Boolean)
+          .join(' · ')
+      : row.kind === 'reasoning' && row.durationMs
+        ? formatDuration(row.durationMs)
+        : '';
+  const Tag = fold ? 'button' : 'div';
+
+  return (
+    <Tag
+      type={fold ? 'button' : undefined}
+      class={`act ${row.kind}${row.tone ? ` ${row.tone}` : ''}${row.separated ? ' sep' : ''}${open ? ' open' : ''}`}
+      aria-expanded={fold ? open : undefined}
+      onClick={fold ? onToggle : undefined}
+    >
+      <time>{formatTime(row.at, tz)}</time>
+      <Icon d={row.kind === 'tool-result' && failed ? iX : ICONS[row.kind]} />
+      <span class="act-text">
+        <span class="act-title" ref={title}>
+          {row.title}
+        </span>
+        {extra ? <span class="act-detail">{extra}</span> : null}
+        {row.detail ? <span class="act-detail">{row.detail}</span> : null}
+      </span>
+      {fold ? <Icon d={iDown} class="act-chev" /> : null}
+    </Tag>
+  );
+}
+
+/** What the task did, as the CLI's watch shows it: one line per event, long ones folded, following the end while you are there. */
+export function Activity({
+  rows,
+  live,
+  tz,
+}: {
+  rows: TaskDisplayRow[];
+  live: boolean;
+  tz: string;
+}) {
+  const list = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState<Set<number>>(new Set());
+  const [follow, setFollow] = useState(live);
+  const virtual = useWindowVirtualizer(rows.length, list);
+
+  useEffect(() => {
+    const onScroll = () => setFollow(atEnd());
+    addEventListener('scroll', onScroll, { passive: true });
+    return () => removeEventListener('scroll', onScroll);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (follow) scrollTo({ top: document.documentElement.scrollHeight });
+  }, [rows.length]);
+
+  if (!rows.length)
+    return (
+      <p class="act-empty muted">
+        {live ? 'Nothing yet. Events appear here as the task runs.' : 'No activity recorded.'}
+      </p>
+    );
+
+  return (
+    <>
+      <div
+        class="act-list"
+        ref={list}
+        style={`height:${virtual.getTotalSize()}px`}
+        role="log"
+        aria-live="off"
+      >
+        {virtual.getVirtualItems().map(item => {
+          const row = rows[item.index]!;
+          return (
+            <div
+              key={row.seq}
+              class="act-slot"
+              data-index={item.index}
+              ref={virtual.measureElement}
+              style={`transform:translateY(${item.start - virtual.options.scrollMargin}px)`}
+            >
+              <Row
+                row={row}
+                tz={tz}
+                open={open.has(row.seq)}
+                onToggle={() =>
+                  setOpen(value => {
+                    const next = new Set(value);
+                    if (!next.delete(row.seq)) next.add(row.seq);
+                    return next;
+                  })
+                }
+              />
+            </div>
+          );
+        })}
+      </div>
+      {follow ? null : (
+        <button
+          type="button"
+          class="jump"
+          onClick={() => {
+            setFollow(true);
+            scrollTo({ top: document.documentElement.scrollHeight });
+          }}
+        >
+          Jump to latest
+        </button>
+      )}
+    </>
+  );
+}

package/src/server/dash/app/dash/tasks/[id]/loading.tsx

@@ -0,0 +1,31 @@
+import { Back, Page } from '@/comps/frame/page-head';
+import { Loading } from '@/comps/ui/card';
+import { LoadingTabs } from '@/comps/ui/tabs';
+import { BLANK } from '@/comps/frame/loading-card';
+
+export default function TaskLoading() {
+  return (
+    <Page>
+      <LoadingTask />
+    </Page>
+  );
+}
+
+/** A task's head and tabs, blank like `LoadingHero`, then one loader for the rest. */
+function LoadingTask() {
+  return (
+    <>
+      <header class="head">
+        <div>
+          <Back href="/dash/tasks" params={{}} label="Tasks" />
+          <div class="title-row">
+            <h1>{BLANK}</h1>
+          </div>
+          <p class="lead">{BLANK}</p>
+        </div>
+      </header>
+      <LoadingTabs labels={['Conversation', 'Activity', 'Diff']} />
+      <Loading label="Loading task" />
+    </>
+  );
+}

package/src/server/dash/app/dash/tasks/[id]/page.tsx

@@ -0,0 +1,30 @@
+import './task-view.css';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { zoneOf } from '@/utils/format';
+import { load } from '@/api/load';
+import { Page } from '@/comps/frame/page-head';
+import { Settle } from '@/comps/frame/stream';
+
+// Hydrates with the page: the reply box is focused and the activity follows the run at once.
+const TaskView = dynamic(() => import('./task-view').then(m => m.TaskView));
+
+export default async function TaskPage({
+  request,
+  params,
+}: {
+  request?: Request;
+  params: Promise<Record<string, string | string[]>>;
+}) {
+  if (!request) return null;
+  const { id: raw } = await params;
+  const id = Array.isArray(raw) ? raw[0]! : raw!;
+  const task = load(request).tasks.get(id);
+  const tz = zoneOf(request);
+
+  return (
+    <Page>
+      <Settle load={() => task.then(row => <TaskView initial={row} tz={tz} />)} />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/tasks/[id]/task-actions.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { useRouter } from '@wular/pnext/navigation/client';
+import type { TaskRow } from '@coder/client/types';
+import { Card } from '@/comps/ui/card';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { ConfirmDialog } from '@/comps/ui/confirm';
+import { Menu, MenuItem } from '@/comps/ui/menu';
+import { Icon } from '@/comps/ui/icon';
+import { iDots } from '@/comps/ui/icons';
+
+export function approvalParts(approval: unknown): {
+  id?: string;
+  action?: string;
+  reason?: string;
+} {
+  if (!approval || typeof approval !== 'object') return {};
+  const record = approval as Record<string, unknown>;
+  const pick = (...keys: string[]) =>
+    keys.map(key => record[key]).find(value => typeof value === 'string') as string | undefined;
+  return {
+    id: pick('id'),
+    action: pick('kind', 'tool'),
+    reason: pick('summary', 'reason'),
+  };
+}
+
+const DONE = {
+  approve: 'Decision sent.',
+  archive: 'Archived.',
+  ask: 'Question sent.',
+  cancel: 'Stop requested.',
+  continue: 'Sent.',
+  steer: 'Steer sent.',
+};
+
+export function useAction(taskId: string) {
+  const [error, setError] = useState('');
+  const [outcome, setOutcome] = useState('');
+  const run = async (
+    name: keyof typeof DONE,
+    body: {
+      text?: string;
+      question?: string;
+      approvalId?: string;
+      decision?: 'accept' | 'decline';
+    } = {},
+  ) => {
+    setError('');
+    setOutcome('');
+    try {
+      if (name === 'approve')
+        await client.tasks.approve(taskId, body.approvalId ?? '', body.decision ?? 'decline');
+      else if (name === 'ask') await client.tasks.ask(taskId, body.question ?? '');
+      else if (name === 'continue' || name === 'steer')
+        await client.tasks[name](taskId, body.text ?? '');
+      else await client.tasks[name](taskId);
+      setOutcome(DONE[name]!);
+      return true;
+    } catch (reason) {
+      setError(reasonText(reason));
+      return false;
+    }
+  };
+  return { error, outcome, setError, run };
+}
+
+export function Flash({ error, outcome }: { error: string; outcome: string }) {
+  return error ? (
+    <ErrorText value={error} />
+  ) : (
+    <span class="flash" role="status">
+      {outcome}
+    </span>
+  );
+}
+
+/** Archive, Stop while it runs, and Delete behind the ⋯ menu; phones keep Archive in the menu too, away from Stop. */
+export function TaskActions({ task, live }: { task: TaskRow; live: boolean }) {
+  const nav = useRouter();
+  const action = useAction(task.task.id);
+  const [archived, setArchived] = useState(Boolean(task.archivedAt));
+  const [deleting, setDeleting] = useState<'ask' | 'busy'>();
+
+  const remove = () => {
+    setDeleting('busy');
+    action.setError('');
+    void client.tasks
+      .delete(task.task.id)
+      .then(() => nav.push('/dash/tasks'))
+      .catch(reason => {
+        setDeleting(undefined);
+        action.setError(reasonText(reason));
+      });
+  };
+
+  const archive = () => void action.run('archive').then(setArchived);
+
+  return (
+    <>
+      <Flash {...action} />
+      {live ? (
+        <button type="button" class="btn outline" onClick={() => void action.run('cancel')}>
+          Stop
+        </button>
+      ) : archived ? null : (
+        <button type="button" class="btn outline archive" onClick={archive}>
+          Archive
+        </button>
+      )}
+      <Menu summary={<Icon d={iDots} />} summaryClass="icon-btn" label="More actions">
+        {live && !archived ? <MenuItem title="Archive" onClick={archive} /> : null}
+        <MenuItem title="Delete" danger onClick={() => setDeleting('ask')} />
+      </Menu>
+      <ConfirmDialog
+        open={Boolean(deleting)}
+        title="Delete this task?"
+        body="Its conversation, activity and diff go with it."
+        confirmLabel="Delete"
+        busy={deleting === 'busy'}
+        onConfirm={remove}
+        onClose={() => setDeleting(undefined)}
+      />
+    </>
+  );
+}
+
+export function Approval({ task }: { task: TaskRow }) {
+  const action = useAction(task.task.id);
+  const { id, action: tool, reason } = approvalParts(task.approval);
+  const decide = (decision: 'accept' | 'decline') =>
+    void action.run('approve', { approvalId: id, decision });
+  return (
+    <Card
+      tone="accent"
+      title="Approval needed"
+      actions={
+        task.task.flow === 'default' ? (
+          <>
+            <Flash {...action} />
+            <button type="button" class="btn outline sm" onClick={() => decide('decline')}>
+              Deny
+            </button>
+            <button type="button" class="btn sm" onClick={() => decide('accept')}>
+              Allow
+            </button>
+          </>
+        ) : undefined
+      }
+    >
+      <div class="body">
+        <p class="muted">The task is paused until someone decides.</p>
+        <p class="approval">
+          The agent wants to run <b>{tool ?? 'a tool'}</b>.
+        </p>
+        {reason ? <p class="muted">{reason}</p> : null}
+      </div>
+    </Card>
+  );
+}