Skip to content

Network settings UX review: fix defects, surface addresses and status - #2164

Closed
cpvalente wants to merge 3 commits into
masterfrom
claude/network-settings-ux-review-809lcg
Closed

Network settings UX review: fix defects, surface addresses and status#2164
cpvalente wants to merge 3 commits into
masterfrom
claude/network-settings-ux-review-809lcg

Conversation

@cpvalente

Copy link
Copy Markdown
Owner

Summary

A UX/UI review of the Network settings panel, focused on low-risk, low-complexity changes: fix real defects first, then close the two gaps operators actually hit (which address to hand out, whether the setup is healthy).

Verified defects fixed:

  • Redirect modal disabled its entire view Select whenever no URL presets existed, even though that Select also holds every built-in view — the control was dead on a fresh project
  • Interface tags showed a bare IP while the copy/click action used a URL with the port, sending users to an address that can't connect
  • Client table's self-row highlight lost to the shared table's zebra-stripe on CSS specificity on even rows
  • Client table headers used <td> instead of <th>, so they got none of the shared header styling and no screen-reader association
  • Log store grew without bound; capped at 500 entries
  • Client rows followed broadcast insertion order and reshuffled on reconnect
  • Rename modal had no autofocus or Enter-to-submit
  • Identify button referenced a blink class that was never defined, so the flash feedback never rendered

New in the panel:

  • Server address card (network interfaces + port, linking to the existing port settings form)
  • Server status card, reading the previously-unconsumed GET /api/session/ endpoint for uptime, connected clients, last connection/request, timezone, version
  • Log search, an "issues only" filter, and a filtered/total entry count
  • Relabelled the log's "Extract" button to "Open in new window" (it opens a window, not an export)
  • Consistent card layout matching the rest of settings, sidebar entries for the new sections, and explanatory empty states throughout

Deliberately out of scope: the share-link builder/QR form, any server or packages/types changes, ping behavior, and bulk client actions.

Test plan

  • pnpm typecheck clean
  • pnpm lint — unchanged at the pre-existing 120-warning baseline
  • pnpm --filter ontime-ui build succeeds (confirms SCSS compiles)
  • Manually hit GET /data/session/ against a running server and confirmed the response matches what the new status card expects
  • e2e/tests/features/210-client-remote.spec.ts (redirect / identify / rename) passes unchanged — testids preserved
  • Full e2e suite: 53 passed, 1 skipped, 2 failed; both failures reproduce identically against the unmodified base commit (one flaky, re-ran green; 212-time-until › time until absolute fails pre-existing, verified via a clean worktree)
  • Visual check in a browser — not done in this environment, worth a look before merge, particularly the Sharing panel's Share link card (it reuses the same interface-list component, which now shows the full URL with port instead of a bare IP)

Generated by Claude Code

claude added 2 commits August 1, 2026 18:46
Fixes a set of verified defects in the network settings surfaces:

- self-row highlight was invisible on even rows, as the shared table's
  `tr:nth-child(even)` stripe outranks a plain class selector
- client table used `<td>` for header cells, so it received none of the
  `th` styling applied across the other settings tables, and offered no
  header association for assistive technology
- the redirect modal disabled its view Select whenever no URL presets
  existed, even though that Select also holds every built-in view, so
  the control was dead on a fresh project
- the log store grew without bound; capped to a rolling window
- network interfaces displayed a bare IP while copying a full URL with
  the port, sending users to an address that cannot connect
- client rows followed broadcast insertion order and shuffled on
  reconnect, making it easy to action the wrong row
- the rename modal had no autofocus and no submit on Enter

Also restores the identify blink, which referenced a class that was
never defined.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FdRte3v1Swc2MRt9fKJTXk
The network panel showed events and clients but never answered the two
questions users arrive with: which address to hand out, and whether the
setup is healthy. Addresses lived in the sharing panel, and the session
stats endpoint the server already serves had no client consumer.

- add a server address card composing the existing interface list with
  the port, linking to the port form rather than duplicating it
- add a server status card reading the existing session endpoint for
  uptime, connected clients, last connection and last integration request
- give the log a text search, an issues-only filter and a visible count
  of filtered versus total entries
- relabel the log's Extract action, which opens a window rather than
  exporting
- normalise the panel to the card rhythm used elsewhere in settings, and
  add the new sections to the settings sidebar
- describe what each section is for, and give the client tables empty
  states that explain rather than sit blank

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FdRte3v1Swc2MRt9fKJTXk
@coderabbitai

coderabbitai Bot commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f3078068-870c-44ba-9bfc-0b7abbb88b64

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

- restore text selection on the client path cell; the global
  `user-select: none` means the cell needs `.copiable` explicitly, which
  was lost when the path moved into a button
- drop the click-to-open action from the path cell, which followed from
  making it read-first; copy still yields the full client URL
- stop passing the current client id when sorting other clients, which
  can never contain it
- remove two width rules that no styles reference
- cover the redirect view select with no url presets, a case the suite
  did not exercise and which the other three cases pass without

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FdRte3v1Swc2MRt9fKJTXk
@cpvalente cpvalente closed this Aug 2, 2026
@cpvalente
cpvalente deleted the claude/network-settings-ux-review-809lcg branch August 2, 2026 08:51
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