@appoly/multiagent-chat 1.0.3 → 1.0.7

package/styles.css

@@ -5,41 +5,50 @@
   --bg-app: #0b0e11;
   --bg-surface: #15191e;
   --bg-surface-elevated: #1e2329;
-  
+
+  /* Terminal */
+  --terminal-bg: #0b0e11;
+  --terminal-fg: #e0e0e0;
+  --terminal-cursor: #e0e0e0;
+  --terminal-selection: #264f78;
+
   /* Colors - Accents */
   --accent-primary: #14f195; /* Mint/Teal */
   --accent-secondary: #22d3ee; /* Cyan */
   --accent-warning: #f59e0b; /* Amber */
   --accent-danger: #ff453a; /* Red */
-  
+
   /* Colors - Agent Identity */
   --color-claude: #3b82f6;
   --color-codex: #22c55e;
   --color-gemini: #f59e0b;
   --color-gpt: #10b981;
   --color-user: #94a3b8;
-  
+
   /* Text */
   --text-main: #e3e6eb;
   --text-muted: #94a3b8;
   --text-dim: #64748b;
-  
+
   /* Borders & Shadows */
   --border-subtle: rgba(255, 255, 255, 0.08);
   --border-strong: rgba(255, 255, 255, 0.15);
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
-  
+
   /* Spacing & Radius */
   --space-unit: 4px;
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
-  
+
   /* Transitions */
   --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Layout */
+  --sidebar-width: 260px;
 }
 
 * {
@@ -48,6 +57,10 @@
   box-sizing: border-box;
 }
 
+html {
+  background: var(--bg-app);
+}
+
 body {
   font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: var(--bg-app);
@@ -64,229 +77,195 @@ h1, h2, h3, h4, h5, h6 {
   letter-spacing: -0.02em;
 }
 
-/* Screen Management */
-.screen {
-  display: none;
-  width: 100%;
-  height: 100vh;
-  transition: opacity var(--transition-base);
-}
+/* ═══════════════════════════════════════════════════════════
+   App Layout - Sidebar + Main + Right Panel
+   ═══════════════════════════════════════════════════════════ */
 
-.screen.active {
+.app-layout {
   display: flex;
-  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
 }
 
-/* Challenge Input Screen */
-#challenge-screen {
-  justify-content: center;
-  align-items: center;
-  background-color: var(--bg-app);
-  background-image:
-    radial-gradient(at 0% 0%, rgba(20, 241, 149, 0.05) 0px, transparent 50%),
-    radial-gradient(at 100% 100%, rgba(34, 211, 238, 0.05) 0px, transparent 50%);
-}
+/* ═══════════════════════════════════════════════════════════
+   Sidebar
+   ═══════════════════════════════════════════════════════════ */
 
-/* Challenge Layout - Sidebar + Main Card */
-.challenge-layout {
-  display: flex;
-  gap: 24px;
-  width: 100%;
-  max-width: 1200px;
-  padding: 24px;
-  align-items: flex-start;
-}
-
-/* Workspace Sidebar */
-.workspace-sidebar {
-  flex: 0 0 280px;
+.sidebar {
+  flex: 0 0 var(--sidebar-width);
+  width: var(--sidebar-width);
   background: var(--bg-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
-  box-shadow: var(--shadow-md);
+  border-right: 1px solid var(--border-subtle);
   display: flex;
   flex-direction: column;
-  max-height: 80vh;
   overflow: hidden;
 }
 
-.workspace-sidebar-header {
-  padding: 16px 20px;
+.sidebar-header {
+  padding: 16px 16px 12px;
   border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-surface-elevated);
-}
-
-.workspace-sidebar-header h3 {
-  font-size: 0.9em;
-  color: var(--accent-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin: 0;
 }
 
-.workspace-list-container {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 200px;
-  max-height: 400px;
+/* macOS hidden title bar — drag region and traffic light safe area */
+body.platform-darwin .sidebar-header {
+  padding-top: 42px;
+  -webkit-app-region: drag;
 }
 
-.workspace-list {
-  list-style: none;
-  margin: 0;
-  padding: 8px 0;
+body.platform-darwin .sidebar-header button,
+body.platform-darwin .sidebar-header input,
+body.platform-darwin .sidebar-header textarea,
+body.platform-darwin .sidebar-header select,
+body.platform-darwin .sidebar-header a {
+  -webkit-app-region: no-drag;
 }
 
-.workspace-item {
-  padding: 12px 16px;
-  cursor: pointer;
-  border-left: 3px solid transparent;
-  transition: all var(--transition-fast);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.workspace-item:hover {
-  background: var(--bg-surface-elevated);
-  border-left-color: var(--border-strong);
-}
-
-.workspace-item.selected {
-  background: var(--bg-surface-elevated);
-  border-left-color: var(--accent-primary);
-}
-
-.workspace-item.missing {
-  opacity: 0.5;
-}
-
-.workspace-item.missing:hover {
-  opacity: 0.8;
-}
-
-.workspace-item-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.workspace-name {
+.sidebar-workspace-name {
   font-family: 'Space Grotesk', sans-serif;
-  font-weight: 600;
-  font-size: 14px;
+  font-weight: 700;
+  font-size: 15px;
   color: var(--text-main);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.workspace-item.selected .workspace-name {
-  color: var(--accent-primary);
-}
-
-.workspace-badge {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.workspace-badge.missing {
-  background: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
-}
-
-.workspace-path {
+.sidebar-workspace-path {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: var(--text-dim);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-top: 4px;
 }
 
-.workspace-time {
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.workspace-missing-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
+.sidebar-new-session {
+  padding: 12px 16px;
 }
 
-.workspace-missing-actions button {
-  padding: 4px 10px;
-  font-size: 10px;
-  background: var(--bg-app);
+.new-session-btn {
+  width: 100%;
+  padding: 8px 14px;
+  background: transparent;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   color: var(--text-muted);
+  font-size: 13px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 500;
   cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+}
+
+.new-session-btn:hover {
+  background: var(--bg-surface-elevated);
+  color: var(--text-main);
+}
+
+.sidebar-section-label {
+  padding: 8px 16px 6px;
   font-family: 'Space Grotesk', sans-serif;
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  transition: all var(--transition-fast);
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
 }
 
-.workspace-missing-actions button:hover {
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
+.session-list-container {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 }
 
-.workspace-empty {
+.session-list {
+  padding: 4px 0;
+}
+
+.session-list-empty {
   padding: 24px 16px;
   text-align: center;
   color: var(--text-dim);
   font-size: 13px;
 }
 
-.workspace-actions {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-subtle);
+.session-group-label {
+  padding: 8px 16px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.session-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 2px;
+  border-radius: var(--radius-sm);
+  margin: 0 8px;
+}
+
+.session-item:hover {
+  background: var(--bg-surface-elevated);
+}
+
+.session-item.active {
+  background: var(--bg-surface-elevated);
+  border-left: 2px solid var(--accent-primary);
+}
+
+.session-item-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-item:hover .session-item-title,
+.session-item.active .session-item-title {
+  color: var(--text-main);
 }
 
-.workspace-action-button {
+.session-item-meta {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
-  background: var(--bg-app);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-main);
-  font-size: 13px;
-  font-family: 'Space Grotesk', sans-serif;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  width: 100%;
-  text-align: left;
+  font-size: 11px;
+  color: var(--text-dim);
 }
 
-.workspace-action-button:hover {
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-  background: var(--bg-surface-elevated);
+.session-item-status {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-dim);
 }
 
-.action-icon {
-  font-size: 14px;
+.session-item-status.active {
+  background: var(--accent-primary);
+  box-shadow: 0 0 6px var(--accent-primary);
 }
 
-.workspace-footer {
+.sidebar-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--border-subtle);
-  background: var(--bg-surface-elevated);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.config-link-button {
+.sidebar-footer-btn {
   background: none;
   border: none;
   color: var(--text-dim);
@@ -294,261 +273,236 @@ h1, h2, h3, h4, h5, h6 {
   cursor: pointer;
   font-family: 'IBM Plex Mono', monospace;
   transition: color var(--transition-fast);
-  padding: 0;
+  padding: 4px 0;
+  text-align: left;
 }
 
-.config-link-button:hover {
+.sidebar-footer-btn:hover {
   color: var(--accent-primary);
 }
 
-/* Selected Workspace Info */
-.selected-workspace-info {
+/* ═══════════════════════════════════════════════════════════
+   Main Area
+   ═══════════════════════════════════════════════════════════ */
+
+.main-area {
+  flex: 1;
+  min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--bg-surface-elevated);
-  border-radius: var(--radius-md);
-  margin-bottom: 20px;
-  border: 1px solid var(--border-subtle);
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.selected-label {
-  color: var(--text-dim);
-  font-size: 12px;
-  font-weight: 500;
+.drag-bar {
+  display: none;
 }
 
-.selected-path {
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 12px;
-  color: var(--accent-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
+body.platform-darwin .drag-bar {
+  display: block;
+  height: 42px;
+  flex-shrink: 0;
+  -webkit-app-region: drag;
 }
 
-.cli-badge {
-  font-size: 10px;
-  padding: 2px 8px;
-  background: rgba(20, 241, 149, 0.15);
-  color: var(--accent-primary);
-  border-radius: 4px;
-  font-weight: 600;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
+/* Welcome View */
+.welcome-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
 }
 
-/* Responsive - Stack on narrow screens */
-@media (max-width: 768px) {
-  .challenge-layout {
-    flex-direction: column;
-    padding: 16px;
-  }
+.welcome-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
 
-  .workspace-sidebar {
-    flex: none;
-    width: 100%;
-    max-height: 300px;
-  }
+.welcome-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 0 12px rgba(20, 241, 149, 0.3));
+}
 
-  .workspace-list-container {
-    max-height: 150px;
-  }
+.welcome-title {
+  font-size: 2em;
+  color: var(--text-main);
+  text-align: center;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
 
-  .container {
-    width: 100%;
-  }
+.welcome-subtitle {
+  text-align: center;
+  color: var(--text-muted);
+  margin-bottom: 24px;
+  font-size: 1.1em;
 }
 
-.container {
+.welcome-config-info {
+  padding: 16px 20px;
   background: var(--bg-surface);
-  border-radius: var(--radius-lg);
-  padding: 40px;
-  max-width: 800px;
-  width: 100%;
-  flex: 1;
-  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-subtle);
+  max-width: 400px;
+  width: 100%;
 }
 
-h1 {
-  font-size: 2.5em;
-  margin-bottom: 10px;
-  text-align: center;
-  color: var(--accent-primary);
+#config-details {
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.6;
 }
 
-.subtitle {
-  text-align: center;
-  color: var(--text-muted);
-  margin-bottom: 30px;
-  font-size: 1.1em;
+/* Session View */
+.session-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.challenge-input-container {
-  margin-bottom: 20px;
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
 }
 
-textarea {
-  width: 100%;
-  padding: 15px;
-  background: var(--bg-app);
+/* Prompt Input Bar (shared by welcome and session views) */
+.prompt-input-bar {
+  padding: 12px 16px;
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.prompt-textarea {
+  flex: 1;
+  min-height: 40px;
+  max-height: 150px;
+  padding: 10px 14px;
+  background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   color: var(--text-main);
   font-size: 14px;
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Manrope', sans-serif;
   resize: vertical;
   transition: all var(--transition-fast);
 }
 
-textarea:focus {
+.prompt-textarea:focus {
   outline: none;
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 2px rgba(20, 241, 149, 0.1);
+  border-color: var(--border-strong);
 }
 
-.primary-button {
-  width: 100%;
-  padding: 15px;
-  background: var(--accent-primary);
+.prompt-send-btn {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  padding: 0;
+  background: var(--text-dim);
   color: var(--bg-app);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 50%;
   font-size: 16px;
-  font-weight: 700;
-  font-family: 'Space Grotesk', sans-serif;
+  line-height: 1;
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.primary-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(20, 241, 149, 0.3);
-  filter: brightness(1.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.primary-button:active {
-  transform: translateY(0);
+.prompt-send-btn:hover {
+  background: var(--text-main);
 }
 
-.config-info {
-  margin-top: 30px;
-  padding: 20px;
-  background: var(--bg-surface-elevated);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
+.prompt-send-btn:active {
+  transform: scale(0.95);
 }
 
-.config-info h3 {
-  margin-bottom: 10px;
-  color: var(--accent-primary);
-  font-size: 0.9em;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+.prompt-send-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
 
-#config-details {
-  color: var(--text-muted);
-  font-size: 13px;
-  line-height: 1.6;
+.prompt-send-btn.loading {
+  opacity: 0.6;
+  animation: send-pulse 1.2s ease-in-out infinite;
 }
 
-/* Session Screen */
-#session-screen {
-  display: flex;
-  flex-direction: column;
+@keyframes send-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
 }
 
-.header {
-  background: var(--bg-surface);
-  padding: 12px 24px;
-  border-bottom: 1px solid var(--border-subtle);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: var(--shadow-sm);
-  z-index: 100;
-}
+/* ═══════════════════════════════════════════════════════════
+   Right Panel
+   ═══════════════════════════════════════════════════════════ */
 
-.header h2 {
-  font-size: 1.25em;
-  color: var(--accent-primary);
+.right-panel {
+  flex: 0 0 45%;
   display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.divider {
-  color: var(--border-strong);
-  font-weight: 300;
-}
-
-.subtext {
-  color: var(--text-dim);
-  font-size: 0.8em;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.icon {
-  font-style: normal;
-  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.3));
+  background: var(--bg-surface);
+  border-left: 1px solid var(--border-subtle);
+  overflow: hidden;
+  position: relative;
 }
 
-.header-icon {
-  height: 1.2em;
-  width: auto;
-  vertical-align: middle;
-  margin-right: 0.3em;
-  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.3));
+body.platform-darwin .right-panel {
+  padding-top: 42px; /* Safe area for macOS hidden title bar */
 }
 
-.header-info {
+.right-panel-inner {
+  flex: 1;
   display: flex;
-  align-items: center;
-  gap: 24px;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-#workspace-path {
-  color: var(--text-dim);
-  font-size: 12px;
-  font-family: 'IBM Plex Mono', monospace;
-  background: var(--bg-app);
-  padding: 4px 10px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
-}
+/* ═══════════════════════════════════════════════════════════
+   Buttons
+   ═══════════════════════════════════════════════════════════ */
 
-.danger-button {
-  padding: 8px 16px;
-  background: transparent;
-  color: var(--accent-danger);
-  border: 1px solid var(--accent-danger);
+.primary-button {
+  width: 100%;
+  padding: 12px;
+  background: var(--text-main);
+  color: var(--bg-app);
+  border: none;
   border-radius: var(--radius-md);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 600;
   font-family: 'Space Grotesk', sans-serif;
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
-.danger-button:hover {
-  background: var(--accent-danger);
-  color: white;
-  box-shadow: 0 0 12px rgba(255, 69, 58, 0.3);
+.primary-button:hover {
+  background: var(--accent-primary);
+}
+
+.primary-button:active {
+  transform: translateY(0);
+}
+
+.primary-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .secondary-button {
   padding: 8px 16px;
   background: var(--bg-surface-elevated);
-  color: var(--text-main);
+  color: var(--text-muted);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   font-size: 12px;
@@ -556,28 +510,24 @@ textarea:focus {
   font-family: 'Space Grotesk', sans-serif;
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
 .secondary-button:hover {
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-  box-shadow: 0 0 8px rgba(20, 241, 149, 0.2);
+  color: var(--text-main);
+  border-color: var(--border-strong);
 }
 
 .small-button {
-  padding: 6px 12px;
+  padding: 5px 10px;
   background: var(--bg-surface-elevated);
-  color: var(--text-main);
+  color: var(--text-muted);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   font-family: 'Space Grotesk', sans-serif;
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-transform: uppercase;
 }
 
 .small-button:hover {
@@ -596,31 +546,9 @@ textarea:focus {
   box-shadow: 0 0 8px rgba(20, 241, 149, 0.3);
 }
 
-/* Main Content Layout */
-.main-content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  background: var(--bg-app);
-  gap: 1px; /* Subtle gap to show background as border */
-}
-
-.left-panel {
-  flex: 0 0 55%;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-surface);
-  overflow: hidden;
-}
-
-.right-panel {
-  flex: 0 0 45%;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-surface);
-  border-left: 1px solid var(--border-subtle);
-  overflow: hidden;
-}
+/* ═══════════════════════════════════════════════════════════
+   Panel Header
+   ═══════════════════════════════════════════════════════════ */
 
 .panel-header {
   background: var(--bg-surface);
@@ -634,13 +562,69 @@ textarea:focus {
 
 .panel-header h3 {
   font-size: 0.85em;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.panel-header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Main Tabs (Right Panel: Terminal / Plan / Diff)
+   ═══════════════════════════════════════════════════════════ */
+
+.main-tabs {
+  display: flex;
+  background: var(--bg-app);
+  padding: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.main-tab {
+  flex: 1;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
   font-family: 'Space Grotesk', sans-serif;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.main-tab:hover {
+  color: var(--text-main);
+}
+
+.main-tab.active {
+  color: var(--text-main);
+  border-bottom-color: var(--accent-primary);
+}
+
+/* Tab Content Areas */
+.tab-content {
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tab-content.active {
+  display: flex;
 }
 
-/* Agent Tabs */
+/* ═══════════════════════════════════════════════════════════
+   Agent Tabs & Terminal
+   ═══════════════════════════════════════════════════════════ */
+
 .tabs {
   display: flex;
   background: var(--bg-app);
@@ -677,7 +661,6 @@ textarea:focus {
   margin-bottom: -1px;
 }
 
-/* Agent Outputs */
 .agent-outputs {
   flex: 1;
   overflow: hidden;
@@ -712,28 +695,19 @@ textarea:focus {
   height: calc(100% - 30px);
   overflow: hidden;
   position: relative;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-app);
-  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
-}
-
-.agent-output.active .terminal-container {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 15px rgba(20, 241, 149, 0.1), inset 0 2px 8px rgba(0,0,0,0.4);
+  border-radius: var(--radius-sm);
+  background: var(--terminal-bg);
 }
 
 .agent-status {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 4px 10px;
+  gap: 6px;
+  padding: 3px 8px;
   border-radius: 100px;
   font-size: 11px;
-  font-weight: 700;
-  margin-bottom: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  font-weight: 500;
+  margin-bottom: 8px;
   font-family: 'Space Grotesk', sans-serif;
 }
 
@@ -756,6 +730,17 @@ textarea:focus {
   animation: pulse 2s infinite;
 }
 
+.agent-status.restarting {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.agent-status.restarting::before {
+  background: #f59e0b;
+  box-shadow: 0 0 8px #f59e0b;
+  animation: pulse 1s infinite;
+}
+
 .agent-status.stopped {
   background: var(--bg-surface-elevated);
   color: var(--text-muted);
@@ -780,32 +765,30 @@ textarea:focus {
   100% { transform: scale(0.95); opacity: 0.8; }
 }
 
-/* Input Lock Toggle Button */
+/* Input Lock Toggle */
 .input-lock-toggle {
   position: absolute;
-  bottom: 12px;
-  right: 12px;
-  padding: 6px 14px;
+  bottom: 8px;
+  right: 8px;
+  padding: 4px 10px;
   background: var(--bg-surface-elevated);
   border: 1px solid var(--border-subtle);
   border-radius: 100px;
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: 700;
+  color: var(--text-dim);
+  font-size: 10px;
+  font-weight: 500;
   font-family: 'Space Grotesk', sans-serif;
   cursor: pointer;
   z-index: 10;
   transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+  opacity: 0.7;
 }
 
 .input-lock-toggle:hover {
-  border-color: var(--text-muted);
-  color: var(--text-main);
+  opacity: 1;
 }
 
 .input-lock-toggle.unlocked {
@@ -818,65 +801,9 @@ textarea:focus {
   background: rgba(20, 241, 149, 0.2);
 }
 
-
-/* Main Tabs (Top-Level Navigation) */
-.main-tabs {
-  display: flex;
-  background: var(--bg-app);
-  padding: 0;
-  border-bottom: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-
-.main-tab {
-  flex: 1;
-  padding: 12px 16px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  font-family: 'Space Grotesk', sans-serif;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  position: relative;
-}
-
-.main-tab:hover {
-  color: var(--text-main);
-  background: var(--bg-surface-elevated);
-}
-
-.main-tab.active {
-  color: var(--accent-primary);
-  border-bottom-color: var(--accent-primary);
-  background: var(--bg-surface);
-}
-
-/* Tab Content Areas */
-.tab-content {
-  display: none;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.tab-content.active {
-  display: flex;
-}
-
-/* Chat Section */
-.chat-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-bottom: 1px solid var(--border-subtle);
-  position: relative;
-}
+/* ═══════════════════════════════════════════════════════════
+   Chat
+   ═══════════════════════════════════════════════════════════ */
 
 .chat-viewer {
   flex: 1;
@@ -908,7 +835,6 @@ textarea:focus {
   box-shadow: var(--shadow-sm);
 }
 
-/* Chat Messages */
 .chat-message {
   display: flex;
   max-width: 90%;
@@ -932,14 +858,13 @@ textarea:focus {
   background: var(--bg-surface);
   border-radius: var(--radius-lg);
   padding: 10px 14px;
-  box-shadow: var(--shadow-sm);
-  border-left: 4px solid var(--agent-color, var(--accent-primary));
+  border-left: 2px solid var(--agent-color, var(--accent-primary));
 }
 
 .chat-message-right .chat-bubble {
   border-left: none;
-  border-right: 4px solid var(--agent-color, var(--color-user));
-  background: var(--bg-surface-elevated);
+  border-right: 2px solid var(--agent-color, var(--color-user));
+  background: var(--bg-surface);
 }
 
 .chat-header {
@@ -952,10 +877,8 @@ textarea:focus {
 
 .chat-agent {
   font-family: 'Space Grotesk', sans-serif;
-  font-weight: 700;
+  font-weight: 600;
   font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
 .chat-time {
@@ -978,7 +901,10 @@ textarea:focus {
   font-size: 13px;
 }
 
-/* Markdown content styling */
+/* ═══════════════════════════════════════════════════════════
+   Markdown content
+   ═══════════════════════════════════════════════════════════ */
+
 .markdown-content {
   color: var(--text-main);
 }
@@ -1049,34 +975,10 @@ textarea:focus {
 
 .markdown-content a:hover { text-decoration: underline; }
 
-/* Message Section */
-.message-section {
-  flex: 0 0 auto;
-}
-
-.message-input-container {
-  padding: 12px 16px;
-  background: var(--bg-surface);
-  display: flex;
-  gap: 12px;
-  align-items: flex-end;
-}
-
-.message-input-container textarea {
-  flex: 1;
-  min-height: 44px;
-  max-height: 120px;
-  background: var(--bg-app);
-  border: 1px solid var(--border-subtle);
-}
-
-.message-input-container .primary-button {
-  width: auto;
-  padding: 10px 20px;
-  height: 44px;
-}
+/* ═══════════════════════════════════════════════════════════
+   Plan Section
+   ═══════════════════════════════════════════════════════════ */
 
-/* Plan Section */
 .plan-section {
   flex: 1;
   display: flex;
@@ -1085,10 +987,6 @@ textarea:focus {
   background: var(--bg-surface);
 }
 
-.plan-section .panel-header {
-  background: var(--bg-surface);
-}
-
 .plan-viewer {
   flex: 1;
   overflow-y: auto;
@@ -1114,7 +1012,10 @@ textarea:focus {
   font-size: 15px;
 }
 
-/* Diff Section */
+/* ═══════════════════════════════════════════════════════════
+   Diff Section
+   ═══════════════════════════════════════════════════════════ */
+
 .diff-section {
   flex: 1;
   display: flex;
@@ -1178,47 +1079,133 @@ textarea:focus {
   color: var(--text-main);
 }
 
-.file-list-item.active {
+.file-list-item.active {
+  background: var(--bg-app);
+  color: var(--accent-primary);
+  border-left-color: var(--accent-primary);
+}
+
+.file-list-item.all-files {
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.file-list-item .file-status {
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.file-list-item .file-status.added { color: #22c55e; }
+.file-list-item .file-status.modified { color: var(--accent-secondary); }
+.file-list-item .file-status.deleted { color: #ef4444; }
+
+.diff-content-pane {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-app);
+}
+
+.diff-resize {
+  flex-shrink: 0;
+}
+
+.diff-badge {
+  display: inline-block;
+  background: var(--accent-danger);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-left: 6px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.diff-stats {
+  display: flex;
+  gap: 16px;
+  padding: 8px 12px;
+  background: var(--bg-app);
+  border-radius: var(--radius-md);
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}
+
+.diff-stat-files { color: var(--text-muted); }
+.diff-stat-insertions { color: #22c55e; font-weight: 600; }
+.diff-stat-deletions { color: #ef4444; font-weight: 600; }
+.diff-stat-none { color: var(--text-dim); font-style: italic; }
+
+.diff-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.diff-output {
+  margin: 0;
+  padding: 12px;
   background: var(--bg-app);
-  color: var(--accent-primary);
-  border-left-color: var(--accent-primary);
+  border-radius: var(--radius-md);
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: pre;
+  overflow-x: auto;
+  border: 1px solid var(--border-subtle);
 }
 
-.file-list-item.all-files {
+.diff-added { color: #22c55e; background: rgba(34, 197, 94, 0.08); display: block; padding: 0 4px; }
+.diff-removed { color: #ef4444; background: rgba(239, 68, 68, 0.08); display: block; padding: 0 4px; }
+.diff-context { display: block; padding: 0 4px; }
+.diff-file-header { color: var(--accent-secondary); font-weight: 600; display: block; }
+.diff-hunk-header { color: var(--accent-primary); background: rgba(20, 241, 149, 0.1); display: block; }
+
+.diff-file-separator {
+  color: var(--text-dim);
   font-weight: 600;
-  color: var(--text-main);
+  display: block;
+  margin-top: 16px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-subtle);
 }
 
-.file-list-item .file-status {
-  font-size: 10px;
-  font-weight: 700;
+.diff-file-separator:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
 }
 
-.file-list-item .file-status.added {
-  color: #22c55e;
+.diff-empty,
+.diff-no-repo,
+.diff-error {
+  color: var(--text-dim);
+  display: block;
+  padding: 24px;
+  text-align: center;
 }
 
-.file-list-item .file-status.modified {
-  color: var(--accent-secondary);
-}
+.diff-error { color: var(--accent-danger); }
 
-.file-list-item .file-status.deleted {
-  color: #ef4444;
-}
+.diff-untracked { margin-top: 8px; }
 
-.diff-content-pane {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-app);
+.diff-untracked-header {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--accent-warning);
+  margin-bottom: 8px;
 }
 
-.diff-resize {
-  flex-shrink: 0;
-}
+/* ═══════════════════════════════════════════════════════════
+   Scrollbar
+   ═══════════════════════════════════════════════════════════ */
 
-/* Scrollbar Styling */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -1237,7 +1224,10 @@ textarea:focus {
   background: var(--text-dim);
 }
 
-/* Resize Handles */
+/* ═══════════════════════════════════════════════════════════
+   Resize Handles
+   ═══════════════════════════════════════════════════════════ */
+
 .resize-handle {
   flex-shrink: 0;
   background: transparent;
@@ -1271,20 +1261,6 @@ textarea:focus {
   width: 2px;
 }
 
-.resize-handle-v {
-  height: 8px;
-  cursor: row-resize;
-  margin: -3px 0;
-}
-
-.resize-handle-v::after {
-  top: 3px;
-  left: 0;
-  right: 0;
-  height: 2px;
-}
-
-/* Prevent text selection during resize */
 body.resizing {
   user-select: none;
   -webkit-user-select: none;
@@ -1294,16 +1270,15 @@ body.resizing-h {
   cursor: col-resize;
 }
 
-body.resizing-v {
-  cursor: row-resize;
-}
-
 body.resizing iframe,
 body.resizing .terminal-container {
   pointer-events: none;
 }
 
-/* Modal Styles */
+/* ═══════════════════════════════════════════════════════════
+   Modal
+   ═══════════════════════════════════════════════════════════ */
+
 .modal {
   position: fixed;
   top: 0;
@@ -1407,220 +1382,32 @@ body.resizing .terminal-container {
   font-size: 12px;
 }
 
-/* Synthesis Tabs (Plan/Diff) */
-.synthesis-tabs {
-  display: flex;
-  gap: 4px;
-}
-
-.synthesis-tab {
-  padding: 6px 14px;
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-muted);
-  font-size: 12px;
-  font-weight: 600;
-  font-family: 'Space Grotesk', sans-serif;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  position: relative;
-}
-
-.synthesis-tab:hover {
-  color: var(--text-main);
-  border-color: var(--text-muted);
-}
-
-.synthesis-tab.active {
-  background: var(--accent-primary);
-  color: var(--bg-app);
-  border-color: var(--accent-primary);
-}
-
-.panel-header-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-/* Diff Badge */
-.diff-badge {
-  display: inline-block;
-  background: var(--accent-danger);
-  color: white;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 10px;
-  margin-left: 6px;
-  min-width: 18px;
-  text-align: center;
-}
-
-.synthesis-tab.active .diff-badge {
-  background: var(--bg-app);
-  color: var(--accent-primary);
-}
-
-/* Synthesis Content Areas */
-.synthesis-content {
-  display: none;
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.synthesis-content.active {
-  display: block;
-}
-
-/* Diff Viewer */
-.diff-viewer {
-  flex-direction: column;
-  gap: 12px;
-}
-
-.diff-viewer.active {
-  display: flex;
-}
-
-.diff-stats {
-  display: flex;
-  gap: 16px;
-  padding: 8px 12px;
-  background: var(--bg-app);
-  border-radius: var(--radius-md);
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 12px;
-}
-
-.diff-stat-files {
-  color: var(--text-muted);
-}
-
-.diff-stat-insertions {
-  color: #22c55e;
-  font-weight: 600;
-}
-
-.diff-stat-deletions {
-  color: #ef4444;
-  font-weight: 600;
-}
-
-.diff-stat-none {
-  color: var(--text-dim);
-  font-style: italic;
-}
-
-.diff-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.diff-output {
-  margin: 0;
-  padding: 12px;
-  background: var(--bg-app);
-  border-radius: var(--radius-md);
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre;
-  overflow-x: auto;
-  border: 1px solid var(--border-subtle);
-}
-
-.diff-added {
-  color: #22c55e;
-  background: rgba(34, 197, 94, 0.1);
-  display: block;
-}
-
-.diff-removed {
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.1);
-  display: block;
-}
-
-.diff-file-header {
-  color: var(--accent-secondary);
-  font-weight: 600;
-  display: block;
-}
-
-.diff-hunk-header {
-  color: var(--accent-primary);
-  background: rgba(20, 241, 149, 0.1);
-  display: block;
-}
-
-.diff-file-separator {
-  color: var(--text-dim);
-  font-weight: 600;
-  display: block;
-  margin-top: 16px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-subtle);
-}
-
-.diff-file-separator:first-child {
-  margin-top: 0;
-  padding-top: 0;
-  border-top: none;
-}
-
-.diff-empty,
-.diff-no-repo,
-.diff-error {
-  color: var(--text-dim);
-  display: block;
-  padding: 24px;
-  text-align: center;
-}
-
-.diff-error {
-  color: var(--accent-danger);
-}
-
-/* Untracked Files */
-.diff-untracked {
-  margin-top: 8px;
-}
+/* ═══════════════════════════════════════════════════════════
+   Header icon (used in welcome)
+   ═══════════════════════════════════════════════════════════ */
 
-.diff-untracked-header {
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--accent-warning);
-  margin-bottom: 8px;
+.header-icon {
+  height: 1.2em;
+  width: auto;
+  vertical-align: middle;
+  margin-right: 0.3em;
+  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.3));
 }
 
-.diff-untracked-list {
-  margin: 0;
-  padding: 8px 12px;
-  background: var(--bg-app);
-  border-radius: var(--radius-md);
+textarea {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
-  list-style: none;
-}
-
-.diff-untracked-list li {
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 12px;
-  color: var(--accent-warning);
-  padding: 2px 0;
+  border-radius: var(--radius-lg);
+  color: var(--text-main);
+  font-size: 14px;
+  font-family: 'Manrope', sans-serif;
+  resize: vertical;
+  transition: all var(--transition-fast);
 }
 
-.diff-untracked-list li::before {
-  content: '? ';
-  color: var(--text-dim);
+textarea:focus {
+  outline: none;
+  border-color: var(--border-strong);
 }