Skip to content

Redesign Tabs view as device-centric card grid for multi-machine workflow#248

Open
danshapiro wants to merge 50 commits intomainfrom
feat/tabs-redesign
Open

Redesign Tabs view as device-centric card grid for multi-machine workflow#248
danshapiro wants to merge 50 commits intomainfrom
feat/tabs-redesign

Conversation

@danshapiro
Copy link
Copy Markdown
Owner

Summary

  • Redesigned the Tabs sidebar view from a flat list into a device-centric card grid, making it easy to see what's open across all your machines and pull tabs to the current session
  • Tabs are grouped by device: local tabs first, then remote tabs organized by computer name, then closed tabs in a collapsible section
  • Each tab is a clickable card showing pane kind icons/colors, with green left border for open tabs and muted styling for closed
  • Segmented filter controls replace dropdown selects for status (all/open/closed) and scope (all/local/remote)
  • Right-click context menus with Jump (local), Pull/Open copy/Reopen (remote/closed), individual pane items, and Copy tab name
  • "Pull all" action on remote device section headers to grab everything from another machine at once
  • Click a remote card to open a copy; click a local card to jump to it

Changes

  • src/components/TabsView.tsx — Complete rewrite with new components: SegmentedControl, TabCard, DeviceSection, plus helpers for pane kind labels/colors, relative time formatting, and device grouping
  • test/unit/client/components/TabsView.test.tsx — 10 tests covering device sections, card clicks, context menus, device grouping, pane icons, filters
  • test/unit/client/components/TabsView.ws-error.test.tsx — Updated for new component structure
  • test/e2e/tabs-view-flow.test.tsx — Updated card click interaction
  • test/e2e/tabs-view-search-range.test.tsx — Updated with clipboard mock

Test plan

  • All unit tests pass (10 TabsView tests + ws-error test)
  • E2E flow and search-range tests pass
  • Full test suite passes (300+ files, 3000+ tests)
  • Visual verification via MCP screenshot confirmed by user

🤖 Generated with Claude Code

Dan Shapiro and others added 30 commits March 28, 2026 22:12
…hints

When called with unrecognized params (e.g. new-tab with url), the MCP
tool now returns an error listing valid parameters. A specific hint
suggests open-browser when url is passed to new-tab. Help text updated
to clarify the distinction between new-tab and open-browser, with a new
playbook for opening URLs.
- Remove localStorage persistence for tool strip expanded state
- ToolStrip now uses local useState initialized from showTools prop
- ToolBlocks inherit initial expanded state from showTools
- Remove autoExpandAbove/completedToolOffset props (no longer needed)
- All toggle state is session-only, resets on page refresh
Add implementation plan for making terminal URLs clickable (opening in
browser panes) with right-click context menu support for open in pane,
open in tab, open in browser, and copy URL.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Reviewed all source files referenced by the plan against the actual
codebase and corrected several issues:

- Fix ILinkHandler hover/leave signatures (need range param for OSC 8)
- Add explicit wrapperRef JSX attachment instructions for outer div
- Fix test file reference to canonical path (components/context-menu/)
- Add useMemo dependency array update note for ContextMenuProvider
- Clarify link provider registration order for priority
- Note cleanup needs for both hoveredUrl map and data attribute
- Add context-menu-utils.test.ts to new files list
- Document picker vs direct browser pane design decision

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dan Shapiro and others added 20 commits March 28, 2026 22:26
- Remove unnecessary empty hover/leave stubs on file path links
- Note pre-existing mock staleness in menu-defs.test.ts (6 missing actions)
- Add docs/index.html update step per repo rules
- Add timing safety note for wrapperRef in hover callbacks
- Clarify ContextMenuProvider action wiring locations and imports
- Add balanced parenthesis edge case for URL detection tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Corrects three factual errors in the implementation plan:
1. xterm.js link provider priority is first-registered=highest (not last)
2. menu-defs.test.ts does not exist yet (was incorrectly labeled "update existing")
3. Removes context-menu-constants.ts from modified files list (no changes needed)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 new tests across 8 files plus updates to 2 existing test files,
aligned to the implementation plan's TDD phases. Covers hover state
tracking, URL detection, left-click behavior, context menu integration,
multi-pane integration, and browser-use E2E smoke testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Phase 1 of clickable terminal URLs: module-level map for tracking hovered
URLs per pane, and findUrls utility for detecting http/https URLs in
terminal output text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…link provider

- Left-click on OSC 8 links and detected URLs now opens a browser pane
  (split right) instead of window.open
- Warning modal confirm also opens browser pane instead of window.open
- Add hover/leave callbacks to OSC 8 linkHandler for tracking hovered URL
- Register URL link provider (after file path provider) to detect plain
  http/https URLs in terminal output
- Track hovered URL in module-level map and data-hovered-url DOM attribute
- Clear hover state on terminal dispose and tab hide
- Update existing link warning and keyboard tests for new behavior

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add hoveredUrl optional field to terminal ContextTarget
- Parse hoveredUrl from dataset in parseContextTarget
- Add URL-specific menu items (Open in pane/tab/browser, Copy URL) to
  terminal context menu when hovering a URL
- Add openUrlInPane, openUrlInTab, openUrlInBrowser, copyUrl actions
  to ContextMenuProvider
- Add tests for context-menu-utils and menu-defs URL behavior

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- terminal-url-link-click: verifies URL click in nested pane opens
  browser pane on the correct branch (both plain URL and OSC 8 paths)
- terminal-url-context-menu: verifies URL context menu items appear
  when hovering a URL, are absent without hover, and "Open URL in pane"
  creates a browser pane split

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Verifies that when a terminal tab becomes hidden, the hovered URL
module state and DOM attribute are cleared.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
With the new URL link provider registered after the file path provider,
the existing test mock was capturing the URL provider instead of the
file path provider. Fixed by only storing the first registered provider.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove unnecessary escape in url-utils regex character class
- Capture wrapperRef.current in local variable before cleanup to satisfy
  react-hooks/exhaustive-deps rule

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ks, docs update

- URL detection now preserves balanced parentheses (e.g. Wikipedia URLs)
  while still stripping unbalanced trailing parens
- OSC 8 linkHandler.activate validates http/https scheme before opening
  browser panes; non-http schemes fall back to window.open
- Added clickable URLs feature to docs/index.html feature list

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Prevents non-left-click from triggering link activation on OSC 8 links,
file path links, and URL links. Adds tests for right-click and middle-click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Align .opencode/.gitignore with upstream best practices: add plans/,
package-lock.json, and .freshell-mcp-state.json. Remove the transient
MCP state file from tracking.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace flat list layout with a compact card grid organized by device.
Key changes:
- Device-centric grouping: local tabs first, then remote by device
- Compact card grid (auto-fill 220px min) with colored left borders
- Right-click context menus with Jump/Pull/Open pane/Copy actions
- Segmented controls for status and scope filters
- Hover-to-reveal action labels on cards
- Collapsible "Recently closed" section
- Pane type icons with distinct colors for visual scanning
- Click-to-act: click card to jump (local) or pull (remote/closed)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update all 4 test files to match the new device-centric card grid layout:
- Tests now click tab cards directly instead of finding "Open copy" buttons
- Section headings updated for device-centric grouping
- New tests for: device grouping, context menus, segmented filters,
  pane kind icons, multi-pane context menu items
- Explicit cleanup between tests to prevent DOM leakage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e2ad1c03e9

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +60 to +67
<button
type="button"
onClick={handleToggle}
className="shrink-0 p-0.5 hover:bg-accent/50 rounded transition-colors"
aria-label="Toggle tool details"
>
<ChevronRight className="h-3 w-3" />
</button>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Honor showTools=false by hiding expand toggle

When showTools is false, this component is documented to stay collapsed, but the collapsed row still renders a toggle button that calls handleToggle, so users can expand and view tool details anyway. In practice this makes the “Show tools” setting behave like “start collapsed” instead of “hide tools,” which is a behavior regression for callers that rely on showTools=false to suppress tool details.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant