improve file browser and metrics UI.

Overlord-Server/public/assets/filebrowser.js

@@ -85,7 +85,7 @@ const editorCancelBtn = document.getElementById("editor-cancel-btn");
 const editorCloseBtn = document.getElementById("editor-close-btn");
 
 if (clientIdHeader) {
-  clientIdHeader.textContent = `${clientId} - File Browser`;
+  clientIdHeader.innerHTML = `<i class="fa-solid fa-computer mr-1.5 text-sky-400"></i>${escapeHtml(clientId)}`;
 }
 
 let sortField = localStorage.getItem("filebrowser.sortField") || "name";
@@ -141,10 +141,13 @@ function updateStatus(state, text) {
   };
 
   statusEl.innerHTML = `${icons[state] || icons.disconnected} ${text}`;
-  statusEl.className =
-    state === "connected"
-      ? "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60"
-      : "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300";
+  const stateClasses = {
+    connected: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
+    error: "bg-red-500/10 text-red-300 border-red-500/30",
+    disconnected: "bg-slate-800 text-slate-300 border-slate-700",
+    connecting: "bg-sky-500/10 text-sky-300 border-sky-500/30",
+  };
+  statusEl.className = `inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium ${stateClasses[state] || stateClasses.disconnected}`;
 }
 
 function enableControls(enabled) {
@@ -1401,7 +1404,7 @@ function createFileRow(entry) {
 
   row.innerHTML = `
     <input type="checkbox" class="file-checkbox" data-path="${escapeHtml(entry.path)}">
-    <div class="col-span-6 flex items-center gap-2 truncate pl-3">
+    <div class="col-span-6 flex items-center gap-2 truncate pl-8">
       ${icon}
       <span class="truncate">${escapeHtml(entry.name)}</span>
       ${pinBtn}

Overlord-Server/public/assets/metrics.js

@@ -760,7 +760,7 @@ function updateMetrics(data, debug) {
         .map((route) => {
           const errorClass = route.errorsLastMinute > 0 ? "text-red-300" : "text-slate-400";
           return `
-            <div class="bg-slate-800/50 rounded p-3 min-w-0">
+            <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
               <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(route.route)}">
                 ${escapeHtml(route.route)}
               </div>
@@ -790,7 +790,7 @@ function updateMetrics(data, debug) {
     if (tasks.length > 0) {
       internalTasksList.innerHTML = tasks
         .map((task) => `
-          <div class="bg-slate-800/50 rounded p-3 min-w-0">
+          <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
             <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(task.task)}">
               ${escapeHtml(task.task)}
             </div>
@@ -828,7 +828,7 @@ function updateMetrics(data, debug) {
               ? value ? "yes" : "no"
               : Number(value || 0).toLocaleString();
           return `
-            <div class="bg-slate-800/50 rounded p-3 min-w-0">
+            <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
               <div class="text-xs text-slate-500 mb-1 truncate" title="${escapeHtml(key)}">
                 ${escapeHtml(key)}
               </div>
@@ -854,7 +854,7 @@ function updateMetrics(data, debug) {
     commandTypesList.innerHTML = topCommands
       .map(
         ([type, count]) => `
-      <div class="bg-slate-800/50 rounded p-3">
+      <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3">
         <div class="text-xs text-slate-400 mb-1">${escapeHtml(type)}</div>
         <div class="text-xl font-bold">${count.toLocaleString()}</div>
       </div>
@@ -1831,10 +1831,16 @@ async function fetchMetrics() {
     updateCharts(data.history, data.snapshot);
 
     document.getElementById("status-text").textContent = "Live";
+    const status = document.getElementById("metrics-status");
+    status?.classList.remove("bg-red-500/10", "text-red-300", "border-red-500/30");
+    status?.classList.add("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
   } catch (err) {
     if (!metricsPageActive) return;
     console.error("Error fetching metrics:", err);
-    document.getElementById("status-text").textContent = "Error";
+    document.getElementById("status-text").textContent = "Unavailable";
+    const status = document.getElementById("metrics-status");
+    status?.classList.remove("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
+    status?.classList.add("bg-red-500/10", "text-red-300", "border-red-500/30");
   }
 }