cowork-os 0.3.21 → 0.3.25

package/src/renderer/styles/index.css

@@ -84,6 +84,249 @@
   --gradient-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%);
 }
 
+/* ============================================
+   Visual Themes
+   ============================================ */
+
+/* Terminal Visual Theme (Default) */
+.visual-terminal {
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --font-content: 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
+  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Studio Visual Theme (non-terminal styling, same base colors) */
+.visual-oblivion {
+  --radius-sm: 12px;
+  --radius-md: 16px;
+  --radius-lg: 20px;
+  --radius-xl: 24px;
+  --font-content: 'Avenir Next', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-ui: 'Avenir Next', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* Hide CLI-specific decorations in warm style */
+.visual-oblivion .cli-section-prompt,
+.visual-oblivion .cli-btn-bracket {
+  display: none !important;
+}
+
+.visual-oblivion .cli-task-item {
+  border-left: none;
+  padding-left: 12px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 2px;
+}
+
+.visual-oblivion .cli-header-actions button {
+  border-radius: var(--radius-sm);
+  padding: 6px 12px;
+}
+
+.visual-oblivion .cli-btn-text {
+  font-family: var(--font-ui);
+  font-weight: 500;
+  text-transform: none;
+}
+
+/* Rounded avatars/icons in warm style */
+.visual-warm .avatar,
+.visual-warm .model-icon,
+.visual-oblivion .avatar,
+.visual-oblivion .model-icon {
+  border-radius: 50%;
+}
+
+/* -----------------------------
+   Modern Theme Visibility Logic
+   ----------------------------- */
+
+/* Default: Show Terminal, Hide Modern */
+.terminal-only {
+  display: block;
+}
+
+.cli-section-title .terminal-only,
+.cli-section-title .modern-only,
+.cli-btn-text .terminal-only,
+.cli-btn-text .modern-only,
+.cli-hint .terminal-only,
+.cli-hint .modern-only,
+.cli-footer-text .terminal-only,
+.cli-footer-text .modern-only {
+  display: inline-flex;
+  align-items: center;
+}
+
+.modern-only {
+  display: none !important;
+}
+
+/* In Warm/Oblivion Mode: Show Modern, Hide Terminal */
+.visual-warm .terminal-only,
+.visual-oblivion .terminal-only {
+  display: none !important;
+}
+
+.visual-warm .modern-only,
+.visual-oblivion .modern-only {
+  display: flex !important;
+}
+
+/* Specific display types for modern elements */
+.visual-warm div.modern-only,
+.visual-oblivion div.modern-only {
+  display: flex !important;
+  flex-direction: column;
+}
+
+.visual-warm span.modern-only,
+.visual-oblivion span.modern-only {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Hide other CLI artifacts in Warm Mode */
+.visual-warm .cli-prompt,
+.visual-warm .cli-cursor,
+.visual-warm .cli-commands-header .cli-prompt,
+.visual-warm .cli-input-prompt,
+.visual-warm .cli-placeholder-measure,
+.visual-oblivion .cli-prompt,
+.visual-oblivion .cli-cursor,
+.visual-oblivion .cli-commands-header .cli-prompt,
+.visual-oblivion .cli-input-prompt,
+.visual-oblivion .cli-placeholder-measure {
+  display: none !important;
+}
+
+/* Adjust input container for Warm Mode */
+.visual-warm .cli-input-wrapper,
+.visual-oblivion .cli-input-wrapper {
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Keep base input colors; only adjust typography elsewhere */
+
+/* Modern Welcome Header Styles */
+.welcome-header-modern {
+  margin-bottom: 40px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.modern-logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.modern-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.modern-title-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.visual-oblivion .modern-title-container {
+  padding-top: 4px;
+}
+
+.modern-title {
+  font-family: var(--font-ui);
+  font-weight: 700;
+  font-size: 24px;
+  color: var(--color-text);
+  letter-spacing: -0.5px;
+  line-height: 1.1;
+}
+
+.modern-version {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  font-family: var(--font-content);
+  margin-top: 2px;
+}
+
+.modern-subtitle {
+  font-family: var(--font-ui);
+  font-size: 16px;
+  color: var(--color-text-secondary);
+  max-width: 500px;
+  margin: 0 auto;
+  line-height: 1.5;
+}
+
+/* Quick Start Grid - Modern Style Adjustments */
+.visual-warm .cli-commands-header,
+.visual-oblivion .cli-commands-header {
+  border-bottom: none;
+  margin-bottom: 16px;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding-bottom: 0;
+}
+
+.visual-warm .quick-start-card,
+.visual-oblivion .quick-start-card {
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease;
+}
+
+.visual-warm .quick-start-card:hover,
+.visual-oblivion .quick-start-card:hover {
+  transform: translateY(-2px);
+}
+
+.visual-warm .quick-start-icon,
+.visual-oblivion .quick-start-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+  opacity: 1;
+}
+
+.visual-warm .quick-start-title,
+.visual-oblivion .quick-start-title {
+  font-family: var(--font-ui);
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.visual-warm .quick-start-desc,
+.visual-oblivion .quick-start-desc {
+  font-family: var(--font-ui);
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+
+
+/* Rounded avatars/icons in warm style */
+.visual-oblivion .avatar,
+.visual-oblivion .model-icon {
+  border-radius: 50%;
+}
+
+
+
 /* ============================================
    Accent Color Themes
    ============================================ */
@@ -170,15 +413,41 @@
 }
 
 /* Light theme adjustments for accent colors */
-.theme-light.accent-cyan { --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.25); }
-.theme-light.accent-blue { --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25); }
-.theme-light.accent-purple { --shadow-glow: 0 0 20px rgba(167, 139, 250, 0.25); }
-.theme-light.accent-pink { --shadow-glow: 0 0 20px rgba(244, 114, 182, 0.25); }
-.theme-light.accent-rose { --shadow-glow: 0 0 20px rgba(251, 113, 133, 0.25); }
-.theme-light.accent-orange { --shadow-glow: 0 0 20px rgba(251, 146, 60, 0.25); }
-.theme-light.accent-green { --shadow-glow: 0 0 20px rgba(52, 211, 153, 0.25); }
-.theme-light.accent-teal { --shadow-glow: 0 0 20px rgba(45, 212, 191, 0.25); }
-.theme-light.accent-coral { --shadow-glow: 0 0 20px rgba(255, 107, 107, 0.25); }
+.theme-light.accent-cyan {
+  --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.25);
+}
+
+.theme-light.accent-blue {
+  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);
+}
+
+.theme-light.accent-purple {
+  --shadow-glow: 0 0 20px rgba(167, 139, 250, 0.25);
+}
+
+.theme-light.accent-pink {
+  --shadow-glow: 0 0 20px rgba(244, 114, 182, 0.25);
+}
+
+.theme-light.accent-rose {
+  --shadow-glow: 0 0 20px rgba(251, 113, 133, 0.25);
+}
+
+.theme-light.accent-orange {
+  --shadow-glow: 0 0 20px rgba(251, 146, 60, 0.25);
+}
+
+.theme-light.accent-green {
+  --shadow-glow: 0 0 20px rgba(52, 211, 153, 0.25);
+}
+
+.theme-light.accent-teal {
+  --shadow-glow: 0 0 20px rgba(45, 212, 191, 0.25);
+}
+
+.theme-light.accent-coral {
+  --shadow-glow: 0 0 20px rgba(255, 107, 107, 0.25);
+}
 
 /* ============================================
    Light Theme Component Overrides
@@ -536,12 +805,12 @@
   background: rgba(255, 255, 255, 0.6) !important;
 }
 
-.theme-light .cli-new-task-btn {
+.theme-light .cli-action-btn {
   background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.1) !important;
 }
 
-.theme-light .cli-new-task-btn:hover {
+.theme-light .cli-action-btn:hover {
   background: rgba(255, 255, 255, 1) !important;
   border-color: var(--color-accent) !important;
 }
@@ -712,7 +981,8 @@
   color: var(--color-accent-dark);
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -786,7 +1056,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px 8px 80px; /* Left padding for macOS window controls */
+  padding: 8px 16px 8px 80px;
+  /* Left padding for macOS window controls */
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
   color: white;
   font-size: 13px;
@@ -880,7 +1151,8 @@ a,
 }
 
 .app-layout.left-collapsed .main-header {
-  padding-left: 124px; /* Space for macOS window controls (80px) + sidebar toggle button (32px) + gap (12px) */
+  padding-left: 124px;
+  /* Space for macOS window controls (80px) + sidebar toggle button (32px) + gap (12px) */
 }
 
 .app-layout.right-collapsed .main-content {
@@ -947,7 +1219,8 @@ a,
 }
 
 .sidebar-header-top {
-  padding-top: 44px; /* Space for macOS traffic lights */
+  padding-top: 44px;
+  /* Space for macOS traffic lights */
 }
 
 .new-task-btn {
@@ -1251,7 +1524,8 @@ a,
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
   min-width: 0;
   position: relative;
-  padding-top: 32px; /* Space for title bar */
+  padding-top: 32px;
+  /* Space for title bar */
 }
 
 /* Removed: double-border effect - using single border only */
@@ -1453,8 +1727,15 @@ a,
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
 }
 
 .message-speak-btn svg {
@@ -1493,6 +1774,7 @@ a,
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -1778,7 +2060,7 @@ a,
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 12px;
   color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-subtle);
+  border: 1px solid var(--color-border);
 }
 
 .event-details pre {
@@ -1791,7 +2073,7 @@ a,
   font-size: 14px;
   line-height: 1.6;
   color: var(--color-text);
-  background: var(--color-bg-tertiary);
+  background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -1829,6 +2111,14 @@ a,
   color: var(--color-text);
 }
 
+.markdown-heading-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  transform: translateY(1px);
+}
+
 .markdown-content p {
   margin: 8px 0;
 }
@@ -2047,6 +2337,11 @@ a,
   border-radius: var(--radius-lg);
 }
 
+.input-container.drag-over {
+  outline: 1px dashed var(--color-border);
+  background: var(--color-bg-hover);
+}
+
 .input-row {
   display: flex;
   align-items: center;
@@ -2063,6 +2358,18 @@ a,
   outline: none;
 }
 
+.input-container .input-field,
+.input-container .input-textarea {
+  background: transparent;
+}
+
+.welcome-input-container .welcome-input,
+.welcome-input-container .input-textarea,
+.cli-input-container .cli-input,
+.cli-input-container .input-textarea {
+  background: transparent;
+}
+
 .input-field::placeholder {
   color: var(--color-text-muted);
 }
@@ -2102,6 +2409,40 @@ a,
   gap: 12px;
 }
 
+.attachment-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.attachment-btn svg {
+  stroke: currentColor;
+  flex-shrink: 0;
+}
+
+.attachment-btn-left {
+  flex: 0 0 auto;
+  margin-right: 2px;
+}
+
+.attachment-btn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+}
+
+.attachment-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .input-add-btn {
   width: 28px;
   height: 28px;
@@ -2121,50 +2462,125 @@ a,
   color: var(--color-text);
 }
 
-.model-selector {
+.attachment-panel {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto 10px;
   display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 10px;
-  height: 36px;
-  background: transparent;
-  border: none;
-  color: var(--color-text-secondary);
-  font-size: 12px;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.15s ease;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.model-selector:hover {
-  background: var(--color-bg-hover);
+.attachment-error {
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.25);
   color: var(--color-text);
+  font-size: 12px;
 }
 
-/* Voice Input Button */
-.voice-input-btn {
-  position: relative;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  cursor: pointer;
+.attachment-list {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  overflow: hidden;
-}
-
-.voice-input-btn svg {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.voice-input-btn:hover:not(:disabled) {
+.attachment-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  max-width: 260px;
+}
+
+.attachment-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+
+.attachment-size {
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.attachment-remove {
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.attachment-remove:hover {
+  color: var(--color-text);
+}
+
+.attachment-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 10px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s ease;
+}
+
+.model-selector:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+}
+
+/* Voice Input Button */
+.voice-input-btn {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.voice-input-btn svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.voice-input-btn:hover:not(:disabled) {
   border-color: var(--color-accent);
   color: var(--color-accent);
   background: var(--color-accent-subtle);
@@ -2202,9 +2618,12 @@ a,
 }
 
 @keyframes voice-pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4);
   }
+
   50% {
     box-shadow: 0 0 0 8px rgba(248, 113, 113, 0);
   }
@@ -2214,6 +2633,7 @@ a,
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -2325,6 +2745,7 @@ a,
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -2411,11 +2832,16 @@ a,
   padding: 8px 10px;
   margin-bottom: 6px;
   border-bottom: 1px solid var(--color-border);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--color-bg-elevated);
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   margin: -6px -6px 6px -6px;
 }
 
+.visual-oblivion .model-dropdown-search {
+  background: var(--color-bg-primary);
+  border-bottom-color: var(--color-border);
+}
+
 .model-dropdown-search svg {
   flex-shrink: 0;
   opacity: 0.5;
@@ -2439,6 +2865,30 @@ a,
   overflow-y: auto;
 }
 
+.model-dropdown-footer {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.model-dropdown-provider-btn {
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-subtle);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.model-dropdown-provider-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-text);
+  background: var(--color-bg-hover);
+}
+
 .model-dropdown-no-results {
   padding: 16px 12px;
   text-align: center;
@@ -2709,7 +3159,8 @@ a,
   border-left: 1px solid var(--color-border-subtle);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: relative;
   padding-top: 38px;
 }
@@ -3142,8 +3593,15 @@ a,
 }
 
 @keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
 }
 
 .cli-workspace-list {
@@ -3625,7 +4083,7 @@ button {
   transition: background 0.2s ease;
 }
 
-*:hover > ::-webkit-scrollbar-thumb,
+*:hover> ::-webkit-scrollbar-thumb,
 *::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.08);
 }
@@ -3892,7 +4350,7 @@ button {
   align-items: center;
 }
 
-.mention-autocomplete-wrapper:focus-within ~ .cli-cursor {
+.mention-autocomplete-wrapper:focus-within~.cli-cursor {
   opacity: 1;
 }
 
@@ -3996,13 +4454,21 @@ button {
   font-size: 14px;
 }
 
-.cli-input:focus ~ .cli-cursor {
+.cli-input:focus~.cli-cursor {
   opacity: 1;
 }
 
 @keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 /* CLI Input Footer */
@@ -4055,6 +4521,11 @@ button {
   border-radius: var(--radius-lg);
 }
 
+.welcome-input-container.drag-over {
+  outline: 1px dashed var(--color-border);
+  background: var(--color-bg-hover);
+}
+
 .welcome-input {
   width: 100%;
   padding: 14px 16px;
@@ -4154,9 +4625,10 @@ button {
 }
 
 .workspace-dropdown-list {
-  max-height: 240px;
+  max-height: 320px;
   overflow-y: auto;
   padding: 4px 0;
+  overscroll-behavior: contain;
 }
 
 .workspace-dropdown-item {
@@ -4307,6 +4779,7 @@ button {
 .input-below-actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   margin-top: 8px;
   margin-left: 12px;
@@ -5363,11 +5836,18 @@ button {
 
 .test-result {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   padding: 12px 14px;
   border-radius: var(--radius-md);
   font-size: 13px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.test-result svg {
+  flex-shrink: 0;
+  margin-top: 2px;
 }
 
 .test-result.success {
@@ -5951,6 +6431,8 @@ button {
   padding: 6px 10px;
   border-radius: var(--radius-sm);
   font-size: 11px;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .test-result-inline.success {
@@ -6044,6 +6526,12 @@ button {
   border-top: 1px solid var(--color-border-subtle);
 }
 
+.provider-config-panel .provider-config-form {
+  padding: 16px;
+  background: transparent;
+  border-top: none;
+}
+
 .provider-config-form .provider-description {
   font-size: 12px;
   color: var(--color-text-muted);
@@ -6499,20 +6987,41 @@ button {
   letter-spacing: 1px;
 }
 
-/* CLI New Task Button */
-.cli-new-task-btn {
+/* CLI Action Buttons */
+.cli-header-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cli-action-btn {
+  width: 100%;
   display: flex;
   align-items: center;
-  gap: 6px;
-  background: rgba(0, 0, 0, 0.3) !important;
+  gap: 8px;
+  background: transparent !important;
   border: 1px solid var(--color-border-subtle) !important;
+  border-radius: var(--radius-md);
   font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
-  padding: 10px 14px !important;
+  padding: 8px 12px !important;
+  color: var(--color-text-muted) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.2px;
+  transition: all 0.15s ease;
 }
 
-.cli-new-task-btn:hover {
+.cli-action-btn:hover {
   border-color: var(--color-accent) !important;
-  background: rgba(0, 0, 0, 0.4) !important;
+  color: var(--color-text) !important;
+  background: rgba(0, 0, 0, 0.12) !important;
+}
+
+.cli-new-task-btn {
+  justify-content: flex-start;
+}
+
+.cli-mission-control-btn {
+  justify-content: flex-start;
 }
 
 .cli-btn-bracket {
@@ -6524,6 +7033,12 @@ button {
   font-weight: 600;
 }
 
+.cli-btn-accent {
+  color: var(--color-accent);
+  font-weight: 700;
+  letter-spacing: 0.6px;
+}
+
 .cli-btn-text {
   color: var(--color-text);
 }
@@ -6849,6 +7364,12 @@ button {
   min-height: 48px !important;
 }
 
+.cli-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .cli-footer-info {
   display: flex;
   align-items: center;
@@ -7274,25 +7795,8 @@ button {
   flex-direction: column;
   height: 100%;
   background: var(--color-bg-primary);
-  padding-top: 38px; /* Space for title bar buttons */
-}
-
-.settings-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px 80px; /* Symmetric padding for macOS window controls */
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  -webkit-app-region: drag;
-}
-
-.settings-page-header h1 {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-  -webkit-app-region: no-drag;
+  padding-top: 38px;
+  /* Space for title bar buttons */
 }
 
 /* Back button styled like a nav item */
@@ -7300,14 +7804,14 @@ button {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 6px;
   width: 100%;
-  padding: 10px 12px;
+  padding: 6px 8px;
   background: transparent;
   border: 2px solid transparent;
   border-radius: var(--radius-md);
   color: var(--color-text-secondary);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   text-align: left;
   cursor: pointer;
@@ -7321,8 +7825,8 @@ button {
 
 .settings-back-btn svg {
   flex-shrink: 0;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   opacity: 0.7;
 }
 
@@ -7341,7 +7845,7 @@ button {
 }
 
 .theme-light .settings-sidebar {
-  border-right-color: rgba(0, 0, 0, 0.12);
+  border-color: rgba(0, 0, 0, 0.12);
 }
 
 .settings-page-layout {
@@ -7353,13 +7857,37 @@ button {
 .settings-sidebar {
   width: 220px;
   padding: 16px;
-  border-right: 1px solid var(--color-border);
+  margin: 16px 0 16px 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-sm);
   background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
+.settings-content-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 16px 16px 16px 12px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.settings-sidebar-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 4px;
+  -webkit-app-region: drag;
+}
+
 .settings-sidebar-search {
   display: flex;
   align-items: center;
@@ -7494,8 +8022,9 @@ button {
   flex: 1;
   padding: 24px 32px;
   overflow-y: auto;
-  max-width: 800px;
   position: relative;
+  width: 100%;
+  max-width: none;
 }
 
 /* Mission Control needs full width - override constraints */
@@ -7505,6 +8034,7 @@ button {
   overflow: hidden;
 }
 
+
 .settings-actions {
   display: flex;
   gap: 12px;
@@ -7519,14 +8049,733 @@ button {
   font-size: 14px;
 }
 
-/* Ensure settings sections look good in full-page view */
-.settings-page .settings-section {
-  margin-bottom: 24px;
-  padding-bottom: 0;
+/* Normalize controls in Settings to match LLM Provider styling */
+.settings-page :where(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]) {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: 13px;
+  outline: none;
+  transition: all 0.2s ease;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.settings-page .settings-section:last-of-type {
-  margin-bottom: 0;
+.settings-page :where(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]):hover {
+  border-color: var(--color-border-light);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.settings-page :where(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]):focus {
+  border-color: var(--color-accent);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-accent-subtle);
+}
+
+.settings-page :where(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"])::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* Preserve compact sidebar search styling */
+.settings-sidebar-search input {
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  width: auto;
+  font-size: 13px;
+}
+
+.settings-sidebar-search input:focus {
+  box-shadow: none;
+}
+
+.settings-page :where(select) {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: 13px;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.settings-page :where(select):hover {
+  border-color: var(--color-border-light);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.settings-page :where(select):focus {
+  border-color: var(--color-accent);
+}
+
+.settings-page :where(textarea) {
+  width: 100%;
+  min-height: 80px;
+  padding: 10px 12px;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.settings-page :where(textarea):focus {
+  border-color: var(--color-accent);
+}
+
+.settings-page .btn-primary {
+  background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
+  color: #1a1a1a;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.settings-page .btn-primary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
+  pointer-events: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.settings-page .btn-primary:hover:not(:disabled) {
+  background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.settings-page .btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.settings-page .btn-secondary {
+  background: rgba(70, 70, 75, 0.8);
+  color: var(--color-text);
+  border: 1px solid var(--color-border-light);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.settings-page .btn-secondary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: var(--gradient-glossy);
+  pointer-events: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.settings-page .btn-secondary:hover:not(:disabled) {
+  background: rgba(85, 85, 90, 0.9);
+  border-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+.settings-page .btn-secondary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.settings-page .btn-danger {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--color-error);
+}
+
+.settings-page .btn-danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.5);
+}
+
+.settings-page .btn-sm,
+.settings-page .btn-xs {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.settings-page .btn-primary,
+.settings-page .btn-secondary,
+.settings-page .btn-danger {
+  position: relative;
+  overflow: hidden;
+}
+
+.settings-section h2 {
+  margin: 0 0 4px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.settings-section h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 8px;
+}
+
+.button-with-icon {
+  gap: 8px;
+}
+
+.settings-card {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-glass);
+  padding: 16px;
+}
+
+.provider-config-panel {
+  padding: 0;
+  margin-top: 12px;
+}
+
+.settings-card.is-selected {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
+}
+
+.settings-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.settings-badge--success {
+  background: var(--color-success-subtle);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.settings-badge--warning {
+  background: var(--color-warning-subtle);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+.settings-badge--error {
+  background: var(--color-error-subtle);
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+.settings-badge--neutral {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border-subtle);
+  color: var(--color-text-muted);
+}
+
+.settings-badge--outline {
+  background: transparent;
+  border-color: var(--color-border-subtle);
+  color: var(--color-text-secondary);
+}
+
+.settings-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+}
+
+.settings-alert-error {
+  border-color: var(--color-error);
+  background: var(--color-error-subtle);
+  color: var(--color-error);
+}
+
+.settings-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--color-text-muted);
+  border: 1px dashed var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+}
+
+.scheduled-tasks-add {
+  margin-bottom: 24px;
+}
+
+.stat-value--success {
+  color: var(--color-success);
+}
+
+.stat-value--warning {
+  color: var(--color-warning);
+}
+
+.stat-value--error {
+  color: var(--color-error);
+}
+
+/* SkillHub Settings */
+.skillhub-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skillhub-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+
+.skillhub-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skillhub-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.skillhub-card {
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.skillhub-card.is-selected {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
+}
+
+.skillhub-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.skillhub-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.skillhub-card-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.skillhub-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.skillhub-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.skillhub-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.skillhub-description {
+  margin-top: 4px;
+}
+
+.skillhub-meta {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--color-text-muted);
+}
+
+.skillhub-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.skillhub-warnings {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-warning);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.skillhub-group {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+}
+
+.skillhub-group summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.skillhub-group-title {
+  text-transform: capitalize;
+}
+
+.skillhub-group summary::-webkit-details-marker {
+  display: none;
+}
+
+.skillhub-group[open] summary {
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.skillhub-group-content {
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skillhub-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.skillhub-group-item:last-child {
+  border-bottom: none;
+}
+
+.skillhub-group-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+/* Nodes Settings */
+.nodes-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.nodes-empty-card {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  padding: 16px;
+}
+
+.nodes-empty-card h4 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.nodes-empty-card ol {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.nodes-connection-note {
+  margin-top: 12px;
+  padding: 10px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  color: var(--color-text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nodes-connection-note code {
+  font-family: 'SF Mono', monospace;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.nodes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nodes-card {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-glass);
+  padding: 16px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.nodes-card:hover {
+  border-color: var(--color-border);
+}
+
+.nodes-card.is-active {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent-subtle);
+}
+
+.nodes-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.nodes-card-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.nodes-platform-icon {
+  font-size: 20px;
+}
+
+.nodes-card-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.nodes-card-subtitle {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.nodes-status {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.nodes-status.foreground {
+  background: var(--color-success-subtle);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.nodes-status.background {
+  background: var(--color-warning-subtle);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+.nodes-capabilities {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.nodes-capability {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-text-secondary);
+}
+
+.nodes-capability.denied {
+  opacity: 0.6;
+}
+
+.nodes-details {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nodes-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 16px;
+  font-size: 12px;
+}
+
+.nodes-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nodes-detail-label {
+  font-size: 11px;
+  color: var(--color-text-muted);
+}
+
+.nodes-detail-value {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+}
+
+.nodes-detail-mono {
+  font-family: 'SF Mono', monospace;
+}
+
+.nodes-test h5 {
+  margin: 0 0 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+}
+
+.nodes-test-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.nodes-command-btn {
+  padding: 6px 8px;
+  font-size: 11px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.nodes-command-btn:hover:not(:disabled) {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.nodes-command-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.nodes-result {
+  padding: 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+  font-size: 12px;
+}
+
+.nodes-result.success {
+  background: var(--color-success-subtle);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.nodes-result.error {
+  background: var(--color-error-subtle);
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+.nodes-result-title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.nodes-result-error {
+  margin-top: 6px;
+  color: var(--color-error);
+}
+
+.nodes-result-pre {
+  margin-top: 8px;
+  padding: 8px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  max-height: 160px;
+  overflow: auto;
+  color: var(--color-text-secondary);
+}
+
+.nodes-summary {
+  padding: 10px 12px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.nodes-summary-count,
+.nodes-summary-highlight {
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Ensure settings sections look good in full-page view */
+.settings-page .settings-section {
+  margin-bottom: 24px;
+  padding-bottom: 0;
+}
+
+.settings-page .settings-section:last-of-type {
+  margin-bottom: 0;
 }
 
 .settings-page .provider-options {
@@ -7614,6 +8863,80 @@ button {
   background: rgba(239, 68, 68, 0.08);
 }
 
+.notion-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-glass);
+  color: var(--color-text-secondary);
+}
+
+.notion-status-badge.connected {
+  color: var(--color-success, #22c55e);
+  border-color: rgba(34, 197, 94, 0.35);
+  background: rgba(34, 197, 94, 0.08);
+}
+
+.notion-status-badge.configured {
+  color: var(--color-text-secondary);
+  border-color: var(--color-border);
+}
+
+.notion-status-badge.missing {
+  color: var(--color-error, #ef4444);
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.box-status-badge,
+.onedrive-status-badge,
+.google-workspace-status-badge,
+.dropbox-status-badge,
+.sharepoint-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-glass);
+  color: var(--color-text-secondary);
+}
+
+.box-status-badge.connected,
+.onedrive-status-badge.connected,
+.google-workspace-status-badge.connected,
+.dropbox-status-badge.connected,
+.sharepoint-status-badge.connected {
+  color: var(--color-success, #22c55e);
+  border-color: rgba(34, 197, 94, 0.35);
+  background: rgba(34, 197, 94, 0.08);
+}
+
+.box-status-badge.configured,
+.onedrive-status-badge.configured,
+.google-workspace-status-badge.configured,
+.dropbox-status-badge.configured,
+.sharepoint-status-badge.configured {
+  color: var(--color-text-secondary);
+  border-color: var(--color-border);
+}
+
+.box-status-badge.missing,
+.onedrive-status-badge.missing,
+.google-workspace-status-badge.missing,
+.dropbox-status-badge.missing,
+.sharepoint-status-badge.missing {
+  color: var(--color-error, #ef4444);
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+}
+
 .settings-toggle {
   position: relative;
   display: inline-block;
@@ -7653,12 +8976,12 @@ button {
   transition: 0.2s;
 }
 
-.settings-toggle input:checked + .toggle-slider {
+.settings-toggle input:checked+.toggle-slider {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
 }
 
-.settings-toggle input:checked + .toggle-slider::before {
+.settings-toggle input:checked+.toggle-slider::before {
   transform: translateX(20px);
   background-color: white;
 }
@@ -7754,8 +9077,8 @@ button {
 .goal-mode-section {
   margin-top: 12px;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
 }
 
@@ -7795,8 +9118,8 @@ button {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   padding: 8px 12px;
 }
@@ -7837,8 +9160,8 @@ button {
 .goal-mode-attempts input[type="number"] {
   width: 50px;
   padding: 4px 8px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font-size: 13px;
@@ -7914,11 +9237,36 @@ button {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+.theme-option-preview.terminal {
+  background: #000000;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.theme-option-preview.terminal .code-line {
+  background: #33ff00;
+  height: 2px;
+  margin-bottom: 4px;
+  box-shadow: 0 0 4px #33ff00;
+}
+
 .theme-option-preview.system {
   background: linear-gradient(135deg, #1e1e1e 0%, #1e1e1e 50%, #ffffff 50%, #f5f5f7 100%);
   border: 1px solid rgba(128, 128, 128, 0.2);
 }
 
+.theme-option-preview.warm {
+  background: linear-gradient(135deg, #fff1e6 0%, #f4d9c8 100%);
+  border: 1px solid rgba(120, 90, 70, 0.18);
+}
+
+.theme-option-preview.warm .ui-line {
+  background: rgba(120, 90, 70, 0.35);
+  height: 3px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+
 .theme-option-preview-line {
   position: absolute;
   left: 8px;
@@ -7934,9 +9282,20 @@ button {
   background: rgba(0, 0, 0, 0.15);
 }
 
-.theme-option-preview-line:nth-child(1) { top: 10px; width: 28px; }
-.theme-option-preview-line:nth-child(2) { top: 18px; width: 40px; }
-.theme-option-preview-line:nth-child(3) { top: 26px; width: 20px; }
+.theme-option-preview-line:nth-child(1) {
+  top: 10px;
+  width: 28px;
+}
+
+.theme-option-preview-line:nth-child(2) {
+  top: 18px;
+  width: 40px;
+}
+
+.theme-option-preview-line:nth-child(3) {
+  top: 26px;
+  width: 20px;
+}
 
 .theme-option-label {
   font-size: 13px;
@@ -7986,31 +9345,54 @@ button {
   box-shadow: var(--shadow-sm);
 }
 
-.color-swatch::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
+.color-swatch::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
+}
+
+.color-option.selected .color-swatch::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  opacity: 0.3;
+}
+
+.color-swatch.cyan {
+  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
+}
+
+.color-swatch.blue {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+}
+
+.color-swatch.purple {
+  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
+}
+
+.color-swatch.pink {
+  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
+}
+
+.color-swatch.rose {
+  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
+}
+
+.color-swatch.orange {
+  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
 }
 
-.color-option.selected .color-swatch::before {
-  content: '';
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  opacity: 0.3;
+.color-swatch.green {
+  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
 }
 
-.color-swatch.cyan { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%); }
-.color-swatch.blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
-.color-swatch.purple { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
-.color-swatch.pink { background: linear-gradient(135deg, #f472b6 0%, #db2777 100%); }
-.color-swatch.rose { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); }
-.color-swatch.orange { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
-.color-swatch.green { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
-.color-swatch.teal { background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); }
+.color-swatch.teal {
+  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
+}
 
 .color-label {
   font-size: 11px;
@@ -8273,6 +9655,7 @@ button {
     opacity: 0;
     transform: translateX(100%);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -8408,6 +9791,7 @@ button {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -8793,17 +10177,17 @@ button {
   transition: all 0.2s ease;
 }
 
-.skill-toggle input:checked + .skill-toggle-slider {
+.skill-toggle input:checked+.skill-toggle-slider {
   background: var(--color-primary);
   border-color: var(--color-primary);
 }
 
-.skill-toggle input:checked + .skill-toggle-slider:before {
+.skill-toggle input:checked+.skill-toggle-slider:before {
   transform: translateX(18px);
   background: white;
 }
 
-.skill-toggle input:focus + .skill-toggle-slider {
+.skill-toggle input:focus+.skill-toggle-slider {
   box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3);
 }
 
@@ -9208,12 +10592,12 @@ button {
   border-radius: 50%;
 }
 
-.toggle-switch input:checked + .toggle-slider {
+.toggle-switch input:checked+.toggle-slider {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
 }
 
-.toggle-switch input:checked + .toggle-slider:before {
+.toggle-switch input:checked+.toggle-slider:before {
   background-color: white;
   transform: translateX(18px);
 }
@@ -9388,6 +10772,26 @@ button {
   overflow-y: auto;
 }
 
+.connector-setup-modal .settings-field label {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 6px;
+}
+
+.connector-mode-toggle {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.connector-setup-actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .mcp-modal-wide {
   max-width: 500px;
 }
@@ -9740,12 +11144,12 @@ button {
   border-radius: 50%;
 }
 
-.builtin-tool-toggle input:checked + .builtin-tool-toggle-slider {
+.builtin-tool-toggle input:checked+.builtin-tool-toggle-slider {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
 }
 
-.builtin-tool-toggle input:checked + .builtin-tool-toggle-slider:before {
+.builtin-tool-toggle input:checked+.builtin-tool-toggle-slider:before {
   transform: translateX(18px);
   background-color: white;
 }
@@ -9767,6 +11171,53 @@ button {
   color: var(--color-text);
 }
 
+.builtin-tool-advanced {
+  border-top: 1px solid var(--color-border);
+  padding: 12px 16px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.builtin-tool-advanced-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.builtin-tool-advanced-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.builtin-tool-advanced-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.builtin-tool-advanced-hint {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+.builtin-tool-timeout-input {
+  width: 110px;
+  padding: 4px 6px;
+  font-size: 12px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+}
+
+.builtin-tool-timeout-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .builtin-tool-list {
   padding: 0 16px 16px;
   display: flex;
@@ -10212,6 +11663,7 @@ button {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -10515,7 +11967,9 @@ button {
 }
 
 @keyframes file-viewer-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Error state */
@@ -11042,8 +12496,15 @@ button {
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
 }
 
 .command-output-content {
@@ -11217,8 +12678,15 @@ button {
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
 }
 
 .command-force-kill-btn {
@@ -11309,6 +12777,46 @@ button {
   gap: 8px;
 }
 
+.canvas-browser-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.canvas-browser-input {
+  flex: 1;
+  min-width: 160px;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 6px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 12px;
+}
+
+.canvas-browser-btn {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.canvas-browser-btn:hover {
+  border-color: var(--color-border);
+}
+
+.canvas-browser-btn.ghost {
+  background: transparent;
+  color: var(--color-text-muted);
+}
+
 .canvas-preview-container.minimized .canvas-preview-header {
   border-bottom: none;
 }
@@ -11529,8 +13037,13 @@ button {
 }
 
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Light theme canvas preview adjustments */
@@ -11555,6 +13068,81 @@ button {
   background: rgba(255, 255, 255, 0.9);
 }
 
+.browser-view {
+  height: calc(100vh - 40px);
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.browser-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.browser-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-subtle);
+  background: transparent;
+  color: var(--color-text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.browser-toolbar-btn.primary {
+  background: var(--color-accent);
+  border-color: transparent;
+  color: #0b0b0b;
+}
+
+.browser-toolbar-btn:hover {
+  border-color: var(--color-border);
+}
+
+.browser-url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.browser-url input {
+  flex: 1;
+  min-width: 200px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 12px;
+}
+
+.browser-surface {
+  flex: 1;
+  background: #111;
+}
+
+.browser-webview {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.browser-empty {
+  padding: 20px;
+  color: var(--color-text-muted);
+}
+
 /* Canvas preview quick wins - additional styles */
 .canvas-preview-container:focus {
   outline: 2px solid var(--color-accent);
@@ -11572,10 +13160,25 @@ button {
 }
 
 @keyframes fadeInOut {
-  0% { opacity: 0; transform: translateY(-4px); }
-  15% { opacity: 1; transform: translateY(0); }
-  85% { opacity: 1; transform: translateY(0); }
-  100% { opacity: 0; transform: translateY(-4px); }
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  15% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  85% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }
 
 .canvas-action-btn.paused {
@@ -11745,8 +13348,13 @@ button {
 }
 
 @keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* Refresh rate selector */
@@ -12783,6 +14391,7 @@ button {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -12954,14 +14563,37 @@ button {
   border-radius: var(--radius-sm);
 }
 
-.onboarding-color-swatch.cyan { background: #22d3ee; }
-.onboarding-color-swatch.blue { background: #3b82f6; }
-.onboarding-color-swatch.purple { background: #a78bfa; }
-.onboarding-color-swatch.pink { background: #f472b6; }
-.onboarding-color-swatch.rose { background: #fb7185; }
-.onboarding-color-swatch.orange { background: #fb923c; }
-.onboarding-color-swatch.green { background: #34d399; }
-.onboarding-color-swatch.teal { background: #2dd4bf; }
+.onboarding-color-swatch.cyan {
+  background: #22d3ee;
+}
+
+.onboarding-color-swatch.blue {
+  background: #3b82f6;
+}
+
+.onboarding-color-swatch.purple {
+  background: #a78bfa;
+}
+
+.onboarding-color-swatch.pink {
+  background: #f472b6;
+}
+
+.onboarding-color-swatch.rose {
+  background: #fb7185;
+}
+
+.onboarding-color-swatch.orange {
+  background: #fb923c;
+}
+
+.onboarding-color-swatch.green {
+  background: #34d399;
+}
+
+.onboarding-color-swatch.teal {
+  background: #2dd4bf;
+}
 
 /* Provider grid */
 .onboarding-provider-grid {
@@ -13401,7 +15033,8 @@ button {
 /* ============ Voice Settings Styles ============ */
 
 .voice-settings {
-  max-width: 800px;
+  max-width: none;
+  width: 100%;
 }
 
 .voice-status {
@@ -13437,8 +15070,15 @@ button {
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
 }
 
 /* Provider Options */
@@ -13526,16 +15166,17 @@ button {
   align-items: center;
   gap: 4px;
   padding: 12px 8px;
-  background: var(--color-bg-secondary);
-  border: 2px solid transparent;
-  border-radius: 8px;
+  background: var(--color-bg-glass);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: all 0.15s ease;
   text-align: center;
 }
 
 .voice-option:hover {
-  background: var(--color-bg-tertiary);
+  background: var(--color-bg-glass-hover);
+  border-color: var(--color-border);
 }
 
 .voice-option.selected {
@@ -13545,7 +15186,7 @@ button {
 
 .voice-option .voice-name {
   font-weight: 500;
-  font-size: 14px;
+  font-size: 13px;
   color: var(--color-text-primary);
 }
 
@@ -13629,9 +15270,18 @@ button {
   pointer-events: none;
 }
 
-@keyframes voice-pulse {
-  0%, 100% { opacity: 0; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.1); }
+@keyframes voice-pulse {
+
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+  }
 }
 
 .voice-indicator-transcript {
@@ -13679,8 +15329,13 @@ button {
 }
 
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Input with button */
@@ -13766,11 +15421,11 @@ button {
   border-radius: 50%;
 }
 
-.toggle-switch input:checked + .toggle-slider {
+.toggle-switch input:checked+.toggle-slider {
   background-color: var(--color-accent);
 }
 
-.toggle-switch input:checked + .toggle-slider:before {
+.toggle-switch input:checked+.toggle-slider:before {
   transform: translateX(20px);
 }
 
@@ -13782,7 +15437,7 @@ button {
   gap: 16px;
 }
 
-.settings-header-row > div {
+.settings-header-row>div {
   flex: 1;
 }
 
@@ -13834,25 +15489,33 @@ button {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-/* ==================== MORE CHANNELS PANEL ==================== */
-.more-channels-panel {
+/* ==================== MORE CHANNELS / INTEGRATIONS PANEL ==================== */
+.more-channels-panel,
+.integrations-panel,
+.llm-provider-panel {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
-.more-channels-header h2 {
+.more-channels-header h2,
+.integrations-header h2,
+.llm-provider-header h2 {
   margin: 0 0 4px 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--color-text);
 }
 
-.more-channels-header .settings-description {
+.more-channels-header .settings-description,
+.integrations-header .settings-description,
+.llm-provider-header .settings-description {
   margin: 0;
 }
 
-.more-channels-tabs {
+.more-channels-tabs,
+.integrations-tabs,
+.llm-provider-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -13862,7 +15525,9 @@ button {
   border: 1px solid var(--color-border);
 }
 
-.more-channels-tab {
+.more-channels-tab,
+.integrations-tab,
+.llm-provider-tab {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -13878,33 +15543,53 @@ button {
   white-space: nowrap;
 }
 
-.more-channels-tab:hover {
+.more-channels-tab:hover,
+.integrations-tab:hover,
+.llm-provider-tab:hover {
   background: var(--color-bg-glass-hover);
   color: var(--color-text);
 }
 
-.more-channels-tab.active {
+.more-channels-tab.active,
+.integrations-tab.active,
+.llm-provider-tab.active {
   background: var(--color-accent-subtle);
   color: var(--color-text);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.more-channels-tab svg {
+.more-channels-tab svg,
+.integrations-tab svg,
+.llm-provider-tab svg {
   opacity: 0.6;
   flex-shrink: 0;
 }
 
-.more-channels-tab.active svg {
+.more-channels-tab.active svg,
+.integrations-tab.active svg,
+.llm-provider-tab.active svg {
   opacity: 1;
   color: var(--color-accent);
 }
 
-.more-channels-tab span {
+.more-channels-tab span,
+.integrations-tab span,
+.llm-provider-tab-label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.more-channels-content {
+.llm-provider-tab-status {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-success);
+  margin-left: 4px;
+}
+
+.more-channels-content,
+.integrations-content,
+.llm-provider-content {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg-tertiary);
@@ -13912,21 +15597,29 @@ button {
 }
 
 /* Light theme overrides */
-.theme-light .more-channels-tabs {
+.theme-light .more-channels-tabs,
+.theme-light .integrations-tabs,
+.theme-light .llm-provider-tabs {
   background: rgba(0, 0, 0, 0.03);
   border-color: rgba(0, 0, 0, 0.12);
 }
 
-.theme-light .more-channels-tab:hover {
+.theme-light .more-channels-tab:hover,
+.theme-light .integrations-tab:hover,
+.theme-light .llm-provider-tab:hover {
   background: rgba(0, 0, 0, 0.06);
 }
 
-.theme-light .more-channels-tab.active {
+.theme-light .more-channels-tab.active,
+.theme-light .integrations-tab.active,
+.theme-light .llm-provider-tab.active {
   background: white;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
-.theme-light .more-channels-content {
+.theme-light .more-channels-content,
+.theme-light .integrations-content,
+.theme-light .llm-provider-content {
   background: rgba(255, 255, 255, 0.6);
   border-color: rgba(0, 0, 0, 0.12);
 }
@@ -13979,10 +15672,13 @@ button {
 
 /* Awakening orb animations */
 @keyframes onboarding-breathe {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
     box-shadow: 0 0 60px var(--onboarding-glow);
   }
+
   50% {
     transform: scale(1.08);
     box-shadow: 0 0 100px var(--onboarding-glow-strong);
@@ -13994,6 +15690,7 @@ button {
     opacity: 0;
     transform: scale(0.3);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -14005,6 +15702,7 @@ button {
     opacity: 1;
     transform: scale(1);
   }
+
   100% {
     opacity: 0;
     transform: scale(0.5);
@@ -14050,6 +15748,7 @@ button {
     transform: scale(1);
     opacity: 0.6;
   }
+
   100% {
     transform: scale(2.5);
     opacity: 0;
@@ -14088,8 +15787,16 @@ button {
 
 /* Typewriter text */
 @keyframes onboarding-cursor-blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 .onboarding-typewriter {
@@ -14335,6 +16042,7 @@ button {
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -14402,11 +16110,9 @@ button {
   left: -50%;
   width: 200%;
   height: 200%;
-  background: radial-gradient(
-    ellipse at center,
-    rgba(255, 107, 107, 0.03) 0%,
-    transparent 50%
-  );
+  background: radial-gradient(ellipse at center,
+      rgba(255, 107, 107, 0.03) 0%,
+      transparent 50%);
   animation: onboarding-ambient-drift 20s ease-in-out infinite alternate;
 }
 
@@ -14414,6 +16120,7 @@ button {
   0% {
     transform: translate(0, 0);
   }
+
   100% {
     transform: translate(5%, 5%);
   }
@@ -14421,8 +16128,13 @@ button {
 
 /* Loading spinner for processing */
 @keyframes onboarding-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .onboarding-spinner {
@@ -14502,3 +16214,415 @@ button {
   color: #1a1817;
   border-color: rgba(255, 107, 107, 0.5);
 }
+
+/* ============================================
+   Studio Visual Theme Overrides (shape + typography only)
+   ============================================ */
+
+.visual-oblivion body {
+  font-family: var(--font-ui);
+  letter-spacing: 0.1px;
+}
+
+.visual-oblivion .cli-panel,
+.visual-oblivion .cli-sidebar,
+.visual-oblivion .cli-workspace-selector,
+.visual-oblivion .cli-workspace-content {
+  font-family: var(--font-ui);
+}
+
+.visual-oblivion .cli-input-wrapper {
+  padding: 12px 14px;
+}
+
+.visual-oblivion .cli-input {
+  font-family: var(--font-ui) !important;
+  font-size: 14px;
+}
+
+.visual-oblivion .cli-panel-title,
+.visual-oblivion .cli-sidebar-title,
+.visual-oblivion .cli-section-title,
+.visual-oblivion .cli-list-header {
+  font-family: var(--font-ui);
+  letter-spacing: 0.2px;
+  text-transform: none;
+}
+
+.visual-oblivion .cli-section-toggle .modern-only {
+  font-size: 12px;
+  line-height: 1;
+}
+
+.visual-oblivion .cli-section-header {
+  border-radius: var(--radius-md);
+  margin: 10px 10px 0;
+  padding: 10px 12px;
+}
+
+.visual-oblivion .cli-section-content {
+  padding: 12px 14px 16px;
+}
+
+.visual-oblivion .cli-progress-item,
+.visual-oblivion .cli-file-item,
+.visual-oblivion .cli-context-item,
+.visual-oblivion .cli-queue-item,
+.visual-oblivion .cli-task-item,
+.visual-oblivion .cli-workspace-item {
+  border-radius: var(--radius-md);
+}
+
+.visual-oblivion .cli-progress-item,
+.visual-oblivion .cli-file-item,
+.visual-oblivion .cli-context-item,
+.visual-oblivion .cli-queue-item {
+  padding: 8px 10px;
+  font-size: 12px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+}
+
+.visual-oblivion .cli-context-empty {
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.visual-oblivion .cli-task-item {
+  border-left: none;
+  margin: 6px 10px;
+  padding: 10px 12px !important;
+}
+
+.visual-oblivion .cli-task-title,
+.visual-oblivion .cli-queue-title,
+.visual-oblivion .cli-progress-text,
+.visual-oblivion .cli-file-name,
+.visual-oblivion .cli-context-file {
+  font-family: var(--font-ui);
+  font-size: 13px;
+}
+
+.visual-oblivion .cli-task-num,
+.visual-oblivion .cli-progress-num,
+.visual-oblivion .cli-item-num {
+  font-variant-numeric: tabular-nums;
+}
+
+.visual-oblivion .cli-task-num,
+.visual-oblivion .cli-progress-num,
+.visual-oblivion .cli-item-num {
+  display: none;
+}
+
+.visual-oblivion .cli-queue-status,
+.visual-oblivion .cli-progress-status,
+.visual-oblivion .cli-file-action {
+  font-family: var(--font-ui);
+}
+
+.visual-oblivion .cli-queue-status,
+.visual-oblivion .cli-progress-status,
+.visual-oblivion .cli-task-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.visual-oblivion .cli-file-action {
+  width: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.visual-oblivion .cli-queue-status {
+  font-size: 11px;
+}
+
+.visual-oblivion .queue-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  display: inline-block;
+  background: currentColor;
+}
+
+.visual-oblivion .queue-status-pill {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  border: 1px solid currentColor;
+  color: inherit;
+}
+
+.visual-oblivion .file-action-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  display: inline-block;
+  background: currentColor;
+}
+
+.visual-oblivion .cli-action-btn {
+  border-radius: var(--radius-md);
+  font-family: var(--font-ui) !important;
+  font-size: 12px !important;
+  text-transform: none;
+}
+
+.visual-oblivion .cli-more-btn,
+.visual-oblivion .cli-task-menu,
+.visual-oblivion .cli-menu-option {
+  font-family: var(--font-ui) !important;
+}
+
+.visual-oblivion .cli-menu-prefix {
+  display: none;
+}
+
+.visual-oblivion .cli-footer-label,
+.visual-oblivion .cli-footer-text {
+  font-family: var(--font-ui);
+  font-size: 12px;
+  letter-spacing: 0;
+}
+
+.visual-oblivion .main-footer,
+.visual-oblivion .input-container,
+.visual-oblivion .welcome-input-container,
+.visual-oblivion .welcome-input,
+.visual-oblivion .input-field,
+.visual-oblivion .input-textarea,
+.visual-oblivion .input-actions,
+.visual-oblivion .attachment-btn,
+.visual-oblivion .folder-selector,
+.visual-oblivion .shell-toggle,
+.visual-oblivion .model-selector,
+.visual-oblivion .skills-menu-btn,
+.visual-oblivion .voice-input-btn,
+.visual-oblivion .lets-go-btn,
+.visual-oblivion .goal-mode-section,
+.visual-oblivion .goal-mode-toggle,
+.visual-oblivion .goal-mode-label,
+.visual-oblivion .goal-mode-hint,
+.visual-oblivion .goal-mode-input,
+.visual-oblivion .goal-mode-attempts,
+.visual-oblivion .goal-mode-attempts label,
+.visual-oblivion .goal-mode-attempts input[type="number"],
+.visual-oblivion .workspace-dropdown,
+.visual-oblivion .workspace-dropdown-header,
+.visual-oblivion .workspace-dropdown-item,
+.visual-oblivion .workspace-item-name,
+.visual-oblivion .workspace-item-path,
+.visual-oblivion .skills-dropdown,
+.visual-oblivion .skills-dropdown-header,
+.visual-oblivion .skills-dropdown-search input,
+.visual-oblivion .skills-dropdown-item,
+.visual-oblivion .skills-dropdown-name,
+.visual-oblivion .skills-dropdown-desc,
+.visual-oblivion .skills-dropdown-footer,
+.visual-oblivion .skills-dropdown-create {
+  font-family: var(--font-ui);
+}
+
+.visual-oblivion .input-container,
+.visual-oblivion .welcome-input-container {
+  border-radius: var(--radius-xl);
+  overflow: visible;
+}
+
+.visual-oblivion .welcome-input-footer {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--radius-xl);
+  border-bottom-right-radius: var(--radius-xl);
+}
+
+.visual-oblivion .cli-input-container .welcome-input-footer,
+.visual-oblivion .welcome-input-footer {
+  background: var(--color-bg-primary);
+  border-top-color: var(--color-border);
+}
+
+.visual-oblivion .attachment-btn,
+.visual-oblivion .folder-selector,
+.visual-oblivion .shell-toggle,
+.visual-oblivion .model-selector,
+.visual-oblivion .skills-menu-btn,
+.visual-oblivion .voice-input-btn,
+.visual-oblivion .lets-go-btn {
+  border-radius: var(--radius-md);
+}
+
+.visual-oblivion .skills-menu-btn {
+  font-weight: 600;
+}
+
+.visual-oblivion .goal-mode-prompt {
+  display: none;
+}
+
+.visual-oblivion .goal-mode-command {
+  padding-left: 12px;
+}
+
+.visual-oblivion .goal-mode-section {
+  background: var(--color-bg-primary);
+  border-color: var(--color-border);
+}
+
+.visual-oblivion .goal-mode-command {
+  background: transparent;
+  border-color: var(--color-border);
+}
+
+.visual-oblivion .goal-mode-attempts input[type="number"] {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border);
+}
+
+.visual-oblivion .goal-mode-input {
+  font-family: var(--font-ui);
+}
+
+.visual-oblivion .workspace-dropdown-header,
+.visual-oblivion .skills-dropdown-header {
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.visual-oblivion .timeline-controls,
+.visual-oblivion .timeline-events,
+.visual-oblivion .event-title,
+.visual-oblivion .event-time,
+.visual-oblivion .event-details,
+.visual-oblivion .event-details pre,
+.visual-oblivion .event-details ul,
+.visual-oblivion .event-details li,
+.visual-oblivion .event-details.assistant-message,
+.visual-oblivion .markdown-content,
+.visual-oblivion .user-message-bubble,
+.visual-oblivion .user-message-content,
+.visual-oblivion .user-message-time {
+  font-family: var(--font-ui);
+}
+
+.visual-oblivion .event-details {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.visual-oblivion .event-details.assistant-message {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+
+.visual-oblivion .markdown-content ul {
+  list-style: none;
+  padding-left: 20px;
+}
+
+.visual-oblivion .markdown-content ul li {
+  position: relative;
+  padding-left: 12px;
+}
+
+.visual-oblivion .markdown-content ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.6em;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.6;
+}
+
+.visual-oblivion .verbose-toggle-btn {
+  font-family: var(--font-ui);
+  text-transform: none;
+  letter-spacing: 0;
+  border-radius: var(--radius-md);
+}
+
+.visual-oblivion .event-title,
+.visual-oblivion .event-time {
+  letter-spacing: 0;
+}
+
+.visual-oblivion .user-message-bubble {
+  border-radius: var(--radius-lg);
+}
+
+.visual-oblivion .cli-tree,
+.visual-oblivion .cli-ascii-box,
+.visual-oblivion .cli-ascii-logo,
+.visual-oblivion .cli-cursor-block {
+  display: none;
+}
+
+.visual-oblivion .cli-workspace-item {
+  padding: 10px 12px;
+  gap: 10px;
+}
+
+.visual-oblivion .task-tree-children {
+  margin-left: 6px;
+  padding-left: 12px;
+  border-left: 1px solid var(--color-border-subtle);
+}
+
+.visual-oblivion .cli-tree-prefix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  font-size: 0;
+  color: transparent;
+}
+
+.visual-oblivion .cli-tree-prefix::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  border: 1.5px solid var(--color-text-muted);
+  background: var(--color-bg-primary);
+  opacity: 0.8;
+}
+
+.visual-oblivion .cli-item-icon {
+  font-size: 16px;
+}
+
+.visual-oblivion .cli-item-name {
+  font-family: var(--font-ui);
+  font-size: 13px;
+}
+
+.visual-oblivion .cli-item-path {
+  font-family: var(--font-ui);
+  font-size: 11px;
+}
+
+.visual-oblivion .workspace-modern-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 6px;
+}
+
+.visual-oblivion .workspace-modern-subtitle {
+  font-size: 12px;
+  margin-top: 2px;
+}