feat(ui): Phase 5 - Complete toolbar UI with themes, positioning, and history

[JacobCoffee]

Summary

Complete Phase 5 UI/UX implementation for the debug toolbar:

• Toolbar UI routes (/_debug_toolbar/) with history and detail views
• Dark/light theme toggle with localStorage persistence across all pages
• 4-position toolbar (left/right/top/bottom) with persistence
• Resizable toolbar with drag handles and size persistence
• Panel animations with smooth CSS transitions
• SQLAlchemy auto-attach - queries now captured without explicit engine config
• Routes panel - displays all registered app routes
• Improved data rendering - nested objects/arrays display properly

New Files

• src/debug_toolbar/litestar/routes/handlers.py - Toolbar UI routes, CSS, JS
• tests/integration/test_toolbar_routes.py - 20 comprehensive route tests
• biome.json / package.json - Frontend linting with Biome.js

Changes

• Plugin now registers toolbar routes automatically
• Middleware accepts shared toolbar instance
• SQLAlchemy panel auto-attaches global event listeners
• Examples updated with UI documentation and async fixes

Test plan

• All 264 tests passing
• Manual testing of theme toggle on all pages
• Manual testing of positioning controls
• Manual testing of resize functionality
• Manual testing of panel expand/collapse animations
• SQLAlchemy query capture verified
• Routes panel displays app routes

Screenshots

Theme toggle, positioning, and resize all work across:

• Inline toolbar on app pages
• /_debug_toolbar/ history page
• /_debug_toolbar/{request_id} detail page

🤖 Generated with Claude Code

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://JacobCoffee.github.io/debug-toolbar/pr-preview/pr-4/
Built to branch gh-pages at 2025-11-27 08:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull request overview

This pull request implements Phase 5 UI/UX enhancements for the debug toolbar, introducing a comprehensive toolbar interface with theme support, positioning controls, request history tracking, and improved data visualization. The changes integrate new UI routes, enhance the middleware for better data collection, add SQLAlchemy auto-attach functionality, and include frontend linting setup.

Key Changes:

• New toolbar UI routes (/_debug_toolbar/) serving history and detail pages with dark/light themes
• Four-position toolbar support (left/right/top/bottom) with localStorage persistence
• SQLAlchemy panel auto-attaches global event listeners when no explicit engine is provided
• Enhanced middleware to collect route metadata and render improved toolbar HTML

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
src/debug_toolbar/litestar/routes/handlers.py	New file implementing toolbar UI routes with HTML rendering, CSS, and JavaScript for the debug toolbar interface
src/debug_toolbar/litestar/routes/__init__.py	Package initialization exposing create_debug_toolbar_router
src/debug_toolbar/litestar/plugin.py	Updated to create shared toolbar instance and register UI routes automatically
src/debug_toolbar/litestar/middleware.py	Enhanced to accept shared toolbar instance, collect route metadata, and render improved toolbar HTML with panel buttons
src/debug_toolbar/extras/advanced_alchemy/panel.py	Added global listener auto-attach functionality for SQLAlchemy query tracking without explicit engine configuration
tests/integration/test_toolbar_routes.py	New comprehensive test suite with 20 tests covering toolbar routes, API endpoints, static assets, and integration workflows
tests/integration/test_litestar_middleware.py	Updated test assertion to check for data attribute instead of text content
tests/unit/__init__.py, tests/integration/__init__.py, tests/__init__.py	Simplified docstrings
examples/litestar_basic/app.py	Updated with UI feature documentation and links to request history
examples/litestar_advanced_alchemy/app.py	Updated with UI documentation, fixed import order, removed manual commits (uses autocommit handler), changed POST response to HTML
examples/profiling_panel_example.py	Fixed string literal formatting (f-string to regular string)
package.json	Added Biome.js frontend linting configuration
biome.json	Biome linter/formatter configuration for JavaScript/CSS
.gitignore	Added Node.js/Bun ignore patterns
docs/api/_autosummary/debug_toolbar.litestar.rst	Added routes module to documentation
docs/api/_autosummary/debug_toolbar.litestar.routes.rst	New documentation file for routes module
docs/api/_autosummary/debug_toolbar.litestar.routes.handlers.rst	New documentation file for handlers module functions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.