frontend: convert themed dialogs to light-DOM custom elements

Pilot for the components-split proposal (mara wants a look at using
custom elements now that we're recent-Firefox-only). Picked the
themed dialog system as the first candidate: most self-contained of
our existing de-facto reusable components (transient, imperative call
sites, no external render-tree coupling), and shared between the
dashboard and per-agent UI already.

<hive-dialog> replaces the manually-built tc-backdrop/tc-box tree in
openDialog — connectedCallback renders, the keydown listener and
click-outside-to-dismiss are owned by the element instead of a
closure, and the outcome is reported via a hive-dialog-close
CustomEvent rather than a hand-rolled resolve callback threaded
through the DOM tree.

<hive-toast> replaces the toast div themedToast built inline —
connectedCallback starts the auto-dismiss timer,
disconnectedCallback clears it (previously a closure-captured
setTimeout handle with no explicit cleanup on early removal).

Both are light DOM (no shadow root) — styling stays exactly where it
already lived, in modal.css's .tc-* classes, imported globally by
both packages' base stylesheets. This was the deliberate call for a
first pilot: shadow DOM would need every shared stylesheet
re-imported per instance (CSS custom properties pierce shadow
boundaries for theming, but plain class rules like .btn don't), which
is real migration cost. Light DOM validates the pattern (lifecycle
encapsulation, less manual event bookkeeping) without paying that
cost; shadow DOM is a drop-in upgrade to these same two classes if a
later pilot wants real style encapsulation.

Public API unchanged (openDialog/themedConfirm/themedPrompt/
themedToast) — every existing call site across dashboard + agent
keeps working with no changes. Verified with a full frontend build.

frontend/packages/shared/src/modal.css

@@ -1,9 +1,12 @@
 /* modal.css — themed dialog component styles.
-   Pairs with modal.js (themedConfirm / themedPrompt / themedToast). The
-   dialogs are raised from the shared `bindAsyncForms` data-async /
-   data-confirm handler (forms.js), used by both the dashboard and the
-   per-agent UI, so both packages' base stylesheets (common.css / agent.css)
-   @import this to keep the styles present wherever a dialog can fire.
+   Pairs with modal.js (themedConfirm / themedPrompt / themedToast),
+   whose `<hive-dialog>` / `<hive-toast>` custom elements are styled
+   entirely by class selectors here (light DOM, no shadow root — see the
+   design note atop modal.js). The dialogs are raised from the shared
+   `bindAsyncForms` data-async / data-confirm handler (forms.js), used by
+   both the dashboard and the per-agent UI, so both packages' base
+   stylesheets (common.css / agent.css) @import this to keep the styles
+   present wherever a dialog can fire.
    (Previously these rules lived in dashboard.css, so dialogs rendered
    unstyled on standalone dashboard pages such as /core, and the per-agent
    UI never had them at all — a themed-dialogs consistency fix moved them