@wular/coder 0.4.2 → 0.4.3

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.tsx

@@ -213,6 +213,15 @@ 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];
@@ -296,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 />
@@ -332,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]/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('');

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

@@ -40,7 +40,7 @@ const ICONS: Record<TaskDisplayRow['kind'], string> = {
 
 /** Rows long enough to fold to one line. */
 const foldable = (row: TaskDisplayRow) =>
-  Boolean(row.detail) || row.title.length > 120 || row.title.includes('\n');
+  Boolean(row.detail || row.result?.detail) || row.title.length > 120 || row.title.includes('\n');
 
 const atEnd = () => innerHeight + scrollY >= document.documentElement.scrollHeight - 48;
 
@@ -65,15 +65,43 @@ function useWindowVirtualizer(count: number, list: { current: HTMLElement | null
   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);
@@ -83,6 +111,7 @@ function Row({
   }, [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'
       ? [
@@ -100,7 +129,7 @@ function Row({
   return (
     <Tag
       type={fold ? 'button' : undefined}
-      class={`act ${row.kind}${row.tone ? ` ${row.tone}` : ''}${row.separated ? ' sep' : ''}${open ? ' open' : ''}`}
+      class={`act ${row.kind}${row.tone ? ` ${row.tone}` : ''}${row.separated ? ' sep' : ''}${timed ? ' timed' : ''}${open ? ' open' : ''}`}
       aria-expanded={fold ? open : undefined}
       onClick={fold ? onToggle : undefined}
     >
@@ -108,11 +137,20 @@ function Row({
       <Icon d={row.kind === 'tool-result' && failed ? iX : ICONS[row.kind]} />
       <span class="act-text">
         <span class="act-title" ref={title}>
-          {row.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 ? <span class="act-detail">{row.detail}</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>
   );
@@ -132,6 +170,8 @@ export function Activity({
   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());
@@ -173,6 +213,11 @@ export function Activity({
                 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);

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 
 import { client } from '@/utils/client';
 import { useRouter } from '@wular/pnext/navigation/client';
@@ -12,6 +12,7 @@ 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;
@@ -114,6 +115,14 @@ export function TaskActions({ task, live }: { task: TaskRow; live: boolean }) {
       )}
       <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
@@ -131,9 +140,26 @@ export function TaskActions({ task, live }: { task: TaskRow; live: boolean }) {
 
 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 = (decision: 'accept' | 'decline') =>
-    void action.run('approve', { approvalId: id, decision });
+
+  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"
@@ -141,11 +167,22 @@ export function Approval({ task }: { task: TaskRow }) {
       actions={
         task.task.flow === 'default' ? (
           <>
-            <Flash {...action} />
-            <button type="button" class="btn outline sm" onClick={() => decide('decline')}>
+            <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" onClick={() => decide('accept')}>
+            <button
+              type="button"
+              class="btn sm"
+              disabled={Boolean(busy)}
+              aria-busy={busy === 'accept'}
+              onClick={() => void decide('accept')}
+            >
               Allow
             </button>
           </>

package/src/server/dash/app/dash/tasks/[id]/task-view.css

@@ -1,60 +1,52 @@
-/* task head: the id line under the title */
-.head .lead:has(.task-id) {
+/* task head: the facts line under the title */
+.head .lead:has(.fact) {
   display: flex;
   align-items: center;
-  gap: 12px;
-}
-.head.stuck .lead:has(.task-id) {
-  display: none;
-}
-.task-id {
+  gap: 16px;
   font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.head .copy {
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  margin-left: -8px;
-  padding: 2px;
-  border: 0;
-  background: none;
+.fact {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+}
+.fact .ic {
+  width: 12px;
+  height: 12px;
   color: var(--dim);
-  cursor: pointer;
 }
-.head .copy:hover {
-  color: var(--fg);
+.fact-dim {
+  color: var(--dim);
 }
-.head .copy .ic {
-  width: 13px;
-  height: 13px;
+.head.stuck .lead:has(.fact) {
+  display: none;
 }
 /* phones: the actions sit on the back link's row, the title gets the full width under it */
 @media (max-width: 760px) {
-  .head:has(.task-id) .back {
+  .head:has(.fact) .back {
     height: 34px;
   }
-  .head:has(.task-id) .title-row > h1 {
+  .head:has(.fact) .title-row > h1 {
     flex-basis: 100%;
   }
-  .head:has(.task-id) .actions {
+  .head:has(.fact) .actions {
     position: absolute;
     top: 0;
     right: 16px;
     width: auto;
     flex-wrap: nowrap;
   }
-  .head.stuck:has(.task-id) .actions {
+  .head.stuck:has(.fact) .actions {
     position: static;
   }
-  .head.stuck:has(.task-id) .actions > .menu {
+  .head.stuck:has(.fact) .actions > .menu {
     display: inline;
   }
-  .head.stuck:has(.task-id) .title-row > h1 {
+  .head.stuck:has(.fact) .title-row > h1 {
     flex-basis: auto;
   }
-  .head.stuck:has(.task-id) .meta {
+  .head.stuck:has(.fact) .meta {
     display: none;
   }
 }
@@ -196,6 +188,9 @@ button.act:hover {
   flex: 1 1 0;
   color: var(--dim);
 }
+.act-tool {
+  color: var(--fg);
+}
 .act.open .act-text {
   display: grid;
   gap: 2px;
@@ -228,6 +223,32 @@ button.act:hover {
 .act.error :is(.act-title, .ic) {
   color: var(--bad);
 }
+.act.timed {
+  grid-template-columns: 76px 16px minmax(0, 1fr) auto 14px;
+}
+.act-state {
+  color: var(--dim);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.act-state.bad,
+.act-state.bad .ic {
+  color: var(--bad);
+}
+.act-state :is(.ic, .spin) {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  margin: 0 6px 0 0;
+  vertical-align: -1px;
+}
+.act-state .spin {
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
 .act-empty {
   padding: 24px 0;
   text-align: center;