[data-selected="true"]
+ > .mobile-select-sheet__item {
+ background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+ box-shadow:
+ inset 2px 0 0 color-mix(in srgb, var(--accent-blue) 72%, transparent),
+ inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-row {
+ gap: 0;
+ padding: 0;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-row[data-selected="true"] {
+ background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+ box-shadow:
+ inset 2px 0 0 color-mix(in srgb, var(--accent-blue) 72%, transparent),
+ inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-row > .mobile-select-sheet__item {
+ min-height: 42px;
+ padding-right: 6px;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__list > .mobile-select-sheet__item:last-child,
+.mobile-select-sheet--command
+ .mobile-select-sheet__list
+ > .mobile-select-sheet__item-row:last-child {
+ box-shadow: none;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-icon {
+ color: var(--text-tertiary);
+}
+
+.mobile-select-sheet--command
+ .mobile-select-sheet__list
+ > [data-selected="true"]
+ > .mobile-select-sheet__item
+ .mobile-select-sheet__item-icon,
+.mobile-select-sheet--command
+ .mobile-select-sheet__item-row[data-selected="true"]
+ .mobile-select-sheet__item-icon {
+ color: color-mix(in srgb, var(--accent-blue) 74%, var(--text-primary));
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-copy {
+ gap: 2px;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-label {
+ font-size: 12px;
+ font-weight: var(--font-semibold);
+ line-height: 1.3;
+ letter-spacing: 0.01em;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-description {
+ color: var(--text-secondary);
+ font-size: 11px;
+ line-height: 1.3;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-meta {
+ color: var(--text-tertiary);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ line-height: 1.35;
+ letter-spacing: 0.05em;
+}
+
+.mobile-select-sheet--command
+ .mobile-select-sheet__list
+ > [data-selected="true"]
+ > .mobile-select-sheet__item
+ .mobile-select-sheet__item-meta,
+.mobile-select-sheet--command
+ .mobile-select-sheet__item-row[data-selected="true"]
+ .mobile-select-sheet__item-meta {
+ color: color-mix(in srgb, var(--accent-blue) 52%, var(--text-secondary));
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-badge {
+ padding: 1px 6px;
+ border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
+ background: transparent;
+ color: var(--text-tertiary);
+ font-size: 10px;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-side-action {
+ align-self: center;
+ width: 26px;
+ height: 26px;
+ border: 1px solid color-mix(in srgb, var(--border) 44%, transparent);
+ border-radius: 3px;
+ background: transparent;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item-side-action--danger {
+ color: color-mix(in srgb, var(--color-error) 76%, var(--text-primary));
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item--action .mobile-select-sheet__item-label,
+.mobile-select-sheet--command .mobile-select-sheet__item--create .mobile-select-sheet__item-label {
+ font-weight: var(--font-medium);
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item--action .mobile-select-sheet__item-icon {
+ color: var(--text-secondary);
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item--create {
+ background: transparent;
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__item--create .mobile-select-sheet__item-label {
+ color: var(--text-primary);
+}
+
+.mobile-select-sheet--command .mobile-select-sheet__empty,
+.mobile-select-sheet--command .mobile-select-sheet__loading {
+ padding-inline: var(--sp-2);
+}
+
/* ========== Settings Page ========== */
.settings-page {
display: flex;
flex-direction: column;
+ min-height: 100vh;
height: 100vh;
background: var(--bg-page);
}
@@ -459,7 +676,7 @@
}
.settings-header {
- padding: var(--sp-3) var(--sp-4);
+ padding: var(--sp-2) var(--sp-4);
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
}
@@ -468,13 +685,15 @@
display: flex;
flex: 1;
min-height: 0;
+ align-items: stretch;
+ background: var(--bg-page);
}
.settings-sidebar {
- width: 200px;
+ width: 216px;
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
- padding: var(--sp-4);
+ padding: var(--sp-3);
}
.settings-nav {
@@ -487,9 +706,10 @@
display: flex;
align-items: center;
gap: var(--sp-3);
- padding: var(--sp-3) var(--sp-4);
- min-height: 42px;
- border-radius: var(--radius-lg);
+ padding: var(--sp-2) var(--sp-3);
+ min-height: 40px;
+ border: 1px solid transparent;
+ border-radius: var(--radius-md);
color: var(--text-secondary);
text-align: left;
transition: all var(--duration-fast) var(--ease-out);
@@ -503,7 +723,7 @@
.settings-nav-item-active {
background: var(--bg-active);
color: var(--text-primary);
- border: 1px solid var(--accent-blue);
+ border-color: var(--border-focus);
}
.settings-nav-icon {
@@ -522,8 +742,9 @@
.settings-content {
flex: 1;
min-height: 0;
- padding: var(--sp-8);
+ padding: var(--sp-5) var(--sp-6) var(--sp-6);
overflow-y: auto;
+ background: var(--bg-page);
}
.settings-content--fill-height {
@@ -533,6 +754,7 @@
.settings-section {
max-width: 720px;
+ min-width: 0;
}
.settings-section--fill-height {
@@ -546,10 +768,16 @@
margin-bottom: var(--sp-8);
}
+.settings-group:last-child {
+ margin-bottom: 0;
+}
+
.settings-group-title {
- font-size: var(--text-lg);
- font-weight: var(--font-medium);
+ font-size: var(--text-base);
+ font-weight: var(--font-semibold);
margin-bottom: var(--sp-2);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
color: var(--text-primary);
}
@@ -557,19 +785,24 @@
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--sp-4);
+ max-width: 60ch;
}
.settings-pills {
display: flex;
- gap: var(--sp-2);
+ gap: var(--sp-1);
flex-wrap: wrap;
+ align-items: center;
+ padding-bottom: var(--sp-1);
}
.settings-toggle-row {
- display: flex;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
- justify-content: space-between;
- padding: var(--sp-4) 0;
+ column-gap: var(--sp-4);
+ row-gap: var(--sp-2);
+ padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
}
@@ -580,12 +813,14 @@
}
.settings-toggle-label {
- font-size: var(--text-base);
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
color: var(--text-primary);
}
.settings-toggle-desc {
- font-size: var(--text-sm);
+ font-size: var(--text-xs);
+ line-height: 1.5;
color: var(--text-secondary);
}
@@ -631,27 +866,35 @@
}
.settings-info-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: start;
+ column-gap: var(--sp-4);
+ row-gap: var(--sp-2);
padding: var(--sp-3) 0;
+ border-bottom: 1px solid var(--border);
}
.settings-info-label {
- font-size: var(--text-sm);
+ font-size: var(--text-xs);
+ font-weight: var(--font-medium);
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
color: var(--text-secondary);
}
.settings-info-value {
- display: inline-flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: flex-end;
- gap: var(--sp-2);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: center;
+ justify-self: end;
+ gap: var(--sp-1);
font-size: var(--text-sm);
color: var(--text-primary);
text-align: right;
- max-width: min(34ch, 62%);
+ max-width: 40ch;
+ min-width: 14ch;
}
.settings-capability-available,
@@ -675,13 +918,19 @@
.settings-status-hint {
color: var(--text-tertiary);
font-size: var(--text-xs);
+ line-height: 1.45;
}
.settings-link {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--sp-1);
+ padding: 0;
color: var(--accent-blue);
cursor: pointer;
background: none;
border: none;
+ font-weight: var(--font-medium);
font-size: inherit;
}
@@ -691,15 +940,15 @@
.settings-provider-tabs {
display: flex;
- gap: var(--sp-2);
- margin-bottom: var(--sp-6);
+ gap: var(--sp-1);
+ margin-bottom: var(--sp-4);
}
.settings-provider-tab {
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-md);
- background: var(--bg-surface);
- border: 1px solid var(--border);
+ background: transparent;
+ border: 1px solid transparent;
color: var(--text-secondary);
transition: all var(--duration-fast) var(--ease-out);
}
@@ -710,14 +959,14 @@
.settings-provider-tab-active {
background: var(--bg-active);
- border-color: var(--accent-blue);
+ border-color: var(--border-focus);
color: var(--text-primary);
}
.settings-provider-subnav {
display: flex;
- gap: var(--sp-2);
- margin-bottom: var(--sp-6);
+ gap: var(--sp-1);
+ margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--border);
}
@@ -738,8 +987,8 @@
.settings-provider-subnav-button-active {
color: var(--text-primary);
- background: var(--bg-hover);
- border-color: var(--border-light);
+ background: var(--bg-active);
+ border-color: var(--border-focus);
}
.settings-provider-config-stack {
@@ -786,10 +1035,11 @@
flex-direction: column;
gap: var(--sp-1);
width: 100%;
- padding: var(--sp-4);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- background: var(--bg-surface);
+ padding: var(--sp-3) 0;
+ border: none;
+ border-top: 1px solid var(--border);
+ border-radius: 0;
+ background: transparent;
text-align: left;
}
@@ -801,6 +1051,7 @@
.settings-provider-mobile-entry__meta {
font-size: var(--text-sm);
color: var(--text-secondary);
+ font-family: var(--font-mono);
}
.settings-provider-mobile-config-header {
@@ -809,82 +1060,10 @@
margin-bottom: var(--sp-4);
}
-.settings-provider-card {
- background: var(--bg-surface);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- padding: var(--sp-4);
- margin-bottom: var(--sp-6);
-}
-
-.settings-provider-header {
- display: flex;
- align-items: center;
- gap: var(--sp-3);
- margin-bottom: var(--sp-4);
-}
-
-.settings-provider-badge {
- padding: var(--sp-1) var(--sp-2);
- background: var(--bg-hover);
- border-radius: var(--radius-sm);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
- color: var(--text-primary);
-}
-
-.settings-provider-capability {
- padding: var(--sp-1) var(--sp-2);
- border-radius: var(--radius-sm);
- font-size: var(--text-xs);
-}
-
-.settings-provider-capability.settings-capability-full {
- background: rgba(120, 215, 178, 0.2);
- color: var(--accent-green);
-}
-
-.settings-provider-capability.settings-capability-limited {
- background: rgba(241, 184, 106, 0.2);
- color: var(--accent-amber);
-}
-
-.settings-provider-capability.settings-capability-unsupported {
- background: rgba(255, 158, 176, 0.2);
- color: var(--accent-pink);
-}
-
-.settings-provider-meta {
- display: flex;
- gap: var(--sp-6);
-}
-
-.settings-provider-meta-item {
+.settings-config-field {
display: flex;
flex-direction: column;
- gap: var(--sp-1);
-}
-
-.settings-provider-meta-label {
- font-size: var(--text-xs);
- color: var(--text-tertiary);
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.settings-provider-status {
- font-size: var(--text-sm);
-}
-
-.status-registered {
- color: var(--color-success);
-}
-
-.status-unregistered {
- color: var(--text-secondary);
-}
-
-.settings-config-field {
+ gap: var(--sp-2);
margin-bottom: var(--sp-4);
width: 100%;
}
@@ -898,9 +1077,11 @@
.settings-config-label {
display: block;
- font-size: var(--text-sm);
- color: var(--text-secondary);
- margin-bottom: var(--sp-2);
+ font-size: var(--text-xs);
+ color: var(--text-tertiary);
+ margin-bottom: 0;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
}
.settings-config-field--inline .settings-config-label {
@@ -923,37 +1104,47 @@
width: 100%;
min-width: 0;
box-sizing: border-box;
- background: var(--bg-input);
+ background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
+ border-color: var(--border);
+ font-family: var(--font-mono);
+ font-size: var(--text-sm);
+ line-height: 1.5;
}
.settings-command-preview {
display: block;
padding: var(--sp-3);
border: 1px solid var(--border);
- border-radius: var(--radius-md);
- background: var(--bg-input);
+ border-radius: var(--radius-sm);
+ background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: var(--text-sm);
- word-break: break-all;
+ min-height: 44px;
+ white-space: pre-wrap;
+ overflow-wrap: anywhere;
}
.settings-footer {
display: flex;
align-items: center;
justify-content: space-between;
- padding: var(--sp-3) var(--sp-4);
+ gap: var(--sp-3);
+ min-height: 32px;
+ padding: var(--sp-2) var(--sp-4);
background: var(--bg-surface);
border-top: 1px solid var(--border);
}
.settings-autosave {
- font-size: var(--text-sm);
+ font-size: var(--text-xs);
color: var(--text-tertiary);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
}
.settings-version {
- font-size: var(--text-sm);
+ font-size: var(--text-xs);
color: var(--text-tertiary);
font-family: var(--font-mono);
}
@@ -1159,75 +1350,85 @@
display: flex;
flex-shrink: 0;
min-width: 0;
- padding: 6px var(--sp-2) 0;
+ padding: 2px var(--sp-3) 2px;
+ border-top: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 90%, var(--bg-surface) 10%);
}
.mobile-terminal-input-bar__keys {
display: flex;
align-items: center;
min-width: 0;
+ justify-content: flex-start;
gap: 3px;
- overflow: hidden;
- padding: 5px;
- border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
- border-radius: 13px;
- background: linear-gradient(
- 180deg,
- color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
- color-mix(in srgb, var(--bg-page) 90%, transparent) 100%
- );
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+ overflow-x: auto;
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ scrollbar-width: none;
+}
+
+.mobile-terminal-input-bar__keys::-webkit-scrollbar {
+ display: none;
}
.mobile-terminal-input-bar__key {
display: inline-flex;
align-items: center;
justify-content: center;
+ flex: 0 0 auto;
min-width: 0;
- min-height: 28px;
- padding: 0 8px;
- border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
- border-radius: 9px;
- background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
+ min-height: 20px;
+ padding: 0 6px;
+ border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+ border-radius: 3px;
+ background: color-mix(in srgb, var(--bg-page) 74%, var(--bg-surface) 26%);
color: var(--text-secondary);
+ font-family: var(--font-mono);
font-size: 10px;
- font-weight: var(--font-semibold);
+ font-weight: var(--font-medium);
line-height: 1;
+ letter-spacing: 0.02em;
white-space: nowrap;
- flex: 1 1 0;
}
.mobile-terminal-input-bar__ctrl,
.mobile-terminal-input-bar__shift,
.mobile-terminal-input-bar__key[aria-label="Escape"],
-.mobile-terminal-input-bar__key[aria-label="Tab"],
+.mobile-terminal-input-bar__key[aria-label="Tab"] {
+ min-width: 34px;
+}
+
.mobile-terminal-input-bar__key[aria-label="Enter"] {
- flex: 1.15 1 0;
+ min-width: 40px;
}
.mobile-terminal-input-bar__key[aria-label="Up arrow"],
.mobile-terminal-input-bar__key[aria-label="Left arrow"],
.mobile-terminal-input-bar__key[aria-label="Down arrow"],
.mobile-terminal-input-bar__key[aria-label="Right arrow"] {
- flex: 0.82 1 0;
- padding: 0 6px;
+ min-width: 24px;
+ padding: 0;
}
.mobile-terminal-input-bar__ctrl[data-ctrl-mode="armed"] {
- border-color: color-mix(in srgb, var(--accent-blue) 46%, var(--border));
- background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
+ border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
+ background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-panel));
color: var(--text-primary);
}
.mobile-terminal-input-bar__ctrl[data-ctrl-mode="locked"] {
- border-color: color-mix(in srgb, var(--accent-blue) 56%, var(--border));
- background: color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface));
- color: var(--accent-blue);
+ border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--border));
+ background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+ color: color-mix(in srgb, var(--accent-blue) 84%, var(--text-primary));
}
.mobile-terminal-input-bar__shift[data-shift-armed="true"] {
- border-color: color-mix(in srgb, var(--accent-blue) 36%, var(--border));
- background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
+ border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
+ background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-panel));
color: var(--text-primary);
}
@@ -1237,12 +1438,8 @@
}
.mobile-shell__agent-stage .mobile-terminal-input-bar {
- padding: 6px calc(var(--mobile-safe-right) + var(--sp-2)) 0
- calc(var(--mobile-safe-left) + var(--sp-2));
-}
-
-.bottom-terminal--mobile-fullscreen .mobile-terminal-input-bar {
- padding: 6px var(--sp-2) 0 var(--sp-2);
+ padding: 3px calc(var(--mobile-safe-right) + var(--sp-3)) 4px
+ calc(var(--mobile-safe-left) + var(--sp-3));
}
.xterm-replay-overlay {
@@ -3711,14 +3908,18 @@ body.is-resizing-panels * {
display: flex;
gap: var(--sp-1);
margin-bottom: var(--sp-4);
+ padding: 0;
+ border: none;
+ background: transparent;
}
.shortcuts-category-tab {
padding: var(--sp-2) var(--sp-3);
+ border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--text-secondary);
- background: var(--bg-hover);
+ background: transparent;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
@@ -3729,35 +3930,39 @@ body.is-resizing-panels * {
.shortcuts-category-tab.active {
color: var(--text-primary);
- background: var(--accent-blue);
- background: rgba(108, 182, 255, 0.2);
+ background: var(--bg-active);
+ border-color: var(--border-focus);
}
.shortcuts-list {
display: flex;
flex-direction: column;
- gap: var(--sp-2);
+ gap: 0;
+ border-top: 1px solid var(--border);
}
.shortcuts-item {
display: flex;
align-items: center;
justify-content: space-between;
- padding: var(--sp-3);
- background: var(--bg-surface);
- border: 1px solid var(--border);
- border-radius: var(--radius-md);
+ gap: var(--sp-4);
+ padding: var(--sp-3) var(--sp-4);
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--border);
+ border-radius: 0;
}
.shortcuts-item-custom {
- border-color: var(--accent-amber);
- background: rgba(241, 184, 106, 0.05);
+ background: color-mix(in srgb, var(--bg-active) 78%, var(--accent-amber) 22%);
}
.shortcuts-info {
display: flex;
flex-direction: column;
gap: var(--sp-1);
+ min-width: 0;
+ flex: 1;
}
.shortcuts-name {
@@ -3774,23 +3979,25 @@ body.is-resizing-panels * {
display: flex;
align-items: center;
gap: var(--sp-2);
+ flex-shrink: 0;
}
.shortcuts-key {
padding: var(--sp-2) var(--sp-3);
- background: var(--bg-hover);
+ background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
border: 1px solid var(--border);
- border-radius: var(--radius-md);
+ border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-family: var(--font-mono);
- color: var(--text-secondary);
+ color: var(--text-primary);
cursor: pointer;
min-width: 80px;
text-align: center;
}
.shortcuts-key:hover {
- border-color: var(--accent-blue);
+ border-color: var(--border-focus);
+ background: var(--bg-active);
}
.shortcuts-capture {
@@ -3800,8 +4007,10 @@ body.is-resizing-panels * {
}
.shortcuts-footer {
+ display: flex;
+ justify-content: flex-start;
margin-top: var(--sp-4);
- padding-top: var(--sp-4);
+ padding: var(--sp-3) var(--sp-4) 0;
border-top: 1px solid var(--border);
}
@@ -7180,11 +7389,12 @@ textarea.input {
/* Card Container */
.config-card {
- margin-top: var(--sp-6);
+ margin-top: var(--sp-4);
border: 1px solid var(--border);
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-md);
background: var(--bg-surface);
overflow: hidden;
+ box-shadow: none;
}
.config-card--fill-height {
@@ -7201,15 +7411,15 @@ textarea.input {
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
- background: var(--bg-surface);
+ background: transparent;
border-bottom: 1px solid var(--border);
- cursor: pointer;
+ cursor: default;
user-select: none;
transition: background-color 0.15s ease;
}
.config-card-header:hover {
- background: var(--bg-hover);
+ background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-hover) 8%);
}
.config-card-title {
@@ -7273,7 +7483,7 @@ textarea.input {
.config-card-body {
display: flex;
flex-direction: column;
- background: var(--bg-surface);
+ background: transparent;
}
.config-card-body--fill-height {
@@ -7301,7 +7511,8 @@ textarea.input {
justify-content: space-between;
flex-wrap: wrap;
padding: var(--sp-3) var(--sp-4);
- background: var(--bg-surface);
+ background: transparent;
+ border-top: 1px solid var(--border);
gap: var(--sp-3);
}
@@ -7334,29 +7545,36 @@ textarea.input {
.config-empty-state {
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
- padding: var(--sp-8);
- text-align: center;
+ padding: var(--sp-6) var(--sp-5);
+ text-align: left;
min-height: 200px;
}
.config-empty-icon {
- font-size: 48px;
- margin-bottom: var(--sp-4);
- opacity: 0.5;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ margin-bottom: var(--sp-2);
+ font-size: var(--text-sm);
+ opacity: 0.8;
+ color: var(--text-tertiary);
}
.config-empty-title {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
- margin-bottom: var(--sp-2);
+ margin-bottom: var(--sp-1);
}
.config-empty-desc {
font-size: var(--text-sm);
- color: var(--text-tertiary);
+ color: var(--text-secondary);
+ max-width: 44ch;
}
/* Loading State */
@@ -7372,9 +7590,10 @@ textarea.input {
.config-card-error {
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: flex-start;
min-height: 200px;
- padding: var(--sp-4);
+ padding: var(--sp-5);
+ border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
}
@@ -7384,6 +7603,25 @@ textarea.input {
}
@media (max-width: 640px) {
+ .config-card {
+ margin-top: var(--sp-3);
+ border-radius: 0;
+ border-left: none;
+ border-right: none;
+ }
+
+ .config-card-header,
+ .config-card-actions {
+ padding-left: var(--sp-4);
+ padding-right: var(--sp-4);
+ }
+
+ .config-empty-state,
+ .config-card-error {
+ padding-left: var(--sp-4);
+ padding-right: var(--sp-4);
+ }
+
.config-card-actions {
align-items: center;
}
@@ -7545,12 +7783,11 @@ textarea.input {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
- gap: var(--sp-2);
- padding: calc(var(--mobile-safe-top) + var(--sp-2)) calc(var(--mobile-safe-right) + var(--sp-3))
- var(--sp-2) calc(var(--mobile-safe-left) + var(--sp-3));
- background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
- border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
- backdrop-filter: blur(20px);
+ gap: var(--sp-3);
+ padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4))
+ var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
+ background: var(--bg-surface);
+ border-bottom: 1px solid var(--border);
}
.mobile-topbar__workspace-button,
@@ -7569,42 +7806,30 @@ textarea.input {
gap: var(--sp-2);
min-width: 0;
width: 100%;
- height: 48px;
- padding: 0 var(--sp-3);
- border: 1px solid var(--border);
- border-radius: 16px;
- background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+ min-height: 32px;
+ height: 32px;
+ padding: 0 var(--sp-2);
+ border: 1px solid transparent;
+ border-radius: var(--radius-md);
+ background: transparent;
color: var(--text-primary);
- box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-page) 22%, transparent);
}
.mobile-topbar__workspace-leading {
flex-shrink: 0;
- color: var(--accent-blue);
- }
-
- .mobile-topbar__workspace-copy {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: var(--sp-2);
- min-width: 0;
- }
-
- .mobile-topbar__workspace-label {
- font-size: 10px;
- line-height: 1.1;
color: var(--text-tertiary);
- text-transform: uppercase;
- letter-spacing: 0.06em;
}
.mobile-topbar__workspace-name {
+ display: block;
+ flex: 1 1 auto;
+ min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-sm);
- font-weight: var(--font-semibold);
+ font-weight: var(--font-medium);
+ line-height: 1.2;
}
.mobile-topbar__session-switcher {
@@ -7625,13 +7850,12 @@ textarea.input {
gap: var(--sp-2);
width: min(44vw, 180px);
max-width: 100%;
- min-height: 48px;
- padding: 0 var(--sp-3);
- border: 1px solid var(--border);
- border-radius: 16px;
- background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+ min-height: 40px;
+ padding: 0 var(--sp-2);
+ border: 1px solid transparent;
+ border-radius: var(--radius-lg);
+ background: transparent;
color: var(--text-primary);
- box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-page) 18%, transparent);
}
.mobile-topbar__session-copy {
@@ -7688,7 +7912,7 @@ textarea.input {
position: relative;
display: inline-flex;
align-items: center;
- gap: var(--sp-2);
+ gap: var(--sp-1);
}
.mobile-shell__recovery-strip {
@@ -7727,15 +7951,15 @@ textarea.input {
display: inline-flex;
align-items: center;
justify-content: center;
- width: var(--touch-target-large);
- min-width: var(--touch-target-large);
- height: 48px;
+ width: 32px;
+ min-width: 32px;
+ min-height: 32px;
+ height: 32px;
padding: 0;
- border: 1px solid var(--border);
- border-radius: 16px;
- background: var(--bg-surface);
+ border: 1px solid transparent;
+ border-radius: var(--radius-md);
+ background: transparent;
color: var(--text-primary);
- box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-page) 18%, transparent);
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -7754,13 +7978,13 @@ textarea.input {
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-2) var(--sp-3);
border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
- border-radius: 20px;
+ border-radius: 12px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
- color-mix(in srgb, var(--bg-page) 96%, transparent) 100%
+ color-mix(in srgb, var(--bg-page) 98%, transparent) 100%
);
- box-shadow: 0 20px 48px rgba(7, 14, 22, 0.24);
+ box-shadow: var(--shadow-md);
transform: translateY(-6px) scale(0.985);
transform-origin: top center;
opacity: 0;
@@ -7782,25 +8006,10 @@ textarea.input {
padding: 0 var(--sp-1);
}
- .mobile-inline-sheet__header .page-header {
- gap: var(--sp-2);
- }
-
- .mobile-inline-sheet__header .page-header__leading {
+ .mobile-inline-sheet__header .mobile-page-header {
gap: var(--sp-2);
}
- .mobile-inline-sheet__header .page-header__back {
- min-height: 32px;
- padding: 0;
- font-size: var(--text-xs);
- }
-
- .mobile-inline-sheet__header .page-header__title {
- font-size: var(--text-sm);
- font-weight: var(--font-semibold);
- }
-
.mobile-inline-sheet__body {
display: flex;
flex-direction: column;
@@ -7921,7 +8130,7 @@ textarea.input {
flex-direction: column;
min-height: 0;
overflow: hidden;
- padding: var(--sp-2) var(--mobile-safe-right) 0 var(--mobile-safe-left);
+ padding: var(--sp-1) var(--mobile-safe-right) 0 var(--mobile-safe-left);
}
.mobile-shell__content {
@@ -7968,55 +8177,122 @@ textarea.input {
.mobile-shell__agent-empty {
flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: var(--sp-3) calc(var(--mobile-safe-right) + var(--sp-3)) var(--sp-3)
- calc(var(--mobile-safe-left) + var(--sp-3));
- border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--border));
- border-radius: 20px;
+ align-items: stretch;
+ justify-content: flex-start;
+ padding: clamp(56px, 14vh, 116px) var(--sp-4) var(--sp-3);
+ border: none;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .mobile-shell__empty-content {
+ position: relative;
+ display: flex;
+ width: min(100%, 344px);
+ flex-direction: column;
+ align-self: flex-start;
+ padding: var(--sp-2) 0 0 var(--sp-4);
+ border-top: none;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .mobile-shell__empty-content::before {
+ content: "";
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: 1px;
background: linear-gradient(
180deg,
- color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%,
- var(--bg-sidebar) 100%
+ color-mix(in srgb, var(--accent-blue) 18%, var(--border)) 0%,
+ color-mix(in srgb, var(--border) 58%, transparent) 34%,
+ transparent 100%
);
- box-shadow: var(--shadow-md);
}
- .mobile-shell__empty-content {
+ .mobile-shell__empty-state {
+ width: 100%;
+ align-items: flex-start;
+ justify-content: center;
+ gap: var(--sp-3);
+ min-height: 0;
+ padding: 0;
+ text-align: left;
+ }
+
+ .mobile-shell__empty-heading {
display: flex;
- width: min(100%, 320px);
+ width: 100%;
flex-direction: column;
+ gap: var(--sp-2);
+ }
+
+ .mobile-shell__empty-kicker {
+ display: inline-flex;
align-items: center;
- justify-content: center;
- gap: var(--sp-4);
+ gap: 6px;
+ font-size: 10px;
+ line-height: 1.1;
+ color: var(--text-tertiary);
+ font-family: var(--font-mono);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ }
+
+ .mobile-shell__empty-kicker::before {
+ content: "";
+ width: 6px;
+ height: 6px;
+ border: 1px solid color-mix(in srgb, var(--accent-blue) 38%, var(--border));
+ border-radius: var(--radius-full);
+ background: color-mix(in srgb, var(--accent-blue) 22%, transparent);
+ }
+
+ .mobile-shell__empty-title {
+ margin: 0;
+ color: var(--text-primary);
+ font-size: var(--text-base);
+ font-weight: var(--font-semibold);
+ line-height: 1.42;
}
.mobile-shell__placeholder-copy {
display: flex;
flex-direction: column;
+ align-items: flex-start;
gap: var(--sp-2);
- align-items: center;
- color: var(--text-secondary);
- text-align: center;
+ max-width: 31ch;
+ color: var(--text-tertiary);
+ text-align: left;
}
.mobile-shell__placeholder-copy p {
margin: 0;
+ font-size: var(--text-sm);
+ line-height: 1.55;
+ }
+
+ .mobile-shell__empty-action-row {
+ display: flex;
+ width: 100%;
+ justify-content: flex-start;
+ margin-top: var(--sp-1);
}
.mobile-shell__empty-cta {
display: inline-flex;
align-items: center;
justify-content: center;
- min-height: 48px;
- width: 100%;
- padding: 0 var(--sp-4);
- border: 1px solid color-mix(in srgb, var(--accent-blue) 42%, var(--border));
- border-radius: 16px;
- background: color-mix(in srgb, var(--accent-blue) 16%, var(--bg-surface));
+ min-height: 36px;
+ width: auto;
+ min-width: 132px;
+ padding: 0 var(--sp-3);
+ border: 1px solid color-mix(in srgb, var(--accent-blue) 12%, var(--border));
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--bg-surface) 56%, transparent);
color: var(--text-primary);
- font-size: var(--text-sm);
- font-weight: var(--font-semibold);
+ font-size: var(--text-xs);
+ font-weight: var(--font-medium);
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -8033,19 +8309,14 @@ textarea.input {
flex-direction: column;
gap: 0;
padding: 0 0 var(--mobile-keyboard-inset) 0;
- background: linear-gradient(
- 180deg,
- transparent 0%,
- color-mix(in srgb, var(--bg-page) 58%, transparent) 18%,
- color-mix(in srgb, var(--bg-surface) 92%, transparent) 100%
- );
- backdrop-filter: blur(20px);
+ border-top: 1px solid var(--border);
+ background: var(--bg-surface);
transition: padding-bottom var(--mobile-shell-motion-enter-duration) var(--ease-out);
}
.mobile-dock-shell {
position: relative;
- padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) var(--sp-3)
+ padding: 2px calc(var(--mobile-safe-right) + var(--sp-4)) 0
calc(var(--mobile-safe-left) + var(--sp-4));
}
@@ -8155,25 +8426,26 @@ textarea.input {
position: static;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: var(--sp-3);
+ gap: 0;
padding: 0;
background: transparent;
- border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
- padding-top: var(--sp-3);
+ border-top: none;
+ border-bottom: none;
}
.mobile-dock__item {
+ position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- min-height: 56px;
- gap: var(--sp-1);
- padding: var(--sp-2);
- border: 1px solid var(--border);
- border-radius: var(--radius-xl);
- background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
- color: var(--text-secondary);
+ min-height: 34px;
+ gap: 1px;
+ padding: 3px var(--sp-1) 5px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: var(--text-tertiary);
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -8183,20 +8455,38 @@ textarea.input {
}
.mobile-dock__item--active {
- border-color: color-mix(in srgb, var(--accent-blue) 46%, var(--border));
- background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
+ border-color: transparent;
+ background: transparent;
color: var(--text-primary);
}
+ .mobile-dock__item--active::before {
+ content: "";
+ position: absolute;
+ top: -1px;
+ left: 50%;
+ width: 14px;
+ height: 2px;
+ border-radius: var(--radius-full);
+ background: color-mix(in srgb, var(--accent-blue) 62%, transparent);
+ transform: translateX(-50%);
+ }
+
.mobile-dock__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
+ .mobile-dock__icon svg {
+ width: 16px;
+ height: 16px;
+ }
+
.mobile-dock__label {
- font-size: var(--text-xs);
- font-weight: var(--font-semibold);
+ font-size: 10px;
+ font-weight: var(--font-medium);
+ line-height: 1.1;
}
.mobile-sheet-layer,
@@ -8227,10 +8517,12 @@ textarea.input {
min-height: min(72dvh, 560px);
padding: var(--sp-3) calc(var(--mobile-safe-right) + var(--sp-4))
calc(var(--sp-5) + var(--mobile-safe-bottom)) calc(var(--mobile-safe-left) + var(--sp-4));
- border-top-left-radius: 24px;
- border-top-right-radius: 24px;
+ border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+ border-bottom: none;
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
background: var(--bg-surface);
- box-shadow: var(--shadow-xl);
+ box-shadow: none;
transform: translateY(18px);
opacity: 0;
animation: mobile-shell-sheet-enter 260ms var(--ease-out) forwards;
@@ -8246,10 +8538,10 @@ textarea.input {
.mobile-sheet__handle {
align-self: center;
- width: 48px;
- height: 5px;
+ width: 32px;
+ height: 4px;
border-radius: var(--radius-full);
- background: var(--border-light);
+ background: color-mix(in srgb, var(--text-tertiary) 24%, transparent);
}
.mobile-sheet__header {
@@ -8270,6 +8562,11 @@ textarea.input {
gap: 0;
min-height: min(78dvh, 640px);
max-height: calc(100dvh - var(--sp-4));
+ border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+ border-bottom: none;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ box-shadow: none;
}
.mobile-sheet.mobile-sheet--fullscreen {
@@ -8278,9 +8575,10 @@ textarea.input {
height: 100dvh;
min-height: 0;
max-height: none;
- padding: calc(var(--mobile-safe-top) + var(--sp-2)) var(--mobile-safe-right) 0
+ padding: calc(var(--mobile-safe-top) + var(--sp-1)) var(--mobile-safe-right) 0
var(--mobile-safe-left);
border-radius: 0;
+ background: color-mix(in srgb, var(--bg-page) 98%, var(--bg-surface) 2%);
overflow: hidden;
}
@@ -8290,8 +8588,9 @@ textarea.input {
}
.mobile-sheet--fullscreen .mobile-sheet__header {
- padding: var(--sp-1) var(--sp-3) var(--sp-2) var(--sp-3);
+ padding: 0 var(--sp-3);
border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%);
}
.mobile-sheet__header .page-header {
@@ -8299,7 +8598,43 @@ textarea.input {
}
.mobile-sheet--fullscreen .page-header {
- gap: var(--sp-3);
+ width: 100%;
+ }
+
+ .mobile-page-header {
+ width: 100%;
+ min-height: 38px;
+ gap: 0;
+ }
+
+ .mobile-page-header .page-header__leading {
+ min-width: 0;
+ gap: 8px;
+ }
+
+ .mobile-page-header .page-header__copy {
+ gap: 0;
+ }
+
+ .mobile-page-header .page-header__title {
+ font-size: 14px;
+ font-weight: var(--font-semibold);
+ letter-spacing: 0.01em;
+ line-height: 1.25;
+ }
+
+ .mobile-page-header .page-header__back {
+ min-height: 26px;
+ padding: 0;
+ gap: 5px;
+ color: color-mix(in srgb, var(--text-tertiary) 88%, var(--bg-panel));
+ font-family: var(--font-mono);
+ font-size: 10px;
+ letter-spacing: 0.04em;
+ }
+
+ .mobile-page-header .page-header__actions {
+ align-self: center;
}
.mobile-sheet--fullscreen .page-header__back {
@@ -8347,7 +8682,7 @@ textarea.input {
min-height: 0;
flex-direction: column;
gap: 0;
- padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--mobile-safe-bottom)) var(--sp-3);
+ padding: var(--sp-3) var(--sp-4);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
@@ -8371,7 +8706,7 @@ textarea.input {
min-height: 0;
flex-direction: column;
padding: var(--sp-3);
- border-radius: 20px;
+ border-radius: 16px;
background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--fg-white) 8%, transparent),
@@ -8414,6 +8749,11 @@ textarea.input {
.mobile-launch-sheet__footer {
display: flex;
width: 100%;
+ padding: var(--sp-2);
+ border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+ border-radius: 16px;
+ background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page));
+ box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg-white) 6%, transparent);
}
.mobile-launch-sheet__footer > * {
@@ -8422,6 +8762,17 @@ textarea.input {
.mobile-launch-sheet__footer .launch-start-btn--mobile {
width: 100%;
+ min-height: 44px;
+ border: 1px solid color-mix(in srgb, var(--accent-blue) 52%, transparent);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--accent-blue) 86%, var(--bg-surface));
+ font-size: var(--text-sm);
+ box-shadow: none;
+ }
+
+ .mobile-launch-sheet__footer .launch-start-btn--mobile:hover {
+ transform: none;
+ box-shadow: none;
}
.mobile-sheet--launch {
@@ -8443,8 +8794,13 @@ textarea.input {
}
.mobile-sheet--launch .mobile-sheet__footer {
- padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--mobile-safe-bottom)) var(--sp-3);
- background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
+ padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4))
+ calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4));
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
+ color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page)) 100%
+ );
}
.mobile-worktree-sheet {
@@ -8518,7 +8874,7 @@ textarea.input {
}
.mobile-files-sheet__branch-row {
- padding: var(--sp-2) var(--sp-3) 0;
+ padding: 6px var(--sp-3) 0;
flex-shrink: 0;
}
@@ -8529,28 +8885,20 @@ textarea.input {
width: 100%;
min-width: 0;
margin-bottom: 0;
- padding: 8px 10px;
- border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-blue) 18%);
- border-radius: 10px;
- background: linear-gradient(
- 180deg,
- color-mix(in srgb, var(--bg-hover) 78%, var(--accent-blue) 22%) 0%,
- color-mix(in srgb, var(--bg-hover) 92%, transparent) 100%
- );
+ padding: 7px 10px;
+ border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--bg-page) 76%, var(--bg-surface) 24%);
color: var(--text-primary);
- box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
+ box-shadow: none;
}
.mobile-files-sheet__branch:hover {
- background: linear-gradient(
- 180deg,
- color-mix(in srgb, var(--bg-hover) 68%, var(--accent-blue) 32%) 0%,
- color-mix(in srgb, var(--bg-hover) 88%, var(--accent-blue) 12%) 100%
- );
+ background: color-mix(in srgb, var(--bg-hover) 82%, var(--accent-blue) 18%);
}
.mobile-files-sheet__branch:active {
- transform: translateY(1px);
+ transform: none;
}
.mobile-files-sheet__branch-icon,
@@ -8559,7 +8907,7 @@ textarea.input {
align-items: center;
justify-content: center;
flex-shrink: 0;
- color: color-mix(in srgb, var(--text-secondary) 72%, var(--accent-blue) 28%);
+ color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-blue) 14%);
}
.mobile-files-sheet__branch-copy {
@@ -8575,15 +8923,16 @@ textarea.input {
font-size: 10px;
line-height: 1.1;
color: var(--text-tertiary);
- letter-spacing: 0.08em;
+ letter-spacing: 0.12em;
text-transform: uppercase;
+ font-family: var(--font-mono);
}
.mobile-files-sheet__branch-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- font-size: 12px;
+ font-size: 11px;
line-height: 1.2;
font-weight: 600;
}
@@ -8718,7 +9067,7 @@ textarea.input {
}
.mobile-sheet--fullscreen .page-header__title {
- font-size: var(--text-lg);
+ font-size: 16px;
line-height: 1.2;
}
@@ -8798,10 +9147,12 @@ textarea.input {
}
.bottom-terminal--mobile-fullscreen .terminal-toolbar {
- padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-3);
+ min-height: 32px;
+ padding: 3px var(--sp-3) 1px;
border-radius: 0;
- border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
- background: transparent;
+ border-bottom-color: color-mix(in srgb, var(--border) 74%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 95%, var(--bg-surface) 5%);
+ gap: var(--sp-1);
}
.bottom-terminal--mobile-fullscreen .terminal-toolbar-left::before {
@@ -8816,29 +9167,40 @@ textarea.input {
.bottom-terminal--mobile-fullscreen .terminal-toolbar-right {
width: auto;
justify-content: flex-end;
- gap: var(--sp-2);
+ gap: 4px;
}
.bottom-terminal--mobile-fullscreen .terminal-selector {
min-width: 0;
flex: 1;
position: relative;
+ max-width: min(100%, 196px);
}
.bottom-terminal--mobile-fullscreen .terminal-selector-btn {
display: flex;
width: 100%;
- min-height: 32px;
+ height: 22px;
+ min-height: 22px;
min-width: 0;
align-items: center;
- padding: 0 var(--sp-3);
- justify-content: space-between;
- border-radius: 14px;
- border-color: color-mix(in srgb, var(--border) 86%, transparent);
- background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
- color: var(--text-primary);
- font-size: var(--text-sm);
+ gap: var(--sp-2);
+ padding: 0 6px;
+ justify-content: space-between;
+ border-radius: 3px;
+ border-color: color-mix(in srgb, var(--border) 64%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 74%, var(--bg-surface) 26%);
+ color: var(--text-secondary);
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
font-weight: var(--font-medium);
+ letter-spacing: 0.01em;
+ }
+
+ .bottom-terminal--mobile-fullscreen .terminal-selector-btn:focus,
+ .bottom-terminal--mobile-fullscreen .terminal-selector-btn:focus-visible {
+ border-color: color-mix(in srgb, var(--border) 62%, var(--accent-blue) 38%);
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent);
}
.bottom-terminal--mobile-fullscreen .terminal-selector-btn span {
@@ -8846,6 +9208,13 @@ textarea.input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ text-align: left;
+ }
+
+ .bottom-terminal--mobile-fullscreen .terminal-selector-btn .mobile-select-trigger__icon {
+ color: var(--text-tertiary);
+ transform: scale(0.9);
+ transform-origin: center;
}
.bottom-terminal--mobile-fullscreen .bottom-terminal-tabs {
@@ -8861,15 +9230,22 @@ textarea.input {
}
.bottom-terminal--mobile-fullscreen .terminal-toolbar-actions {
- gap: var(--sp-2);
+ gap: 4px;
}
.bottom-terminal--mobile-fullscreen .panel-toolbar-btn {
- width: 30px;
- height: 30px;
- border-radius: 8px;
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
- background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+ width: 22px;
+ height: 22px;
+ border-radius: 3px;
+ border: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 74%, var(--bg-surface) 26%);
+ color: var(--text-tertiary);
+ box-shadow: none;
+ }
+
+ .bottom-terminal--mobile-fullscreen .panel-toolbar-btn:hover {
+ background: color-mix(in srgb, var(--bg-panel) 64%, var(--accent-blue) 12%);
+ color: var(--text-primary);
}
.bottom-terminal--mobile-fullscreen .terminal-selector-sheet {
@@ -8960,52 +9336,91 @@ textarea.input {
bottom: 0;
display: flex;
flex-direction: column;
- gap: var(--sp-4);
- width: min(86vw, 360px);
- padding: calc(var(--mobile-safe-top) + var(--sp-5)) calc(var(--mobile-safe-right) + var(--sp-4))
- calc(var(--sp-5) + var(--mobile-safe-bottom)) calc(var(--mobile-safe-left) + var(--sp-4));
- background: var(--bg-sidebar);
- box-shadow: var(--shadow-xl);
- transform: translateX(-18px);
+ gap: 0;
+ width: min(88vw, 376px);
+ padding: calc(var(--mobile-safe-top) + var(--sp-3)) calc(var(--mobile-safe-right) + var(--sp-3))
+ calc(var(--sp-3) + var(--mobile-safe-bottom)) calc(var(--mobile-safe-left) + var(--sp-3));
+ border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 95%, var(--bg-surface) 5%);
+ box-shadow: none;
+ transform: translateX(-12px);
opacity: 0;
animation: mobile-shell-drawer-enter 260ms var(--ease-out) forwards;
}
.mobile-workspace-drawer__header {
display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--sp-3);
+ padding-bottom: 10px;
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+ }
+
+ .mobile-workspace-drawer__header-copy {
+ display: flex;
+ min-width: 0;
+ flex: 1;
flex-direction: column;
- gap: var(--sp-1);
+ gap: 0;
}
.mobile-workspace-drawer__kicker {
- font-size: var(--text-xs);
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--text-tertiary);
+ display: none;
}
.mobile-workspace-drawer__title {
margin: 0;
- font-size: var(--text-2xl);
+ font-size: 16px;
+ font-weight: var(--font-semibold);
+ line-height: 1.2;
+ letter-spacing: 0.01em;
+ color: var(--text-primary);
+ }
+
+ .mobile-workspace-drawer__dismiss {
+ width: 28px;
+ min-width: 28px;
+ height: 28px;
+ min-height: 28px;
+ border: 1px solid color-mix(in srgb, var(--border) 44%, transparent);
+ border-radius: 3px;
+ background: transparent;
+ color: var(--text-secondary);
+ box-shadow: none;
+ }
+
+ .mobile-workspace-drawer__dismiss:hover {
+ background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
color: var(--text-primary);
}
.mobile-workspace-drawer__list {
display: flex;
- flex: 1;
+ flex: 0 1 auto;
flex-direction: column;
- gap: var(--sp-2);
+ gap: 0;
+ min-height: 0;
+ max-height: 100%;
overflow-y: auto;
+ border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+ border-right: none;
+ border-left: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
}
.mobile-workspace-drawer__item {
display: flex;
align-items: stretch;
- gap: var(--sp-2);
- padding: var(--sp-2);
- border: 1px solid var(--border);
- border-radius: var(--radius-xl);
- background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+ gap: 0;
+ padding: 0;
+ border: none;
+ box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 92%, transparent);
+ border-radius: 0;
+ background: transparent;
text-align: left;
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -9015,9 +9430,22 @@ textarea.input {
box-shadow var(--mobile-shell-motion-surface-duration) var(--ease-out);
}
+ .mobile-workspace-drawer__item:last-child {
+ box-shadow: none;
+ }
+
.mobile-workspace-drawer__item--active {
- border-color: color-mix(in srgb, var(--accent-green) 38%, var(--border));
- background: color-mix(in srgb, var(--accent-green) 10%, var(--bg-surface));
+ background:
+ linear-gradient(
+ 90deg,
+ color-mix(in srgb, var(--accent-blue) 12%, transparent) 0,
+ color-mix(in srgb, var(--accent-blue) 4%, transparent) 46%,
+ transparent 100%
+ ),
+ color-mix(in srgb, var(--bg-panel) 92%, var(--surface-elevated));
+ box-shadow:
+ inset 0 1px 0 color-mix(in srgb, var(--accent-blue) 10%, transparent),
+ inset 0 -1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent);
}
.mobile-workspace-drawer__item-main {
@@ -9027,42 +9455,75 @@ textarea.input {
flex-direction: column;
align-items: flex-start;
justify-content: center;
- gap: var(--sp-1);
- padding: var(--sp-1);
+ gap: 1px;
+ padding: 10px 0;
+ padding-right: var(--sp-2);
text-align: left;
}
+ .mobile-workspace-drawer__item-name-row {
+ display: flex;
+ width: 100%;
+ min-width: 0;
+ align-items: center;
+ gap: var(--sp-2);
+ }
+
.mobile-workspace-drawer__item-close {
display: inline-flex;
align-items: center;
justify-content: center;
- width: 40px;
- min-width: 40px;
- min-height: 40px;
- align-self: center;
- border-radius: 12px;
+ width: 28px;
+ min-width: 28px;
+ min-height: 28px;
+ margin: auto 0;
+ align-self: auto;
+ border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
+ border-radius: 3px;
color: color-mix(in srgb, var(--color-error) 82%, var(--text-primary));
- background: color-mix(in srgb, var(--color-error) 10%, transparent);
+ background: transparent;
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
color var(--mobile-shell-motion-surface-duration) var(--ease-out);
}
.mobile-workspace-drawer__item-close:hover {
- background: color-mix(in srgb, var(--color-error) 16%, transparent);
+ background: color-mix(in srgb, var(--color-error) 8%, transparent);
}
.mobile-workspace-drawer__item-name {
+ min-width: 0;
+ flex: 1;
color: var(--text-primary);
- font-size: var(--text-base);
+ font-size: 12px;
+ font-weight: var(--font-semibold);
+ line-height: 1.35;
+ }
+
+ .mobile-workspace-drawer__item-state {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 1px 6px;
+ border: 1px solid color-mix(in srgb, var(--accent-blue) 26%, transparent);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
+ color: color-mix(in srgb, var(--accent-blue) 74%, var(--text-primary));
+ font-size: 10px;
font-weight: var(--font-semibold);
+ line-height: 1.2;
+ letter-spacing: 0.04em;
+ white-space: nowrap;
}
.mobile-workspace-drawer__item-path {
max-width: 100%;
overflow: hidden;
color: var(--text-tertiary);
- font-size: var(--text-xs);
+ font-family: var(--font-mono);
+ font-size: 9px;
+ line-height: 1.35;
+ letter-spacing: 0.03em;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -9070,15 +9531,28 @@ textarea.input {
.mobile-workspace-drawer__footer {
display: grid;
grid-template-columns: minmax(0, 1fr);
- gap: var(--sp-3);
+ gap: 0;
+ margin-top: auto;
+ padding-top: 0;
+ border-top: none;
}
.mobile-workspace-drawer__footer-button {
- padding: 0 var(--sp-3);
- border: 1px solid var(--border);
- border-radius: var(--radius-xl);
- background: var(--bg-surface);
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: var(--sp-2);
+ width: 100%;
+ min-height: 42px;
+ padding: 10px 0;
+ border: none;
+ border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+ border-radius: 0;
+ background: transparent;
color: var(--text-primary);
+ font-size: 12px;
+ font-weight: var(--font-medium);
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -9087,13 +9561,15 @@ textarea.input {
box-shadow var(--mobile-shell-motion-surface-duration) var(--ease-out);
}
+ .mobile-workspace-drawer__footer-button:hover {
+ background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
+ }
+
.mobile-topbar__workspace-button,
.mobile-topbar__session-button,
.mobile-topbar__session-option,
.mobile-supervisor-badge,
.mobile-dock__item,
- .mobile-workspace-drawer__item,
- .mobile-workspace-drawer__footer-button,
.mobile-sheet__back {
will-change: transform;
}
@@ -9101,6 +9577,8 @@ textarea.input {
.mobile-topbar__workspace-button,
.mobile-sheet__back,
.page-header__back {
+ background: transparent;
+ box-shadow: none;
transition:
background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -9114,9 +9592,6 @@ textarea.input {
.mobile-topbar__session-button:hover,
.mobile-topbar__session-option:hover,
.mobile-supervisor-badge:hover,
- .mobile-dock__item:hover,
- .mobile-workspace-drawer__item:hover,
- .mobile-workspace-drawer__footer-button:hover,
.mobile-sheet__back:hover,
.page-header__back:hover {
transform: translateY(-1px);
@@ -9127,20 +9602,32 @@ textarea.input {
.mobile-topbar__session-button:active,
.mobile-topbar__session-option:active,
.mobile-supervisor-badge:active,
- .mobile-dock__item:active,
- .mobile-workspace-drawer__item:active,
- .mobile-workspace-drawer__footer-button:active,
.mobile-sheet__back:active,
.page-header__back:active {
transform: translateY(1px) scale(0.99);
}
.mobile-topbar__session-option--active,
- .mobile-dock__item--active,
.mobile-workspace-drawer__item--active {
box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-blue) 10%, transparent);
}
+ .mobile-workspace-drawer__item--active {
+ box-shadow:
+ inset 0 1px 0 color-mix(in srgb, var(--accent-blue) 10%, transparent),
+ inset 0 -1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent);
+ }
+
+ .mobile-dock__item {
+ border: none;
+ background: transparent;
+ will-change: auto;
+ }
+
+ .mobile-dock__item--active {
+ box-shadow: none;
+ }
+
.mobile-topbar__session-option--active .mobile-topbar__session-dot,
.mobile-supervisor-badge:hover .mobile-supervisor-badge__icon {
transform: scale(1.05);
@@ -9229,10 +9716,12 @@ textarea.input {
.settings-page--mobile {
min-height: 100dvh;
+ height: 100dvh;
}
.settings-body--mobile {
display: block;
+ background: var(--bg-page);
}
.settings-body--mobile.settings-body--fill-height {
@@ -9244,37 +9733,68 @@ textarea.input {
.settings-content--mobile,
.settings-content--mobile-root {
- padding: var(--sp-4) calc(env(safe-area-inset-right, 0px) + var(--sp-4))
- calc(env(safe-area-inset-bottom, 0px) + var(--sp-6))
- calc(env(safe-area-inset-left, 0px) + var(--sp-4));
+ padding: 0;
+ }
+
+ .settings-content--mobile {
+ padding: var(--sp-4);
+ padding-bottom: var(--sp-5);
+ }
+
+ .settings-page--mobile .settings-content--mobile-root {
+ padding-left: var(--sp-2);
+ padding-right: var(--sp-2);
+ }
+
+ .settings-pills {
+ gap: var(--sp-2);
+ }
+
+ .settings-pills .settings-pill {
+ flex: 1 1 calc(50% - var(--sp-2));
+ }
+
+ .settings-info-value {
+ justify-self: stretch;
+ align-items: flex-start;
+ text-align: left;
+ max-width: 100%;
+ min-width: 0;
+ }
+
+ .settings-info-row {
+ grid-template-columns: 1fr;
}
.settings-content--mobile.settings-content--fill-height {
flex: 1;
min-height: 0;
+ padding-bottom: var(--sp-4);
}
.settings-mobile-list {
display: flex;
flex-direction: column;
- gap: var(--sp-2);
+ gap: 0;
+ border-top: 1px solid var(--border);
}
.settings-mobile-item {
display: flex;
align-items: center;
gap: var(--sp-3);
- min-height: 52px;
- padding: var(--sp-4);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- background: var(--bg-surface);
+ min-height: 48px;
+ padding: var(--sp-3) var(--sp-4);
+ border: none;
+ border-bottom: 1px solid var(--border);
+ border-radius: 0;
+ background: transparent;
text-align: left;
}
.settings-mobile-item__icon {
display: inline-flex;
- color: var(--text-secondary);
+ color: var(--text-tertiary);
}
.settings-mobile-item__label {
@@ -9287,17 +9807,94 @@ textarea.input {
color: var(--text-tertiary);
}
- .settings-header__title {
- font-size: var(--text-base);
- font-weight: 600;
- color: var(--text-primary);
- margin-left: auto;
+ .settings-provider-mobile-entry {
+ padding-left: var(--sp-4);
+ padding-right: var(--sp-4);
+ }
+
+ .settings-config-field--inline {
+ grid-template-columns: 1fr;
+ align-items: flex-start;
+ }
+
+ .settings-config-control {
+ width: 100%;
+ justify-content: flex-start;
+ }
+
+ .settings-input-compact {
+ width: 100%;
+ text-align: left;
+ }
+
+ .shortcuts-category-tabs {
+ padding: 0 var(--sp-4);
+ flex-wrap: wrap;
+ }
+
+ .shortcuts-list {
+ margin: 0;
+ }
+
+ .shortcuts-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: var(--sp-3);
+ }
+
+ .shortcuts-binding {
+ width: 100%;
+ justify-content: flex-start;
+ }
+
+ .shortcuts-key,
+ .shortcuts-capture {
+ min-width: 0;
+ width: 100%;
+ }
+
+ .shortcuts-footer {
+ padding-left: var(--sp-4);
+ padding-right: var(--sp-4);
+ }
+
+ .settings-header {
+ padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4))
+ var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
+ }
+
+ .settings-page--mobile > .settings-header {
+ padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4))
+ var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
+ }
+
+ .settings-header .mobile-page-header {
+ gap: var(--sp-2);
+ }
+
+ .settings-header .mobile-page-header .page-header__leading {
+ gap: var(--sp-2);
+ }
+
+ .settings-header .mobile-page-header .page-header__back {
+ min-height: 32px;
+ gap: var(--sp-1);
+ }
+
+ .settings-page--mobile > .settings-header .mobile-page-header .page-header__back {
+ min-height: 32px;
+ gap: var(--sp-1);
}
.settings-footer--mobile {
- padding: var(--sp-3) calc(env(safe-area-inset-right, 0px) + var(--sp-4))
- calc(env(safe-area-inset-bottom, 0px) + var(--sp-4))
- calc(env(safe-area-inset-left, 0px) + var(--sp-4));
+ min-height: 32px;
+ padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4))
+ calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4));
+ }
+
+ .settings-page--mobile > .settings-footer {
+ padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4))
+ calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4));
}
.mobile-shell--landscape-compact .mobile-topbar {
@@ -9322,16 +9919,16 @@ textarea.input {
.mobile-shell--landscape-compact .mobile-shell__agent-stage,
.mobile-shell--landscape-compact .mobile-shell__agent-empty {
- border-radius: 16px;
+ border-radius: 0;
}
.mobile-shell--landscape-compact .mobile-dock__item {
- min-height: 48px;
+ min-height: 40px;
}
.mobile-shell--landscape-compact .mobile-dock {
- gap: var(--sp-2);
- padding-top: var(--sp-2);
+ gap: 0;
+ padding-bottom: 0;
}
.mobile-shell--landscape-compact .mobile-dock__item {
@@ -10321,11 +10918,11 @@ textarea.input {
width: 100%;
align-self: stretch;
border: none;
- border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+ border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
border-radius: 0;
- background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page));
+ background: transparent;
box-shadow: none;
- padding-bottom: var(--mobile-safe-bottom);
+ padding-bottom: calc(var(--mobile-safe-bottom) + var(--sp-1));
}
.mobile-sheet__footer .workspace-status-bar {
@@ -10374,8 +10971,29 @@ textarea.input {
}
.mobile-shell__bottom-stack .git-panel-status-strip {
+ gap: 8px;
min-height: 28px;
- padding: 0 calc(var(--mobile-safe-right) + 12px) 0 calc(var(--mobile-safe-left) + 12px);
+ font-size: 10px;
+ padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0
+ calc(var(--mobile-safe-left) + var(--sp-4));
+}
+
+.mobile-shell__bottom-stack .git-panel-status-strip__branch,
+.mobile-shell__bottom-stack .git-panel-status-strip__meta {
+ gap: 4px;
+}
+
+.mobile-shell__bottom-stack .git-panel-status-strip__branch svg {
+ width: 10px;
+ height: 10px;
+}
+
+.mobile-shell__bottom-stack .git-panel-status-strip .git-status-bar {
+ gap: 3px;
+}
+
+.mobile-shell__bottom-stack .git-panel-status-strip .git-status-bar__item {
+ font-size: 10px;
}
.mobile-sheet__footer .git-panel-status-strip {
diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts
index 1fa191cf3..2613a8140 100644
--- a/packages/web/src/styles/components.theme.test.ts
+++ b/packages/web/src/styles/components.theme.test.ts
@@ -3,36 +3,73 @@ import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
const stylesheet = readFileSync(`${process.cwd()}/src/styles/components.css`, "utf8");
-
-function getLastGroupedRuleBlock(pattern: RegExp) {
- const matches = Array.from(stylesheet.matchAll(pattern));
+const tokensStylesheet = readFileSync(`${process.cwd()}/src/styles/tokens.css`, "utf8");
+const segmentedControlStylesheet = readFileSync(
+ `${process.cwd()}/src/components/ui/segmented-control/index.module.css`,
+ "utf8"
+);
+const kbdStylesheet = readFileSync(
+ `${process.cwd()}/src/components/ui/kbd/index.module.css`,
+ "utf8"
+);
+const pillStylesheet = readFileSync(
+ `${process.cwd()}/src/components/ui/pill/index.module.css`,
+ "utf8"
+);
+const noticeStylesheet = readFileSync(
+ `${process.cwd()}/src/components/ui/notice/index.module.css`,
+ "utf8"
+);
+
+function getLastGroupedRuleBlockFrom(source: string, pattern: RegExp) {
+ const matches = Array.from(source.matchAll(pattern));
const match = matches.at(-1);
expect(match, `expected CSS rule matching ${pattern}`).toBeTruthy();
return match?.[1] ?? "";
}
-function getLastRuleBlock(selector: string) {
- let block = "";
+function getLastGroupedRuleBlock(pattern: RegExp) {
+ return getLastGroupedRuleBlockFrom(stylesheet, pattern);
+}
+
+function getLastRuleBlockFrom(source: string, selector: string) {
+ return getRuleBlocksFrom(source, selector).at(-1) ?? "";
+}
+
+function getRuleBlocksFrom(source: string, selector: string) {
+ const blocks: string[] = [];
const matcher = /([^{}]+)\{([^}]*)\}/g;
let match: RegExpExecArray | null = null;
+ const normalizedSelector = selector.replace(/\s+/g, " ").trim();
- while ((match = matcher.exec(stylesheet))) {
+ while ((match = matcher.exec(source))) {
const selectors = match[1]
.replace(/\/\*[\s\S]*?\*\//g, "")
.split(",")
- .map((entry) => entry.trim());
+ .map((entry) => entry.replace(/\s+/g, " ").trim());
- if (selectors.includes(selector)) {
- block = match[2];
+ if (selectors.includes(normalizedSelector)) {
+ blocks.push(match[2]);
}
}
- expect(block, `expected CSS rule for ${selector}`).not.toBe("");
- return block;
+ expect(blocks.length, `expected CSS rule for ${selector}`).toBeGreaterThan(0);
+ return blocks;
+}
+
+function getLastRuleBlock(selector: string) {
+ return getLastRuleBlockFrom(stylesheet, selector);
}
describe("components.css theme-sensitive surfaces", () => {
+ it("exposes global mobile safe-area tokens so standalone mobile views keep their padding", () => {
+ expect(tokensStylesheet).toContain("--mobile-safe-top: env(safe-area-inset-top, 0px);");
+ expect(tokensStylesheet).toContain("--mobile-safe-right: env(safe-area-inset-right, 0px);");
+ expect(tokensStylesheet).toContain("--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);");
+ expect(tokensStylesheet).toContain("--mobile-safe-left: env(safe-area-inset-left, 0px);");
+ });
+
it("keeps the workspace launch modal theme-aware", () => {
const overlay = getLastRuleBlock(".launch-overlay");
const modal = getLastRuleBlock(".launch-modal");
@@ -188,7 +225,7 @@ describe("components.css theme-sensitive surfaces", () => {
);
expect(viewport).toContain(
- "padding: var(--sp-2) var(--mobile-safe-right) 0 var(--mobile-safe-left)"
+ "padding: var(--sp-1) var(--mobile-safe-right) 0 var(--mobile-safe-left)"
);
expect(viewport).not.toContain("var(--sp-3) var(--mobile-safe-left)");
expect(compactViewport).toContain("padding-bottom: 0");
@@ -209,7 +246,7 @@ describe("components.css theme-sensitive surfaces", () => {
expect(fullscreenSheet).toContain("height: 100dvh");
expect(fullscreenSheet).toContain("overflow: hidden");
expect(fullscreenSheet).toContain(
- "padding: calc(var(--mobile-safe-top) + var(--sp-2)) var(--mobile-safe-right) 0"
+ "padding: calc(var(--mobile-safe-top) + var(--sp-1)) var(--mobile-safe-right) 0"
);
expect(fullscreenFooter).toContain("padding-bottom: var(--mobile-safe-bottom)");
expect(sheetBody).toContain("overflow-y: auto");
@@ -218,12 +255,19 @@ describe("components.css theme-sensitive surfaces", () => {
it("keeps fullscreen mobile sheet headers aligned to a settings-style back and title row", () => {
const fullscreenHeader = getLastRuleBlock(".mobile-sheet--fullscreen .mobile-sheet__header");
const pageHeader = getLastRuleBlock(".mobile-sheet--fullscreen .page-header");
+ const mobilePageHeader = getLastRuleBlock(".mobile-page-header");
+ const mobilePageHeaderLeading = getLastRuleBlock(".mobile-page-header .page-header__leading");
+ const mobilePageHeaderBack = getLastRuleBlock(".mobile-page-header .page-header__back");
const headerLeading = getLastRuleBlock(".page-header__leading");
const backButton = getLastRuleBlock(".mobile-sheet--fullscreen .page-header__back");
const headerActions = getLastRuleBlock(".page-header__actions");
- expect(fullscreenHeader).toContain("padding:");
- expect(pageHeader).toContain("gap: var(--sp-3)");
+ expect(fullscreenHeader).toContain("padding: 0 var(--sp-3)");
+ expect(pageHeader).toContain("width: 100%");
+ expect(mobilePageHeader).toContain("min-height: 38px");
+ expect(mobilePageHeaderLeading).toContain("gap: 8px");
+ expect(mobilePageHeaderBack).toContain("min-height: 26px");
+ expect(mobilePageHeaderBack).toContain("font-family: var(--font-mono)");
expect(headerLeading).toContain("flex: 1");
expect(backButton).toContain("background: transparent");
expect(backButton).not.toContain("border-radius: 999px");
@@ -240,23 +284,31 @@ describe("components.css theme-sensitive surfaces", () => {
const iconButton = getLastRuleBlock(".mobile-topbar__icon-button");
expect(inlineSheet).toContain("position: absolute");
- expect(inlineSheet).toContain("border-radius: 20px");
+ expect(inlineSheet).toContain("border-radius: 12px");
expect(inlineSelectSheet).toContain("flex: 1");
expect(inlineSelectSheet).toContain("flex-direction: column");
- expect(workspaceButton).toContain("height: 48px");
- expect(sessionButton).toContain("min-height: 48px");
- expect(iconButton).toContain("height: 48px");
+ expect(workspaceButton).toContain("height: 32px");
+ expect(workspaceButton).not.toContain("box-shadow:");
+ expect(sessionButton).toContain("min-height: 40px");
+ expect(sessionButton).not.toContain("box-shadow:");
+ expect(iconButton).toContain("height: 32px");
+ expect(iconButton).not.toContain("box-shadow:");
});
it("keeps mobile select row-side actions lightweight and token-driven", () => {
const row = getLastRuleBlock(".mobile-select-sheet__item-row");
const rowSelected = getLastRuleBlock('.mobile-select-sheet__item-row[data-selected="true"]');
+ const commandSelected = getLastRuleBlock(
+ '.mobile-select-sheet--command .mobile-select-sheet__list > [data-selected="true"] > .mobile-select-sheet__item'
+ );
const sideAction = getLastRuleBlock(".mobile-select-sheet__item-side-action");
const sideActionDanger = getLastRuleBlock(".mobile-select-sheet__item-side-action--danger");
expect(row).toContain("display: flex");
expect(row).toContain("padding: var(--sp-1) var(--sp-2)");
expect(rowSelected).toContain("var(--accent-blue)");
+ expect(commandSelected).toContain("var(--accent-blue) 12%");
+ expect(commandSelected).toContain("inset 2px 0 0");
expect(sideAction).toContain("width: 40px");
expect(sideAction).toContain("border-radius: 999px");
expect(sideAction).toContain("background: transparent");
@@ -266,8 +318,530 @@ describe("components.css theme-sensitive surfaces", () => {
it("keeps the mobile dock as a three-entry bottom rail for agent, files, and terminal", () => {
const mobileDock = getLastRuleBlock(".mobile-dock");
+ const mobileDockItem = getRuleBlocksFrom(stylesheet, ".mobile-dock__item").find((block) =>
+ block.includes("display: flex")
+ );
+ const activeDockItem = getRuleBlocksFrom(stylesheet, ".mobile-dock__item--active").find(
+ (block) => block.includes("background:")
+ );
expect(mobileDock).toContain("grid-template-columns: repeat(3, minmax(0, 1fr))");
+ expect(mobileDock).toContain("gap: 0");
+ expect(mobileDockItem).toBeTruthy();
+ expect(mobileDockItem).toContain("border: none");
+ expect(mobileDockItem).toContain("background: transparent");
+ expect(mobileDockItem).toContain("min-height: 34px");
+ expect(activeDockItem).toBeTruthy();
+ expect(activeDockItem).toContain("background: transparent");
+ });
+
+ it("keeps mobile sheets closer to IDE panes than floating cards", () => {
+ const mobileSheet = getLastRuleBlock(".mobile-sheet");
+ const mobileSheetHandle = getLastRuleBlock(".mobile-sheet__handle");
+ const fullscreenBack = getLastRuleBlock(".mobile-sheet--fullscreen .page-header__back");
+
+ expect(mobileSheet).toContain("border-top-left-radius: 12px");
+ expect(mobileSheet).toContain("border-top-right-radius: 12px");
+ expect(mobileSheet).toContain("border: 1px solid");
+ expect(mobileSheet).not.toContain("box-shadow: var(--shadow-xl)");
+ expect(mobileSheetHandle).toContain("width: 32px");
+ expect(fullscreenBack).toContain("box-shadow: none");
+ });
+
+ it("keeps settings navigation aligned with desktop editor chrome on both desktop and mobile", () => {
+ const settingsPage = getLastRuleBlock(".settings-page");
+ const baseSettingsHeader = getRuleBlocksFrom(stylesheet, ".settings-header")[0];
+ const settingsBody = getLastRuleBlock(".settings-body");
+ const settingsSidebar = getLastRuleBlock(".settings-sidebar");
+ const settingsContent = getLastRuleBlock(".settings-content");
+ const settingsNavItem = getLastRuleBlock(".settings-nav-item");
+ const settingsNavItemHover = getLastRuleBlock(".settings-nav-item:hover");
+ const settingsNavItemActive = getLastRuleBlock(".settings-nav-item-active");
+ const mobileContent = getLastGroupedRuleBlock(
+ /\.settings-content--mobile,\s*\.settings-content--mobile-root\s*\{([^}]*)\}/g
+ );
+ const mobileRootContent = getLastRuleBlock(
+ ".settings-page--mobile .settings-content--mobile-root"
+ );
+ const mobileList = getLastRuleBlock(".settings-mobile-list");
+ const mobileItem = getLastRuleBlock(".settings-mobile-item");
+ const mobileItemIcon = getLastRuleBlock(".settings-mobile-item__icon");
+ const mobileItemArrow = getLastRuleBlock(".settings-mobile-item__arrow");
+
+ expect(settingsPage).toContain("display: flex");
+ expect(settingsPage).toContain("min-height: 100vh");
+ expect(settingsPage).toContain("background: var(--bg-page)");
+ expect(baseSettingsHeader).toContain("background: var(--bg-surface)");
+ expect(baseSettingsHeader).toContain("border-bottom: 1px solid var(--border)");
+ expect(baseSettingsHeader).toContain("padding: var(--sp-2) var(--sp-4)");
+ expect(settingsBody).toContain("align-items: stretch");
+ expect(settingsBody).toContain("background: var(--bg-page)");
+ expect(settingsSidebar).toContain("background: var(--bg-sidebar)");
+ expect(settingsSidebar).toContain("padding: var(--sp-3)");
+ expect(settingsSidebar).toContain("width: 216px");
+ expect(settingsContent).toContain("padding: var(--sp-5) var(--sp-6) var(--sp-6)");
+ expect(settingsContent).toContain("background: var(--bg-page)");
+ expect(settingsNavItem).toContain("min-height: 40px");
+ expect(settingsNavItem).toContain("border: 1px solid transparent");
+ expect(settingsNavItem).toContain("border-radius: var(--radius-md)");
+ expect(settingsNavItemHover).toContain("background: var(--bg-hover)");
+ expect(settingsNavItemActive).toContain("background: var(--bg-active)");
+ expect(settingsNavItemActive).toContain("border-color: var(--border-focus)");
+ expect(settingsNavItemActive).not.toContain("var(--accent-blue)");
+ expect(mobileContent).toContain("padding: 0");
+ expect(mobileRootContent).toContain("padding-left: var(--sp-2)");
+ expect(mobileRootContent).toContain("padding-right: var(--sp-2)");
+ expect(mobileList).toContain("gap: 0");
+ expect(mobileList).toContain("border-top: 1px solid var(--border)");
+ expect(mobileItem).toContain("min-height: 48px");
+ expect(mobileItem).toContain("padding: var(--sp-3) var(--sp-4)");
+ expect(mobileItem).toContain("border: none");
+ expect(mobileItem).toContain("border-bottom: 1px solid var(--border)");
+ expect(mobileItem).toContain("border-radius: 0");
+ expect(mobileItem).toContain("background: transparent");
+ expect(mobileItemIcon).toContain("color: var(--text-tertiary)");
+ expect(mobileItemArrow).toContain("color: var(--text-tertiary)");
+ });
+
+ it("keeps settings mobile headers and back actions on the same flat pane language as workspace chrome", () => {
+ const mobilePageBack = getLastRuleBlock(".page-header__back");
+ const mobileSettingsPage = getLastRuleBlock(".settings-page--mobile");
+ const mobileSettingsHeader = getLastRuleBlock(".settings-header").replace(/\s+/g, " ");
+ const mobileSettingsHeaderPage = getLastRuleBlock(
+ ".settings-page--mobile > .settings-header"
+ ).replace(/\s+/g, " ");
+ const mobileSettingsHeaderPageHeader = getLastRuleBlock(".settings-header .mobile-page-header");
+ const mobileSettingsHeaderLeading = getLastRuleBlock(
+ ".settings-header .mobile-page-header .page-header__leading"
+ );
+ const mobileSettingsHeaderBack = getLastRuleBlock(
+ ".settings-header .mobile-page-header .page-header__back"
+ );
+ const mobileSettingsBody = getLastRuleBlock(".settings-body--mobile");
+ const mobileSettingsFooter = getLastRuleBlock(".settings-footer--mobile").replace(/\s+/g, " ");
+ const mobileSettingsFooterPage = getLastRuleBlock(
+ ".settings-page--mobile > .settings-footer"
+ ).replace(/\s+/g, " ");
+
+ expect(mobileSettingsPage).toContain("min-height: 100dvh");
+ expect(mobileSettingsPage).toContain("height: 100dvh");
+ expect(mobileSettingsHeader).toContain(
+ "padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4)) var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(mobileSettingsHeaderPage).toContain(
+ "padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4)) var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(mobileSettingsHeaderPageHeader).toContain("gap: var(--sp-2)");
+ expect(mobileSettingsHeaderLeading).toContain("gap: var(--sp-2)");
+ expect(mobileSettingsHeaderBack).toContain("min-height: 32px");
+ expect(mobileSettingsHeaderBack).toContain("gap: var(--sp-1)");
+ expect(mobileSettingsBody).toContain("background: var(--bg-page)");
+ expect(mobilePageBack).toContain("background: transparent");
+ expect(mobilePageBack).toContain("box-shadow: none");
+ expect(mobilePageBack).not.toContain("border-radius: 999px");
+ expect(mobileSettingsFooter).toContain(
+ "padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4)) calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(mobileSettingsFooterPage).toContain(
+ "padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4)) calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(mobileSettingsFooter).toContain("min-height: 32px");
+ });
+
+ it("keeps the mobile workspace launch action docked in a compact editor-style footer rail", () => {
+ const launchFooter = getLastRuleBlock(".mobile-sheet--launch .mobile-sheet__footer").replace(
+ /\s+/g,
+ " "
+ );
+ const launchActionRail = getLastRuleBlock(".mobile-launch-sheet__footer");
+ const launchActionButton = getLastRuleBlock(
+ ".mobile-launch-sheet__footer .launch-start-btn--mobile"
+ );
+
+ expect(launchFooter).toContain(
+ "padding: var(--sp-2) calc(var(--mobile-safe-right) + var(--sp-4)) calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(launchActionRail).toContain("padding: var(--sp-2)");
+ expect(launchActionRail).toContain("border-radius: 16px");
+ expect(launchActionRail).toContain("background: color-mix(");
+ expect(launchActionButton).toContain("min-height: 44px");
+ expect(launchActionButton).toContain("border-radius: 12px");
+ expect(launchActionButton).toContain("font-size: var(--text-sm)");
+ expect(launchActionButton).toContain("box-shadow: none");
+ });
+
+ it("keeps the mobile workspace home screen aligned to settings chrome and editor-pane empty states", () => {
+ const topbar = getLastRuleBlock(".mobile-topbar").replace(/\s+/g, " ");
+ const emptyStage = getLastRuleBlock(".mobile-shell__agent-empty").replace(/\s+/g, " ");
+ const bottomStack = getLastRuleBlock(".mobile-shell__bottom-stack").replace(/\s+/g, " ");
+ const dockShell = getLastRuleBlock(".mobile-dock-shell").replace(/\s+/g, " ");
+ const dock = getLastRuleBlock(".mobile-dock");
+ const dockItem = getRuleBlocksFrom(stylesheet, ".mobile-dock__item").find((block) =>
+ block.includes("display: flex")
+ );
+ const dockLabel = getLastRuleBlock(".mobile-dock__label");
+ const statusBar = getLastRuleBlock(
+ ".mobile-shell__bottom-stack > .workspace-status-bar"
+ ).replace(/\s+/g, " ");
+ const statusStrip = getLastRuleBlock(
+ ".mobile-shell__bottom-stack .git-panel-status-strip"
+ ).replace(/\s+/g, " ");
+ const emptyPane = getLastRuleBlock(".mobile-shell__empty-content");
+ const emptyPaneBefore = getLastRuleBlock(".mobile-shell__empty-content::before");
+ const emptyState = getLastRuleBlock(".mobile-shell__empty-state");
+ const emptyCta = getLastRuleBlock(".mobile-shell__empty-cta");
+
+ expect(topbar).toContain(
+ "padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4)) var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(emptyStage).toContain("padding: clamp(56px, 14vh, 116px) var(--sp-4) var(--sp-3)");
+ expect(bottomStack).toContain("background: var(--bg-surface)");
+ expect(bottomStack).toContain("border-top: 1px solid var(--border)");
+ expect(bottomStack).not.toContain("backdrop-filter");
+ expect(dockShell).toContain(
+ "padding: 2px calc(var(--mobile-safe-right) + var(--sp-4)) 0 calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(dock).toContain("gap: 0");
+ expect(dock).toContain("border-bottom: none");
+ expect(dockItem).toBeTruthy();
+ expect(dockItem).toContain("min-height: 34px");
+ expect(dockItem).toContain("padding: 3px var(--sp-1) 5px");
+ expect(dockLabel).toContain("font-size: 10px");
+ expect(statusBar).toContain("padding-bottom: calc(var(--mobile-safe-bottom) + var(--sp-1))");
+ expect(statusBar).toContain("border-top: 1px solid");
+ expect(statusStrip).toContain("min-height: 28px");
+ expect(statusStrip).toContain("font-size: 10px");
+ expect(statusStrip).toContain(
+ "padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0 calc(var(--mobile-safe-left) + var(--sp-4))"
+ );
+ expect(emptyPane).toContain("position: relative");
+ expect(emptyPane).toContain("width: min(100%, 344px)");
+ expect(emptyPane).toContain("align-self: flex-start");
+ expect(emptyPane).toContain("padding: var(--sp-2) 0 0 var(--sp-4)");
+ expect(emptyPane).toContain("border-top: none");
+ expect(emptyPane).toContain("background: transparent");
+ expect(emptyPaneBefore).toContain('content: ""');
+ expect(emptyPaneBefore).toContain("position: absolute");
+ expect(emptyPaneBefore).toContain("width: 1px");
+ expect(emptyPaneBefore).toContain("background: linear-gradient(");
+ expect(emptyState).toContain("align-items: flex-start");
+ expect(emptyState).toContain("width: 100%");
+ expect(emptyState).toContain("text-align: left");
+ expect(emptyCta).toContain("min-height: 36px");
+ expect(emptyCta).toContain("width: auto");
+ expect(emptyCta).toContain("min-width: 132px");
+ expect(emptyCta).toContain("border-radius: 8px");
+ });
+
+ it("keeps settings content groups and provider controls aligned with editor configuration panels", () => {
+ const settingsGroup = getLastRuleBlock(".settings-group");
+ const settingsGroupTitle = getLastRuleBlock(".settings-group-title");
+ const settingsGroupDesc = getLastRuleBlock(".settings-group-desc");
+ const settingsPillsBase = getRuleBlocksFrom(stylesheet, ".settings-pills")[0];
+ const settingsPillsMobile = getLastRuleBlock(".settings-pills");
+ const settingsToggleRow = getLastRuleBlock(".settings-toggle-row");
+ const settingsInfoRowBase = getRuleBlocksFrom(stylesheet, ".settings-info-row")[0];
+ const settingsInfoRowMobile = getLastRuleBlock(".settings-info-row");
+ const settingsInfoLabel = getLastRuleBlock(".settings-info-label");
+ const settingsInfoValueBase = getRuleBlocksFrom(stylesheet, ".settings-info-value")[0];
+ const settingsInfoValueMobile = getLastRuleBlock(".settings-info-value");
+ const settingsStatusHint = getLastRuleBlock(".settings-status-hint");
+ const settingsLink = getLastRuleBlock(".settings-link");
+ const providerTabs = getLastRuleBlock(".settings-provider-tabs");
+ const providerTab = getLastRuleBlock(".settings-provider-tab");
+ const providerTabActive = getLastRuleBlock(".settings-provider-tab-active");
+ const providerSubnav = getLastRuleBlock(".settings-provider-subnav");
+ const providerSubnavButtonActive = getLastRuleBlock(".settings-provider-subnav-button-active");
+ const providerMobileEntryBase = getRuleBlocksFrom(
+ stylesheet,
+ ".settings-provider-mobile-entry"
+ )[0];
+ const providerMobileEntryMobile = getLastRuleBlock(".settings-provider-mobile-entry");
+ const commandPreview = getLastRuleBlock(".settings-command-preview");
+ const settingsFooter = getLastRuleBlock(".settings-footer");
+
+ expect(settingsGroup).toContain("margin-bottom: var(--sp-8)");
+ expect(settingsGroupTitle).toContain("font-size: var(--text-base)");
+ expect(settingsGroupTitle).toContain("text-transform: uppercase");
+ expect(settingsGroupTitle).toContain("letter-spacing:");
+ expect(settingsGroupDesc).toContain("max-width:");
+ expect(settingsPillsBase).toContain("gap: var(--sp-1)");
+ expect(settingsPillsBase).toContain("padding-bottom: var(--sp-1)");
+ expect(settingsPillsMobile).toContain("gap: var(--sp-2)");
+ expect(settingsToggleRow).toContain("display: grid");
+ expect(settingsToggleRow).toContain("grid-template-columns: minmax(0, 1fr) auto");
+ expect(settingsToggleRow).toContain("padding: var(--sp-3) 0");
+ expect(settingsInfoRowBase).toContain("display: grid");
+ expect(settingsInfoRowBase).toContain("grid-template-columns: minmax(0, 1fr) auto");
+ expect(settingsInfoRowBase).toContain("padding: var(--sp-3) 0");
+ expect(settingsInfoRowBase).toContain("border-bottom: 1px solid var(--border)");
+ expect(settingsInfoRowMobile).toContain("grid-template-columns: 1fr");
+ expect(settingsInfoLabel).toContain("text-transform: uppercase");
+ expect(settingsInfoLabel).toContain("letter-spacing:");
+ expect(settingsInfoValueBase).toContain("flex-direction: column");
+ expect(settingsInfoValueBase).toContain("align-items: flex-end");
+ expect(settingsInfoValueBase).toContain("min-width: 14ch");
+ expect(settingsInfoValueBase).toContain("max-width: 40ch");
+ expect(settingsInfoValueMobile).toContain("align-items: flex-start");
+ expect(settingsInfoValueMobile).toContain("min-width: 0");
+ expect(settingsInfoValueMobile).toContain("max-width: 100%");
+ expect(settingsStatusHint).toContain("line-height: 1.45");
+ expect(settingsLink).toContain("display: inline-flex");
+ expect(settingsLink).toContain("font-weight: var(--font-medium)");
+ expect(providerTabs).toContain("gap: var(--sp-1)");
+ expect(providerTabs).toContain("margin-bottom: var(--sp-4)");
+ expect(providerTab).toContain("background: transparent");
+ expect(providerTab).toContain("border: 1px solid transparent");
+ expect(providerTabActive).toContain("background: var(--bg-active)");
+ expect(providerTabActive).toContain("border-color: var(--border-focus)");
+ expect(providerSubnav).toContain("gap: var(--sp-1)");
+ expect(providerSubnav).toContain("margin-bottom: var(--sp-4)");
+ expect(providerSubnavButtonActive).toContain("background: var(--bg-active)");
+ expect(providerSubnavButtonActive).toContain("border-color: var(--border-focus)");
+ expect(providerMobileEntryBase).toContain("padding: var(--sp-3) 0");
+ expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border)");
+ expect(providerMobileEntryBase).toContain("border-radius: 0");
+ expect(providerMobileEntryBase).toContain("background: transparent");
+ expect(providerMobileEntryMobile).toContain("padding-left: var(--sp-4)");
+ expect(commandPreview).toContain("border-radius: var(--radius-sm)");
+ expect(commandPreview).toContain("background: color-mix");
+ expect(settingsFooter).toContain("background: var(--bg-surface)");
+ expect(settingsFooter).toContain("border-top: 1px solid var(--border)");
+ expect(settingsFooter).toContain("min-height: 32px");
+ expect(settingsFooter).toContain("padding: var(--sp-2) var(--sp-4)");
+ });
+
+ it("keeps shared appearance pills aligned with flat editor option toggles instead of rounded app chips", () => {
+ const pill = getLastRuleBlockFrom(pillStylesheet, ".pill");
+ const pillHover = getLastRuleBlockFrom(pillStylesheet, ".pill:hover:not(:disabled)");
+ const pillFocus = getLastRuleBlockFrom(pillStylesheet, ".pill:focus-visible");
+ const active = getLastRuleBlockFrom(pillStylesheet, ".active");
+
+ expect(pill).toContain("min-height: 36px");
+ expect(pill).toContain("padding: var(--sp-2) var(--sp-3)");
+ expect(pill).toContain("border: 1px solid transparent");
+ expect(pill).toContain("border-radius: var(--radius-md)");
+ expect(pill).toContain("background: transparent");
+ expect(pill).toContain("font-size: var(--text-sm)");
+ expect(pillHover).toContain("background: var(--bg-hover)");
+ expect(pillHover).toContain("border-color: color-mix");
+ expect(pillFocus).toContain("border-color: var(--border-focus)");
+ expect(active).toContain("background: var(--bg-active)");
+ expect(active).toContain("border-color: var(--border-focus)");
+ expect(active).not.toContain("background: var(--accent-blue)");
+ });
+
+ it("keeps inline notices closer to embedded status strips than standalone cards", () => {
+ const notice = getLastRuleBlockFrom(noticeStylesheet, ".notice");
+ const warning = getLastRuleBlockFrom(noticeStylesheet, ".warning");
+ const error = getLastRuleBlockFrom(noticeStylesheet, ".error");
+ const title = getLastRuleBlockFrom(noticeStylesheet, ".title");
+ const message = getLastRuleBlockFrom(noticeStylesheet, ".message");
+ const action = getLastRuleBlockFrom(noticeStylesheet, ".action");
+
+ expect(notice).toContain("margin: 0 0 var(--sp-4)");
+ expect(notice).toContain("padding: var(--sp-2) var(--sp-3)");
+ expect(notice).toContain("border-radius: var(--radius-sm)");
+ expect(notice).toContain("background: color-mix");
+ expect(warning).toContain("background: color-mix");
+ expect(error).toContain("background: color-mix");
+ expect(title).toContain("text-transform: uppercase");
+ expect(title).toContain("font-size: var(--text-xs)");
+ expect(message).toContain("font-size: var(--text-sm)");
+ expect(action).toContain("align-self: flex-start");
+ });
+
+ it("keeps shared segmented controls aligned with flat editor settings tabs instead of pill chrome", () => {
+ const providerTabs = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.settings-provider-tabs)"
+ );
+ const providerTab = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.settings-provider-tab)"
+ );
+ const providerTabActive = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.settings-provider-tab.active)"
+ );
+ const providerSubnav = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.settings-provider-subnav)"
+ );
+ const providerSubnavActive = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.settings-provider-subnav-button.active)"
+ );
+ const shortcutsTabs = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.shortcuts-category-tabs)"
+ );
+ const shortcutsTab = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.shortcuts-category-tab)"
+ );
+ const shortcutsTabActive = getLastRuleBlockFrom(
+ segmentedControlStylesheet,
+ ":global(.shortcuts-category-tab.active)"
+ );
+
+ expect(providerTabs).toContain("background: transparent");
+ expect(providerTabs).toContain("border: none");
+ expect(providerTabs).toContain("padding: 0");
+ expect(providerTab).toContain("background: transparent");
+ expect(providerTab).toContain("border-color: transparent");
+ expect(providerTabActive).toContain("background: var(--bg-active)");
+ expect(providerTabActive).toContain("border-color: var(--border-focus)");
+ expect(providerTabActive).not.toContain("var(--accent-blue)");
+ expect(providerSubnav).toContain("background: transparent");
+ expect(providerSubnav).toContain("border-bottom: 1px solid var(--border)");
+ expect(providerSubnavActive).toContain("background: var(--bg-active)");
+ expect(providerSubnavActive).toContain("border-color: var(--border-focus)");
+ expect(shortcutsTabs).toContain("background: transparent");
+ expect(shortcutsTabs).toContain("border: none");
+ expect(shortcutsTabs).toContain("padding: 0");
+ expect(shortcutsTab).toContain("background: transparent");
+ expect(shortcutsTab).toContain("border-color: transparent");
+ expect(shortcutsTabActive).toContain("background: var(--bg-active)");
+ expect(shortcutsTabActive).toContain("border-color: var(--border-focus)");
+ expect(shortcutsTabActive).not.toContain(
+ "color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface))"
+ );
+ });
+
+ it("keeps shortcut bindings rendered as editor-style keycaps through the shared kbd primitive", () => {
+ const keycap = getLastRuleBlockFrom(kbdStylesheet, ":global(.shortcuts-key)");
+ const hover = getLastRuleBlockFrom(kbdStylesheet, ":global(.shortcuts-key):hover");
+ const focus = getLastRuleBlockFrom(kbdStylesheet, ":global(.shortcuts-key):focus-visible");
+
+ expect(keycap).toContain("display: inline-flex");
+ expect(keycap).toContain("align-items: center");
+ expect(keycap).toContain("justify-content: center");
+ expect(keycap).toContain("background: color-mix");
+ expect(keycap).toContain("color: var(--text-primary)");
+ expect(keycap).toContain("border-radius: var(--radius-sm)");
+ expect(hover).toContain("border-color: var(--border-focus)");
+ expect(hover).toContain("background: var(--bg-active)");
+ expect(focus).toContain("border-color: var(--border-focus)");
+ });
+
+ it("keeps shortcut settings rows aligned with editor-pane list treatment instead of standalone cards", () => {
+ const categoryTabsBase = getRuleBlocksFrom(stylesheet, ".shortcuts-category-tabs")[0];
+ const categoryTabsMobile = getLastRuleBlock(".shortcuts-category-tabs");
+ const categoryTab = getLastRuleBlock(".shortcuts-category-tab");
+ const categoryTabActive = getLastRuleBlock(".shortcuts-category-tab.active");
+ const listBase = getRuleBlocksFrom(stylesheet, ".shortcuts-list")[0];
+ const listMobile = getLastRuleBlock(".shortcuts-list");
+ const itemBase = getRuleBlocksFrom(stylesheet, ".shortcuts-item")[0];
+ const itemMobile = getLastRuleBlock(".shortcuts-item");
+ const customItem = getLastRuleBlock(".shortcuts-item-custom");
+ const footerBase = getRuleBlocksFrom(stylesheet, ".shortcuts-footer")[0];
+ const footerMobile = getLastRuleBlock(".shortcuts-footer");
+
+ expect(categoryTabsBase).toContain("background: transparent");
+ expect(categoryTabsBase).toContain("border: none");
+ expect(categoryTabsBase).toContain("padding: 0");
+ expect(categoryTabsMobile).toContain("padding: 0 var(--sp-4)");
+ expect(categoryTab).toContain("background: transparent");
+ expect(categoryTab).toContain("border: 1px solid transparent");
+ expect(categoryTabActive).toContain("background: var(--bg-active)");
+ expect(categoryTabActive).toContain("border-color: var(--border-focus)");
+ expect(categoryTabActive).not.toContain("rgba(108, 182, 255, 0.2)");
+ expect(listBase).toContain("gap: 0");
+ expect(listBase).toContain("border-top: 1px solid var(--border)");
+ expect(listMobile).toContain("margin: 0");
+ expect(itemBase).toContain("padding: var(--sp-3) var(--sp-4)");
+ expect(itemBase).toContain("background: transparent");
+ expect(itemBase).toContain("border: none");
+ expect(itemBase).toContain("border-bottom: 1px solid var(--border)");
+ expect(itemBase).toContain("border-radius: 0");
+ expect(itemMobile).toContain("flex-direction: column");
+ expect(itemMobile).toContain("align-items: flex-start");
+ expect(customItem).toContain("background: color-mix");
+ expect(customItem).not.toContain("rgba(241, 184, 106, 0.05)");
+ expect(footerBase).toContain("display: flex");
+ expect(footerBase).toContain("padding: var(--sp-3) var(--sp-4) 0");
+ expect(footerBase).toContain("border-top: 1px solid var(--border)");
+ expect(footerMobile).toContain("padding-left: var(--sp-4)");
+ expect(footerMobile).toContain("padding-right: var(--sp-4)");
+ });
+
+ it("keeps provider config editing closer to embedded editor panes than modal-like cards", () => {
+ const providerConfigStack = getLastRuleBlock(".settings-provider-config-stack--fill-height");
+ const providerContentFill = getLastRuleBlock(".settings-provider-content--fill-height");
+ const configCardBase = getRuleBlocksFrom(stylesheet, ".config-card")[0];
+ const configCardHeaderBase = getRuleBlocksFrom(stylesheet, ".config-card-header")[0];
+ const configCardBody = getLastRuleBlock(".config-card-body");
+ const configCardActionsBase = getRuleBlocksFrom(stylesheet, ".config-card-actions")[0];
+ const configCardMobile = getLastGroupedRuleBlockFrom(
+ stylesheet,
+ /@media\s*\(max-width:\s*640px\)\s*\{[\s\S]*?\.config-card\s*\{([^}]*)\}/g
+ );
+ const configHeaderActionsMobile = getLastGroupedRuleBlockFrom(
+ stylesheet,
+ /@media\s*\(max-width:\s*640px\)\s*\{[\s\S]*?\.config-card-header,\s*\.config-card-actions\s*\{([^}]*)\}/g
+ );
+ const configEmptyStateBase = getRuleBlocksFrom(stylesheet, ".config-empty-state")[0];
+ const configEmptyIcon = getLastRuleBlock(".config-empty-icon");
+ const configErrorBase = getRuleBlocksFrom(stylesheet, ".config-card-error")[0];
+
+ expect(providerConfigStack).toContain("display: flex");
+ expect(providerConfigStack).toContain("min-height: 0");
+ expect(providerContentFill).toContain("flex-direction: column");
+ expect(configCardBase).toContain("margin-top: var(--sp-4)");
+ expect(configCardBase).toContain("border-radius: var(--radius-md)");
+ expect(configCardBase).toContain("box-shadow: none");
+ expect(configCardBase).not.toContain("var(--radius-lg)");
+ expect(configCardMobile).toContain("border-radius: 0");
+ expect(configCardHeaderBase).toContain("background: transparent");
+ expect(configCardHeaderBase).toContain("padding: var(--sp-3) var(--sp-4)");
+ expect(configCardHeaderBase).not.toContain("cursor: pointer");
+ expect(configHeaderActionsMobile).toContain("padding-left: var(--sp-4)");
+ expect(configCardBody).toContain("background: transparent");
+ expect(configCardActionsBase).toContain("border-top: 1px solid var(--border)");
+ expect(configCardActionsBase).toContain("background: transparent");
+ expect(configEmptyStateBase).toContain("align-items: flex-start");
+ expect(configEmptyStateBase).toContain("text-align: left");
+ expect(configEmptyIcon).toContain("font-size: var(--text-sm)");
+ expect(configEmptyIcon).not.toContain("48px");
+ expect(configErrorBase).toContain("background: color-mix");
+ expect(configErrorBase).toContain("border-top: 1px solid var(--border)");
+ });
+
+ it("keeps provider base controls aligned with inspector-style config rows on desktop and mobile", () => {
+ const configField = getLastRuleBlock(".settings-config-field");
+ const configLabel = getLastRuleBlock(".settings-config-label");
+ const argsInput = getLastRuleBlock(".settings-provider-args-input");
+ const commandPreview = getLastRuleBlock(".settings-command-preview");
+ const providerMobileEntryBase = getRuleBlocksFrom(
+ stylesheet,
+ ".settings-provider-mobile-entry"
+ )[0];
+ const providerMobileEntryMobile = getLastRuleBlock(".settings-provider-mobile-entry");
+ const providerMobileEntryMeta = getLastRuleBlock(".settings-provider-mobile-entry__meta");
+
+ expect(configField).toContain("display: flex");
+ expect(configField).toContain("flex-direction: column");
+ expect(configField).toContain("gap: var(--sp-2)");
+ expect(configField).toContain("margin-bottom: var(--sp-4)");
+ expect(configLabel).toContain("font-size: var(--text-xs)");
+ expect(configLabel).toContain("text-transform: uppercase");
+ expect(configLabel).toContain("letter-spacing:");
+ expect(configLabel).toContain("margin-bottom: 0");
+ expect(argsInput).toContain("background: color-mix");
+ expect(argsInput).toContain("border-color: var(--border)");
+ expect(argsInput).toContain("font-family: var(--font-mono)");
+ expect(commandPreview).toContain("min-height:");
+ expect(commandPreview).toContain("white-space: pre-wrap");
+ expect(commandPreview).toContain("border-radius: var(--radius-sm)");
+ expect(commandPreview).not.toContain("word-break: break-all");
+ expect(providerMobileEntryBase).toContain("border: none");
+ expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border)");
+ expect(providerMobileEntryBase).toContain("border-radius: 0");
+ expect(providerMobileEntryBase).toContain("padding: var(--sp-3) 0");
+ expect(providerMobileEntryMobile).toContain("padding-left: var(--sp-4)");
+ expect(providerMobileEntryMobile).toContain("padding-right: var(--sp-4)");
+ expect(providerMobileEntryMeta).toContain("font-family: var(--font-mono)");
});
it("keeps git panel sections stretched to the parent width with a full-width toggle hit area", () => {
@@ -352,26 +926,41 @@ describe("components.css theme-sensitive surfaces", () => {
expect(keybar).not.toContain("position: absolute");
expect(keybar).toContain("min-width: 0");
expect(keybar).toContain("padding:");
+ expect(keybar).toContain("border-top:");
expect(keys).toContain("display: flex");
- expect(keys).toContain("overflow: hidden");
- expect(key).toContain("min-height: 28px");
- expect(key).toContain("flex: 1 1 0");
- expect(key).toContain("var(--bg-surface)");
+ expect(keys).toContain("overflow-x: auto");
+ expect(key).toContain("min-height: 20px");
+ expect(key).toContain("flex: 0 0 auto");
+ expect(key).toContain("var(--bg-page)");
expect(ctrlLocked).toContain("var(--accent-blue)");
expect(shiftArmed).toContain("var(--accent-blue)");
});
it("keeps the supervisor timeout setting aligned as a label-left control-right row", () => {
- const inlineField = getLastRuleBlock(".settings-config-field--inline");
+ const inlineFieldBase = getRuleBlocksFrom(stylesheet, ".settings-config-field--inline")[0];
+ const inlineFieldMobile = getLastRuleBlock(".settings-config-field--inline");
const inlineLabel = getLastRuleBlock(".settings-config-field--inline .settings-config-label");
- const control = getLastRuleBlock(".settings-config-control");
- const compactInput = getLastRuleBlock(".settings-input-compact");
-
- expect(inlineField).toContain("display: grid");
- expect(inlineField).toContain("grid-template-columns: minmax(0, 1fr) auto");
- expect(inlineField).toContain("align-items: center");
+ const controlBase = getRuleBlocksFrom(stylesheet, ".settings-config-control")[0];
+ const controlMobile = getLastRuleBlock(".settings-config-control");
+ const compactInputBase = getRuleBlocksFrom(stylesheet, ".settings-input-compact")[0];
+ const compactInputMobile = getLastRuleBlock(".settings-input-compact");
+
+ expect(inlineFieldBase).toContain("display: grid");
+ expect(inlineFieldBase).toContain("grid-template-columns: minmax(0, 1fr) auto");
+ expect(inlineFieldBase).toContain("align-items: center");
+ expect(inlineFieldMobile).toContain("grid-template-columns: 1fr");
+ expect(inlineFieldMobile).toContain("align-items: flex-start");
expect(inlineLabel).toContain("margin-bottom: 0");
- expect(control).toContain("justify-content: flex-end");
- expect(compactInput).toContain("text-align: right");
+ expect(controlBase).toContain("justify-content: flex-end");
+ expect(controlMobile).toContain("justify-content: flex-start");
+ expect(compactInputBase).toContain("text-align: right");
+ expect(compactInputMobile).toContain("text-align: left");
+ });
+
+ it("removes the unused legacy provider card chrome from settings styles", () => {
+ expect(stylesheet).not.toContain(".settings-provider-card {");
+ expect(stylesheet).not.toContain(".settings-provider-header {");
+ expect(stylesheet).not.toContain(".settings-provider-badge {");
+ expect(stylesheet).not.toContain(".settings-provider-meta {");
});
});
diff --git a/packages/web/src/styles/tokens.css b/packages/web/src/styles/tokens.css
index ba820a1e9..34ad91ed8 100644
--- a/packages/web/src/styles/tokens.css
+++ b/packages/web/src/styles/tokens.css
@@ -138,6 +138,12 @@
/* Topbar */
--topbar-height: 36px;
+ /* Safe areas */
+ --mobile-safe-top: env(safe-area-inset-top, 0px);
+ --mobile-safe-right: env(safe-area-inset-right, 0px);
+ --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
+ --mobile-safe-left: env(safe-area-inset-left, 0px);
+
/* Panels */
--panel-min-width: 200px;
--panel-max-width: 600px;