V48 (implementation-only): Height Auxillaries selector cards and drop active-pane banner

Add one-word feature pills on each left-rail selector card, remove the
redundant Active support pane summary, align the content pane top with the
selector column, and slightly compact pill height. Update access tests.

Author: geraldarthurdavis

uapi/components/auxillaries/AuxillariesContent/AuxillariesContent.tsx

@@ -49,7 +49,6 @@ function AuxillariesContent(props: AuxillariesContentProps) {
   const usesTabNavigation = navigationMode === 'tabs';
   const usesContainedLayout = surfaceVariant === 'contained';
   const activePaneLabel = currentStep ? labelForAuxillaryPane(currentStep) : 'Auxillaries';
-  const activeDescriptor = currentStep ? getAuxillaryDescriptor(currentStep) : null;
   const availableStepLabels = availableSteps.filter(Boolean).map((step) => labelForAuxillaryPane(step));
   const blockedStepLabels = steps
     .filter((step) => step && !availableSteps.includes(step))
@@ -270,27 +269,11 @@ function AuxillariesContent(props: AuxillariesContentProps) {
             data-testid="auxillaries-active-pane-region"
             data-auxillaries-pane-state={showContent ? 'ready' : 'loading'}
           >
-            <div className="auxillaries-active-pane-summary" role="status" aria-atomic="true">
-              <div className="auxillaries-active-pane-summary-copy">
-                <p className="auxillaries-active-pane-kicker">Active support pane</p>
-                <h2 className="auxillaries-active-pane-title">{activePaneLabel}</h2>
-                {activeDescriptor ? (
-                  <p className="auxillaries-active-pane-description">{activeDescriptor.routeDescription}</p>
-                ) : null}
-              </div>
-              <div className="auxillaries-active-pane-chips" aria-label="Auxillaries readiness summary">
-                <span className="auxillaries-active-pane-chip" data-state={showContent ? 'ready' : 'loading'}>
-                  {showContent ? 'Ready' : 'Loading'}
-                </span>
-                <span className="auxillaries-active-pane-chip">{availableStepLabels.length} panes available</span>
-                {blockedStepLabels.length ? (
-                  <span className="auxillaries-active-pane-chip" data-state="blocked">
-                    {blockedStepLabels.length} blocked
-                  </span>
-                ) : null}
-              </div>
-            </div>
-
+            {/*
+              No redundant "Active support pane" banner — readiness lives in the
+              left selector + audit detail; content starts at the same top edge
+              as the selector column.
+            */}
             {contentPanel ?? (
               <div className="auxillaries-active-pane-loading" role="status" aria-live="polite">
                 Loading active pane.

uapi/components/auxillaries/AuxillaryPaneMeta/AuxillaryPaneMeta.ts

@@ -27,6 +27,12 @@ export interface AuxillaryPaneDescriptor {
   labelPosition: 'top' | 'right' | 'bottom' | 'left';
   routeTitle: string;
   routeDescription: string;
+  /**
+   * One-word feature pills rendered at the bottom of the selector card.
+   * Three to four short labels fill card height and reduce vertical dead space
+   * between Wallet / Externals / Profile / Interfaces in the left rail.
+   */
+  featurePills: readonly [string, string, string] | readonly [string, string, string, string];
 }
 
 export const AUXILLARY_DESCRIPTORS: Record<ConcreteAuxillaryPane, AuxillaryPaneDescriptor> = {
@@ -38,6 +44,7 @@ export const AUXILLARY_DESCRIPTORS: Record<ConcreteAuxillaryPane, AuxillaryPaneD
     routeTitle: 'Profile Auxillary',
     routeDescription:
       'Manage optional email, display identity, admin role, and organization membership without mixing in wallet or third-party connection controls.',
+    featurePills: ['Email', 'Identity', 'Role', 'Org'],
   },
   externals: {
     label: 'Externals',
@@ -47,6 +54,7 @@ export const AUXILLARY_DESCRIPTORS: Record<ConcreteAuxillaryPane, AuxillaryPaneD
     routeTitle: 'Externals Auxillary',
     routeDescription:
       'Attach GitHub and other non-wallet third-party bindings Bitcode reuses across read measurement, asset-pack synthesis, settlement follow-through, and external interface behavior.',
+    featurePills: ['GitHub', 'Source', 'Bindings', 'Scope'],
   },
   interfaces: {
     label: 'Interfaces',
@@ -56,6 +64,7 @@ export const AUXILLARY_DESCRIPTORS: Record<ConcreteAuxillaryPane, AuxillaryPaneD
     routeTitle: 'Interfaces Auxillary',
     routeDescription:
       'Shape how Packs, Deposits, Reads, MCP API, ChatGPT App, proofs, and default Bitcode behavior read and operate through one focused auxillary.',
+    featurePills: ['Packs', 'Reads', 'MCP', 'Proofs'],
   },
   wallet: {
     label: 'Wallet',
@@ -65,6 +74,7 @@ export const AUXILLARY_DESCRIPTORS: Record<ConcreteAuxillaryPane, AuxillaryPaneD
     routeTitle: 'Wallet Auxillary',
     routeDescription:
       'Connect Bitcoin wallet providers, review BTC and BTD balances, and inspect wallet-bound source-share posture in one focused auxillary.',
+    featurePills: ['Providers', 'BTC', 'BTD', 'Posture'],
   },
 };
 

uapi/components/auxillaries/shared/AuxillariesWorkspacePanels/AuxillariesWorkspacePanels.tsx

@@ -1,3 +1,7 @@
+/**
+ * Auxillaries left-rail selector: one card per pane with state chip, title,
+ * description, and one-word feature pills that fill vertical card height.
+ */
 'use client';
 
 import React from 'react';
@@ -40,6 +44,7 @@ export default function AuxillariesWorkspacePanels({
               ? 'Ready auxillary'
               : 'Locked auxillary';
         const descriptionId = `auxillaries-panel-${step}-state`;
+        const pillsId = `auxillaries-panel-${step}-pills`;
 
         return (
           <div key={step} role="listitem">
@@ -61,7 +66,7 @@ export default function AuxillariesWorkspacePanels({
               aria-label={`${descriptor.label} auxillary`}
               aria-current={isActive ? 'page' : undefined}
               aria-disabled={!isAvailable}
-              aria-describedby={descriptionId}
+              aria-describedby={`${descriptionId} ${pillsId}`}
             >
               <span id={descriptionId} className="sr-only">
                 {stateLabel}. {descriptor.routeDescription}
@@ -80,6 +85,20 @@ export default function AuxillariesWorkspacePanels({
               <p className="orbital-workspace-panel-copy auxillaries-bitcode-selector-card-copy">
                 {descriptor.routeDescription}
               </p>
+              <ul
+                id={pillsId}
+                className="auxillaries-bitcode-selector-card-pills"
+                aria-label={`${descriptor.label} key features`}
+              >
+                {descriptor.featurePills.map((pill) => (
+                  <li
+                    key={pill}
+                    className="auxillaries-bitcode-selector-card-pill"
+                  >
+                    {pill}
+                  </li>
+                ))}
+              </ul>
             </button>
           </div>
         );

uapi/styles/auxillaries-bitcode.css

@@ -151,8 +151,11 @@
 }
 
 .auxillaries-bitcode-pane-with-chrome {
-  /* Stage still spans full height; chrome only occupies the left column row. */
-  grid-row: 1 / -1;
+  /*
+   * Align content top with the selector list (row 2), not the Close/Disconnect
+   * chrome row above the left column.
+   */
+  grid-row: 2 / -1;
 }
 
 .auxillaries-skip-link {
@@ -395,6 +398,55 @@
   text-align: center !important;
 }
 
+/* One-word feature pills: square chips that height the card and eat dead space. */
+.auxillaries-bitcode-selector-card-pills {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  justify-content: center !important;
+  align-items: stretch !important;
+  gap: 0.3rem !important;
+  list-style: none !important;
+  margin: 0.35rem 0 0 !important;
+  padding: 0.28rem 0 0 !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.auxillaries-bitcode-selector-card-pill {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !important;
+  /* Compact square-ish chips (slightly shorter than the first pass). */
+  min-width: 2.35rem;
+  min-height: 1.85rem;
+  padding: 0.22rem 0.32rem !important;
+  border-radius: 0 !important;
+  border: 1px solid rgba(101, 254, 183, 0.22) !important;
+  background: rgba(101, 254, 183, 0.06) !important;
+  color: rgba(220, 252, 231, 0.92) !important;
+  font-size: 0.58rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.08em !important;
+  line-height: 1.05 !important;
+  text-transform: uppercase !important;
+  text-align: center !important;
+  white-space: nowrap;
+}
+
+.auxillaries-bitcode-selector-card-current .auxillaries-bitcode-selector-card-pill {
+  border-color: rgba(101, 254, 183, 0.42) !important;
+  background: rgba(101, 254, 183, 0.12) !important;
+  color: rgba(236, 253, 245, 0.98) !important;
+}
+
+.auxillaries-bitcode-selector-card-locked .auxillaries-bitcode-selector-card-pill {
+  border-color: rgba(148, 163, 184, 0.16) !important;
+  background: rgba(148, 163, 184, 0.06) !important;
+  color: rgba(203, 213, 225, 0.72) !important;
+}
+
 .auxillaries-bitcode-pane {
   display: flex !important;
   flex-direction: column;

uapi/tests/auxillariesContent.access.test.tsx

@@ -83,9 +83,9 @@ describe('AuxillariesContent contained accessibility shell', () => {
     expect(activePane).toHaveAttribute('aria-busy', 'false');
     expect(activePane).toHaveAttribute('data-auxillaries-pane-state', 'ready');
 
-    expect(within(activePane).getByRole('status')).toHaveTextContent('Interfaces');
-    expect(within(activePane).getByRole('status')).toHaveTextContent('3 panes available');
-    expect(within(activePane).getByRole('status')).toHaveTextContent('1 blocked');
+    // Banner summary removed; readiness remains in audit detail + selector cards.
+    expect(within(activePane).queryByText('Active support pane')).not.toBeInTheDocument();
+    expect(within(activePane).queryByText(/panes available/i)).not.toBeInTheDocument();
     expect(screen.getByTestId('pane-interfaces')).toHaveTextContent('Rendered interfaces');
 
     expect(screen.getByRole('button', { name: 'Interfaces auxillary' })).toHaveAttribute('aria-current', 'page');
@@ -122,7 +122,7 @@ describe('AuxillariesContent contained accessibility shell', () => {
     const activePane = screen.getByRole('region', { name: 'Wallet active support pane' });
     expect(activePane).toHaveAttribute('aria-busy', 'true');
     expect(activePane).toHaveAttribute('data-auxillaries-pane-state', 'loading');
-    expect(within(activePane).getAllByRole('status')[1]).toHaveTextContent('Loading active pane.');
+    expect(within(activePane).getByRole('status')).toHaveTextContent('Loading active pane.');
     expect(screen.getByTestId('auxillaries-audit-detail')).toHaveTextContent('source-safe summary only');
     expect(screen.queryByText(/"currentStep"/)).not.toBeInTheDocument();
   });

uapi/tests/auxillariesWorkspacePanels.test.tsx

@@ -22,4 +22,22 @@ describe('AuxillariesWorkspacePanels', () => {
     expect(screen.getByLabelText('Active auxillary')).toHaveAttribute('data-state', 'active');
     expect(screen.getAllByLabelText('Ready auxillary')).toHaveLength(3);
   });
+
+  it('renders one-word feature pills on each selector card', () => {
+    render(
+      <AuxillariesWorkspacePanels
+        steps={['wallet', 'externals', 'profile', 'interfaces']}
+        currentStep="wallet"
+        availableSteps={['wallet', 'externals', 'profile', 'interfaces']}
+        onStepClick={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText('Wallet key features')).toBeInTheDocument();
+    expect(screen.getByText('Providers')).toBeInTheDocument();
+    expect(screen.getByText('BTC')).toBeInTheDocument();
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+    expect(screen.getByText('Identity')).toBeInTheDocument();
+    expect(screen.getByText('MCP')).toBeInTheDocument();
+  });
 });