feat: redesign Connection page with tabbed interface#21
Merged
simonCatBot merged 18 commits intomasterfrom Apr 3, 2026
Merged
Conversation
New Connection tab with 4 connection modes: - Local: Everything on same machine - Client: Local rocCLAW to remote OpenClaw - Cloud: Same cloud machine setup - Remote: SSH tunnel access Features: - Tab-based UI matching other pages - Command copying with visual feedback - Connection form with URL and token - Save, Test, Disconnect actions - Connect Now button at bottom - Status indicator and warnings Also adds Connection tab to TabBar. All 818 tests passing.
… screen The disconnected/connection screen now uses the redesigned ConnectionPage instead of the old GatewayConnectScreen. All 818 tests passing.
- Header and tabs now use shrink-0 to prevent compression - Tabs container has overflow-x-auto with min-w-max for horizontal scroll - Content area uses min-h-0 to properly participate in flex scroll - Responsive padding and font sizes for small screens - All 818 tests passing
After clicking Connect Now: 1. Close the connection setup page 2. Save settings (starts background connection) 3. Show main app UI while connection happens in background All 818 tests passing.
The saveSettings function was setting didAutoConnectRef=true which prevented the auto-connect effect from reconnecting after saving. Now auto-connect runs normally after settings are saved. All 818 tests passing.
The saveSettings function was setting manualDisconnectRef=true which blocked the auto-connect effect from running. Now both refs are reset to false to allow the auto-connect flow after explicit Connect Now. All 818 tests passing.
When gateway connects successfully, the Connection tab is automatically removed from active tabs. Shows Agents and System Metrics by default. All 818 tests passing.
The auto-hide effect now uses setTimeout to avoid race conditions. User can now click Connection tab to re-enable it after auto-hide. All 818 tests passing.
The previous approach of omitting activeTabs from deps caused a runtime warning. Now using a ref to track activeTabs without affecting the dependency array. All 818 tests passing.
…tings The saveSettings was setting status to 'connecting' then 'disconnected' which blocked the auto-connect effect. Now saveSettings just saves settings and lets the auto-connect effect handle connection status. All 818 tests passing.
Left column: Instructions (tab description, tab-specific content, warnings) Right column: Connection form (URL, token, buttons) and status Responsive - stacks to single column on mobile. All 818 tests passing.
All 818 tests passing.
Updated tests to use the new ConnectionPage with tabs: - cloud tab uses local defaults when available ✓ - client tab warns about ws tailscale urls ✓ Skipped test: connection settings save - needs more work to match the new two-column layout with id-based input selectors. Added id attributes to ConnectionPage inputs: - id='gateway-url' for Gateway URL input - id='gateway-token' for Token input All 13 E2E tests pass (1 skipped for follow-up work).
- Remove unused GatewayConnectScreen import from page.tsx - Remove unused imports from ConnectionPage.tsx (useLayoutEffect, useRef, isStudioLikelyRemote, etc.) - Remove unused error and testResult props from ConnectionPage interface - Fix unused expression in onClick handler - Remove unused imports from SettingsPanel.tsx (Clock, RefreshCw, Settings) - Remove unused configData variable assignment - Remove unused handleFleetSelectAgent callback Lint: 0 errors, 0 warnings Tests: 818 unit tests pass, 13 E2E tests pass (1 skipped)
These props were removed from ConnectionPage interface but still being passed at the second ConnectionPage usage location in page.tsx. Typecheck: passes
The test was skipped because it used the default stub (connected status). Now it properly uses disconnected status so Connection tab is visible. Uses CSS id selectors (#gateway-url, #gateway-token) to fill inputs. All 14 E2E tests pass.
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
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
Redesigns the Connection page to use a tabbed interface that matches the style of other pages.
Connection Modes (Tabs)
Features
Technical Details
ConnectionPage.tsxcomponent with all connection logicFiles Changed
src/components/ConnectionPage.tsx(new, ~700 lines)src/components/TabBar.tsx(added Connection tab)src/app/page.tsx(added Connection tab content)All 818 tests passing.