use the colour scheme from this file:

:root {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

--bg-color: #111827;
--panel-bg-color: #1f2937; /* Changed from rgba to solid */
--input-bg-color: #111827;
--modal-bg-color: #1f2937;

--border-color: #374151;
--border-color-focus: #10b981;

--text-primary: #f3f4f6;
--text-secondary: #9ca3af;
--text-muted: #6b7285;

--color-primary: #10b981; /* Green */
--color-primary-hover: #10f9b1;
--color-secondary: #22d3ee; /* Cyan */
--color-secondary-hover: #67e8f9;
--color-tertiary: #facc15; /* Yellow */
--color-quaternary: #a78bfa; /* Purple */
--color-danger: #f87171; /* Red */
--color-orange: #f97316; /* Orange for tool use */

--dev-mode-bg: #4a4100;

/* Windows 11 Inspired File Explorer Theme */
--win-folder-color: #FFC107; /* Yellow for active project */
--win-folder-fill: rgba(255, 193, 7, 0.2);
--win-folder-inactive-color: #0078D4; /* Blue for inactive folders */
--win-folder-inactive-fill: rgba(0, 120, 212, 0.1);
--win-item-hover-bg: rgba(255, 255, 255, 0.08);

/* Virtual Mode Theme */
--virtual-border-color: var(--color-tertiary);
--virtual-folder-color: var(--color-secondary);
--virtual-folder-fill: rgba(34, 211, 238, 0.2);
}

/* --- Base & Layout --- */
*, *::before, *::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: var(--font-sans);
background-color: var(--bg-color);
color: var(--text-primary);
font-size: 16px;
line-height: 1.5;
overflow: hidden; /* Prevent body scroll when panels scroll */
}

#root {
height: 100vh;
width: 100vw;
}

.app-container {
position: relative;
display: flex;
height: 100%;
width: 100%;
padding: 1rem;
gap: 1rem;
transition: background-color 0.3s ease-in-out;
}

.app-container.dev-mode-active {
background-color: var(--dev-mode-bg);
}

.panel {
position: relative; /* Establish positioning context */
height: 100%;
background-color: var(--panel-bg-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
transition: width 0.3s ease-in-out;
flex-shrink: 0; /* Prevent panels from shrinking unexpectedly */
}

.app-container .panel.chat-interface { width: 33.333%; }
.app-container .panel.dashboard { width: 25%; }
.app-container .panel.file-editor { width: 41.667%; }

/* Layout adjustments when monitor is open */
.app-container.monitor-open .panel.chat-interface { width: 25%; }
.app-container.monitor-open .panel.dashboard { width: 20%; }
.app-container.monitor-open .panel.file-editor { width: 30%; }

.panel-header {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}

.panel-header h2 {
font-size: 1.25rem;
font-weight: bold;
margin: 0;
}

.panel-content {
flex-grow: 1;
overflow-y: auto;
padding: 1rem;
}

/* Make the file panel content area a positioning context for the preview button */
.file-panel-content {
position: relative;
}

.panel-footer {
padding: 1rem;
border-top: 1px solid var(--border-color);
}


/* --- Chat Interface --- */
.chat-interface .panel-header h2 { color: var(--color-primary); }
.chat-interface .provider-info {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
color: var(--text-secondary);
transition: background-color 0.2s;
min-width: 0; /* Allow the button to shrink if needed */
}
.chat-interface .provider-info:hover {
background-color: var(--win-item-hover-bg);
}

.chat-interface .provider-info span {
font-size: 0.875rem;
font-weight: 600;
text-transform: capitalize;
color: var(--text-secondary);
white-space: nowrap; /* Prevent wrapping */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Add ... for truncated text */
}
.chat-interface .provider-info svg {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}

.first-load-prompt {
font-size: 0.875rem;
font-weight: 600;
animation: pulse-color 2.5s ease-in-out infinite;
}



@keyframes
pulse-color {
0%, 100% {
color: var(--color-secondary);
}
50% {
color: var(--color-tertiary);
}
}


.connection-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 0.25rem;
transition: background-color 0.3s, box-shadow 0.3s;
flex-shrink: 0;
}

.connection-indicator.status-success {
background-color: var(--color-primary);
box-shadow: 0 0 6px var(--color-primary);
}
.connection-indicator.status-loading {
background-color: var(--color-tertiary);
animation: pulse 2s infinite;
}
.connection-indicator.status-error {
background-color: var(--color-danger);
box-shadow: 0 0 6px var(--color-danger);
}
.connection-indicator.status-idle {
background-color: var(--text-muted);
}
.connection-indicator.status-tool-use {
background-color: var(--color-orange);
box-shadow: 0 0 6px var(--color-orange);
}


.messages-container {
display: flex;
flex-direction: column;
gap: 1rem;
}

.message {
display: flex;
gap: 0.75rem;
max-width: 85%;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid transparent;
word-break: break-word;
white-space: pre-wrap;
}

.message-icon {
flex-shrink: 0;
padding-top: 0.25rem;
}
.message-icon svg {
width: 1.5rem;
height: 1.5rem;
}

.message-user {
align-self: flex-end;
background-color: rgba(22, 163, 74, 0.2);
border-color: rgba(22, 163, 74, 0.5);
}
.message-user .message-icon svg { color: var(--color-primary); }

.message-ai {
align-self: flex-start;
background-color: rgba(34, 211, 238, 0.2);
border-color: rgba(34, 211, 238, 0.5);
}
.message-ai .message-icon svg { color: var(--color-secondary); }

.message-system {
align-self: flex-start;
background-color: rgba(250, 204, 21, 0.2);
border-color: rgba(250, 204, 21, 0.5);
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-tertiary);
}
.message-system .message-icon svg { color: var(--color-tertiary); }

.message-monitor {
align-self: flex-start;
background-color: rgba(167, 139, 250, 0.2);
border-color: rgba(167, 139, 250, 0.5);
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-quaternary);
}
.message-monitor .message-icon svg { color: var(--color-quaternary); }

.loading-indicator {
display: flex;
align-items: flex-start;
gap: 0.75rem;
max-width: 85%;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(34, 211, 238, 0.5);
background-color: rgba(34, 211, 238, 0.2);
}

.loading-dots {
display: flex;
align-items: center;
gap: 0.25rem;
padding-top: 0.25rem;
}

.loading-dots div {
width: 0.5rem;
height: 0.5rem;
background-color: var(--color-secondary);
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots .dot-1 { animation-delay: -0.32s; }
.loading-dots .dot-2 { animation-delay: -0.16s; }



@keyframes
bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}



@keyframes
pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(250, 204, 21, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
}
}

.chat-form {
display: flex;
align-items: center;
background-color: var(--input-bg-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
}

.chat-form:focus-within {
border-color: var(--border-color-focus);
box-shadow: 0 0 0 1px var(--border-color-focus);
}

.chat-input {
flex-grow: 1;
background: transparent;
padding: 0.75rem;
border: none;
outline: none;
color: var(--text-primary);
font-size: 1rem;
}

.send-button {
padding: 0.75rem;
color: var(--text-muted);
background: none;
border: none;
cursor: pointer;
}
.send-button:hover:not(:disabled) { color: var(--color-primary); }
.send-button:disabled {
color: #4b5563;
cursor: not-allowed;
}
.send-button i {
font-size: 1.5rem;
line-height: 1;
}

.send-button.cancel-button:hover {
color: var(--color-danger);
}


/* --- Dashboard & File Tree --- */
.projects-title {
color: var(--color-secondary);
}

.file-tree {
font-family: var(--font-mono);
font-size: 0.875rem;
display: flex;
flex-direction: column;
}
.file-tree-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.15s ease-in-out, opacity 0.2s;
width: 100%;
}
.file-tree-item:hover {
background-color: var(--win-item-hover-bg);
}
.file-tree-item.is-cut {
opacity: 0.6;
}
.indent-spacer {
flex-shrink: 0;
transition: width 0.2s ease-in-out;
}
.chevron-container {
width: 1.25rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-tree-item svg {
flex-shrink: 0;
width: 1rem;
height: 1rem;
}
.file-tree-item .chevron-icon { color: var(--text-muted); transition: transform 0.2s; }
.file-tree-item .chevron-icon.open { transform: rotate(90deg); }

.project-index {
color: var(--text-muted);
font-weight: normal;
/* Add for alignment */
flex-shrink: 0;
width: 1.5rem;
text-align: right;
padding-right: 0.5rem; /* Space between number and chevron */
box-sizing: border-box; /* Include padding in the width */
}

.file-tree-item.active-folder:not(:hover) {
background-color: var(--win-item-hover-bg);
}

/* Default folder icon style (inactive) */
.folder-icon svg {
stroke: var(--win-folder-inactive-color);
fill: var(--win-folder-inactive-fill);
}

/* Active project folder icon style */
.folder-icon.active-project-icon svg {
stroke: var(--win-folder-color);
fill: none;
filter: drop-shadow(0 0 3px var(--win-folder-color));
}

/*

components/footer.js

@@ -4,9 +4,9 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: #1e293b;
-          color: white;
-          padding: 2rem;
+          background: var(--panel-bg-color);
+          color: var(--text-primary);
+padding: 2rem;
           text-align: center;
           margin-top: auto;
         }

components/navbar.js

@@ -4,8 +4,8 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-          padding: 1rem 2rem;
+          background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;

index.html

@@ -14,18 +14,17 @@
 </head>
 <body class="bg-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    
     <main class="flex-grow container mx-auto px-4 py-8">
         <div id="vanta-bg" class="absolute top-0 left-0 w-full h-full z-0"></div>
         
         <div class="relative z-10 max-w-4xl mx-auto">
             <header class="text-center mb-8">
-                <h1 class="text-4xl font-bold text-gray-800 mb-2">FileMaster Control Panel</h1>
-                <p class="text-xl text-gray-600">A client to interact with the File Operations toolkit server</p>
+                <h1 class="text-4xl font-bold text-primary mb-2">FileMaster Control Panel</h1>
+                <p class="text-xl text-secondary">A client to interact with the File Operations toolkit server</p>
             </header>
             
-            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-                <div class="mb-6">
+            <div class="bg-panel-bg-color rounded-xl shadow-lg p-6 mb-8 border border-border-color">
+<div class="mb-6">
                     <label for="tool-select" class="block text-lg font-medium text-gray-700 mb-2">Select a Tool</label>
                     <select id="tool-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                         <option value="list_files">List Files</option>

script.js

@@ -4,9 +4,10 @@ const TOOLS = [
         value: 'list_files', 
         label: 'List Files', 
         description: 'Lists files and directories in a given path.', 
-        params: [{ name: 'path', type: 'text', label: 'Directory Path' }] 
+        params: [{ name: 'path', type: 'text', label: 'Directory Path' }],
+        color: 'var(--color-primary)'
     },
-    { 
+{ 
         value: 'read_file', 
         label: 'Read File', 
         description: 'Reads the content of a specific file.', 

style.css

@@ -1,7 +1,36 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+  --bg-color: #111827;
+  --panel-bg-color: #1f2937;
+  --input-bg-color: #111827;
+  --modal-bg-color: #1f2937;
+  
+  --border-color: #374151;
+  --border-color-focus: #10b981;
+
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7285;
+
+  --color-primary: #10b981;
+  --color-primary-hover: #10f9b1;
+  --color-secondary: #22d3ee;
+  --color-secondary-hover: #67e8f9;
+  --color-tertiary: #facc15;
+  --color-quaternary: #a78bfa;
+  --color-danger: #f87171;
+  --color-orange: #f97316;
+  
+  --win-item-hover-bg: rgba(255, 255, 255, 0.08);
+}
 
 body {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-sans);
+    background-color: var(--bg-color);
+    color: var(--text-primary);
 }
 
 #vanta-bg {
@@ -11,21 +40,38 @@ body {
     width: 100%;
     height: 100%;
     z-index: -1;
-    opacity: 0.2;
+    opacity: 0.1;
 }
-
 pre {
-    background-color: rgba(0,0,0,0.05);
+    background-color: var(--input-bg-color);
     padding: 1rem;
     border-radius: 0.5rem;
     overflow-x: auto;
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
 }
 
 textarea {
     min-height: 150px;
     resize: vertical;
+    background-color: var(--input-bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
 }
 
+.button {
+    background-color: var(--color-primary);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.button:hover {
+    background-color: var(--color-primary-hover);
+}
 @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }