mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-07-21 15:04:15 +00:00
f41e95ac18
* feat(web-shell): add Session Overview panel and in-window split view
Add a large-screen "Session Overview" mission-control panel and an
in-window split view so users can monitor and drive multiple daemon
sessions at once.
- SessionOverviewPanel: ranked live cards (needs-approval -> running ->
idle) merging the workspace session list with the detail=full status
report. Multi-select opens the selected sessions as a split view in
the current tab ("Open in split") or in a new browser tab ("Open in
new tab", via a ?split=a,b URL).
- SplitView + ChatPane: one DaemonWorkspaceProvider hosting N
DaemonSessionProvider panes, each a self-contained interactive chat
(transcript, composer, streaming, tool/ask approvals). Browser focus
scopes the keyboard per pane, so panes never contend over approvals.
- Sidebar entry points gated to large screens; the split view's Back
returns to the Session Overview.
* refactor(web-shell): address review feedback on the session overview / split view
- SessionOverviewPanel: prune the selection Set when a session leaves the list
(so a reappearing session isn't silently reselected) and make select-all use
the intersection rather than prev.size.
- Extract isAskUserPermission into a shared util so App.tsx and ChatPane.tsx no
longer keep verbatim copies that can drift.
- SplitView: dismiss the "add session" picker on Escape or a click outside it.
- Tests: MAX_PANES cap, popup-blocked path, checkbox-selects-without-navigating,
stale-selection pruning, and a direct test for the extracted util.
* fix(web-shell): address /review findings on the split view
- ToolApproval: add a `keyboardActive` prop; split panes pass false so global
Enter/Escape/digit shortcuts can't confirm the wrong session's approval, and
the outer session's approval overlay is no longer rendered behind the split
(where it would keep its global shortcuts while hidden).
- ChatPane: defer the composer commit until sendPrompt resolves, so a rejected
prompt (transcript loading / disconnected / turn active) preserves the draft
instead of silently dropping it.
- SplitView: include a per-mount nonce in each pane's clientId so two tabs
opening the same split don't share a client id — which suppressOwnUserEcho
would treat as a self-echo and drop from the transcript.
- SessionOverviewPanel: cap the split selection to MAX_SPLIT_PANES before
building the ?split= URL or opening the in-window split, with a hint when more
are selected; also dismiss the split picker on Escape / click-outside.
- Tests covering each.
* fix(web-shell): address second /review round on the split view
- SplitView: wrap each pane in its own ErrorBoundary, so a render crash in one
pane (malformed block, unexpected tool shape) shows an inline fallback with a
close action instead of white-screening the whole split.
- splitUrl / overview: carry the daemon token into the new-tab split URL's
fragment. The current tab has already stripped the token from its URL, so a
token-auth (`serve --open`) deployment would otherwise open the split tab
unauthenticated. The token rides the hash (never sent to the server / logs).
- Tests: per-pane error isolation, token-in-fragment (and none without a token),
and the overview polling effects (interval fires, document.hidden skips, and
the in-flight guard prevents overlapping polls).
* fix(web-shell): hide the outer chat under the split and share app-level contexts
- App: hide (display:none) + aria-hide the outer chat subtree whenever
mainView !== 'chat', not only when a panel is open. Previously the outer
chat/composer/toolbar stayed reachable by keyboard/AT behind the full-page
split (it was only covered visually). State is preserved (node stays mounted).
- App: wrap SplitView in the app-level WebShellCustomizationProvider and
CompactModeContext so split panes render markdown / tool-headers / thinking
the same way the single-session chat does. Todo contexts stay chat-only —
they belong to the outer session, not the panes.
* refactor(web-shell): address review suggestions — coverage, dedup, split UX
- ToolApproval: add a dedicated test on the real component that the global
keyboard shortcut is armed by default and NOT armed when keyboardActive=false
(the cross-pane approval safety mechanism).
- SplitView: auto-exit to the Session Overview when the last pane is closed
(guarded so an initial empty seed doesn't bounce straight back out).
- ChatPane: add tests for the cancel action, the empty/whitespace submit guard,
and error routing to the onError prop.
- Extract the shared session-list page size + organization feature flag into
constants/sessions.ts, used by the overview, split view, and sidebar, so the
values can't drift between the three.
* fix(web-shell): surface outer approval + failed refresh in overview/split
- Split view: when the outer (main) session is waiting on an approval
that's hidden behind the split, show a non-blocking notice banner with
a "Go to it" button that returns to the chat where the approval lives.
- Auto-close the split (like the overview panel) when the viewport shrinks
below the large-screen breakpoint, so users aren't stranded.
- Session Overview: surface a failed refresh inline (keeping the last-good
cards) instead of silently swallowing it once cards are on screen.
- Tests: status-report poll cadence, picker dismiss (Escape / outside /
inside click), inline refresh-failure banner.
* fix(web-shell): sever window.opener on split tab; tighten hidden-chat test
- openSelectedInNewTab now clears win.opener (the split tab carries a
daemon token in its URL fragment) to prevent reverse tabnabbing, matching
the existing bug-report window.open path.
- Strengthen the split-view App test so a missing outer-chat subtree fails
instead of passing vacuously through an optional chain.
* fix(web-shell): split-view focus/stability/robustness follow-ups
- Refocus the composer after a shrink-driven split close so keyboard users
aren't dropped onto <body> (skips when an approval or panel takes over).
- Stabilize SplitView onExit via useCallback so its last-pane-close effect
doesn't re-fire on every App re-render.
- ChatPane: surface a per-pane connection-loss banner instead of silently
showing stale messages when a pane's daemon connection drops.
- ChatPane: anchor the streaming timer to the active turn's start (last user
message timestamp) so a pane opened mid-turn shows real elapsed time.
- Tests: split auto-close on shrink, outer-approval split notice + return-to-
chat, connection banner, and streaming-timer anchoring.
220 lines
3.9 KiB
CSS
220 lines
3.9 KiB
CSS
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.count {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.selectAll {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actionButton {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--primary);
|
|
border-radius: 6px;
|
|
background: color-mix(in srgb, var(--primary) 14%, transparent);
|
|
color: var(--primary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actionButton:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
|
|
.refreshButton {
|
|
margin-left: auto;
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notice {
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
color: var(--warning-color);
|
|
background: color-mix(in srgb, var(--warning-color) 12%, transparent);
|
|
}
|
|
|
|
/* A responsive grid so the panel fills wide (multi-monitor) screens and still
|
|
collapses to a single column on narrow ones. */
|
|
.grid {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid var(--border);
|
|
border-left-width: 3px;
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
|
}
|
|
|
|
.cardCurrent {
|
|
outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.cardTop {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cardCheckbox {
|
|
flex: 0 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.colorDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.cardLabel {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.cardLabel:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.currentBadge {
|
|
flex: 0 0 auto;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 14%, transparent);
|
|
}
|
|
|
|
.cardMeta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.metaItem {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.statusBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px 9px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Status accents — applied both to the card's left border and its badge. */
|
|
.statusApproval {
|
|
border-left-color: var(--warning-color);
|
|
}
|
|
|
|
.statusApproval.statusBadge {
|
|
color: var(--warning-color);
|
|
background: color-mix(in srgb, var(--warning-color) 14%, transparent);
|
|
}
|
|
|
|
.statusRunning {
|
|
border-left-color: var(--primary);
|
|
}
|
|
|
|
.statusRunning.statusBadge {
|
|
color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 14%, transparent);
|
|
}
|
|
|
|
.statusIdle {
|
|
border-left-color: var(--border);
|
|
}
|
|
|
|
.statusIdle.statusBadge {
|
|
color: var(--muted-foreground);
|
|
background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
|
|
}
|
|
|
|
.empty {
|
|
padding: 24px 12px;
|
|
text-align: center;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Color tags mirror the sidebar's session-group palette. */
|
|
.colorRed {
|
|
background: #ff5a5f;
|
|
}
|
|
.colorOrange {
|
|
background: #ff8a2a;
|
|
}
|
|
.colorYellow {
|
|
background: #f6c431;
|
|
}
|
|
.colorGreen {
|
|
background: #69c987;
|
|
}
|
|
.colorBlue {
|
|
background: var(--agent-blue-500);
|
|
}
|
|
.colorPurple {
|
|
background: var(--agent-purple-600);
|
|
}
|