ltcai 3.0.1 → 3.1.0

package/static/v3/js/core/shell.1b6199d6.js

@@ -0,0 +1,363 @@
+/* ============================================================================
+ * Lattice AI v3 — Application shell
+ * Builds the persistent chrome (nav rail, topbar, view outlet), wires the
+ * router, workspace + mode + theme switchers, command palette, and mobile
+ * drawer. Renders views by lazy-loading their module and calling render(ctx).
+ * ========================================================================== */
+
+import { h, icon, $, $$ } from "./dom.a2773eb0.js";
+import { store } from "./store.34ebd5e6.js";
+import { api } from "./api.22a41d42.js";
+import * as c from "./components.4c83e0a9.js";
+import { createRouter } from "./router.584570f2.js";
+import { GROUPS, ROUTES, ROUTE_BY_KEY, MODE_RANK, visibleRoutes, loadView } from "./routes.f935dd50.js";
+
+const MODES = [
+  { key: "basic", label: "Basic", icon: "circle" },
+  { key: "advanced", label: "Advanced", icon: "circles" },
+  { key: "admin", label: "Admin", icon: "shield-half" },
+];
+
+const ctxBase = { h, icon, api, store, c };
+
+let els = {};
+let router;
+let currentRoute = null;
+
+export function boot(rootEl) {
+  rootEl.classList.add("lt3-app");
+  rootEl.append(
+    h("a.lt3-skip", { href: "#lt3-view" }, "Skip to content"),
+    h("div.lt3-rail__scrim", { on: { click: closeDrawer } }),
+    buildRail(),
+    buildMain(),
+  );
+
+  cacheEls(rootEl);
+  store.subscribe(onStateChange);
+
+  router = createRouter({ onRoute: renderRoute, fallback: "home" });
+  wireGlobalKeys();
+  router.start();
+
+  // Background: hydrate workspaces, identity, index status.
+  hydrate();
+}
+
+/* ── Rail ────────────────────────────────────────────────────────────────── */
+function buildRail() {
+  return h("aside.lt3-rail", { id: "lt3-rail", "aria-label": "Primary" },
+    h("div.lt3-rail__brand",
+      h("div.lt3-rail__logo", { html: latticeMark() }),
+      h("div.lt3-rail__word", h("b", "Lattice AI"), h("small", "Local-First Workspace")),
+      h("button.lt3-iconbtn.lt3-iconbtn--sm.lt3-rail__close", { "aria-label": "Close menu", on: { click: closeDrawer } }, icon("x")),
+    ),
+    h("div.lt3-rail__scope", { id: "lt3-scope" }),
+    h("nav.lt3-rail__nav", { id: "lt3-nav", "aria-label": "Sections" }),
+    h("div.lt3-rail__foot",
+      h("button.lt3-rail__user", { id: "lt3-user", "aria-label": "Account", on: { click: () => router.navigate("settings") } }),
+      h("button.lt3-iconbtn", { id: "lt3-theme", "aria-label": "Toggle theme", title: "Toggle theme", on: { click: () => store.toggleTheme() } }, icon("moon")),
+    ),
+  );
+}
+
+function renderNav() {
+  const nav = els.nav;
+  const mode = store.get().mode;
+  const routes = visibleRoutes(mode);
+  nav.replaceChildren();
+  for (const group of GROUPS) {
+    const items = routes.filter((r) => r.group === group.id);
+    if (!items.length) continue;
+    const groupEl = h("div.lt3-navgroup",
+      h("div.lt3-navgroup__label", group.label),
+      items.map((r) => navItem(r)),
+    );
+    nav.append(groupEl);
+  }
+  markActive();
+}
+
+function navItem(route) {
+  return h("a.lt3-navitem", {
+    href: "#/" + route.key,
+    dataset: { key: route.key },
+    on: { click: () => closeDrawer() },
+  },
+    icon(route.icon),
+    h("span.lt3-navitem__label", route.label),
+    route.key === "hybrid-search" ? h("span.lt3-navitem__dot", { style: { background: "var(--lt3-pillar-hybrid)" } }) : null,
+  );
+}
+
+function markActive() {
+  $$(".lt3-navitem", els.nav).forEach((a) => {
+    const on = a.dataset.key === (currentRoute && currentRoute.key);
+    if (on) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+  });
+}
+
+function renderScope() {
+  const ws = store.activeWorkspace();
+  els.scope.replaceChildren(
+    h("button.lt3-scope", { "aria-haspopup": "listbox", on: { click: openScopeMenu } },
+      h("div.lt3-scope__icon", icon(ws.type === "organization" ? "building-community" : "user")),
+      h("div.lt3-scope__meta", h("b", ws.name), h("small", `${ws.type} · ${ws.your_role || "member"}`)),
+      icon("selector"),
+    ),
+  );
+}
+
+function renderUser() {
+  const u = store.get().user;
+  const initials = (u.nickname || u.email || "U").slice(0, 2);
+  els.user.replaceChildren(
+    h("span.lt3-avatar", initials),
+    h("div.lt3-rail__user-meta", h("b", u.nickname || u.email || "You"), h("small", u.role || "local")),
+  );
+}
+
+function updateThemeIcon() {
+  const dark = document.documentElement.getAttribute("data-lt-theme") === "dark"
+    || (!store.get().theme && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  els.theme.replaceChildren(icon(dark ? "sun" : "moon"));
+}
+
+/* ── Main / topbar ──────────────────────────────────────────────────────── */
+function buildMain() {
+  return h("div.lt3-main",
+    h("header.lt3-topbar",
+      h("button.lt3-iconbtn.lt3-topbar__menu", { "aria-label": "Open menu", on: { click: openDrawer } }, icon("menu-2")),
+      h("div.lt3-topbar__crumbs", { id: "lt3-crumbs" }),
+      h("div.lt3-spacer"),
+      h("button.lt3-cmd-trigger", { "aria-label": "Search and commands", on: { click: openPalette } },
+        icon("search"), h("span", "Search & commands"), h("span.lt3-kbd", "⌘K")),
+      h("div", { id: "lt3-idxchip" }),
+      h("div.lt3-mode", { id: "lt3-mode", role: "tablist", "aria-label": "Workspace mode" },
+        MODES.map((m) => h("button", {
+          type: "button", role: "tab", dataset: { mode: m.key },
+          on: { click: () => store.setMode(m.key) },
+        }, icon(m.icon), h("span", m.label))),
+      ),
+    ),
+    h("main.lt3-view", { id: "lt3-view", tabindex: "-1" },
+      h("div.lt3-view__inner", { id: "lt3-outlet" }),
+    ),
+  );
+}
+
+function renderMode() {
+  $$("#lt3-mode button", els.root).forEach((b) => b.dataset.active = String(b.dataset.mode === store.get().mode));
+}
+
+function renderCrumbs() {
+  const r = currentRoute;
+  if (!r) return;
+  const parts = [h("span.lt3-crumb", store.activeWorkspace().name)];
+  if (r.group === "admin") parts.push(icon("chevron-right"), h("span.lt3-crumb", "Admin"));
+  parts.push(icon("chevron-right"), h("span.lt3-crumb.lt3-crumb--current", r.title || r.label));
+  els.crumbs.replaceChildren(...parts);
+}
+
+function renderIndexChip() {
+  els.idxchip.replaceChildren(c.indexChip(store.get().indexStatus));
+}
+
+/* ── View rendering ─────────────────────────────────────────────────────── */
+async function renderRoute({ key, params }) {
+  let route = ROUTE_BY_KEY[key] || ROUTE_BY_KEY.home;
+  // Deep-linking into an admin area surfaces Admin mode so the rail matches.
+  if (route.admin && store.get().mode !== "admin") store.setMode("admin");
+  currentRoute = route;
+  store.setRoute({ key: route.key, params });
+
+  document.title = `${route.title || route.label} · Lattice AI`;
+  markActive();
+  renderCrumbs();
+
+  const outlet = els.outlet;
+  outlet.replaceChildren(c.loading({ lines: 4, block: true }));
+  els.view.scrollTop = 0;
+
+  try {
+    const mod = await loadView(route.view);
+    if (currentRoute !== route) return; // navigated away during load
+    els.view.classList.toggle("lt3-view--flush", mod.layout === "flush");
+    const ctx = { ...ctxBase, route, params, navigate: router.navigate, toast: c.toast };
+    const node = await mod.render(ctx);
+    if (currentRoute !== route) return;
+    outlet.replaceChildren(node);
+  } catch (err) {
+    console.error("[shell] view render failed:", route.view, err);
+    outlet.replaceChildren(c.errorState(`View "${route.label}" failed to load.`, () => renderRoute({ key: route.key, params })));
+  }
+}
+
+function renderCurrent() {
+  if (currentRoute) renderRoute({ key: currentRoute.key, params: store.get().route.params || {} });
+}
+
+/* ── State reactions ────────────────────────────────────────────────────── */
+function onStateChange(_state, change) {
+  switch (change.type) {
+    case "mode": renderNav(); renderMode(); renderCurrent(); break;
+    case "workspace": renderScope(); renderCrumbs(); renderCurrent(); break;
+    case "workspaces": renderScope(); break;
+    case "user": renderUser(); break;
+    case "theme": updateThemeIcon(); break;
+    case "index": renderIndexChip(); break;
+  }
+}
+
+/* ── Workspace scope menu ───────────────────────────────────────────────── */
+function openScopeMenu(ev) {
+  ev.stopPropagation();
+  closeMenus();
+  const rect = ev.currentTarget.getBoundingClientRect();
+  const list = store.get().workspaces;
+  const menu = h("div.lt3-menu", { id: "lt3-scope-menu", role: "listbox", style: { top: rect.bottom + 6 + "px", left: rect.left + "px" } },
+    list.map((w) => h("button.lt3-menu__item", {
+      role: "option", dataset: { active: String(w.workspace_id === store.get().workspaceId) },
+      on: { click: () => { store.setWorkspace(w.workspace_id); closeMenus(); } },
+    },
+      icon(w.type === "organization" ? "building-community" : "user"),
+      h("div", h("div", { style: { fontWeight: 600 } }, w.name), h("small.lt3-faint", { style: { textTransform: "capitalize" } }, w.type)),
+      w.workspace_id === store.get().workspaceId ? icon("check", "") : null,
+    )),
+    h("div.lt3-menu__sep"),
+    h("button.lt3-menu__item", { on: { click: () => { c.toast("Organization creation opens in Settings", "info"); closeMenus(); router.navigate("settings"); } } },
+      icon("plus"), "New organization"),
+  );
+  document.body.append(menu);
+  setTimeout(() => document.addEventListener("click", closeMenusOnce, { once: true }), 0);
+}
+function closeMenus() { $$(".lt3-menu").forEach((m) => m.remove()); }
+function closeMenusOnce() { closeMenus(); }
+
+/* ── Mobile drawer ──────────────────────────────────────────────────────── */
+function openDrawer() { els.root.dataset.drawer = "open"; }
+function closeDrawer() { delete els.root.dataset.drawer; }
+
+/* ── Command palette ────────────────────────────────────────────────────── */
+function paletteItems() {
+  const nav = ROUTES.map((r) => ({
+    group: "Go to", label: r.label, icon: r.icon, hint: r.group,
+    run: () => router.navigate(r.key),
+  }));
+  const actions = [
+    { group: "Actions", label: "Toggle light / dark theme", icon: "contrast", run: () => store.toggleTheme() },
+    { group: "Actions", label: "Mode: Basic", icon: "circle", run: () => store.setMode("basic") },
+    { group: "Actions", label: "Mode: Advanced", icon: "circles", run: () => store.setMode("advanced") },
+    { group: "Actions", label: "Mode: Admin", icon: "shield-half", run: () => store.setMode("admin") },
+    { group: "Actions", label: "New chat", icon: "message-plus", run: () => router.navigate("chat", { new: "1" }) },
+    { group: "Actions", label: "Run hybrid search", icon: "arrows-join", run: () => router.navigate("hybrid-search") },
+  ];
+  return [...nav, ...actions];
+}
+
+function openPalette() {
+  if ($("#lt3-palette")) return;
+  const all = paletteItems();
+  let active = 0, filtered = all;
+
+  const listEl = h("div.lt3-palette__list");
+  const input = h("input", { type: "text", placeholder: "Search views, run a command…", "aria-label": "Command palette", autocomplete: "off" });
+  const palette = h("div.lt3-palette", { id: "lt3-palette", role: "dialog", "aria-modal": "true", "aria-label": "Command palette" },
+    h("div.lt3-palette__input", icon("search"), input, h("span.lt3-kbd", "Esc")),
+    listEl,
+  );
+  const scrim = h("div.lt3-scrim", { id: "lt3-palette-scrim", on: { click: close } });
+  document.body.append(scrim, palette);
+  input.focus();
+
+  function renderList() {
+    listEl.replaceChildren();
+    if (!filtered.length) { listEl.append(h("div.lt3-palette__empty", "No matches")); return; }
+    let lastGroup = null;
+    filtered.forEach((item, i) => {
+      if (item.group !== lastGroup) { listEl.append(h("div.lt3-palette__group-label", item.group)); lastGroup = item.group; }
+      listEl.append(h("button.lt3-palette__item", {
+        dataset: { active: String(i === active) },
+        on: { click: () => { item.run(); close(); }, mousemove: () => { if (active !== i) { active = i; paint(); } } },
+      }, icon(item.icon), h("span", item.label), item.hint && h("small", item.hint)));
+    });
+  }
+  function paint() { $$(".lt3-palette__item", listEl).forEach((el, i) => el.dataset.active = String(i === active)); ensureVisible(); }
+  function ensureVisible() {
+    const el = $$(".lt3-palette__item", listEl)[active];
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }
+  function filter() {
+    const q = input.value.trim().toLowerCase();
+    filtered = !q ? all : all.filter((it) => (it.label + " " + (it.hint || "")).toLowerCase().includes(q));
+    active = 0; renderList();
+  }
+  function close() { palette.remove(); scrim.remove(); document.removeEventListener("keydown", onKey, true); }
+  function onKey(e) {
+    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); close(); }
+    else if (e.key === "ArrowDown") { e.preventDefault(); active = Math.min(filtered.length - 1, active + 1); paint(); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); active = Math.max(0, active - 1); paint(); }
+    else if (e.key === "Enter") { e.preventDefault(); const it = filtered[active]; if (it) { it.run(); close(); } }
+  }
+  input.addEventListener("input", filter);
+  document.addEventListener("keydown", onKey, true);
+  renderList();
+}
+
+function wireGlobalKeys() {
+  document.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) { e.preventDefault(); openPalette(); }
+    if (e.key === "Escape") { closeMenus(); closeDrawer(); }
+  });
+}
+
+/* ── Hydration ──────────────────────────────────────────────────────────── */
+async function hydrate() {
+  // Identity (best-effort; never blocks the UI).
+  api.raw("/account/profile").then((r) => {
+    if (r.ok && r.data && (r.data.email || r.data.nickname)) {
+      store.setUser({ email: r.data.email, nickname: r.data.nickname || r.data.email, role: r.data.role || "user" });
+    } else { renderUser(); }
+  });
+
+  // Workspaces from the OS payload (fallback-safe).
+  api.workspaceOs().then((r) => {
+    const reg = r.data && r.data.workspace_registry;
+    if (reg && Array.isArray(reg.workspaces) && reg.workspaces.length) store.setWorkspaces(reg.workspaces);
+  });
+
+  // Index status powers the topbar chip + Home pillars.
+  api.indexStatus().then((r) => store.setIndexStatus(r.data));
+}
+
+/* ── Init helpers ───────────────────────────────────────────────────────── */
+function cacheEls(root) {
+  els = {
+    root,
+    nav: $("#lt3-nav", root),
+    scope: $("#lt3-scope", root),
+    user: $("#lt3-user", root),
+    theme: $("#lt3-theme", root),
+    crumbs: $("#lt3-crumbs", root),
+    idxchip: $("#lt3-idxchip", root),
+    outlet: $("#lt3-outlet", root),
+    view: $("#lt3-view", root),
+  };
+  renderNav();
+  renderScope();
+  renderUser();
+  renderMode();
+  updateThemeIcon();
+  renderIndexChip();
+}
+
+function latticeMark() {
+  // Crystalline lattice glyph — the product mark.
+  return `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 2.5 4 7v10l8 4.5L20 17V7L12 2.5Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" opacity=".55"/>
+    <path d="M12 7.5 7.5 10v4L12 16.5 16.5 14v-4L12 7.5Z" fill="currentColor" opacity=".9"/>
+    <circle cx="12" cy="2.5" r="1.3" fill="currentColor"/><circle cx="4" cy="7" r="1.1" fill="currentColor"/>
+    <circle cx="20" cy="7" r="1.1" fill="currentColor"/><circle cx="4" cy="17" r="1.1" fill="currentColor"/>
+    <circle cx="20" cy="17" r="1.1" fill="currentColor"/><circle cx="12" cy="21.5" r="1.3" fill="currentColor"/>
+  </svg>`;
+}

package/static/v3/js/core/store.34ebd5e6.js

@@ -0,0 +1,113 @@
+/* ============================================================================
+ * Lattice AI v3 — App state store
+ * A minimal observable store with namespaced persistence. Holds the cross-view
+ * product state: theme, mode (Basic/Advanced/Admin), and the active workspace
+ * (Personal/Organization). Views/shell subscribe to react to changes.
+ * ========================================================================== */
+
+const LS = {
+  theme: "lt-theme",        // shared with the rest of Lattice (data-lt-theme)
+  mode: "lt3-mode",
+  workspace: "lt3-workspace",
+};
+
+function load(key, fallback) {
+  try { const v = localStorage.getItem(key); return v == null ? fallback : v; }
+  catch { return fallback; }
+}
+function save(key, value) {
+  try { localStorage.setItem(key, value); } catch { /* private mode */ }
+}
+
+const VALID_MODES = ["basic", "advanced", "admin"];
+
+const state = {
+  theme: load(LS.theme, ""),                 // "" → follow OS
+  mode: VALID_MODES.includes(load(LS.mode)) ? load(LS.mode) : "basic",
+  workspaceId: load(LS.workspace, "personal"),
+  workspaces: [
+    { workspace_id: "personal", name: "Personal Workspace", type: "personal", your_role: "owner" },
+  ],
+  user: { email: "", nickname: "You", role: "user" },
+  indexStatus: null,
+  route: { key: "home", params: {} },
+};
+
+const subscribers = new Set();
+
+function emit(change) {
+  for (const fn of subscribers) {
+    try { fn(state, change); } catch (err) { console.error("[store] subscriber", err); }
+  }
+}
+
+export const store = {
+  get: () => state,
+
+  subscribe(fn) { subscribers.add(fn); return () => subscribers.delete(fn); },
+
+  /* ── Theme ─────────────────────────────────────────────── */
+  applyTheme() {
+    const root = document.documentElement;
+    if (state.theme === "dark" || state.theme === "light") {
+      root.setAttribute("data-lt-theme", state.theme);
+    } else {
+      root.removeAttribute("data-lt-theme"); // OS-follow via tokens.css media query
+    }
+  },
+  setTheme(theme) {
+    state.theme = theme === "dark" || theme === "light" ? theme : "";
+    if (state.theme) save(LS.theme, state.theme); else { try { localStorage.removeItem(LS.theme); } catch {} }
+    store.applyTheme();
+    emit({ type: "theme" });
+  },
+  toggleTheme() {
+    const effective = document.documentElement.getAttribute("data-lt-theme")
+      || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    store.setTheme(effective === "dark" ? "light" : "dark");
+  },
+
+  /* ── Mode ──────────────────────────────────────────────── */
+  setMode(mode) {
+    if (!VALID_MODES.includes(mode) || mode === state.mode) return;
+    state.mode = mode;
+    save(LS.mode, mode);
+    emit({ type: "mode" });
+  },
+
+  /* ── Workspace ─────────────────────────────────────────── */
+  setWorkspaces(list) {
+    if (Array.isArray(list) && list.length) {
+      state.workspaces = list;
+      if (!list.some((w) => w.workspace_id === state.workspaceId)) {
+        state.workspaceId = list[0].workspace_id;
+        save(LS.workspace, state.workspaceId);
+      }
+      emit({ type: "workspaces" });
+    }
+  },
+  setWorkspace(id) {
+    if (id === state.workspaceId) return;
+    state.workspaceId = id;
+    save(LS.workspace, id);
+    emit({ type: "workspace" });
+  },
+  activeWorkspace() {
+    return state.workspaces.find((w) => w.workspace_id === state.workspaceId) || state.workspaces[0];
+  },
+
+  setUser(user) { state.user = { ...state.user, ...user }; emit({ type: "user" }); },
+  setIndexStatus(s) { state.indexStatus = s; emit({ type: "index" }); },
+  setRoute(route) { state.route = route; emit({ type: "route" }); },
+};
+
+store.applyTheme();
+
+// Follow OS theme changes while the user hasn't pinned a preference.
+if (window.matchMedia) {
+  try {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      if (!state.theme) emit({ type: "theme" });
+    });
+  } catch { /* legacy Safari */ }
+}

package/static/v3/js/views/admin-audit.660a1fb1.js

@@ -0,0 +1,185 @@
+/* ============================================================================
+ * View: Audit Logs — Administration · activity and access trail.
+ * Reads /admin/audit (live) and renders unavailable state when it cannot load.
+ * Severity filter narrows the rendered events; a compact stat row summarizes
+ * actors, volume and risk at a glance.
+ * ========================================================================== */
+
+import { timeAgo } from "../core/dom.a2773eb0.js";
+
+const SEVERITY = {
+  warning: { variant: "warn", label: "Warning", icon: "alert-triangle" },
+  notice: { variant: "info", label: "Notice", icon: "info-circle" },
+  informational: { variant: "", label: "Informational", icon: "point" },
+};
+function severityMeta(s) {
+  return SEVERITY[String(s || "").toLowerCase()] || { variant: "", label: titleCase(s) || "Event", icon: "point" };
+}
+
+const FILTERS = [
+  { key: "all", label: "All" },
+  { key: "informational", label: "Informational" },
+  { key: "notice", label: "Notice" },
+  { key: "warning", label: "Warning" },
+];
+
+export async function render(ctx) {
+  const { h, icon, api, c } = ctx;
+
+  const state = { events: [], source: "pending", filter: "all", loaded: false };
+
+  const srcSlot = h("span", c.sourceBadge("pending"));
+  const filterHost = h("div", buildTabs());
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const tableHost = h("div", c.loading({ lines: 6 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Administration",
+      title: "Audit Logs",
+      sub: "Activity and access trail",
+      actions: [
+        srcSlot,
+        h("button.lt3-btn.lt3-btn--ghost", {
+          on: { click: () => ctx.toast("Audit export is not available in this build (SIEM export is an Enterprise feature).", "warn") },
+        }, icon("download"), "Export"),
+      ],
+    }),
+    statHost,
+    c.panel({
+      eyebrow: "Trail",
+      title: "Recent events",
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", flex: "1 1 auto", gap: "var(--lt3-space-3)" } },
+        h("div", h("div.lt3-eyebrow", "Trail"), h("h3.lt3-panel__title", "Recent events")),
+        filterHost,
+      ),
+      children: tableHost,
+    }),
+  );
+
+  function buildTabs() {
+    return c.tabs(FILTERS, state.filter, (key) => {
+      state.filter = key;
+      filterHost.replaceChildren(buildTabs());
+      renderTable();
+    });
+  }
+
+  function visibleEvents() {
+    if (state.filter === "all") return state.events;
+    return state.events.filter((e) => String(e.severity || "").toLowerCase() === state.filter);
+  }
+
+  function renderStats() {
+    const events = state.events;
+    const actors = new Set(events.map((e) => e.actor).filter(Boolean)).size;
+    const startOfDay = new Date(); startOfDay.setHours(0, 0, 0, 0);
+    const today = events.filter((e) => {
+      const t = e.ts ? new Date(e.ts).getTime() : NaN;
+      return !Number.isNaN(t) && t >= startOfDay.getTime();
+    }).length;
+    const high = events.filter((e) => ["warning", "high", "critical"].includes(String(e.severity || "").toLowerCase())).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Total events", value: c.fmtNum(events.length), icon: "list-details" }),
+      c.stat({ label: "Actors", value: c.fmtNum(actors), icon: "users" }),
+      c.stat({ label: "Today", value: c.fmtNum(today), icon: "calendar-event" }),
+      c.stat({ label: "High-severity", value: c.fmtNum(high), icon: "shield-exclamation" }),
+    );
+  }
+
+  function renderTable() {
+    const rows = visibleEvents();
+    if (!rows.length) {
+      tableHost.replaceChildren(state.loaded
+        ? c.emptyState({
+            icon: "history-off",
+            title: state.filter === "all" ? "No audit events" : "No matching events",
+            body: state.filter === "all"
+              ? "Activity will appear here as users act in the workspace."
+              : "No events match this severity. Try a broader filter.",
+            action: state.filter === "all" ? null : h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", {
+              on: { click: () => { state.filter = "all"; filterHost.replaceChildren(buildTabs()); renderTable(); } },
+            }, icon("filter-off"), "Clear filter"),
+          })
+        : c.loading({ lines: 6 }));
+      return;
+    }
+    tableHost.replaceChildren(c.table(columns(ctx), rows));
+  }
+
+  async function load() {
+    const res = await api.adminAudit();
+    state.events = normalize(res.data);
+    state.source = res.source;
+    state.loaded = true;
+    srcSlot.replaceChildren(c.sourceBadge(res.source));
+    renderStats();
+    renderTable();
+  }
+
+  load();
+  return root;
+}
+
+/* ── table ───────────────────────────────────────────────────────────────── */
+function columns({ h, icon, c }) {
+  return [
+    {
+      key: "ts", label: "Time", width: "1%",
+      render: (e) => h("span.lt3-mono.lt3-faint", { style: { "white-space": "nowrap", "font-size": "var(--lt3-text-2xs)" } },
+        e.ts ? timeAgo(e.ts) : "—"),
+    },
+    {
+      key: "actor", label: "Actor",
+      render: (e) => h("div.lt3-row-2",
+        h("span.lt3-avatar", { style: { width: "26px", height: "26px" } }, initials(e.actor)),
+        h("span", { style: { "font-size": "var(--lt3-text-sm)", "white-space": "nowrap" } }, e.actor || "system"),
+      ),
+    },
+    {
+      key: "action", label: "Action", width: "1%",
+      render: (e) => h("span.lt3-pill.lt3-mono", { style: { "white-space": "nowrap" } }, e.action || "event"),
+    },
+    {
+      key: "target", label: "Target",
+      render: (e) => h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-sm)" } }, e.target || "—"),
+    },
+    {
+      key: "severity", label: "Severity", width: "1%",
+      render: (e) => {
+        const m = severityMeta(e.severity);
+        return c.pill(m.label, m.variant, { dot: true });
+      },
+    },
+  ];
+}
+
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+function normalize(data) {
+  const list = Array.isArray(data) ? data
+    : Array.isArray(data && data.recent_events) ? data.recent_events
+    : Array.isArray(data && data.events) ? data.events
+    : [];
+  return list.map((e) => ({
+    ts: e.ts || e.timestamp || e.time || null,
+    actor: e.actor || e.user || e.email || "system",
+    action: e.action || e.event || "event",
+    target: e.target || e.resource || "",
+    severity: e.severity || e.level || "informational",
+  }));
+}
+
+function initials(name) {
+  const s = String(name || "·").trim();
+  if (!s || s === "system") return "SY";
+  const at = s.indexOf("@");
+  const base = at > 0 ? s.slice(0, at) : s;
+  const parts = base.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return base.slice(0, 2).toUpperCase();
+}
+
+function titleCase(s) {
+  s = String(s || "").trim();
+  return s ? s[0].toUpperCase() + s.slice(1).toLowerCase() : "";
+}

package/static/v3/js/views/admin-audit.js

@@ -1,6 +1,6 @@
 /* ============================================================================
  * View: Audit Logs — Administration · activity and access trail.
- * Reads /admin/audit (live) and degrades to a clearly-badged sample trail.
+ * Reads /admin/audit (live) and renders unavailable state when it cannot load.
  * Severity filter narrows the rendered events; a compact stat row summarizes
  * actors, volume and risk at a glance.
  * ========================================================================== */