Skip to content

improve(ui): restyle connection-lost pill as neutral status surface - #101844

Merged
steipete merged 1 commit into
mainfrom
claude/connection-pill-polish
Jul 7, 2026
Merged

improve(ui): restyle connection-lost pill as neutral status surface#101844
steipete merged 1 commit into
mainfrom
claude/connection-pill-polish

Conversation

@steipete

@steipete steipete commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Related: #101812

What Problem This Solves

The floating connection-lost pill landed in #101812 still read as a generic warning callout: an amber-tinted container with an amber border, a second bordered capsule for the Retry button nested inside it, and a spinning eight-spoke loader — three competing treatments in one small surface, and a muddy brown wash in dark mode.

Why This Change Was Made

Restyles the pill as a quiet system-status surface in line with the dashboard chrome: neutral elevated background with a hairline border and real shadow, a single amber accent (a small pulsing status dot reusing the existing pulse-subtle keyframes), medium-weight title with muted "Reconnecting…" state, and Retry as an accent-colored text action behind a hairline divider instead of a capsule-inside-a-capsule. Markup and behavior are otherwise unchanged: same i18n keys, role="status" live region, screen-reader hint, tooltip with redacted error detail, and retry wiring; the unused loader-icon import is dropped.

User Impact

The reconnect pill now looks native to the dashboard instead of like a warning blob: calm neutral surface, one amber status dot, and a clear Retry action. No behavior change.

Evidence

Theme v1 (#101812) v2 (this PR)
Dark v1 dark v2 dark
Light v1 light v2 light

Close-ups: dark · light · mobile 375px
Artifact manifest: https://artifacts.openclaw.ai/pr-connection-pill-v2-20260707/artifact-manifest.json

  • Live dev UI against a real gateway: pill renders on simulated post-session drop, Retry handler fires through the new markup, tooltip carries hint + redacted error detail, sr-only hint present, no console errors.
  • Codex autoreview (gpt-5.5): clean, no actionable findings.

@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui size: S maintainer Maintainer-authored PR labels Jul 7, 2026
@clawsweeper

clawsweeper Bot commented Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 7, 2026, 2:14 PM ET / 18:14 UTC.

Summary
The PR restyles the Control UI connection-lost pill from a warning-tinted spinner/capsule treatment to a neutral elevated status surface with an amber dot and text Retry action.

PR surface: Source +2. Total +2 across 2 files.

Reproducibility: not applicable. as a bug reproduction: this is a visual polish PR. The submitted artifact screenshots provide a high-confidence way to inspect the intended dark, light, and mobile rendering.

Review metrics: none identified.

Merge readiness
Overall: 🦞 diamond lobster
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦞 diamond lobster
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Next step before merge

  • No automated repair is indicated; the remaining action is maintainer review of a protected-label visual polish PR.

Maintainer decision needed

  • Question: Should the neutral elevated connection-lost pill styling in this PR become the intended Control UI treatment?
  • Rationale: The patch is correct as a narrow visual restyle, but the PR has the protected maintainer label and the remaining decision is product/design acceptance rather than an automatable defect repair.
  • Likely owner: steipete — The same person owns the current banner history and authored the preceding floating-pill redesign on this surface.
  • Options:
    • Accept the neutral status pill (recommended): Land the restyle once required checks are satisfactory, keeping behavior and retry wiring unchanged.
    • Request a design tweak: Ask for specific visual adjustments to the dot, divider, shadow, or text action before merge.
    • Leave current main unchanged: Close or defer this polish PR if maintainers prefer the warning-tinted spinner pill already on main.

Security
Cleared: The diff only changes Control UI markup/CSS for an existing banner and removes an unused icon import; no concrete security or supply-chain concern was found.

Review details

Best possible solution:

If maintainers accept the quieter visual treatment, land this small restyle after required checks; inherited safe-area or localization edge cases can remain separate follow-up work if still desired.

Do we have a high-confidence way to reproduce the issue?

Not applicable as a bug reproduction: this is a visual polish PR. The submitted artifact screenshots provide a high-confidence way to inspect the intended dark, light, and mobile rendering.

Is this the best way to solve the issue?

Yes, for the stated polish goal: the change stays inside the existing banner component and CSS while preserving i18n, live-region, tooltip, and retry wiring. It is not intended to be the broader fix for inherited safe-area or long-locale layout edge cases from the earlier floating-pill change.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 525f58e9c386.

Label changes

Label changes:

  • add P3: This is a low-risk Control UI polish PR with no behavior, config, auth, storage, or provider-routing change.
  • add proof: sufficient: Contributor real behavior proof is sufficient. Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.
  • add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.
  • add rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
  • add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.

Label justifications:

  • P3: This is a low-risk Control UI polish PR with no behavior, config, auth, storage, or provider-routing change.
  • rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.
  • proof: sufficient: Contributor real behavior proof is sufficient. Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Screenshot proof is sufficient for this visual-only change: inspected artifacts show the restyled pill in dark, light, and 375px mobile UI, and the PR body reports live-gateway retry and tooltip checks.
Evidence reviewed

PR surface:

Source +2. Total +2 across 2 files.

View PR surface stats
Area Files Added Removed Net
Source 2 48 46 +2
Tests 0 0 0 0
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 2 48 46 +2

What I checked:

  • Root repository policy read: Read the full root AGENTS.md and applied the PR-review, UI-depth, protected-label, and maintainer-decision guidance to this review. (AGENTS.md:1, 525f58e9c386)
  • Scoped UI policy read: The UI-scoped AGENTS.md only adds i18n/generated-output guidance; this PR does not edit locale bundles or generated i18n metadata. (ui/AGENTS.md:1, 525f58e9c386)
  • Current main still has the old visual treatment: Current main still imports the loader icon and renders the spinner, strong title, and btn-styled retry button, so the visual polish is not already implemented on main. (ui/src/components/connection-banner.ts:6, 525f58e9c386)
  • PR head preserves behavior wiring: At PR head, the banner keeps the status live region, the same i18n keys, the hidden hint, and the same onRetry callback while swapping the visible spinner for a status dot. (ui/src/components/connection-banner.ts:17, c562cfeea6ec)
  • PR head confines the restyle to component CSS: The PR head changes the pill, dot, title, state, and retry styling without adding config, storage, provider, auth, dependency, or runtime protocol surface. (ui/src/styles/components.css:330, c562cfeea6ec)
  • Mount and retry caller checked: The app host still mounts the banner only when disconnected and passes retry through to context.gateway.connect(), so the PR does not change the gateway reconnect behavior boundary. (ui/src/app/app-host.ts:758, 525f58e9c386)

Likely related people:

  • steipete: Current-main blame and git history show Peter Steinberger introduced the connection banner component and then landed the floating-pill redesign that this PR restyles. (role: feature owner and recent area contributor; confidence: high; commits: 2522ccac7d93, 21f251220fc0; files: ui/src/components/connection-banner.ts, ui/src/styles/components.css, ui/src/app/app-host.ts)
What the crustacean ranks mean
  • 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
  • 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
  • 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
  • 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
  • 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
  • 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
  • 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works
  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦞 diamond lobster Very strong PR readiness with only minor maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. labels Jul 7, 2026
@steipete
steipete merged commit dd228d5 into main Jul 7, 2026
133 of 143 checks passed
@steipete
steipete deleted the claude/connection-pill-polish branch July 7, 2026 18:20
@steipete

steipete commented Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Merged via squash.

@github-actions github-actions Bot mentioned this pull request Jul 7, 2026
Open
github-actions Bot pushed a commit to Desicool/openclaw that referenced this pull request Jul 8, 2026
@steipete
improve(ui): restyle connection-lost pill as neutral status surface (o…
e4fd8b9 
…penclaw#101844)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

app: web-ui App: web-ui maintainer Maintainer-authored PR P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦞 diamond lobster Very strong PR readiness with only minor maintainer review expected. size: S status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@steipete