Skip to content

feat(web): configure message alignment independently#60

Merged
shakkernerd merged 8 commits into
openclaw:mainfrom
jjjhenriksen:codex/message-side-layout
Jul 13, 2026
Merged

feat(web): configure message alignment independently#60
shakkernerd merged 8 commits into
openclaw:mainfrom
jjjhenriksen:codex/message-side-layout

Conversation

@jjjhenriksen

@jjjhenriksen jjjhenriksen commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

What changed

  • keeps the existing Your message alignment Left/Right preference
  • adds an independent Other message alignment Left/Right preference
  • applies the other-message choice to both human teammates and agents
  • persists both choices locally and refreshes the embedded web assets

Why

Conversation participants should be able to choose either side independently, including layouts with the current user on the left and everyone else on the right.

Browser proof

The proof run uses generated local identities only: Local Captain, Alignment Human, and Activity Bot. The strengthened Playwright test measures avatar/body ordering for the current user, the human teammate, and the agent in every combination.

Configuration

Profile settings with independent message alignment controls

Layout combinations

Your messages Other messages Proof
Left Left Both left
Left Right You left, others right
Right Left You right, others left
Right Right Both right

Validation

  • pnpm typecheck
  • pnpm -r typecheck
  • pnpm lint
  • pnpm build:web
  • targeted Playwright alignment test: passed on isolated port 18083
  • geometry coverage: all four self/other combinations passed for self, a human teammate, and an agent

Previous CI failure

The original Playwright job failed in two pre-existing tests: channel reordering retried a detached move control until timeout, and DM closing attempted to click a hidden action control. The alignment test passed in that run (67 tests passed overall). A local full-suite attempt reproduced the pre-existing channel-order flake; additional failures in that attempt were expected because several tests hard-code the standard port while the isolated validation server used port 18083. The feature-focused test passes consistently on the isolated server.

@jjjhenriksen

Copy link
Copy Markdown
Contributor Author

@clawsweeper review

@clawsweeper

clawsweeper Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. P3 Low-risk cleanup, docs, polish, ergonomics, or speculative feature. labels Jul 12, 2026
@clawsweeper

clawsweeper Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 12, 2026, 10:18 PM ET / July 13, 2026, 02:18 UTC.

Summary
The PR retains the existing self-message alignment preference, adds an independently persisted alignment preference for other humans and agents, updates both settings surfaces and message CSS, expands browser geometry coverage, and rebuilds embedded web assets.

Reproducibility: not applicable. This PR proposes a new appearance capability rather than reporting broken behavior with an established current contract.

Review metrics: 2 noteworthy metrics.

  • Changed surface: 23 files: 5 source, 1 E2E test, 5 proof images, 12 generated assets. Most of the file count is proof and rebuilt embedded output; the hand-written implementation remains bounded to the web settings and message layout.
  • Layout coverage: 4 alignment combinations × 3 participant classes. The focused geometry test covers self, a human teammate, and an agent in every supported self/other configuration.

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

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

Rank-up moves:

  • Resolve the current merge conflicts against main and confirm the regenerated embedded assets match the rebased source.

Mantis proof suggestion
A short web UI chat recording would usefully confirm that attachments and thread hints follow the selected side, extending the supplied text-message screenshots. A maintainer can ask Mantis to capture proof by posting this exact PR comment:

@openclaw-mantis web ui chat proof: verify and capture self, human, and agent messages with an attachment and thread hint under the left/right alignment combinations.

Risk before merge

  • [P1] The permanent two-control appearance model has not received explicit maintainer product approval; merging it commits the settings UI and local-storage contract to four supported layout combinations.
  • [P1] The current head is reported as dirty against main, so maintainers cannot safely land it until conflicts are resolved and the refreshed diff is reviewed.

Maintainer options:

  1. Decide the mitigation before merge
    If maintainers want all four layouts, retain the independent controls with compatibility-preserving defaults, keep coverage for self, human, agent, attachment, and thread content, then rebase and regenerate the embedded assets from the resolved source tree.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P2] A product owner should approve, narrow, or reject the permanent preference model, after which the contributor can resolve the current merge conflicts for a refreshed review.

Maintainer decision needed

  • Question: Should ClickClack permanently expose separate persisted left/right controls for the current user and all other participants?
  • Rationale: The implementation and proof can establish correctness, but they cannot decide whether four independently configurable layouts belong in the supported appearance contract.
  • Likely owner: steipete — The available web-chat history and project ownership signals make steipete the best routing candidate for the appearance-contract decision.
  • Options:
    • Approve independent controls (recommended): Accept the two-setting model because it preserves existing defaults while enabling all four layouts without coupling self and other participants.
    • Narrow the layout modes: Replace the two controls with a smaller set of named layouts if maintainers want less settings surface and fewer combinations to support.
    • Decline the feature: Keep the existing single self-alignment preference and close the PR if independent other-message placement is not a desired product capability.

Security
Cleared: The diff changes local UI preferences, CSS, browser tests, screenshots, and generated web assets without adding dependencies, privileges, secret handling, or new executable supply-chain sources.

Review details

Best possible solution:

If maintainers want all four layouts, retain the independent controls with compatibility-preserving defaults, keep coverage for self, human, agent, attachment, and thread content, then rebase and regenerate the embedded assets from the resolved source tree.

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

Not applicable; this PR proposes a new appearance capability rather than reporting broken behavior with an established current contract.

Is this the best way to solve the issue?

Unclear at the product level. The implementation is a narrow and compatible way to support all four layouts, but maintainers must decide whether two permanent settings are preferable to a smaller named-layout model.

AGENTS.md: found, but no applicable review policy affected this item.

Codex review notes: model internal, reasoning high; reviewed against 44463f775ae4.

Label changes

Label justifications:

  • P3: This is a well-bounded, optional web appearance feature with no urgent user regression or core workflow outage.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The PR provides after-change browser screenshots of the settings and all four layouts, supported by a targeted live Playwright geometry run using generated local identities.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR provides after-change browser screenshots of the settings and all four layouts, supported by a targeted live Playwright geometry run using generated local identities.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR provides after-change browser screenshots of the settings and all four layouts, supported by a targeted live Playwright geometry run using generated local identities.
Evidence reviewed

What I checked:

  • Current main lacks independent alignment: At current main SHA 44463f7, ChatApp has the existing user alignment preference but not the proposed separate other-participant preference, so the requested capability remains unique to this PR. (apps/web/src/ChatApp.svelte:53, 44463f775ae4)
  • Backward-compatible preference initialization: The PR keeps the existing clickclack:user-align:v1 key and adds clickclack:other-align:v1 with a left default, preserving the current alignment of other participants for existing users. (apps/web/src/ChatApp.svelte:53, 9f57cae24da2)
  • Independent rendering rules: The stylesheet applies the self and non-self choices through separate root attributes while treating both human teammates and agents as other participants. (apps/web/src/styles/messages.css:805, 9f57cae24da2)
  • Focused regression coverage: The Playwright change creates self, human-teammate, and agent messages and checks geometry across all four self/other alignment combinations. (tests/e2e/chat.spec.ts:464, 9f57cae24da2)
  • Real browser proof: The PR body supplies a settings screenshot and screenshots of all four alignment combinations, plus reports a targeted live Playwright geometry run on an isolated server. (docs/proof/message-alignment-settings.png, 9f57cae24da2)
  • Current merge state: The supplied GitHub state reports mergeable=false and mergeableState=dirty for head 9f57cae against main 44463f7, so the branch must be refreshed before landing. (9f57cae24da2)

Likely related people:

  • steipete: Recent repository history ties steipete to the web chat and attachment-rendering surface, including the optimistic attachment rendering work, and the independent preference requires ownership of the permanent appearance model. (role: recent web-chat area contributor and likely product decision owner; confidence: medium; commits: 59bc2b6, 8b5dd9c; files: apps/web/src/ChatApp.svelte, apps/web/src/styles/messages.css, apps/web/src/components/chat/MessageRow.svelte)
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.
Review history (7 earlier review cycles)
  • reviewed 2026-07-12T23:36:24.339Z sha 5e2653f :: needs real behavior proof before merge. :: [P3] Remove the release-owned changelog entry
  • reviewed 2026-07-13T00:23:44.859Z sha fb5da1b :: needs maintainer review before merge. :: none
  • reviewed 2026-07-13T00:29:05.145Z sha fb5da1b :: needs maintainer review before merge. :: none
  • reviewed 2026-07-13T00:34:28.043Z sha fb5da1b :: needs maintainer review before merge. :: none
  • reviewed 2026-07-13T00:41:33.414Z sha fd01ec8 :: needs maintainer review before merge. :: none
  • reviewed 2026-07-13T00:52:58.316Z sha bc13a85 :: needs maintainer review before merge. :: none
  • reviewed 2026-07-13T00:58:27.233Z sha bc13a85 :: needs maintainer review before merge. :: none

@clawsweeper clawsweeper Bot added proof: sufficient Contributor real behavior proof is sufficient. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. labels Jul 13, 2026
@jjjhenriksen
jjjhenriksen marked this pull request as ready for review July 13, 2026 00:27

@chatgpt-codex-connector chatgpt-codex-connector 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fb5da1b999

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread apps/web/src/styles/messages.css
@jjjhenriksen
jjjhenriksen force-pushed the codex/message-side-layout branch 3 times, most recently from bc13a85 to 9f57cae Compare July 13, 2026 02:04
@shakkernerd shakkernerd self-assigned this Jul 13, 2026
@shakkernerd
shakkernerd force-pushed the codex/message-side-layout branch from 9f57cae to 7f687ac Compare July 13, 2026 02:54
@shakkernerd
shakkernerd merged commit 9d6ed86 into openclaw:main Jul 13, 2026
5 checks passed
@shakkernerd

Copy link
Copy Markdown
Member

Landed via rebase after rebasing onto current main, resolving generated assets, and adding focused alignment coverage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P3 Low-risk cleanup, docs, polish, ergonomics, or speculative feature. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient Contributor real behavior proof is sufficient. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants