mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-08-04 05:40:58 +00:00
2523a36b52
* feat(web-shell): add workspace picker for new sessions (issue #6378 phase 4) Multi-workspace daemons now show a new-session workspace picker in the sidebar (default primary, untrusted disabled); the chosen workspace cwd is sent on POST /session so the session spawns in that workspace. daemon-react-sdk createSession gains an optional per-call workspaceCwd override covering both the detached and active-session paths; omitting it preserves the previous primary behavior. * feat(web-shell): workspace management with dynamic registration Replace the new-session workspace picker with a full workspace management sidebar. Registered workspaces render as a parallel, collapsible list (folder icon per workspace), each with its own sessions nested underneath, and a "+" entry registers an existing directory as a new workspace at runtime with no daemon restart. Backend: WorkspaceRegistry becomes mutable (add()/onChange()); a new POST /workspaces route validates the directory (exists, not a duplicate, not nested) and registers it; run-qwen-serve exposes a runtime factory that builds a complete workspace runtime (bridge, fs factory, channel factory, workspace service) on demand. The SDK DaemonClient and daemon-react-sdk gain addWorkspace(). * fix(web-shell): show newly registered workspace without a reload Registering a workspace via the sidebar "+" left the list unchanged until a full page reload. handleAddWorkspace called workspace.getCapabilities(), which returns a cached promise and only feeds setCapabilities from the mount effect, so the refresh was a no-op. Add DaemonWorkspaceProvider.refreshCapabilities(): it bypasses the promise cache, issues a fresh /capabilities fetch, and pushes the result into state so consumers re-render. handleAddWorkspace now awaits it (best-effort, so a refresh failure never masks a successful registration). * fix(web-shell): address review feedback for workspace management - registry: list() returns a frozen snapshot so callers can't mutate the internal runtimes array (restores the push()-throws invariant) - POST /workspaces: reject relative paths on the raw input, canonicalize via realpath so symlink aliases can't bypass the duplicate/nesting checks, and serialize concurrent registrations to close a TOCTOU race that leaked bridge/channel infrastructure - sidebar: restore a compact single-workspace project header (name, search toggle, collapse) so single-workspace users keep those affordances and searchOpen/projectExpanded are no longer dead - daemon session: include the target workspace in the create-session failure message - tests: rework WebShellSidebar tests for the WorkspaceSection UI (add the useWorkspace mock, query workspace buttons, cover primary->undefined), use the canonical DaemonWorkspaceCapability type, and add a createSession workspaceCwd forwarding test * fix(cli): harden dynamic workspace registration per review - POST /workspaces: bound cwd by MAX_WORKSPACE_PATH_LENGTH before any filesystem work, and return a generic 500 (log the full error to stderr) so responses can't leak internal filesystem paths - createDynamicWorkspaceRuntime: log a stderr warning when a workspace's settings can't be read, matching the startup secondary-workspace path * qwen: address PR review feedback (#6625) Dynamic workspace reloadDaemonEnv now mirrors the startup secondary path: after reloadEnvironment() it rebuilds the runtime env via buildRuntimeEnvironment(), calls wsEnv.replace(), and updates the env metadata (envFileReadFailed / envFileReadFailures / overlayKeys / envFilePaths). Without this, .env changes on a dynamically registered workspace never propagated to that workspace's spawned child processes. * qwen: address PR review feedback (#6625) Harden POST /workspaces and the workspace registry per review: - canonicalize with realpathSync.native (matches startup) so the same physical dir on a case-insensitive FS can't register twice - nesting guard now also checks in-flight registrations, closing a concurrent parent/child registration race - error responses no longer echo resolved/other-workspace paths - registry add() isolates onChange listener throws so a bad listener can't abort a caller after the workspace is already committed * qwen: address PR review feedback (#6625) - POST /workspaces: cap total registered workspaces (startup + dynamic) to guard against unbounded registration exhausting resources - createDynamicWorkspaceRuntime: register shutdown-cleanup arrays only after the runtime is fully built, so a throw during workspace-service construction can't orphan the bridge/channel - web-shell App: reset selectedWorkspaceCwd after session creation so the workspace picker is one-shot (next new chat defaults to primary) * qwen: address human review suggestions (batch 1) - WorkspaceSection: add console.warn on session-poll failure (was silent) - WorkspaceSection: add aria-expanded for screen readers - AddWorkspaceDialog: associate label/input (htmlFor/id), i18n the absolute-path error, accept Windows drive-letter paths - i18n: remove unused workspaceUntrustedHint key, add addWorkspaceAbsError * qwen: address human review suggestions (batch 2) - Remove dead CSS (.workspacePickerSelect, .workspaceItem* classes from the old select-based picker, replaced by WorkspaceSection) - Add title tooltip to single-workspace project name (shows full path) - WorkspaceSection: sync expanded state on workspace.primary change * qwen: address human review suggestions (batch 3) - DaemonWorkspaceProvider: refreshCapabilities now clears error on success and sets error+status on failure (was incomplete vs mount) - Remove unused onChange/WorkspaceRegistryEvent from workspace registry per simplicity-first (no consumer exists; defers API surface until a real subscriber like SSE push is needed) * qwen: add workspace-management route test coverage Tests cover: 501 (no factory), 400 (missing/empty/relative/long/ nonexistent cwd), 409 (duplicate canonical path), 201 (success), and verifying error messages are generic (no path leak). * qwen: fix CI build failure — add explicit types in route test The CLI's tsconfig includes test files in tsc --build, so all noImplicitAny violations in tests cause build failures. Add explicit type annotations to mock parameters. * qwen: add type/title to single-workspace add-button --------- Co-authored-by: Shaojin Wen <shaojin.wensj@alibaba-inc.com>
1315 lines
23 KiB
CSS
1315 lines
23 KiB
CSS
.sidebar {
|
|
position: relative;
|
|
width: var(--web-shell-sidebar-width, 260px);
|
|
min-width: var(--web-shell-sidebar-width, 260px);
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
overflow: hidden;
|
|
background: var(--sidebar-background);
|
|
border-right: 1px solid var(--sidebar-border);
|
|
color: var(--sidebar-foreground);
|
|
font-family: var(--font-sans);
|
|
transition:
|
|
width 180ms ease,
|
|
min-width 180ms ease;
|
|
}
|
|
|
|
.resizing {
|
|
transition: none;
|
|
}
|
|
|
|
.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
align-items: center;
|
|
}
|
|
|
|
.newChatButton,
|
|
.footerButton,
|
|
.collapseButton,
|
|
.projectRow,
|
|
.sessionRow,
|
|
.sessionGroupHeader,
|
|
.sessionGroupActionButton,
|
|
.retry,
|
|
.iconButton,
|
|
.projectIconButton,
|
|
.sessionActionButton,
|
|
.groupMenuItem,
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.newChatButton,
|
|
.footerButton,
|
|
.projectRow {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 8px;
|
|
border-radius: 8px;
|
|
color: var(--sidebar-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newChatButton {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.newChatButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.newChatButton:hover,
|
|
.footerButton:hover,
|
|
.projectRow:hover,
|
|
.sessionRow:hover,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:hover,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:hover,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:hover,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:hover,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:hover,
|
|
.projectIconButton:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.newChatButton:focus-visible,
|
|
.footerButton:focus-visible,
|
|
.projectRow:focus-visible,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:focus-visible,
|
|
.retry:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.navIcon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: currentColor;
|
|
}
|
|
|
|
.navIcon svg,
|
|
.iconButton svg,
|
|
.collapseButton svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.settingsIcon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.projectFolderIcon svg {
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.topRow {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topRow .newChatButton {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brandLogo {
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.brandLogo svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: block;
|
|
}
|
|
|
|
.collapsed .topRow {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .topRow .newChatButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.workspacePicker {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 8px 8px 0;
|
|
}
|
|
|
|
.workspacePickerLabel {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.workspacePickerHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspaceAddIconButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceAddIconButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.workspaceList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.addWorkspaceButton {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.addWorkspaceButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sectionTitle {
|
|
padding: 8px 8px 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.projectRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.projectIconButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectIconButton svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectName,
|
|
.sessionText {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.projectName {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.projectIconButton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sessionList {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
overflow: auto;
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.sessionGroupSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionGroupHeader {
|
|
min-width: 0;
|
|
height: 32px;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px 0 20px;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sessionGroupTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionGroupCount {
|
|
flex: 0 0 auto;
|
|
color: color-mix(in srgb, var(--muted-foreground) 86%, transparent);
|
|
}
|
|
|
|
.sessionGroupChevron {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionGroupChevron svg,
|
|
.sessionGroupActionButton svg,
|
|
.sessionPinnedIndicator svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionGroupHeaderActions {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
opacity: 0;
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover .sessionGroupHeaderActions,
|
|
.sessionGroupHeaderRow:focus-within .sessionGroupHeaderActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionGroupActionButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.sessionGroupList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
margin-left: 26px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupedSessionRow {
|
|
min-height: 42px;
|
|
margin-left: 12px;
|
|
padding: 8px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.groupedSessionRow:not(.currentSession):hover,
|
|
.groupedSessionRow:not(.currentSession):focus-visible {
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.currentSession {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.pinnedSession:not(.currentSession) {
|
|
color: color-mix(in srgb, var(--foreground) 92%, var(--agent-blue-500));
|
|
}
|
|
|
|
.busySession {
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.floatingTooltip {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
max-width: 320px;
|
|
min-width: 220px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--popover);
|
|
color: var(--popover-foreground);
|
|
box-shadow:
|
|
0 2px 4px -2px rgb(0 0 0 / 10%),
|
|
0 4px 6px -1px rgb(0 0 0 / 10%);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
overflow-wrap: anywhere;
|
|
pointer-events: auto;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.floatingTooltip::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -12px;
|
|
width: 12px;
|
|
content: '';
|
|
}
|
|
|
|
.tooltipContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tooltipTitle {
|
|
color: var(--popover-foreground);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.tooltipTags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tooltipTag {
|
|
min-width: 0;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
background: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.tooltipTagRunning {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 16%, transparent);
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.tooltipTagNew {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 12%, transparent);
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.tooltipMeta {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.sessionText {
|
|
flex: 1 1 auto;
|
|
margin-right: 18px;
|
|
color: currentColor;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.sessionStatusSlot {
|
|
position: absolute;
|
|
left: -15px;
|
|
width: 8px;
|
|
height: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionStatusDot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--agent-blue-500);
|
|
box-shadow: 0 0 0 3px
|
|
color-mix(in srgb, var(--agent-blue-500) 14%, transparent);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.sessionPinMarker {
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-flex;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionPinnedIndicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionPinMarker svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionMetaSlot {
|
|
position: relative;
|
|
width: 82px;
|
|
height: 30px;
|
|
flex: 0 0 82px;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sessionTime {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionLoading {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-flex;
|
|
border: 2px solid color-mix(in srgb, var(--agent-blue-300) 24%, transparent);
|
|
border-top-color: var(--agent-blue-300);
|
|
border-radius: 999px;
|
|
animation: sidebarSpin 0.8s linear infinite;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionTime,
|
|
.sessionRow:focus-within:not(.runningSession) .sessionTime,
|
|
.sessionMetaSlot:hover .sessionTime,
|
|
.sessionMetaSlot:focus-within .sessionTime,
|
|
.sessionMetaSlot:hover .sessionLoading,
|
|
.sessionMetaSlot:focus-within .sessionLoading {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionActions {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding-left: 6px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
var(--sidebar-background) 8px
|
|
);
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionActions,
|
|
.sessionRow:focus-within:not(.runningSession) .sessionActions,
|
|
.sessionMetaSlot:hover .sessionActions,
|
|
.sessionMetaSlot:focus-within .sessionActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.currentSession .sessionActions,
|
|
.sessionRow:hover .sessionActions,
|
|
.sessionRow:focus-within .sessionActions {
|
|
background: linear-gradient(90deg, transparent, var(--sidebar-accent) 8px);
|
|
}
|
|
|
|
@keyframes sidebarSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 2px
|
|
color-mix(in srgb, var(--agent-blue-500) 16%, transparent);
|
|
opacity: 0.72;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 6px
|
|
color-mix(in srgb, var(--agent-blue-500) 0%, transparent);
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.iconButton,
|
|
.sessionActionButton,
|
|
.collapseButton {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionActionButton {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.sessionActionButton:hover,
|
|
.sessionActionButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.activeSessionActionButton {
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.sessionActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.sessionActionButton svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.searchInput {
|
|
width: calc(100% - 16px);
|
|
height: 44px;
|
|
margin: -2px 8px 2px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.searchInput:focus-visible,
|
|
.renameInput:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.dialogSelect {
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogInput:focus-visible,
|
|
.dialogSelect:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.groupMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
width: 240px;
|
|
max-height: min(320px, calc(100vh - 16px));
|
|
padding: 6px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
overflow-y: auto;
|
|
box-shadow:
|
|
0 10px 24px rgb(0 0 0 / 22%),
|
|
0 2px 6px rgb(0 0 0 / 16%);
|
|
}
|
|
|
|
.groupMenuItem {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 10px;
|
|
border-radius: 6px;
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupMenuItem:hover,
|
|
.groupMenuItem:focus-visible,
|
|
.groupMenuItemActive {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
outline: 0;
|
|
}
|
|
|
|
.groupMenuName {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.groupMenuDot,
|
|
.groupMenuEmptyDot,
|
|
.groupMenuIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.groupMenuDot {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuEmptyDot {
|
|
border: 1px solid var(--muted-foreground);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.groupMenuCheck {
|
|
flex: 0 0 auto;
|
|
color: var(--agent-blue-500);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.groupMenuSeparator {
|
|
height: 1px;
|
|
margin: 6px 4px;
|
|
background: var(--sidebar-border);
|
|
}
|
|
|
|
.groupColorRed {
|
|
background: #ff5a5f;
|
|
}
|
|
|
|
.groupColorOrange {
|
|
background: #ff8a2a;
|
|
}
|
|
|
|
.groupColorYellow {
|
|
background: #f6c431;
|
|
}
|
|
|
|
.groupColorGreen {
|
|
background: #69c987;
|
|
}
|
|
|
|
.groupColorBlue {
|
|
background: var(--agent-blue-500);
|
|
}
|
|
|
|
.groupColorPurple {
|
|
background: var(--agent-purple-600);
|
|
}
|
|
|
|
.iconButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.renameForm {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.renameInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
}
|
|
|
|
.notice,
|
|
.retry {
|
|
padding: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.retry {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirmContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.confirmDescription {
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.confirmActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.groupForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
}
|
|
|
|
.fieldStack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogSelect {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.dialogInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.secondaryButton {
|
|
border: 1px solid var(--border);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.dangerButton {
|
|
border: 1px solid var(--error-color);
|
|
background: transparent;
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.dangerButton:hover,
|
|
.dangerButton:focus-visible {
|
|
background: var(--error-bg);
|
|
}
|
|
|
|
.footer {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.footerButton {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footerButtonLabel {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.footerCompact,
|
|
.footerTight {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerButton,
|
|
.footerTight .footerButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
flex: 0 0 26px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.footerCompact .footerButtonLabel,
|
|
.footerTight .footerButtonLabel {
|
|
display: none;
|
|
}
|
|
|
|
.footerCompact .collapseButton,
|
|
.footerTight .collapseButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
}
|
|
|
|
.collapseButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.version {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
user-select: text;
|
|
}
|
|
|
|
.collapsed .newChatButton,
|
|
.collapsed .footerButton,
|
|
.collapsed .projectRow {
|
|
width: 32px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.collapsed .body {
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.collapsed .sessionList {
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.collapsed .footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.resizeHandle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
bottom: 0;
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.resizeHandle::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: transparent;
|
|
content: '';
|
|
}
|
|
|
|
.resizeHandle:hover::after {
|
|
background: var(--sidebar-ring);
|
|
}
|
|
|
|
.collapsed .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.sessionActionButtonActive,
|
|
.sessionActionButtonActive:hover {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.menuActive .sessionActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.actionMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
min-width: 168px;
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--popover);
|
|
color: var(--popover-foreground);
|
|
box-shadow:
|
|
0 2px 4px -2px rgb(0 0 0 / 10%),
|
|
0 8px 16px -4px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
.actionMenuItem {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--popover-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actionMenuItem:hover:not(:disabled),
|
|
.actionMenuItem:focus-visible:not(:disabled) {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.actionMenuItem:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.actionMenuItemDanger:not(:disabled) {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuItemDanger:hover:not(:disabled),
|
|
.actionMenuItemDanger:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actionMenuIcon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.actionMenuLabel {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.archivedSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 6px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.archivedHeader {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.archivedHeader:hover,
|
|
.archivedHeader:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.archivedChevron {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.archivedChevron svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.archivedTitle {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.archivedCount {
|
|
flex: 0 0 auto;
|
|
min-width: 20px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
background: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.archivedList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.archivedRow {
|
|
cursor: default;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar.mobileOpen {
|
|
display: flex;
|
|
z-index: 50;
|
|
/* The width var is shared with the desktop resize handle and can be wider
|
|
than a phone viewport; cap it so the drawer never overflows the screen. */
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.resizeHandle {
|
|
display: none;
|
|
}
|
|
}
|