ltcai 2.2.7 → 3.0.1

package/static/v3/css/lattice.views.css

@@ -0,0 +1,277 @@
+/* ============================================================================
+ * Lattice AI v3 — View-specific layouts
+ * Bespoke compositions that go beyond the generic primitives. Token-native.
+ * ========================================================================== */
+
+/* ── Home hero ───────────────────────────────────────────────────────────── */
+.lt3-hero {
+  position: relative;
+  overflow: hidden;
+  padding: var(--lt3-space-7);
+  border-radius: var(--lt3-radius-xl);
+  background:
+    radial-gradient(120% 140% at 100% 0%, var(--lt3-pillar-vector-soft) 0%, transparent 50%),
+    radial-gradient(120% 140% at 0% 100%, var(--lt3-pillar-graph-soft) 0%, transparent 50%),
+    var(--surface);
+  border: 1px solid var(--border);
+}
+.lt3-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--lt3-space-2); }
+.lt3-hero__title { font-size: var(--lt3-text-3xl); font-weight: var(--lt3-weight-black); letter-spacing: var(--lt3-tracking-tight); margin-top: var(--lt3-space-3); max-width: 20ch; }
+.lt3-hero__sub { font-size: var(--lt3-text-lg); color: var(--muted); margin-top: var(--lt3-space-3); max-width: 56ch; }
+.lt3-hero__actions { display: flex; flex-wrap: wrap; gap: var(--lt3-space-3); margin-top: var(--lt3-space-5); }
+
+.lt3-quickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--lt3-space-4); }
+.lt3-quick {
+  display: flex; flex-direction: column; gap: var(--lt3-space-2);
+  padding: var(--lt3-space-4);
+  border-radius: var(--lt3-radius-md);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  transition: transform var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-quick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+.lt3-quick__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--lt3-radius-sm); background: var(--accent-soft); color: var(--accent); }
+.lt3-quick__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); }
+.lt3-quick__desc { font-size: var(--lt3-text-xs); color: var(--muted); }
+
+/* ── Split: explorer + inspector (KG, Files) ─────────────────────────────── */
+.lt3-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: var(--lt3-space-5);
+  align-items: start;
+}
+.lt3-split--left { grid-template-columns: 300px minmax(0, 1fr); }
+@media (max-width: 980px) { .lt3-split, .lt3-split--left { grid-template-columns: 1fr; } }
+
+/* ── Knowledge Graph canvas ──────────────────────────────────────────────── */
+.lt3-graph-canvas {
+  position: relative;
+  height: 540px;
+  border-radius: var(--lt3-radius-lg);
+  border: 1px solid var(--border);
+  background:
+    radial-gradient(circle at center, var(--graph-grid) 1px, transparent 1.5px),
+    var(--graph-bg);
+  background-size: 26px 26px, cover;
+  overflow: hidden;
+}
+.lt3-graph-canvas svg { width: 100%; height: 100%; display: block; }
+.lt3-graph-legend { display: flex; flex-wrap: wrap; gap: var(--lt3-space-3); }
+.lt3-graph-legend span { display: inline-flex; align-items: center; gap: var(--lt3-space-2); font-size: var(--lt3-text-xs); color: var(--muted); }
+.lt3-graph-legend i { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
+
+.lt3-gnode { cursor: pointer; transition: opacity var(--lt3-dur-2) var(--lt3-ease); }
+.lt3-gnode circle { stroke: var(--surface); stroke-width: 2; transition: r var(--lt3-dur-2) var(--lt3-ease); }
+.lt3-gnode text { font-size: 11px; fill: var(--text); font-family: var(--lt3-font-sans); pointer-events: none; }
+.lt3-gedge { stroke: var(--border-strong); stroke-width: 1.4; opacity: 0.7; }
+
+.lt3-entity {
+  display: flex; align-items: center; gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3);
+  border-radius: var(--lt3-radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  transition: border-color var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease);
+  text-align: left; width: 100%;
+}
+.lt3-entity:hover { border-color: var(--border-strong); background: var(--surface-2); }
+.lt3-entity[data-active="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.lt3-entity__type { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--lt3-radius-xs); font-size: 0.95rem; }
+.lt3-entity__body { flex: 1; min-width: 0; }
+.lt3-entity__name { font-size: var(--lt3-text-sm); font-weight: var(--lt3-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lt3-entity__meta { font-size: var(--lt3-text-2xs); color: var(--faint); }
+
+/* ── Hybrid Search ───────────────────────────────────────────────────────── */
+.lt3-search-hero { display: flex; flex-direction: column; gap: var(--lt3-space-4); }
+.lt3-fusion {
+  display: inline-flex; align-items: center; gap: 0;
+  border-radius: var(--lt3-radius-sm);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.lt3-fusion button {
+  padding: var(--lt3-space-2) var(--lt3-space-4);
+  font-size: var(--lt3-text-xs); font-weight: var(--lt3-weight-semi);
+  color: var(--muted); background: var(--surface);
+  border-right: 1px solid var(--border);
+}
+.lt3-fusion button:last-child { border-right: none; }
+.lt3-fusion button[data-active="true"] { background: var(--accent-soft); color: var(--accent); }
+
+.lt3-result {
+  display: flex; flex-direction: column; gap: var(--lt3-space-2);
+  padding: var(--lt3-space-4);
+  border-radius: var(--lt3-radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  transition: border-color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-result:hover { border-color: var(--border-strong); }
+.lt3-result__top { display: flex; align-items: center; gap: var(--lt3-space-3); }
+.lt3-result__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); }
+.lt3-result__snippet { font-size: var(--lt3-text-sm); color: var(--muted); }
+.lt3-result__scores { display: flex; gap: var(--lt3-space-4); flex-wrap: wrap; }
+.lt3-score { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
+.lt3-score__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--lt3-text-2xs); color: var(--faint); }
+.lt3-score__row b { color: var(--text); font-family: var(--lt3-font-mono); }
+
+/* ── Chat (3-pane: conversations · thread · retrieval context) ───────────── */
+.lt3-chat {
+  position: relative;
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr) 340px;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Conversation list rail */
+.lt3-chatlist { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); }
+.lt3-chatlist__head { flex: none; padding: var(--lt3-space-4); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--lt3-space-3); }
+.lt3-chatlist__items { flex: 1; min-height: 0; overflow-y: auto; padding: var(--lt3-space-2); display: flex; flex-direction: column; gap: 2px; }
+.lt3-convo {
+  display: flex; align-items: center; gap: var(--lt3-space-2);
+  width: 100%; text-align: left;
+  padding: var(--lt3-space-3);
+  border-radius: var(--lt3-radius-sm);
+  color: var(--muted);
+  transition: background var(--lt3-dur-1) var(--lt3-ease), color var(--lt3-dur-1) var(--lt3-ease);
+}
+.lt3-convo:hover { background: var(--surface-2); color: var(--text); }
+.lt3-convo[data-active="true"] { background: var(--accent-soft); color: var(--accent); }
+.lt3-convo__body { flex: 1; min-width: 0; }
+.lt3-convo__title { font-size: var(--lt3-text-sm); font-weight: var(--lt3-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lt3-convo__meta { font-size: var(--lt3-text-2xs); color: var(--faint); }
+.lt3-convo__del { opacity: 0; flex: none; }
+.lt3-convo:hover .lt3-convo__del, .lt3-convo[data-active="true"] .lt3-convo__del { opacity: 1; }
+
+/* Main thread column */
+.lt3-chat__main { display: flex; flex-direction: column; min-width: 0; height: 100%; }
+.lt3-chat__bar {
+  flex: none; display: flex; align-items: center; gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3) var(--lt3-space-5);
+  border-bottom: 1px solid var(--border);
+  min-height: 56px;
+}
+.lt3-chat__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lt3-chat__thread { flex: 1; overflow-y: auto; padding: var(--lt3-space-6); display: flex; flex-direction: column; gap: var(--lt3-space-5); }
+.lt3-chat__thread-inner { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--lt3-space-5); }
+
+.lt3-msg { display: flex; gap: var(--lt3-space-3); max-width: 100%; }
+.lt3-msg--user { align-self: flex-end; flex-direction: row-reverse; max-width: 90%; }
+.lt3-msg--ai { align-self: flex-start; max-width: 100%; }
+.lt3-msg__avatar { width: 32px; height: 32px; flex: none; border-radius: var(--lt3-radius-sm); display: grid; place-items: center; }
+.lt3-msg--ai .lt3-msg__avatar { background: linear-gradient(135deg, var(--lt3-pillar-graph), var(--lt3-pillar-vector)); color: #fff; }
+.lt3-msg--user .lt3-msg__avatar { background: var(--surface-3); color: var(--muted); }
+.lt3-msg__body { min-width: 0; display: flex; flex-direction: column; gap: var(--lt3-space-2); }
+.lt3-msg__bubble { padding: var(--lt3-space-3) var(--lt3-space-4); border-radius: var(--lt3-radius-md); font-size: var(--lt3-text-md); line-height: var(--lt3-leading-normal); white-space: pre-wrap; overflow-wrap: anywhere; }
+.lt3-msg--ai .lt3-msg__bubble { background: var(--surface); border: 1px solid var(--border); }
+.lt3-msg--user .lt3-msg__bubble { background: var(--accent); color: #fff; }
+.lt3-msg__cites { display: flex; flex-wrap: wrap; gap: var(--lt3-space-2); }
+.lt3-typing { display: inline-flex; gap: 4px; align-items: center; padding: var(--lt3-space-1) 0; }
+.lt3-typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--faint); animation: lt3-bounce 1s var(--lt3-ease) infinite; }
+.lt3-typing i:nth-child(2) { animation-delay: 0.15s; }
+.lt3-typing i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes lt3-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
+
+/* Composer */
+.lt3-composer { flex: none; padding: var(--lt3-space-3) var(--lt3-space-6) var(--lt3-space-5); }
+.lt3-composer__inner { max-width: 780px; margin: 0 auto; }
+.lt3-composer__box {
+  display: flex; align-items: flex-end; gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3) var(--lt3-space-3) var(--lt3-space-3) var(--lt3-space-4);
+  border-radius: var(--lt3-radius-lg);
+  border: 1px solid var(--border);
+  background: var(--input);
+  transition: border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-composer__box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
+.lt3-composer__box textarea { flex: 1; background: none; border: none; outline: none; resize: none; max-height: 200px; min-height: 24px; font-size: var(--lt3-text-md); line-height: var(--lt3-leading-snug); }
+.lt3-composer__tools { display: flex; align-items: center; gap: var(--lt3-space-2); margin-top: var(--lt3-space-3); flex-wrap: wrap; }
+.lt3-composer__hint { margin-top: var(--lt3-space-2); font-size: var(--lt3-text-2xs); color: var(--faint); text-align: center; }
+
+/* Retrieval context column */
+.lt3-chat__context { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); }
+.lt3-chat__context-head { flex: none; padding: var(--lt3-space-4) var(--lt3-space-4) var(--lt3-space-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--lt3-space-2); }
+.lt3-chat__context-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--lt3-space-4); display: flex; flex-direction: column; gap: var(--lt3-space-5); }
+.lt3-ctx-sec__title { display: flex; align-items: center; gap: var(--lt3-space-2); font-size: var(--lt3-text-2xs); font-weight: var(--lt3-weight-semi); letter-spacing: var(--lt3-tracking-caps); text-transform: uppercase; color: var(--faint); margin-bottom: var(--lt3-space-3); }
+.lt3-ctx-sec__title .ti { font-size: 0.95rem; }
+.lt3-ctx-item { display: flex; align-items: center; gap: var(--lt3-space-2); padding: var(--lt3-space-2) 0; font-size: var(--lt3-text-sm); }
+.lt3-ctx-item__dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
+.lt3-ctx-item__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lt3-ctx-item__score { font-family: var(--lt3-font-mono); font-size: var(--lt3-text-2xs); color: var(--muted); }
+
+/* Mobile/tablet pane toggles + off-canvas behaviour */
+.lt3-chat__toggle-list, .lt3-chat__toggle-context { display: none; }
+.lt3-chat__pane-close { display: none; }
+.lt3-chat__scrim { display: none; position: absolute; inset: 0; background: var(--overlay); z-index: 5; }
+.lt3-chat[data-list="open"] .lt3-chat__scrim,
+.lt3-chat[data-context="open"] .lt3-chat__scrim { display: block; }
+
+@media (max-width: 1240px) {
+  .lt3-chat { grid-template-columns: 264px minmax(0, 1fr); }
+  .lt3-chat__context {
+    position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
+    transform: translateX(102%); transition: transform var(--lt3-dur-3) var(--lt3-ease);
+    z-index: 6; box-shadow: var(--lt3-elev-3);
+  }
+  .lt3-chat[data-context="open"] .lt3-chat__context { transform: none; }
+  .lt3-chat__toggle-context { display: inline-flex; }
+  .lt3-chat__context .lt3-chat__pane-close { display: inline-flex; }
+}
+
+@media (max-width: 900px) {
+  .lt3-chat { grid-template-columns: minmax(0, 1fr); }
+  .lt3-chatlist {
+    position: absolute; top: 0; left: 0; bottom: 0; width: min(280px, 86vw);
+    transform: translateX(-104%); transition: transform var(--lt3-dur-3) var(--lt3-ease);
+    z-index: 6; box-shadow: var(--lt3-elev-3);
+  }
+  .lt3-chat[data-list="open"] .lt3-chatlist { transform: none; }
+  .lt3-chat__toggle-list { display: inline-flex; }
+  .lt3-chatlist .lt3-chat__pane-close { display: inline-flex; }
+  .lt3-chat__thread { padding: var(--lt3-space-4); }
+  .lt3-composer { padding: var(--lt3-space-3) var(--lt3-space-4) var(--lt3-space-4); }
+}
+
+/* ── Files ───────────────────────────────────────────────────────────────── */
+.lt3-filerow { display: flex; align-items: center; gap: var(--lt3-space-3); padding: var(--lt3-space-3); border-radius: var(--lt3-radius-sm); }
+.lt3-filerow:hover { background: var(--surface-2); }
+.lt3-filerow__icon { width: 30px; text-align: center; color: var(--muted); }
+.lt3-drop {
+  display: flex; flex-direction: column; align-items: center; gap: var(--lt3-space-3);
+  padding: var(--lt3-space-7);
+  border: 1.5px dashed var(--border-strong);
+  border-radius: var(--lt3-radius-lg);
+  background: var(--surface-2);
+  text-align: center;
+}
+
+/* ── Pipeline ────────────────────────────────────────────────────────────── */
+.lt3-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: var(--lt3-space-3); }
+.lt3-stage {
+  flex: none; width: 220px;
+  padding: var(--lt3-space-4);
+  border-radius: var(--lt3-radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.lt3-stage__num { font-family: var(--lt3-font-mono); font-size: var(--lt3-text-2xs); color: var(--faint); }
+.lt3-stage__name { font-weight: var(--lt3-weight-semi); margin-top: 2px; }
+.lt3-flow__arrow { flex: none; display: grid; place-items: center; width: 44px; color: var(--faint); }
+.lt3-flow__arrow .ti { font-size: 1.3rem; }
+
+/* ── Generic 2-up metric rows used widely ────────────────────────────────── */
+.lt3-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--lt3-space-3); }
+
+/* ── Admin shared ────────────────────────────────────────────────────────── */
+.lt3-keyval { display: grid; grid-template-columns: max-content 1fr; gap: var(--lt3-space-2) var(--lt3-space-5); font-size: var(--lt3-text-sm); }
+.lt3-keyval dt { color: var(--muted); }
+.lt3-keyval dd { margin: 0; font-weight: var(--lt3-weight-medium); }
+
+.lt3-timeline { position: relative; padding-left: var(--lt3-space-5); }
+.lt3-timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
+.lt3-timeline__item { position: relative; padding: 0 0 var(--lt3-space-4); }
+.lt3-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--lt3-space-5) + 1px); top: 5px; width: 10px; height: 10px; border-radius: 99px; background: var(--accent); border: 2px solid var(--surface); }
+.lt3-timeline__time { font-size: var(--lt3-text-2xs); color: var(--faint); font-family: var(--lt3-font-mono); }
+.lt3-timeline__body { font-size: var(--lt3-text-sm); }

package/static/v3/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
+  <title>Lattice AI · Local-First Workspace</title>
+
+  <!-- Pre-paint theme to avoid a flash (mirrors data-lt-theme from storage). -->
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem("lt-theme");
+        if (t === "dark" || t === "light") document.documentElement.setAttribute("data-lt-theme", t);
+      } catch (e) {}
+    })();
+  </script>
+
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+
+  <!-- Color single-source (shared with the rest of Lattice AI) -->
+  <link rel="stylesheet" href="/static/css/tokens.css?v=3.0.0">
+  <!-- v3 design system (token-native, no legacy override layers) -->
+  <link rel="stylesheet" href="/static/v3/css/lattice.tokens.css?v=3.0.0">
+  <link rel="stylesheet" href="/static/v3/css/lattice.base.css?v=3.0.0">
+  <link rel="stylesheet" href="/static/v3/css/lattice.components.css?v=3.0.0">
+  <link rel="stylesheet" href="/static/v3/css/lattice.shell.css?v=3.0.0">
+  <link rel="stylesheet" href="/static/v3/css/lattice.views.css?v=3.0.0">
+</head>
+<body>
+  <div id="app"></div>
+  <noscript style="display:block;padding:2rem;font-family:system-ui">Lattice AI requires JavaScript to run the workspace shell.</noscript>
+  <script type="module" src="/static/v3/js/app.js?v=3.0.0"></script>
+</body>
+</html>

package/static/v3/js/app.js

@@ -0,0 +1,26 @@
+/* ============================================================================
+ * Lattice AI v3 — Entry point
+ * Boots the shell. Views are lazy-loaded by the router (see core/routes.js).
+ * ========================================================================== */
+
+import { boot } from "./core/shell.js";
+
+const root = document.getElementById("app");
+if (root) boot(root);
+
+// CDN fonts/icons are progressive enhancement. If Tabler's webfont is blocked
+// or offline, compact text fallbacks keep icon-only controls identifiable.
+if (document.fonts && document.fonts.ready) {
+  document.fonts.ready.then(() => {
+    if (!document.fonts.check('16px "tabler-icons"')) {
+      document.documentElement.dataset.ltIcons = "fallback";
+    }
+  }).catch(() => { document.documentElement.dataset.ltIcons = "fallback"; });
+} else {
+  document.documentElement.dataset.ltIcons = "fallback";
+}
+
+// Best-effort PWA hook (silent if unsupported / not served).
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/sw.js").catch(() => {});
+}