Theme legacy panels to match CommandShell vocabulary

Agent prompt to reproduce:

`<ChannelsPanel>` (and the Slack/Telegram/Discord/WhatsApp sub-panels
it composes) was built for the legacy AdminShell and uses
`globals.css` classes (`.panel-card`, `.button.primary`, `.text-input`,
`.field-label`, `.eyebrow`, `.auth-chip`, `.pill`, `.lede`,
`.muted-copy`, `.panel-grid`) with chunkier 36px buttons, 12px card
radii, solid-green success buttons, and proportional input fonts —
visually inconsistent with the CommandShell aesthetic (Geist Mono
eyebrows, 32px buttons, 8px radius, hairline ghost buttons).

In `src/components/designs/command-shell.tsx`:

1. Wrap the channels view in a `<section className="cmd-channels">`.
2. In the existing `<Style>` block, append scoped overrides under
   `.cmd-channels .panel-card`, `.button`, `.button.primary/.ghost
   /.success/.danger`, `.field-label`, `.text-input`, `.auth-chip`,
   `.pill`, `.eyebrow`, `.lede`, `.muted-copy`, `.panel-grid`,
   `code`, and `a:not(.button)`. The overrides should:
   - Card radius `var(--radius)` (8px), 1px hairline border, elevated
     bg, 16px head margin with hairline divider
   - Button height 32px, padding `0 14px`, 6px radius, `font-family:
     inherit`
   - Primary button = white-on-black (matches CommandShell)
   - Ghost button = transparent + hairline border, hover swap to
     `--background-hover`
   - Success/danger buttons = ghost variants with semantic border/text
   - Field label = Geist Mono 11px uppercase tracking 0.08em
   - Text input = mono font, 12px, hairline border, dark bg
   - Pill / auth-chip = capsule, mono 11px, hairline border, bg
     `--background-hover`
   - Code = inline mono with hairline border + bg
   - `a` (non-button) = underlined with subtle decoration

Do not edit `globals.css` or any panel file — keep the overrides
scoped to `.cmd-channels` so the legacy AdminShell (still used by
tests) renders identically to before.

Verify `npx tsc --noEmit` and `lat check` pass.

Author: johnlindquist

src/components/designs/command-shell.tsx

@@ -816,7 +816,7 @@ export function CommandShell({ initialStatus }: Props) {
           )}
 
           {view === "channels" && (
-            <section>
+            <section className="cmd-channels">
               <ChannelsPanel
                 active={view === "channels"}
                 status={status}
@@ -2025,6 +2025,145 @@ function Style() {
         .login-input:focus { border-color: var(--border-strong); }
         .login-error { color: var(--danger); font-size: 12px; font-family: var(--font-geist-mono, ui-monospace, monospace); }
 
+        /* ─── Scoped Channels-panel overrides (align legacy panels with CommandShell theme) ─── */
+        .cmd-channels { display: flex; flex-direction: column; gap: 24px; }
+        .cmd-channels .panel-card {
+          border-radius: var(--radius);
+          padding: 20px;
+          background: var(--background-elevated);
+          border: 1px solid var(--border);
+        }
+        .cmd-channels .panel-head {
+          padding-bottom: 12px;
+          margin-bottom: 16px;
+          border-bottom: 1px solid var(--border);
+          align-items: baseline;
+        }
+        .cmd-channels h2, .cmd-channels h3 {
+          font-weight: 600;
+          letter-spacing: -0.01em;
+        }
+        .cmd-channels h2 { font-size: 14px; }
+        .cmd-channels h3 { font-size: 13px; }
+        .cmd-channels .eyebrow {
+          font-family: var(--font-geist-mono, ui-monospace, monospace);
+          font-size: 11px;
+          font-weight: 500;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+          color: var(--foreground-subtle);
+          margin: 0 0 8px;
+        }
+        .cmd-channels .lede,
+        .cmd-channels .muted-copy,
+        .cmd-channels p {
+          font-size: 12px;
+          line-height: 1.5;
+          color: var(--foreground-muted);
+        }
+        .cmd-channels .button {
+          min-height: 32px;
+          padding: 0 14px;
+          border-radius: 6px;
+          font-size: 13px;
+          font-weight: 500;
+          font-family: inherit;
+        }
+        .cmd-channels .button.primary {
+          background: var(--foreground);
+          border-color: var(--foreground);
+          color: var(--background);
+        }
+        .cmd-channels .button.primary:hover:not(:disabled) {
+          background: #fff;
+          border-color: #fff;
+        }
+        .cmd-channels .button.ghost {
+          background: transparent;
+          border-color: var(--border);
+          color: var(--foreground);
+        }
+        .cmd-channels .button.ghost:hover:not(:disabled) {
+          background: var(--background-hover);
+          border-color: var(--border-strong);
+        }
+        .cmd-channels .button.success {
+          background: transparent;
+          border-color: var(--success);
+          color: var(--success);
+        }
+        .cmd-channels .button.success:hover:not(:disabled) {
+          background: rgba(69, 165, 87, 0.08);
+          border-color: var(--success);
+          color: var(--success);
+        }
+        .cmd-channels .button.danger {
+          background: transparent;
+          border-color: var(--danger);
+          color: var(--danger);
+        }
+        .cmd-channels .button.danger:hover:not(:disabled) {
+          background: rgba(229, 72, 77, 0.08);
+          color: var(--danger);
+        }
+        .cmd-channels .field-label {
+          display: block;
+          font-family: var(--font-geist-mono, ui-monospace, monospace);
+          font-size: 11px;
+          font-weight: 500;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+          color: var(--foreground-subtle);
+          margin: 0 0 6px;
+        }
+        .cmd-channels .text-input {
+          background: var(--background);
+          color: var(--foreground);
+          border: 1px solid var(--border);
+          border-radius: 6px;
+          padding: 8px 12px;
+          font-size: 12px;
+          font-family: var(--font-geist-mono, ui-monospace, monospace);
+          width: 100%;
+        }
+        .cmd-channels .text-input:focus {
+          border-color: var(--border-strong);
+          outline: none;
+        }
+        .cmd-channels .auth-chip,
+        .cmd-channels .pill {
+          font-family: var(--font-geist-mono, ui-monospace, monospace);
+          font-size: 11px;
+          padding: 2px 8px;
+          border-radius: 12px;
+          background: var(--background-hover);
+          color: var(--foreground);
+          border: 1px solid var(--border);
+          min-height: auto;
+        }
+        .cmd-channels .panel-grid {
+          display: grid;
+          gap: 12px;
+          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        }
+        .cmd-channels code {
+          font-family: var(--font-geist-mono, ui-monospace, monospace);
+          font-size: 12px;
+          background: var(--background);
+          padding: 1px 6px;
+          border-radius: 4px;
+          border: 1px solid var(--border);
+        }
+        .cmd-channels a:not(.button) {
+          color: var(--foreground);
+          text-decoration: underline;
+          text-decoration-color: var(--border-strong);
+          text-underline-offset: 3px;
+        }
+        .cmd-channels a:not(.button):hover {
+          text-decoration-color: var(--foreground);
+        }
+
         /* Button-ified NavItem */
         button.nav-item {
           width: 100%; border: none; background: transparent;