fix(web): remove redundant You header and time stamp from user chat messages by maxmilian · Pull Request #4515 · nexu-io/open-design

maxmilian · 2026-06-18T07:49:32Z

Why

Scratching the issue's itch: the project chat panel still showed two pieces of metadata around each user message that add visual noise without earning their space — the chat.you "You" role header and the relative time stamp beside the copy button. #3875 already removed the day separator and the inline relative message time, but @lefarcen's Jun 17 re-check noted these two user-message elements were still rendered on main, so the issue was reopened with good first issue / help wanted. This finishes that cleanup.

What users will see

In a project conversation, the user's prompt now reads as just the prompt bubble:

the "You" label that sat above the user prompt is gone
the small time stamp that appeared next to the copy button on hover is gone

Assistant messages are unchanged (they keep their role label and run metadata). No timestamps elsewhere in the app are affected — this is purely the chat renderer.

Surface area

Screenshots

Before → after (new project conversation, user prompt in the left chat panel):

Before	After
"You" header above the prompt bubble	header removed, prompt bubble reads on its own

Bug fix verification

Test path: apps/web/tests/components/conversation-timestamps.test.tsx → new case does not render the user-message "You" header or time stamp
Did the test go red on main and green on this branch? yes — on main it fails with expected <div class="role">…</div> to be null (the "You" header is still rendered); after the change both .role and .user-actions-time assertions pass for a user message.

Validation

pnpm --filter @open-design/web test — 334 files pass (3334 tests), including the tightened conversation-timestamps case
pnpm typecheck — clean (apps/web Done)
Verified before/after in the running app via the Playwright e2e harness (screenshots above)

Scope notes: the change is limited to the user-message branch of ChatPane plus the now-orphaned styles. The shared .msg .role rule (still used by assistant messages in AssistantMessage.tsx) is intentionally left in place; only the .msg.user-scoped .role / .user-actions-time rules were removed.

Also now unused after this change but intentionally left out of scope (happy to prune in a follow-up if you'd prefer): the chatTime helpers messageTime / shortTime / exactDateTime (their last caller was the removed <time>; they still have their own unit tests), and the chat.you i18n key (its only consumer was the removed header).

…essages The project chat panel rendered two pieces of metadata above/around each user message that added visual noise without earning their space: the `chat.you` "You" role header and the relative time stamp beside the copy button. nexu-io#3875 removed the day separator and the inline relative message time, but these two user-message elements were left behind (noted in the issue thread on Jun 17). Remove both from the user message in ChatPane, drop the now-unused messageTime/shortTime/exactDateTime wiring, and prune the orphaned `.msg.user .role` / `.msg.user .user-actions-time` style rules (the shared `.msg .role` used by assistant messages is untouched). Tighten conversation-timestamps.test.tsx to assert both elements are absent for a user message directly, rather than only covering the older `.msg-time` element. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-06-18T07:56:12Z

Visual regression review

Head: 408b8dd · Base: ad16709

5 changed · 33 unchanged · 0 missing baseline · 0 failed

Changed cases

Case	Main	PR	Diff
visual-integrations-use-everywhere
visual-project-workspace
visual-settings-byok
visual-settings-byok-model-dropdown
visual-settings-byok-openai

Unchanged cases

Case	Main	PR	Diff
visual-avatar-local-agent-list
visual-avatar-menu
visual-critical-settings
visual-critical-workspace
visual-critical-workspace-preview
visual-design-system-detail
visual-design-systems
visual-home
visual-home-catalog
visual-home-context-picker
visual-home-plugin-filter
visual-home-plugin-use-staged
visual-home-plugin-use-with-query
visual-home-staged-attachment
visual-integrations
visual-integrations-mcp
visual-new-project-modal
visual-onboarding-runtime
visual-plugin-details
visual-plugin-share-menu

Visual diff is advisory only and does not block merging.

lefarcen · 2026-06-18T07:56:36Z

🧪 Queued for QA validation — this PR has changes that need a manual QA pass before it's merged. Nothing needed from you; we'll update here once it's validated. Thanks for the contribution! 🙏

nettee

I found one non-blocking follow-up in the changed range: the visual cleanup also removes the only sender cue from the user-message DOM, so I left an inline note about preserving that context for assistive tech. I wasn't able to rerun the web tests in this checkout because workspace dependencies are missing here (vitest: command not found).

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

nettee · 2026-06-18T07:59:59Z

-  const ts = messageTime(message);

  return (
    <div className="msg user">


Removing the .role block here also removes the only sender label from the user-message DOM, so screen readers now encounter bare prompt text plus the copy button while assistant messages still announce their role in AssistantMessage. The new test in conversation-timestamps.test.tsx reinforces that by asserting .role is absent altogether. To keep the visual cleanup without dropping speaker attribution, consider leaving an off-screen label such as VisuallyHidden with t('chat.you'), or giving the wrapper an equivalent aria-label/aria-labelledby, and update the test to assert the accessible label instead of the DOM node disappearing entirely.
_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

chaoxiaoche · 2026-06-18T08:59:39Z

The visual cleanup looks good to me — removing the visible "You" header and hover timestamp makes the user prompt bubble feel cleaner and less noisy.

One small accessibility follow-up would be nice to keep before/after behavior balanced: even if the "You" label is no longer visible, could we keep a screen-reader-only sender label or add an equivalent aria label for user messages? That way the UI stays visually clean while assistive-tech users can still tell that the message is from the user.

This feels like a small follow-up rather than a visual blocker from my side.

chaoxiaoche

UI/design LGTM. The user-message cleanup matches the goal of reducing visual noise in the chat panel, and the before/after screenshots make the change clear.

I left one small accessibility follow-up about preserving sender context for screen readers, but I do not see that as a visual blocker from my side.

@chaoxiaoche

Removing the visible "You" header (PR nexu-io#4515) also dropped the only sender cue for assistive tech, leaving user and assistant messages indistinguishable to screen readers (assistant still renders a visible role header). Re-add the sender name as a visually-hidden .sr-only label so the bubble stays visually clean while AT users can still tell the message is from the user. Addresses @chaoxiaoche's review note. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

maxmilian · 2026-06-18T13:45:57Z

@chaoxiaoche good catch — agreed the balance matters. Pushed 09671d3: the user bubble now carries a visually-hidden .sr-only sender label (<span class="sr-only">{t('chat.you')}</span>), so it stays visually clean but assistive tech still announces "You" before the message — restoring parity with the assistant bubble, which keeps its visible role header.

Added a regression test (conversation-timestamps.test.tsx → keeps a screen-reader-only sender label on user messages) asserting the .sr-only label is present with the localized sender name; full @open-design/web suite stays green (334 files / 3335 tests) and pnpm typecheck is clean.

Heads-up for QA: this adds one commit on top of the previously-validated head, so the latest 09671d3 is what's ready for the pass.

nettee

@maxmilian I reviewed the live changed ranges in ChatPane, the user-message CSS cleanup, and the updated timestamp regression coverage. The follow-up sr-only sender label restores the user-message speaker cue for assistive tech while keeping the intended visual simplification, and I did not find a new correctness or maintainability issue on 09671d3.

I could not rerun the local web checks in this checkout because node_modules are missing here (vitest: command not found), but the patch itself is coherent and the added regression coverage matches the behavior change. Nice cleanup, and thanks for turning the accessibility follow-up around quickly.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

maxmilian · 2026-06-18T16:07:45Z

The only red check here is unrelated to this PR.

This PR touches just four chat-side files:

apps/web/src/components/ChatPane.tsx
apps/web/src/styles/chat.css
apps/web/src/styles/viewer/routines.css
apps/web/tests/components/conversation-timestamps.test.tsx

The failure is in tests/components/ProjectView.run-cleanup.test.tsx ("daemon cleanup > does not replay a terminal succeeded row with empty produced files", 333 passed | 1 failed) — none of which this PR modifies.

I ran that exact test locally on both ends and it's green both times:

base tip c87934d4 (upstream/main): 25/25 passed
this PR head 09671d3: 25/25 passed

The assertion shape (expected vi.fn() to not be called at all, but actually been called 1 times) is a replay/ordering race, so this reads as a CI-side flake rather than a real regression. Could a maintainer kick off a re-run of the Web workspace tests / Validate workspace jobs? Happy to rebase if that's easier.

maxmilian marked this pull request as ready for review June 18, 2026 07:54

lefarcen requested a review from nettee June 18, 2026 07:55

lefarcen added size/S PR changes 20-100 lines risk/medium Medium risk: regular code changes type/bugfix Bug fix labels Jun 18, 2026

lefarcen mentioned this pull request Jun 18, 2026

Remove redundant metadata from project chat messages #3847

Open

lefarcen requested a review from chaoxiaoche June 18, 2026 07:55

lefarcen added the needs-validation Runtime change detected; needs human or /explore agent validation. label Jun 18, 2026

nettee reviewed Jun 18, 2026

View reviewed changes

chaoxiaoche approved these changes Jun 18, 2026

View reviewed changes

nettee approved these changes Jun 18, 2026

View reviewed changes

chore: re-trigger CI (unrelated flaky ProjectView.run-cleanup test)

408b8dd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): remove redundant You header and time stamp from user chat messages#4515

fix(web): remove redundant You header and time stamp from user chat messages#4515
maxmilian wants to merge 3 commits into
nexu-io:mainfrom
maxmilian:fix/chatpane-user-message-metadata

maxmilian commented Jun 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

lefarcen commented Jun 18, 2026

Uh oh!

nettee left a comment

Uh oh!

nettee Jun 18, 2026

Uh oh!

chaoxiaoche commented Jun 18, 2026

Uh oh!

chaoxiaoche left a comment

Uh oh!

maxmilian commented Jun 18, 2026

Uh oh!

nettee left a comment

Uh oh!

maxmilian commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

maxmilian commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What users will see

Surface area

Screenshots

Bug fix verification

Validation

Uh oh!

github-actions Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual regression review

Changed cases

Uh oh!

lefarcen commented Jun 18, 2026

Uh oh!

nettee left a comment

Choose a reason for hiding this comment

Uh oh!

nettee Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

chaoxiaoche commented Jun 18, 2026

Uh oh!

chaoxiaoche left a comment

Choose a reason for hiding this comment

Uh oh!

maxmilian commented Jun 18, 2026

Uh oh!

nettee left a comment

Choose a reason for hiding this comment

Uh oh!

maxmilian commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

maxmilian commented Jun 18, 2026 •

edited

Loading

github-actions Bot commented Jun 18, 2026 •

edited

Loading