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/InboxPanel.tsx

@@ -0,0 +1,86 @@
+// <InboxPanel> — content rendered inside <SidePanel> for the inbox
+// flyout. "mark all read" POSTs to the *dashboard's* origin (not this
+// agent's own backend) via a plain `fetch()`, same as app.js's
+// `buildInboxMarkAllRow` — unlike pause/resume this one's fine as a
+// fetch even when the two are genuinely cross-origin, because
+// `hive-c0re`'s `/api/agent/{name}/mark-all-read` route replies with
+// JSON, not a redirect; in the common gateway-fronted deployment
+// `dashboardBase` already resolves to `location.origin` anyway (see
+// dashboardBase.ts), so it's same-origin in practice.
+import { useState } from 'preact/hooks';
+import { useConfirmClick } from '../lib/useConfirmClick.js';
+import type { InboxRow } from '../types.js';
+
+export interface InboxPanelProps {
+  rows: InboxRow[];
+  label: string;
+  dashboardBase: string;
+  onCleared: () => void;
+}
+
+function fmtTs(unixSeconds: number): string {
+  return new Date(unixSeconds * 1000).toISOString().replace('T', ' ').slice(5, 19);
+}
+
+export function InboxPanel({ rows, label, dashboardBase, onCleared }: InboxPanelProps) {
+  const [status, setStatus] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function markAllRead() {
+    if (!dashboardBase || !label) {
+      setStatus('dashboard url / label unknown');
+      return;
+    }
+    setBusy(true);
+    setStatus('clearing…');
+    try {
+      const resp = await fetch(`${dashboardBase}api/agent/${encodeURIComponent(label)}/mark-all-read`, {
+        method: 'POST',
+      });
+      if (resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        const n = Number((data as { marked?: number }).marked) || 0;
+        setStatus(`✓ marked ${n} as read`);
+        onCleared();
+      } else {
+        setStatus(`failed: http ${resp.status}`);
+      }
+    } catch (err) {
+      setStatus(`failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const { armed, trigger } = useConfirmClick(markAllRead);
+
+  if (!rows.length) {
+    return <p class="side-panel-empty">inbox empty.</p>;
+  }
+
+  return (
+    <div class="agent-inbox">
+      <div class="inbox-mark-all-row">
+        <button
+          type="button"
+          class="inbox-mark-all-btn"
+          onClick={trigger}
+          disabled={busy}
+          title="mark every queued message for this agent as read — drains the host broker's pending + delivered-unacked rows. history shown here is the most-recent-N regardless of state, so the list itself stays visible."
+        >
+          {armed ? 'sure? click again' : '✓ mark all read'}
+        </button>
+        <span class="inbox-mark-status">{status}</span>
+      </div>
+      <ul>
+        {rows.map((m) => (
+          <li key={m.id} class={m.in_reply_to != null ? 'inbox-reply' : undefined}>
+            {m.in_reply_to != null && <span class="inbox-reply-tag">↳ reply · </span>}
+            <span class="inbox-ts">{fmtTs(m.at)}</span> <span class="inbox-from">{m.from}</span>{' '}
+            <span class="inbox-sep">→</span> <span class="inbox-body">{m.body}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}