feat: scan local models, redesign sidebar and server panel UI

tauri-app/src-tauri/src/lib.rs

@@ -1,3 +1,4 @@
+use std::path::Path;
 use std::process::{Child, Command};
 use std::sync::Mutex;
 use tauri::{Manager, State};
@@ -114,6 +115,51 @@ fn server_status(state: State<ServerState>) -> String {
     }
 }
 
+/// Scan a directory for .gguf model files.
+/// Returns a list of { name, path } objects.
+#[tauri::command]
+fn scan_models(dir: String) -> Result<Vec<ModelFile>, String> {
+    let path = Path::new(&dir);
+    if !path.exists() {
+        return Err(format!("Directory not found: {dir}"));
+    }
+    if !path.is_dir() {
+        return Err(format!("Not a directory: {dir}"));
+    }
+
+    let entries = std::fs::read_dir(path).map_err(|e| e.to_string())?;
+    let mut models = Vec::new();
+
+    for entry in entries.flatten() {
+        let p = entry.path();
+        if p.is_file() {
+            if let Some(ext) = p.extension() {
+                if ext.eq_ignore_ascii_case("gguf") {
+                    let name = p
+                        .file_name()
+                        .unwrap_or_default()
+                        .to_string_lossy()
+                        .to_string();
+                    let full_path = p.to_string_lossy().to_string();
+                    models.push(ModelFile {
+                        name,
+                        path: full_path,
+                    });
+                }
+            }
+        }
+    }
+
+    models.sort_by(|a, b| a.name.cmp(&b.name));
+    Ok(models)
+}
+
+#[derive(serde::Serialize, Clone)]
+pub struct ModelFile {
+    pub name: String,
+    pub path: String,
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -121,6 +167,7 @@ pub fn run() {
         .manage(ServerState(Mutex::new(None)))
         .invoke_handler(tauri::generate_handler![
             query_gpu,
+            scan_models,
             start_server,
             stop_server,
             server_status

tauri-app/src/components/ServerPanel.css

@@ -1,30 +1,35 @@
 .server-panel {
+  margin: 8px 10px;
+  border-radius: var(--radius);
+  background: var(--bg3);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  margin: 8px 12px;
   overflow: hidden;
-  background: var(--surface);
+  transition: box-shadow 0.2s;
 }
 
+.server-panel:has(.server-panel-body) {
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+}
+
+/* ── Header ── */
 .server-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  padding: 10px 12px;
   cursor: pointer;
   user-select: none;
   transition: background 0.15s;
 }
 
 .server-panel-header:hover {
-  background: var(--surface-hover, rgba(255,255,255,0.04));
+  background: rgba(255,255,255,0.03);
 }
 
 .server-panel-title {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
 }
 
 .server-status-dot {
@@ -32,146 +37,216 @@
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
-  transition: background 0.3s;
+  transition: background 0.3s, box-shadow 0.3s;
 }
 
 .server-panel-label {
-  color: var(--text-secondary, #9ca3af);
+  font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: 0.01em;
 }
 
-.server-status-text {
+.server-panel-header-right {
-  font-size: 11px;
+  display: flex;
-  font-weight: 600;
+  align-items: center;
-  letter-spacing: 0.02em;
+  gap: 8px;
+}
+
+.server-status-badge {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  transition: color 0.3s;
 }
 
 .server-panel-chevron {
-  font-size: 10px;
+  font-size: 9px;
-  color: var(--text-secondary, #9ca3af);
+  color: var(--text3);
+  transition: transform 0.2s;
 }
 
+/* ── Body ── */
 .server-panel-body {
   padding: 4px 12px 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   border-top: 1px solid var(--border);
+  animation: sp-expand 0.15s ease;
 }
 
-.sp-label {
+@keyframes sp-expand {
-  font-size: 11px;
+  from { opacity: 0; transform: translateY(-4px); }
-  color: var(--text-secondary, #9ca3af);
+  to   { opacity: 1; transform: translateY(0); }
-  margin-top: 6px;
-}
-
-.sp-input {
-  background: var(--input-bg, #1a1a1e);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text, #e5e7eb);
-  font-size: 12px;
-  padding: 6px 8px;
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-  transition: border-color 0.15s;
-}
-
-.sp-input:focus {
-  border-color: var(--accent, #5b6af0);
-}
-
-.sp-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.sp-input-num {
-  width: 80px;
-}
-
-.sp-actions {
-  margin-top: 8px;
-}
-
-.sp-btn {
-  width: 100%;
-  padding: 8px;
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
-}
-
-.sp-btn:active {
-  transform: scale(0.98);
-}
-
-.sp-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.sp-btn-start {
-  background: var(--accent, #5b6af0);
-  color: #fff;
-}
-
-.sp-btn-start:hover:not(:disabled) {
-  opacity: 0.88;
-}
-
-.sp-btn-stop {
-  background: #ef4444;
-  color: #fff;
-}
-
-.sp-btn-stop:hover:not(:disabled) {
-  opacity: 0.88;
-}
-
-.sp-message {
-  font-size: 11px;
-  color: #22c55e;
-  margin-top: 6px;
-  word-break: break-all;
-  line-height: 1.4;
-}
-
-.sp-message-error {
-  color: #ef4444;
 }
 
+/* ── GPU badge ── */
 .sp-gpu-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   font-size: 11px;
-  color: #22c55e;
+  font-weight: 500;
-  background: rgba(34, 197, 94, 0.08);
+  color: var(--success);
-  border: 1px solid rgba(34, 197, 94, 0.2);
+  background: rgba(48, 209, 88, 0.08);
-  border-radius: 5px;
+  border: 1px solid rgba(48, 209, 88, 0.18);
-  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  padding: 5px 8px;
   margin-top: 6px;
 }
 
 .sp-gpu-cpu {
-  color: #9ca3af;
+  color: var(--text2);
-  background: rgba(156, 163, 175, 0.08);
+  background: rgba(255,255,255,0.04);
-  border-color: rgba(156, 163, 175, 0.2);
+  border-color: var(--border);
 }
 
 .sp-gpu-loading {
-  color: #f59e0b;
+  color: var(--warning);
-  background: rgba(245, 158, 11, 0.08);
+  background: rgba(255, 214, 10, 0.07);
-  border-color: rgba(245, 158, 11, 0.2);
+  border-color: rgba(255, 214, 10, 0.2);
+}
+
+.sp-gpu-icon {
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.sp-gpu-vram {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text2);
+  background: rgba(255,255,255,0.06);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+/* ── Labels ── */
+.sp-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 8px;
 }
 
 .sp-label-hint {
-  color: var(--accent, #5b6af0);
+  color: var(--accent);
-  font-weight: 400;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
+/* ── Inputs ── */
+.sp-input {
+  background: var(--bg4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 12px;
+  padding: 7px 9px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.15s, background 0.15s;
+  font-family: inherit;
+}
+
+.sp-input:focus {
+  border-color: var(--accent);
+  background: var(--bg5);
+}
+
+.sp-input:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.sp-input-num {
+  width: 72px;
+}
+
+/* ── Directory row ── */
+.sp-dir-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.sp-dir-row .sp-input {
+  flex: 1;
+}
+
+.sp-scan-btn {
+  background: var(--bg5);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text2);
+  font-size: 14px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  font-family: inherit;
+}
+
+.sp-scan-btn:hover:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.sp-scan-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Model select ── */
+.sp-model-select {
+  background: var(--bg4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 12px;
+  padding: 7px 9px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.15s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 9px center;
+  padding-right: 28px;
+}
+
+.sp-model-select:focus {
+  border-color: var(--accent);
+}
+
+.sp-model-select:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.sp-scan-error {
+  font-size: 10px;
+  color: var(--danger);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+/* ── Layers row ── */
 .sp-layers-row {
   display: flex;
   align-items: center;
@@ -179,45 +254,50 @@
 }
 
 .sp-btn-max {
-  background: var(--accent, #5b6af0);
+  background: rgba(91,106,240,0.15);
-  color: #fff;
+  color: var(--accent);
-  border: none;
+  border: 1px solid rgba(91,106,240,0.3);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   padding: 5px 10px;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: background 0.15s, border-color 0.15s;
+  font-family: inherit;
+  white-space: nowrap;
 }
 
 .sp-btn-max:hover:not(:disabled) {
-  opacity: 0.85;
+  background: rgba(91,106,240,0.25);
+  border-color: var(--accent);
 }
 
 .sp-btn-max:disabled {
-  opacity: 0.4;
+  opacity: 0.35;
   cursor: not-allowed;
 }
 
 .sp-layers-hint {
   font-size: 11px;
-  color: #9ca3af;
+  color: var(--text3);
 }
 
+/* ── VRAM bar ── */
 .sp-vram-bar {
   position: relative;
-  height: 18px;
+  height: 20px;
-  background: rgba(255,255,255,0.06);
+  background: var(--bg4);
-  border-radius: 4px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   margin-top: 4px;
 }
 
 .sp-vram-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--accent, #5b6af0), #818cf8);
+  background: linear-gradient(90deg, var(--accent), #818cf8);
-  transition: width 0.3s ease;
+  transition: width 0.35s ease;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .sp-vram-label {
@@ -227,7 +307,84 @@
   align-items: center;
   justify-content: center;
   font-size: 10px;
-  color: #e5e7eb;
+  font-weight: 700;
-  font-weight: 600;
+  color: #fff;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
+  letter-spacing: 0.02em;
+}
+
+/* ── Action buttons ── */
+.sp-actions {
+  margin-top: 10px;
+}
+
+.sp-btn {
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
+  letter-spacing: 0.01em;
+  font-family: inherit;
+}
+
+.sp-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.sp-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.sp-btn-icon {
+  font-size: 11px;
+}
+
+.sp-btn-start {
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
+  color: #fff;
+  box-shadow: 0 2px 12px rgba(91,106,240,0.3);
+}
+
+.sp-btn-start:hover:not(:disabled) {
+  opacity: 0.9;
+  box-shadow: 0 4px 16px rgba(91,106,240,0.45);
+}
+
+.sp-btn-stop {
+  background: rgba(240,64,64,0.15);
+  color: var(--danger);
+  border: 1px solid rgba(240,64,64,0.3);
+}
+
+.sp-btn-stop:hover:not(:disabled) {
+  background: rgba(240,64,64,0.25);
+  border-color: var(--danger);
+}
+
+/* ── Status message ── */
+.sp-message {
+  font-size: 11px;
+  color: var(--success);
+  margin-top: 6px;
+  word-break: break-all;
+  line-height: 1.5;
+  padding: 5px 8px;
+  background: rgba(48,209,88,0.07);
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(48,209,88,0.15);
+}
+
+.sp-message-error {
+  color: var(--danger);
+  background: rgba(240,64,64,0.07);
+  border-color: rgba(240,64,64,0.2);
 }

tauri-app/src/components/ServerPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { ProcessStatus, ServerConfig } from "../hooks/useServerProcess";
 import "./ServerPanel.css";
@@ -16,6 +16,11 @@ interface GpuInfo {
   recommended_layers: number;
 }
 
+interface ModelFile {
+  name: string;
+  path: string;
+}
+
 const STATUS_LABEL: Record<ProcessStatus, string> = {
   stopped: "Stopped",
   starting: "Starting…",
@@ -32,8 +37,15 @@ const STATUS_COLOR: Record<ProcessStatus, string> = {
   error: "#ef4444",
 };
 
+// Default models directory relative to the repo root
+const DEFAULT_MODELS_DIR = "models";
+
 export default function ServerPanel({ status, message, onStart, onStop }: Props) {
-  const [modelPath, setModelPath] = useState(
+  const [modelsDir, setModelsDir] = useState(
+    () => localStorage.getItem("forgelm_models_dir") || DEFAULT_MODELS_DIR
+  );
+  const [scannedModels, setScannedModels] = useState<ModelFile[]>([]);
+  const [selectedModel, setSelectedModel] = useState(
     () => localStorage.getItem("forgelm_model_path") || ""
   );
   const [addr, setAddr] = useState(
@@ -44,35 +56,62 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
   );
   const [gpuInfo, setGpuInfo] = useState<GpuInfo | null>(null);
   const [gpuError, setGpuError] = useState<string>("");
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(true);
+  const [scanning, setScanning] = useState(false);
+  const [scanError, setScanError] = useState("");
 
-  // Detect GPU on mount
+  const scanModels = useCallback(async (dir: string) => {
+    if (!dir.trim()) return;
+    setScanning(true);
+    setScanError("");
+    try {
+      const models = await invoke<ModelFile[]>("scan_models", { dir: dir.trim() });
+      setScannedModels(models);
+      // Auto-select first model if none selected or current not in list
+      if (models.length > 0) {
+        const current = localStorage.getItem("forgelm_model_path") || "";
+        const stillValid = models.some((m) => m.path === current);
+        if (!stillValid) {
+          setSelectedModel(models[0].path);
+        }
+      }
+    } catch (e) {
+      setScanError(String(e));
+      setScannedModels([]);
+    } finally {
+      setScanning(false);
+    }
+  }, []);
+
+  // Detect GPU and scan models on mount
   useEffect(() => {
     invoke<GpuInfo>("query_gpu")
       .then((info) => {
         setGpuInfo(info);
-        // Only auto-set if user hasn't saved a preference yet
         if (!localStorage.getItem("forgelm_gpu_layers")) {
           setGpuLayers(info.recommended_layers);
         }
       })
       .catch((e) => {
         setGpuError(String(e));
-        // Default to CPU-only if no GPU
         if (!localStorage.getItem("forgelm_gpu_layers")) {
           setGpuLayers(0);
         }
       });
-  }, []);
+
+    scanModels(modelsDir);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const isActive = status === "running" || status === "starting" || status === "stopping";
   const maxLayers = gpuInfo ? gpuInfo.recommended_layers : 999;
+  const canStart = !!selectedModel.trim() && !isActive;
 
   const handleStart = () => {
-    localStorage.setItem("forgelm_model_path", modelPath);
+    localStorage.setItem("forgelm_model_path", selectedModel);
     localStorage.setItem("forgelm_server_addr", addr);
     localStorage.setItem("forgelm_gpu_layers", String(gpuLayers));
-    onStart({ modelPath, addr, gpuLayers });
+    localStorage.setItem("forgelm_models_dir", modelsDir);
+    onStart({ modelPath: selectedModel, addr, gpuLayers });
   };
 
   const handleLayersChange = (val: number) => {
@@ -80,48 +119,108 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     setGpuLayers(clamped);
   };
 
+  const handleScanDir = () => {
+    localStorage.setItem("forgelm_models_dir", modelsDir);
+    scanModels(modelsDir);
+  };
+
+  const vramPct = gpuInfo && gpuLayers > 0
+    ? Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)
+    : 0;
+
   return (
     <div className="server-panel">
+      {/* Header */}
       <div className="server-panel-header" onClick={() => setExpanded(!expanded)}>
         <div className="server-panel-title">
-          <span
+          <span className="server-status-dot" style={{ background: STATUS_COLOR[status] }} />
-            className="server-status-dot"
-            style={{ background: STATUS_COLOR[status] }}
-          />
           <span className="server-panel-label">Local Server</span>
-          <span className="server-status-text" style={{ color: STATUS_COLOR[status] }}>
+        </div>
+        <div className="server-panel-header-right">
+          <span className="server-status-badge" style={{ color: STATUS_COLOR[status] }}>
             {STATUS_LABEL[status]}
           </span>
+          <span className="server-panel-chevron">{expanded ? "▲" : "▼"}</span>
         </div>
-        <span className="server-panel-chevron">{expanded ? "▲" : "▼"}</span>
       </div>
 
       {expanded && (
         <div className="server-panel-body">
-          {/* GPU info badge */}
+          {/* GPU badge */}
           {gpuInfo ? (
             <div className="sp-gpu-badge">
-              🎮 {gpuInfo.name} — {(gpuInfo.vram_mib / 1024).toFixed(1)} GB VRAM
+              <span className="sp-gpu-icon">⚡</span>
+              <span>{gpuInfo.name}</span>
+              <span className="sp-gpu-vram">{(gpuInfo.vram_mib / 1024).toFixed(1)} GB</span>
             </div>
           ) : gpuError ? (
             <div className="sp-gpu-badge sp-gpu-cpu">
-              💻 CPU only — {gpuError.includes("not found") ? "No NVIDIA GPU" : gpuError}
+              <span className="sp-gpu-icon">🖥</span>
+              <span>CPU only</span>
             </div>
           ) : (
-            <div className="sp-gpu-badge sp-gpu-loading">🔍 Detecting GPU…</div>
+            <div className="sp-gpu-badge sp-gpu-loading">
+              <span className="sp-gpu-icon">⟳</span>
+              <span>Detecting GPU…</span>
+            </div>
           )}
 
-          <label className="sp-label">Model path (.gguf)</label>
+          {/* Models directory */}
-          <input
+          <label className="sp-label">Models directory</label>
-            className="sp-input"
+          <div className="sp-dir-row">
-            type="text"
+            <input
-            value={modelPath}
+              className="sp-input"
-            onChange={(e) => setModelPath(e.target.value)}
+              type="text"
-            placeholder="models/your-model.gguf"
+              value={modelsDir}
-            disabled={isActive}
+              onChange={(e) => setModelsDir(e.target.value)}
-          />
+              onKeyDown={(e) => e.key === "Enter" && handleScanDir()}
+              placeholder="models/"
+              disabled={isActive}
+            />
+            <button
+              className="sp-scan-btn"
+              onClick={handleScanDir}
+              disabled={isActive || scanning}
+              title="Scan for .gguf files"
+            >
+              {scanning ? "…" : "⟳"}
+            </button>
+          </div>
 
-          <label className="sp-label">Address</label>
+          {/* Model selector */}
+          <label className="sp-label">
+            Model
+            {scannedModels.length > 0 && (
+              <span className="sp-label-hint"> ({scannedModels.length} found)</span>
+            )}
+          </label>
+          {scannedModels.length > 0 ? (
+            <select
+              className="sp-model-select"
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              disabled={isActive}
+            >
+              {scannedModels.map((m) => (
+                <option key={m.path} value={m.path} title={m.path}>
+                  {m.name}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              className="sp-input"
+              type="text"
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              placeholder="path/to/model.gguf"
+              disabled={isActive}
+            />
+          )}
+          {scanError && <div className="sp-scan-error">{scanError}</div>}
+
+          {/* Address */}
+          <label className="sp-label">Listen address</label>
           <input
             className="sp-input"
             type="text"
@@ -131,10 +230,11 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
             disabled={isActive}
           />
 
+          {/* GPU Layers */}
           <label className="sp-label">
-            GPU Layers
+            GPU layers
             {gpuInfo && (
-              <span className="sp-label-hint"> (max {gpuInfo.recommended_layers} for your GPU)</span>
+              <span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>
             )}
           </label>
           <div className="sp-layers-row">
@@ -157,31 +257,29 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
                 Max
               </button>
             )}
-            {gpuLayers === 0 && (
+            {gpuLayers === 0 && <span className="sp-layers-hint">CPU only</span>}
-              <span className="sp-layers-hint">CPU only</span>
-            )}
           </div>
 
+          {/* VRAM bar */}
           {gpuInfo && gpuLayers > 0 && (
             <div className="sp-vram-bar">
-              <div
+              <div className="sp-vram-fill" style={{ width: `${vramPct}%` }} />
-                className="sp-vram-fill"
-                style={{ width: `${Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)}%` }}
-              />
               <span className="sp-vram-label">
                 ~{Math.round(gpuLayers * 80)} MB / {gpuInfo.vram_mib} MB VRAM
               </span>
             </div>
           )}
 
+          {/* Action button */}
           <div className="sp-actions">
             {status === "stopped" || status === "error" ? (
               <button
                 className="sp-btn sp-btn-start"
                 onClick={handleStart}
-                disabled={!modelPath.trim()}
+                disabled={!canStart}
+                title={!selectedModel ? "Select a model first" : ""}
               >
-                ▶ Start Server
+                <span className="sp-btn-icon">▶</span> Start Server
               </button>
             ) : (
               <button
@@ -189,7 +287,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
                 onClick={onStop}
                 disabled={status === "starting" || status === "stopping"}
               >
-                ■ Stop Server
+                <span className="sp-btn-icon">■</span> Stop Server
               </button>
             )}
           </div>

tauri-app/src/components/Sidebar.css

@@ -1,6 +1,6 @@
 .sidebar {
-  width: 260px;
+  width: 280px;
-  min-width: 260px;
+  min-width: 280px;
   background: var(--bg2);
   border-right: 1px solid var(--border);
   display: flex;
@@ -8,54 +8,93 @@
   overflow: hidden;
 }
 
-/* Header */
+/* ── Header ── */
 .sidebar-header {
   display: flex;
   align-items: center;
   padding: 14px 14px 12px;
   border-bottom: 1px solid var(--border);
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .sidebar-brand {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 9px;
   flex: 1;
+  min-width: 0;
 }
 
-.brand-icon { font-size: 1.1rem; }
+.brand-icon {
-.brand-name { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(91,106,240,0.35);
+}
+
+.brand-name {
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #e8e8ed, #9ca3af);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 
 .icon-btn {
   background: none;
   border: none;
-  color: var(--text2);
+  color: var(--text3);
   cursor: pointer;
-  font-size: 1rem;
+  font-size: 15px;
-  padding: 4px 6px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--radius-sm);
   transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
   line-height: 1;
 }
-.icon-btn:hover { background: var(--bg4); color: var(--text); }
 
-/* Settings */
+.icon-btn:hover {
+  background: var(--bg4);
+  color: var(--text);
+}
+
+/* ── Settings panel ── */
 .settings-panel {
-  padding: 12px 14px;
+  padding: 10px 12px 12px;
   border-bottom: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   background: var(--bg3);
+  animation: slide-down 0.15s ease;
+  flex-shrink: 0;
+}
+
+@keyframes slide-down {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
 .settings-label {
-  font-size: 0.7rem;
+  font-size: 10px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--text3);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
+  margin-top: 4px;
 }
 
 .settings-input {
@@ -63,24 +102,40 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text);
-  font-size: 0.8rem;
+  font-size: 12px;
-  padding: 6px 10px;
+  padding: 7px 10px;
   outline: none;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, background 0.15s;
   font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
 }
-.settings-input:focus { border-color: var(--accent); }
 
-/* Model section */
+.settings-input:focus {
+  border-color: var(--accent);
+  background: var(--bg5);
+}
+
+/* ── Model section ── */
 .model-section {
-  padding: 10px 14px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.model-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
 }
 
 .model-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
 }
 
 .status-dot {
@@ -88,13 +143,27 @@
   height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
-  transition: background 0.3s;
+  transition: background 0.3s, box-shadow 0.3s;
 }
-.status-dot.status-ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
-.status-dot.status-error { background: var(--danger); }
-.status-dot.status-loading { background: var(--warning); animation: pulse 1s infinite; }
 
-@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+.status-dot.status-ok {
+  background: var(--success);
+  box-shadow: 0 0 6px rgba(48,209,88,0.5);
+}
+
+.status-dot.status-error {
+  background: var(--danger);
+}
+
+.status-dot.status-loading {
+  background: var(--warning);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
 
 .model-select {
   flex: 1;
@@ -102,45 +171,73 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text);
-  font-size: 0.78rem;
+  font-size: 12px;
-  padding: 5px 8px;
+  padding: 6px 28px 6px 9px;
   outline: none;
   cursor: pointer;
   min-width: 0;
   font-family: inherit;
+  transition: border-color 0.15s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
 }
-.model-select:focus { border-color: var(--accent); }
 
-/* Actions */
+.model-select:focus {
+  border-color: var(--accent);
+}
+
+/* ── Sidebar actions ── */
 .sidebar-actions {
-  padding: 10px 14px 6px;
+  padding: 10px 12px 6px;
+  flex-shrink: 0;
 }
 
 .new-chat-btn {
   width: 100%;
-  background: var(--accent);
+  background: linear-gradient(135deg, var(--accent), #7c3aed);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
-  padding: 8px 12px;
+  padding: 9px 12px;
-  font-size: 0.82rem;
+  font-size: 13px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 7px;
-  transition: background 0.15s, transform 0.1s;
+  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
   font-family: inherit;
+  letter-spacing: 0.01em;
+  box-shadow: 0 2px 10px rgba(91,106,240,0.25);
+}
+
+.new-chat-btn:hover {
+  opacity: 0.9;
+  box-shadow: 0 4px 16px rgba(91,106,240,0.4);
+}
+
+.new-chat-btn:active {
+  transform: scale(0.98);
+}
+
+/* ── Chat list ── */
+.chat-list-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 8px 12px 4px;
+  flex-shrink: 0;
 }
-.new-chat-btn:hover { background: var(--accent2); }
-.new-chat-btn:active { transform: scale(0.98); }
 
-/* Chat list */
 .chat-list {
   flex: 1;
   overflow-y: auto;
-  padding: 6px 8px;
+  padding: 4px 8px 8px;
   display: flex;
   flex-direction: column;
   gap: 1px;
@@ -149,8 +246,9 @@
 .chat-list-empty {
   text-align: center;
   color: var(--text3);
-  font-size: 0.8rem;
+  font-size: 12px;
-  padding: 20px 0;
+  padding: 24px 0;
+  line-height: 1.6;
 }
 
 .chat-item {
@@ -160,46 +258,81 @@
   padding: 8px 10px;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.82rem;
+  font-size: 13px;
   color: var(--text2);
-  transition: background 0.1s, color 0.1s;
+  transition: background 0.12s, color 0.12s;
   position: relative;
+  border-left: 2px solid transparent;
 }
-.chat-item:hover { background: var(--bg3); color: var(--text); }
-.chat-item.active { background: var(--bg4); color: var(--text); }
 
-.chat-item-icon { font-size: 0.85rem; flex-shrink: 0; opacity: 0.6; }
+.chat-item:hover {
+  background: var(--bg3);
+  color: var(--text);
+}
+
+.chat-item.active {
+  background: rgba(91,106,240,0.1);
+  color: var(--text);
+  border-left-color: var(--accent);
+}
+
+.chat-item-icon {
+  font-size: 13px;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.chat-item.active .chat-item-icon {
+  opacity: 0.8;
+}
 
 .chat-item-title {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 13px;
 }
 
 .chat-item-del {
   opacity: 0;
   background: none;
   border: none;
-  color: var(--danger);
+  color: var(--text3);
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 12px;
-  padding: 2px 5px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 4px;
-  line-height: 1;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
-  transition: opacity 0.15s, background 0.15s;
   flex-shrink: 0;
+  line-height: 1;
 }
-.chat-item:hover .chat-item-del { opacity: 1; }
-.chat-item-del:hover { background: rgba(240,64,64,0.15); }
 
-/* Footer */
+.chat-item:hover .chat-item-del {
+  opacity: 1;
+}
+
+.chat-item-del:hover {
+  background: rgba(240,64,64,0.15);
+  color: var(--danger);
+}
+
+/* ── Footer ── */
 .sidebar-footer {
-  padding: 10px 14px;
+  padding: 8px 14px;
   border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
 }
 
 .footer-version {
-  font-size: 0.7rem;
+  font-size: 10px;
   color: var(--text3);
+  letter-spacing: 0.02em;
 }

tauri-app/src/components/Sidebar.tsx

@@ -37,26 +37,22 @@ export default function Sidebar({
 
   return (
     <aside className="sidebar">
-      {/* Header */}
+      {/* ── Header ── */}
       <div className="sidebar-header">
         <div className="sidebar-brand">
-          <span className="brand-icon">⚡</span>
+          <div className="brand-icon">⚡</div>
           <span className="brand-name">ForgeLM</span>
         </div>
-        <button className="icon-btn" onClick={() => setShowSettings(!showSettings)} title="Settings">
+        <button
+          className="icon-btn"
+          onClick={() => setShowSettings(!showSettings)}
+          title="Connection settings"
+        >
           ⚙
         </button>
       </div>
 
-      {/* Server process control */}
+      {/* ── Connection settings ── */}
-      <ServerPanel
-        status={serverProcess.status}
-        message={serverProcess.message}
-        onStart={serverProcess.start}
-        onStop={serverProcess.stop}
-      />
-
-      {/* Settings panel */}
       {showSettings && (
         <div className="settings-panel">
           <label className="settings-label">Server URL</label>
@@ -79,7 +75,15 @@ export default function Sidebar({
         </div>
       )}
 
-      {/* Model selector */}
+      {/* ── Local server control ── */}
+      <ServerPanel
+        status={serverProcess.status}
+        message={serverProcess.message}
+        onStart={serverProcess.start}
+        onStop={serverProcess.stop}
+      />
+
+      {/* ── Active model selector ── */}
       <div className="model-section">
         <div className="model-row">
           <div className={`status-dot status-${status}`} title={status} />
@@ -88,9 +92,10 @@ export default function Sidebar({
             value={selectedModel}
             onChange={(e) => onModelChange(e.target.value)}
             disabled={models.length === 0}
+            title={models.length === 0 ? "Start the server to load models" : ""}
           >
             {models.length === 0 ? (
-              <option value="">No models</option>
+              <option value="">Start server to load models</option>
             ) : (
               models.map((m) => (
                 <option key={m.id} value={m.id}>{m.id}</option>
@@ -101,17 +106,22 @@ export default function Sidebar({
         </div>
       </div>
 
-      {/* New chat button */}
+      {/* ── New chat ── */}
       <div className="sidebar-actions">
         <button className="new-chat-btn" onClick={onNewChat}>
-          <span>+</span> New Chat
+          <span>＋</span> New Chat
         </button>
       </div>
 
-      {/* Chat list */}
+      {/* ── Chat list ── */}
+      {chats.length > 0 && (
+        <div className="chat-list-section-label">Conversations</div>
+      )}
       <nav className="chat-list">
         {chats.length === 0 && (
-          <div className="chat-list-empty">No chats yet</div>
+          <div className="chat-list-empty">
+            No conversations yet.<br />Start a new chat above.
+          </div>
         )}
         {chats.map((chat) => (
           <div
@@ -124,15 +134,15 @@ export default function Sidebar({
             <button
               className="chat-item-del"
               onClick={(e) => { e.stopPropagation(); onDeleteChat(chat.id); }}
-              title="Delete"
+              title="Delete conversation"
             >✕</button>
           </div>
         ))}
       </nav>
 
-      {/* Footer */}
+      {/* ── Footer ── */}
       <div className="sidebar-footer">
-        <span className="footer-version">ForgeLM Chat v0.1</span>
+        <span className="footer-version">ForgeLM v0.1.0</span>
       </div>
     </aside>
   );