feat(console): tighten responsive connection catalog

[mohanagy]

Closes #334

Summary

• tighten the connection catalog so connection name, named accounts, durable default, switch action, and management action scan together
• preserve secondary authentication details while making them visually subordinate
• add responsive one-column and narrow-action behavior plus semantic card headings

TDD

• tightened the focused Console DOM/CSS contract first
• observed the expected failure for the missing responsive catalog rule
• implemented the smallest CSS and semantic markup change, then reran the focused test and full Console suite green

Validation

• npm test
• npm run test:core
• npm run test:coverage -- --maxWorkers=1 --maxConcurrency=1 (1,822 passed, 33 skipped; 95.65% statements)
• npm run lint
• npm run typecheck
• npm run build
• npm run smoke:cli
• npm run check:pack
• npm run test:package
• git diff --check

The first full coverage attempt hit existing 1-second upstream startup limits under machine load. All nine affected tests passed unchanged in an isolated coverage run, and the standalone full coverage rerun then passed without changing timeouts or thresholds.

Automated browser control was unavailable in this environment, so no manual screenshot claim is made. Responsive behavior is covered by the focused DOM/CSS contract and the 50-test Console suite, with platform CI required before merge.

Summary by CodeRabbit

• New Features

  • Improved the Console connection catalog with a more compact, responsive layout.
  • Added clearer card structure and accessible title associations.
  • Preserved status visibility and keyboard focus across screen sizes.
  • Mobile layouts now stack configuration actions full-width, with improved text wrapping.

• Bug Fixes

  • Removed obsolete configuration-switch styling while maintaining existing security and API behavior.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 6c938a35-3e80-4499-9c56-41734b209ed9

📥 Commits

Reviewing files that changed from the base of the PR and between 71857d6 and c4b573b.

📒 Files selected for processing (2)

• src/console/console-assets.ts
• tests/console-server.test.ts

📝 Walkthrough

Walkthrough

The Console connection catalog now uses tighter spacing, responsive single-column behavior, wrapped content, and full-width mobile actions. Configuration cards use semantic, identified headings with aria-labelledby. Tests cover the updated layout and accessibility structure.

Changes

Console connection catalog

Layer / File(s)	Summary
Responsive catalog layout CHANGELOG.md, src/console/console-assets.ts, tests/console-server.test.ts	The catalog uses tighter spacing, safer content sizing, responsive columns, wrapped text, and full-width narrow-screen actions. Tests assert the updated CSS and catalog behavior.
Accessible configuration cards src/console/console-assets.ts, tests/console-server.test.ts	Configuration card titles use unique <h3> IDs, and cards reference those titles with aria-labelledby. Tests verify the associations.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• mohanagy/miftah#191: Introduced the Console asset implementation refined by this change.
• mohanagy/miftah#302: Overlaps in the catalog UI and its accessibility and behavior tests.
• mohanagy/miftah#318: Added the configuration catalog and card behavior refined here.

Poem

A rabbit hops through cards made neat,
With wrapped-up names and buttons sweet.
Headings guide each careful ear,
While mobile paths stay bright and clear.
The Console fits from wide to small.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: tighter responsive layout for the Console connection catalog.
Description check	✅ Passed	The description includes the change summary, TDD notes, extensive validation commands, test results, and the reason manual screenshots were unavailable.
Linked Issues check	✅ Passed	The changes and focused tests address issue #334 by improving catalog density, responsive behavior, semantic headings, wrapping, actions, and status visibility.
Out of Scope Changes check	✅ Passed	The changelog, Console layout changes, semantic markup, and responsive regression tests are directly related to issue #334.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/issue-334-console-responsive-density

---

_{Comment @coderabbitai help to get the list of available commands.}

[mohanagy]

Independent review found that a valid 64-character durable-default profile name could remain unbroken and crowd the Manage action at zoom/intermediate widths. Fixed at c4b573b with TDD:

• added the focused wrapping contract first and observed it fail
• added overflow-wrap: anywhere to connection-card paragraphs
• focused contract passed
• full Console suite passed 50/50
• lint, typecheck, and diff-check passed

Fresh exact-head platform CI and independent re-review are required before merge.