ltcai 3.2.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/README.md +87 -67
  2. package/docs/CHANGELOG.md +36 -0
  3. package/docs/architecture.md +2 -1
  4. package/docs/assets/v3.4.0/agent-run.png +0 -0
  5. package/docs/assets/v3.4.0/agents.png +0 -0
  6. package/docs/assets/v3.4.0/before/chat-before.png +0 -0
  7. package/docs/assets/v3.4.0/before/files-before.png +0 -0
  8. package/docs/assets/v3.4.0/chat.png +0 -0
  9. package/docs/assets/v3.4.0/connect-folder.png +0 -0
  10. package/docs/assets/v3.4.0/files.png +0 -0
  11. package/docs/assets/v3.4.0/home.png +0 -0
  12. package/docs/assets/v3.4.0/hooks-dispatch.png +0 -0
  13. package/docs/assets/v3.4.0/knowledge-graph.png +0 -0
  14. package/docs/assets/v3.4.0/local-agent.png +0 -0
  15. package/docs/assets/v3.4.0/memory.png +0 -0
  16. package/docs/assets/v3.4.0/settings.png +0 -0
  17. package/docs/assets/v3.4.0/vision-input.png +0 -0
  18. package/docs/assets/v3.4.0/workflows.png +0 -0
  19. package/knowledge_graph.py +45 -0
  20. package/knowledge_graph_api.py +10 -0
  21. package/latticeai/__init__.py +1 -1
  22. package/latticeai/api/agents.py +3 -0
  23. package/latticeai/api/hooks.py +39 -0
  24. package/latticeai/api/local_files.py +41 -0
  25. package/latticeai/api/models.py +36 -1
  26. package/latticeai/api/tools.py +16 -1
  27. package/latticeai/api/workflow_designer.py +2 -1
  28. package/latticeai/core/hooks.py +398 -2
  29. package/latticeai/core/marketplace.py +1 -1
  30. package/latticeai/core/multi_agent.py +1 -1
  31. package/latticeai/core/workflow_engine.py +21 -1
  32. package/latticeai/core/workspace_os.py +1 -1
  33. package/latticeai/server_app.py +40 -0
  34. package/latticeai/services/agent_runtime.py +46 -1
  35. package/latticeai/services/upload_service.py +17 -0
  36. package/package.json +1 -1
  37. package/scripts/build_v3_assets.mjs +7 -1
  38. package/scripts/capture/capture_v340.js +88 -0
  39. package/static/css/{tokens.5a595671.css → tokens.3ba22e37.css} +109 -109
  40. package/static/css/tokens.css +109 -109
  41. package/static/v3/asset-manifest.json +25 -25
  42. package/static/v3/css/{lattice.components.011e988b.css → lattice.components.9b49d614.css} +57 -32
  43. package/static/v3/css/lattice.components.css +57 -32
  44. package/static/v3/css/{lattice.shell.4920f42d.css → lattice.shell.6ceea7c8.css} +75 -31
  45. package/static/v3/css/lattice.shell.css +75 -31
  46. package/static/v3/css/lattice.tokens.css +13 -13
  47. package/static/v3/css/{lattice.tokens.c597ff81.css → lattice.tokens.e7018963.css} +13 -13
  48. package/static/v3/css/{lattice.views.3ee19d4e.css → lattice.views.22f69117.css} +98 -15
  49. package/static/v3/css/lattice.views.css +98 -15
  50. package/static/v3/js/{app.a5adc0f3.js → app.c4acfdd8.js} +1 -1
  51. package/static/v3/js/core/{api.603b978f.js → api.12b568ad.js} +126 -4
  52. package/static/v3/js/core/api.js +126 -4
  53. package/static/v3/js/core/{components.4c83e0a9.js → components.35f02e4c.js} +8 -0
  54. package/static/v3/js/core/components.js +8 -0
  55. package/static/v3/js/core/{routes.07ad6696.js → routes.d214b399.js} +16 -12
  56. package/static/v3/js/core/routes.js +16 -12
  57. package/static/v3/js/core/{shell.ea0b9ae5.js → shell.80a6ad82.js} +37 -9
  58. package/static/v3/js/core/shell.js +34 -6
  59. package/static/v3/js/views/agents.014d0b74.js +541 -0
  60. package/static/v3/js/views/agents.js +305 -57
  61. package/static/v3/js/views/{chat.718144ce.js → chat.e6dd7dd0.js} +162 -10
  62. package/static/v3/js/views/chat.js +162 -10
  63. package/static/v3/js/views/files.adad14c1.js +365 -0
  64. package/static/v3/js/views/files.js +269 -90
  65. package/static/v3/js/views/home.24f8b8ae.js +200 -0
  66. package/static/v3/js/views/home.js +96 -15
  67. package/static/v3/js/views/hooks.13845954.js +215 -0
  68. package/static/v3/js/views/hooks.js +117 -1
  69. package/static/v3/js/views/{memory.d2ed7a7c.js → memory.4ebdf474.js} +5 -4
  70. package/static/v3/js/views/memory.js +5 -4
  71. package/static/v3/js/views/{my-computer.1b2ff621.js → my-computer.c3ef5283.js} +224 -1
  72. package/static/v3/js/views/my-computer.js +224 -1
  73. package/static/v3/js/views/{settings.4f777210.js → settings.8631fa5e.js} +70 -2
  74. package/static/v3/js/views/settings.js +70 -2
  75. package/static/v3/js/views/agents.c373d48c.js +0 -293
  76. package/static/v3/js/views/files.4935197e.js +0 -186
  77. package/static/v3/js/views/home.cdde3b32.js +0 -119
  78. package/static/v3/js/views/hooks.f3edebca.js +0 -99
package/static/v3/css/lattice.components.css CHANGED
@@ -37,20 +37,21 @@
37
37
  .lt3-card,
38
38
  .lt3-panel {
39
39
  position: relative;
40
- background: var(--surface);
40
+ background: var(--card);
41
41
  border: 1px solid var(--border);
42
- border-radius: var(--lt3-radius-lg);
42
+ border-radius: var(--lt3-radius-md);
43
43
  box-shadow: var(--lt3-elev-1);
44
44
  }
45
45
  .lt3-panel { padding: var(--lt3-space-5); }
46
46
  .lt3-card { padding: var(--lt3-space-4); }
47
47
  .lt3-card--flat { box-shadow: none; background: var(--surface-2); }
48
48
  .lt3-card--ghost { background: transparent; border-style: dashed; box-shadow: none; }
49
- .lt3-card--interactive { transition: transform var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease); }
49
+ .lt3-card--interactive { transition: transform var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease); }
50
50
  .lt3-card--interactive:hover {
51
- transform: translateY(-2px);
52
- border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
53
- box-shadow: var(--lt3-elev-2);
51
+ transform: translateY(-1px);
52
+ border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
53
+ background: var(--surface);
54
+ box-shadow: var(--lt3-elev-1);
54
55
  }
55
56
 
56
57
  .lt3-panel__head {
@@ -61,7 +62,7 @@
61
62
  margin-bottom: var(--lt3-space-4);
62
63
  }
63
64
  .lt3-panel__title {
64
- font-size: var(--lt3-text-lg);
65
+ font-size: var(--lt3-text-md);
65
66
  font-weight: var(--lt3-weight-semi);
66
67
  letter-spacing: var(--lt3-tracking-tight);
67
68
  }
@@ -73,7 +74,7 @@
73
74
  align-items: center;
74
75
  justify-content: center;
75
76
  gap: var(--lt3-space-2);
76
- height: 38px;
77
+ height: 36px;
77
78
  padding: 0 var(--lt3-space-4);
78
79
  border-radius: var(--lt3-radius-sm);
79
80
  border: 1px solid transparent;
@@ -95,15 +96,15 @@
95
96
  .lt3-btn--danger { background: var(--lt3-err-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
96
97
  .lt3-btn--danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
97
98
  .lt3-btn--sm { height: 30px; padding: 0 var(--lt3-space-3); font-size: var(--lt3-text-xs); }
98
- .lt3-btn--lg { height: 46px; padding: 0 var(--lt3-space-5); font-size: var(--lt3-text-md); }
99
+ .lt3-btn--lg { height: 42px; padding: 0 var(--lt3-space-5); font-size: var(--lt3-text-sm); }
99
100
  .lt3-btn--block { width: 100%; }
100
101
 
101
102
  .lt3-iconbtn {
102
103
  display: inline-flex;
103
104
  align-items: center;
104
105
  justify-content: center;
105
- width: 38px;
106
- height: 38px;
106
+ width: 36px;
107
+ height: 36px;
107
108
  border-radius: var(--lt3-radius-sm);
108
109
  color: var(--muted);
109
110
  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
@@ -115,8 +116,8 @@
115
116
  /* ── Inputs ─────────────────────────────────────────────────────────────── */
116
117
  .lt3-input, .lt3-select, .lt3-textarea {
117
118
  width: 100%;
118
- height: 40px;
119
- padding: 0 var(--lt3-space-4);
119
+ height: 38px;
120
+ padding: 0 var(--lt3-space-3);
120
121
  background: var(--input);
121
122
  border: 1px solid var(--border);
122
123
  border-radius: var(--lt3-radius-sm);
@@ -133,12 +134,13 @@
133
134
  }
134
135
  .lt3-field { display: flex; flex-direction: column; gap: var(--lt3-space-2); }
135
136
  .lt3-label { font-size: var(--lt3-text-xs); font-weight: var(--lt3-weight-medium); color: var(--muted); }
137
+ .lt3-help { font-size: var(--lt3-text-xs); color: var(--faint); }
136
138
 
137
139
  .lt3-search {
138
140
  display: flex;
139
141
  align-items: center;
140
142
  gap: var(--lt3-space-2);
141
- height: 44px;
143
+ height: 40px;
142
144
  padding: 0 var(--lt3-space-4);
143
145
  background: var(--input);
144
146
  border: 1px solid var(--border);
@@ -221,22 +223,40 @@
221
223
 
222
224
  /* ── Stat tile ──────────────────────────────────────────────────────────── */
223
225
  .lt3-stat {
224
- display: flex;
225
- flex-direction: column;
226
- gap: var(--lt3-space-1);
227
- padding: var(--lt3-space-4) var(--lt3-space-5);
228
- background: var(--surface);
226
+ display: grid;
227
+ grid-template-columns: minmax(0, 1fr) auto;
228
+ align-items: start;
229
+ gap: var(--lt3-space-2);
230
+ min-height: 88px;
231
+ padding: var(--lt3-space-4);
232
+ background: var(--card);
229
233
  border: 1px solid var(--border);
230
234
  border-radius: var(--lt3-radius-md);
231
235
  }
232
- .lt3-stat__label { font-size: var(--lt3-text-xs); color: var(--muted); display: flex; align-items: center; gap: var(--lt3-space-2); }
236
+ .lt3-stat__label {
237
+ grid-column: 1 / -1;
238
+ font-size: var(--lt3-text-xs);
239
+ color: var(--muted);
240
+ display: flex;
241
+ align-items: center;
242
+ gap: var(--lt3-space-2);
243
+ }
244
+ .lt3-stat__label .ti {
245
+ display: inline-grid;
246
+ place-items: center;
247
+ width: 24px;
248
+ height: 24px;
249
+ border-radius: var(--lt3-radius-xs);
250
+ background: var(--surface-2);
251
+ color: var(--accent);
252
+ }
233
253
  .lt3-stat__value { font-size: var(--lt3-text-2xl); font-weight: var(--lt3-weight-bold); letter-spacing: var(--lt3-tracking-tight); line-height: 1.1; }
234
- .lt3-stat__delta { font-size: var(--lt3-text-2xs); color: var(--muted); }
254
+ .lt3-stat__delta { justify-self: end; font-size: var(--lt3-text-2xs); color: var(--muted); }
235
255
  .lt3-stat__delta--up { color: var(--success); }
236
256
  .lt3-stat__delta--down { color: var(--danger); }
237
257
 
238
258
  /* ── Tables ─────────────────────────────────────────────────────────────── */
239
- .lt3-table { width: 100%; border-collapse: collapse; font-size: var(--lt3-text-sm); }
259
+ .lt3-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lt3-text-sm); }
240
260
  .lt3-table th {
241
261
  text-align: left;
242
262
  font-size: var(--lt3-text-2xs);
@@ -244,19 +264,19 @@
244
264
  letter-spacing: var(--lt3-tracking-caps);
245
265
  text-transform: uppercase;
246
266
  color: var(--faint);
247
- padding: var(--lt3-space-3) var(--lt3-space-3);
267
+ padding: var(--lt3-space-3) var(--lt3-space-4);
248
268
  border-bottom: 1px solid var(--border);
249
- position: sticky; top: 0; background: var(--surface); z-index: 1;
269
+ position: sticky; top: 0; background: var(--surface-elevated); z-index: 1;
250
270
  }
251
271
  .lt3-table td {
252
- padding: var(--lt3-space-3) var(--lt3-space-3);
272
+ padding: var(--lt3-space-3) var(--lt3-space-4);
253
273
  border-bottom: 1px solid var(--line);
254
274
  vertical-align: middle;
255
275
  }
256
276
  .lt3-table tr:last-child td { border-bottom: none; }
257
277
  .lt3-table tbody tr { transition: background var(--lt3-dur-1) var(--lt3-ease); }
258
278
  .lt3-table tbody tr:hover { background: var(--surface-2); }
259
- .lt3-table--clip { border: 1px solid var(--border); border-radius: var(--lt3-radius-md); overflow: hidden; }
279
+ .lt3-table--clip { border: 1px solid var(--border); border-radius: var(--lt3-radius-md); overflow: hidden; background: var(--card); }
260
280
 
261
281
  /* ── List rows ──────────────────────────────────────────────────────────── */
262
282
  .lt3-list { display: flex; flex-direction: column; }
@@ -292,11 +312,11 @@
292
312
  gap: 2px;
293
313
  background: var(--surface-2);
294
314
  border: 1px solid var(--border);
295
- border-radius: var(--lt3-radius-sm);
315
+ border-radius: var(--lt3-radius-md);
296
316
  }
297
317
  .lt3-seg button {
298
318
  padding: var(--lt3-space-2) var(--lt3-space-3);
299
- border-radius: 7px;
319
+ border-radius: var(--lt3-radius-sm);
300
320
  font-size: var(--lt3-text-xs);
301
321
  font-weight: var(--lt3-weight-semi);
302
322
  color: var(--muted);
@@ -348,19 +368,24 @@
348
368
  .lt3-empty {
349
369
  display: flex; flex-direction: column; align-items: center; justify-content: center;
350
370
  gap: var(--lt3-space-3);
351
- padding: var(--lt3-space-8) var(--lt3-space-5);
371
+ min-height: 220px;
372
+ padding: var(--lt3-space-7) var(--lt3-space-5);
352
373
  text-align: center;
353
374
  color: var(--muted);
375
+ background:
376
+ linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 64%, transparent), transparent);
377
+ border: 1px dashed var(--border);
378
+ border-radius: var(--lt3-radius-md);
354
379
  }
355
380
  .lt3-empty__icon {
356
381
  display: grid; place-items: center;
357
- width: 56px; height: 56px;
358
- border-radius: var(--lt3-radius-lg);
382
+ width: 44px; height: 44px;
383
+ border-radius: var(--lt3-radius-md);
359
384
  background: var(--surface-2);
360
385
  border: 1px solid var(--border);
361
386
  color: var(--faint);
362
387
  }
363
- .lt3-empty__icon .ti { font-size: 1.6rem; }
388
+ .lt3-empty__icon .ti { font-size: 1.35rem; }
364
389
  .lt3-empty__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); color: var(--text); }
365
390
  .lt3-empty__body { font-size: var(--lt3-text-sm); max-width: 38ch; }
366
391
 
package/static/v3/css/{lattice.shell.4920f42d.css → lattice.shell.6ceea7c8.css} RENAMED
@@ -10,6 +10,7 @@
10
10
  display: grid;
11
11
  grid-template-columns: var(--lt3-rail-w) minmax(0, 1fr);
12
12
  height: 100dvh;
13
+ background: var(--app-bg);
13
14
  }
14
15
 
15
16
  /* ── Nav rail ────────────────────────────────────────────────────────────── */
@@ -19,9 +20,9 @@
19
20
  display: flex;
20
21
  flex-direction: column;
21
22
  min-height: 0;
22
- background: color-mix(in srgb, var(--sidebar) 88%, transparent);
23
+ background: var(--sidebar);
23
24
  border-right: 1px solid var(--border);
24
- backdrop-filter: blur(14px);
25
+ box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface) 40%, transparent);
25
26
  }
26
27
 
27
28
  .lt3-rail__brand {
@@ -32,16 +33,16 @@
32
33
  }
33
34
  .lt3-rail__logo {
34
35
  display: grid; place-items: center;
35
- width: 36px; height: 36px; flex: none;
36
- border-radius: var(--lt3-radius-sm);
37
- background: linear-gradient(135deg, var(--lt3-pillar-graph), var(--lt3-pillar-vector));
36
+ width: 34px; height: 34px; flex: none;
37
+ border-radius: var(--lt3-radius-md);
38
+ background: var(--text);
38
39
  color: #fff;
39
40
  box-shadow: var(--lt3-elev-1);
40
41
  }
41
42
  .lt3-rail__logo svg { width: 22px; height: 22px; }
42
43
  .lt3-rail__word { display: flex; flex-direction: column; line-height: 1.05; }
43
44
  .lt3-rail__word b { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-bold); letter-spacing: var(--lt3-tracking-tight); }
44
- .lt3-rail__word small { font-size: var(--lt3-text-2xs); color: var(--faint); letter-spacing: var(--lt3-tracking-wide); }
45
+ .lt3-rail__word small { font-size: var(--lt3-text-2xs); color: var(--faint); letter-spacing: var(--lt3-tracking-wide); text-transform: uppercase; }
45
46
 
46
47
  .lt3-rail__scope { padding: 0 var(--lt3-space-4) var(--lt3-space-3); }
47
48
 
@@ -54,7 +55,7 @@
54
55
  flex-direction: column;
55
56
  gap: var(--lt3-space-1);
56
57
  }
57
- .lt3-navgroup { margin-top: var(--lt3-space-4); }
58
+ .lt3-navgroup { margin-top: var(--lt3-space-5); }
58
59
  .lt3-navgroup:first-child { margin-top: 0; }
59
60
  .lt3-navgroup__label {
60
61
  padding: var(--lt3-space-2) var(--lt3-space-3) var(--lt3-space-1);
@@ -67,28 +68,35 @@
67
68
 
68
69
  .lt3-navitem {
69
70
  display: flex;
70
- align-items: center;
71
+ align-items: flex-start;
71
72
  gap: var(--lt3-space-3);
72
- padding: var(--lt3-space-3) var(--lt3-space-3);
73
- border-radius: var(--lt3-radius-sm);
73
+ min-height: 42px;
74
+ padding: var(--lt3-space-2) var(--lt3-space-3);
75
+ border-radius: var(--lt3-radius-md);
76
+ border: 1px solid transparent;
74
77
  color: var(--muted);
75
78
  font-size: var(--lt3-text-sm);
76
79
  font-weight: var(--lt3-weight-medium);
77
80
  position: relative;
78
81
  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
79
82
  }
80
- .lt3-navitem .ti { font-size: 1.25rem; flex: none; width: 22px; text-align: center; }
81
- .lt3-navitem__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
83
+ .lt3-navitem .ti { font-size: 1.16rem; flex: none; width: 22px; text-align: center; margin-top: 1px; }
84
+ .lt3-navitem__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
85
+ .lt3-navitem__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
86
+ .lt3-navitem__meta { font-size: var(--lt3-text-2xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--lt3-weight-normal); }
82
87
  .lt3-navitem:hover { background: var(--surface-2); color: var(--text); }
83
88
  .lt3-navitem[aria-current="page"] {
84
- background: var(--accent-soft);
85
- color: var(--accent);
89
+ background: var(--surface);
90
+ color: var(--text);
91
+ border: 1px solid var(--border);
92
+ box-shadow: var(--lt3-elev-1);
86
93
  font-weight: var(--lt3-weight-semi);
87
94
  }
88
95
  .lt3-navitem[aria-current="page"]::before {
89
- content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px;
90
- width: 3px; border-radius: 99px; background: var(--accent);
96
+ content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
97
+ width: 2px; border-radius: 99px; background: var(--accent);
91
98
  }
99
+ .lt3-navitem[aria-current="page"] .lt3-navitem__meta { color: var(--muted); }
92
100
  .lt3-navitem__badge {
93
101
  margin-left: auto;
94
102
  font-size: var(--lt3-text-2xs);
@@ -101,12 +109,48 @@
101
109
  .lt3-navitem__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 99px; }
102
110
 
103
111
  .lt3-rail__foot {
104
- padding: var(--lt3-space-3) var(--lt3-space-3);
112
+ padding: var(--lt3-space-3);
105
113
  border-top: 1px solid var(--border);
114
+ display: flex;
115
+ flex-direction: column;
116
+ gap: var(--lt3-space-3);
117
+ }
118
+ .lt3-rail__foot-row {
106
119
  display: flex;
107
120
  align-items: center;
108
121
  gap: var(--lt3-space-2);
109
122
  }
123
+ .lt3-rail__status {
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 2px;
127
+ padding: var(--lt3-space-3);
128
+ border-radius: var(--lt3-radius-md);
129
+ background: var(--surface-2);
130
+ border: 1px solid var(--border);
131
+ }
132
+ .lt3-rail__status-top {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: var(--lt3-space-2);
136
+ font-size: var(--lt3-text-xs);
137
+ font-weight: var(--lt3-weight-semi);
138
+ color: var(--text);
139
+ }
140
+ .lt3-rail__status-sub {
141
+ font-size: var(--lt3-text-2xs);
142
+ color: var(--faint);
143
+ }
144
+ .lt3-rail__status-dot {
145
+ width: 8px;
146
+ height: 8px;
147
+ border-radius: 99px;
148
+ background: var(--warning);
149
+ }
150
+ .lt3-rail__status-dot[data-state="ready"] { background: var(--success); }
151
+ .lt3-rail__status-dot[data-state="partial"] { background: var(--warning); }
152
+ .lt3-rail__status-dot[data-state="pending"] { background: var(--faint); }
153
+ }
110
154
  .lt3-rail__user {
111
155
  display: flex; align-items: center; gap: var(--lt3-space-3);
112
156
  flex: 1; min-width: 0;
@@ -172,12 +216,11 @@
172
216
  display: flex;
173
217
  align-items: center;
174
218
  gap: var(--lt3-space-3);
175
- height: var(--lt3-topbar-h);
219
+ min-height: var(--lt3-topbar-h);
176
220
  flex: none;
177
221
  padding: 0 var(--lt3-space-5);
178
222
  border-bottom: 1px solid var(--border);
179
- background: color-mix(in srgb, var(--surface) 70%, transparent);
180
- backdrop-filter: blur(14px);
223
+ background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
181
224
  z-index: var(--lt3-z-topbar);
182
225
  }
183
226
  .lt3-topbar__menu { display: none; }
@@ -188,7 +231,7 @@
188
231
 
189
232
  .lt3-cmd-trigger {
190
233
  display: flex; align-items: center; gap: var(--lt3-space-3);
191
- height: 38px; width: min(360px, 38vw);
234
+ height: 34px; width: min(360px, 38vw);
192
235
  padding: 0 var(--lt3-space-3);
193
236
  border-radius: var(--lt3-radius-sm);
194
237
  background: var(--surface-2);
@@ -207,12 +250,12 @@
207
250
  gap: 2px;
208
251
  background: var(--surface-2);
209
252
  border: 1px solid var(--border);
210
- border-radius: var(--lt3-radius-sm);
253
+ border-radius: var(--lt3-radius-md);
211
254
  }
212
255
  .lt3-mode button {
213
256
  display: inline-flex; align-items: center; gap: var(--lt3-space-2);
214
257
  padding: var(--lt3-space-2) var(--lt3-space-3);
215
- border-radius: 7px;
258
+ border-radius: var(--lt3-radius-sm);
216
259
  font-size: var(--lt3-text-xs);
217
260
  font-weight: var(--lt3-weight-semi);
218
261
  color: var(--muted);
@@ -260,7 +303,7 @@
260
303
  position: relative;
261
304
  overflow: hidden;
262
305
  padding: var(--lt3-space-5);
263
- border-radius: var(--lt3-radius-lg);
306
+ border-radius: var(--lt3-radius-md);
264
307
  background: var(--surface);
265
308
  border: 1px solid var(--border);
266
309
  }
@@ -321,7 +364,7 @@
321
364
  width: min(620px, 92vw);
322
365
  background: var(--surface-elevated);
323
366
  border: 1px solid var(--border);
324
- border-radius: var(--lt3-radius-lg);
367
+ border-radius: var(--lt3-radius-md);
325
368
  box-shadow: var(--lt3-elev-3);
326
369
  overflow: hidden;
327
370
  animation: lt3-pop var(--lt3-dur-3) var(--lt3-ease-out);
@@ -359,11 +402,12 @@
359
402
  .lt3-app { grid-template-columns: var(--lt3-rail-w-collapsed) minmax(0, 1fr); }
360
403
  .lt3-rail { --_collapsed: 1; }
361
404
  .lt3-rail__word, .lt3-rail__scope, .lt3-navgroup__label,
362
- .lt3-navitem__label, .lt3-navitem__badge,
363
- .lt3-rail__user-meta { display: none; }
405
+ .lt3-navitem__copy, .lt3-navitem__badge,
406
+ .lt3-navitem__dot, .lt3-rail__user-meta, .lt3-rail__status { display: none; }
364
407
  .lt3-rail__brand { justify-content: center; padding: var(--lt3-space-5) 0 var(--lt3-space-4); }
365
408
  .lt3-rail__nav { align-items: center; }
366
- .lt3-navitem { justify-content: center; padding: var(--lt3-space-3); width: 44px; }
409
+ .lt3-navitem { justify-content: center; align-items: center; padding: var(--lt3-space-3); width: 44px; min-height: 44px; }
410
+ .lt3-navitem .ti { margin-top: 0; }
367
411
  .lt3-navitem[aria-current="page"]::before { left: -3px; }
368
412
  .lt3-rail__foot { justify-content: center; }
369
413
  .lt3-rail__user { justify-content: center; flex: none; }
@@ -382,11 +426,11 @@
382
426
  z-index: var(--lt3-z-drawer);
383
427
  }
384
428
  .lt3-rail__word, .lt3-rail__scope, .lt3-navgroup__label,
385
- .lt3-navitem__label, .lt3-navitem__badge,
386
- .lt3-rail__user-meta { display: revert; }
429
+ .lt3-navitem__badge, .lt3-navitem__dot, .lt3-rail__user-meta { display: revert; }
430
+ .lt3-navitem__copy, .lt3-rail__status { display: flex; }
387
431
  .lt3-rail__brand { justify-content: flex-start; padding: var(--lt3-space-5) var(--lt3-space-5) var(--lt3-space-4); }
388
432
  .lt3-rail__nav { align-items: stretch; }
389
- .lt3-navitem { justify-content: flex-start; width: auto; }
433
+ .lt3-navitem { justify-content: flex-start; align-items: flex-start; width: auto; min-height: 42px; }
390
434
  .lt3-rail__foot { justify-content: flex-start; }
391
435
  .lt3-rail__user { flex: 1; justify-content: flex-start; }
392
436
 
package/static/v3/css/lattice.shell.css CHANGED
@@ -10,6 +10,7 @@
10
10
  display: grid;
11
11
  grid-template-columns: var(--lt3-rail-w) minmax(0, 1fr);
12
12
  height: 100dvh;
13
+ background: var(--app-bg);
13
14
  }
14
15
 
15
16
  /* ── Nav rail ────────────────────────────────────────────────────────────── */
@@ -19,9 +20,9 @@
19
20
  display: flex;
20
21
  flex-direction: column;
21
22
  min-height: 0;
22
- background: color-mix(in srgb, var(--sidebar) 88%, transparent);
23
+ background: var(--sidebar);
23
24
  border-right: 1px solid var(--border);
24
- backdrop-filter: blur(14px);
25
+ box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface) 40%, transparent);
25
26
  }
26
27
 
27
28
  .lt3-rail__brand {
@@ -32,16 +33,16 @@
32
33
  }
33
34
  .lt3-rail__logo {
34
35
  display: grid; place-items: center;
35
- width: 36px; height: 36px; flex: none;
36
- border-radius: var(--lt3-radius-sm);
37
- background: linear-gradient(135deg, var(--lt3-pillar-graph), var(--lt3-pillar-vector));
36
+ width: 34px; height: 34px; flex: none;
37
+ border-radius: var(--lt3-radius-md);
38
+ background: var(--text);
38
39
  color: #fff;
39
40
  box-shadow: var(--lt3-elev-1);
40
41
  }
41
42
  .lt3-rail__logo svg { width: 22px; height: 22px; }
42
43
  .lt3-rail__word { display: flex; flex-direction: column; line-height: 1.05; }
43
44
  .lt3-rail__word b { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-bold); letter-spacing: var(--lt3-tracking-tight); }
44
- .lt3-rail__word small { font-size: var(--lt3-text-2xs); color: var(--faint); letter-spacing: var(--lt3-tracking-wide); }
45
+ .lt3-rail__word small { font-size: var(--lt3-text-2xs); color: var(--faint); letter-spacing: var(--lt3-tracking-wide); text-transform: uppercase; }
45
46
 
46
47
  .lt3-rail__scope { padding: 0 var(--lt3-space-4) var(--lt3-space-3); }
47
48
 
@@ -54,7 +55,7 @@
54
55
  flex-direction: column;
55
56
  gap: var(--lt3-space-1);
56
57
  }
57
- .lt3-navgroup { margin-top: var(--lt3-space-4); }
58
+ .lt3-navgroup { margin-top: var(--lt3-space-5); }
58
59
  .lt3-navgroup:first-child { margin-top: 0; }
59
60
  .lt3-navgroup__label {
60
61
  padding: var(--lt3-space-2) var(--lt3-space-3) var(--lt3-space-1);
@@ -67,28 +68,35 @@
67
68
 
68
69
  .lt3-navitem {
69
70
  display: flex;
70
- align-items: center;
71
+ align-items: flex-start;
71
72
  gap: var(--lt3-space-3);
72
- padding: var(--lt3-space-3) var(--lt3-space-3);
73
- border-radius: var(--lt3-radius-sm);
73
+ min-height: 42px;
74
+ padding: var(--lt3-space-2) var(--lt3-space-3);
75
+ border-radius: var(--lt3-radius-md);
76
+ border: 1px solid transparent;
74
77
  color: var(--muted);
75
78
  font-size: var(--lt3-text-sm);
76
79
  font-weight: var(--lt3-weight-medium);
77
80
  position: relative;
78
81
  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
79
82
  }
80
- .lt3-navitem .ti { font-size: 1.25rem; flex: none; width: 22px; text-align: center; }
81
- .lt3-navitem__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
83
+ .lt3-navitem .ti { font-size: 1.16rem; flex: none; width: 22px; text-align: center; margin-top: 1px; }
84
+ .lt3-navitem__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
85
+ .lt3-navitem__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
86
+ .lt3-navitem__meta { font-size: var(--lt3-text-2xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--lt3-weight-normal); }
82
87
  .lt3-navitem:hover { background: var(--surface-2); color: var(--text); }
83
88
  .lt3-navitem[aria-current="page"] {
84
- background: var(--accent-soft);
85
- color: var(--accent);
89
+ background: var(--surface);
90
+ color: var(--text);
91
+ border: 1px solid var(--border);
92
+ box-shadow: var(--lt3-elev-1);
86
93
  font-weight: var(--lt3-weight-semi);
87
94
  }
88
95
  .lt3-navitem[aria-current="page"]::before {
89
- content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px;
90
- width: 3px; border-radius: 99px; background: var(--accent);
96
+ content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
97
+ width: 2px; border-radius: 99px; background: var(--accent);
91
98
  }
99
+ .lt3-navitem[aria-current="page"] .lt3-navitem__meta { color: var(--muted); }
92
100
  .lt3-navitem__badge {
93
101
  margin-left: auto;
94
102
  font-size: var(--lt3-text-2xs);
@@ -101,12 +109,48 @@
101
109
  .lt3-navitem__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 99px; }
102
110
 
103
111
  .lt3-rail__foot {
104
- padding: var(--lt3-space-3) var(--lt3-space-3);
112
+ padding: var(--lt3-space-3);
105
113
  border-top: 1px solid var(--border);
114
+ display: flex;
115
+ flex-direction: column;
116
+ gap: var(--lt3-space-3);
117
+ }
118
+ .lt3-rail__foot-row {
106
119
  display: flex;
107
120
  align-items: center;
108
121
  gap: var(--lt3-space-2);
109
122
  }
123
+ .lt3-rail__status {
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 2px;
127
+ padding: var(--lt3-space-3);
128
+ border-radius: var(--lt3-radius-md);
129
+ background: var(--surface-2);
130
+ border: 1px solid var(--border);
131
+ }
132
+ .lt3-rail__status-top {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: var(--lt3-space-2);
136
+ font-size: var(--lt3-text-xs);
137
+ font-weight: var(--lt3-weight-semi);
138
+ color: var(--text);
139
+ }
140
+ .lt3-rail__status-sub {
141
+ font-size: var(--lt3-text-2xs);
142
+ color: var(--faint);
143
+ }
144
+ .lt3-rail__status-dot {
145
+ width: 8px;
146
+ height: 8px;
147
+ border-radius: 99px;
148
+ background: var(--warning);
149
+ }
150
+ .lt3-rail__status-dot[data-state="ready"] { background: var(--success); }
151
+ .lt3-rail__status-dot[data-state="partial"] { background: var(--warning); }
152
+ .lt3-rail__status-dot[data-state="pending"] { background: var(--faint); }
153
+ }
110
154
  .lt3-rail__user {
111
155
  display: flex; align-items: center; gap: var(--lt3-space-3);
112
156
  flex: 1; min-width: 0;
@@ -172,12 +216,11 @@
172
216
  display: flex;
173
217
  align-items: center;
174
218
  gap: var(--lt3-space-3);
175
- height: var(--lt3-topbar-h);
219
+ min-height: var(--lt3-topbar-h);
176
220
  flex: none;
177
221
  padding: 0 var(--lt3-space-5);
178
222
  border-bottom: 1px solid var(--border);
179
- background: color-mix(in srgb, var(--surface) 70%, transparent);
180
- backdrop-filter: blur(14px);
223
+ background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
181
224
  z-index: var(--lt3-z-topbar);
182
225
  }
183
226
  .lt3-topbar__menu { display: none; }
@@ -188,7 +231,7 @@
188
231
 
189
232
  .lt3-cmd-trigger {
190
233
  display: flex; align-items: center; gap: var(--lt3-space-3);
191
- height: 38px; width: min(360px, 38vw);
234
+ height: 34px; width: min(360px, 38vw);
192
235
  padding: 0 var(--lt3-space-3);
193
236
  border-radius: var(--lt3-radius-sm);
194
237
  background: var(--surface-2);
@@ -207,12 +250,12 @@
207
250
  gap: 2px;
208
251
  background: var(--surface-2);
209
252
  border: 1px solid var(--border);
210
- border-radius: var(--lt3-radius-sm);
253
+ border-radius: var(--lt3-radius-md);
211
254
  }
212
255
  .lt3-mode button {
213
256
  display: inline-flex; align-items: center; gap: var(--lt3-space-2);
214
257
  padding: var(--lt3-space-2) var(--lt3-space-3);
215
- border-radius: 7px;
258
+ border-radius: var(--lt3-radius-sm);
216
259
  font-size: var(--lt3-text-xs);
217
260
  font-weight: var(--lt3-weight-semi);
218
261
  color: var(--muted);
@@ -260,7 +303,7 @@
260
303
  position: relative;
261
304
  overflow: hidden;
262
305
  padding: var(--lt3-space-5);
263
- border-radius: var(--lt3-radius-lg);
306
+ border-radius: var(--lt3-radius-md);
264
307
  background: var(--surface);
265
308
  border: 1px solid var(--border);
266
309
  }
@@ -321,7 +364,7 @@
321
364
  width: min(620px, 92vw);
322
365
  background: var(--surface-elevated);
323
366
  border: 1px solid var(--border);
324
- border-radius: var(--lt3-radius-lg);
367
+ border-radius: var(--lt3-radius-md);
325
368
  box-shadow: var(--lt3-elev-3);
326
369
  overflow: hidden;
327
370
  animation: lt3-pop var(--lt3-dur-3) var(--lt3-ease-out);
@@ -359,11 +402,12 @@
359
402
  .lt3-app { grid-template-columns: var(--lt3-rail-w-collapsed) minmax(0, 1fr); }
360
403
  .lt3-rail { --_collapsed: 1; }
361
404
  .lt3-rail__word, .lt3-rail__scope, .lt3-navgroup__label,
362
- .lt3-navitem__label, .lt3-navitem__badge,
363
- .lt3-rail__user-meta { display: none; }
405
+ .lt3-navitem__copy, .lt3-navitem__badge,
406
+ .lt3-navitem__dot, .lt3-rail__user-meta, .lt3-rail__status { display: none; }
364
407
  .lt3-rail__brand { justify-content: center; padding: var(--lt3-space-5) 0 var(--lt3-space-4); }
365
408
  .lt3-rail__nav { align-items: center; }
366
- .lt3-navitem { justify-content: center; padding: var(--lt3-space-3); width: 44px; }
409
+ .lt3-navitem { justify-content: center; align-items: center; padding: var(--lt3-space-3); width: 44px; min-height: 44px; }
410
+ .lt3-navitem .ti { margin-top: 0; }
367
411
  .lt3-navitem[aria-current="page"]::before { left: -3px; }
368
412
  .lt3-rail__foot { justify-content: center; }
369
413
  .lt3-rail__user { justify-content: center; flex: none; }
@@ -382,11 +426,11 @@
382
426
  z-index: var(--lt3-z-drawer);
383
427
  }
384
428
  .lt3-rail__word, .lt3-rail__scope, .lt3-navgroup__label,
385
- .lt3-navitem__label, .lt3-navitem__badge,
386
- .lt3-rail__user-meta { display: revert; }
429
+ .lt3-navitem__badge, .lt3-navitem__dot, .lt3-rail__user-meta { display: revert; }
430
+ .lt3-navitem__copy, .lt3-rail__status { display: flex; }
387
431
  .lt3-rail__brand { justify-content: flex-start; padding: var(--lt3-space-5) var(--lt3-space-5) var(--lt3-space-4); }
388
432
  .lt3-rail__nav { align-items: stretch; }
389
- .lt3-navitem { justify-content: flex-start; width: auto; }
433
+ .lt3-navitem { justify-content: flex-start; align-items: flex-start; width: auto; min-height: 42px; }
390
434
  .lt3-rail__foot { justify-content: flex-start; }
391
435
  .lt3-rail__user { flex: 1; justify-content: flex-start; }
392
436