mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-08-28 19:11:03 +08:00
Marius
1cdad80eac
* feat(agent-manager): add advanced worktree creation with base branch and custom branch name * fix: remove unused CSS classes and make SendInitialMessage.text optional - Remove am-branch-group-label and am-branch-empty CSS classes (unused import tab leftovers) - Make AgentManagerSendInitialMessage.text optional to match no-prompt code path
1390 lines
24 KiB
CSS
1390 lines
24 KiB
CSS
/* Agent Manager layout */
|
|
|
|
.am-layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.am-sidebar {
|
|
position: relative;
|
|
min-width: 200px;
|
|
border-right: 1px solid var(--border-weak-base);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
background: var(--surface-base);
|
|
padding: 8px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.am-sidebar > [data-component="resize-handle"]::after {
|
|
background: var(--surface-interactive-base);
|
|
}
|
|
|
|
/* Fixed local workspace item */
|
|
|
|
.am-local-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: var(--text-base);
|
|
font-size: var(--font-size-base);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-local-item:hover {
|
|
background: var(--surface-inset-base-hover);
|
|
}
|
|
|
|
.am-local-item:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.am-local-item-active {
|
|
background: var(--surface-base-active);
|
|
}
|
|
|
|
.am-local-item-active .am-local-icon {
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-local-item-active .am-local-branch {
|
|
color: var(--text-weak);
|
|
}
|
|
|
|
.am-local-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
color: var(--text-weak);
|
|
}
|
|
|
|
.am-local-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
.am-local-label {
|
|
font-size: var(--font-size-base);
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.am-local-branch {
|
|
font-size: var(--font-size-small);
|
|
color: var(--text-weak);
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Sections */
|
|
|
|
.am-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.am-section-grow {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.am-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 8px 2px;
|
|
}
|
|
|
|
.am-section-label {
|
|
font-size: var(--font-size-small);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-weak);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Collapsible section toggle */
|
|
|
|
button.am-section-toggle {
|
|
all: unset;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 8px 2px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button.am-section-toggle:hover .am-section-label {
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-section-chevron {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-section-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Worktree list */
|
|
|
|
.am-worktree-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.am-section-grow .am-worktree-list {
|
|
max-height: none;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Worktree item — larger card style */
|
|
|
|
.am-worktree-list [data-slot="hover-card-trigger"] {
|
|
min-width: 0;
|
|
}
|
|
|
|
.am-worktree-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 10px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-base);
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.am-worktree-item:hover {
|
|
background: var(--surface-inset-base-hover);
|
|
}
|
|
|
|
.am-worktree-item:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.am-worktree-item-active {
|
|
background: var(--surface-interactive-base);
|
|
color: var(--text-on-interactive-base);
|
|
}
|
|
|
|
.am-worktree-item-active [data-component="icon"] {
|
|
color: var(--text-on-interactive-base);
|
|
}
|
|
|
|
.am-worktree-branch {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
min-width: 0;
|
|
}
|
|
|
|
.am-worktree-rename-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 22px;
|
|
padding: 0 4px;
|
|
border: 1px solid var(--border-focus, #007fd4);
|
|
border-radius: 3px;
|
|
background: var(--surface-base);
|
|
color: var(--text-base);
|
|
font-size: inherit;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.am-worktree-close {
|
|
position: absolute;
|
|
right: 4px;
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.am-worktree-item:hover .am-worktree-branch {
|
|
mask-image: linear-gradient(to right, black calc(100% - 48px), transparent calc(100% - 16px));
|
|
-webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent calc(100% - 16px));
|
|
}
|
|
|
|
.am-worktree-item:hover .am-worktree-close {
|
|
opacity: 1;
|
|
}
|
|
|
|
.am-worktree-item:has(.am-worktree-rename-input) .am-worktree-close {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.am-worktree-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Grouped worktrees — visual grouping with header and left accent */
|
|
|
|
.am-wt-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px 2px;
|
|
margin-top: 6px;
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
.am-wt-group-header [data-component="icon"] {
|
|
color: var(--border-focus, #007fd4);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.am-wt-group-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.2px;
|
|
color: color-mix(in srgb, var(--border-focus, #007fd4) 80%, var(--text-weak));
|
|
}
|
|
|
|
.am-wt-grouped {
|
|
margin-left: 8px;
|
|
padding-left: 10px;
|
|
border-left: 2px solid color-mix(in srgb, var(--border-focus, #007fd4) 35%, transparent);
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
}
|
|
|
|
.am-wt-group-end {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.am-wt-grouped:hover {
|
|
border-left-color: color-mix(in srgb, var(--border-focus, #007fd4) 60%, transparent);
|
|
}
|
|
|
|
.am-wt-grouped.am-worktree-item-active {
|
|
border-left-color: var(--border-focus, #007fd4);
|
|
}
|
|
|
|
/* Session list */
|
|
|
|
.am-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Session items */
|
|
|
|
.am-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: var(--text-base);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.am-item:hover {
|
|
background: var(--surface-inset-base-hover);
|
|
}
|
|
|
|
.am-item:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.am-item-active {
|
|
background: var(--surface-base-active);
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-item-title {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
min-width: 0;
|
|
}
|
|
|
|
.am-item-time {
|
|
font-size: var(--font-size-small);
|
|
white-space: nowrap;
|
|
color: var(--text-weaker);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-item-active .am-item-time {
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
/* Promote button on session rows */
|
|
|
|
.am-item-promote {
|
|
position: absolute;
|
|
right: 4px;
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.am-item:hover .am-item-time {
|
|
opacity: 0;
|
|
}
|
|
|
|
.am-item:hover .am-item-promote {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Create worktree button (empty state) */
|
|
|
|
.am-worktree-create {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px dashed var(--border-weak-base);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--text-weak);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.am-worktree-create:hover {
|
|
background: var(--surface-inset-base-hover);
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-worktree-create:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Detail pane */
|
|
|
|
.am-detail {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Tab bar */
|
|
|
|
.am-tab-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-weak-base);
|
|
background: var(--surface-base);
|
|
height: 36px;
|
|
padding: 0 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-tab-list {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
height: 100%;
|
|
|
|
/* Hide scrollbar while keeping scroll functionality */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.am-tab-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Wrapper that positions overflow fade indicators */
|
|
.am-tab-scroll-area {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
align-items: stretch;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Fade indicators for overflow */
|
|
.am-tab-fade {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 32px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.am-tab-fade-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.am-tab-fade-left {
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--surface-base) 0%, transparent 100%);
|
|
}
|
|
|
|
.am-tab-fade-right {
|
|
right: 0;
|
|
background: linear-gradient(to left, var(--surface-base) 0%, transparent 100%);
|
|
}
|
|
|
|
.am-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 12px;
|
|
background: none;
|
|
color: var(--text-weak);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.am-tab:hover {
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-tab-active {
|
|
color: var(--text-base);
|
|
border-bottom-color: var(--surface-interactive-base);
|
|
}
|
|
|
|
.am-tab-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 150px;
|
|
}
|
|
|
|
.am-tab-close {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-tab .am-tab-close {
|
|
opacity: 0;
|
|
}
|
|
|
|
.am-tab:hover .am-tab-close {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.am-tab-active .am-tab-close {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.am-tab-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Drag-and-drop sortable tab wrapper */
|
|
|
|
.am-tab-sortable {
|
|
display: flex;
|
|
height: 100%;
|
|
touch-action: none;
|
|
}
|
|
|
|
.am-tab-dragging {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* Drag overlay tab (follows the cursor) */
|
|
|
|
.am-tab-overlay {
|
|
background: var(--surface-base);
|
|
border: 1px solid var(--border-weak-base);
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
pointer-events: none;
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-tab-add {
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
.am-tab-terminal {
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
margin-left: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Empty worktree state */
|
|
|
|
.am-empty-state {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.am-empty-state-icon {
|
|
width: 72px;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-xl);
|
|
background: var(--surface-inset-base);
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
.am-empty-state-text {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--text-weak);
|
|
}
|
|
|
|
/* Read-only session wrapper + banner */
|
|
|
|
.am-chat-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.am-readonly-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
flex-shrink: 0;
|
|
border-top: 1px solid var(--border-weak-base);
|
|
background: var(--surface-inset-base);
|
|
}
|
|
|
|
.am-readonly-text {
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-weak);
|
|
}
|
|
|
|
/* Setup overlay */
|
|
|
|
.am-setup-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--surface-base);
|
|
animation: am-fade-in 0.15s ease;
|
|
}
|
|
|
|
@keyframes am-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.am-setup-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
}
|
|
|
|
.am-setup-card > [data-component="icon"] {
|
|
color: var(--text-weak);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.am-setup-title {
|
|
font-size: var(--font-size-large);
|
|
font-weight: 600;
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-setup-branch {
|
|
font-size: 12px;
|
|
color: var(--text-weak);
|
|
font-family: var(--font-family-mono, monospace);
|
|
}
|
|
|
|
.am-setup-status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-inset-base);
|
|
color: var(--text-base);
|
|
font-size: var(--font-size-base);
|
|
text-align: center;
|
|
}
|
|
|
|
.am-setup-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Confirmation dialog */
|
|
|
|
.am-confirm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 0 24px 16px 24px;
|
|
}
|
|
|
|
.am-confirm-message {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-base);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.am-confirm-message > [data-component="icon"] {
|
|
flex-shrink: 0;
|
|
color: var(--icon-critical-base);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.am-confirm-branch {
|
|
font-family: var(--font-family-mono, monospace);
|
|
font-size: var(--font-size-small);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-inset-base);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.am-confirm-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.am-confirm-delete {
|
|
background: var(--surface-critical-strong) !important;
|
|
color: var(--text-on-brand-base) !important;
|
|
}
|
|
|
|
.am-confirm-delete:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Keyboard shortcut hint inside buttons */
|
|
|
|
.am-shortcut-hint {
|
|
font-size: var(--font-size-small);
|
|
opacity: 0.6;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* Split button (+ with dropdown arrow) */
|
|
|
|
.am-split-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.am-split-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-weak);
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
opacity: 0.6;
|
|
transition: all 120ms;
|
|
}
|
|
|
|
.am-split-arrow:hover {
|
|
opacity: 1;
|
|
background: var(--surface-inset-base-hover);
|
|
}
|
|
|
|
.am-split-arrow[data-expanded] {
|
|
opacity: 1;
|
|
background: var(--surface-inset-base-hover);
|
|
}
|
|
|
|
.am-split-menu {
|
|
min-width: 210px;
|
|
}
|
|
|
|
.am-split-menu [data-slot="dropdown-menu-item"] {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.am-split-menu [data-slot="dropdown-menu-separator"] {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* New Versioned Session Dialog */
|
|
|
|
.am-nv-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 0 20px 20px;
|
|
min-width: 460px;
|
|
}
|
|
|
|
/* Allow dropdowns to escape the dialog bounds */
|
|
[data-component="dialog"]:has(.am-nv-dialog) [data-slot="dialog-content"] {
|
|
overflow: visible;
|
|
}
|
|
[data-component="dialog"]:has(.am-nv-dialog) [data-slot="dialog-body"] {
|
|
overflow: visible;
|
|
}
|
|
|
|
.am-nv-name-input {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-base);
|
|
color: var(--text-base);
|
|
font-size: 13px;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.am-nv-name-input:focus {
|
|
border-color: var(--border-focus, #007fd4);
|
|
}
|
|
|
|
.am-nv-name-input::placeholder {
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
/* Dialog overrides for prompt-input-container — resizable from bottom edge */
|
|
.am-nv-dialog .am-prompt-input-container {
|
|
margin: 0;
|
|
resize: vertical;
|
|
overflow: hidden;
|
|
min-height: 120px;
|
|
max-height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.am-nv-dialog .am-prompt-input-wrapper {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.am-nv-dialog .am-prompt-input-ghost-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
.am-nv-dialog .am-prompt-input {
|
|
color: var(--vscode-input-foreground, var(--text-base));
|
|
resize: none;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
max-height: none;
|
|
}
|
|
|
|
.am-nv-config-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
color: var(--text-weaker);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Version selector bar below the prompt */
|
|
.am-nv-version-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Version pills */
|
|
|
|
.am-nv-pills {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: var(--surface-base);
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px;
|
|
}
|
|
|
|
.am-nv-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 24px;
|
|
border: none;
|
|
border-radius: calc(var(--radius-sm) - 1px);
|
|
background: transparent;
|
|
color: var(--text-weak);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 100ms;
|
|
}
|
|
|
|
.am-nv-pill:hover {
|
|
background: var(--surface-inset-base-hover);
|
|
color: var(--text-base);
|
|
}
|
|
|
|
.am-nv-pill-active {
|
|
background: var(--border-focus, #007fd4) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Version hint text */
|
|
|
|
.am-nv-version-hint {
|
|
font-size: 12px;
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
.am-nv-spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.am-nv-submit {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Advanced options toggle */
|
|
|
|
.am-advanced-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-weak);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: color 100ms;
|
|
}
|
|
|
|
.am-advanced-toggle:hover {
|
|
color: var(--text-base);
|
|
}
|
|
|
|
/* Advanced options section */
|
|
|
|
.am-advanced-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.am-advanced-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.am-advanced-input {
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-base);
|
|
color: var(--text-base);
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 120ms;
|
|
}
|
|
|
|
.am-advanced-input:focus {
|
|
border-color: var(--border-focus, #007fd4);
|
|
}
|
|
|
|
.am-advanced-input::placeholder {
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
/* Branch selector trigger + dropdown */
|
|
|
|
.am-branch-selector-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.am-branch-selector-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-base);
|
|
color: var(--text-base);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: border-color 120ms;
|
|
}
|
|
|
|
.am-branch-selector-trigger:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
.am-branch-selector-value {
|
|
flex: 1;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.am-branch-badge {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
background: var(--surface-raised-stronger-non-alpha);
|
|
color: var(--text-weak);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.am-branch-badge-remote {
|
|
background: var(--surface-raised-base);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.am-branch-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-float-base, var(--surface-raised-base));
|
|
box-shadow: var(--shadow-lg-border-base, 0 8px 24px rgba(0, 0, 0, 0.3));
|
|
max-height: 280px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.am-branch-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--border-base);
|
|
}
|
|
|
|
.am-branch-search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-base);
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.am-branch-search-input::placeholder {
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
.am-branch-list {
|
|
overflow-y: auto;
|
|
max-height: 220px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.am-branch-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-base);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 80ms;
|
|
text-align: left;
|
|
}
|
|
|
|
.am-branch-item:hover {
|
|
background: var(--surface-raised-base-hover);
|
|
}
|
|
|
|
.am-branch-item-active {
|
|
background: var(--surface-raised-base);
|
|
}
|
|
|
|
.am-branch-item-highlighted {
|
|
background: var(--surface-raised-base-hover);
|
|
}
|
|
|
|
/* Keyboard shortcut hints in dropdown menus */
|
|
|
|
.am-menu-shortcut {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.am-menu-key {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
background: var(--surface-raised-stronger-non-alpha);
|
|
color: var(--text-weak);
|
|
font-size: 10px;
|
|
font-family: inherit;
|
|
line-height: 1;
|
|
}
|
|
|
|
.am-branch-item-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--font-mono, monospace);
|
|
}
|
|
|
|
.am-branch-item-time {
|
|
font-size: 11px;
|
|
color: var(--text-weaker);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* HoverCard popover for worktree items */
|
|
|
|
.am-hover-card {
|
|
padding: 10px 12px;
|
|
min-width: 160px;
|
|
max-width: 240px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.am-hover-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.am-hover-card-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-weaker);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.am-hover-card-branch {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-strong);
|
|
line-height: 1.4;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.am-hover-card-meta {
|
|
font-size: 12px;
|
|
color: var(--text-weaker);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.am-hover-card-keybind {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
border-radius: 3px;
|
|
background: var(--surface-inset-base);
|
|
border: 1px solid var(--border-weak-base);
|
|
font-family: var(--font-family-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: var(--text-weak);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.am-hover-card-divider {
|
|
height: 1px;
|
|
background: var(--border-weak-base);
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.am-hover-card-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.am-hover-card-row-label {
|
|
font-size: 12px;
|
|
color: var(--text-weaker);
|
|
}
|
|
|
|
.am-hover-card-row-value {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-base);
|
|
}
|
|
|
|
/* Keyboard shortcuts dialog */
|
|
|
|
.am-shortcuts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
padding: 0 24px 20px 24px;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.am-shortcuts-category {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.am-shortcuts-category-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-weaker);
|
|
padding: 0 0 4px 0;
|
|
}
|
|
|
|
.am-shortcuts-list {
|
|
border: 1px solid var(--border-weak-base);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.am-shortcuts-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.am-shortcuts-row + .am-shortcuts-row {
|
|
border-top: 1px solid var(--border-weak-base);
|
|
}
|
|
|
|
.am-shortcuts-label {
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-base);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.am-shortcuts-keys {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 22px;
|
|
min-width: 22px;
|
|
padding: 0 6px;
|
|
border-radius: 4px;
|
|
background: var(--surface-inset-base);
|
|
border: 1px solid var(--border-weak-base);
|
|
font-family: var(--font-family-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: var(--text-weak);
|
|
white-space: nowrap;
|
|
box-shadow: 0 1px 0 var(--border-weak-base);
|
|
}
|
|
|
|
/* Skeleton loading states */
|
|
|
|
@keyframes am-skeleton-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.12;
|
|
}
|
|
50% {
|
|
opacity: 0.28;
|
|
}
|
|
}
|
|
|
|
/* Not a git repo notice */
|
|
|
|
.am-not-git-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
color: var(--text-weak);
|
|
}
|
|
|
|
.am-skeleton-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
animation: am-fade-in 0.2s ease;
|
|
}
|
|
|
|
/* Worktree skeleton — matches .am-worktree-item layout */
|
|
.am-skeleton-wt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
.am-skeleton-wt-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 3px;
|
|
background: var(--text-base);
|
|
animation: am-skeleton-pulse 1.5s ease-in-out infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-skeleton-wt-text {
|
|
height: 13px;
|
|
border-radius: 3px;
|
|
background: var(--text-base);
|
|
animation: am-skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.am-skeleton-wt:nth-child(2) .am-skeleton-wt-icon,
|
|
.am-skeleton-wt:nth-child(2) .am-skeleton-wt-text {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
/* Session skeleton — matches .am-item layout */
|
|
.am-skeleton-session {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.am-skeleton-session-title {
|
|
height: 13px;
|
|
border-radius: 3px;
|
|
background: var(--text-base);
|
|
animation: am-skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.am-skeleton-session-time {
|
|
height: 10px;
|
|
width: 52px;
|
|
border-radius: 3px;
|
|
background: var(--text-base);
|
|
animation: am-skeleton-pulse 1.5s ease-in-out infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.am-skeleton-session:nth-child(2) .am-skeleton-session-title,
|
|
.am-skeleton-session:nth-child(2) .am-skeleton-session-time {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.am-skeleton-session:nth-child(3) .am-skeleton-session-title,
|
|
.am-skeleton-session:nth-child(3) .am-skeleton-session-time {
|
|
animation-delay: 0.3s;
|
|
}
|