Skip to content

feat(preview): add localhost link preview popup with toggle settings#801

Open
KaanAydinli wants to merge 4 commits into
crynta:mainfrom
KaanAydinli:feat/preview-localhost-link-preview-popup-toggle-setting
Open

feat(preview): add localhost link preview popup with toggle settings#801
KaanAydinli wants to merge 4 commits into
crynta:mainfrom
KaanAydinli:feat/preview-localhost-link-preview-popup-toggle-setting

Conversation

@KaanAydinli

@KaanAydinli KaanAydinli commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

What

Adds an in-terminal hover action for localhost and loopback links that opens
them in Terax's web preview. Also adds a new setting to always open localhost
terminal links in preview instead of the system browser.

Why

Terax already has an internal web preview, but localhost links printed in the
terminal required opening an external browser or manually copying the URL
into preview. This makes local dev server links faster to inspect inside the
workspace.

How

Terminal web link handling now routes through app level link actions.
Localhost links show an Open in Preview popup anchored to the detected link
width, and the new persisted setting controls whether direct clicks open
preview automatically.

Testing

  • pnpm exec tsc --noEmit clean
  • Manual smoke-test of the affected feature
  • (If you touched src-tauri/) cargo test --locked and cargo clippy --all-targets --locked -- -D warnings clean
  • (If you changed a #[tauri::command] signature) called out below so
    the FE caller can be updated in lockstep
  • (If UI) tested in pnpm tauri dev
  • Platforms tested: Linux
  • Shells tested (if relevant): bash

Additional checks:

  • pnpm test
  • pnpm build
  • git diff --check

Screenshots / GIFs

image image

Notes for reviewer

Summary by CodeRabbit

  • New Features

    • Terminal localhost/loopback links can open in an in-app preview tab instead of the system browser.
    • New "Web Preview" switch in General preferences to control localhost link behavior.
    • Hover popup appears when hovering localhost links in the terminal, showing an “Open in Preview” action.
  • Tests

    • Added test coverage for localhost URL detection.

@KaanAydinli KaanAydinli requested a review from crynta as a code owner June 13, 2026 19:31
@coderabbitai

coderabbitai Bot commented Jun 13, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d601af64-f421-40bc-8865-9fb9bf1a5a3e

📥 Commits

Reviewing files that changed from the base of the PR and between afabbe5 and 065b533.

📒 Files selected for processing (1)
  • src/app/App.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/App.tsx

📝 Walkthrough

Walkthrough

Terminal links to localhost URLs can now optionally open in an in-app preview pane. A new preference controls this behavior, preference state is persisted and synced across windows, the terminal link system is now pluggable via actions, and a hover popup offers quick preview access.

Changes

Localhost Link Preview

Layer / File(s) Summary
Localhost URL Detection Utility
src/lib/localUrl.ts, src/lib/localUrl.test.ts, src/modules/preview/PreviewPane.tsx
New isLocalhostUrl(raw: string) utility identifies localhost/loopback URL patterns (localhost, 0.0.0.0, IPv6 ::1, *.localhost, 127.x.x.x); test suite covers valid and invalid inputs; PreviewPane refactored to use the shared utility instead of a local implementation.
Localhost Link Preview Preference
src/modules/settings/store.ts, src/settings/sections/GeneralSection.tsx
Preferences model gains alwaysOpenLocalhostLinksInPreview boolean; storage key, defaults, loading, and cross-window sync are wired into the settings store; GeneralSection UI adds a "Web Preview" toggle to control the preference.
Terminal Link Actions Framework
src/modules/terminal/lib/rendererPool.ts, src/modules/terminal/index.ts
rendererPool introduces configurable TerminalLinkActions types and configureTerminalLinkActions() to replace hardcoded openUrl() calls; WebLinksAddon is re-wired to emit hover/leave/open events with viewport-relative bounding coordinates via new linkViewportRect() helper; types are re-exported from the terminal module.
App Integration and Localhost Link Popup
src/app/App.tsx
App subscribes to the localhost-link preference, configures terminal link actions to show a fixed-position LocalhostLinkPreviewPopup on hover for localhost URLs, and conditionally opens preview tabs (when preference is enabled) or delegates to external URL handler on click; popup computes clamped positioning and renders an "Open in Preview" button with mouse state management.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A localhost link now gleams so bright,
In preview panes, it opens right.
Hover, peek, and tap to see—
No browser tab needed, just thee!
The preference flows through every space,
While popups dance at cursor's grace.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 4.55% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main feature: adding a localhost link preview popup with a toggle setting. It is concise, specific, and reflects the primary changes across all modified files.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/App.tsx`:
- Around line 1322-1331: The popup wrapper currently doesn't participate in
cancelling/restarting the hide timer, so moving the cursor into the wrapper
padding/border can still trigger a hide; update the wrapper div to also use the
same onMouseEnter and onMouseLeave handlers (i.e., attach
onMouseEnter={onMouseEnter} and onMouseLeave={onMouseLeave} to the outer div) or
ensure both the outer wrapper and the inner button call the timer cancel/restart
logic inside the existing onMouseEnter/onMouseLeave functions so the hide timer
is cancelled as soon as the cursor enters any part of the popup and restarted
only when it leaves.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 551497bf-60b4-4197-8daa-4f7ce5ef512d

📥 Commits

Reviewing files that changed from the base of the PR and between 4e6a478 and afabbe5.

📒 Files selected for processing (8)
  • src/app/App.tsx
  • src/lib/localUrl.test.ts
  • src/lib/localUrl.ts
  • src/modules/preview/PreviewPane.tsx
  • src/modules/settings/store.ts
  • src/modules/terminal/index.ts
  • src/modules/terminal/lib/rendererPool.ts
  • src/settings/sections/GeneralSection.tsx

Comment thread src/app/App.tsx
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