PR #63698: fix(ui): resolve Dreaming tab trace overlay stacking issue

• Repository: openclaw/openclaw
• Author: NianJiuZst
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/63698

Description (problem / solution / changelog)

Summary

• Problem: The grounded scene lane feature (PR #63395) introduced a z-index stacking issue where trace sections with backdrop-filter appear above the tab bar, making the Dreaming tab unusable
• Why it matters: Users cannot interact with the Dreaming tab as trace overlay blocks all page content
• What changed: Added explicit position: relative and z-index to .dreams__tabs, .dreams__stats, .dreams__trace, and
  .dreams__trace-section
• What did NOT change (scope boundary): No logic changes, only CSS stacking context fixes

Change Type

• Bug fix
• Feature
• Refactor required for the fix
• Docs
• Security hardening
• Chore/infra

Scope (select all touched areas)

• Gateway / orchestration

• Skills / tool execution

• Auth / tokens

• Memory / storage

• Integrations

• API / contracts

• UI / DX

• CI/CD / infra

  Linked Issue/PR

  • Closes #63620
  • Related #63395
  • This PR fixes a bug or regression

  Root Cause (if applicable)

  • Root cause: The .dreams__trace-section elements use backdrop-filter: blur(14px) which creates a new stacking
    context, but without explicit position: relative and z-index, the trace sections appeared above the tab bar
  • Missing detection / guardrail: CSS stacking context was not properly established for new UI elements
  • Contributing context (if known): Introduced in PR #63395 when the grounded scene lane was added

  Regression Test Plan (if applicable)

  • Coverage level that should have caught this:
    • Unit test
    • Seam / integration test
    • End-to-end test
    • Existing coverage already sufficient
  • Target test or file: N/A
  • Scenario the test should lock in: N/A
  • Why this is the smallest reliable guardrail: CSS stacking issues are visually apparent and require manual testing
  • Existing test that already covers this (if any): None
  • If no new test is added, why not: CSS stacking context fix is a visual/layout change that doesn't affect logic

  User-visible / Behavior Changes

  • Fixed: Dreaming tab trace sections no longer overlay the tab bar
  • Fixed: Normal scrolling works in the Dreaming tab
  • Fixed: All trace sections (shortTerm, grounded, signals, promoted) render correctly without blocking interaction

  Diagram (if applicable)

  Before:
  [Open Dreaming tab] -> [Normal page briefly visible] -> [Trace overlay appears and blocks all interaction]

  After: [Open Dreaming tab] -> [Normal page with trace sections properly layered below tab bar] -> [Normal interaction works]

  Security Impact (required)

  • New permissions/capabilities? (No)
  • Secrets/tokens handling changed? (No)
  • New/changed network calls? (No)
  • Command/tool execution surface changed? (No)
  • Data access scope changed? (No)

  Repro + Verification

  Environment

  • OS: macOS Tahoe
  • Runtime/container: npm install
  • Model/provider: N/A
  • Integration/channel (if any): N/A
  • Relevant config (redacted): Default

  Steps

  1. Open OpenClaw Control UI
  2. Navigate to the Dreaming tab
  3. Observe that trace sections no longer overlay the tab bar
  4. Verify scrolling works normally
  5. Click on trace items to verify interaction is not blocked

  Expected

  Trace sections should appear below the tab bar, allowing normal interaction with the page

  Actual

  Trace sections were appearing above the tab bar, blocking all page interaction

  Evidence

  • Screenshot/recording (to be attached after manual verification)

  Human Verification (required)

  What you personally verified (not just CI), and how:

  • Verified scenarios: CSS stacking context is correct after fix
  • Edge cases checked: Tab bar, stats, trace sections all layer correctly
  • What you did not verify: End-to-end integration with actual dream data

  Review Conversations

  • I replied to or resolved every bot review conversation I addressed in this PR.
  • I left unresolved only the conversations that still need reviewer or maintainer judgment.

  Compatibility / Migration

  • Backward compatible? (Yes)
  • Config/env changes? (No)
  • Migration needed? (No)

  Risks and Mitigations

  • None. This is a CSS-only change that fixes a visual stacking issue.

Changed files

• ui/src/styles/dreams.css (modified, +6/-0)

PR #63708: Refactor dreams__trace layout and add scrollbar styles

• Repository: openclaw/openclaw
• Author: bakecool
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/63708

Description (problem / solution / changelog)

Changed layout from grid to flex for better responsiveness and added scrollbar styles.

Summary

Describe the problem and fix in 2–5 bullets:

If this PR fixes a plugin beta-release blocker, title it fix(<plugin-id>): beta blocker - <summary> and link the matching Beta blocker: <plugin-name> - <summary> issue labeled beta-blocker. Contributors cannot label PRs, so the title is the PR-side signal for maintainers and automation.

• Problem:
• Why it matters:Dreaming tab: recall/trace overlay blocks the page and makes the screen unusable..dreams__trace 使用了 grid-template-columns: repeat(3, minmax(0, 1fr))，这会导致 trace 内容横向溢出。
• What changed:改用 flex 布局

修改后，trace 区域会：

垂直排列（不再是三列）

限制最大高度（500px）

支持滚动（内容过多时滚动）

防止横向溢出（所有内容自动换行）

这样就不会出现 recall/trace 文本块覆盖整个屏幕的问题了。

• What did NOT change (scope boundary):

Change Type (select all)

• [✔ ] Bug fix #63620
• Feature
• Refactor required for the fix
• Docs
• Security hardening
• Chore/infra

Scope (select all touched areas)

• Gateway / orchestration
• Skills / tool execution
• Auth / tokens
• Memory / storage
• Integrations
• API / contracts
• UI / DX
• CI/CD / infra

Linked Issue/PR

• Closes #
• Related #
• [✔ ] This PR fixes a bug or regression：https://github.com/openclaw/openclaw/issues/63620

Root Cause (if applicable)

For bug fixes or regressions, explain why this happened, not just what changed. Otherwise write N/A. If the cause is unclear, write Unknown.

• Root cause:
• Missing detection / guardrail:
• Contributing context (if known):

Regression Test Plan (if applicable)

For bug fixes or regressions, name the smallest reliable test coverage that should catch this. Otherwise write N/A.

• Coverage level that should have caught this:
  • Unit test
  • Seam / integration test
  • End-to-end test
  • Existing coverage already sufficient
• Target test or file:
• Scenario the test should lock in:
• Why this is the smallest reliable guardrail:
• Existing test that already covers this (if any):
• If no new test is added, why not:

User-visible / Behavior Changes

List user-visible changes (including defaults/config).
If none, write None.

Diagram (if applicable)

For UI changes or non-trivial logic flows, include a small ASCII diagram reviewers can scan quickly. Otherwise write N/A.

Before:
[user action] -> [old state]

After:
[user action] -> [new state] -> [result]

Security Impact (required)

• New permissions/capabilities? (Yes/No)
• Secrets/tokens handling changed? (Yes/No)
• New/changed network calls? (Yes/No)
• Command/tool execution surface changed? (Yes/No)
• Data access scope changed? (Yes/No)
• If any Yes, explain risk + mitigation:

Repro + Verification

Environment

• OS:
• Runtime/container:
• Model/provider:
• Integration/channel (if any):
• Relevant config (redacted):

Steps

Expected

Actual

Evidence

Attach at least one:

• Failing test/log before + passing after
• Trace/log snippets
• Screenshot/recording
• Perf numbers (if relevant)

Human Verification (required)

What you personally verified (not just CI), and how:

• Verified scenarios:
• Edge cases checked:
• What you did not verify:

Review Conversations

• I replied to or resolved every bot review conversation I addressed in this PR.
• I left unresolved only the conversations that still need reviewer or maintainer judgment.

If a bot review conversation is addressed by this PR, resolve that conversation yourself. Do not leave bot review conversation cleanup for maintainers.

Compatibility / Migration

• Backward compatible? (Yes/No)
• Config/env changes? (Yes/No)
• Migration needed? (Yes/No)
• If yes, exact upgrade steps:

Risks and Mitigations

List only real risks for this PR. Add/remove entries as needed. If none, write None.

• Risk:
  • Mitigation:

Changed files

• ui/src/styles/dreams.css (modified, +34/-2)