Skip to content

fix(desktop): keep Agent Graph heading visible - #3981

Open
testikun wants to merge 2 commits into
apache:mainfrom
testikun:codex/issue-3967-agent-graph-header
Open

fix(desktop): keep Agent Graph heading visible#3981
testikun wants to merge 2 commits into
apache:mainfrom
testikun:codex/issue-3967-agent-graph-header

Conversation

@testikun

@testikun testikun commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Fixes #3967

Summary

Keep the Agent Graph heading visible while a long operator list is scrolled.

  • Make the heading sticky within the existing bounded panel.
  • Keep the raised surface background opaque so scrolling content cannot show through it.
  • Use the shared --z-sticky layer token and a hairline shadow so the heading stays above content with a clear visual separator.
  • Preserve the existing collapsed-panel behavior.
  • Add a Desktop E2E layout regression covering overflow, sticky positioning, opaque background, stacking, separator, and collapsed state.

中文摘要

修复长 Agent Graph 列表滚动时头部随内容离开视口的问题。保留现有面板尺寸和折叠行为,让 header 在面板内固定,使用共享层级 token 和细分隔阴影遮挡滚动内容;新增 Desktop E2E 回归测试验证滚动、固定定位、层级、分隔效果和折叠态。

Verification

  • npm run format:check
  • npm run lint
  • npm --workspace @maka/desktop run build:main
  • npm --workspace @maka/desktop run build:renderer
  • node --test apps/desktop/dist/main/__tests__/agent-graph-panel.test.js (14/14)
  • Focused E2E: e2e/agent-graph-layout.spec.ts (1/1, Node 22.16.0)
  • git diff --check

Make the Agent Graph heading sticky within the bounded panel so status and controls remain available while operators scroll. Add a Desktop layout regression for the sticky heading, overflow, opaque surface, and collapsed-state contract.

Fixes apache#3967

Generated-by: OpenAI Codex
@github-actions github-actions Bot added the effort/S Under 100 readable lines label Aug 27, 2026
@testikun

Copy link
Copy Markdown
Contributor Author

Thanks for the review. I addressed the follow-up points in commit 72d439b:

  • Replaced the raw z-index: 1 with the shared var(--z-sticky) token.
  • Added a hairline box-shadow separator so the sticky heading remains visually distinct from scrolled content.
  • Extended the focused E2E contract to cover the semantic stacking value and separator.

The renderer was rebuilt and the focused Agent Graph E2E passes under Node 22.16.0. No production behavior outside the panel layout was changed.

中文摘要:已使用共享层级 token,补充分隔阴影,并扩展回归测试;renderer 构建和 focused E2E 均通过。

@Astro-Han

Astro-Han commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

This is a synthesis of the independent blind review by @Sol-404ARE at exact head 72d439b4152e1a853831e835435816ed585956c1 (base 566ed7dd, 2 files +92). I verified the diff and the exact-head CI myself; the file:line findings below are from Sol's sealed review.

What I checked myself:

  • Read gh pr diff 3981 (2 files, sticky header for Agent Graph) and confirmed the header is now sticky with shared tokens and remains visible on scroll.
  • Checked exact-head CI: test run 33046667493 SUCCESS, OPEN/MERGEABLE/BLOCKED/REVIEW_REQUIRED.

Findings from Sol's review (file:line anchored, with orchestrator correction):

Standards — 2×P2 + 2×P3 (correction: previously stated 2×P3, missing two P2 — apologies)

  • P2 — synthetic DOM E2E does not cover the real AgentGraphPanel. The test at agent-graph-topology.test.ts builds a synthetic DOM with 87 lines duplicating production structure but does not mount the actual AgentGraphPanel component (430px header, real controls). This leaves the production sticky header, overflow, and control handlers unverified beyond static inspection.
  • P2 — PR body is missing the mandatory AI-use declaration required by CONTRIBUTING.md. The body does not state whether generative tooling contributed, so it lacks the required AI use: Tool / Scope selection.
  • P3 — UI change has no before/after screenshot or recordingCONTRIBUTING.md:85. Attach light/dark evidence showing the heading before and after scrolling.
  • P3 — Branch codex/issue-3967-agent-graph-header does not use the title's conventional fix/... change typeCONTRIBUTING.md:83.

Production CSS itself is narrowly placed and correctly uses shared sticky/surface/border tokens. No raw color/radius/z-index or other concern was found.

Spec — GO (0 P0–P3)

  • The existing overflow:auto panel now correctly owns a sticky header with opaque raised surface, hairline separator, and shared sticky z-index.
  • Stop/dismiss/epoch/collapse controls remain in that header; no rule alters handlers or pointer events.
  • Narrow stability is preserved by shrink/wrap copy plus a non-shrinking action lane.
  • Collapsed state still correctly removes max-height/overflow scrolling.

No blocking spec findings were demonstrated; the test limitation (not instantiating full 430px header) is an evidence gap, not a product defect.

What I did not judge:

  • Visual rendering of the sticky header at extreme narrow widths beyond code inspection.

Gate: two P2 + two P3 housekeeping findings remain; no P0/P1 blocks, but the two P2s (synthetic test coverage and AI disclosure) must be fixed (or explicitly waived) before merge. The PR cannot be considered merge-ready until a focused integration test or real-panel coverage is added and the AI-use declaration is completed.


Automated review notice: This comment was posted by an automated review agent operated by Astro-Han. It is not an independent human review and does not replace one.

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

Labels

effort/S Under 100 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(desktop): keep Agent Graph header pinned while content scrolls

2 participants