agent: TodosPanel/InboxPanel flyouts + header pills

New Preact `SidePanel` drawer — deliberately not the shared
`<hive-side-panel>` shadow-DOM custom element, same rationale as
StatusChips' Badge/Dropdown. Drops that element's drag-to-resize +
localStorage width persistence for this first slice (fixed width via
CSS); reuses agent.css's existing `.agent-inbox`/`.inbox-*`/
`.side-panel-empty` content classes verbatim, only the drawer chrome
itself is new (SidePanel.css). Kept mounted regardless of open/closed
state (toggles the `open` prop) rather than conditionally rendered, so
the slide/fade CSS transitions actually fire on both open and close.

- InboxPanel: renders `state.inbox` (already polled by useAgentState)
  + a "mark all read" action — plain `fetch()` to the dashboard's
  `/api/agent/{name}/mark-all-read` (JSON response, same as app.js;
  unlike pause/resume this one doesn't need a form-submit workaround).
- TodosPanel: new `useTodos` hook (same 4s poll cadence as app.js's
  `refreshTodos`) + bulk select/mark-done via `api/todos/mark-done`.
- Both destructive-but-recoverable actions use a new `useConfirmClick`
  two-click-arm hook instead of the old shadow-DOM `themedConfirm`
  modal — lighter weight, no backdrop/dialog machinery needed for a
  "did you mean to click that" nudge.
- HeaderPill: the inbox/todos count triggers in the header's right
  cluster; Header.tsx gained a `pills` slot for them (mirrors the old
  markup's `.agent-header-pills` third column).
- types.ts: added `InboxRow`/`TodoRow`, mirroring
  `hive_sh4re::inbox::{InboxRow, LooseEnd}` (todo variant only —
  `/api/todos` never returns the others).

Screenshot-verified against a mock server exercising both panels.

frontend/packages/agent/src/Root.tsx

@@ -2,17 +2,25 @@
 // to the real `/api/state` snapshot via `useAgentState`. Still a slice,
 // not the whole page — see main.tsx's file comment for what's left
 // (the live SSE stream, login flow, inbox/todos, term input, overflow).
+import { useState } from 'preact/hooks';
 import type { BadgeTone } from '@hive/shared/badge.js';
 import { Header } from './components/Header.js';
 import { StatusChips } from './components/StatusChips.js';
 import { LiveStream } from './components/LiveStream.js';
+import { HeaderPill } from './components/HeaderPill.js';
+import { SidePanel } from './components/SidePanel.js';
+import { InboxPanel } from './components/InboxPanel.js';
+import { TodosPanel } from './components/TodosPanel.js';
 import { useAgentState } from './hooks/useAgentState.js';
+import { useTodos } from './hooks/useTodos.js';
 import { fmtAge, fmtTokens } from './lib/format.js';
 import { resolveDashboardBase } from './lib/dashboardBase.js';
 import { submitPauseResume } from './lib/pauseAction.js';
 import { postModel, postEffort } from './lib/modelEffort.js';
 import type { TokenUsage } from './types.js';
 
+type OpenPanel = 'inbox' | 'todos' | null;
+
 const ALIVE_LABELS: Record<string, { glyph: string; text: string; tone: BadgeTone }> = {
   online: { glyph: '●', text: 'alive', tone: 'positive' },
   rate_limited: { glyph: '⊘', text: 'rate limited', tone: 'warning' },
@@ -41,11 +49,40 @@ function tokenTotal(u: TokenUsage | null): number | null {
 
 export function Root() {
   const { state, refresh } = useAgentState();
+  const { todos, refresh: refreshTodos } = useTodos();
+  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
+
+  const pills = (
+    <>
+      <HeaderPill kind="inbox" icon="📬" label="inbox" count={state?.inbox.length ?? 0} onClick={() => setOpenPanel('inbox')} />
+      <HeaderPill kind="todos" icon="📋" label="todos" count={todos.length} onClick={() => setOpenPanel('todos')} />
+    </>
+  );
+  // Kept mounted regardless of `openPanel` (open/closed toggles just the
+  // `open` prop) rather than conditionally rendering the whole
+  // component — SidePanel's slide/fade CSS transitions only fire on a
+  // class change after mount, not on an already-open initial render, so
+  // mount-on-open would skip both the open AND the close animation.
+  const panelTitle = openPanel === 'inbox' ? `inbox · ${state?.inbox.length ?? 0}` : openPanel === 'todos' ? `todos · ${todos.length}` : '';
+  const panel = (
+    <SidePanel open={openPanel !== null} title={panelTitle} onClose={() => setOpenPanel(null)}>
+      {openPanel === 'inbox' ? (
+        <InboxPanel
+          rows={state?.inbox ?? []}
+          label={state?.label ?? ''}
+          dashboardBase={state ? resolveDashboardBase(state.dashboard_port) : ''}
+          onCleared={refresh}
+        />
+      ) : openPanel === 'todos' ? (
+        <TodosPanel todos={todos} onCleared={refreshTodos} />
+      ) : null}
+    </SidePanel>
+  );
 
   if (!state) {
     return (
       <>
-        <Header label="…">
+        <Header label="…" pills={pills}>
           <StatusChips
             aliveLabel="… connecting"
             aliveTone="neutral"
@@ -64,6 +101,7 @@ export function Root() {
         <main className="agent-main">
           <LiveStream />
         </main>
+        {panel}
       </>
     );
   }
@@ -81,7 +119,7 @@ export function Root() {
 
   return (
     <>
-      <Header label={state.label} hiveLabel={[state.swarm_name, state.hive_name].filter(Boolean).join(' / ') || null}>
+      <Header label={state.label} hiveLabel={[state.swarm_name, state.hive_name].filter(Boolean).join(' / ') || null} pills={pills}>
         <StatusChips
           aliveLabel={`${alive.glyph} ${alive.text}`}
           aliveTone={alive.tone}
@@ -109,6 +147,7 @@ export function Root() {
       <main className="agent-main">
         <LiveStream onLiveTurnBoundary={refresh} />
       </main>
+      {panel}
     </>
   );
 }