deepspace 0.19.5 → 0.21.0

package/features/ai-chat/feature.json

@@ -29,13 +29,13 @@
     "highlight.js": "^11.10.0"
   },
   "instructions": [
-    "Embed ChatPanel standalone (without the conversation rail) for sidebar / modal / popover use. Pass `chatId={null}` to auto-create on first send; use `onChatCreated` to track the new id.",
+    "Embed ChatPanel standalone (without the conversation rail) for sidebar / modal / popover use. Pass `chatId={null}` to auto-create on first send — the panel keeps the created chat itself; `onChatCreated` is an optional notification for parents that track ids.",
     "All chat data lives in the app's RecordRoom DO under the ai-chats and ai-messages collections. RBAC is enforced — users only see their own chats and messages.",
     "The backend route POST /api/ai/chat takes { chatId, userMessageId, content, modelId? } and runs the full server-owned pipeline: load history, compact if needed, stream assistant, persist on finish.",
     "Compaction (summarizing older history when the conversation grows large) is server-side and cached on the chat row. No client-side compaction logic."
   ],
   "patterns": [
-    "ChatPanel takes `chatId` (or null). Parent owns chat lifecycle (create / select / delete); pass `disabled` while a parent-driven create is in flight so the panel doesn't kick off its own auto-create.",
+    "ChatPanel takes `chatId` (or null, in which case the panel creates and keeps its own chat — remount with `key` for a new one). A parent that manages chats (create / select / delete) passes real ids, and `disabled` while a parent-driven create is in flight so the panel doesn't kick off its own auto-create.",
     "ChatPanel and the server agent both consume the SDK's canonical model catalog; never add a second model allowlist in app code.",
     "Compaction summary is stored on the ai-chats row (compactedSummary, compactedThroughId). The summarizer is user-billed by default; pass `makeDefaultSummarizer(c.env)` with no authToken in worker.ts to absorb the cost as the developer instead.",
     "Tool execution is server-side and per-user RBAC-enforced (records.* tools see only what the caller would see). The canonical runner enforces at most 20 tool calls per turn."

package/features/ai-chat/src/AiChatPage.tsx

@@ -82,6 +82,9 @@ export default function AiChatPage() {
   const [dragging, setDragging] = useState(false)
   const [creatingChat, setCreatingChat] = useState(false)
   const [createError, setCreateError] = useState<string | null>(null)
+  // Delete/rename failures live apart from createError: its Retry re-runs
+  // create, which is the wrong offer after a failed delete or rename.
+  const [actionError, setActionError] = useState<string | null>(null)
 
   const chatCardRef = useRef<HTMLDivElement>(null)
 
@@ -193,6 +196,7 @@ export default function AiChatPage() {
     // any in-flight stream when activeChatId flips id→null, so the orphan
     // assistant write we'd otherwise produce on cascade-delete is prevented
     // by F1 (abort on id→null) — not by ordering this call before the fetch.
+    setActionError(null)
     try {
       const token = await getAuthToken()
       const headers: Record<string, string> = {}
@@ -202,11 +206,12 @@ export default function AiChatPage() {
       setActiveChatId((cur) => (cur === id ? null : cur))
     } catch (err) {
       console.error('[ai-chat-page] delete failed:', err)
-      setCreateError(err instanceof Error ? `Couldn't delete chat: ${err.message}` : "Couldn't delete chat")
+      setActionError(err instanceof Error ? `Couldn't delete chat: ${err.message}` : "Couldn't delete chat")
     }
   }, [])
 
   const handleRename = useCallback(async (id: string, title: string) => {
+    setActionError(null)
     try {
       const token = await getAuthToken()
       const headers: Record<string, string> = { 'Content-Type': 'application/json' }
@@ -219,6 +224,7 @@ export default function AiChatPage() {
       if (!res.ok) throw new Error(`rename failed: ${res.status}`)
     } catch (err) {
       console.error('[ai-chat-page] rename failed:', err)
+      setActionError(err instanceof Error ? `Couldn't rename chat: ${err.message}` : "Couldn't rename chat")
     }
   }, [])
 
@@ -303,26 +309,17 @@ export default function AiChatPage() {
                     onHistory={() => setHistoryOpen(true)}
                   />
                   {createError && (
-                    <div role="alert" className="mx-4 mb-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
-                      <div className="flex items-start gap-2">
-                        <span className="flex-1 leading-relaxed">{createError}</span>
-                        <button
-                          type="button"
-                          onClick={() => { void handleNew() }}
-                          className="rounded-md border border-destructive/30 px-2 py-0.5 text-[12px] font-medium hover:bg-destructive/10"
-                        >
-                          Retry
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setCreateError(null)}
-                          aria-label="Dismiss"
-                          className="rounded-md px-1 text-[14px] leading-none hover:bg-destructive/10"
-                        >
-                          ×
-                        </button>
-                      </div>
-                    </div>
+                    <ErrorBanner
+                      message={createError}
+                      onRetry={() => { void handleNew() }}
+                      onDismiss={() => setCreateError(null)}
+                    />
+                  )}
+                  {actionError && (
+                    <ErrorBanner
+                      message={actionError}
+                      onDismiss={() => setActionError(null)}
+                    />
                   )}
                 </>
               }
@@ -358,6 +355,44 @@ export default function AiChatPage() {
   )
 }
 
+// ============================================================================
+// Error banner — dismissible destructive strip under the header. Retry is
+// opt-in so a failed delete/rename never offers an unrelated create action.
+// ============================================================================
+
+function ErrorBanner({
+  message, onRetry, onDismiss,
+}: {
+  message: string
+  onRetry?: () => void
+  onDismiss: () => void
+}) {
+  return (
+    <div role="alert" className="mx-4 mb-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
+      <div className="flex items-start gap-2">
+        <span className="flex-1 leading-relaxed">{message}</span>
+        {onRetry && (
+          <button
+            type="button"
+            onClick={onRetry}
+            className="rounded-md border border-destructive/30 px-2 py-0.5 text-[12px] font-medium hover:bg-destructive/10"
+          >
+            Retry
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          className="rounded-md px-1 text-[14px] leading-none hover:bg-destructive/10"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  )
+}
+
 // ============================================================================
 // Chat header bar — title on the left, action icons on the right.
 // Mirrors Miyagi's FloatingChatHeader (`title | new chat | history | close`).

package/features/ai-chat/src/ChatPanel.tsx

@@ -1,11 +1,13 @@
 /**
  * DO-backed AI chat surface.
  *
- * The parent owns chat lifecycle. Pass `chatId={null}` to create on first send
- * and update the parent from `onChatCreated`.
+ * Pass `chatId={null}` to create a chat on first send. The panel keeps the
+ * created id itself; `onChatCreated` merely notifies, and a parent-passed
+ * `chatId` — including a change back to null for "new chat" — always wins.
  */
 
 import {
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -46,11 +48,11 @@ type RenderMessage = {
 }
 
 export type ChatPanelProps = {
-  /** Active chat. `null` creates one on first send. */
+  /** Active chat. `null` creates one on first send and the panel keeps it — a never-passed `chatId` means one chat per mount; remount with `key` for a new one. */
   chatId: string | null
   /** Current user id; scopes the messages query as defense in depth. */
   userId: string
-  /** Required in practice when `chatId` is null so the parent tracks the new chat. */
+  /** Notified with the id when the panel creates a chat on first send. */
   onChatCreated?: (chatId: string) => void
   /** Models shown in the picker. */
   models?: ModelOption[]
@@ -108,15 +110,36 @@ export function ChatPanel({
 
   const groupedModels = useMemo(() => groupModelsByProvider(models), [models])
   const selectedModel = models.find((model) => model.id === modelId)
+
+  // Uncontrolled fallback: with `chatId={null}` the panel keeps the chat it
+  // auto-creates on first send, so the overlay, the messages query, and later
+  // sends all target that chat. Any prop change — including back to null,
+  // which means "new chat" — takes precedence and clears it.
+  const [ownChatId, setOwnChatId] = useState<string | null>(null)
+  const [seenChatId, setSeenChatId] = useState(chatId)
+  if (seenChatId !== chatId) {
+    setSeenChatId(chatId)
+    setOwnChatId(null)
+  }
+  const activeChatId = chatId ?? ownChatId
+
+  const handleChatCreated = useCallback(
+    (id: string) => {
+      setOwnChatId(id)
+      onChatCreated?.(id)
+    },
+    [onChatCreated],
+  )
+
   const { send, stop, retry, isLoading, error, inFlight } = useStreamingChat({
-    chatId,
+    chatId: activeChatId,
     modelId,
-    onChatCreated,
+    onChatCreated: handleChatCreated,
   })
 
   const queryWhere = useMemo(
-    () => ({ chatId: chatId ?? '__none__', userId }),
-    [chatId, userId],
+    () => ({ chatId: activeChatId ?? '__none__', userId }),
+    [activeChatId, userId],
   )
   const { records } = useQuery<AiMessageData>('ai-messages', {
     where: queryWhere,
@@ -138,12 +161,12 @@ export function ChatPanel({
   )
   const messages = useMemo<RenderMessage[]>(() => {
     const overlay = inFlight.filter((message) => {
-      if (message.forChatId !== chatId) return false
+      if (message.forChatId !== activeChatId) return false
       if (persistedIds.has(message.id)) return false
       return !message.serverId || !persistedIds.has(message.serverId)
     })
     return [...persisted, ...overlay]
-  }, [chatId, inFlight, persisted, persistedIds])
+  }, [activeChatId, inFlight, persisted, persistedIds])
 
   useEffect(() => {
     const element = scrollRef.current

package/features/ai-chat/src/__tests__/ChatPanel.lifecycle.test.tsx

@@ -0,0 +1,156 @@
+// @vitest-environment jsdom
+
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChatPanel } from '../ChatPanel'
+
+const { queryWheres } = vi.hoisted(() => ({
+  queryWheres: [] as Array<{ chatId?: string; userId?: string }>,
+}))
+
+vi.mock('deepspace', async () => {
+  // The SSE codec is pure; run the real one so the stubbed wire bytes below
+  // exercise the same decode path production streams take.
+  const stream = await vi.importActual<typeof import('@/client/ai-stream')>('@/client/ai-stream')
+  return {
+    decodeAiStreamChunk: stream.decodeAiStreamChunk,
+    parseSseLine: stream.parseSseLine,
+    getAuthToken: async () => null,
+    listDeepSpaceAgentModels: () => [
+      { id: 'model-a', label: 'Model A', providerLabel: 'Provider' },
+    ],
+    useQuery: (_collection: string, options: { where: { chatId?: string; userId?: string } }) => {
+      queryWheres.push(options.where)
+      return { records: [] as Array<{ recordId: string; data: Record<string, unknown> }> }
+    },
+  }
+})
+
+// The turn renderer pulls app-level markdown deps (react-markdown,
+// remark-breaks) that feature.json ships to scaffolded apps but the SDK
+// workspace does not install. This suite is about ChatPanel.tsx's chat
+// lifecycle, not rendering — substitute minimal, queryable turns.
+vi.mock('../ChatPanel.messages', () => ({
+  EmptyState: () => <div data-empty-state="">Empty state</div>,
+  MessageTurn: ({ role, content }: { role: string; content: string }) => (
+    <div data-turn={role}>{content}</div>
+  ),
+  ThinkingIndicator: () => <div data-thinking="" />,
+}))
+;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+let parentRenders = 0
+let chatCreates = 0
+let streamBodies: Array<Record<string, unknown>> = []
+
+/**
+ * A parent stuck at `chatId={null}` — no `onChatCreated`, no state. The panel
+ * must run the whole first-chat lifecycle without a single parent rerender.
+ */
+function Parent() {
+  parentRenders += 1
+  return <ChatPanel chatId={null} userId="user-1" />
+}
+
+beforeEach(() => {
+  parentRenders = 0
+  chatCreates = 0
+  streamBodies = []
+  queryWheres.length = 0
+
+  window.requestAnimationFrame = (callback) => window.setTimeout(callback, 0)
+  window.cancelAnimationFrame = (handle) => window.clearTimeout(handle)
+  // jsdom implements no element scrolling; the panel pins its log to the bottom.
+  window.HTMLElement.prototype.scrollTo = () => {}
+
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input)
+      if (url === '/api/ai/chats') {
+        chatCreates += 1
+        return Response.json({ chat: { recordId: 'chat-new' } })
+      }
+      if (url === '/api/ai/chat') {
+        streamBodies.push(JSON.parse(String(init?.body)) as Record<string, unknown>)
+        return new Response(
+          `data: ${JSON.stringify({ type: 'text-delta', delta: 'Hi.' })}\n\ndata: [DONE]\n\n`,
+          { headers: { 'X-Asst-Id': `asst-${streamBodies.length}` } },
+        )
+      }
+      throw new Error(`unexpected fetch: ${url}`)
+    }),
+  )
+
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+
+/** Drain the send's microtask chain (create → stream → settle) until idle. */
+async function flushUntil(ready: () => boolean): Promise<void> {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    if (ready()) return
+    await act(async () => {
+      await Promise.resolve()
+    })
+  }
+  throw new Error('panel never settled after send')
+}
+
+async function sendMessage(content: string): Promise<void> {
+  const textarea = container.querySelector('textarea')
+  expect(textarea).not.toBeNull()
+  await act(async () => {
+    const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+    setValue?.call(textarea, content)
+    textarea?.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await act(async () => {
+    container.querySelector('form')?.dispatchEvent(
+      new Event('submit', { bubbles: true, cancelable: true }),
+    )
+  })
+  await flushUntil(() => container.querySelector('[aria-label="Send message"]') !== null)
+}
+
+describe('ChatPanel first-chat lifecycle with chatId={null}', () => {
+  it('renders the first exchange from its own chat without a parent rerender', async () => {
+    await act(async () => root.render(<Parent />))
+    expect(container.querySelector('[data-empty-state]')).not.toBeNull()
+
+    await sendMessage('Hello from a fresh mount')
+
+    expect(container.querySelector('[data-empty-state]')).toBeNull()
+    const turns = [...container.querySelectorAll('[data-turn]')]
+    expect(turns.map((turn) => turn.getAttribute('data-turn'))).toEqual(['user', 'assistant'])
+    expect(turns[0]?.textContent).toBe('Hello from a fresh mount')
+    expect(turns[1]?.textContent).toBe('Hi.')
+    expect(parentRenders).toBe(1)
+
+    // The persisted-messages query re-keys onto the promoted chat id.
+    expect(queryWheres[0]?.chatId).toBe('__none__')
+    expect(queryWheres.at(-1)?.chatId).toBe('chat-new')
+  })
+
+  it('reuses the promoted chat for the second send instead of creating another', async () => {
+    await act(async () => root.render(<Parent />))
+
+    await sendMessage('First message')
+    await sendMessage('Second message')
+
+    expect(chatCreates).toBe(1)
+    expect(streamBodies.map((body) => body.chatId)).toEqual(['chat-new', 'chat-new'])
+    const userTurns = [...container.querySelectorAll('[data-turn="user"]')]
+    expect(userTurns.at(-1)?.textContent).toBe('Second message')
+  })
+})

package/features/cron/src/CronLogPage.tsx

@@ -2,20 +2,26 @@
  * Cron Log Page
  *
  * Subscribes to the app's CronRoom via `useCronMonitor` and renders live
- * task state + execution history. The DO is keyed by `SCOPE_ID`
- * (`app:${APP_ID}`) so a single shared CronRoom DO instance backs the
- * whole app — same pattern as RecordRoom.
+ * task state + execution history with the scaffold's ui primitives and
+ * theme tokens. The DO is keyed by `SCOPE_ID` (`app:${APP_ID}`) so a
+ * single shared CronRoom DO instance backs the whole app — same pattern
+ * as RecordRoom.
  *
  * Used both as a UI surface for verifying that scheduled tasks are firing
  * in production, and as the data source for the cron e2e spec at
- * tests/feature-tests/tests/cron.spec.ts.
+ * tests/feature-tests/tests/cron.spec.ts — keep the data-testid and
+ * data-* attributes stable.
  */
 
 import { useCronMonitor } from 'deepspace'
+import { Badge, EmptyState } from '@/components/ui'
 import { SCOPE_ID } from '../constants'
 
+const TH = 'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground'
+const TD = 'px-4 py-3 text-sm'
+
 export default function CronLogPage() {
-  const { tasks, history, connected } = useCronMonitor(SCOPE_ID)
+  const { tasks, history, connected, lastError } = useCronMonitor(SCOPE_ID)
 
   // Newest first.
   const sorted = [...history].sort((a, b) => {
@@ -23,77 +29,109 @@ export default function CronLogPage() {
   })
 
   return (
-    <div data-testid="cron-log-page" style={{ padding: 24 }}>
-      <h1>Cron Log</h1>
-      <p>
-        Each row is one tick of a scheduled task fired by the AppCronRoom DO.
-        Heartbeat ticks every minute once the DO alarm picks up the registered
-        config.
-      </p>
-
-      <div data-testid="cron-log-status" style={{ marginBottom: 12 }}>
-        Connection: {connected ? 'live' : 'connecting…'}
+    <div data-testid="cron-log-page" className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">Cron Log</h1>
+          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
+            Each row is one tick of a scheduled task fired by the AppCronRoom DO.
+            Heartbeat ticks every minute once the DO alarm picks up the registered
+            config.
+          </p>
+        </div>
+        <div
+          data-testid="cron-log-status"
+          className="flex shrink-0 items-center gap-2 text-sm text-muted-foreground"
+        >
+          Connection:
+          <Badge variant={connected ? 'success' : 'secondary'}>
+            {connected ? 'live' : 'connecting…'}
+          </Badge>
+        </div>
       </div>
 
-      <h2>Tasks</h2>
-      <table data-testid="cron-tasks" style={{ borderCollapse: 'collapse', width: '100%' }}>
-        <thead>
-          <tr>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Name</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Schedule</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Last run</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Next run</th>
-          </tr>
-        </thead>
-        <tbody>
-          {tasks.map((task) => (
-            <tr key={task.name} data-testid="cron-task-row" data-task={task.name}>
-              <td style={{ padding: 8 }}>{task.name}</td>
-              <td style={{ padding: 8 }}>
-                {task.schedule
-                  ? `${task.schedule} (${task.timezone ?? 'UTC'})`
-                  : `every ${task.intervalMinutes ?? '?'} min`}
-              </td>
-              <td style={{ padding: 8 }}>{task.lastRunAt ?? '—'}</td>
-              <td style={{ padding: 8 }}>{task.nextRunAt ?? '—'}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      {lastError && (
+        <p data-testid="cron-log-error" className="mt-2 text-sm text-destructive">
+          error: {lastError}
+        </p>
+      )}
 
-      <h2 style={{ marginTop: 24 }}>History</h2>
-      <div data-testid="cron-log-count">{sorted.length} entries</div>
+      <h2 className="mt-8 text-lg font-semibold text-foreground">Tasks</h2>
+      <div className="mt-3 overflow-x-auto rounded-xl border border-border bg-card/60">
+        <table data-testid="cron-tasks" className="w-full min-w-160">
+          <thead>
+            <tr className="border-b border-border">
+              <th className={TH}>Name</th>
+              <th className={TH}>Schedule</th>
+              <th className={TH}>Last run</th>
+              <th className={TH}>Next run</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {tasks.map((task) => (
+              <tr key={task.name} data-testid="cron-task-row" data-task={task.name}>
+                <td className={`${TD} font-medium text-foreground`}>{task.name}</td>
+                <td className={`${TD} text-foreground`}>
+                  {task.schedule
+                    ? `${task.schedule} (${task.timezone ?? 'UTC'})`
+                    : `every ${task.intervalMinutes ?? '?'} min`}
+                </td>
+                <td className={`${TD} font-mono text-muted-foreground`}>{task.lastRunAt ?? '—'}</td>
+                <td className={`${TD} font-mono text-muted-foreground`}>{task.nextRunAt ?? '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
 
-      <table style={{ marginTop: 16, borderCollapse: 'collapse', width: '100%' }}>
-        <thead>
-          <tr>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Task</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Started (UTC)</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Duration</th>
-            <th style={{ textAlign: 'left', borderBottom: '1px solid var(--color-border)', padding: 8 }}>Outcome</th>
-          </tr>
-        </thead>
-        <tbody data-testid="cron-log-rows">
-          {sorted.map((entry, idx) => (
-            <tr
-              key={`${entry.taskName}-${entry.startedAt}-${idx}`}
-              data-testid="cron-log-row"
-              data-task={entry.taskName}
-              data-success={entry.success ? '1' : '0'}
-            >
-              <td style={{ padding: 8 }}>{entry.taskName}</td>
-              <td style={{ padding: 8 }}>{entry.startedAt}</td>
-              <td style={{ padding: 8 }}>{entry.durationMs} ms</td>
-              <td style={{ padding: 8 }}>{entry.success ? 'ok' : `error: ${entry.error ?? '?'}`}</td>
+      <div className="mt-8 flex items-baseline justify-between gap-4">
+        <h2 className="text-lg font-semibold text-foreground">History</h2>
+        <span data-testid="cron-log-count" className="text-sm text-muted-foreground">
+          {sorted.length} entries
+        </span>
+      </div>
+      <div className="mt-3 overflow-x-auto rounded-xl border border-border bg-card/60">
+        <table className="w-full min-w-160">
+          <thead>
+            <tr className="border-b border-border">
+              <th className={TH}>Task</th>
+              <th className={TH}>Started (UTC)</th>
+              <th className={TH}>Duration</th>
+              <th className={TH}>Outcome</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody data-testid="cron-log-rows" className="divide-y divide-border/50">
+            {sorted.map((entry, idx) => (
+              <tr
+                key={`${entry.taskName}-${entry.startedAt}-${idx}`}
+                data-testid="cron-log-row"
+                data-task={entry.taskName}
+                data-success={entry.success ? '1' : '0'}
+              >
+                <td className={`${TD} font-medium text-foreground`}>{entry.taskName}</td>
+                <td className={`${TD} font-mono text-muted-foreground`}>{entry.startedAt}</td>
+                <td className={`${TD} text-foreground`}>{entry.durationMs} ms</td>
+                <td className={TD}>
+                  {entry.success ? (
+                    <Badge variant="success" size="sm">
+                      ok
+                    </Badge>
+                  ) : (
+                    <span className="text-destructive">error: {entry.error ?? '?'}</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
 
       {sorted.length === 0 && connected && (
-        <p data-testid="cron-log-empty" style={{ marginTop: 24, opacity: 0.6 }}>
-          No cron ticks recorded yet. The first one should appear within ~90s of deploy.
-        </p>
+        <EmptyState
+          data-testid="cron-log-empty"
+          title="No cron ticks recorded yet"
+          description="The first one should appear within ~90s of deploy."
+        />
       )}
     </div>
   )

package/features/file-attachments/feature.json

@@ -38,7 +38,8 @@
   "patterns": [
     "useMimeTypeDetection() → { detectMimeType, getFileCategory, getExtension, canPreview }",
     "useFilePreview({ url, fileName, mimeType }) → { category, canPreview, textContent, csvData, codeEditorKit, xlsxData, ... }",
-    "useR2Files() → { upload, downloadFile, readFile, deleteFile, list, getUrl, isUploading }",
+    "useR2Files() → { upload, downloadFile, readFile, deleteFile, list, listPage, getUrl, isUploading }",
+    "list() throws on failure (render the error); listPage() returns { files, cursor, truncated } for pagination; entries carry relativeKey",
     "File metadata stored in collection, binary stored in R2",
     "Dynamic imports: PDF.js for PDF, CodeMirror for code, PapaParse for CSV, docx-preview for DOCX, ExcelJS for XLSX"
   ]

package/features/file-manager/feature.json

@@ -18,7 +18,8 @@
   "instructions": [],
   "patterns": [
     "useR2Files() for upload, list, download, delete",
+    "list() throws on failure (page renders the error with a retry); listPage() returns { files, cursor, truncated }; entries carry relativeKey",
     "Drag-and-drop file upload zone",
-    "Inline image preview with getUrl()"
+    "Authenticated inline image preview with readFile()"
   ]
 }