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

@@ -14,9 +14,13 @@ export interface HeaderProps {
   label: string;
   hiveLabel?: string | null;
   children?: ComponentChildren;
+  /** Right-cluster flyout triggers (inbox/todos pills today, the
+   * overflow menu button lands here in a later commit) — mirrors the
+   * old markup's `.agent-header-pills` third column. */
+  pills?: ComponentChildren;
 }
 
-export function Header({ label, hiveLabel, children }: HeaderProps) {
+export function Header({ label, hiveLabel, children, pills }: HeaderProps) {
   return (
     <header class="agent-header">
       <img class="agent-icon" src="icon" alt="" />
@@ -27,6 +31,7 @@ export function Header({ label, hiveLabel, children }: HeaderProps) {
         {hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
         <div class="agent-header-row">{children}</div>
       </div>
+      {pills ? <div class="agent-header-pills">{pills}</div> : null}
     </header>
   );
 }