@wular/coder 0.4.1 → 0.4.3

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;

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

@@ -12,7 +12,7 @@ import { formatDate, formatDuration, reasonText } from '@/utils/format';
 import { Link } from '@wular/pnext/link';
 import { useSearchParams } from '@wular/pnext/navigation/client';
 import type { TaskLog, TaskRow } from '@coder/client/types';
-import { iAgent, iCheck, iCopy, iDown } from '@/comps/ui/icons';
+import { iAgent, iCheck, iClock, iDown, iFolder, iPlug, iTerminal } from '@/comps/ui/icons';
 import { Badge } from '@/comps/ui/badge';
 import { Card, Loading } from '@/comps/ui/card';
 import { Collapse } from '@/comps/ui/collapse';
@@ -25,7 +25,7 @@ import { Status } from '@/app/dash/tasks/list/status';
 import { folderName, sourceLabel, taskActive, taskTitle } from '@/app/dash/tasks/list/task';
 import { Approval, TaskActions, useAction } from './task-actions';
 import { Activity } from './activity';
-import { toastError, watchTask } from '@/comps/frame/task-toasts';
+import { toastError, useTaskEvents, watchTask } from '@/comps/frame/task-toasts';
 
 const TABS = ['Conversation', 'Activity'];
 
@@ -104,30 +104,10 @@ function TaskBack() {
   );
 }
 
-function CopyId({ id }: { id: string }) {
-  const [copied, setCopied] = useState(false);
-  const label = copied ? 'Copied' : 'Copy task id';
-  useEffect(() => {
-    if (!copied) return;
-    const timer = setTimeout(() => setCopied(false), 1500);
-    return () => clearTimeout(timer);
-  }, [copied]);
-  return (
-    <button
-      type="button"
-      class={copied ? 'copy copied' : 'copy'}
-      aria-label={label}
-      title={label}
-      onClick={() => void navigator.clipboard.writeText(id).then(() => setCopied(true))}
-    >
-      <Icon d={copied ? iCheck : iCopy} />
-    </button>
-  );
-}
-
-/** The task's one-row head: back, title, status, source and agent, its actions, and a muted line with id, created time and duration. */
+/** The task's one-row head: back, title, status, source and agent, its actions, and a muted line with created time, source, folder, and the agent with its model. */
 function TaskHead({ task, tz }: { task: TaskRow; tz: string }) {
   const live = taskActive(task);
+  const { engine, model, effort } = { ...task.task.definition, ...task.task.usage };
   const source = task.task.event?.integration ?? task.task.source;
   const kind = task.task.event?.type ?? (task.task.flow !== 'default' ? task.task.flow : undefined);
 
@@ -143,23 +123,39 @@ function TaskHead({ task, tz }: { task: TaskRow; tz: string }) {
       }
       lead={
         <>
-          <span class="task-id">{task.task.id}</span>
-          <CopyId id={task.task.id} />
-          <span>{formatDate(task.createdAt, tz)}</span>
-          {task.startedAt && task.finishedAt ? (
-            <span>{formatDuration(task.finishedAt - task.startedAt)}</span>
+          <span class="fact" title={`Created ${formatDate(task.createdAt, tz)}`}>
+            <Icon d={iClock} />
+            {formatDate(task.createdAt, tz, true)}
+            {task.startedAt && task.finishedAt
+              ? `, ran ${formatDuration(task.finishedAt - task.startedAt)}`
+              : null}
+          </span>
+          <span class="fact" title="Source">
+            <Icon d={task.task.event ? iPlug : iTerminal} />
+            {kind ? `${sourceLabel(source)} ${kind}` : sourceLabel(source)}
+          </span>
+          {task.task.cwd ? (
+            <span class="fact" title={task.task.cwd}>
+              <Icon d={iFolder} />
+              {folderName(task.task.cwd)}
+            </span>
           ) : null}
-          <span>{kind ? `${sourceLabel(source)} ${kind}` : sourceLabel(source)}</span>
-          {task.task.cwd ? <span title={task.task.cwd}>{folderName(task.task.cwd)}</span> : null}
-          <Link
-            class="agent-link"
-            href="/dash/agents/[slug]"
-            params={{ slug: task.task.agent }}
-            search={{ from: `/dash/tasks/${task.task.id}` }}
-          >
-            <Icon d={iAgent} />
-            {task.task.agent}
-          </Link>
+          <span class="fact">
+            <Link
+              class="agent-link"
+              href="/dash/agents/[slug]"
+              params={{ slug: task.task.agent }}
+              search={{ from: `/dash/tasks/${task.task.id}` }}
+            >
+              <Icon d={iAgent} />
+              {task.task.agent}
+            </Link>
+            {engine ? (
+              <span class="fact-dim" title="Engine, model and effort">
+                {[engine, model, effort].filter(Boolean).join('/')}
+              </span>
+            ) : null}
+          </span>
         </>
       }
       actions={<TaskActions task={task} live={live} />}
@@ -167,12 +163,16 @@ function TaskHead({ task, tz }: { task: TaskRow; tz: string }) {
   );
 }
 
-/** Display rows for the lines so far; new lines only extend them. */
+/** Display rows for the lines so far; new lines extend them or complete an earlier call. */
 function useDisplayRows(lines: TaskLog[]) {
   const view = useRef<{ log: LogView; rows: TaskDisplayRow[]; seen: number }>();
   return useMemo(() => {
     const state = (view.current ??= { log: new LogView(), rows: [], seen: 0 });
-    for (const line of lines.slice(state.seen)) state.rows.push(...state.log.reduce(line));
+    for (const line of lines.slice(state.seen))
+      for (const row of state.log.reduce(line)) {
+        if (row.seq > (state.rows.at(-1)?.seq ?? -1)) state.rows.push(row);
+        else state.rows[state.rows.findLastIndex(({ seq }) => seq === row.seq)] = row;
+      }
     state.seen = lines.length;
     return [...state.rows];
   }, [lines]);
@@ -214,17 +214,107 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
     if (action.error) toastError('Not sent', action.error);
   }, [action.error]);
 
+  const pending = useRef<TaskLog[]>([]);
   const append = (more: TaskLog[]) => {
     const fresh = more.filter(line => line.seq > after.current);
     if (!fresh.length) return;
     after.current = fresh.at(-1)!.seq;
-    setLines(value => [...value, ...fresh]);
+    // Lines that land together render once.
+    if (pending.current.push(...fresh) === fresh.length)
+      setTimeout(() => {
+        const batch = pending.current.splice(0);
+        setLines(value => [...value, ...batch]);
+      });
   };
 
   useEffect(() => {
     if (live && replies) input.current?.focus();
   }, []);
 
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const sync = () => setVisible(document.visibilityState === 'visible');
+    sync();
+    addEventListener('visibilitychange', sync);
+    return () => removeEventListener('visibilitychange', sync);
+  }, []);
+
+  // Logs stream from when the task runs until the stream ends them, which waits for logs still arriving.
+  const [streaming, setStreaming] = useState(live);
+  useEffect(() => {
+    if (live) setStreaming(true);
+  }, [live]);
+
+  // Each turn's reads apply to it alone: a continue, here or from elsewhere, starts the next.
+  const [round, setRound] = useState(0);
+  const roundNow = useRef(0);
+  roundNow.current = round;
+
+  const reload = () => {
+    const started = roundNow.current;
+    void client.tasks
+      .get(task.task.id)
+      .then(({ logs: _logs, ...full }) => {
+        if (roundNow.current === started) setTask(full);
+      })
+      .catch(reason => setStatus(reasonText(reason)));
+  };
+
+  // A running stream follows its own cursor; a stopped page fetches the lines it missed.
+  const catchUp = () => {
+    reload();
+    if (!streaming) setComplete(false);
+  };
+
+  // A new turn's prompt, from this page or elsewhere; its state comes from the events stream.
+  useEffect(() => {
+    if (!round) return;
+    void client.tasks
+      .get(task.task.id)
+      .then(({ turns }) => {
+        if (roundNow.current === round)
+          setTask(current => (taskActive(current) ? { ...current, turns } : current));
+      })
+      .catch(() => {});
+  }, [round]);
+
+  // The head follows the browser's events stream; a finish brings the full task.
+  useTaskEvents(
+    event => {
+      if (event.id !== task.task.id || event.deleted) return;
+      if (live && !taskActive(event)) reload();
+      // A new run, even one that finished and was continued between two events.
+      const rerun = live && task.startedAt !== undefined && event.startedAt !== task.startedAt;
+      if (taskActive(event) && (!live || rerun)) {
+        setRound(value => value + 1);
+        setStreaming(true);
+      }
+      // A turn continued and finished elsewhere while this page heard nothing of it.
+      if (!live && !taskActive(event) && event.finishedAt !== task.finishedAt) {
+        reload();
+        setComplete(false);
+      }
+      setTask(current => ({
+        ...current,
+        status: event.status,
+        approval: event.approval ?? undefined,
+        archivedAt: event.archivedAt,
+        startedAt: event.startedAt,
+        finishedAt: event.finishedAt,
+        ...(event.result === undefined
+          ? {}
+          : {
+              result: event.result ?? undefined,
+              error: event.error ?? undefined,
+              answer: event.answer ?? undefined,
+            }),
+      }));
+    },
+    // Missed events: refetch the task and catch up its logs from the cursor.
+    catchUp,
+    () => document.visibilityState === 'visible' && catchUp(),
+  );
+
   // Older lines a chunk at a time, then the stream follows the run.
   useEffect(() => {
     if (complete) return;
@@ -237,8 +327,9 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
       .catch(reason => setStatus(reasonText(reason)));
   }, [complete, lines.length]);
 
+  // A hidden tab holds no log stream and resumes from its cursor.
   useEffect(() => {
-    if (!complete || !live) return;
+    if (!complete || !streaming || !visible) return;
     const abort = new AbortController();
     const follow = async () => {
       while (!abort.signal.aborted) {
@@ -250,10 +341,9 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
           }
           setStatus('');
           for await (const event of serverEvents(response.body)) {
+            if (abort.signal.aborted) return;
             if (event.event === 'log') append([JSON.parse(event.data)]);
-            else if (event.event === 'status')
-              setTask(current => ({ ...current, ...JSON.parse(event.data) }));
-            else if (event.event === 'end') return;
+            else if (event.event === 'end') return setStreaming(false);
           }
         } catch {
           if (abort.signal.aborted) return;
@@ -264,7 +354,7 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
     };
     void follow();
     return () => abort.abort();
-  }, [complete, live]);
+  }, [complete, streaming, visible, round]);
 
   const turns = task.turns ?? [
     {
@@ -295,12 +385,14 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
     const ok = await action.run(kind, { text }).finally(() => setSending(false));
     if (!ok) return;
     input.current!.value = '';
-    if (kind === 'continue')
+    if (kind === 'continue') {
+      setRound(value => value + 1);
       setTask(current => ({
         ...current,
         status: 'queued',
         result: undefined,
         error: undefined,
+        startedAt: undefined,
         finishedAt: undefined,
         turns: [
           ...turns.map((turn, index) =>
@@ -311,7 +403,7 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
           { prompt: text },
         ],
       }));
-    else {
+    } else {
       setSent(value => [...value, { kind, text, turn: turns.length - 1 }]);
       setTab('activity');
     }
@@ -332,6 +424,7 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
           {fallback.engine} was unavailable. {fallback.detail} This task is using {fallback.next}.
         </p>
       ))}
+      {task.approval ? <Approval task={task} /> : null}
       <nav class="tabs" role="tablist" aria-label="Task">
         {TABS.map(label => {
           const key = label.toLowerCase() as Tab;
@@ -366,7 +459,6 @@ export function TaskView({ initial, tz }: { initial: TaskRow; tz: string }) {
                   <p class="who">Prompt</p>
                   <Collapse class="prose">{turn.prompt}</Collapse>
                 </div>
-                {last && task.approval ? <Approval task={task} /> : null}
                 {last
                   ? (task.answer ?? []).slice(0, knownAnswers.current).map((answer, index) => (
                       <div key={`a${index}`} class="turn answer">

package/src/server/dash/app/dash/tasks/composer.css

@@ -216,6 +216,10 @@ dialog.compose-dialog::backdrop {
   height: 30px;
   margin-left: auto;
 }
+/* the dialog's prompt grows to 20 lines, short of the dialog's own scroll */
+.compose-dialog .composer textarea {
+  max-height: min(20lh, max(4lh, calc(86dvh - 180px)));
+}
 .compose-dialog .composer,
 .compose-dialog > .loading,
 .compose-dialog > .flash,

package/src/server/dash/app/dash/tasks/composer.tsx

@@ -823,8 +823,8 @@ export function LoadingComposer() {
   );
 }
 
-/** Opens the composer in a dialog with `agent` picked; starting a task opens it. */
-export function NewTaskButton({ agent }: { agent: string }) {
+/** Opens the composer in a dialog, with `agent` picked when given; starting a task opens it. */
+export function NewTaskButton({ agent }: { agent?: string }) {
   const dialog = useRef<HTMLDialogElement>(null);
   const [setup, setSetup] = useState<Awaited<ReturnType<typeof loadComposer>>>();
   const [error, setError] = useState('');
@@ -852,18 +852,19 @@ export function NewTaskButton({ agent }: { agent: string }) {
         onPointerEnter={prepare}
         onFocus={prepare}
       >
+        <Icon d={iPlus} />
         New task
       </button>
       <dialog
         ref={dialog}
         class="compose-dialog"
-        aria-label={`New task for ${agent}`}
+        aria-label={agent ? `New task for ${agent}` : 'New task'}
         onClose={() => setShown(false)}
         onClick={event => event.target === event.currentTarget && dialog.current?.close()}
       >
         <header>
           <h2>New task</h2>
-          <span class="sub">{agent}</span>
+          {agent ? <span class="sub">{agent}</span> : null}
           <button
             type="button"
             class="icon-btn"
@@ -876,7 +877,7 @@ export function NewTaskButton({ agent }: { agent: string }) {
         {!shown ? null : setup ? (
           <Composer
             {...setup}
-            initial={{ ...savedChoice(document.cookie), agent }}
+            initial={{ ...savedChoice(document.cookie), ...(agent ? { agent } : {}) }}
             tz={Intl.DateTimeFormat().resolvedOptions().timeZone}
           />
         ) : error ? (