leedab 0.2.2 → 0.2.4

package/dist/dashboard/routes.js

@@ -145,7 +145,7 @@ export function createRoutes(config) {
             }
         },
         /**
-         * GET /api/whoami — current OS user's first name
+         * GET /api/whoami — current OS user's first name + configured agent name
          */
         "GET /api/whoami": async (_req, res) => {
             let firstName = userInfo().username;
@@ -156,7 +156,7 @@ export function createRoutes(config) {
                     firstName = fullName.split(/\s+/)[0];
             }
             catch { }
-            json(res, { name: firstName });
+            json(res, { name: firstName, agent: config.agent?.name ?? "LeedAB" });
         },
         /**
          * GET /api/status — channel health status

package/dist/dashboard/static/admin.html

@@ -11,7 +11,8 @@
   <style>
     .page-header { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:52px; border-bottom:1px solid var(--border); background:var(--bg); }
     .page-header-left { display:flex; align-items:center; gap:10px; }
-    .page-header-title { font-size:13px; font-weight:700; letter-spacing:-0.01em; }
+    .page-header-title { display:flex; align-items:center; }
+    .page-header-title .logo-img { height:22px; width:auto; display:block; }
     .page-nav { display:flex; align-items:center; gap:2px; }
     .page-nav a, .page-nav button { color:var(--text-dim); text-decoration:none; display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:450; transition:all 0.15s; background:none; border:none; cursor:pointer; font-family:inherit; }
     .page-nav a:hover, .page-nav button:hover { color:var(--text-secondary); background:var(--surface-raised); }
@@ -56,7 +57,7 @@
 
   <div class="page-header">
     <div class="page-header-left">
-      <a href="/" class="page-header-title" style="text-decoration:none;color:inherit">LeedAB</a>
+      <a href="/" class="page-header-title" aria-label="LeedAB"><img class="logo-img" alt="LeedAB"></a>
     </div>
     <div class="page-nav">
       <button class="theme-btn" onclick="toggleTheme()" title="Toggle theme">
@@ -272,6 +273,7 @@
       const saved = localStorage.getItem("leedab-theme") || "dark";
       document.documentElement.setAttribute("data-theme", saved);
       updateThemeIcon(saved);
+      updateLogo(saved);
     }
     function toggleTheme() {
       const current = document.documentElement.getAttribute("data-theme") || "dark";
@@ -279,6 +281,11 @@
       document.documentElement.setAttribute("data-theme", next);
       localStorage.setItem("leedab-theme", next);
       updateThemeIcon(next);
+      updateLogo(next);
+    }
+    function updateLogo(theme) {
+      const src = theme === "dark" ? "/logo-dark.png" : "/logo-light.png";
+      document.querySelectorAll(".logo-img").forEach(img => img.src = src);
     }
     function updateThemeIcon(theme) {
       const sun = document.getElementById("theme-icon-sun");

package/dist/dashboard/static/index.html

@@ -75,9 +75,14 @@
     }
 
     .header-title {
-      font-size: 13px;
-      font-weight: 700;
-      letter-spacing: -0.01em;
+      display: flex;
+      align-items: center;
+    }
+
+    .header-logo {
+      height: 22px;
+      width: auto;
+      display: block;
     }
 
 
@@ -105,6 +110,40 @@
       background: var(--surface-raised);
     }
 
+    /* ── Main column below header ── */
+    .main-col {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    /* Empty state: center the chat content + input bar together */
+    body.empty-mode .main-col {
+      justify-content: center;
+      padding-top: 5vh;
+    }
+    body.empty-mode .chat-wrap {
+      flex: 0 0 auto;
+      overflow: visible;
+    }
+    body.empty-mode .chat-wrap::before,
+    body.empty-mode .chat-wrap::after {
+      display: none;
+    }
+    body.empty-mode .chat-area {
+      height: auto;
+      overflow: visible;
+      padding: 0 24px;
+    }
+    body.empty-mode .empty-state {
+      flex: 0 0 auto;
+      padding: 0;
+    }
+    body.empty-mode .input-bar {
+      padding-top: 36px;
+    }
+
     /* ── Chat area ── */
     .chat-wrap {
       flex: 1;
@@ -355,64 +394,44 @@
       align-items: center;
       justify-content: center;
       text-align: center;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .empty-state.ready {
+      opacity: 1;
     }
 
     .empty-inner {
       max-width: 480px;
     }
 
-    .empty-logo {
-      width: 48px;
-      height: 48px;
-      border-radius: 14px;
-      margin: 0 auto 20px;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .empty-logo img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .empty-logo::after {
-      content: '';
-      position: absolute;
-      inset: -8px;
-      border-radius: 20px;
-      background: var(--accent);
-      opacity: 0.06;
-      filter: blur(16px);
-      z-index: -1;
-    }
-
     .empty-state h3 {
-      font-size: 20px;
+      font-size: 26px;
       font-weight: 600;
-      margin-bottom: 6px;
+      margin-bottom: 4px;
       color: var(--text);
-      letter-spacing: -0.02em;
+      letter-spacing: -0.03em;
     }
 
-    .empty-state p {
-      font-size: 14px;
+    .empty-subtitle {
+      font-size: 15px;
       color: var(--text-dim);
       line-height: 1.5;
+      margin: 0;
     }
 
     .suggestions {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 8px;
-      margin-top: 24px;
+      gap: 12px;
+      margin-top: 44px;
     }
 
     .suggestion {
       display: flex;
       align-items: flex-start;
-      gap: 10px;
-      padding: 14px;
+      gap: 14px;
+      padding: 18px;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
@@ -424,6 +443,18 @@
       text-align: left;
     }
 
+    .suggestion-icon {
+      flex-shrink: 0;
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--accent-soft);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+    }
+
     .suggestion:hover {
       border-color: var(--accent);
       background: var(--accent-soft);
@@ -431,6 +462,11 @@
       transform: translateY(-1px);
     }
 
+    .suggestion:hover .suggestion-icon {
+      background: var(--accent);
+      color: white;
+    }
+
     .suggestion:active {
       transform: translateY(0);
     }
@@ -487,11 +523,13 @@
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 4px 4px 4px 16px;
-      transition: border-color 0.2s;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
     }
 
     .input-wrap:focus-within {
       border-color: var(--border-hover);
+      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
     }
 
     .input-wrap textarea {
@@ -542,13 +580,14 @@
       font-size: 11px;
       color: var(--text-faint);
       margin-top: 8px;
+      opacity: 0.6;
     }
   </style>
 </head>
 <body>
   <div class="header">
     <div class="header-left">
-      <a href="/" class="header-title" style="text-decoration:none;color:inherit">LeedAB</a>
+      <a href="/" class="header-title" aria-label="LeedAB"><img class="logo-img header-logo" alt="LeedAB"></a>
     </div>
     <div class="header-nav">
       <a href="/admin">
@@ -566,13 +605,13 @@
     </div>
   </div>
 
+  <div class="main-col">
   <div class="chat-wrap">
     <div class="chat-area" id="chat-area">
       <div class="empty-state" id="empty-state">
         <div class="empty-inner">
-          <div class="empty-logo"><img class="logo-img" alt="LeedAB"></div>
-          <h3>How can I help?</h3>
-          <p></p>
+          <h3 id="empty-greeting"></h3>
+          <p class="empty-subtitle" id="empty-subtitle">What can I help with?</p>
           <div class="suggestions">
             <div class="suggestion" onclick="sendSuggestion('Which deliveries are delayed today and what\'s the estimated impact on SLAs?')">
               <div class="suggestion-icon">
@@ -627,6 +666,7 @@
     </div>
     <div class="disclaimer">LeedAB is AI. Verify important information.</div>
   </div>
+  </div>
 
   <script>
     // Theme
@@ -646,18 +686,46 @@
     const input = document.getElementById("msg-input");
     const sendBtn = document.getElementById("send-btn");
 
+    // Empty-mode centers the welcome + input together; drop it as soon as
+    // the conversation starts so the input pins back to the bottom.
+    if (emptyState) document.body.classList.add("empty-mode");
+    function exitEmptyMode() {
+      document.body.classList.remove("empty-mode");
+      exitEmptyMode();
+    }
+
     // Session: "console" default, or from URL for viewing history
     const params = new URLSearchParams(window.location.search);
     let sessionId = params.get("session") || "console";
 
     let userName = "You";
     let userInitial = "Y";
+    let agentName = "LeedAB";
     fetch("/api/whoami").then(r => r.json()).then(d => {
       if (d.name) {
         userName = d.name;
         userInitial = d.name.charAt(0).toUpperCase();
       }
-    }).catch(() => {});
+      if (d.agent) {
+        agentName = d.agent;
+        input.placeholder = `Message ${agentName}...`;
+        const disc = document.querySelector(".disclaimer");
+        if (disc) disc.textContent = `${agentName} is AI. Verify important information.`;
+        document.title = agentName;
+      }
+      // Time-aware greeting
+      const greet = document.getElementById("empty-greeting");
+      if (greet) {
+        const h = new Date().getHours();
+        const tod = h < 12 ? "Good morning" : h < 17 ? "Good afternoon" : "Good evening";
+        greet.textContent = d.name ? `${tod}, ${d.name}.` : tod + ".";
+      }
+      if (emptyState) emptyState.classList.add("ready");
+    }).catch(() => {
+      const greet = document.getElementById("empty-greeting");
+      if (greet) greet.textContent = "How can I help?";
+      if (emptyState) emptyState.classList.add("ready");
+    });
 
     input.addEventListener("input", () => {
       input.style.height = "auto";
@@ -687,7 +755,7 @@
       const text = input.value.trim();
       if (!text) return;
 
-      if (emptyState) emptyState.remove();
+      exitEmptyMode();
 
       appendMessage(text, "user");
       input.value = "";
@@ -725,7 +793,7 @@
         const res = await fetch(`/api/chat/history?session=${encodeURIComponent(sid)}`);
         const messages = await res.json();
         if (messages.length) {
-          if (emptyState) emptyState.remove();
+          exitEmptyMode();
           for (const m of messages) {
             const type = m.role === "user" ? "user" : "agent";
             appendMessage(m.text || m.content || "", type, m.thoughts);
@@ -759,7 +827,7 @@
 
       const meta = document.createElement("div");
       meta.className = "msg-meta";
-      meta.innerHTML = `<span class="msg-name">${type === "agent" ? "LeedAB" : userName}</span><span class="msg-time">${now()}</span>`;
+      meta.innerHTML = `<span class="msg-name">${type === "agent" ? agentName : userName}</span><span class="msg-time">${now()}</span>`;
 
       content.appendChild(meta);
 

package/dist/dashboard/static/sessions.html

@@ -11,7 +11,8 @@
   <style>
     .page-header { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:52px; border-bottom:1px solid var(--border); background:var(--bg); }
     .page-header-left { display:flex; align-items:center; gap:10px; }
-    .page-header-title { font-size:13px; font-weight:700; letter-spacing:-0.01em; }
+    .page-header-title { display:flex; align-items:center; }
+    .page-header-title .logo-img { height:22px; width:auto; display:block; }
     .page-nav { display:flex; align-items:center; gap:2px; }
     .page-nav a, .page-nav button { color:var(--text-dim); text-decoration:none; display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:450; transition:all 0.15s; background:none; border:none; cursor:pointer; font-family:inherit; }
     .page-nav a:hover, .page-nav button:hover { color:var(--text-secondary); background:var(--surface-raised); }
@@ -20,7 +21,7 @@
 
   <div class="page-header">
     <div class="page-header-left">
-      <a href="/" class="page-header-title" style="text-decoration:none;color:inherit">LeedAB</a>
+      <a href="/" class="page-header-title" aria-label="LeedAB"><img class="logo-img" alt="LeedAB"></a>
     </div>
     <div class="page-nav">
     </div>
@@ -102,6 +103,8 @@
     function initTheme() {
       const saved = localStorage.getItem("leedab-theme") || "dark";
       document.documentElement.setAttribute("data-theme", saved);
+      const src = saved === "dark" ? "/logo-dark.png" : "/logo-light.png";
+      document.querySelectorAll(".logo-img").forEach(img => img.src = src);
     }
     initTheme();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leedab",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "LeedAB — Your enterprise AI agent. Local-first, private by default.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "LeedAB <hello@leedab.com>",