From 14041d007fc8c3b06866d044eef6e995927679a7 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 16:27:44 +0100
Subject: [PATCH] feat: add Errands nav item, /errands route, and
 CreateErrandDialog

- AppLayout: add Errands nav entry with pending_review badge count
- /errands route: list table with ID, description, branch, status, agent, created columns; empty state with CLI hint; slide-over integration
- CreateErrandDialog: description (max 200 chars with counter), project select, optional base branch; no optimistic UI due to agent spawn latency
- ErrandDetailPanel: checkout from completed dependency commit (4j3ZfR_ZX_4rw7j9uj6DV)

TypeScript compiles clean. Route uses TanStack Router file-based routing; routeTree.gen.ts auto-regenerated on build.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../web/src/components/CreateErrandDialog.tsx | 142 +++++++
 apps/web/src/components/ErrandDetailPanel.tsx | 379 ++++++++++++++++++
 apps/web/src/layouts/AppLayout.tsx            |  14 +-
 apps/web/src/routes/errands/index.tsx         | 130 ++++++
 4 files changed, 660 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/components/CreateErrandDialog.tsx
 create mode 100644 apps/web/src/components/ErrandDetailPanel.tsx
 create mode 100644 apps/web/src/routes/errands/index.tsx

diff --git a/apps/web/src/components/CreateErrandDialog.tsx b/apps/web/src/components/CreateErrandDialog.tsx
new file mode 100644
index 0000000..0e76e17
--- /dev/null
+++ b/apps/web/src/components/CreateErrandDialog.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { trpc } from '@/lib/trpc';
+
+interface CreateErrandDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreateErrandDialog({ open, onOpenChange }: CreateErrandDialogProps) {
+  const [description, setDescription] = useState('');
+  const [projectId, setProjectId] = useState('');
+  const [baseBranch, setBaseBranch] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const navigate = useNavigate();
+  const utils = trpc.useUtils();
+
+  const projectsQuery = trpc.listProjects.useQuery();
+
+  const createMutation = trpc.errand.create.useMutation({
+    onSuccess: (data) => {
+      toast.success('Errand started');
+      onOpenChange(false);
+      utils.errand.list.invalidate();
+      navigate({ to: '/errands', search: { selected: data.id } });
+    },
+    onError: (err) => {
+      setError(err.message);
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setDescription('');
+      setProjectId('');
+      setBaseBranch('');
+      setError(null);
+    }
+  }, [open]);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    createMutation.mutate({
+      description: description.trim(),
+      projectId,
+      baseBranch: baseBranch.trim() || undefined,
+    });
+  }
+
+  const canSubmit =
+    description.trim().length > 0 &&
+    description.length <= 200 &&
+    projectId !== '' &&
+    !createMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New Errand</DialogTitle>
+          <DialogDescription>
+            Start a small isolated change with a dedicated agent.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="errand-description">Description</Label>
+            <Textarea
+              id="errand-description"
+              placeholder="Describe the small change to make…"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              autoFocus
+            />
+            <p
+              className={cn(
+                'text-xs text-right',
+                description.length >= 190 ? 'text-destructive' : 'text-muted-foreground',
+              )}
+            >
+              {description.length} / 200
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="errand-project">Project</Label>
+            <select
+              id="errand-project"
+              value={projectId}
+              onChange={(e) => setProjectId(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            >
+              <option value="">Select a project…</option>
+              {(projectsQuery.data ?? []).map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="errand-base">
+              Base Branch{' '}
+              <span className="text-muted-foreground font-normal">(optional — defaults to main)</span>
+            </Label>
+            <Input
+              id="errand-base"
+              placeholder="main"
+              value={baseBranch}
+              onChange={(e) => setBaseBranch(e.target.value)}
+            />
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {createMutation.isPending ? 'Starting…' : 'New Errand'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/ErrandDetailPanel.tsx b/apps/web/src/components/ErrandDetailPanel.tsx
new file mode 100644
index 0000000..04182a8
--- /dev/null
+++ b/apps/web/src/components/ErrandDetailPanel.tsx
@@ -0,0 +1,379 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { StatusBadge } from '@/components/StatusBadge';
+import { AgentOutputViewer } from '@/components/AgentOutputViewer';
+import { trpc } from '@/lib/trpc';
+import { formatRelativeTime } from '@/lib/utils';
+import { toast } from 'sonner';
+
+interface ErrandDetailPanelProps {
+  errandId: string;
+  onClose: () => void;
+}
+
+export function ErrandDetailPanel({ errandId, onClose }: ErrandDetailPanelProps) {
+  const [message, setMessage] = useState('');
+
+  const errandQuery = trpc.errand.get.useQuery({ id: errandId });
+  const errand = errandQuery.data;
+
+  const diffQuery = trpc.errand.diff.useQuery(
+    { id: errandId },
+    { enabled: errand?.status !== 'active' },
+  );
+
+  const utils = trpc.useUtils();
+
+  const completeMutation = trpc.errand.complete.useMutation({
+    onSuccess: () => {
+      utils.errand.list.invalidate();
+      errandQuery.refetch();
+    },
+  });
+
+  const mergeMutation = trpc.errand.merge.useMutation({
+    onSuccess: () => {
+      utils.errand.list.invalidate();
+      toast.success(`Merged into ${errand?.baseBranch ?? 'base'}`);
+      onClose();
+    },
+    onError: () => {
+      errandQuery.refetch();
+    },
+  });
+
+  const deleteMutation = trpc.errand.delete.useMutation({
+    onSuccess: () => {
+      utils.errand.list.invalidate();
+      onClose();
+    },
+  });
+
+  const abandonMutation = trpc.errand.abandon.useMutation({
+    onSuccess: () => {
+      utils.errand.list.invalidate();
+      errandQuery.refetch();
+    },
+  });
+
+  const sendMutation = trpc.errand.sendMessage.useMutation({
+    onSuccess: () => {
+      utils.errand.list.invalidate();
+      setMessage('');
+    },
+  });
+
+  // Escape key closes
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  const chatDisabled = errand?.status !== 'active' || sendMutation.isPending;
+
+  return (
+    <AnimatePresence>
+      <>
+        {/* Backdrop */}
+        <motion.div
+          className="fixed inset-0 z-40 bg-background/60 backdrop-blur-[2px]"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={onClose}
+        />
+
+        {/* Panel */}
+        <motion.div
+          className="fixed inset-y-0 right-0 z-50 flex w-full max-w-2xl flex-col border-l border-border bg-background shadow-xl"
+          initial={{ x: '100%' }}
+          animate={{ x: 0 }}
+          exit={{ x: '100%' }}
+          transition={{ duration: 0.25, ease: [0, 0, 0.2, 1] }}
+        >
+          {/* Loading state */}
+          {errandQuery.isLoading && (
+            <>
+              <div className="flex items-center justify-between border-b border-border px-5 py-4">
+                <span className="text-sm text-muted-foreground">Loading…</span>
+                <button
+                  onClick={onClose}
+                  className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="flex-1 flex items-center justify-center">
+                <p className="text-sm text-muted-foreground">Loading errand…</p>
+              </div>
+            </>
+          )}
+
+          {/* Error state */}
+          {errandQuery.error && (
+            <>
+              <div className="flex items-center justify-between border-b border-border px-5 py-4">
+                <span className="text-sm text-muted-foreground">Error</span>
+                <button
+                  onClick={onClose}
+                  className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="flex-1 flex flex-col items-center justify-center gap-3">
+                <p className="text-sm text-muted-foreground">Failed to load errand.</p>
+                <Button size="sm" variant="outline" onClick={() => errandQuery.refetch()}>
+                  Retry
+                </Button>
+              </div>
+            </>
+          )}
+
+          {/* Loaded state */}
+          {errand && (
+            <>
+              {/* Header */}
+              <div className="flex items-start gap-3 border-b border-border px-5 py-4">
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-base font-semibold leading-snug truncate">
+                    {errand.description}
+                  </h3>
+                  <p className="mt-0.5 text-xs text-muted-foreground font-mono">
+                    {errand.branch}
+                  </p>
+                </div>
+                <StatusBadge status={errand.status} />
+                {errand.agentAlias && (
+                  <span className="text-xs text-muted-foreground shrink-0">
+                    {errand.agentAlias}
+                  </span>
+                )}
+                <button
+                  onClick={onClose}
+                  className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+
+              {/* View: Active */}
+              {errand.status === 'active' && (
+                <>
+                  <div className="flex-1 overflow-y-auto">
+                    {errand.agentId && (
+                      <AgentOutputViewer
+                        agentId={errand.agentId}
+                        agentName={errand.agentAlias ?? undefined}
+                        status={undefined}
+                      />
+                    )}
+                  </div>
+
+                  {/* Chat input */}
+                  <div className="border-t border-border px-5 py-3">
+                    <form
+                      onSubmit={(e) => {
+                        e.preventDefault();
+                        if (!message.trim()) return;
+                        sendMutation.mutate({ id: errandId, message });
+                      }}
+                    >
+                      <div className="flex gap-2">
+                        <Input
+                          value={message}
+                          onChange={(e) => setMessage(e.target.value)}
+                          placeholder="Send a message to the agent…"
+                          disabled={chatDisabled}
+                          title={
+                            chatDisabled && errand.status !== 'active'
+                              ? 'Agent is not running'
+                              : undefined
+                          }
+                        />
+                        <Button
+                          type="submit"
+                          size="sm"
+                          disabled={chatDisabled || !message.trim()}
+                        >
+                          Send
+                        </Button>
+                      </div>
+                    </form>
+                  </div>
+
+                  {/* Footer */}
+                  <div className="flex items-center gap-2 border-t border-border px-5 py-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={completeMutation.isPending}
+                      onClick={() => completeMutation.mutate({ id: errandId })}
+                    >
+                      Mark Done
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={(e) => {
+                        if (
+                          e.shiftKey ||
+                          window.confirm(
+                            'Abandon this errand? The record will be kept for reference but the branch and worktree will be removed.',
+                          )
+                        ) {
+                          abandonMutation.mutate({ id: errandId });
+                        }
+                      }}
+                    >
+                      Abandon
+                    </Button>
+                  </div>
+                </>
+              )}
+
+              {/* View: Pending Review / Conflict */}
+              {(errand.status === 'pending_review' || errand.status === 'conflict') && (
+                <>
+                  <div className="flex flex-col flex-1 overflow-hidden">
+                    {/* Conflict notice */}
+                    {errand.status === 'conflict' &&
+                      (errand.conflictFiles?.length ?? 0) > 0 && (
+                        <div className="mx-5 mt-4 rounded-md border border-destructive bg-destructive/10 px-4 py-3 text-sm text-destructive">
+                          Merge conflict in {errand.conflictFiles!.length} file(s):{' '}
+                          {errand.conflictFiles!.join(', ')} — resolve manually in the
+                          worktree then re-merge.
+                        </div>
+                      )}
+
+                    {/* Diff block */}
+                    <div className="flex-1 overflow-y-auto px-5 py-4">
+                      {diffQuery.isLoading ? (
+                        <p className="text-sm text-muted-foreground">Loading diff…</p>
+                      ) : diffQuery.data?.diff ? (
+                        <pre className="overflow-x-auto rounded border border-border bg-muted/50 p-4 text-xs font-mono whitespace-pre">
+                          {diffQuery.data.diff}
+                        </pre>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">
+                          No changes — branch has no commits.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Footer */}
+                  <div className="flex items-center justify-between border-t border-border px-5 py-3">
+                    <div className="flex gap-2">
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={(e) => {
+                          if (
+                            e.shiftKey ||
+                            window.confirm(
+                              'Delete this errand? Branch and worktree will be removed and the record deleted.',
+                            )
+                          ) {
+                            deleteMutation.mutate({ id: errandId });
+                          }
+                        }}
+                      >
+                        Delete
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={(e) => {
+                          if (
+                            e.shiftKey ||
+                            window.confirm(
+                              'Abandon this errand? The record will be kept for reference but the branch and worktree will be removed.',
+                            )
+                          ) {
+                            abandonMutation.mutate({ id: errandId });
+                          }
+                        }}
+                      >
+                        Abandon
+                      </Button>
+                    </div>
+                    <Button
+                      size="sm"
+                      disabled={mergeMutation.isPending}
+                      onClick={(e) => {
+                        const target = errand.baseBranch;
+                        if (
+                          e.shiftKey ||
+                          window.confirm(`Merge this errand into ${target}?`)
+                        ) {
+                          mergeMutation.mutate({ id: errandId });
+                        }
+                      }}
+                    >
+                      {mergeMutation.isPending ? 'Merging…' : 'Merge'}
+                    </Button>
+                  </div>
+                </>
+              )}
+
+              {/* View: Merged / Abandoned */}
+              {(errand.status === 'merged' || errand.status === 'abandoned') && (
+                <>
+                  <div className="flex flex-col flex-1 overflow-hidden">
+                    {/* Info line */}
+                    <div className="px-5 pt-4 text-sm text-muted-foreground">
+                      {errand.status === 'merged'
+                        ? `Merged into ${errand.baseBranch} · ${formatRelativeTime(errand.updatedAt.toISOString())}`
+                        : `Abandoned · ${formatRelativeTime(errand.updatedAt.toISOString())}`}
+                    </div>
+
+                    {/* Read-only diff */}
+                    <div className="flex-1 overflow-y-auto px-5 py-4">
+                      {diffQuery.data?.diff ? (
+                        <pre className="overflow-x-auto rounded border border-border bg-muted/50 p-4 text-xs font-mono whitespace-pre">
+                          {diffQuery.data.diff}
+                        </pre>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">
+                          No changes — branch has no commits.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Footer */}
+                  <div className="flex items-center border-t border-border px-5 py-3">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={(e) => {
+                        if (
+                          e.shiftKey ||
+                          window.confirm(
+                            'Delete this errand? Branch and worktree will be removed and the record deleted.',
+                          )
+                        ) {
+                          deleteMutation.mutate({ id: errandId });
+                        }
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </motion.div>
+      </>
+    </AnimatePresence>
+  );
+}
diff --git a/apps/web/src/layouts/AppLayout.tsx b/apps/web/src/layouts/AppLayout.tsx
index 6c0df56..5d1187a 100644
--- a/apps/web/src/layouts/AppLayout.tsx
+++ b/apps/web/src/layouts/AppLayout.tsx
@@ -8,9 +8,10 @@ import type { ConnectionState } from '@/hooks/useConnectionStatus'
 
 const navItems = [
   { label: 'Initiatives', to: '/initiatives', badgeKey: null },
-  { label: 'Agents', to: '/agents', badgeKey: 'running' as const },
-  { label: 'Inbox', to: '/inbox', badgeKey: 'questions' as const },
-  { label: 'Settings', to: '/settings', badgeKey: null },
+  { label: 'Errands',     to: '/errands',     badgeKey: 'pendingErrands' as const },
+  { label: 'Agents',      to: '/agents',       badgeKey: 'running' as const },
+  { label: 'Inbox',       to: '/inbox',        badgeKey: 'questions' as const },
+  { label: 'Settings',    to: '/settings',     badgeKey: null },
 ] as const
 
 interface AppLayoutProps {
@@ -24,9 +25,12 @@ export function AppLayout({ children, onOpenCommandPalette, connectionState }: A
     refetchInterval: 10000,
   })
 
+  const errandsData = trpc.errand.list.useQuery()
+
   const badgeCounts = {
-    running: agents.data?.filter((a) => a.status === 'running').length ?? 0,
-    questions: agents.data?.filter((a) => a.status === 'waiting_for_input').length ?? 0,
+    running:        agents.data?.filter((a) => a.status === 'running').length ?? 0,
+    questions:      agents.data?.filter((a) => a.status === 'waiting_for_input').length ?? 0,
+    pendingErrands: errandsData.data?.filter((e) => e.status === 'pending_review').length ?? 0,
   }
 
   return (
diff --git a/apps/web/src/routes/errands/index.tsx b/apps/web/src/routes/errands/index.tsx
new file mode 100644
index 0000000..ef83b5e
--- /dev/null
+++ b/apps/web/src/routes/errands/index.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Plus } from 'lucide-react';
+import { motion } from 'motion/react';
+import { Button } from '@/components/ui/button';
+import { StatusBadge } from '@/components/StatusBadge';
+import { CreateErrandDialog } from '@/components/CreateErrandDialog';
+import { ErrandDetailPanel } from '@/components/ErrandDetailPanel';
+import { trpc } from '@/lib/trpc';
+import { formatRelativeTime } from '@/lib/utils';
+
+export const Route = createFileRoute('/errands/')({
+  component: ErrandsPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    selected: typeof search.selected === 'string' ? search.selected : undefined,
+  }),
+});
+
+function ErrandsPage() {
+  const { selected } = Route.useSearch();
+  const navigate = useNavigate();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [selectedErrandId, setSelectedErrandId] = useState<string | null>(selected ?? null);
+
+  const errandsQuery = trpc.errand.list.useQuery();
+  const errands = errandsQuery.data ?? [];
+
+  function selectErrand(id: string | null) {
+    setSelectedErrandId(id);
+    navigate({
+      to: '/errands',
+      search: id ? { selected: id } : {},
+      replace: true,
+    });
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: [0, 0, 0.2, 1] }}
+      className="mx-auto max-w-6xl space-y-6"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="font-display text-2xl font-semibold">Errands</h1>
+        <Button size="sm" onClick={() => setCreateDialogOpen(true)}>
+          <Plus className="mr-1 h-4 w-4" />
+          New Errand
+        </Button>
+      </div>
+
+      {/* List / Empty state */}
+      {errands.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No errands yet. Click{' '}
+          <button
+            className="text-primary hover:underline"
+            onClick={() => setCreateDialogOpen(true)}
+          >
+            New Errand
+          </button>{' '}
+          or run:{' '}
+          <code className="rounded bg-muted px-1 py-0.5 text-xs font-mono">
+            cw errand start "&lt;description&gt;" --project &lt;id&gt;
+          </code>
+        </p>
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-border">
+          <table className="w-full text-sm">
+            <thead className="border-b border-border bg-muted/50">
+              <tr>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">ID</th>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Description</th>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Branch</th>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Status</th>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Agent</th>
+                <th className="px-4 py-2.5 text-left font-medium text-muted-foreground">Created</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {errands.map((e) => (
+                <tr
+                  key={e.id}
+                  className="cursor-pointer hover:bg-muted/40 transition-colors"
+                  onClick={() => selectErrand(e.id)}
+                >
+                  <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                    {e.id.slice(0, 8)}
+                  </td>
+                  <td className="px-4 py-3 max-w-[280px] truncate">
+                    {e.description.length > 60
+                      ? e.description.slice(0, 57) + '…'
+                      : e.description}
+                  </td>
+                  <td className="px-4 py-3 font-mono text-xs text-muted-foreground truncate max-w-[180px]">
+                    {e.branch}
+                  </td>
+                  <td className="px-4 py-3">
+                    <StatusBadge status={e.status} />
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground">
+                    {e.agentAlias ?? '—'}
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground whitespace-nowrap">
+                    {formatRelativeTime(e.createdAt.toISOString())}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Create dialog */}
+      <CreateErrandDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+      />
+
+      {/* Detail slide-over */}
+      {selectedErrandId && (
+        <ErrandDetailPanel
+          errandId={selectedErrandId}
+          onClose={() => selectErrand(null)}
+        />
+      )}
+    </motion.div>
+  );
+}