swarm-ui: drop the redundant outer dialog card, move close into the panel header

Dialog and Panel both drew their own bordered/backgrounded card in the
same --bg-elev, so a Panel-based dialog (create-agent, link-matrix-account)
rendered as two concentric cards with a floating close button on the
outer one and no purpose to it.

Give Dialog a "plain" mode that drops its own card chrome (border,
background, padding) and floating close button, and give Panel an
optional onClose that renders a close button at the end of its own
header row instead. AgentsPage's two Panel-backed dialogs now use
plain + Panel's onClose, so the Panel is the dialog's only visible
card. ConfirmDialog (no Panel of its own) is unaffected — plain
defaults to false, unchanged card + floating close button.

Added a ComponentsPage sample demonstrating the plain + onClose
pairing. Verified both dialog modes via a real headless-chromium
screenshot (plain dialog: single card, close button in the header
bar; default dialog: unchanged floating close button).

frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx

@@ -592,13 +592,15 @@ export function AgentsPage() {
         open={createOpen}
         onClose={() => setCreateOpen(false)}
         label="create agent"
+        plain
       >
-        <CreateAgentForm />
+        <CreateAgentForm onClose={() => setCreateOpen(false)} />
       </Dialog>
       <Dialog
         open={matrixTarget !== null}
         onClose={() => setMatrixTarget(null)}
         label="link a matrix account"
+        plain
       >
         {/* `matrixTarget.hive` is non-null here — the trigger badge above
             is disabled without one, so this can only open with a real
@@ -607,6 +609,7 @@ export function AgentsPage() {
           <LinkMatrixAccountForm
             hive={matrixTarget.hive}
             agent={matrixTarget.name}
+            onClose={() => setMatrixTarget(null)}
           />
         ) : null}
       </Dialog>