@lovenyberg/ove 0.2.2 → 0.4.0

package/public/index.html

@@ -4,80 +4,468 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ove</title>
+  <link rel="icon" href="/favicon.ico">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: monospace; background: #1a1a1a; color: #e0e0e0; height: 100vh; display: flex; flex-direction: column; }
-    #messages { flex: 1; overflow-y: auto; padding: 1rem; }
-    .msg { margin-bottom: 0.75rem; white-space: pre-wrap; }
-    .msg.user { color: #8ab4f8; }
-    .msg.ove { color: #e0e0e0; }
-    .msg.status { color: #888; font-size: 0.85rem; }
-    .msg.error { color: #f28b82; }
-    #input-bar { display: flex; padding: 0.5rem; border-top: 1px solid #333; }
-    #input-bar input { flex: 1; background: #2a2a2a; border: 1px solid #444; color: #e0e0e0; padding: 0.5rem; font-family: monospace; font-size: 1rem; }
-    #input-bar button { background: #333; color: #e0e0e0; border: 1px solid #444; padding: 0.5rem 1rem; cursor: pointer; font-family: monospace; }
-    #input-bar button:hover { background: #444; }
+
+    :root {
+      --bg: #1a1a1a;
+      --bg-panel: #161616;
+      --bg-item: #1e1e1e;
+      --bg-item-hover: #252525;
+      --bg-item-active: #2a2a2a;
+      --border: #2a2a2a;
+      --border-light: #333;
+      --text: #e0e0e0;
+      --text-dim: #777;
+      --text-muted: #555;
+      --accent: #8ab4f8;
+      --green: #4ade80;
+      --green-dim: #16361f;
+      --red: #f28b82;
+      --red-dim: #3b1a1a;
+      --amber: #fbbf24;
+      --amber-dim: #3b2e0a;
+      --cyan: #22d3ee;
+      --cyan-dim: #0a2e33;
+    }
+
+    body {
+      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+      background: var(--bg);
+      color: var(--text);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-panel);
+      flex-shrink: 0;
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .header-logo {
+      width: 24px;
+      height: 24px;
+      border-radius: 3px;
+      object-fit: cover;
+    }
+
+    .header-left h1 {
+      font-size: 0.85rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+    }
+
+    .nav-link {
+      color: var(--text-dim);
+      text-decoration: none;
+      font-size: 0.7rem;
+      padding: 0.2rem 0.5rem;
+      border: 1px solid var(--border);
+      border-radius: 3px;
+      transition: all 0.15s;
+    }
+    .nav-link:hover { color: var(--text); border-color: var(--border-light); }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .layout {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    /* ── Sidebar ── */
+    .sidebar {
+      width: 280px;
+      min-width: 200px;
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      background: var(--bg-panel);
+      flex-shrink: 0;
+      transition: width 0.2s;
+    }
+
+    .sidebar.collapsed { width: 0; min-width: 0; overflow: hidden; border-right: none; }
+
+    .sidebar-toggle {
+      background: none;
+      border: 1px solid var(--border);
+      color: var(--text-dim);
+      font-family: inherit;
+      font-size: 0.7rem;
+      padding: 0.2rem 0.5rem;
+      border-radius: 3px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .sidebar-toggle:hover { color: var(--text); border-color: var(--border-light); }
+
+    .sidebar-section {
+      border-bottom: 1px solid var(--border);
+    }
+
+    .sidebar-section-header {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.6rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .sidebar-section-count {
+      color: var(--text-dim);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .sidebar-list {
+      overflow-y: auto;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+    }
+
+    .sidebar-history { flex: 1; }
+
+    .sidebar-item {
+      padding: 0.45rem 0.75rem;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+      transition: background 0.1s;
+      position: relative;
+    }
+
+    .sidebar-item:hover { background: var(--bg-item-hover); }
+    .sidebar-item.active { background: var(--bg-item-active); }
+    .sidebar-item.active::before {
+      content: '';
+      position: absolute;
+      left: 0; top: 0; bottom: 0;
+      width: 2px;
+      background: var(--accent);
+    }
+
+    .history-row {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      margin-bottom: 0.15rem;
+    }
+
+    .history-item-content {
+      font-size: 0.65rem;
+      color: var(--text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.3;
+      flex: 1;
+    }
+
+    .history-item-preview {
+      font-size: 0.6rem;
+      color: var(--text-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.3;
+    }
+
+    .history-item-time {
+      font-size: 0.55rem;
+      color: var(--text-muted);
+      font-variant-numeric: tabular-nums;
+      flex-shrink: 0;
+    }
+
+    /* ── Chat area ── */
+    .chat-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    #messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+    }
+
+    .msg {
+      margin-bottom: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.8rem;
+      line-height: 1.5;
+    }
+    .msg.user { color: var(--accent); }
+    .msg.ove { color: var(--text); display: flex; gap: 0.5rem; align-items: flex-start; }
+    .msg.ove .ove-avatar { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
+    .msg.ove .ove-text { flex: 1; }
+    .msg.status { color: var(--text-muted); font-size: 0.75rem; }
+    .msg.error { color: var(--red); }
+    .msg.system {
+      color: var(--text-muted);
+      font-size: 0.7rem;
+      text-align: center;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    #input-bar {
+      display: flex;
+      padding: 0.5rem;
+      border-top: 1px solid var(--border);
+      background: var(--bg-panel);
+      flex-shrink: 0;
+    }
+
+    #input-bar input {
+      flex: 1;
+      background: var(--bg-item);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 0.5rem 0.75rem;
+      font-family: inherit;
+      font-size: 0.8rem;
+      border-radius: 3px;
+    }
+    #input-bar input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
+
+    #input-bar button {
+      background: var(--bg-item);
+      color: var(--text-dim);
+      border: 1px solid var(--border);
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.8rem;
+      border-radius: 3px;
+      margin-left: 0.4rem;
+      transition: all 0.15s;
+    }
+    #input-bar button:hover { color: var(--text); border-color: var(--border-light); }
+
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
   </style>
 </head>
 <body>
-  <div id="messages"></div>
-  <div id="input-bar">
-    <input id="msg" type="text" placeholder="Ask Ove something..." autofocus />
-    <button id="send">Send</button>
+  <header>
+    <div class="header-left">
+      <img src="/logo.png" class="header-logo" alt="Ove">
+      <h1>ove</h1>
+      <a href="/trace" class="nav-link">traces</a>
+      <a href="/status" class="nav-link">status</a>
+      <a href="https://github.com/jacksoncage/ove" target="_blank" class="nav-link">github</a>
+    </div>
+    <div class="header-right">
+      <button class="sidebar-toggle" id="sidebarToggle">sidebar</button>
+    </div>
+  </header>
+
+  <div class="layout">
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-section" style="flex:1;display:flex;flex-direction:column">
+        <div class="sidebar-section-header">
+          <span>Chat history</span>
+        </div>
+        <div class="sidebar-list sidebar-history" id="historyList"></div>
+      </div>
+    </div>
+
+    <div class="chat-panel">
+      <div id="messages"></div>
+      <div id="input-bar">
+        <input id="msg" type="text" placeholder="Ask Ove something..." autofocus />
+        <button id="send">Send</button>
+      </div>
+    </div>
   </div>
+
   <script>
-    const API_KEY = localStorage.getItem("ove-api-key") || prompt("API Key:");
+    var API_KEY = localStorage.getItem("ove-api-key") || prompt("API Key:");
     if (API_KEY) localStorage.setItem("ove-api-key", API_KEY);
 
-    const msgs = document.getElementById("messages");
-    const input = document.getElementById("msg");
-    const btn = document.getElementById("send");
+    var msgs = document.getElementById("messages");
+    var input = document.getElementById("msg");
+    var btn = document.getElementById("send");
+    var sidebarEl = document.getElementById("sidebar");
+    var sidebarToggleEl = document.getElementById("sidebarToggle");
+    var historyListEl = document.getElementById("historyList");
 
+    function apiHeaders() { return { "X-API-Key": API_KEY }; }
+
+    function fmtTime(iso) {
+      if (!iso) return "";
+      var d = new Date(iso);
+      var m = Math.floor((Date.now() - d.getTime()) / 60000);
+      if (m < 1) return "now";
+      if (m < 60) return m + "m";
+      var h = Math.floor(m / 60);
+      if (h < 24) return h + "h";
+      return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    }
+
+    function truncate(s, n) {
+      if (!s) return "";
+      return s.length > n ? s.slice(0, n) + "..." : s;
+    }
+
+    function el(tag, cls, text) {
+      var e = document.createElement(tag);
+      if (cls) e.className = cls;
+      if (text != null) e.textContent = text;
+      return e;
+    }
+
+    function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); }
+
+    // ── Sidebar toggle ──
+    var sidebarHidden = localStorage.getItem("ove-sidebar") === "hidden";
+    if (sidebarHidden) sidebarEl.classList.add("collapsed");
+
+    sidebarToggleEl.addEventListener("click", function () {
+      sidebarEl.classList.toggle("collapsed");
+      localStorage.setItem("ove-sidebar", sidebarEl.classList.contains("collapsed") ? "hidden" : "visible");
+    });
+
+    // ── Chat messages ──
     function addMsg(text, cls) {
-      const div = document.createElement("div");
-      div.className = "msg " + cls;
-      div.textContent = text;
+      var div = el("div", "msg " + cls);
+      if (cls === "ove") {
+        var img = document.createElement("img");
+        img.src = "/logo.png";
+        img.className = "ove-avatar";
+        img.alt = "Ove";
+        div.appendChild(img);
+        var span = el("span", "ove-text", text);
+        div.appendChild(span);
+      } else {
+        div.textContent = text;
+      }
       msgs.appendChild(div);
       msgs.scrollTop = msgs.scrollHeight;
       return div;
     }
 
     async function send() {
-      const text = input.value.trim();
+      var text = input.value.trim();
       if (!text) return;
       input.value = "";
       addMsg("> " + text, "user");
 
       try {
-        const res = await fetch("/api/message", {
+        var res = await fetch("/api/message", {
           method: "POST",
           headers: { "Content-Type": "application/json", "X-API-Key": API_KEY },
-          body: JSON.stringify({ text }),
+          body: JSON.stringify({ text: text }),
         });
         if (!res.ok) { addMsg("Error: " + res.status, "error"); return; }
-        const { eventId } = await res.json();
+        var data = await res.json();
+        var eventId = data.eventId;
 
-        const statusDiv = addMsg("Working...", "status");
+        var statusDiv = addMsg("Working...", "status");
 
-        const sse = new EventSource("/api/message/" + eventId + "/stream?key=" + API_KEY);
-        sse.onmessage = (e) => {
-          const data = JSON.parse(e.data);
-          if (data.status === "completed") {
+        var sse = new EventSource("/api/message/" + eventId + "/stream?key=" + encodeURIComponent(API_KEY));
+        sse.onmessage = function (e) {
+          var d = JSON.parse(e.data);
+          if (d.status === "completed") {
             statusDiv.remove();
-            addMsg(data.result, "ove");
+            addMsg(d.result, "ove");
             sse.close();
-          } else if (data.statusText) {
-            statusDiv.textContent = data.statusText;
+            // Refresh sidebar
+            fetchHistory();
+          } else if (d.statusText) {
+            statusDiv.textContent = d.statusText;
           }
         };
-        sse.onerror = () => { sse.close(); };
+        sse.onerror = function () { sse.close(); };
       } catch (err) {
         addMsg("Error: " + err.message, "error");
       }
     }
 
     btn.addEventListener("click", send);
-    input.addEventListener("keydown", (e) => { if (e.key === "Enter") send(); });
+    input.addEventListener("keydown", function (e) { if (e.key === "Enter") send(); });
+
+    // ── Chat history sidebar ──
+    async function fetchHistory() {
+      try {
+        var res = await fetch("/api/history/" + encodeURIComponent("http:web") + "?limit=60&key=" + encodeURIComponent(API_KEY), { headers: apiHeaders() });
+        if (!res.ok) return;
+        var history = await res.json();
+        clear(historyListEl);
+
+        // Group into conversations: each user msg + following assistant msgs
+        var convos = [];
+        for (var i = 0; i < history.length; i++) {
+          if (history[i].role === "user") {
+            var convo = { user: history[i], replies: [] };
+            for (var j = i + 1; j < history.length && history[j].role === "assistant"; j++) {
+              convo.replies.push(history[j]);
+            }
+            convos.push(convo);
+          }
+        }
+
+        // Show newest first in sidebar
+        for (var i = convos.length - 1; i >= 0; i--) {
+          var c = convos[i];
+          var item = el("div", "sidebar-item");
+          var row = el("div", "history-row");
+          row.appendChild(el("span", "history-item-content", truncate(c.user.content, 50)));
+          row.appendChild(el("span", "history-item-time", fmtTime(c.user.timestamp)));
+          item.appendChild(row);
+          if (c.replies.length > 0) {
+            item.appendChild(el("div", "history-item-preview", truncate(c.replies[0].content, 60)));
+          }
+
+          (function (convo) {
+            item.addEventListener("click", function () {
+              clear(msgs);
+              addMsg("> " + convo.user.content, "user");
+              for (var r = 0; r < convo.replies.length; r++) {
+                addMsg(convo.replies[r].content, "ove");
+              }
+            });
+          })(c);
+
+          historyListEl.appendChild(item);
+        }
+      } catch (e) {
+        console.error("Failed to fetch history:", e);
+      }
+    }
+
+    // ── Init ──
+    fetchHistory();
   </script>
 </body>
 </html>