feat(control-ui): drag sessions into split view with animated drop preview by steipete · Pull Request #101191 · openclaw/openclaw

steipete · 2026-07-06T21:18:46Z

What Problem This Solves

Split view (#100754) manages panes through header buttons only: composing a workspace means opening a split, then reassigning each pane's session through its selector. There is no direct way to say "put this session THERE".

Why This Change Was Made

Adds Claude Desktop-style drag and drop with an animated drop preview:

Sidebar session rows are drag sources (ui/src/lib/sessions/drag.ts owns the payload MIME; the row's inner link opts out of native link-dragging, the dragged row dims, and the OS shows a copy cursor).
One canonical layout op replaces the right/down-only pair: insertPane(target, session, edge) for all four directions (ui/src/pages/chat/split-layout.ts, net-negative LOC); createSplitLayout and the header buttons now build on it. An ephemeral createSinglePaneLayout lets drops work straight from classic single-pane mode.
Pure zone math in ui/src/pages/chat/split-drop-zone.ts: 30% edge bands with nearest-edge tie-break, plus indicator geometry (edge = that half of the pane, center = whole pane).
The container renders a single indicator element that glides between zones via CSS transitions and labels the outcome — "Split" on edge zones, "Open here" on center (new i18n keys). Crossing dividers retains the preview instead of flickering, and the drop falls back to the retained preview so the result always matches what was shown. dragover is rAF-throttled; a dragenter/dragleave depth counter handles light-DOM event bubbling.
Drop semantics: edge inserts a new pane at the previewed position and focuses it; center opens the session in the targeted pane and focuses it; same-session center drops are no-ops; narrow viewports ignore drags entirely.
New panes ease in (~160ms); all new motion is wrapped in prefers-reduced-motion: no-preference.

The two untranslated locale entries for the new "Split"/"Open here" strings are recorded as fallbacks in .i18n metadata; the scheduled locale refresh on main translates them on its next run.

User Impact

Assemble multi-session workspaces in single gestures: drag a session from the sidebar, watch the preview glide to the exact half (new pane) or whole pane (open here) it will occupy, drop. Works from a plain single-pane chat too. Keyboard users keep the header-button flow; reduced-motion users get instant, animation-free previews.

Evidence

Focused suites green: pnpm test ui/src/pages/chat/chat-page.test.ts ui/src/pages/chat/split-layout.test.ts ui/src/pages/chat/split-drop-zone.test.ts ui/src/pages/chat/chat-view.test.ts → 4 files, 132 tests; plus ui/src/e2e/chat-flow.e2e.test.ts → 31 tests on the implementation pass.
Codex autoreview clean on the final tree; pnpm ui:i18n:check consistent across 20 locales.
Deterministic mock-gateway visual proof (synthetic DragEvents against startControlUiE2eServer):

"Split" edge preview (source row dimmed)	"Open here" center preview

After edge drop	After stacking a third session

clawsweeper · 2026-07-06T21:42:17Z

Codex review: needs real behavior proof before merge. Reviewed July 6, 2026, 7:18 PM ET / 23:18 UTC.

Summary
This PR adds sidebar session drag sources, chat-pane drop-zone preview/drop handling, split-layout insertion helpers, localized labels, docs, styles, and focused tests for Control UI split-view drag and drop.

PR surface: Source +435, Tests +264, Docs +1. Total +700 across 72 files.

Reproducibility: not applicable. as a bug reproduction; this is a feature PR tied to an open enhancement issue. Source inspection confirms current main has split buttons and pane selectors but not this drag/drop interaction.

Review metrics: 1 noteworthy metric.

Locale fallback state: 20 regenerated locale bundles, 0 fallback keys in metadata. This confirms the latest head appears to have resolved the prior generated-output blocker for the new drop labels.

Stored data model
Persistent data-model change detected: persistent cache schema: ui/src/i18n/.i18n/ar.tm.jsonl, persistent cache schema: ui/src/i18n/.i18n/de.tm.jsonl, persistent cache schema: ui/src/i18n/.i18n/es.tm.jsonl, persistent cache schema: ui/src/i18n/.i18n/fa.tm.jsonl, persistent cache schema: ui/src/i18n/.i18n/fr.tm.jsonl, persistent cache schema: ui/src/i18n/.i18n/hi.tm.jsonl, and 15 more. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #101034
Summary: This PR is the candidate implementation for the open Control UI drag-and-drop split-view issue; the earlier split-view PR is prerequisite foundation, not a replacement.

Members:

canonical: Control UI: drag sessions from the sidebar into split view with animated drop preview #101034 - The PR body closes this open issue and implements its requested sidebar-to-chat split-view drag/drop workflow.
partial_overlap: feat(control-ui): multi-pane split view for chat #100754 - The merged PR introduced the multi-pane split-view foundation that this PR extends with drag/drop placement.
partial_overlap: Control UI: split screen mode — view two chat sessions side by side #100690 - The closed issue requested the base split-screen chat workspace and left drag-and-drop session placement as follow-up scope.

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Merge readiness
Overall: 🦪 silver shellfish
Proof: 🦪 silver shellfish
Patch quality: 🐚 platinum hermit
Result: blocked until real behavior proof from a real setup is added.

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

Rank-up moves:

[P1] Add redacted real browser proof showing the drag preview and after-drop pane result.
Resolve the dirty merge state against current main.
Get maintainer signoff on the new drag/drop split-view UX contract.

Proof guidance:

[P1] Needs real behavior proof before merge: The PR shows screenshots/GIFs from a mock-gateway synthetic DragEvents setup; add redacted real Control UI/browser screenshots, recording, terminal output, or logs before merge, then update the PR body to trigger re-review.

Mantis proof suggestion
A web UI chat proof lane can directly show the visible drag preview and after-drop pane behavior in the Control UI. A maintainer can ask Mantis to capture proof by posting this exact PR comment:

@openclaw-mantis web ui chat proof: verify dragging a sidebar session into Control UI chat shows Split/Open here previews and opens the dropped session in the target pane.

Risk before merge

[P1] The PR's media proof is still mock-gateway/synthetic-drag proof, so it does not satisfy the external contributor real behavior proof gate.
[P1] The live PR is dirty or unknown against current main, so maintainers need a clean merge result before relying on this head.
[P1] The protected maintainer label and new drag/drop chat workspace interaction require explicit product acceptance before merge.

Maintainer options:

Decide the mitigation before merge
Land this feature only after real browser proof is posted, the branch is refreshed to a clean merge state, and a maintainer accepts the full drag/drop split-view UX contract.
Pause or close
Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

[P1] The remaining blockers are maintainer product approval, real behavior proof, and a clean merge result rather than a narrow repair task.

Maintainer decision needed

Question: Should Control UI accept this full sidebar-session drag-and-drop split-view model once proof and merge-state blockers are fixed?
Rationale: The PR adds a new visible chat workspace interaction on a protected maintainer-labeled feature, so automation should not define the permanent UX contract alone.
Likely owner: steipete — He authored the merged split-view foundation and opened the canonical follow-up issue that this PR implements.
Options:
- Sponsor After Blockers (recommended): Accept the direction, then require real browser behavior proof and a clean merge result before merge.
- Narrow The Gesture: Ask for a smaller first version such as center replace or right-split only before accepting animated four-edge zones.
- Defer The Feature: Keep the existing header-button and pane selector workflow if the drag/drop complexity is not worth owning now.

Security
Cleared: The diff touches Control UI code, tests, styles, docs, and generated locale files without adding dependencies, workflows, lockfiles, secrets handling, or package publishing surface.

Review details

Best possible solution:

Land this feature only after real browser proof is posted, the branch is refreshed to a clean merge state, and a maintainer accepts the full drag/drop split-view UX contract.

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

Not applicable as a bug reproduction; this is a feature PR tied to an open enhancement issue. Source inspection confirms current main has split buttons and pane selectors but not this drag/drop interaction.

Is this the best way to solve the issue?

Yes for the implementation shape, but not merge-ready yet. The PR reuses the existing split-layout owner boundary and private session drag payload shape, while proof, merge state, and product signoff remain unresolved.

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

remove merge-risk: 🚨 other: Current PR review selected no merge-risk labels.

Label justifications:

P3: This is a Control UI ergonomics feature; existing split buttons and pane selectors still let users proceed.
rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🐚 platinum hermit.
status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs real behavior proof before merge: The PR shows screenshots/GIFs from a mock-gateway synthetic DragEvents setup; add redacted real Control UI/browser screenshots, recording, terminal output, or logs before merge, then update the PR body to trigger re-review.
proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR shows screenshots/GIFs from a mock-gateway synthetic DragEvents setup; add redacted real Control UI/browser screenshots, recording, terminal output, or logs before merge, then update the PR body to trigger re-review.

Evidence reviewed

PR surface:

Source +435, Tests +264, Docs +1. Total +700 across 72 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	68	683	248	+435
Tests	3	275	11	+264
Docs	1	1	0	+1
Config	0	0	0	0
Generated	0	0	0	0
Other	0	0	0	0
Total	72	959	259	+700

What I checked:

Scoped policy applied: The UI guide marks non-English locale bundles and .i18n metadata as generated output, so the earlier locale finding was checked against the regenerated PR-head files rather than treated as hand-editable copy. (ui/AGENTS.md:7, bb44c2311d74)
Current main baseline: Current main exposes button-driven split creation and right/down split handlers, but not sidebar-to-chat session drag/drop placement. (ui/src/pages/chat/chat-page.ts:141, bb44c2311d74)
PR drag/drop path: The PR head adds session drag event handlers, retained drop preview calculation, and applySessionDrop routing for center and edge drops. (ui/src/pages/chat/chat-page.ts:101, 160126faf6b3)
Layout owner boundary: The PR consolidates pane placement into insertPane with left/right/up/down edges, keeping drop behavior in the existing split-layout model rather than adding a second layout path. (ui/src/pages/chat/split-layout.ts:93, 160126faf6b3)
Prior i18n finding resolved at head: The latest PR head has translated German drop labels and metadata with no fallback keys, matching the regenerated-output fix requested in the prior review cycle. (ui/src/i18n/locales/de.ts:1600, 160126faf6b3)
Sibling drop surface checked: The existing chat view owns attachment drops, so this PR's private session MIME path was reviewed against that sibling drop handler. (ui/src/pages/chat/chat-view.ts:277, bb44c2311d74)

Likely related people:

steipete: Authored the merged split-view foundation and opened the canonical follow-up request for this exact drag/drop split-view workflow. (role: feature owner; confidence: high; commits: aa1929ccb0e3, e9464313b728; files: ui/src/pages/chat/chat-page.ts, ui/src/pages/chat/split-layout.ts, ui/src/components/app-sidebar.ts)
pash-openai: Current main blame for the split host, split layout, and sidebar session row points to a recent broad Control UI commit carrying this code path. (role: recent area contributor; confidence: medium; commits: 806a116f9d20; files: ui/src/pages/chat/chat-page.ts, ui/src/pages/chat/split-layout.ts, ui/src/components/app-sidebar.ts)
vincentkoc: Git history shows earlier split-view type-seam work in the same Control UI split surface. (role: adjacent owner; confidence: medium; commits: 01058162bebb; files: ui/src/pages/chat/split-layout.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.

Review history (4 earlier review cycles)

reviewed 2026-07-06T21:47:49.755Z sha 140caa0 :: needs real behavior proof before merge. :: [P2] Regenerate translated drop labels
reviewed 2026-07-06T22:02:33.838Z sha 140caa0 :: needs real behavior proof before merge. :: [P2] Regenerate translated drop labels
reviewed 2026-07-06T22:41:22.673Z sha 34789c2 :: needs real behavior proof before merge. :: [P2] Regenerate translated drop labels
reviewed 2026-07-06T22:53:33.883Z sha 34789c2 :: needs real behavior proof before merge. :: [P2] Regenerate translated drop labels

…eview

…eview (openclaw#101191) * feat(control-ui): drag sessions into split view with animated drop preview * fix(i18n): translate split drop labels and pending upstream strings

openclaw-barnacle Bot added docs Improvements or additions to documentation app: web-ui App: web-ui size: L maintainer Maintainer-authored PR labels Jul 6, 2026

steipete force-pushed the feat/control-ui-split-dnd branch from 140caa0 to 34789c2 Compare July 6, 2026 22:32

clawsweeper Bot added the proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. label Jul 6, 2026

openclaw-barnacle Bot added size: XL and removed size: L labels Jul 6, 2026

clawsweeper Bot removed the merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. label Jul 6, 2026

steipete added 2 commits July 6, 2026 19:26

feat(control-ui): drag sessions into split view with animated drop pr…

580aa61

…eview

fix(i18n): translate split drop labels and pending upstream strings

64bdd26

steipete force-pushed the feat/control-ui-split-dnd branch from 160126f to 64bdd26 Compare July 7, 2026 02:28

openclaw-barnacle Bot added size: L and removed size: XL labels Jul 7, 2026

steipete merged commit 6a5726b into main Jul 7, 2026
69 of 84 checks passed

steipete deleted the feat/control-ui-split-dnd branch July 7, 2026 02:30

This was referenced Jul 7, 2026

Control UI: drag sessions from the sidebar into split view with animated drop preview #101034

Closed

ci: fail Android PRs on ktlint formatting drift #101275

Merged

steipete mentioned this pull request Jul 9, 2026

Unify split-view controls into one toolbar row #102446

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(control-ui): drag sessions into split view with animated drop preview#101191

feat(control-ui): drag sessions into split view with animated drop preview#101191
steipete merged 2 commits into
mainfrom
feat/control-ui-split-dnd

steipete commented Jul 6, 2026

Uh oh!

clawsweeper Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

steipete commented Jul 6, 2026

What Problem This Solves

Why This Change Was Made

User Impact

Evidence

Uh oh!

clawsweeper Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

clawsweeper Bot commented Jul 6, 2026 •

edited

Loading