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.css

@@ -0,0 +1,80 @@
+/* Drawer chrome for <SidePanel> — backdrop, drawer box, header, close
+   button. Content styling (.agent-inbox, .inbox-*, .side-panel-empty)
+   already ships globally via agent.css; the two rules at the bottom
+   here re-target agent.css's old `hive-side-panel .agent-inbox …`
+   flatten-when-inside-a-panel overrides at this component's own class
+   instead, since this is a plain Preact tree, not a custom element. */
+.agent-side-panel-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 60;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+.agent-side-panel-backdrop.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.agent-side-panel-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(26em, 96vw);
+  background: var(--bg-elev);
+  border-left: 1px solid var(--border);
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
+  z-index: 61;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 200ms ease;
+}
+.agent-side-panel-drawer.open {
+  transform: translateX(0);
+}
+.agent-side-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6em 0.8em;
+  border-bottom: 1px solid var(--border);
+  color: var(--fg);
+}
+.agent-side-panel-title {
+  font-weight: bold;
+  letter-spacing: 0.03em;
+}
+.agent-side-panel-close {
+  background: none;
+  border: 0;
+  color: var(--muted);
+  font-size: 1.1em;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.3em 0.5em;
+  min-width: 2.75em;
+  min-height: 2.75em;
+}
+.agent-side-panel-close:hover {
+  color: var(--fg);
+}
+.agent-side-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.8em;
+}
+.agent-side-panel-body .agent-inbox {
+  margin: 0;
+  font-size: inherit;
+  color: var(--fg);
+}
+.agent-side-panel-body .agent-inbox ul {
+  background: transparent;
+  border-left: 0;
+  padding: 0;
+  max-height: none;
+  overflow: visible;
+}