feat(frontend): implement responsive layout improvements across dashboard#131
Draft
djdembeck wants to merge 562 commits intomcowger:mainfrom
Draft
feat(frontend): implement responsive layout improvements across dashboard#131djdembeck wants to merge 562 commits intomcowger:mainfrom
djdembeck wants to merge 562 commits intomcowger:mainfrom
Conversation
- Add config schema for mcp_servers in plexus.yaml - Create /mcp/:name endpoints for proxying MCP servers - Implement POST/GET/DELETE request forwarding with streaming support - Add header filtering to prevent client auth headers from leaking to upstream - Add OAuth 2.0 discovery endpoints for MCP client compatibility - Create mcp_request_usage and mcp_debug_logs database tables - Generate migrations for SQLite and PostgreSQL - Add shared auth utility for inference and MCP routes - Update CONFIGURATION.md and API.md documentation
- Add mcp-proxy-service.test.ts with 22 unit tests covering: - Server name validation - Header filtering (hop-by-hop, client auth) - Header merging and redaction - JSON-RPC method extraction - MCP server config lookup - Add mcp-routes.test.ts with 18 integration tests covering: - OAuth discovery endpoints - Authentication (Bearer, x-api-key, attribution) - Server validation - HTTP method proxying - Usage recording
- Add missing failover property to test configs in: - auth.test.ts (2 locations) - embeddings.test.ts - transcriptions-debug.test.ts - transcriptions.test.ts - performance.test.ts (4 locations) - Fix MCP routes tests to mock network calls: - Import and spy on proxyMcpRequest function - Remove live network dependencies from GET tests - Mock returns consistent 200 responses instead of hitting real endpoints All 407 tests now pass.
- Backend: Add GET/POST/DELETE endpoints for MCP servers at /v0/management/mcp-servers - Frontend api: Add getMcpServers, saveMcpServer, deleteMcpServer methods - Create MCP page with table view, add/edit modal with headers support - Add MCP link to Sidebar Configuration section - Fix input bug where server name field disappeared while typing
- Add getLogs/deleteLog/deleteAllLogs methods to McpUsageStorageService - Add GET/DELETE /v0/management/mcp-logs backend routes - Wire mcp-logs routes into registerManagementRoutes - Add McpLogRecord type and getMcpLogs/deleteMcpLog/deleteAllMcpLogs API methods to frontend - Add paginated MCP usage logs table to Mcp.tsx below server config card
… PG schema PG integer is 32-bit (max ~2.1B) but epoch-ms timestamps are ~1.77 trillion, causing numeric overflow (error 22003). SQLite integer is 64-bit so was unaffected.
…disconnect
ReadableStream.cancel() callback was calling reader.cancel() without awaiting
or catching the returned Promise. On client disconnect this Promise rejects,
causing an unhandled rejection logged as empty object {}.
…in new ReadableStream The wrapper ReadableStream was broken in multiple ways: - controller.error(e) in the start() handler produced unhandled promise rejections - The pull() handler drained an always-empty queue (data went to controller directly) - Unnecessary complexity added latency and failure modes The upstream response.body is already a ReadableStream<Uint8Array>; pass it directly to reply.send() which Fastify handles correctly.
- Add tool_name column to mcp_request_usage in SQLite and PG schemas - Add extractToolName() to mcp-proxy-service.ts (reads params.name for tools/call) - Pass tool_name through route handlers and storage service - Display tool name below RPC method in MCP logs UI (highlighted in info color) - Generate migrations for both dialects
…s and transcriptions tests
…prevent worker pollution
… POE display after reload Co-authored-by: darkspadez <186617+darkspadez@users.noreply.github.com>
…oviders that provide quota reset data will be respected when usage is at 99%+. In those cases, a cooldown will be set until the end of the period, rather than the exponential backoff technique
- Replace fixed width (200px) with responsive clamp(64px, 15vw, 200px) - Sidebar smoothly scales from 64px (mobile) to 200px (large desktop) - MainLayout margin-left updated to match responsive sidebar width - Maintains existing collapse/expand functionality - Text truncation works at intermediate widths
- Add w-full to Dashboard containers for full-width layout - Implement responsive card grid in LiveTab: 1→2→3→4 columns - Use gap-4 md:gap-6 for responsive spacing
Adjust grid breakpoints to account for sidebar width (up to 200px): - < 1024px: 1 column - 1024px+ (lg): 2 columns - 1280px+ (xl): 3 columns - 1536px+ (2xl): 4 columns Previous md:grid-cols-2 caused cramped widgets when sidebar was open.
djdembeck
changed the title
Owner
|
Before you go too far down with this... My intent in the short term is to eliminate most of the dashboard graphs altogether, and simply expose the metrics from Plexus as a Prometheus endpoint. I dont think extensive analytics etc are the right place in this tool, and are better served by the dozens of other OTEL/Prometheus tools out there. But beyond those, I think this is a great path. |
Contributor
Author
Understood! A lot of the front end lacks proper responsive layouts from my brief exposure, which is across the entire front end. So my goal is mostly to get things formatted as they should, so I can have a good experience on any screen in my workflow! Won't take too much work, mostly simple breakpoint fixes. |
Owner
|
Sounds good - my abilities with frontend are really poor, so I'm grateful for the help |
|
@djdembeck thank you for this initiative and work. and +1 for this. Have a running plexus in VPS and couple of times visited admin UI from mobile phone. It would be great to have responsive for it. MB even option to install it as PWA. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Work in Progress
This PR is currently a work in progress and may undergo changes. Please do not merge until marked as ready for review.
Overview
This PR implements comprehensive responsive layout improvements across the frontend dashboard to ensure optimal display across different screen sizes, viewport widths, and sidebar states.
Goals
Changes
Dashboard Widget Grid Responsiveness
File:
packages/frontend/src/components/dashboard/tabs/LiveTab.tsxAdjusted grid breakpoints to account for sidebar width (up to 200px when open) and available content area:
Before:
md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4withmd:gap-6After:
lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4withlg:gap-5 xl:gap-6The previous
md:grid-cols-2breakpoint (768px+) caused cramped widgets when the sidebar was open, as the available content width was insufficient for 2 columns.Testing Checklist
Notes
This change improves the overall responsive behavior of the dashboard by using larger breakpoints (
lg,xl,2xl) instead ofmdto account for the reduced available width when the sidebar is expanded. The grid now dynamically adjusts column count based on actual available content width rather than just viewport width.