Components / Connection Panel
Connection Panel
The one surface for a single connection: what it gives you, what you currently have, and the one thing you can do about it. Opened from a ConnectionCard in the directory, connected or not.
import { ConnectionPanel, ConnectionPanelSection } from '@layers/ui/connection-panel'Rendered stock
House rules
- A Dialog, not a stacked CanvasSheet — the documented exception to the overlay law in layouts.md. A connection is a credential transaction with a yes at the end (the "wall" row of the sheet-types table), not an artifact you work inside. Every other overlay in a product area is still a CanvasSheet.
- ONE panel for connect and manage. The user asks "what is the state of my Instagram?" and gets the same page whether the answer is "none yet" or "three accounts, one expired". This is what collapsed ?connect= and ?manage= into a single ?connection= param.
- powers renders in BOTH states, above the body. Before this block the directory could not say what a connection did without you starting it, and never said why an existing one mattered. Each entry is a sentence about the user's product ("Your agents read the real codebase, so generated content describes what your app actually does"), never a feature of the vendor's.
- Status words come from CONNECTION_STATUS_PRESENTATION, shared with ConnectionCard — a tile reading "Needs attention" over a panel reading "Warning" is exactly the drift that table prevents.
- Footer follows the modal rule: buttons are size="lg", right-aligned, Cancel (outline) first and the commit action last. A footer that commits with no way out is a bug.
- The panel is always scrollable, so the header and footer stay put no matter how long the body runs. Never add your own max-height or overflow to a body section.
- Per-provider bodies compose ConnectionPanelSection, PropertyList for the facts, and DestructiveActionCard for the one destructive act. Do not invent surface for a provider — see the integration pattern in components.md.