Skip to content

feat(ui): symmetric Connect button + clear error feedback for both sides#68

Merged
VirusAlex merged 1 commit intomainfrom
feat/connect-ux
May 1, 2026
Merged

feat(ui): symmetric Connect button + clear error feedback for both sides#68
VirusAlex merged 1 commit intomainfrom
feat/connect-ux

Conversation

@VirusAlex
Copy link
Copy Markdown
Owner

Summary

Two complaints from the v0.4.0 live test:

  1. Local-token field had no Connect button — user had to press Enter and hope. Peer side has a button. Asymmetric and confusing.
  2. Both sides silently swallowed connect failures. Wrong token? Wrong URL? Down peer? Mistyped port? UI just said "disconnected" / "no peer" forever, no hint at what went wrong.

Fix

Symmetric Connect button

Local token field gets the same Connect button the peer side has. Enter still works for power users; click works for everyone else. Both forward to the same connectLocal() entry point. The legacy applyLocalToken() / checkLocal() names are kept as aliases so any external code that called them still works.

4-state status + inline error

Both sides now track a idle / connecting / ok / error status and a localError / peerError string. The status pill cycles through these; the error string sits inline next to it (full text in the title attribute, ellipsis in the chip).

Status Pill Pill class
idle "disconnected" / "no peer" (neutral)
connecting "connecting…" (neutral)
ok "connected" / "peer ok" .ok
error "error" + inline error text .bad

Classified error messages

HTTP Message
401 401 — invalid token
403 403 — forbidden
404 404 — endpoint not found (check URL points at NetCopy)
5xx 5xx — peer server error
fetch reject unreachable (host down, wrong port, or http/https mismatch)

The fetch-reject hint covers the common causes browsers refuse to disclose concretely (CORS / scheme mismatch / unreachable / refused all surface as the same opaque "TypeError: Failed to fetch").

Misc

  • Connect button is disabled while a request is in flight; its label becomes so the user knows something's happening on slow networks.
  • Enter in any input field on a side triggers Connect for that side.

Test plan

  • Local mvn compile clean; ArchUnit 8/8.
  • CI green.
  • Manual: paste correct local token + click Connect → "connected".
  • Manual: paste wrong local token → "error" + 401 — invalid token.
  • Manual: peer URL http://nonexistent:9999 → "error" + unreachable (host down, …).
  • Manual: peer URL http://google.com → "error" + 404 — endpoint not found ….

🤖 Generated with Claude Code

Two complaints from the v0.4.0 live test:

  1. Local-token field had no Connect button — user had to press Enter
     and hope. Peer side has a button. Asymmetric and confusing.

  2. Both sides silently swallowed connect failures. Wrong token? Wrong
     URL? Down peer? Mistyped port? UI just said "disconnected" / "no
     peer" forever, no hint about what went wrong.

Fix:

  - Local token field gets the same "Connect" button the peer side has.
    Enter still works for power users; click works for everyone else.
    Both forward to the same connectLocal() entry point. The legacy
    applyLocalToken() / checkLocal() names are kept as aliases so any
    bookmarked URL / external integration that called them still works.

  - Both sides now track a 4-state status (idle / connecting / ok /
    error) and a localError / peerError string. The status pill flips
    through the states; the error string lands inline next to it (with
    full text in the title attribute for hover, ellipsis in the chip).

  - Error messages classified:
    * 401 → "401 — invalid token"
    * 403 → "403 — forbidden"
    * 404 → "404 — endpoint not found (check URL points at NetCopy)"
    * 5xx → "5xx — peer server error"
    * fetch reject → "unreachable (host down, wrong port, or http/https
      mismatch)" — browsers don't surface concrete TCP errors so the
      message points at the most likely causes.

  - Connect button is disabled while a request is in flight; its label
    becomes "…" so the user knows something's happening even on a slow
    network.

Pure client-side: app.js + index.html + style.css. No API changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@VirusAlex VirusAlex merged commit 9859f28 into main May 1, 2026
1 check passed
@VirusAlex VirusAlex deleted the feat/connect-ux branch May 1, 2026 08:48
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.

2 participants