feat: add web UI #40
Open
feat: add web UI #40
Conversation
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
Implemented a complete web interface for RetroChat with the following features: **Backend (Rust/Axum)** - RESTful API endpoints for sessions, search, and health check - Session listing with pagination, filtering, and sorting - Session detail view with full message history - Full-text search across messages - Static file serving for frontend assets **Frontend (Vanilla JS/HTML/CSS)** - Professional dark theme inspired by Linear/GitHub/Vercel - Sessions browser with real-time filtering and sorting - Message search with highlighted results - Session detail modal with message timeline - Provider-specific color coding (Claude: orange, Gemini: blue, Cursor: light blue, Codex: white) - File path display for each session - Responsive design for mobile and desktop **Dependencies** - Added axum 0.7 for web framework - Added tower 0.4 for middleware - Added tower-http 0.5 for CORS and static file serving - Added mime_guess 2.0 for static file MIME types **CLI Integration** - New 'web' subcommand: retrochat web [--port PORT] [--host HOST] [--open] - Auto-open browser functionality with --open flag - Default port 3000, configurable via --port **Documentation** - Added project_path_extraction.md analyzing how to extract project paths from each provider 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add project_path field to chat_sessions to store the full working directory path where each session was executed, complementing the existing project_name field.
Implementation:
- Add project_path column to chat_sessions table with index
- Extract paths from provider-specific data sources:
- Codex: Direct from session_meta.cwd field
- Cursor: Infer from .cursor/chats/{hash}/{uuid}/store.db file structure
- Claude Code: Frequency-based selection from message-level cwd fields
- Gemini: Fallback extraction from thoughts (with Rainbow Table support planned)
- Add Rainbow Table for hash-to-path mapping (Gemini support)
- Display project_path in Web UI session detail view
Tests:
- Add 7 comprehensive parser tests covering happy paths and edge cases
- All existing tests pass with model updates
Dependencies:
- Add sha2 for Rainbow Table hashing
- Add regex for Gemini path extraction
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Changed the default port to avoid conflicts with commonly used ports. Port 7878 is less commonly used and reduces collision risk. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Resolved conflicts: - src/cli/mod.rs: Added both Web command and new commands (Setup, Add, Stats, Search, Review) - src/lib.rs: Added both web and utils modules - Cargo.toml: Added web dependencies (axum, tower, tower-http, mime_guess) plus missing deps (regex, sha2) New features from main: - Setup wizard for first-time users - Add command (interactive import alias) - Stats command (analytics alias) - Search command (query search alias) - Review command (retrospect alias) - Time parsing utilities - Auto-detect service - Project path rainbow table 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Remove unused Confirm import in setup.rs - Refactor handle_timeline_command to use TimelineOptions struct (reduce 10 args to 1) - Fix wildcard pattern in match expression - Remove needless question mark operator in time_parser - Add regex and sha2 dependencies to Cargo.toml 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implemented comprehensive Timeline feature for browsing messages by time range:
**Backend (Rust)**
- New `/api/timeline` endpoint with time range queries
- Support for relative time ("1 hour ago", "7 days ago", etc.)
- Filter by provider, role, and message limit
- Custom SQL JOIN to fetch provider/project info
**Frontend**
- Clean 2-tab navigation: Browse | Timeline
- URL-based routing with query parameters (?tab=timeline)
- Time range picker with quick filters (1h, 12h, today, yesterday, 7d, 30d)
- Compact/Full display modes
- Character and token count display (~4 chars = 1 token)
- Copy All and Export JSONL functionality
- CLI-style monospace text output
- Individual message copy buttons
**UI/UX Improvements**
- Unified Browse tab (merged Sessions + Search)
- Consistent layout across all tabs
- Stats displayed in header (messages, chars, tokens)
- Action buttons logically grouped
- Default limit: 1000 messages
- Provider-specific color coding (🟠 Claude, 🔵 Gemini, 🔷 Cursor, ⚪ Codex)
**Technical Details**
- Browser history API integration (back/forward support)
- Event delegation for dynamic content
- Modular code structure (timeline.js separate from app.js)
- Responsive flexbox layouts
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Changes: - Add TimeRangeQuery struct to MessageRepository for cleaner API - Filter tool_uses/tool_results in compact mode at SQL level - Remove limit input from web UI for better UX - Ensure consistent filtering logic between CLI and Web - Update web UI to pass format parameter to API 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
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.
Implemented a complete web interface for RetroChat with the following features:
Backend (Rust/Axum)
Frontend (Vanilla JS/HTML/CSS)
Dependencies
CLI Integration
Documentation
🤖 Generated with Claude Code