@adiontaegerron/claude-multi-terminal 1.0.3 → 1.2.0

package/style.css

@@ -32,19 +32,24 @@ body {
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    margin-right: 10px;
 }
 
 #new-terminal-btn:hover {
     background-color: #1177bb;
 }
 
-#main-layout {
-    flex: 1;
+/* Extended Toolbar */
+#toolbar-extended {
+    background-color: #1e1e1e;
+    padding: 12px 15px;
+    border-bottom: 1px solid #444;
     display: flex;
-    overflow: hidden;
+    flex-direction: column;
+    gap: 12px;
 }
 
-/* Terminals Area - Left Side */
+/* Terminals Area - Full Width */
 #terminals-area {
     flex: 1;
     background-color: #252526;
@@ -137,80 +142,73 @@ body {
     cursor: text;
 }
 
-/* Chat Sidebar - Right Side */
-#chat-sidebar {
-    width: 400px;
-    background-color: #1e1e1e;
-    border-left: 1px solid #444;
+/* Control Rows */
+.controls-row {
     display: flex;
-    flex-direction: column;
-}
-
-.chat-header {
-    padding: 15px;
-    background-color: #252526;
-    border-bottom: 1px solid #444;
+    gap: 20px;
+    align-items: stretch;
+    margin-bottom: 10px;
 }
 
-.chat-header h2 {
-    margin: 0;
-    font-size: 18px;
-    color: #cccccc;
-}
-
-#chat-messages {
+/* Control Sections - 50/50 Split */
+.control-section {
     flex: 1;
-    padding: 15px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.chat-message {
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    background-color: #252526;
-    padding: 10px;
+    gap: 8px;
+    background-color: transparent;
+    padding: 12px;
     border-radius: 6px;
+    border: 1px solid #3e3e42;
 }
 
-.message-sender {
-    font-weight: bold;
-    color: #4da6ff;
-    font-size: 14px;
-}
-
-.message-text {
-    color: #cccccc;
-    font-size: 14px;
-    line-height: 1.5;
-    white-space: pre-wrap;
+/* Input Row */
+.input-row {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+    width: 100%;
 }
 
-#chat-controls {
-    background-color: #252526;
-    border-top: 1px solid #444;
-    padding: 15px;
+/* Input Wrapper */
+.input-wrapper {
+    flex: 1;
+    position: relative;
 }
 
 /* Terminal Selection */
-#terminal-selector {
-    margin-bottom: 15px;
-}
-
-#terminal-selector label {
+#terminal-selector > label {
     display: block;
-    font-size: 14px;
+    font-size: 13px;
     color: #cccccc;
     margin-bottom: 8px;
+    font-weight: 500;
 }
 
 #terminal-checkboxes {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px 15px;
+    max-height: 80px;
+    overflow-y: auto;
+    padding-right: 5px;
+}
+
+.terminal-checkbox-label {
+    font-size: 13px !important;
+    padding: 3px 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.terminal-checkbox-label:hover {
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .terminal-checkbox-label {
@@ -232,25 +230,42 @@ body {
     cursor: pointer;
 }
 
-/* Collapsible Default Prompt */
+/* Default Prompt Section */
 #default-prompt-section {
-    margin-bottom: 15px;
+    position: relative;
 }
 
 .collapsible-header {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     cursor: pointer;
     user-select: none;
-    padding: 8px;
-    background-color: #3c3c3c;
-    border-radius: 4px;
+    padding: 0;
+    background-color: transparent;
+    border-radius: 3px;
     margin-bottom: 8px;
+    font-size: 13px;
+    color: #cccccc;
+    font-weight: 500;
 }
 
 .collapsible-header:hover {
-    background-color: #444;
+    color: #ffffff;
+}
+
+.collapse-toggle {
+    background: none;
+    border: none;
+    color: #cccccc;
+    font-size: 10px;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.2s;
+}
+
+.collapsible-header:hover .collapse-toggle {
+    color: #ffffff;
 }
 
 .collapse-toggle {
@@ -268,14 +283,15 @@ body {
 
 #default-prompt-text {
     width: 100%;
-    min-height: 80px;
+    min-height: 60px;
+    max-height: 120px;
     background-color: #3c3c3c;
     border: 1px solid #555;
     color: white;
     padding: 8px;
     border-radius: 4px;
     font-family: 'Consolas', 'Courier New', monospace;
-    font-size: 13px;
+    font-size: 12px;
     resize: vertical;
     margin-bottom: 8px;
 }
@@ -289,43 +305,106 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 13px;
+    font-size: 12px;
     color: #cccccc;
+    padding: 3px 0;
 }
 
-/* Message Input */
-.message-input-section {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+/* Removed - Mode selector is now integrated into input area */
+
+/* Input Overlay for Syntax Highlighting */
+.input-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 80px;
+    max-height: 200px;
+    padding: 10px 12px;
+    border-radius: 4px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: transparent;
+    background: transparent;
+    pointer-events: none;
+    z-index: 1;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow: hidden;
 }
 
+/* Chat Input - Full Width */
 #chat-input {
+    position: relative;
+    z-index: 2;
     width: 100%;
     min-height: 80px;
+    max-height: 200px;
     background-color: #3c3c3c;
     border: 1px solid #555;
     color: white;
-    padding: 8px;
+    padding: 10px 12px;
     border-radius: 4px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: 14px;
     resize: vertical;
+    line-height: 1.5;
 }
 
 #chat-input:focus {
     outline: none;
     border-color: #0e639c;
+    box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.2);
+}
+
+/* Syntax highlighting styles */
+.highlight-terminal {
+    color: #4CAF50;
+}
+
+.highlight-command {
+    color: #FF9800;
+}
+
+/* Plan Mode Row */
+.plan-mode-row {
+    margin-bottom: 8px;
+}
+
+/* Plan Mode Option */
+.plan-mode-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #cccccc;
+    cursor: pointer;
+    padding: 4px 0;
+}
+
+.plan-mode-option:hover {
+    color: #ffffff;
+}
+
+.plan-mode-option input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
 }
 
 #send-message-btn {
     background-color: #0e639c;
     color: white;
     border: none;
-    padding: 10px 20px;
+    padding: 12px 24px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    font-weight: 500;
+    height: fit-content;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
     align-self: flex-end;
 }
 
@@ -334,36 +413,46 @@ body {
 }
 
 /* Responsive adjustments */
-@media (max-width: 1200px) {
-    #chat-sidebar {
-        width: 350px;
-    }
-}
-
 @media (max-width: 1000px) {
     #terminals-container {
         grid-template-columns: 1fr;
     }
+    
+    .controls-row {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .controls-row > div {
+        width: 100%;
+    }
 }
 
 @media (max-width: 768px) {
-    #main-layout {
-        flex-direction: column;
+    #terminals-container {
+        grid-template-columns: 1fr;
     }
     
-    #terminals-area {
-        flex: 1;
+    #toolbar-extended {
+        padding: 10px;
     }
     
-    #chat-sidebar {
+    #default-prompt-text {
         width: 100%;
-        height: 300px;
-        border-left: none;
-        border-top: 1px solid #444;
     }
     
-    #terminals-container {
-        grid-template-columns: 1fr;
+    #chat-input {
+        min-height: 60px;
+    }
+    
+    .input-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    #send-message-btn {
+        align-self: stretch;
+        padding: 10px;
     }
 }
 
@@ -384,4 +473,61 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
+}
+
+/* Command Dropdown */
+.command-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #2d2d30;
+    border: 1px solid #555;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 4px;
+}
+
+.command-list {
+    padding: 4px 0;
+}
+
+.command-option {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #3e3e42;
+    transition: background-color 0.15s ease;
+}
+
+.command-option:last-child {
+    border-bottom: none;
+}
+
+.command-option:hover,
+.command-option.selected {
+    background-color: #094771;
+}
+
+.command-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 2px;
+}
+
+.command-description {
+    font-size: 12px;
+    color: #cccccc;
+    font-style: italic;
+}
+
+.command-syntax {
+    font-size: 11px;
+    color: #999;
+    font-family: 'Consolas', 'Courier New', monospace;
 }