🗞️ feat: Make Context Usage Responsive and Condensed

[lia-by-librechat]

Summary

The expanded context panel packs usage and cost into one narrow column. Detailed sessions require excessive scrolling.

This change bounds the expanded panel to the viewport. Context and usage sit side by side when the panel has enough space and stack on narrow screens. Each usage section starts with condensed, labelled metrics and cost beside its heading. Independent keyboard disclosures show full-size rows without removing any information.

How it works

Expanded panel: min(44rem, viewport minus gutters)
  Available width ≥ 38rem: context | usage
  Less available width: stacked sections
Usage heading: scoped cost + independent disclosure

Uses existing semantic theme roles, meter series, localization, and Collapsible primitives. Preserves expansion preference, balance-only sizing, cost coverage gates, zero/missing distinctions, subagent scope, and compaction.

Type of change

• Feature
• Tests / tooling / CI

Testing

• Added component tests for condensed metrics, keyboard disclosure, zero/missing usage, costs, currency, subagents, and responsive card sizing.
• Added browser coverage for five viewport sizes, bounds, column reflow, keyboard disclosure, axe accessibility, and custom-theme inheritance.
• Local import ordering, TSX syntax, and whitespace checks pass.
• Semantic text-token contrast passes in six built-in/reference modes on the panel surface. Minimum: 4.77:1.
• Local Jest, TypeScript, ESLint, Prettier, and browser execution are unavailable without dependencies. No install was started under the disk safety threshold.
• At b651c17a5824, client tests (156), typecheck, builds, static checks, Lighthouse, and the responsive browser test passed. Two other browser tests failed on outdated contracts. Head d2da12ce6c7a updates the subagent selector and the legacy Tailwind guard, and explicitly checks the container-query primitive. Independent review of d2da12ce6c7a is complete with no findings. At this head, 158 client tests, client typechecking, package/Vite builds, and the Docker client build pass. Browser and full static CI remain pending.

Screenshots / recordings

Local app captures are blocked by missing dependencies and browser tooling. The responsive browser test attaches desktop/mobile captures in CI. Before/after app captures remain outstanding.

Risk / compatibility

Presentation only. No configuration, API, calculation, or stored-layout migration. The responsive browser test passed at b651c17a5824. Current-head browser verification is pending CI.

Checklist

• I reviewed my own changes
• Relevant tests have been added or updated
• Existing relevant tests pass
• The change does not introduce new warnings or errors
• User-facing or complex behavior is documented where necessary: existing localized labels
• Required dependency changes have been merged/published: N/A
• Required documentation PR: N/A

[lia-by-librechat]

Head: fe4dd91. Viewport-bounded context panel, container-responsive two-column layout, condensed usage summaries with scoped costs, and independent keyboard disclosures. Existing semantic theme roles and meter series are preserved. Focused coverage added; dependency-backed local verification is blocked by missing installs and disk capacity.

[lia-by-librechat]

Head: 0ca459a. Adds browser coverage for viewport bounds, responsive columns, keyboard disclosure, axe accessibility, custom-theme inheritance, and runtime desktop/mobile captures. Scoped cost browser assertions now match the section headings. Semantic text contrast on the panel surface passes in six built-in/reference modes, minimum 4.77:1. Independent review targets this exact head.

[lia-by-librechat]

Head: a38f42f. Corrects the viewport-width regression test to refresh props on the memoized indicator. No production-code changes from the previous head. Previous-head client typecheck, Vite build, ESLint, Prettier, import ordering, design-rule validation, breakdown tests, and new summary tests passed. Independent review of the previous head found no defects; a fresh review now targets this exact head.

[lia-by-librechat]

Title verification: 🗞️ maps to the compact heading/subheading layout. One prior indexed LibreChat commit, one subject-leading, among 6,107 commits through 2026-10-12 10:40:07 UTC. The sentinel check passed; no matching open PR title was found when this PR was opened.

[lia-by-librechat]

Head: b651c17. Fixes the shared disclosure-spacing violation and four formatting issues reported by the complete static-check log. The earlier lint/formatting pass claim was incorrect: those workflow steps used continue-on-error and were only settled by the final summary. On a38f42f, both client test shards (156 tests), client typecheck, package/Vite builds, and Lighthouse passed. New-head CI and independent review will determine the final state.

[lia-by-librechat]

Independent review complete at b651c17: no findings. CI-T1 and CI-S1 are confirmed fixed. Both client test shards (156 tests), client typecheck, package/Vite builds, full static checks, and Lighthouse passed at this head. Browser reflow, keyboard, axe, theme inheritance, and runtime captures remain pending the Playwright lanes.

[lia-by-librechat]

Head: d2da12c. Fixes both deterministic Playwright failures: subagent totals use the semantic term/definition instead of old layout classes, and the legacy Tailwind guard allows intentional container queries while retaining every other protected token. The responsive test now explicitly checks container-type: inline-size in addition to viewport reflow, keyboard, and axe assertions. No production-code changes. Local TypeScript parsing and whitespace checks pass; focused browser execution is blocked by absent app dependencies. Fresh CI and independent review target this exact head.

[lia-by-librechat]

Independent review complete at d2da12c: no findings. Both Playwright contract fixes are confirmed in the frozen source. At this head, both client test shards pass (158 tests), as do client typechecking, package/Vite builds, and Docker client build. Playwright and complete static checks are still running; local Playwright remains unavailable without app dependencies.