@wular/coder 0.4.3 → 0.4.5

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

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

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

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

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

@@ -1,247 +0,0 @@
-'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.result?.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;
-}
-
-/** A call's or approval's outcome on the right: a spinner and the time so far, then ✓ or ✗ and how long it took. */
-function CallState({ row, running }: { row: TaskDisplayRow; running: boolean }) {
-  const [, tick] = useReducer((n: number) => n + 1, 0);
-  useEffect(() => {
-    if (!running) return;
-    const timer = setInterval(() => tick(0), 1000);
-    return () => clearInterval(timer);
-  }, [running]);
-  const result = row.result;
-  const took = running ? Math.max(0, Date.now() - row.at) : result?.durationMs;
-  const text = [
-    row.state,
-    result && !result.ok && result.exitCode !== undefined ? `exit ${result.exitCode}` : '',
-    took ? formatDuration(took) : '',
-  ]
-    .filter(Boolean)
-    .join(' · ');
-
-  return (
-    <span class={`act-state${result && !result.ok ? ' bad' : ''}`}>
-      {running ? <i class="spin" /> : result ? <Icon d={result.ok ? iCheck : iX} /> : null}
-      {text}
-    </span>
-  );
-}
-
-function Row({
-  row,
-  tz,
-  open,
-  running,
-  onToggle,
-}: {
-  row: TaskDisplayRow;
-  tz: string;
-  open: boolean;
-  running: 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 timed = row.kind === 'tool' || row.state !== undefined;
-  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' : ''}${timed ? ' timed' : ''}${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.kind === 'tool' && row.tool && row.title.startsWith(`${row.tool} `) ? (
-            <>
-              <span class="act-tool">{row.tool}</span>
-              {row.title.slice(row.tool.length)}
-            </>
-          ) : (
-            row.title
-          )}
-        </span>
-        {extra ? <span class="act-detail">{extra}</span> : null}
-        {row.detail && (open || !row.state) ? <span class="act-detail">{row.detail}</span> : null}
-        {open && row.result?.detail ? <span class="act-detail">{row.result.detail}</span> : null}
-      </span>
-      {timed ? <CallState row={row} running={running} /> : null}
-      {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);
-  // Calls the agent has moved on from without a result are not still running.
-  const settled = rows.findLastIndex(row => row.kind === 'assistant' || row.kind === 'reasoning');
-
-  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)}
-                running={
-                  live &&
-                  !row.result &&
-                  (row.state !== undefined || (row.kind === 'tool' && item.index > settled))
-                }
-                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

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

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

@@ -1,201 +0,0 @@
-'use client';
-
-import { useEffect, 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';
-import { showToast, toastError } from '@/comps/frame/task-toasts';
-
-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="Copy task id"
-          onClick={() =>
-            void navigator.clipboard
-              .writeText(task.task.id)
-              .then(() => showToast('Copied', task.task.id))
-          }
-        />
-        <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 [busy, setBusy] = useState<'accept' | 'decline'>();
-  // A sent decision hides its card at once; the events stream catches up after.
-  const [decided, setDecided] = useState<string>();
-  const { id, action: tool, reason } = approvalParts(task.approval);
-
-  const decide = async (decision: 'accept' | 'decline') => {
-    setBusy(decision);
-    const ok = await action.run('approve', { approvalId: id, decision });
-    setBusy(undefined);
-    if (!ok) return;
-    setDecided(id);
-    showToast(decision === 'accept' ? 'Allowed' : 'Denied', 'The task continues.');
-  };
-
-  useEffect(() => {
-    if (action.error) toastError('Not sent', action.error);
-  }, [action.error]);
-
-  if (id && decided === id) return null;
-
-  return (
-    <Card
-      tone="accent"
-      title="Approval needed"
-      actions={
-        task.task.flow === 'default' ? (
-          <>
-            <button
-              type="button"
-              class="btn outline sm"
-              disabled={Boolean(busy)}
-              aria-busy={busy === 'decline'}
-              onClick={() => void decide('decline')}
-            >
-              Deny
-            </button>
-            <button
-              type="button"
-              class="btn sm"
-              disabled={Boolean(busy)}
-              aria-busy={busy === 'accept'}
-              onClick={() => void 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>
-  );
-}