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/components/SidePanel.tsx

@@ -0,0 +1,55 @@
+// <SidePanel> — the slide-in drawer for the inbox/todos flyouts.
+// Deliberately a new Preact component, not the shared
+// `<hive-side-panel>` shadow-DOM custom element (@hive/shared/
+// side-panel.js) — same rationale as StatusChips' Badge/Dropdown:
+// mara's ask was real Preact components for this rewrite, not a port
+// of the old widget family. Drops that element's drag-to-resize +
+// localStorage width persistence for this first slice (fixed width via
+// CSS, see SidePanel.css) — a real simplification, not an oversight;
+// revisit if a fixed width proves cramped in practice.
+//
+// Content styling (`.agent-inbox`, `.inbox-*`, `.side-panel-empty`)
+// already ships globally via `agent.css` and is reused verbatim by
+// InboxPanel/TodosPanel — only the drawer chrome itself is new here.
+import { useEffect } from 'preact/hooks';
+import type { ComponentChildren } from 'preact';
+import './SidePanel.css';
+
+export interface SidePanelProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children?: ComponentChildren;
+}
+
+export function SidePanel({ open, title, onClose, children }: SidePanelProps) {
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <>
+      <div class={`agent-side-panel-backdrop${open ? ' open' : ''}`} onClick={onClose} aria-hidden="true" />
+      <aside
+        class={`agent-side-panel-drawer${open ? ' open' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-hidden={!open}
+        aria-label={title}
+      >
+        <div class="agent-side-panel-head">
+          <span class="agent-side-panel-title">{title}</span>
+          <button type="button" class="agent-side-panel-close" title="close (esc)" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+        <div class="agent-side-panel-body">{children}</div>
+      </aside>
+    </>
+  );
+}