ltcai 3.3.0 → 3.4.0

package/static/v3/css/lattice.tokens.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Lattice AI v3 — Structural Design Tokens
+ * Lattice AI v3.3.1 — Structural Design Tokens
  *
  * This layer sits ON TOP of /static/css/tokens.css (the color single-source).
  * It adds the NON-COLOR structure of the v3 system — spacing, type scale,
@@ -40,9 +40,9 @@
   --lt3-weight-bold:   700;
   --lt3-weight-black:  800;
 
-  --lt3-tracking-tight: -0.02em;
-  --lt3-tracking-wide:  0.02em;
-  --lt3-tracking-caps:  0.14em;   /* eyebrow / section labels */
+  --lt3-tracking-tight: 0;
+  --lt3-tracking-wide:  0;
+  --lt3-tracking-caps:  0;   /* eyebrow / section labels */
 
   /* ── Spacing scale (4pt base) ───────────────────────────────────────── */
   --lt3-space-0:  0;
@@ -57,18 +57,18 @@
   --lt3-space-9:  4rem;     /* 64 */
 
   /* ── Radii ──────────────────────────────────────────────────────────── */
-  --lt3-radius-xs: 6px;
-  --lt3-radius-sm: 9px;
-  --lt3-radius-md: 13px;
-  --lt3-radius-lg: 18px;
-  --lt3-radius-xl: 24px;
+  --lt3-radius-xs: 4px;
+  --lt3-radius-sm: 6px;
+  --lt3-radius-md: 8px;
+  --lt3-radius-lg: 8px;
+  --lt3-radius-xl: 8px;
   --lt3-radius-pill: 999px;
 
   /* ── Elevation (theme-aware via inherited --shadow*) ────────────────── */
   --lt3-elev-0: none;
   --lt3-elev-1: var(--shadow-sm);
   --lt3-elev-2: var(--shadow);
-  --lt3-elev-3: 0 28px 70px rgba(15, 23, 42, 0.16);
+  --lt3-elev-3: 0 28px 70px rgba(30, 36, 48, 0.18);
 
   /* ── Motion ─────────────────────────────────────────────────────────── */
   --lt3-ease: var(--lt-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
@@ -87,10 +87,10 @@
   --lt3-z-toast: 100;
 
   /* ── Layout rails ───────────────────────────────────────────────────── */
-  --lt3-rail-w: 268px;        /* expanded nav rail */
+  --lt3-rail-w: 292px;        /* expanded nav rail */
   --lt3-rail-w-collapsed: 76px;
-  --lt3-topbar-h: 60px;
-  --lt3-content-max: 1240px;
+  --lt3-topbar-h: 56px;
+  --lt3-content-max: 1360px;
   --lt3-content-pad: var(--lt3-space-6);
 
   /* ── Retrieval identity accents (mapped to themed accents) ──────────── */

package/static/v3/css/{lattice.tokens.c597ff81.css → lattice.tokens.e7018963.css}

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Lattice AI v3 — Structural Design Tokens
+ * Lattice AI v3.3.1 — Structural Design Tokens
  *
  * This layer sits ON TOP of /static/css/tokens.css (the color single-source).
  * It adds the NON-COLOR structure of the v3 system — spacing, type scale,
@@ -40,9 +40,9 @@
   --lt3-weight-bold:   700;
   --lt3-weight-black:  800;
 
-  --lt3-tracking-tight: -0.02em;
-  --lt3-tracking-wide:  0.02em;
-  --lt3-tracking-caps:  0.14em;   /* eyebrow / section labels */
+  --lt3-tracking-tight: 0;
+  --lt3-tracking-wide:  0;
+  --lt3-tracking-caps:  0;   /* eyebrow / section labels */
 
   /* ── Spacing scale (4pt base) ───────────────────────────────────────── */
   --lt3-space-0:  0;
@@ -57,18 +57,18 @@
   --lt3-space-9:  4rem;     /* 64 */
 
   /* ── Radii ──────────────────────────────────────────────────────────── */
-  --lt3-radius-xs: 6px;
-  --lt3-radius-sm: 9px;
-  --lt3-radius-md: 13px;
-  --lt3-radius-lg: 18px;
-  --lt3-radius-xl: 24px;
+  --lt3-radius-xs: 4px;
+  --lt3-radius-sm: 6px;
+  --lt3-radius-md: 8px;
+  --lt3-radius-lg: 8px;
+  --lt3-radius-xl: 8px;
   --lt3-radius-pill: 999px;
 
   /* ── Elevation (theme-aware via inherited --shadow*) ────────────────── */
   --lt3-elev-0: none;
   --lt3-elev-1: var(--shadow-sm);
   --lt3-elev-2: var(--shadow);
-  --lt3-elev-3: 0 28px 70px rgba(15, 23, 42, 0.16);
+  --lt3-elev-3: 0 28px 70px rgba(30, 36, 48, 0.18);
 
   /* ── Motion ─────────────────────────────────────────────────────────── */
   --lt3-ease: var(--lt-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
@@ -87,10 +87,10 @@
   --lt3-z-toast: 100;
 
   /* ── Layout rails ───────────────────────────────────────────────────── */
-  --lt3-rail-w: 268px;        /* expanded nav rail */
+  --lt3-rail-w: 292px;        /* expanded nav rail */
   --lt3-rail-w-collapsed: 76px;
-  --lt3-topbar-h: 60px;
-  --lt3-content-max: 1240px;
+  --lt3-topbar-h: 56px;
+  --lt3-content-max: 1360px;
   --lt3-content-pad: var(--lt3-space-6);
 
   /* ── Retrieval identity accents (mapped to themed accents) ──────────── */

package/static/v3/css/{lattice.views.1d326beb.css → lattice.views.22f69117.css}

@@ -7,30 +7,90 @@
 .lt3-hero {
   position: relative;
   overflow: hidden;
-  padding: var(--lt3-space-7);
-  border-radius: var(--lt3-radius-xl);
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
+  gap: var(--lt3-space-6);
+  padding: var(--lt3-space-6);
+  border-radius: var(--lt3-radius-md);
   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%),
+    linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 62%, var(--surface)) 100%),
     var(--surface);
   border: 1px solid var(--border);
+  box-shadow: var(--lt3-elev-1);
+}
+.lt3-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--lt3-mesh-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--lt3-mesh-line) 1px, transparent 1px);
+  background-size: calc(var(--lt3-mesh-size) * 0.85) calc(var(--lt3-mesh-size) * 0.85);
+  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 100%);
 }
+.lt3-hero > * { position: relative; z-index: 1; }
 .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__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: 22ch; }
 .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-hero__aside { display: flex; flex-direction: column; gap: var(--lt3-space-3); }
+
+.lt3-readiness {
+  display: grid;
+  gap: var(--lt3-space-2);
+}
+.lt3-readiness__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-md);
+  background: var(--card);
+}
+.lt3-readiness__icon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--lt3-radius-xs);
+  background: var(--surface-2);
+  color: var(--accent);
+}
+.lt3-readiness__title { font-size: var(--lt3-text-sm); font-weight: var(--lt3-weight-semi); }
+.lt3-readiness__meta { font-size: var(--lt3-text-2xs); color: var(--faint); }
+.lt3-mini-lattice {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--lt3-space-2);
+}
+.lt3-mini-lattice__node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 88px;
+  padding: var(--lt3-space-3);
+  border-radius: var(--lt3-radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.lt3-mini-lattice__node b { font-size: var(--lt3-text-sm); }
+.lt3-mini-lattice__node span { font-size: var(--lt3-text-2xs); color: var(--faint); }
 
 .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);
+  min-height: 132px;
   border-radius: var(--lt3-radius-md);
-  background: var(--surface);
+  background: var(--card);
   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__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--lt3-radius-md); 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); }
 
@@ -48,7 +108,7 @@
 .lt3-graph-canvas {
   position: relative;
   height: 540px;
-  border-radius: var(--lt3-radius-lg);
+  border-radius: var(--lt3-radius-md);
   border: 1px solid var(--border);
   background:
     radial-gradient(circle at center, var(--graph-grid) 1px, transparent 1.5px),
@@ -120,13 +180,13 @@
 .lt3-chat {
   position: relative;
   display: grid;
-  grid-template-columns: 264px minmax(0, 1fr) 340px;
+  grid-template-columns: 280px 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 { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--sidebar); }
 .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 {
@@ -151,7 +211,8 @@
   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;
+  min-height: 54px;
+  background: var(--surface-elevated);
 }
 .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); }
@@ -180,7 +241,7 @@
 .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-radius: var(--lt3-radius-md);
   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);
@@ -191,7 +252,7 @@
 .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 { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--sidebar); }
 .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); }
@@ -209,7 +270,7 @@
 .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 { grid-template-columns: 280px 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);
@@ -242,11 +303,18 @@
   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);
+  border-radius: var(--lt3-radius-md);
   background: var(--surface-2);
   text-align: center;
   transition: border-color var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease);
 }
+.lt3-drop__meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--lt3-space-2);
+  max-width: 720px;
+}
 .lt3-drop.is-dragover {
   border-color: var(--accent);
   background: var(--accent-soft);
@@ -269,6 +337,16 @@
 /* ── 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); }
 
+@media (max-width: 980px) {
+  .lt3-hero { grid-template-columns: 1fr; padding: var(--lt3-space-5); }
+}
+
+@media (max-width: 680px) {
+  .lt3-mini-lattice { grid-template-columns: 1fr; }
+  .lt3-hero__title { font-size: var(--lt3-text-2xl); }
+  .lt3-quick { min-height: auto; }
+}
+
 /* ── 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); }

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

@@ -7,30 +7,90 @@
 .lt3-hero {
   position: relative;
   overflow: hidden;
-  padding: var(--lt3-space-7);
-  border-radius: var(--lt3-radius-xl);
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
+  gap: var(--lt3-space-6);
+  padding: var(--lt3-space-6);
+  border-radius: var(--lt3-radius-md);
   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%),
+    linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 62%, var(--surface)) 100%),
     var(--surface);
   border: 1px solid var(--border);
+  box-shadow: var(--lt3-elev-1);
+}
+.lt3-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--lt3-mesh-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--lt3-mesh-line) 1px, transparent 1px);
+  background-size: calc(var(--lt3-mesh-size) * 0.85) calc(var(--lt3-mesh-size) * 0.85);
+  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 100%);
 }
+.lt3-hero > * { position: relative; z-index: 1; }
 .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__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: 22ch; }
 .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-hero__aside { display: flex; flex-direction: column; gap: var(--lt3-space-3); }
+
+.lt3-readiness {
+  display: grid;
+  gap: var(--lt3-space-2);
+}
+.lt3-readiness__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-md);
+  background: var(--card);
+}
+.lt3-readiness__icon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--lt3-radius-xs);
+  background: var(--surface-2);
+  color: var(--accent);
+}
+.lt3-readiness__title { font-size: var(--lt3-text-sm); font-weight: var(--lt3-weight-semi); }
+.lt3-readiness__meta { font-size: var(--lt3-text-2xs); color: var(--faint); }
+.lt3-mini-lattice {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--lt3-space-2);
+}
+.lt3-mini-lattice__node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 88px;
+  padding: var(--lt3-space-3);
+  border-radius: var(--lt3-radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.lt3-mini-lattice__node b { font-size: var(--lt3-text-sm); }
+.lt3-mini-lattice__node span { font-size: var(--lt3-text-2xs); color: var(--faint); }
 
 .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);
+  min-height: 132px;
   border-radius: var(--lt3-radius-md);
-  background: var(--surface);
+  background: var(--card);
   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__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--lt3-radius-md); 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); }
 
@@ -48,7 +108,7 @@
 .lt3-graph-canvas {
   position: relative;
   height: 540px;
-  border-radius: var(--lt3-radius-lg);
+  border-radius: var(--lt3-radius-md);
   border: 1px solid var(--border);
   background:
     radial-gradient(circle at center, var(--graph-grid) 1px, transparent 1.5px),
@@ -120,13 +180,13 @@
 .lt3-chat {
   position: relative;
   display: grid;
-  grid-template-columns: 264px minmax(0, 1fr) 340px;
+  grid-template-columns: 280px 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 { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--sidebar); }
 .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 {
@@ -151,7 +211,8 @@
   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;
+  min-height: 54px;
+  background: var(--surface-elevated);
 }
 .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); }
@@ -180,7 +241,7 @@
 .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-radius: var(--lt3-radius-md);
   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);
@@ -191,7 +252,7 @@
 .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 { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--sidebar); }
 .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); }
@@ -209,7 +270,7 @@
 .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 { grid-template-columns: 280px 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);
@@ -242,11 +303,18 @@
   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);
+  border-radius: var(--lt3-radius-md);
   background: var(--surface-2);
   text-align: center;
   transition: border-color var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease);
 }
+.lt3-drop__meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--lt3-space-2);
+  max-width: 720px;
+}
 .lt3-drop.is-dragover {
   border-color: var(--accent);
   background: var(--accent-soft);
@@ -269,6 +337,16 @@
 /* ── 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); }
 
+@media (max-width: 980px) {
+  .lt3-hero { grid-template-columns: 1fr; padding: var(--lt3-space-5); }
+}
+
+@media (max-width: 680px) {
+  .lt3-mini-lattice { grid-template-columns: 1fr; }
+  .lt3-hero__title { font-size: var(--lt3-text-2xl); }
+  .lt3-quick { min-height: auto; }
+}
+
 /* ── 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); }

package/static/v3/js/{app.cf5bb712.js → app.c4acfdd8.js}

@@ -3,7 +3,7 @@
  * Boots the shell. Views are lazy-loaded by the router (see core/routes.js).
  * ========================================================================== */
 
-import { boot } from "./core/shell.9e707234.js";
+import { boot } from "./core/shell.80a6ad82.js";
 
 const root = document.getElementById("app");
 if (root) boot(root);

package/static/v3/js/core/{api.113660c5.js → api.12b568ad.js}

@@ -440,6 +440,73 @@ export const api = {
   mcpClaudeServers() { return withFallback("/mcp/claude-code-servers", {}, { servers: [] }); },
   mcpCustom() { return withFallback("/mcp/custom", {}, { custom: [] }); },
   mcpRecommend(query, limit = 6) { return raw("/mcp/recommend", { method: "POST", body: { query, limit } }); },
+
+  /* ── v3.4 Platform Completion ───────────────────────────────────────────
+   * Uploaded documents in Files, Connect Folder + Folder Watch over the real
+   * on-device runtime, the Local Agent status, and Hooks dispatch/run-log.
+   * All endpoints are real (latticeai/api + knowledge_graph_api); fallback-safe. */
+
+  /** GET /knowledge-graph/documents — uploaded + indexed docs with index state. */
+  async documents(limit = 200) {
+    const res = await raw(`/knowledge-graph/documents?limit=${encodeURIComponent(limit)}`);
+    if (res.ok && res.data && Array.isArray(res.data.documents)) {
+      return { ok: true, status: res.status, data: res.data.documents, source: "live", total: res.data.total };
+    }
+    return { ok: false, status: res.status, data: [], source: "unavailable", error: res.error };
+  },
+
+  // Local Agent (the on-device Lattice runtime: real GET /api/local-agent/status)
+  async localAgent() {
+    const res = await raw("/api/local-agent/status");
+    if (res.ok && res.data && res.data.agent) {
+      return { ok: true, status: res.status, data: res.data, source: "live" };
+    }
+    return {
+      ok: false, status: res.status, source: "unavailable",
+      data: { agent: { online: false }, health: {}, folders: { connected: 0, watching: 0 }, watch: { available: false, active: {} }, sources: [] },
+    };
+  },
+
+  // Connect Folder + Folder Watch (real backend: /knowledge-graph/local/*)
+  localRoots() { return withFallback("/knowledge-graph/local/roots", {}, { roots: [] }); },
+  async localSources() {
+    const res = await raw("/knowledge-graph/local/sources");
+    if (res.ok && res.data && Array.isArray(res.data.sources)) {
+      return { ok: true, status: res.status, data: res.data, source: "live" };
+    }
+    return { ok: false, status: res.status, data: { sources: [], watch: { available: false, active: {} } }, source: "unavailable" };
+  },
+  localWatchStatus() { return raw("/knowledge-graph/local/watch/status"); },
+  localWatchStop(source_id) { return raw("/knowledge-graph/local/watch/stop", { method: "POST", body: { source_id } }); },
+  approvePermission(token) { return raw(`/permissions/approve/${encodeURIComponent(token)}`, { method: "POST" }); },
+  indexFolder(path, opts = {}) {
+    return raw("/knowledge-graph/local/index", { method: "POST", body: { path, ...opts } });
+  },
+  /** One-call Connect Folder: request → self-approve (the click is the consent)
+   *  → index (+ optional watch). Returns { ok, data, error }. */
+  async connectFolder(path, { watch = true, includeOcr = false } = {}) {
+    const probe = await raw("/knowledge-graph/local/index", { method: "POST", body: { path, approved: false } });
+    const token = probe.data && probe.data.approval_token;
+    if (!token) {
+      const detail = (probe.data && (probe.data.detail || probe.data.error)) || "the runtime did not return an approval token";
+      return { ok: false, error: detail, status: probe.status };
+    }
+    const approved = await raw(`/permissions/approve/${encodeURIComponent(token)}`, { method: "POST" });
+    if (!approved.ok) {
+      const detail = (approved.data && (approved.data.detail || approved.data.error)) || "approval failed";
+      return { ok: false, error: detail, status: approved.status };
+    }
+    const res = await raw("/knowledge-graph/local/index", {
+      method: "POST",
+      body: { path, approved: true, approval_token: token, watch_enabled: watch, include_ocr: includeOcr, consent: { approved: true, source: "files-ui" } },
+    });
+    if (res.ok && res.data && !res.data.detail) return { ok: true, data: res.data, status: res.status };
+    return { ok: false, error: (res.data && (res.data.detail || res.data.error)) || "indexing failed", status: res.status, data: res.data };
+  },
+
+  // Hooks dispatch (real backend: POST /api/hooks/run + GET /api/hooks/runs)
+  hookRun(body) { return raw("/api/hooks/run", { method: "POST", body }); },
+  hookRuns(limit = 50, kind) { return withFallback(`/api/hooks/runs?limit=${encodeURIComponent(limit)}${kind ? "&kind=" + encodeURIComponent(kind) : ""}`, {}, { runs: [], total: 0 }); },
 };
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));