mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-11-01 12:12:24 +00:00
535dfd9a11
* feat(web-shell): add installable PWA support * fix(build): skip incomplete Web Shell assets when bundling * feat(web-shell): declare browser support matrix and compat fallbacks * feat(web-shell): make the Web Shell installable as a PWA Serves /manifest.webmanifest and /sw.js pre-auth, registers the worker deferred to load, and replaces the earlier service-worker.js draft with sw.js as a Vite entry (PNG icons included). * feat(mobile-shell): add Android WebView shell skeleton WebView shell around the daemon-served Web Shell (no second UI), profile tuples of URL/token/display name with #token= fragment delivery, native WebView version check at the Chrome 107 floor, and a foreground-service skeleton for SSE/notifications. * chore(web-shell): drop superseded service worker draft files * test(web-shell): cover service worker routing and lifecycle * chore(web-shell): align @playwright/test with main lockfile * chore: register mobile-shell importer in pnpm lockfile * test(web-shell): parse sidebar stylesheet with postcss for @supports nesting * chore: register mobile-shell in pnpm rewrite set * fix(web-shell): address PWA and Android acceptance blockers * docs(mobile-shell): make remaining native acceptance limits explicit * fix(web-shell): address fourth PWA review round * fix(mobile-shell): restore web view on back --------- Co-authored-by: Shaojin Wen <shaojin.wensj@alibaba-inc.com>
2091 lines
39 KiB
CSS
2091 lines
39 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;
|
|
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;
|
|
}
|
|
|
|
.sidebar.mobileOpen {
|
|
width: clamp(
|
|
var(--web-shell-sidebar-min-width, 220px),
|
|
70%,
|
|
var(--web-shell-sidebar-max-width, 420px)
|
|
);
|
|
min-width: clamp(
|
|
var(--web-shell-sidebar-min-width, 220px),
|
|
70%,
|
|
var(--web-shell-sidebar-max-width, 420px)
|
|
);
|
|
}
|
|
|
|
.sidebar.mobileOpen .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.collapseButton,
|
|
.projectRow,
|
|
.sessionRow,
|
|
.sessionGroupHeader,
|
|
.sessionGroupActionButton,
|
|
.retry,
|
|
.iconButton,
|
|
.projectIconButton,
|
|
.sessionActionButton,
|
|
.groupMenuItem,
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.projectRow {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
color: var(--sidebar-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton {
|
|
height: 32px;
|
|
}
|
|
|
|
.newChatButton {
|
|
background: transparent;
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.pluginButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.primaryNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.newTaskNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
padding: 12px 0 2px;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.newTaskNavScrolled {
|
|
border-bottom-color: color-mix(
|
|
in srgb,
|
|
var(--sidebar-border) 55%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.newChatButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.newChatButton:hover,
|
|
.pluginButton: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,
|
|
.pluginButton: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 {
|
|
position: relative;
|
|
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 {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.iconButton svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.topRow {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 4px 12px;
|
|
border-bottom: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.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,
|
|
.brandLogo img {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: block;
|
|
}
|
|
|
|
/* A custom logo arrives as an <img>, which stretches to the box; the built-in
|
|
inline <svg> keeps its ratio through its viewBox instead. */
|
|
.brandLogo img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.brandName {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--sidebar-foreground);
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.workspaceSessionBody {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.liveWorkspaceLabel {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.projectsHeader {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
height: 32px;
|
|
gap: 4px;
|
|
padding-left: 8px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.pinnedSessionList {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.projectsHeaderToggle,
|
|
.projectsHeaderAction {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.projectsHeaderActions {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.projectsHeaderActions .projectsHeaderAction {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.projectsHeaderToggle {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderToggle svg,
|
|
.projectsHeaderAction svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectsHeaderAction {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderAction:hover,
|
|
.projectsHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.projectSearch {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.projectSearch > svg {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--muted-foreground);
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.projectSearch input {
|
|
width: 100%;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.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;
|
|
margin-right: -12px;
|
|
padding-right: 12px;
|
|
/* End the scroll port above the footer overlay so rows can never sit
|
|
under it (padding inside the scroll port would not: the port itself
|
|
still reaches the footer and rows parked at its bottom edge stay
|
|
unhoverable). */
|
|
margin-bottom: 40px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.projectRowExpanded {
|
|
}
|
|
|
|
.projectIconButton {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectIconButton svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.workspaceHeaderActions {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
border-radius: 6px;
|
|
background: var(--sidebar-accent);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.workspaceHeaderAction {
|
|
appearance: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceHeaderAction:hover,
|
|
.workspaceHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.workspaceHeaderAction:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.workspaceHeaderAction svg {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectName,
|
|
.sessionText {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.projectName {
|
|
flex: 0 1 auto;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.projectIconButton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.projectHoverAction {
|
|
opacity: 0;
|
|
}
|
|
|
|
.projectRow:hover .projectHoverAction,
|
|
.projectRow:focus-within .projectHoverAction {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionList {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.sessionGroupSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover,
|
|
.sessionGroupHeaderRow:focus-within {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.sessionGroupHeaderRow .sessionGroupHeader:hover,
|
|
.sessionGroupHeaderRow .sessionGroupHeader:focus-visible {
|
|
background: transparent;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.sessionGroupDotMuted {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionGroupIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionGroupIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
}
|
|
|
|
.showAllSessions {
|
|
align-self: flex-start;
|
|
margin-left: 26px;
|
|
padding: 1px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.showAllSessions:hover {
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.showAllSessions:focus-visible {
|
|
color: var(--sidebar-foreground);
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.sessionRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 2px 0 2px 26px;
|
|
border-radius: 8px;
|
|
color: color-mix(in srgb, var(--sidebar-foreground) 78%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.collapsedSessionPopover {
|
|
overscroll-behavior: contain;
|
|
width: min(
|
|
var(--collapsed-session-popover-width, 260px),
|
|
var(--radix-popover-content-available-width, 420px)
|
|
);
|
|
max-width: var(--radix-popover-content-available-width, 420px);
|
|
max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.currentSession {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
/* Active-row marker on the left edge, mirroring editor list conventions. */
|
|
.currentSession::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 3px;
|
|
width: 2px;
|
|
height: 14px;
|
|
border-radius: 1px;
|
|
background: var(--primary);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.busySession {
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sessionDetailsTooltip {
|
|
width: min(360px, var(--radix-popover-content-available-width, 360px));
|
|
min-width: min(280px, var(--radix-popover-content-available-width, 280px));
|
|
max-width: var(--radix-popover-content-available-width, 360px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sessionDetailsHeader,
|
|
.sessionDetailsRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sessionDetailsHeader {
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sessionDetailsTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--popover-foreground);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsTime {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionDetailsRow {
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
.sessionDetailsRowValue {
|
|
margin-left: auto;
|
|
padding-left: 16px;
|
|
color: var(--muted-foreground);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* The branch row itself becomes a button when the workspace's Git picker is
|
|
wired, so the whole row is the target rather than a trailing control. */
|
|
.sessionDetailsRowButton {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: inherit;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sessionDetailsRowButton:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Branch name and its severity dot stay tight together; the summary keeps its
|
|
own right-aligned column via margin-left: auto. */
|
|
.sessionDetailsBranch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* The compact chip's badge dot, lifted beside the branch name: accent when the
|
|
tree is dirty, warning for an in-progress operation or detached HEAD, error
|
|
when conflicted. Absent on a clean tree. */
|
|
.sessionDetailsGitDot {
|
|
flex: 0 0 auto;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--chat-editor-accent-color, #4a9eff);
|
|
}
|
|
|
|
.sessionDetailsGitDot[data-tone='warning'] {
|
|
background: var(--warning-color, #d29922);
|
|
}
|
|
|
|
.sessionDetailsGitDot[data-tone='error'] {
|
|
background: var(--error-color, #e5534b);
|
|
}
|
|
|
|
/* The row's only hover cue: the branch icon and the chevron carry the muted
|
|
tone from `.sessionDetailsRow svg`, so a hover has to move them together. */
|
|
.sessionDetailsRowButton:hover svg {
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
.sessionDetailsRowIssue,
|
|
.sessionDetailsRowIssue .sessionDetailsRowValue {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
/* Session counts inside the workspace details popover — the same dot-count
|
|
language the folder header used before the counts moved here. */
|
|
.sessionDetailsSessionCounts {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
padding-left: 16px;
|
|
color: var(--muted-foreground);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.sessionDetailsSessionCount {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.sessionDetailsSessionCount::before {
|
|
content: '';
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.sessionDetailsSessionCountRunning {
|
|
color: var(--success-color, #3fb950);
|
|
}
|
|
|
|
.sessionDetailsSessionCountAttention {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
.sessionDetailsSessionCountTotal::before {
|
|
display: none;
|
|
}
|
|
|
|
.sessionDetailsRow svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
color: var(--muted-foreground);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionDetailsRow span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Match the session-row badge text: neutral muted tone, not the global link
|
|
blue — a blue/purple link would clash with the merged state icon's purple. */
|
|
.sessionDetailsRow a {
|
|
color: color-mix(
|
|
in srgb,
|
|
var(--muted-foreground, #6b7280) 75%,
|
|
var(--foreground)
|
|
);
|
|
}
|
|
|
|
.sessionDetailsRow a:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sessionDetailsIdRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sessionDetailsIdRow > span:first-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsCopyButton {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionDetailsCopyButton:hover,
|
|
.sessionDetailsCopyButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.sessionDetailsCopyButton svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.sessionDetailsCopied {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Path row in the workspace details popover: the path truncates, the
|
|
local-open action buttons pin to the row's right edge. */
|
|
.sessionDetailsPath {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsRowActions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.sessionText {
|
|
position: relative;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
margin-right: 4px;
|
|
overflow: hidden;
|
|
color: currentColor;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* The fade hints at a clipped tail; only overflowing titles clip, and the
|
|
hover measurement marks them via the overflow attribute. */
|
|
.sessionText[data-web-shell-title-overflow] {
|
|
mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
#000 calc(100% - 10px),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.sessionTextInner {
|
|
display: inline-block;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.sessionSearchSnippet {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: color-mix(in srgb, currentColor 55%, transparent);
|
|
}
|
|
|
|
.sessionRow:hover .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 1s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 0.3s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionStatusSlot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 7px;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sessionStatusDot {
|
|
color: var(--agent-blue-500);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
/* A running turn gets the same pulsing dot in green, so busy sessions are
|
|
scannable without waiting for the right-edge spinner. */
|
|
.sessionStatusDotRunning {
|
|
color: var(--success-color, #3fb950);
|
|
}
|
|
|
|
.sessionSourceIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionSourceIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.collapsedSessionStatusDot {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
color: var(--agent-blue-500);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.collapsedSessionStatusApproval {
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
}
|
|
|
|
.collapsedSessionStatusQuestion {
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionTitlePin {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionTitlePin:hover {
|
|
background: var(--accent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sessionTitlePin:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sessionTitlePin svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionMetaSlot {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
height: 30px;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@supports (selector(:has(*))) {
|
|
.sessionMetaSlot:not(
|
|
:has(
|
|
.sessionLoading,
|
|
.sessionAttention,
|
|
.sessionGitIcon,
|
|
.sessionSourceIcon
|
|
)
|
|
) {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.sessionAttention {
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 9px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--success-color) 10%, transparent);
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionAttentionUserInput {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 10%, transparent);
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionGitIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-accent-fg, #8b5cf6);
|
|
}
|
|
|
|
.sessionGitIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionLoading {
|
|
margin: 0 10px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-flex;
|
|
border: 1.5px solid
|
|
color-mix(in srgb, var(--muted-foreground) 28%, transparent);
|
|
border-top-color: var(--muted-foreground);
|
|
border-radius: 999px;
|
|
animation: sidebarSpin 0.8s linear infinite;
|
|
}
|
|
|
|
.sessionActions {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@supports (selector(:has(*))) {
|
|
.sessionActions:focus-within,
|
|
.sessionActions:has([data-state='open']) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sessionMetaSlot:has(.sessionActions:focus-within),
|
|
.sessionMetaSlot:has([data-state='open']) {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionGitIcon,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionGitIcon,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionLoading,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionLoading,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionAttention,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionAttention,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionSourceIcon,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionSourceIcon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession)
|
|
.sessionMetaSlot:has(.sessionActions)
|
|
.sessionSourceIcon,
|
|
.sessionMetaSlot:has(.sessionActions):hover .sessionSourceIcon {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sessionRow:hover .sessionMetaSlot {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionGitIcon,
|
|
.sessionRow:hover:not(.runningSession) .sessionAttention,
|
|
.sessionMetaSlot:hover .sessionGitIcon,
|
|
.sessionMetaSlot:hover .sessionLoading,
|
|
.sessionMetaSlot:hover .sessionAttention {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionActions,
|
|
.sessionMetaSlot:hover .sessionActions {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* Touch devices get no hover reveal, so the actions stay in the flow and
|
|
share the slot with the markers instead of overlaying and hiding them. */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.sessionActions {
|
|
position: static;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionActionButton {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes sessionTitleScroll {
|
|
to {
|
|
transform: translateX(calc(var(--session-title-scroll-distance, 0px) * -1));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sessionRow:hover .sessionTextInner,
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
|
|
opacity: 0.72;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 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;
|
|
flex: 0 0 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));
|
|
max-height: min(320px, calc(100dvh - 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: var(--accent-red);
|
|
}
|
|
|
|
.groupColorOrange {
|
|
background: var(--accent-orange);
|
|
}
|
|
|
|
.groupColorYellow {
|
|
background: var(--accent-yellow);
|
|
}
|
|
|
|
.groupColorGreen {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.groupColorBlue {
|
|
background: var(--agent-blue-500);
|
|
}
|
|
|
|
.groupColorPurple {
|
|
background: var(--agent-purple-600);
|
|
}
|
|
|
|
.groupColorCustom {
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--foreground) 28%, transparent);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.notice {
|
|
padding: 4px 8px 4px 26px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.groupCustomColorRow {
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr);
|
|
gap: 8px 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.groupColorPicker {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 3px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupHexField {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.groupColorError {
|
|
grid-column: 2;
|
|
color: var(--destructive, #dc2626);
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.secondaryButton:disabled,
|
|
.dangerButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dangerButton {
|
|
border: 1px solid var(--error-color);
|
|
background: transparent;
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.dangerButton:hover:not(:disabled),
|
|
.dangerButton:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
z-index: 5;
|
|
right: 12px;
|
|
bottom: 4px;
|
|
left: 12px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
background: var(--sidebar-background);
|
|
}
|
|
|
|
.footerButton {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footerPrimary,
|
|
.footerActions {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footerPrimary {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.footerActions {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.footerButtonLabel {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.footerCompact {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerPrimary,
|
|
.footerCompact .footerActions {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
flex: 0 0 26px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.footerCompact .footerButtonLabel {
|
|
display: none;
|
|
}
|
|
|
|
.footerCompact .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 .pluginButton,
|
|
.collapsed .footerButton,
|
|
.collapsed .projectRow {
|
|
width: 32px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.collapsed .body {
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 2px;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 220px;
|
|
}
|
|
|
|
.collapsed .newTaskNav {
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .primaryNav {
|
|
align-items: center;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.collapsed .sessionList {
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.collapsed .footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.collapsed .footerPrimary,
|
|
.collapsed .footerActions {
|
|
flex-direction: column;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
.resizeHandle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Registered workspace count next to the Projects label. */
|
|
.projectsHeaderCount {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 16px;
|
|
padding: 0 6px;
|
|
border-radius: 8px;
|
|
background: var(--sidebar-accent);
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sessionBackgroundRunning {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
/* Hover-gated: touch devices get no hover reveal, and a sticky tap-hover on
|
|
the background dot must not hide the always-visible row actions. */
|
|
@media (hover: hover) {
|
|
.sessionRow:has(.sessionBackgroundRunning:hover) .sessionActions {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|