@wular/coder 0.3.18 → 0.4.0

package/src/core/task/log-view.ts

@@ -0,0 +1,173 @@
+import type { TaskLog } from '../../client/types';
+
+export interface TaskLogEntry {
+  at?: string;
+  message?: string;
+  kind?: string;
+  [key: string]: unknown;
+}
+
+export interface TokenUsage {
+  input: number;
+  cachedInput: number;
+  output: number;
+  total: number;
+}
+
+export interface TaskDisplayRow {
+  seq: number;
+  at: number;
+  kind:
+    | 'assistant'
+    | 'tool'
+    | 'tool-result'
+    | 'approval'
+    | 'status'
+    | 'error'
+    | 'line'
+    | 'reasoning'
+    | 'steer'
+    | 'usage';
+  title: string;
+  detail?: string;
+  tone?: 'muted' | 'error' | 'warning';
+  sourceKind: string;
+  separated: boolean;
+  durationMs?: number;
+  tool?: string;
+  exitCode?: number;
+  tokens?: TokenUsage;
+}
+
+export const isApproval = (kind: string) =>
+  kind.includes('approval') || kind === 'sidecar-decision' || kind === 'auto-review';
+
+function stripCwd(text: string, cwd?: string): string {
+  return cwd ? text.split(`${cwd}/`).join('').split(cwd).join('.') : text;
+}
+
+/** Decode structured runner output without treating arbitrary JSON as an event. */
+export function logEntry(line: string): TaskLogEntry | undefined {
+  try {
+    const value: unknown = JSON.parse(line);
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      const kind = 'kind' in value && typeof value.kind === 'string' ? value.kind : undefined;
+      const message =
+        'message' in value && typeof value.message === 'string' ? value.message : undefined;
+      if (kind !== undefined || message !== undefined)
+        return {
+          ...value,
+          kind,
+          message,
+          at: 'at' in value && typeof value.at === 'string' ? value.at : undefined,
+        };
+    }
+  } catch {}
+  return undefined;
+}
+
+/** One reducer per transcript, also used by the terminal renderer. */
+export class LogView {
+  private prevKind: string | null = null;
+  private lastAssistant = '';
+  private lastTool: string | null = null;
+  private lastToolText = '';
+  private lastUsageTotal = 0;
+
+  constructor(private readonly cwd?: string) {}
+
+  get lastAssistantMessage(): string {
+    return this.lastAssistant;
+  }
+
+  reduce(record: TaskLog): TaskDisplayRow[] {
+    const entry = record.entry;
+    const sourceKind = entry ? String(entry.kind ?? 'status') : 'line';
+    const row: TaskDisplayRow = {
+      seq: record.seq,
+      at: record.at,
+      kind: 'status',
+      title: '',
+      sourceKind,
+      separated: false,
+      tone: 'muted',
+    };
+    if (!entry) {
+      row.kind = record.level === 'err' ? 'error' : record.level === 'sys' ? 'status' : 'line';
+      row.title = stripCwd(record.line, this.cwd);
+      if (record.level === 'err') row.tone = 'error';
+    } else if (sourceKind === 'usage') {
+      const tokens = entry.tokens as TokenUsage | undefined;
+      if (!tokens) return [];
+      const seeded = this.lastUsageTotal > 0;
+      const grown = tokens.total - this.lastUsageTotal;
+      if (!seeded || grown < Math.max(20_000, this.lastUsageTotal * 0.2)) {
+        this.lastUsageTotal = Math.max(this.lastUsageTotal, tokens.total);
+        return [];
+      }
+      this.lastUsageTotal = tokens.total;
+      row.kind = 'usage';
+      row.tokens = tokens;
+      row.title = `ctx ${tokenCount(tokens.input + tokens.cachedInput)} · out ${tokenCount(tokens.output)}`;
+    } else if (isApproval(sourceKind) && (entry.decision || !entry.message)) {
+      row.kind = 'approval';
+      const label =
+        sourceKind === 'sidecar-decision'
+          ? 'sidecar'
+          : sourceKind === 'auto-review'
+            ? 'auto-review'
+            : 'approval';
+      const risk = entry.riskLevel ? `(${String(entry.riskLevel)} risk)` : '';
+      const summary = stripCwd(entry.summary ? String(entry.summary) : '', this.cwd);
+      const target = summary.slice(summary.indexOf(': ') + 2);
+      const shown = summary && target && this.lastToolText.includes(target) ? '' : summary;
+      const method = shown ? '' : String(entry.method ?? '');
+      row.title = `${[label, String(entry.decision ?? ''), risk, method].filter(Boolean).join(' ')}${shown ? ` · ${shown}` : ''}`;
+      row.detail = stripCwd(entry.reason ? String(entry.reason) : '', this.cwd);
+    } else {
+      const raw = entry.message ? String(entry.message) : String(entry.kind ?? '');
+      if (!raw && !(sourceKind === 'tool-result' && (entry.exitCode != null || entry.isError)))
+        return [];
+      row.title = stripCwd(raw, this.cwd);
+      if (sourceKind === 'assistant') {
+        row.kind = 'assistant';
+        row.tone = undefined;
+        this.lastAssistant = row.title;
+      } else if (sourceKind === 'error' || sourceKind === 'steer') {
+        row.kind = sourceKind;
+        row.tone = sourceKind === 'error' ? 'error' : 'warning';
+      } else if (sourceKind === 'reasoning') {
+        row.kind = 'reasoning';
+        row.durationMs = typeof entry.durationMs === 'number' ? entry.durationMs : 0;
+      } else if (sourceKind === 'tool') {
+        row.kind = 'tool';
+        this.lastTool = entry.tool ? String(entry.tool) : null;
+        this.lastToolText = row.title;
+      } else if (sourceKind === 'tool-result') {
+        row.kind = 'tool-result';
+        row.exitCode = typeof entry.exitCode === 'number' ? entry.exitCode : undefined;
+        row.tone =
+          (row.exitCode !== undefined && row.exitCode !== 0) || entry.isError === true
+            ? 'error'
+            : 'muted';
+        row.durationMs = typeof entry.durationMs === 'number' ? entry.durationMs : 0;
+        const tool = entry.tool ? String(entry.tool) : null;
+        if (tool && tool !== this.lastTool) row.tool = tool;
+      }
+    }
+    if (this.prevKind !== null) {
+      row.separated =
+        ['assistant', 'error', 'steer'].includes(sourceKind) ||
+        (sourceKind === 'reasoning' && this.prevKind !== 'reasoning') ||
+        (sourceKind === 'tool' && ['assistant', 'reasoning'].includes(this.prevKind));
+    }
+    this.prevKind = sourceKind;
+    return [row];
+  }
+}
+
+function tokenCount(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
+  return `${(n / 1_000_000).toFixed(1)}M`;
+}

package/src/server/auth/sign-in.ts

@@ -0,0 +1,14 @@
+/** Prefix of Coder's cookies, so another app on the host never collides. */
+export const COOKIE_PREFIX = 'coder';
+
+export function safeReturnPath(candidate: string | null, origin: string): string {
+  const value = candidate ?? '/dash';
+  try {
+    const target = new URL(value, origin);
+    return target.origin === origin && !value.includes('\\') && !/^\/[/\\]/.test(target.pathname)
+      ? `${target.pathname}${target.search}${target.hash}`
+      : '/dash';
+  } catch {
+    return '/dash';
+  }
+}

package/src/server/dash/api/load.ts

@@ -0,0 +1,62 @@
+import { ServerClient, ClientError } from '@coder/client';
+import { CoderError } from '@coder/core/errors';
+import type { StoredRow } from '@coder/client/types';
+
+declare global {
+  var __coder: { handle(request: Request): Promise<Response> } | undefined;
+}
+
+export function encodeDefinition(definition: unknown): string {
+  return Buffer.from(JSON.stringify(definition), 'utf8').toString('base64url');
+}
+
+const clientKey = Symbol('coder.dashboard.client');
+type RenderRequest = Request & { [clientKey]?: ServerClient };
+
+/** One client per render request, with shared in-process GETs and the caller's cookie and scope. */
+export function load(request: Request): ServerClient {
+  const render = request as RenderRequest;
+  let client = render[clientKey];
+  if (client) return client;
+  const reads = new Map<string, Promise<Response>>();
+  client = new ServerClient(
+    '',
+    { cookie: true },
+    {
+      fetch: async (input, init) => {
+        const handle = globalThis.__coder?.handle;
+        if (!handle)
+          throw new CoderError('server', 'Dashboard server is not ready.', { status: 503 });
+        const url = new URL(String(input), request.url).href;
+        const headers = new Headers(init?.headers);
+        headers.set('cookie', request.headers.get('cookie') ?? '');
+        const scope = request.headers.get('x-coder-request-scope');
+        if (scope) headers.set('x-coder-request-scope', scope);
+        const read = !init?.method || init.method === 'GET';
+        let pending = read ? reads.get(url) : undefined;
+        if (!pending) {
+          pending = handle(new Request(url, { ...init, headers }));
+          if (read) reads.set(url, pending);
+          pending.catch(error =>
+            console.error(`dashboard load failed: ${init?.method ?? 'GET'} ${url}`, error),
+          );
+        }
+        return (await pending).clone();
+      },
+    },
+  );
+  render[clientKey] = client;
+  return client;
+}
+
+export const signedOut = (error: unknown) =>
+  error instanceof ClientError &&
+  error.status === 401 &&
+  !/^Bearer(?:\s|$)/i.test(error.authenticate ?? '');
+
+export const unwrap = <T>(rows: Array<StoredRow<T>>) => rows.map(row => row.value);
+export function loadAgent(request: Request, slug: string) {
+  const path = new URL(request.url).pathname;
+  const content = path === `/dash/agents/${encodeURIComponent(slug)}` || path.endsWith('/edit');
+  return load(request).agents.get(slug, { versions: false, content });
+}

package/src/server/dash/api/types.ts

@@ -0,0 +1,11 @@
+import type { Me, AgentRow } from '@coder/client/types';
+
+/** A server on this machine, using its own engine logins and config. */
+export const localServer = (me: Me) => me.mode === 'local';
+
+/** A server on this machine that platforms cannot reach yet: no public PUBLIC_URL. */
+export const needsTunnel = (me: Me) =>
+  localServer(me) && !/^https:\/\/(?!localhost|127\.|\[::1\])/.test(me.server?.url ?? '');
+
+export const editableAgent = (agent: Pick<AgentRow, 'source' | 'local'>) =>
+  agent.source === 'upload' || agent.source === 'home' || (agent.local && agent.source === 'repo');

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { ErrorText } from '@/comps/ui/field';
+import { client } from '@/utils/client';
+import { reasonText } from '@/utils/format';
+import { AuthPanel } from '@/comps/frame/auth-panel';
+
+export default function LinkPage() {
+  const [error, setError] = useState('');
+  const [done, setDone] = useState('');
+  const token =
+    typeof location === 'undefined'
+      ? ''
+      : (new URLSearchParams(location.search).get('token') ?? '');
+  return (
+    <AuthPanel
+      tag="connect"
+      title="Connect your account"
+      lead={done || 'Link this platform identity to your signed-in Coder account.'}
+    >
+      {done ? null : (
+        <button
+          type="button"
+          class="btn wide"
+          onClick={() =>
+            void client
+              .linkAccount(token)
+              .then(result =>
+                setDone(`${result.platform} account ${result.platformUserId} is connected.`),
+              )
+              .catch(reason => setError(reasonText(reason)))
+          }
+        >
+          Connect
+        </button>
+      )}
+      <ErrorText value={error} />
+    </AuthPanel>
+  );
+}

package/src/server/dash/app/dash/account/loading.tsx

@@ -0,0 +1,11 @@
+import { Loading } from '@/comps/ui/card';
+import { Page, PageHead } from '@/comps/frame/page-head';
+
+export default function AccountLoading() {
+  return (
+    <Page>
+      <PageHead title="Account" lead={' '} />
+      <Loading label="Loading account" />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/account/notify.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'preact/hooks';
+
+import { NOTIFY } from '@/comps/frame/task-toasts';
+
+/** Browser notifications for watched tasks, off until asked for; the permission prompt shows once. */
+export function NotifySwitch() {
+  const [on, setOn] = useState(false);
+  const [blocked, setBlocked] = useState(false);
+
+  useEffect(() => {
+    if (typeof Notification === 'undefined') return setBlocked(true);
+    setBlocked(Notification.permission === 'denied');
+    setOn(localStorage.getItem(NOTIFY) === '1' && Notification.permission === 'granted');
+  }, []);
+
+  const toggle = async (input: HTMLInputElement) => {
+    if (input.checked && Notification.permission === 'default')
+      await Notification.requestPermission();
+    const next = input.checked && Notification.permission === 'granted';
+    if (next) localStorage.setItem(NOTIFY, '1');
+    else localStorage.removeItem(NOTIFY);
+    input.checked = next;
+    setOn(next);
+    setBlocked(Notification.permission === 'denied');
+  };
+
+  return (
+    <label class="notify">
+      <input
+        type="checkbox"
+        role="switch"
+        class="switch"
+        checked={on}
+        disabled={blocked}
+        onChange={event => void toggle(event.currentTarget)}
+      />
+      {blocked ? 'Notifications are blocked in this browser' : 'Notify me when a task finishes'}
+    </label>
+  );
+}

package/src/server/dash/app/dash/account/page.css

@@ -0,0 +1,81 @@
+/* account sheet and people */
+.sheet > div {
+  display: grid;
+  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
+  gap: 24px;
+  padding: 20px;
+  border-top: 1px solid var(--line);
+}
+.sheet > div:first-child {
+  border-top: 0;
+}
+.sheet .label b {
+  display: block;
+  font-size: 10.5px;
+  font-weight: 500;
+}
+.sheet .label span {
+  display: block;
+  margin-top: 6px;
+  color: var(--muted);
+}
+.sheet .value {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.sheet .value b,
+.sheet .value .muted {
+  display: block;
+}
+.sheet .notify {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+.sheet input.switch {
+  appearance: none;
+  position: relative;
+  flex: none;
+  width: 30px;
+  height: 18px;
+  margin: 0;
+  border: 1px solid var(--line2);
+  background: var(--wash2);
+  cursor: pointer;
+}
+.sheet input.switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  background: var(--muted);
+  transition: transform 0.15s;
+}
+.sheet input.switch:checked {
+  border-color: var(--deep);
+  background: var(--deep);
+}
+.sheet input.switch:checked::after {
+  transform: translateX(12px);
+  background: #fff;
+}
+.sheet input.switch:focus-visible {
+  outline: 2px solid var(--acc);
+  outline-offset: 2px;
+}
+.sheet input.switch:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+@media (max-width: 760px) {
+  .sheet > div {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+  }
+}

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

@@ -0,0 +1,126 @@
+import './page.css';
+import type { ComponentChildren } from 'preact';
+
+import { iKey } from '@/comps/ui/icons';
+import { load } from '@/api/load';
+import { initial, reasonText } from '@/utils/format';
+import { Badge } from '@/comps/ui/badge';
+import { SignOut } from '@/app/dash/account/sign-out';
+import { Page, PageHead } from '@/comps/frame/page-head';
+import { Icon } from '@/comps/ui/icon';
+import { Card } from '@/comps/ui/card';
+import { NotifySwitch } from './notify';
+
+function Row({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <div>
+      <div class="label">
+        <b>{label}</b>
+        <span>{hint}</span>
+      </div>
+      <div class="value">{children}</div>
+    </div>
+  );
+}
+
+export default async function AccountPage({ request }: { request?: Request }) {
+  if (!request) return null;
+  try {
+    const me = await load(request).me();
+    const tokenMode = !me.user;
+    const local = me.mode === 'local';
+    const organization = me.organization;
+    const name = organization?.name ?? organization?.slug ?? 'Local server';
+
+    return (
+      <Page>
+        <PageHead
+          title="Account"
+          lead={
+            tokenMode
+              ? `This ${local ? 'local' : 'memory'} server keeps no accounts. The admin token is its only key.`
+              : 'Who you are on this server and which workspace you act in.'
+          }
+        />
+        <div class="sheet frame">
+          <Row
+            label={tokenMode ? 'Access' : 'Profile'}
+            hint={
+              tokenMode
+                ? 'Accepted from loopback only, kept in a cookie.'
+                : 'From the account you signed in with.'
+            }
+          >
+            <span class="avatar">{me.user ? initial(me.user.name) : <Icon d={iKey} />}</span>
+            <div class="grow">
+              <b>{me.user ? me.user.name : 'Admin token'}</b>
+              <span class="muted">
+                {me.user ? me.user.email : local ? 'Local server' : 'Local memory server'}
+              </span>
+            </div>
+          </Row>
+          {local ? null : (
+            <Row
+              label="Workspace"
+              hint="Agents, credentials, and tasks belong to it. Switch it from the menu at the top right."
+            >
+              <span class="avatar">{initial(name)}</span>
+              <div class="grow">
+                <b>{name}</b>
+                {organization?.slug && organization.slug !== name ? (
+                  <span class="muted">{organization.slug}</span>
+                ) : null}
+              </div>
+              {organization?.role ? <Badge>{organization.role}</Badge> : null}
+            </Row>
+          )}
+          <Row
+            label="Notifications"
+            hint="Toasts show in the dashboard either way. This also uses your browser's notifications."
+          >
+            <NotifySwitch />
+          </Row>
+          <Row
+            label="Session"
+            hint={
+              tokenMode
+                ? 'Forgetting the token signs this browser out until it is entered again.'
+                : 'Signing out ends this browser session only.'
+            }
+          >
+            {tokenMode ? (
+              <form action="/dash/token" method="post">
+                <input type="hidden" name="token" value="" />
+                <input type="hidden" name="return" value="/dash" />
+                <button class="btn outline">Forget token</button>
+              </form>
+            ) : (
+              <SignOut class="btn secondary-danger">Sign out</SignOut>
+            )}
+          </Row>
+        </div>
+      </Page>
+    );
+  } catch (error) {
+    return <LoadFailure error={error} />;
+  }
+}
+
+function LoadFailure({ error }: { error: unknown }) {
+  return (
+    <Page>
+      <PageHead title="Could not load this page" />
+      <Card tone="danger">
+        <p class="body prose">{reasonText(error)}</p>
+      </Card>
+    </Page>
+  );
+}

package/src/server/dash/app/dash/account/sign-out.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { ComponentChildren } from 'preact';
+
+import { signOut } from '@/utils/client';
+import { iOut } from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+
+export function SignOut({
+  class: cls,
+  icon,
+  children,
+}: {
+  class: string;
+  icon?: boolean;
+  children: ComponentChildren;
+}) {
+  return (
+    <button type="button" class={cls} onClick={() => void signOut().catch(() => location.reload())}>
+      {icon ? <Icon d={iOut} /> : null}
+      {children}
+    </button>
+  );
+}

package/src/server/dash/app/dash/agents/(list)/agent-menu.tsx

@@ -0,0 +1,10 @@
+import { Link } from '@wular/pnext/link';
+
+/** Make a dashboard agent; importing from a repository starts from the same page. */
+export function NewAgentMenu() {
+  return (
+    <Link class="btn" href="/dash/agents/new">
+      New agent
+    </Link>
+  );
+}