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/hooks/useTodos.ts

@@ -0,0 +1,48 @@
+// useTodos — polls `GET /api/todos` on a light interval, same cadence
+// as app.js's `setInterval(refreshTodos, 4000)`. Kept separate from
+// useAgentState: todos change asynchronously (matrix syncs, bash task
+// starts/completions) independent of the state snapshot, and the old
+// page polled them independently too.
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { TodoRow } from '../types.js';
+
+const POLL_MS = 4000;
+
+export interface UseTodosResult {
+  todos: TodoRow[];
+  refresh: () => void;
+}
+
+export function useTodos(): UseTodosResult {
+  const [todos, setTodos] = useState<TodoRow[]>([]);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stoppedRef = useRef(false);
+
+  async function poll() {
+    try {
+      const resp = await fetch('api/todos');
+      if (!resp.ok) throw new Error(`http ${resp.status}`);
+      const body = (await resp.json()) as { todos?: TodoRow[] };
+      if (stoppedRef.current) return;
+      // Defensive filter: the wire type is the general `LooseEnd` tagged
+      // enum even though this endpoint only ever emits the `todo` variant
+      // today — see types.ts's TodoRow comment.
+      setTodos((body.todos ?? []).filter((t) => t.kind === 'todo'));
+    } catch (err) {
+      console.warn('todos fetch failed', err);
+      if (!stoppedRef.current) setTodos([]);
+    }
+  }
+
+  useEffect(() => {
+    stoppedRef.current = false;
+    poll();
+    timerRef.current = setInterval(poll, POLL_MS);
+    return () => {
+      stoppedRef.current = true;
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+
+  return { todos, refresh: poll };
+}