feat: Add mobile-responsive UI with remote access support #5
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
Implements a fully responsive mobile-friendly interface that adapts to different screen sizes while maintaining the existing desktop Kanban board experience. ## Mobile View (<1024px) **New Components:** - RepoDropdown: Dropdown navigation showing repos with colored status emoji indicators (🟢 working, 🟠 needs approval, 🟡 waiting, ⚪ idle) - StatusFilter: Chip-based status filters for quick filtering - SessionCardCompact: Touch-optimized session cards for list view - SessionDetailModal: Full-screen modal for viewing session details **Features:** - Dropdown shows aggregated status emojis for each repo - Filter sessions by both repo AND status simultaneously - Vertical scrollable list of sessions (sorted by activity) - Tap any session card to view full details in modal - Touch-friendly 44px minimum tap targets - No horizontal scrolling required ## Desktop View (≥1024px) - Preserves existing 4-column Kanban board layout - Hover cards for session details - No changes to current desktop experience ## Remote Access Support **Daemon (server.ts):** - Bind to 0.0.0.0 by default (configurable via HOST env var) - Allows connections from remote clients, not just localhost **UI (sessionsDb.ts):** - Dynamic stream URL based on browser location - Automatically connects to daemon on same host as web UI - Supports both local (127.0.0.1) and remote access ## Technical Details - CSS breakpoint: 1024px - Uses CSS media queries to toggle between layouts - Mobile-first approach with progressive enhancement - Maintains all existing functionality - Zero breaking changes to desktop experience ## Testing Tested on: - Desktop browsers (Chrome, Firefox) - Mobile responsive mode (Chrome DevTools) - Remote access via SSH tunnel Closes: N/A (enhancement)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Adds a fully responsive mobile-friendly interface that adapts to different screen sizes while preserving the existing desktop Kanban board experience.
Motivation
The current UI is desktop-only with a horizontal Kanban board that requires ~1280px minimum width. This makes it unusable on mobile devices and tablets. Additionally, the daemon only bound to localhost, preventing remote access scenarios.
Changes
Mobile View (<1024px)
New Components:
RepoDropdown: Dropdown navigation showing repos with colored status emoji indicatorsStatusFilter: Chip-based filters (All, Working, Approval, Waiting, Idle) with live countsSessionCardCompact: Touch-optimized session cards designed for vertical list viewSessionDetailModal: Full-screen modal for viewing session details (replaces hover cards)Mobile Features:
Desktop View (≥1024px)
Remote Access Support
Problem: The daemon bound to
127.0.0.1and the UI hardcodedhttp://127.0.0.1:4450, making remote access impossible (e.g., SSH tunnels, remote servers).Solution:
0.0.0.0by default (configurable viaHOSTenv var)window.location.hostnameVITE_STREAM_URLenv var for custom configurationsThis enables:
Technical Details
Screenshots
Screenshots to be added
Mobile View:
Desktop View:
Testing
Breaking Changes
None. This is purely additive:
Future Enhancements
Potential follow-ups (not included in this PR):
Checklist
Note: This enhancement was developed to solve the issue of the dashboard being unusable on mobile devices and inaccessible from remote locations. The implementation maintains 100% backward compatibility with the existing desktop experience.