@wular/coder 0.4.1 → 0.4.3

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

@@ -37,12 +37,16 @@ export interface TaskDisplayRow {
   tool?: string;
   exitCode?: number;
   tokens?: TokenUsage;
+  result?: { ok: boolean; exitCode?: number; durationMs: number; detail: string };
+  state?: string;
 }
 
 export const isApproval = (kind: string) =>
   kind.includes('approval') || kind === 'sidecar-decision' || kind === 'auto-review';
 
-function stripCwd(text: string, cwd?: string): string {
+const ANSI = /\x1b\[[0-9;?]*[ -/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g;
+
+export function stripCwd(text: string, cwd?: string): string {
   return cwd ? text.split(`${cwd}/`).join('').split(cwd).join('.') : text;
 }
 
@@ -70,19 +74,38 @@ export function logEntry(line: string): TaskLogEntry | undefined {
 export class LogView {
   private prevKind: string | null = null;
   private lastAssistant = '';
-  private lastTool: string | null = null;
   private lastToolText = '';
+  private openCalls: TaskDisplayRow[] = [];
+  // Engine invocation ids, so concurrent calls of one tool close with their own results.
+  private callIds = new WeakMap<TaskDisplayRow, string>();
+  private approval: TaskDisplayRow | undefined;
+  private approvals = new Map<string, TaskDisplayRow>();
   private lastUsageTotal = 0;
 
-  constructor(private readonly cwd?: string) {}
+  constructor(
+    private readonly cwd?: string,
+    private readonly opts: { keepAnsi?: boolean } = {},
+  ) {}
 
   get lastAssistantMessage(): string {
     return this.lastAssistant;
   }
 
+  /** A result or verdict that completes an earlier call or approval returns that row again, keyed by its seq. */
   reduce(record: TaskLog): TaskDisplayRow[] {
     const entry = record.entry;
     const sourceKind = entry ? String(entry.kind ?? 'status') : 'line';
+    const earlier = !entry
+      ? undefined
+      : sourceKind === 'tool-result'
+        ? this.close(record, entry)
+        : isApproval(sourceKind)
+          ? this.decide(record, entry, sourceKind)
+          : undefined;
+    if (earlier) {
+      this.prevKind = sourceKind;
+      return [earlier];
+    }
     const row: TaskDisplayRow = {
       seq: record.seq,
       at: record.at,
@@ -109,6 +132,25 @@ export class LogView {
       row.kind = 'usage';
       row.tokens = tokens;
       row.title = `ctx ${tokenCount(tokens.input + tokens.cachedInput)} · out ${tokenCount(tokens.output)}`;
+    } else if (
+      (sourceKind === 'approval-decision' && entry.decision === 'escalate') ||
+      sourceKind === 'approval-escalated'
+    ) {
+      const summary = stripCwd(entry.summary ? String(entry.summary) : '', this.cwd);
+      const target =
+        /^(?:run command: |Run command\. |Apply file changes\. |\w+: )?([\s\S]*)$/.exec(
+          summary,
+        )![1]!;
+      const method = String(entry.method ?? '');
+      const name = method && !method.includes('/') ? method : this.openCalls.at(-1)?.tool;
+      const word = target.startsWith('{') ? '' : target.split(/\s+/)[0];
+      const reason = stripCwd(entry.reason ? String(entry.reason) : '', this.cwd);
+      row.kind = 'approval';
+      row.title = ['Approval', [name, word].filter(Boolean).join(' ')].filter(Boolean).join(' · ');
+      row.detail = [target, reason && `Policy · ${reason}`].filter(Boolean).join('\n');
+      row.state = sourceKind === 'approval-escalated' ? 'waiting' : 'escalated';
+      if (sourceKind === 'approval-escalated') this.approvals.set(String(entry.approvalId), row);
+      else this.approval = row;
     } else if (isApproval(sourceKind) && (entry.decision || !entry.message)) {
       row.kind = 'approval';
       const label =
@@ -141,18 +183,20 @@ export class LogView {
         row.durationMs = typeof entry.durationMs === 'number' ? entry.durationMs : 0;
       } else if (sourceKind === 'tool') {
         row.kind = 'tool';
-        this.lastTool = entry.tool ? String(entry.tool) : null;
+        if (entry.tool) row.tool = String(entry.tool);
         this.lastToolText = row.title;
+        if (entry.callId) this.callIds.set(row, String(entry.callId));
+        this.openCalls.push(row);
       } else if (sourceKind === 'tool-result') {
         row.kind = 'tool-result';
+        row.title = this.output(raw);
         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 (entry.tool) row.tool = String(entry.tool);
       }
     }
     if (this.prevKind !== null) {
@@ -164,6 +208,76 @@ export class LogView {
     this.prevKind = sourceKind;
     return [row];
   }
+
+  // A result closes the call with its invocation id; without one, the oldest open call of its tool, or the latest call.
+  private close(record: TaskLog, entry: TaskLogEntry): TaskDisplayRow | undefined {
+    const tool = entry.tool ? String(entry.tool) : undefined;
+    const byId = entry.callId
+      ? this.openCalls.findIndex(call => this.callIds.get(call) === String(entry.callId))
+      : -1;
+    const index =
+      byId >= 0
+        ? byId
+        : tool
+          ? this.openCalls.findIndex(call => call.tool === tool)
+          : this.openCalls.length - 1;
+    if (index < 0) return undefined;
+
+    const [call] = this.openCalls.splice(index, 1);
+    const exitCode = typeof entry.exitCode === 'number' ? entry.exitCode : undefined;
+    const durationMs =
+      typeof entry.durationMs === 'number' ? entry.durationMs : record.at - call!.at || 0;
+    return {
+      ...call!,
+      result: {
+        ok: !exitCode && entry.isError !== true,
+        exitCode,
+        durationMs: Math.max(0, durationMs),
+        detail: this.output(entry.message ? String(entry.message) : ''),
+      },
+    };
+  }
+
+  // Sidecar verdicts and escalations follow the policy verdict before them; answers carry the approval id.
+  private decide(record: TaskLog, entry: TaskLogEntry, kind: string): TaskDisplayRow | undefined {
+    const id = String(entry.approvalId ?? '');
+    const accepted = entry.decision === 'accept';
+    if (kind === 'sidecar-decision' && this.approval) {
+      const reason = stripCwd(entry.reason ? String(entry.reason) : '', this.cwd);
+      const row = {
+        ...this.approval,
+        detail: [this.approval.detail, reason && `Sidecar · ${reason}`].filter(Boolean).join('\n'),
+      };
+      if (entry.decision === 'escalate') return (this.approval = row);
+      this.approval = undefined;
+      return settle(row, record, `${accepted ? 'accepted' : 'denied'} by sidecar`, accepted);
+    }
+    if (kind === 'approval-escalated' && this.approval) {
+      const row = { ...this.approval, state: 'waiting' };
+      this.approval = undefined;
+      this.approvals.set(id, row);
+      return row;
+    }
+    const open = this.approvals.get(id);
+    if (!open || (kind !== 'approval-answered' && kind !== 'approval-timeout')) return undefined;
+
+    this.approvals.delete(id);
+    return kind === 'approval-timeout'
+      ? settle(open, record, 'timed out', false)
+      : settle(open, record, `${accepted ? 'accepted' : 'denied'} by reviewer`, accepted);
+  }
+
+  private output(text: string): string {
+    return stripCwd(this.opts.keepAnsi ? text : text.replace(ANSI, ''), this.cwd);
+  }
+}
+
+function settle(row: TaskDisplayRow, record: TaskLog, state: string, ok: boolean): TaskDisplayRow {
+  return {
+    ...row,
+    state,
+    result: { ok, durationMs: Math.max(0, record.at - row.at || 0), detail: '' },
+  };
 }
 
 function tokenCount(n: number): string {

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

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

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

@@ -9,8 +9,7 @@ import type { AgentCardRow, IntegrationInfo, Paged } from '@coder/client/types';
 import { Empty } from '@/comps/ui/card';
 import { initial } from '@/utils/format';
 import { AgentPills, BrandIcon, Platform } from '@/app/dash/agents/agent/agent-pills';
-import { Menu, MenuRadio } from '@/comps/ui/menu';
-import { Icon } from '@/comps/ui/icon';
+import { Filter } from '@/comps/ui/filter';
 import { NewAgentMenu } from './agent-menu';
 import { Search, Toolbar, queryOf, useFilters } from '@/comps/ui/toolbar';
 import { Tail } from '@/comps/ui/tail';
@@ -93,39 +92,23 @@ export function AgentsGrid({
     <>
       <Toolbar head={head} action={<NewAgentMenu />}>
         <Search value={values.q} label="Search agents" onInput={value => set('q', value, 250)} />
-        <Menu
-          class="filter-more"
-          label="More filters"
-          summaryClass={`field-btn${values.platform || values.type ? ' on' : ''}`}
-          summary="Filter"
-        >
-          <p class="pop-label">Platform</p>
-          <div role="group" aria-label="Platform">
-            <MenuRadio on={!values.platform} onPick={() => set('platform', '')}>
-              All platforms
-            </MenuRadio>
-            {catalog.map(entry => (
-              <MenuRadio
-                key={entry.id}
-                on={values.platform === entry.id}
-                onPick={() => set('platform', entry.id)}
-              >
-                <span class="pf">
-                  <BrandIcon brand={entry.brand} />
-                  {entry.name}
-                </span>
-              </MenuRadio>
-            ))}
-          </div>
-          <p class="pop-label">Source</p>
-          <div role="group" aria-label="Source">
-            {KINDS.map(([value, label]) => (
-              <MenuRadio key={value} on={values.type === value} onPick={() => set('type', value)}>
-                {label}
-              </MenuRadio>
-            ))}
-          </div>
-        </Menu>
+        <Filter
+          name="agents"
+          facets={[
+            {
+              key: 'platform',
+              label: 'Platform',
+              options: catalog.map((entry): [string, string] => [entry.id, entry.name]),
+              icon: value => {
+                const entry = catalog.find(item => item.id === value);
+                return entry ? <BrandIcon brand={entry.brand} /> : undefined;
+              },
+            },
+            { key: 'type', label: 'Source', options: KINDS },
+          ]}
+          values={values}
+          onChange={set}
+        />
       </Toolbar>
       {children}
       {list.rows.length ? (

package/src/server/dash/app/dash/agents/(list)/loading.tsx

@@ -1,4 +1,5 @@
 import { HEADS } from '@/comps/frame/heads';
+import { iAgent } from '@/comps/ui/icons';
 import { Page } from '@/comps/frame/page-head';
 import { LoadingToolbar } from '@/comps/frame/loading-card';
 import { Loading } from '@/comps/ui/card';
@@ -7,7 +8,12 @@ import { Loading } from '@/comps/ui/card';
 export default function AgentsLoading() {
   return (
     <Page>
-      <LoadingToolbar head={HEADS.agents} search="Search agents" more action="New agent" />
+      <LoadingToolbar
+        head={HEADS.agents}
+        search="Search agents"
+        more
+        action={{ label: 'New agent', icon: iAgent }}
+      />
       <Loading label="Loading agents" />
     </Page>
   );

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

@@ -1,7 +1,7 @@
 import type { ComponentChildren } from 'preact';
 import { dynamic } from '@wular/pnext/dynamic';
 
-import { iGit, iPencil } from '@/comps/ui/icons';
+import { iGit, iPencil, iPlus } from '@/comps/ui/icons';
 import { Link } from '@wular/pnext/link';
 import { load } from '@/api/load';
 import type { AgentRow, TasksPage } from '@coder/client/types';
@@ -56,6 +56,7 @@ function LoadingAgentHead({ back }: { back: ComponentChildren }) {
         back={back}
         actions={
           <button type="button" class="btn" disabled>
+            <Icon d={iPlus} />
             New task
           </button>
         }

package/src/server/dash/app/dash/layout.css

@@ -40,7 +40,7 @@
 .side {
   position: sticky;
   top: 56px;
-  z-index: 5;
+  z-index: 12;
   height: calc(100vh - 56px);
   display: flex;
   flex-direction: column;
@@ -248,6 +248,63 @@
 .side-min .side nav .n {
   display: none;
 }
+/* collapsed icons and the sidebar toggle name themselves on hover and keyboard focus */
+.side-min .side [data-tip],
+.side-toggle {
+  position: relative;
+}
+.side-min .side [data-tip]::after,
+.side-toggle::after {
+  content: attr(data-tip) / '';
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 12px);
+  z-index: 30;
+  padding: 6px 10px;
+  border: 1px solid var(--line2);
+  background: var(--tile);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  color: var(--fg);
+  font-size: 12px;
+  letter-spacing: normal;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+/* a small arrow on the tooltip's edge, pointing back at the icon */
+.side-min .side [data-tip]::before,
+.side-toggle::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 8px);
+  z-index: 31;
+  width: 8px;
+  height: 8px;
+  border-bottom: 1px solid var(--line2);
+  border-left: 1px solid var(--line2);
+  background: var(--tile);
+  transform: translateY(-50%) rotate(45deg);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.side-min .side [data-tip]:is(:hover, :focus-visible)::before,
+.side-min .side [data-tip]:is(:hover, :focus-visible)::after,
+.side-toggle:is(:hover, :focus-visible)::before,
+.side-toggle:is(:hover, :focus-visible)::after {
+  opacity: 1;
+}
+.side-toggle:is(:hover, :focus-visible)::before,
+.side-toggle:is(:hover, :focus-visible)::after {
+  transition-delay: 0.7s;
+}
+.side-min .menu:has(:popover-open) > [data-tip]::before,
+.side-min .menu:has(:popover-open) > [data-tip]::after {
+  opacity: 0;
+}
 .side-min .server > button {
   justify-content: center;
   padding: 10px 0;

package/src/server/dash/app/dash/layout.tsx

@@ -31,7 +31,6 @@ import { Drawer } from '@/comps/frame/drawer';
 import { SignOut } from '@/app/dash/account/sign-out';
 import { CurrentLink } from '@/comps/nav/current-link';
 import { SideToggle } from '@/comps/nav/side-toggle';
-import { TokenFromHash } from './token-from-hash';
 import type { To } from '@/comps/nav/to';
 import { Menu } from '@/comps/ui/menu';
 import { TaskToasts } from '@/comps/frame/task-toasts';
@@ -170,17 +169,19 @@ function ServerMenu({ me, host }: { me?: Me; host: string }) {
   const memory = !me?.user;
   const local = me?.mode === 'local';
   const url = me?.server?.url ?? `https://${host}`;
+  const name = local ? 'Local server' : memory ? 'Memory server' : 'Cloud server';
 
   return (
     <Menu
       class="server"
       align="up"
       label="Server"
+      tip={name}
       summary={
         <>
           <i class={memory && !local ? 'dot' : 'dot ok'} />
           <span class="grow" title={`${me?.server?.name ?? 'Coder'} · ${new URL(url).host}`}>
-            {local ? 'Local server' : memory ? 'Memory server' : 'Cloud server'}
+            {name}
           </span>
           <Icon d={iUpdown} />
         </>
@@ -212,6 +213,26 @@ async function ActiveCount({ count }: { count: Promise<TasksPage> }) {
   ) : null;
 }
 
+// Without a saved choice, mid-width screens start with the sidebar collapsed, before first paint.
+const SIDE_AUTO = `(() => {
+  const app = document.currentScript.parentElement;
+  const mid = matchMedia('(min-width: 761px) and (max-width: 1279px)');
+  const sync = () => /(?:^|; )side=/.test(document.cookie) || app.classList.toggle('side-min', mid.matches);
+  sync();
+  mid.addEventListener('change', sync);
+})()`;
+
+// `serve` opens /dash#token=…: the fragment never reaches the server, so the form posts it while the page loads, busy from first paint.
+const TOKEN_FROM_HASH = `(() => {
+  const token = /(?:^|&)token=([^&]+)/.exec(location.hash.slice(1))?.[1];
+  if (!token) return;
+  history.replaceState(null, '', location.pathname + location.search);
+  const form = document.getElementById('token-form');
+  form.elements.token.value = decodeURIComponent(token);
+  form.querySelector('button').setAttribute('aria-busy', 'true');
+  form.submit();
+})();`;
+
 function TokenPage({ request }: { request: Request }) {
   const url = new URL(request.url);
   const rejected = url.searchParams.get('token') === 'rejected';
@@ -238,7 +259,7 @@ function TokenPage({ request }: { request: Request }) {
           </p>
         ) : null}
       </form>
-      <TokenFromHash />
+      <script dangerouslySetInnerHTML={{ __html: TOKEN_FROM_HASH }} />
     </AuthPanel>
   );
 }
@@ -284,10 +305,11 @@ export default function DashLayout({
   const { pathname, host } = new URL(request.url);
   const me = load(request).me();
   const active = load(request).tasks.list({ cursor: '', limit: 1, summary: true, counts: true });
-  const collapsed = /(?:^|; )side=min(?:;|$)/.test(request.headers.get('cookie') ?? '');
+  const side = /(?:^|; )side=(min|max)(?:;|$)/.exec(request.headers.get('cookie') ?? '')?.[1];
 
   return (
-    <div class={collapsed ? 'app side-min' : 'app'}>
+    <div class={side === 'min' ? 'app side-min' : 'app'}>
+      {side ? null : <script dangerouslySetInnerHTML={{ __html: SIDE_AUTO }} />}
       <header class="top">
         <div class="top-l">
           <Drawer />
@@ -307,7 +329,7 @@ export default function DashLayout({
         <nav aria-label="Dashboard">
           {navFor(request.headers.get('x-coder-mode') === 'local').map(
             ({ within, label, icon, ...to }) => (
-              <CurrentLink key={within} {...to} within={within} title={label}>
+              <CurrentLink key={within} {...to} within={within} data-tip={label}>
                 <Icon d={icon} />
                 {label}
                 {label === 'Tasks' ? (
@@ -320,7 +342,7 @@ export default function DashLayout({
           )}
         </nav>
         <div class="side-foot">
-          <SideToggle collapsed={collapsed} />
+          <SideToggle collapsed={side === 'min'} />
           <WithMe me={me}>{who => <ServerMenu me={who} host={host} />}</WithMe>
         </div>
       </aside>

package/src/server/dash/app/dash/settings/[tab]/credentials-list.tsx

@@ -4,7 +4,7 @@ import './credentials-list.css';
 
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { client } from '@/utils/client';
+import { client, poll } from '@/utils/client';
 import { iCheck, iCopy, iDots } from '@/comps/ui/icons';
 import { useRouter } from '@wular/pnext/navigation/client';
 import type { CredentialRow, EngineStatus, Me } from '@coder/client/types';
@@ -336,23 +336,30 @@ export function EngineLogins({ status: initial }: { status: EngineStatus }) {
   const [status, setStatus] = useState(initial);
   const [busy, setBusy] = useState('');
   const [error, setError] = useState('');
-  const waiting = useRef<ReturnType<typeof setInterval>>();
+  const waiting = useRef<() => void>();
 
   // A sign-in finishes in the browser the engine opened; the status says when.
   const watch = (engine: string) => {
-    clearInterval(waiting.current);
+    waiting.current?.();
     const until = Date.now() + 5 * 60_000;
-    waiting.current = setInterval(() => {
-      void client.engines.status().then(next => {
-        setStatus(next);
-        if (next[engine as 'claude' | 'codex']?.signedIn || Date.now() > until) {
-          clearInterval(waiting.current);
-          setBusy('');
-        }
-      });
+    // A status read from a sign-in already stopped never stops the next one.
+    let current = true;
+    const stopPoll = poll(async () => {
+      const next = await client.engines.status();
+      if (!current) return;
+      setStatus(next);
+      if (next[engine as 'claude' | 'codex']?.signedIn || Date.now() > until) {
+        stop();
+        setBusy('');
+      }
     }, 2000);
+    const stop = () => {
+      current = false;
+      stopPoll();
+    };
+    waiting.current = stop;
   };
-  useEffect(() => () => clearInterval(waiting.current), []);
+  useEffect(() => () => waiting.current?.(), []);
   const act = (engine: string, action: 'login' | 'logout') => {
     setBusy(`${engine}:${action}`);
     setError('');
@@ -413,7 +420,7 @@ export function EngineLogins({ status: initial }: { status: EngineStatus }) {
                   type="button"
                   class="btn ghost sm"
                   onClick={() => {
-                    clearInterval(waiting.current);
+                    waiting.current?.();
                     setBusy('');
                   }}
                 >

package/src/server/dash/app/dash/settings/[tab]/page.tsx

@@ -5,7 +5,7 @@ import './credentials-list.css';
 import './list.css';
 import { dynamic } from '@wular/pnext/dynamic';
 import { notFound } from '@wular/pnext/navigation';
-import { DEFAULT_CONFIG } from '@coder/core/config';
+import { DEFAULT_CONFIG } from '@coder/core/defaults';
 
 import { load } from '@/api/load';
 import { Settle, Stream } from '@/comps/frame/stream';

package/src/server/dash/app/dash/settings/[tab]/runners-list.tsx

@@ -4,7 +4,7 @@ import './runners-list.css';
 
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { client } from '@/utils/client';
+import { client, poll } from '@/utils/client';
 import {
   iCheck,
   iCopy,
@@ -246,15 +246,19 @@ function AddRunner({
   useEffect(() => {
     if (!pairing) return;
     const until = Math.min(pairing.expiresAt, Date.now() + 15 * 60_000);
-    const timer = setInterval(() => {
+    // A list read from a pairing already gone never ends the next one.
+    let current = true;
+    const stop = poll(async () => {
       if (Date.now() > until) return cancel();
-      void client.runners.list().then(rows => {
-        if (!rows.items.some(row => !known.includes(row.id))) return;
-        onAdded(rows);
-        cancel();
-      });
+      const rows = await client.runners.list();
+      if (!current || !rows.items.some(row => !known.includes(row.id))) return;
+      onAdded(rows);
+      cancel();
     }, 2000);
-    return () => clearInterval(timer);
+    return () => {
+      current = false;
+      stop();
+    };
   }, [pairing]);
 
   const cancel = () => {
@@ -411,10 +415,7 @@ export function RunnersList({ first, me }: { first: Runners; me: Me }) {
   const items = sortedRunners(rows.items);
 
   // Online dots stay fresh while the tab is open.
-  useEffect(() => {
-    const timer = setInterval(() => void client.runners.list().then(setRows, () => {}), 30_000);
-    return () => clearInterval(timer);
-  }, []);
+  useEffect(() => poll(() => client.runners.list().then(setRows), 30_000), []);
 
   const change = async (act: () => Promise<unknown>) => {
     setError('');