clay-server 2.33.1 → 2.34.0-beta.2

package/lib/public/css/mates.css

@@ -1884,6 +1884,11 @@ body.mate-dm-active #layout.sidebar-collapsed .mate-collapsed-info {
   height: 16px;
 }
 
+.mate-sidebar-actions button.active {
+  background: var(--bg-hover, rgba(255,255,255,0.1));
+  color: var(--text-primary, #fff);
+}
+
 .mate-session-list {
   flex: 1;
   overflow-y: auto;
@@ -1990,6 +1995,176 @@ body.mate-dm-active #layout.sidebar-collapsed .mate-collapsed-info {
 #mate-search-session-btn.active {
   color: var(--accent);
 }
+
+/* Mate datastore inspector */
+#mate-sidebar-datastore {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+#mate-sidebar-datastore.hidden {
+  display: none !important;
+}
+
+.mate-db-status {
+  padding: 8px 12px 0;
+  font-size: 12px;
+  color: var(--text-secondary, #8e8e8e);
+}
+
+.mate-db-status[data-kind="error"] {
+  color: var(--error, #ff6b6b);
+}
+
+.mate-db-status[data-kind="warn"] {
+  color: var(--warning, #f5a524);
+}
+
+.mate-db-status[data-kind="ok"] {
+  color: var(--success, #36b37e);
+}
+
+.mate-db-layout {
+  display: grid;
+  grid-template-columns: 130px minmax(0, 1fr);
+  gap: 10px;
+  padding: 8px 8px 12px;
+  min-height: 0;
+  flex: 1;
+}
+
+.mate-db-table-column,
+.mate-db-detail {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.mate-db-table-list {
+  overflow-y: auto;
+  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
+  border-radius: 10px;
+  background: var(--bg-alt, rgba(255,255,255,0.03));
+  padding: 4px;
+  flex: 1;
+}
+
+.mate-db-table-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary, #aaa);
+  border-radius: 8px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mate-db-table-item:hover,
+.mate-db-table-item.active {
+  background: var(--sidebar-active, rgba(255,255,255,0.08));
+  color: var(--text, #fff);
+}
+
+.mate-db-table-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.mate-db-table-item-type {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.mate-db-empty {
+  padding: 16px 10px;
+  color: var(--text-secondary, #8e8e8e);
+  font-size: 12px;
+}
+
+.mate-db-section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted, #9aa0a6);
+  margin: 0 0 6px;
+}
+
+.mate-db-detail {
+  gap: 8px;
+  min-width: 0;
+}
+
+.mate-db-table-schema,
+.mate-db-result {
+  margin: 0;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
+  background: var(--bg-alt, rgba(255,255,255,0.03));
+  color: var(--text-secondary, #b8b8b8);
+  font-size: 11px;
+  line-height: 1.5;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  min-height: 0;
+}
+
+.mate-db-table-schema {
+  max-height: 120px;
+}
+
+.mate-db-query,
+.mate-db-params {
+  width: 100%;
+  min-height: 72px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
+  background: var(--bg-secondary, rgba(255,255,255,0.04));
+  color: var(--text, #fff);
+  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 11px;
+  resize: vertical;
+}
+
+.mate-db-params {
+  min-height: 54px;
+}
+
+.mate-db-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.mate-db-actions button {
+  flex: 1;
+  height: 30px;
+  border: none;
+  border-radius: 8px;
+  background: var(--sidebar-active, rgba(255,255,255,0.08));
+  color: var(--text, #fff);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.mate-db-actions button:hover {
+  background: var(--sidebar-hover, rgba(255,255,255,0.12));
+}
+
 .mate-session-item.search-match {
   background: var(--accent-12, rgba(108, 92, 231, 0.12));
 }

package/lib/public/css/messages.css

@@ -1233,6 +1233,29 @@ pre.mermaid-error {
 .plan-card-body strong { font-weight: 600; }
 .plan-card-body blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-muted); margin: 8px 0; }
 
+.todo-widget.todo-widget-plan .todo-header {
+  background: linear-gradient(180deg, rgba(var(--overlay-rgb), 0.04), rgba(var(--overlay-rgb), 0.015));
+}
+
+.todo-widget.todo-widget-plan .todo-header-icon,
+.todo-widget.todo-widget-plan .todo-header-title {
+  color: var(--accent);
+}
+
+.todo-widget.todo-widget-plan .todo-header-count {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.todo-widget.todo-widget-plan .todo-item.pending .todo-item-icon {
+  opacity: 0.75;
+}
+
+.todo-widget.todo-widget-plan .todo-item.in-progress .todo-item-text {
+  color: var(--text);
+  font-weight: 500;
+}
+
 /* --- Plan permission (ExitPlanMode) --- */
 .plan-permission-header {
   background: var(--success-8) !important;

package/lib/public/css/notifications-center.css

@@ -307,6 +307,82 @@
 .notif-banner-update-now:hover { opacity: 0.85; }
 .notif-banner-update-now:disabled { opacity: 0.6; cursor: default; }
 
+.light-theme .notif-banner-clear-all {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)),
+    rgba(255,255,255,0.62);
+  border-color: rgba(24, 32, 56, 0.10);
+  color: rgba(36, 45, 66, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.85),
+    0 8px 22px rgba(31, 41, 55, 0.08);
+}
+
+.light-theme .notif-banner-clear-all:hover {
+  color: rgba(22, 29, 45, 0.92);
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)),
+    rgba(255,255,255,0.7);
+  border-color: rgba(24, 32, 56, 0.14);
+}
+
+.light-theme .notif-banner {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74)),
+    rgba(255,255,255,0.60);
+  border-color: rgba(27, 35, 56, 0.08);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.88),
+    0 10px 30px rgba(31, 41, 55, 0.10);
+}
+
+.light-theme .notif-banner:hover {
+  border-color: rgba(27, 35, 56, 0.12);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.92),
+    0 12px 34px rgba(31, 41, 55, 0.12);
+}
+
+.light-theme .notif-banner-icon {
+  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,247,252,0.82));
+  border-color: rgba(27, 35, 56, 0.08);
+  color: var(--text-secondary);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+}
+
+.light-theme .notif-banner-project {
+  color: rgba(50, 62, 86, 0.74);
+  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
+}
+
+.light-theme .notif-banner-title {
+  color: rgba(18, 24, 38, 0.95);
+  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
+}
+
+.light-theme .notif-banner-text {
+  color: rgba(61, 73, 96, 0.76);
+}
+
+.light-theme .notif-banner-update .notif-banner-project,
+.light-theme .notif-banner-auth .notif-banner-project {
+  color: rgba(50, 62, 86, 0.74);
+}
+
+.light-theme .notif-banner-auth .notif-banner-title,
+.light-theme .notif-banner-update .notif-banner-title {
+  text-shadow: 0 1px 0 rgba(255,255,255,0.76);
+}
+
+.light-theme .notif-banner-close,
+.light-theme .notif-banner-close:hover {
+  background: rgba(244, 246, 250, 0.98);
+  color: rgba(44, 52, 68, 0.88);
+  box-shadow:
+    0 2px 6px rgba(31, 41, 55, 0.12),
+    inset 0 1px 0 rgba(255,255,255,0.88);
+}
+
 /* ========================================================
    Mobile
    ======================================================== */

package/lib/public/index.html

@@ -270,6 +270,7 @@
         <div class="mate-sidebar-sessions-header">
           <span>Conversations</span>
           <div class="mate-sidebar-actions">
+            <button id="mate-data-btn" type="button" title="Data inspector"><i data-lucide="database"></i></button>
             <button id="mate-search-session-btn" type="button" title="Search sessions"><i data-lucide="search"></i></button>
             <button id="mate-new-session-btn" type="button" title="New session"><i data-lucide="plus"></i></button>
           </div>
@@ -280,6 +281,33 @@
         </div>
         <div id="mate-session-list" class="mate-session-list"></div>
       </div>
+      <div id="mate-sidebar-datastore" class="hidden">
+        <div class="mate-sidebar-sessions-header">
+          <span>Data</span>
+          <div class="mate-sidebar-actions">
+            <button id="mate-db-refresh-btn" type="button" title="Refresh tables"><i data-lucide="refresh-cw"></i></button>
+            <button id="mate-db-back-btn" type="button" title="Back to conversations"><i data-lucide="x"></i></button>
+          </div>
+        </div>
+        <div class="mate-db-status" id="mate-db-status"></div>
+        <div class="mate-db-layout">
+          <div class="mate-db-table-column">
+            <div class="mate-db-section-title">Objects</div>
+            <div id="mate-db-table-list" class="mate-db-table-list"></div>
+          </div>
+          <div class="mate-db-detail">
+            <div class="mate-db-section-title" id="mate-db-table-name">No table selected</div>
+            <pre id="mate-db-table-schema" class="mate-db-table-schema"></pre>
+            <textarea id="mate-db-query" class="mate-db-query" spellcheck="false" placeholder="SELECT * FROM table LIMIT 50;"></textarea>
+            <textarea id="mate-db-params" class="mate-db-params" spellcheck="false" placeholder='[]'></textarea>
+            <div class="mate-db-actions">
+              <button id="mate-db-query-btn" type="button">Query</button>
+              <button id="mate-db-exec-btn" type="button">Exec</button>
+            </div>
+            <pre id="mate-db-result" class="mate-db-result"></pre>
+          </div>
+        </div>
+      </div>
       <div id="mate-sidebar-memory" class="hidden"></div>
       <div id="mate-sidebar-knowledge" class="hidden">
         <div class="mate-sidebar-sessions-header">

package/lib/public/modules/app-messages.js

@@ -14,6 +14,7 @@ import { renderSessionList, updateSessionPresence, populateCliSessionList, handl
 import { updateDmBadge, renderSidebarPresence, setMentionActive, renderUserStrip } from './sidebar-mates.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
 import { renderMateSessionList, handleMateSearchResults, updateMateSidebarProfile } from './mate-sidebar.js';
+import { handleMateDatastoreTablesResult, handleMateDatastoreDescribeResult, handleMateDatastoreQueryResult, handleMateDatastoreExecResult, handleMateDatastoreError, handleMateDatastoreChange } from './mate-datastore-ui.js';
 import { renderKnowledgeList, handleKnowledgeContent } from './mate-knowledge.js';
 import { renderMemoryList } from './mate-memory.js';
 import { handlePaletteSessionSwitch, setPaletteVersion } from './command-palette.js';
@@ -275,6 +276,30 @@ export function processMessage(msg) {
         updateProjectList(msg);
         break;
 
+      case "mate_db_tables_result":
+        handleMateDatastoreTablesResult(msg);
+        break;
+
+      case "mate_db_describe_result":
+        handleMateDatastoreDescribeResult(msg);
+        break;
+
+      case "mate_db_query_result":
+        handleMateDatastoreQueryResult(msg);
+        break;
+
+      case "mate_db_exec_result":
+        handleMateDatastoreExecResult(msg);
+        break;
+
+      case "mate_db_error":
+        handleMateDatastoreError(msg);
+        break;
+
+      case "mate_db_change":
+        handleMateDatastoreChange(msg);
+        break;
+
       case "update_available":
         // In multi-user mode, only show update UI to admins
         if (store.get('isMultiUserMode')) {

package/lib/public/modules/mate-datastore-ui.js

@@ -0,0 +1,270 @@
+import { escapeHtml } from './utils.js';
+import { refreshIcons } from './icons.js';
+import { getWs } from './ws-ref.js';
+
+var wsGetter = null;
+var panelEl = null;
+var tableListEl = null;
+var tableNameEl = null;
+var tableSchemaEl = null;
+var queryInputEl = null;
+var paramsInputEl = null;
+var resultEl = null;
+var statusEl = null;
+var dataBtnEl = null;
+var conversationsEl = null;
+var memoryEl = null;
+var knowledgeEl = null;
+var currentTables = [];
+var currentTable = null;
+var panelOpen = false;
+
+function sendWs(msg) {
+  var ws = wsGetter ? wsGetter() : getWs();
+  if (ws && ws.readyState === 1) ws.send(JSON.stringify(msg));
+}
+
+function setSectionVisibility(open) {
+  panelOpen = open;
+  if (panelEl) panelEl.classList.toggle("hidden", !open);
+  if (conversationsEl) conversationsEl.classList.toggle("hidden", open);
+  if (memoryEl) memoryEl.classList.toggle("hidden", true);
+  if (knowledgeEl) knowledgeEl.classList.toggle("hidden", true);
+  if (dataBtnEl) dataBtnEl.classList.toggle("active", open);
+  refreshIcons();
+}
+
+function requestTables() {
+  sendWs({ type: "mate_db_tables" });
+}
+
+function renderStatus(text, kind) {
+  if (!statusEl) return;
+  statusEl.textContent = text || "";
+  statusEl.dataset.kind = kind || "";
+}
+
+function renderResult(payload) {
+  if (!resultEl) return;
+  resultEl.textContent = JSON.stringify(payload, null, 2);
+}
+
+function renderTableList(objects) {
+  currentTables = objects || [];
+  if (!tableListEl) return;
+  tableListEl.innerHTML = "";
+
+  if (!currentTables.length) {
+    var empty = document.createElement("div");
+    empty.className = "mate-db-empty";
+    empty.textContent = "No tables or views found.";
+    tableListEl.appendChild(empty);
+    return;
+  }
+
+  for (var i = 0; i < currentTables.length; i++) {
+    (function (obj) {
+      var row = document.createElement("button");
+      row.type = "button";
+      row.className = "mate-db-table-item" + (currentTable === obj.name ? " active" : "");
+      var label = obj.type || "object";
+      row.innerHTML = '<span class="mate-db-table-item-name">' + escapeHtml(obj.name) + '</span>' +
+        '<span class="mate-db-table-item-type">' + escapeHtml(label) + '</span>';
+      row.addEventListener("click", function () {
+        selectTable(obj.name);
+      });
+      tableListEl.appendChild(row);
+    })(currentTables[i]);
+  }
+}
+
+function findFirstDescribableObject(objects) {
+  var list = objects || [];
+  for (var i = 0; i < list.length; i++) {
+    if (list[i] && (list[i].type === "table" || list[i].type === "view")) return list[i];
+  }
+  return null;
+}
+
+function findObjectByName(name) {
+  for (var i = 0; i < currentTables.length; i++) {
+    if (currentTables[i] && currentTables[i].name === name) return currentTables[i];
+  }
+  return null;
+}
+
+function selectTable(tableName) {
+  currentTable = tableName;
+  renderTableList(currentTables);
+  var obj = findObjectByName(tableName);
+  if (!obj) return;
+  if (obj.type !== "table" && obj.type !== "view") {
+    renderStatus("Selected " + (obj.type || "object") + " " + tableName + ".", "ok");
+    if (tableNameEl) tableNameEl.textContent = tableName;
+    if (tableSchemaEl) tableSchemaEl.textContent = obj.sql || "";
+    renderResult(obj);
+    return;
+  }
+  renderStatus("Loading " + tableName + "...", "info");
+  sendWs({ type: "mate_db_describe", table: tableName });
+  if (queryInputEl) queryInputEl.value = 'SELECT * FROM "' + tableName.replace(/"/g, '""') + '" LIMIT 50;';
+}
+
+function parseParams() {
+  if (!paramsInputEl) return [];
+  var text = paramsInputEl.value.trim();
+  if (!text) return [];
+  try {
+    var parsed = JSON.parse(text);
+    if (Array.isArray(parsed)) return parsed;
+    renderStatus("Parameters must be a JSON array.", "error");
+  } catch (e) {
+    renderStatus("Parameters must be valid JSON.", "error");
+  }
+  return null;
+}
+
+function sendQueryMessage(type) {
+  var sql = queryInputEl ? queryInputEl.value : "";
+  var params = parseParams();
+  if (params === null) return;
+  if (!sql || !sql.trim()) {
+    renderStatus("Enter SQL before running it.", "error");
+    return;
+  }
+  sendWs({ type: type, sql: sql, params: params });
+}
+
+export function initMateDatastoreUI(getWsFn) {
+  wsGetter = getWsFn;
+  panelEl = document.getElementById("mate-sidebar-datastore");
+  tableListEl = document.getElementById("mate-db-table-list");
+  tableNameEl = document.getElementById("mate-db-table-name");
+  tableSchemaEl = document.getElementById("mate-db-table-schema");
+  queryInputEl = document.getElementById("mate-db-query");
+  paramsInputEl = document.getElementById("mate-db-params");
+  resultEl = document.getElementById("mate-db-result");
+  statusEl = document.getElementById("mate-db-status");
+  dataBtnEl = document.getElementById("mate-data-btn");
+  conversationsEl = document.getElementById("mate-sidebar-conversations");
+  memoryEl = document.getElementById("mate-sidebar-memory");
+  knowledgeEl = document.getElementById("mate-sidebar-knowledge");
+
+  var refreshBtn = document.getElementById("mate-db-refresh-btn");
+  var queryBtn = document.getElementById("mate-db-query-btn");
+  var execBtn = document.getElementById("mate-db-exec-btn");
+  var backBtn = document.getElementById("mate-db-back-btn");
+
+  if (dataBtnEl) {
+    dataBtnEl.addEventListener("click", function () {
+      if (panelOpen) {
+        setSectionVisibility(false);
+      } else {
+        setSectionVisibility(true);
+        requestTables();
+      }
+    });
+  }
+
+  if (refreshBtn) {
+    refreshBtn.addEventListener("click", function () {
+      requestTables();
+    });
+  }
+
+  if (queryBtn) {
+    queryBtn.addEventListener("click", function () {
+      sendQueryMessage("mate_db_query");
+    });
+  }
+
+  if (execBtn) {
+    execBtn.addEventListener("click", function () {
+      sendQueryMessage("mate_db_exec");
+    });
+  }
+
+  if (backBtn) {
+    backBtn.addEventListener("click", function () {
+      setSectionVisibility(false);
+    });
+  }
+
+  setSectionVisibility(false);
+}
+
+export function showMateDatastorePanel() {
+  setSectionVisibility(true);
+  requestTables();
+}
+
+export function hideMateDatastorePanel() {
+  setSectionVisibility(false);
+}
+
+export function handleMateDatastoreTablesResult(msg) {
+  if (msg.ok === false) {
+    renderStatus(msg.message || "Failed to load datastore tables.", "error");
+    renderResult(msg);
+    return;
+  }
+  renderStatus(msg.warning || "Datastore tables loaded.", msg.warning ? "warn" : "ok");
+  renderTableList(msg.objects || []);
+  if (msg.objects && msg.objects.length > 0) {
+    var found = false;
+    for (var i = 0; i < msg.objects.length; i++) {
+      if (msg.objects[i].name === currentTable) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      var firstObject = findFirstDescribableObject(msg.objects);
+      if (firstObject) selectTable(firstObject.name);
+    }
+  }
+  renderResult(msg.objects || []);
+}
+
+export function handleMateDatastoreDescribeResult(msg) {
+  if (msg.ok === false) {
+    renderStatus(msg.message || "Failed to describe table.", "error");
+    renderResult(msg);
+    return;
+  }
+  renderStatus(msg.warning || ("Described " + (msg.table || "table") + "."), msg.warning ? "warn" : "ok");
+  if (tableNameEl) tableNameEl.textContent = msg.table || "Table";
+  if (tableSchemaEl) tableSchemaEl.textContent = msg.createSql || "";
+  renderResult(msg);
+}
+
+export function handleMateDatastoreQueryResult(msg) {
+  if (msg.ok === false) {
+    renderStatus(msg.message || "Query failed.", "error");
+    renderResult(msg);
+    return;
+  }
+  renderStatus(msg.warning || ("Returned " + (msg.rowCount || 0) + " row(s)."), msg.warning ? "warn" : "ok");
+  renderResult(msg);
+}
+
+export function handleMateDatastoreExecResult(msg) {
+  if (msg.ok === false) {
+    renderStatus(msg.message || "Execution failed.", "error");
+    renderResult(msg);
+    return;
+  }
+  renderStatus(msg.warning || ("Applied " + (msg.changes || 0) + " change(s)."), msg.warning ? "warn" : "ok");
+  renderResult(msg);
+  requestTables();
+}
+
+export function handleMateDatastoreError(msg) {
+  renderStatus(msg.message || "Mate datastore error.", "error");
+  renderResult(msg);
+}
+
+export function handleMateDatastoreChange(msg) {
+  renderStatus("Datastore changed.", "info");
+  if (panelOpen) requestTables();
+}

package/lib/public/modules/mate-sidebar.js

@@ -3,6 +3,7 @@ import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
 import { hideKnowledge } from './mate-knowledge.js';
+import { hideMateDatastorePanel } from './mate-datastore-ui.js';
 import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 import { hideNotes } from './sticky-notes.js';
 import { openSearch as openSessionSearch } from './session-search.js';
@@ -134,6 +135,7 @@ export function initMateSidebar(wsGetter) {
 }
 
 export function showMateSidebar(mateId, mateData) {
+  if (hideMateDatastorePanel) hideMateDatastorePanel();
   currentMateId = mateId;
   currentMate = mateData;
   cachedSessions = [];
@@ -366,6 +368,7 @@ export function getMateSessions() {
 }
 
 export function hideMateSidebar() {
+  if (hideMateDatastorePanel) hideMateDatastorePanel();
   currentMateId = null;
   currentMate = null;
   cachedSessions = [];