trellis 2.1.7 → 3.0.2

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 (346) hide show
  1. package/README.md +65 -706
  2. package/dist/cli/index.d.ts +16 -0
  3. package/dist/cli/index.d.ts.map +1 -0
  4. package/dist/cli/index.js +3188 -232
  5. package/dist/client/config.d.ts +56 -0
  6. package/dist/client/config.d.ts.map +1 -0
  7. package/dist/client/index.d.ts +15 -0
  8. package/dist/client/index.d.ts.map +1 -0
  9. package/dist/client/index.js +32 -0
  10. package/dist/client/sdk.d.ts +152 -0
  11. package/dist/client/sdk.d.ts.map +1 -0
  12. package/dist/config-8hczw0rs.js +20 -0
  13. package/dist/context/heat-map-manager.d.ts +100 -0
  14. package/dist/context/heat-map-manager.d.ts.map +1 -0
  15. package/dist/context/manager.d.ts +16 -0
  16. package/dist/context/manager.d.ts.map +1 -0
  17. package/dist/context/types.d.ts +20 -0
  18. package/dist/context/types.d.ts.map +1 -0
  19. package/dist/core/agents/harness.d.ts +58 -0
  20. package/dist/core/agents/harness.d.ts.map +1 -0
  21. package/dist/core/agents/index.d.ts +8 -0
  22. package/dist/core/agents/index.d.ts.map +1 -0
  23. package/dist/core/agents/types.d.ts +79 -0
  24. package/dist/core/agents/types.d.ts.map +1 -0
  25. package/dist/core/computation/expr-evaluator.d.ts +52 -0
  26. package/dist/core/computation/expr-evaluator.d.ts.map +1 -0
  27. package/dist/core/index.d.ts +25 -0
  28. package/dist/core/index.d.ts.map +1 -0
  29. package/dist/core/index.js +105 -11
  30. package/dist/core/kernel/logic-middleware.d.ts +19 -0
  31. package/dist/core/kernel/logic-middleware.d.ts.map +1 -0
  32. package/dist/core/kernel/middleware.d.ts +28 -0
  33. package/dist/core/kernel/middleware.d.ts.map +1 -0
  34. package/dist/core/kernel/schema-middleware.d.ts +15 -0
  35. package/dist/core/kernel/schema-middleware.d.ts.map +1 -0
  36. package/dist/core/kernel/security-middleware.d.ts +24 -0
  37. package/dist/core/kernel/security-middleware.d.ts.map +1 -0
  38. package/dist/core/kernel/sync-provider.d.ts +59 -0
  39. package/dist/core/kernel/sync-provider.d.ts.map +1 -0
  40. package/dist/core/kernel/trellis-kernel.d.ts +217 -0
  41. package/dist/core/kernel/trellis-kernel.d.ts.map +1 -0
  42. package/dist/core/ontology/builtins.d.ts +16 -0
  43. package/dist/core/ontology/builtins.d.ts.map +1 -0
  44. package/dist/core/ontology/core-ontology.d.ts +20 -0
  45. package/dist/core/ontology/core-ontology.d.ts.map +1 -0
  46. package/dist/core/ontology/index.d.ts +12 -0
  47. package/dist/core/ontology/index.d.ts.map +1 -0
  48. package/dist/core/ontology/registry.d.ts +70 -0
  49. package/dist/core/ontology/registry.d.ts.map +1 -0
  50. package/dist/core/ontology/types.d.ts +201 -0
  51. package/dist/core/ontology/types.d.ts.map +1 -0
  52. package/dist/core/ontology/validator.d.ts +34 -0
  53. package/dist/core/ontology/validator.d.ts.map +1 -0
  54. package/dist/core/persist/backend.d.ts +62 -0
  55. package/dist/core/persist/backend.d.ts.map +1 -0
  56. package/dist/core/persist/better-sqlite-backend.d.ts +33 -0
  57. package/dist/core/persist/better-sqlite-backend.d.ts.map +1 -0
  58. package/dist/core/persist/sqlite-backend.d.ts +43 -0
  59. package/dist/core/persist/sqlite-backend.d.ts.map +1 -0
  60. package/dist/core/plugins/index.d.ts +8 -0
  61. package/dist/core/plugins/index.d.ts.map +1 -0
  62. package/dist/core/plugins/registry.d.ts +69 -0
  63. package/dist/core/plugins/registry.d.ts.map +1 -0
  64. package/dist/core/plugins/types.d.ts +87 -0
  65. package/dist/core/plugins/types.d.ts.map +1 -0
  66. package/dist/core/query/datalog.d.ts +52 -0
  67. package/dist/core/query/datalog.d.ts.map +1 -0
  68. package/dist/core/query/engine.d.ts +42 -0
  69. package/dist/core/query/engine.d.ts.map +1 -0
  70. package/dist/core/query/index.d.ts +12 -0
  71. package/dist/core/query/index.d.ts.map +1 -0
  72. package/dist/core/query/parser.d.ts +37 -0
  73. package/dist/core/query/parser.d.ts.map +1 -0
  74. package/dist/core/query/types.d.ts +135 -0
  75. package/dist/core/query/types.d.ts.map +1 -0
  76. package/dist/core/store/eav-store.d.ts +111 -0
  77. package/dist/core/store/eav-store.d.ts.map +1 -0
  78. package/dist/db/index.d.ts +18 -0
  79. package/dist/db/index.d.ts.map +1 -0
  80. package/dist/db/index.js +85 -0
  81. package/dist/db/inspector.js +28 -0
  82. package/dist/db/trellis.css +1 -0
  83. package/dist/decisions/auto-capture.d.ts +31 -0
  84. package/dist/decisions/auto-capture.d.ts.map +1 -0
  85. package/dist/decisions/hooks.d.ts +48 -0
  86. package/dist/decisions/hooks.d.ts.map +1 -0
  87. package/dist/decisions/index.d.ts +36 -0
  88. package/dist/decisions/index.d.ts.map +1 -0
  89. package/dist/decisions/types.d.ts +73 -0
  90. package/dist/decisions/types.d.ts.map +1 -0
  91. package/dist/deploy-999q207z.js +10 -0
  92. package/dist/embeddings/auto-embed.d.ts +52 -0
  93. package/dist/embeddings/auto-embed.d.ts.map +1 -0
  94. package/dist/embeddings/chunker.d.ts +73 -0
  95. package/dist/embeddings/chunker.d.ts.map +1 -0
  96. package/dist/embeddings/index.d.ts +18 -0
  97. package/dist/embeddings/index.d.ts.map +1 -0
  98. package/dist/embeddings/model.d.ts +30 -0
  99. package/dist/embeddings/model.d.ts.map +1 -0
  100. package/dist/embeddings/search.d.ts +87 -0
  101. package/dist/embeddings/search.d.ts.map +1 -0
  102. package/dist/embeddings/store.d.ts +66 -0
  103. package/dist/embeddings/store.d.ts.map +1 -0
  104. package/dist/embeddings/types.d.ts +54 -0
  105. package/dist/embeddings/types.d.ts.map +1 -0
  106. package/dist/engine-y0724kjq.js +8 -0
  107. package/dist/engine.d.ts +218 -0
  108. package/dist/engine.d.ts.map +1 -0
  109. package/dist/evals/types.d.ts +29 -0
  110. package/dist/evals/types.d.ts.map +1 -0
  111. package/dist/garden/cluster.d.ts +57 -0
  112. package/dist/garden/cluster.d.ts.map +1 -0
  113. package/dist/garden/garden.d.ts +104 -0
  114. package/dist/garden/garden.d.ts.map +1 -0
  115. package/dist/garden/index.d.ts +15 -0
  116. package/dist/garden/index.d.ts.map +1 -0
  117. package/dist/git/git-exporter.d.ts +37 -0
  118. package/dist/git/git-exporter.d.ts.map +1 -0
  119. package/dist/git/git-importer.d.ts +36 -0
  120. package/dist/git/git-importer.d.ts.map +1 -0
  121. package/dist/git/git-reader.d.ts +63 -0
  122. package/dist/git/git-reader.d.ts.map +1 -0
  123. package/dist/git/index.d.ts +10 -0
  124. package/dist/git/index.d.ts.map +1 -0
  125. package/dist/identity/governance.d.ts +54 -0
  126. package/dist/identity/governance.d.ts.map +1 -0
  127. package/dist/identity/identity.d.ts +63 -0
  128. package/dist/identity/identity.d.ts.map +1 -0
  129. package/dist/identity/index.d.ts +10 -0
  130. package/dist/identity/index.d.ts.map +1 -0
  131. package/dist/identity/signing-middleware.d.ts +38 -0
  132. package/dist/identity/signing-middleware.d.ts.map +1 -0
  133. package/dist/import-s2b8e0ft.js +11 -0
  134. package/dist/{index-3ejh8k6v.js → index-0q7wbasy.js} +18 -4
  135. package/dist/index-0zk3fx2s.js +1004 -0
  136. package/dist/index-2r4jxwnb.js +32 -0
  137. package/dist/index-6n5dcebj.js +847 -0
  138. package/dist/index-7e27kvvj.js +292 -0
  139. package/dist/index-bmyt7k8n.js +90 -0
  140. package/dist/index-c9h37r6h.js +1 -0
  141. package/dist/{index-k5kf7sd0.js → index-hmdbnd4n.js} +1 -1
  142. package/dist/index-k5b0xskw.js +1 -0
  143. package/dist/index-n9f2qyh5.js +495 -0
  144. package/dist/{index-22jx9qsz.js → index-q31hfjja.js} +861 -51
  145. package/dist/index-skhn0agf.js +155 -0
  146. package/dist/{index-5m0g9r0y.js → index-w7ng765c.js} +4 -497
  147. package/dist/index-wt8rz4gn.js +132 -0
  148. package/dist/index-xzym9w0m.js +43 -0
  149. package/dist/index-y3d71wzd.js +77 -0
  150. package/dist/index-y6a4kj0p.js +43 -0
  151. package/dist/index-yhwjgfvj.js +342 -0
  152. package/dist/index-yp88he8n.js +316 -0
  153. package/dist/index.d.ts +25 -0
  154. package/dist/index.d.ts.map +1 -0
  155. package/dist/index.js +21 -9
  156. package/dist/links/index.d.ts +16 -0
  157. package/dist/links/index.d.ts.map +1 -0
  158. package/dist/links/lifecycle.d.ts +112 -0
  159. package/dist/links/lifecycle.d.ts.map +1 -0
  160. package/dist/links/parser.d.ts +56 -0
  161. package/dist/links/parser.d.ts.map +1 -0
  162. package/dist/links/ref-index.d.ts +55 -0
  163. package/dist/links/ref-index.d.ts.map +1 -0
  164. package/dist/links/resolver.d.ts +90 -0
  165. package/dist/links/resolver.d.ts.map +1 -0
  166. package/dist/links/types.d.ts +70 -0
  167. package/dist/links/types.d.ts.map +1 -0
  168. package/dist/llm/provider.d.ts +11 -0
  169. package/dist/llm/provider.d.ts.map +1 -0
  170. package/dist/llm/types.d.ts +74 -0
  171. package/dist/llm/types.d.ts.map +1 -0
  172. package/dist/mcp/docs.d.ts +18 -0
  173. package/dist/mcp/docs.d.ts.map +1 -0
  174. package/dist/mcp/index.d.ts +15 -0
  175. package/dist/mcp/index.d.ts.map +1 -0
  176. package/dist/mcp/server.d.ts +26 -0
  177. package/dist/mcp/server.d.ts.map +1 -0
  178. package/dist/orchestration/types.d.ts +22 -0
  179. package/dist/orchestration/types.d.ts.map +1 -0
  180. package/dist/plugins/agent-memory/graph-context-manager.d.ts +75 -0
  181. package/dist/plugins/agent-memory/graph-context-manager.d.ts.map +1 -0
  182. package/dist/plugins/agent-memory/index.d.ts +30 -0
  183. package/dist/plugins/agent-memory/index.d.ts.map +1 -0
  184. package/dist/plugins/agent-memory/ontology.d.ts +13 -0
  185. package/dist/plugins/agent-memory/ontology.d.ts.map +1 -0
  186. package/dist/plugins/agent-memory/plugin.d.ts +17 -0
  187. package/dist/plugins/agent-memory/plugin.d.ts.map +1 -0
  188. package/dist/plugins/brand/cache.d.ts +18 -0
  189. package/dist/plugins/brand/cache.d.ts.map +1 -0
  190. package/dist/plugins/brand/catalog-generator.d.ts +89 -0
  191. package/dist/plugins/brand/catalog-generator.d.ts.map +1 -0
  192. package/dist/plugins/brand/constraints.d.ts +55 -0
  193. package/dist/plugins/brand/constraints.d.ts.map +1 -0
  194. package/dist/plugins/brand/index.d.ts +44 -0
  195. package/dist/plugins/brand/index.d.ts.map +1 -0
  196. package/dist/plugins/brand/mcp-tools.d.ts +101 -0
  197. package/dist/plugins/brand/mcp-tools.d.ts.map +1 -0
  198. package/dist/plugins/brand/ontology.d.ts +13 -0
  199. package/dist/plugins/brand/ontology.d.ts.map +1 -0
  200. package/dist/plugins/brand/plugin.d.ts +21 -0
  201. package/dist/plugins/brand/plugin.d.ts.map +1 -0
  202. package/dist/plugins/brand/voice-tone.d.ts +24 -0
  203. package/dist/plugins/brand/voice-tone.d.ts.map +1 -0
  204. package/dist/plugins/idea-garden/api.d.ts +26 -0
  205. package/dist/plugins/idea-garden/api.d.ts.map +1 -0
  206. package/dist/plugins/idea-garden/index.d.ts +12 -0
  207. package/dist/plugins/idea-garden/index.d.ts.map +1 -0
  208. package/dist/plugins/idea-garden/plugin.d.ts +16 -0
  209. package/dist/plugins/idea-garden/plugin.d.ts.map +1 -0
  210. package/dist/plugins/idea-garden/types.d.ts +22 -0
  211. package/dist/plugins/idea-garden/types.d.ts.map +1 -0
  212. package/dist/plugins/plan-approval/index.d.ts +36 -0
  213. package/dist/plugins/plan-approval/index.d.ts.map +1 -0
  214. package/dist/plugins/plan-approval/ontology.d.ts +11 -0
  215. package/dist/plugins/plan-approval/ontology.d.ts.map +1 -0
  216. package/dist/plugins/plan-approval/plan-manager.d.ts +104 -0
  217. package/dist/plugins/plan-approval/plan-manager.d.ts.map +1 -0
  218. package/dist/plugins/plan-approval/plugin.d.ts +110 -0
  219. package/dist/plugins/plan-approval/plugin.d.ts.map +1 -0
  220. package/dist/plugins/proactive-watcher/index.d.ts +28 -0
  221. package/dist/plugins/proactive-watcher/index.d.ts.map +1 -0
  222. package/dist/plugins/proactive-watcher/ontology.d.ts +8 -0
  223. package/dist/plugins/proactive-watcher/ontology.d.ts.map +1 -0
  224. package/dist/plugins/proactive-watcher/plugin.d.ts +20 -0
  225. package/dist/plugins/proactive-watcher/plugin.d.ts.map +1 -0
  226. package/dist/plugins/proactive-watcher/watcher-manager.d.ts +36 -0
  227. package/dist/plugins/proactive-watcher/watcher-manager.d.ts.map +1 -0
  228. package/dist/plugins/sprite-tools/checkpoint-middleware.d.ts +43 -0
  229. package/dist/plugins/sprite-tools/checkpoint-middleware.d.ts.map +1 -0
  230. package/dist/plugins/sprite-tools/index.d.ts +40 -0
  231. package/dist/plugins/sprite-tools/index.d.ts.map +1 -0
  232. package/dist/plugins/sprite-tools/plugin.d.ts +69 -0
  233. package/dist/plugins/sprite-tools/plugin.d.ts.map +1 -0
  234. package/dist/react/index.js +189 -0
  235. package/dist/scaffold/index.d.ts +13 -0
  236. package/dist/scaffold/index.d.ts.map +1 -0
  237. package/dist/scaffold/infer.d.ts +42 -0
  238. package/dist/scaffold/infer.d.ts.map +1 -0
  239. package/dist/scaffold/profile.d.ts +51 -0
  240. package/dist/scaffold/profile.d.ts.map +1 -0
  241. package/dist/scaffold/seed.d.ts +27 -0
  242. package/dist/scaffold/seed.d.ts.map +1 -0
  243. package/dist/scaffold/write.d.ts +53 -0
  244. package/dist/scaffold/write.d.ts.map +1 -0
  245. package/dist/sdk-snn5gad3.js +15 -0
  246. package/dist/semantic/csharp-parser.d.ts +12 -0
  247. package/dist/semantic/csharp-parser.d.ts.map +1 -0
  248. package/dist/semantic/go-parser.d.ts +12 -0
  249. package/dist/semantic/go-parser.d.ts.map +1 -0
  250. package/dist/semantic/index.d.ts +22 -0
  251. package/dist/semantic/index.d.ts.map +1 -0
  252. package/dist/semantic/java-parser.d.ts +12 -0
  253. package/dist/semantic/java-parser.d.ts.map +1 -0
  254. package/dist/semantic/python-parser.d.ts +12 -0
  255. package/dist/semantic/python-parser.d.ts.map +1 -0
  256. package/dist/semantic/ruby-parser.d.ts +12 -0
  257. package/dist/semantic/ruby-parser.d.ts.map +1 -0
  258. package/dist/semantic/rust-parser.d.ts +12 -0
  259. package/dist/semantic/rust-parser.d.ts.map +1 -0
  260. package/dist/semantic/semantic-merge.d.ts +20 -0
  261. package/dist/semantic/semantic-merge.d.ts.map +1 -0
  262. package/dist/semantic/ts-parser.d.ts +13 -0
  263. package/dist/semantic/ts-parser.d.ts.map +1 -0
  264. package/dist/semantic/types.d.ts +130 -0
  265. package/dist/semantic/types.d.ts.map +1 -0
  266. package/dist/server/auth.d.ts +72 -0
  267. package/dist/server/auth.d.ts.map +1 -0
  268. package/dist/server/deploy.d.ts +44 -0
  269. package/dist/server/deploy.d.ts.map +1 -0
  270. package/dist/server/import.d.ts +40 -0
  271. package/dist/server/import.d.ts.map +1 -0
  272. package/dist/server/index.d.ts +26 -0
  273. package/dist/server/index.d.ts.map +1 -0
  274. package/dist/server/index.js +90 -0
  275. package/dist/server/permissions.d.ts +84 -0
  276. package/dist/server/permissions.d.ts.map +1 -0
  277. package/dist/server/realtime.d.ts +78 -0
  278. package/dist/server/realtime.d.ts.map +1 -0
  279. package/dist/server/server.d.ts +43 -0
  280. package/dist/server/server.d.ts.map +1 -0
  281. package/dist/server/sprites.d.ts +26 -0
  282. package/dist/server/sprites.d.ts.map +1 -0
  283. package/dist/server/tenancy.d.ts +53 -0
  284. package/dist/server/tenancy.d.ts.map +1 -0
  285. package/dist/server/vm-config.d.ts +60 -0
  286. package/dist/server/vm-config.d.ts.map +1 -0
  287. package/dist/server-mrctdwzr.js +11 -0
  288. package/dist/sprites-vc4qbrp1.js +16 -0
  289. package/dist/streaming/types.d.ts +43 -0
  290. package/dist/streaming/types.d.ts.map +1 -0
  291. package/dist/sync/http-transport.d.ts +47 -0
  292. package/dist/sync/http-transport.d.ts.map +1 -0
  293. package/dist/sync/index.d.ts +22 -0
  294. package/dist/sync/index.d.ts.map +1 -0
  295. package/dist/sync/memory-transport.d.ts +27 -0
  296. package/dist/sync/memory-transport.d.ts.map +1 -0
  297. package/dist/sync/multi-repo.d.ts +82 -0
  298. package/dist/sync/multi-repo.d.ts.map +1 -0
  299. package/dist/sync/reconciler.d.ts +48 -0
  300. package/dist/sync/reconciler.d.ts.map +1 -0
  301. package/dist/sync/sync-engine.d.ts +65 -0
  302. package/dist/sync/sync-engine.d.ts.map +1 -0
  303. package/dist/sync/types.d.ts +71 -0
  304. package/dist/sync/types.d.ts.map +1 -0
  305. package/dist/sync/ws-transport.d.ts +41 -0
  306. package/dist/sync/ws-transport.d.ts.map +1 -0
  307. package/dist/tenancy-7d1g4ayp.js +13 -0
  308. package/dist/ui/client.html +460 -664
  309. package/dist/ui/server.d.ts +42 -0
  310. package/dist/ui/server.d.ts.map +1 -0
  311. package/dist/vcs/blob-store.d.ts +49 -0
  312. package/dist/vcs/blob-store.d.ts.map +1 -0
  313. package/dist/vcs/branch.d.ts +35 -0
  314. package/dist/vcs/branch.d.ts.map +1 -0
  315. package/dist/vcs/checkpoint.d.ts +24 -0
  316. package/dist/vcs/checkpoint.d.ts.map +1 -0
  317. package/dist/vcs/decompose.d.ts +19 -0
  318. package/dist/vcs/decompose.d.ts.map +1 -0
  319. package/dist/vcs/diff.d.ts +65 -0
  320. package/dist/vcs/diff.d.ts.map +1 -0
  321. package/dist/vcs/engine-context.d.ts +21 -0
  322. package/dist/vcs/engine-context.d.ts.map +1 -0
  323. package/dist/vcs/index.d.ts +23 -0
  324. package/dist/vcs/index.d.ts.map +1 -0
  325. package/dist/vcs/index.js +2 -2
  326. package/dist/vcs/issue.d.ts +159 -0
  327. package/dist/vcs/issue.d.ts.map +1 -0
  328. package/dist/vcs/merge.d.ts +55 -0
  329. package/dist/vcs/merge.d.ts.map +1 -0
  330. package/dist/vcs/milestone.d.ts +30 -0
  331. package/dist/vcs/milestone.d.ts.map +1 -0
  332. package/dist/vcs/ops.d.ts +27 -0
  333. package/dist/vcs/ops.d.ts.map +1 -0
  334. package/dist/vcs/types.d.ts +95 -0
  335. package/dist/vcs/types.d.ts.map +1 -0
  336. package/dist/vcs/vcs-middleware.d.ts +14 -0
  337. package/dist/vcs/vcs-middleware.d.ts.map +1 -0
  338. package/dist/vm-config-6xhsj6b3.js +22 -0
  339. package/dist/watcher/fs-watcher.d.ts +51 -0
  340. package/dist/watcher/fs-watcher.d.ts.map +1 -0
  341. package/dist/watcher/index.d.ts +9 -0
  342. package/dist/watcher/index.d.ts.map +1 -0
  343. package/dist/watcher/ingestion.d.ts +28 -0
  344. package/dist/watcher/ingestion.d.ts.map +1 -0
  345. package/package.json +57 -7
  346. package/dist/index-hybgxe40.js +0 -1174
package/dist/ui/client.html CHANGED
@@ -3,692 +3,488 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Trellis — Graph Explorer</title>
6
+ <title>Trellis — System Visualizer</title>
7
+ <meta name="description" content="Interactive system dashboard for exploring the Trellis semantic kernel">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
7
10
  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
8
11
  <style>
9
- :root {
10
- --bg: #0d1117;
11
- --surface: #161b22;
12
- --border: #30363d;
13
- --text: #e6edf3;
14
- --text-dim: #8b949e;
15
- --accent: #58a6ff;
16
- --green: #3fb950;
17
- --yellow: #d29922;
18
- --red: #f85149;
19
- --purple: #bc8cff;
20
- --cyan: #79c0ff;
21
- --orange: #d18616;
22
- --radius: 8px;
23
- }
24
- * { margin: 0; padding: 0; box-sizing: border-box; }
25
- body {
26
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
27
- background: var(--bg);
28
- color: var(--text);
29
- overflow: hidden;
30
- height: 100vh;
31
- width: 100vw;
32
- }
33
-
34
- /* Top bar */
35
- #topbar {
36
- position: fixed; top: 0; left: 0; right: 0;
37
- height: 52px;
38
- background: var(--surface);
39
- border-bottom: 1px solid var(--border);
40
- display: flex; align-items: center;
41
- padding: 0 16px; gap: 12px;
42
- z-index: 100;
43
- }
44
- #topbar .logo {
45
- font-weight: 700; font-size: 15px;
46
- color: var(--accent);
47
- white-space: nowrap;
48
- letter-spacing: -0.3px;
49
- }
50
- #topbar .logo span { color: var(--text-dim); font-weight: 400; }
51
- #search-box {
52
- flex: 1; max-width: 480px;
53
- background: var(--bg);
54
- border: 1px solid var(--border);
55
- border-radius: var(--radius);
56
- padding: 7px 12px;
57
- color: var(--text);
58
- font-size: 13px;
59
- outline: none;
60
- transition: border-color 0.15s;
61
- }
62
- #search-box:focus { border-color: var(--accent); }
63
- #search-box::placeholder { color: var(--text-dim); }
64
- .stats {
65
- font-size: 12px; color: var(--text-dim);
66
- white-space: nowrap;
67
- }
68
- .legend {
69
- display: flex; gap: 12px; margin-left: auto;
70
- font-size: 11px; color: var(--text-dim);
71
- }
72
- .legend-item {
73
- display: flex; align-items: center; gap: 4px;
74
- }
75
- .legend-dot {
76
- width: 8px; height: 8px; border-radius: 50%;
77
- }
78
-
79
- /* Graph canvas */
80
- #graph {
81
- position: fixed; top: 52px; left: 0; right: 0; bottom: 0;
82
- }
83
- svg { width: 100%; height: 100%; }
84
-
85
- /* Detail sidebar */
86
- #sidebar {
87
- position: fixed; top: 52px; right: 0; bottom: 0;
88
- width: 360px;
89
- background: var(--surface);
90
- border-left: 1px solid var(--border);
91
- transform: translateX(100%);
92
- transition: transform 0.2s ease;
93
- z-index: 50;
94
- overflow-y: auto;
95
- padding: 0;
96
- }
97
- #sidebar.open { transform: translateX(0); }
98
- #sidebar-header {
99
- position: sticky; top: 0;
100
- background: var(--surface);
101
- padding: 16px;
102
- border-bottom: 1px solid var(--border);
103
- display: flex; align-items: center; justify-content: space-between;
104
- }
105
- #sidebar-header h3 {
106
- font-size: 14px; font-weight: 600;
107
- overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
108
- max-width: 280px;
109
- }
110
- #sidebar-close {
111
- background: none; border: none; color: var(--text-dim);
112
- cursor: pointer; font-size: 18px; padding: 4px;
113
- }
114
- #sidebar-close:hover { color: var(--text); }
115
- #sidebar-body { padding: 16px; }
116
- .detail-section { margin-bottom: 16px; }
117
- .detail-section h4 {
118
- font-size: 11px; text-transform: uppercase;
119
- color: var(--text-dim); margin-bottom: 6px;
120
- letter-spacing: 0.5px;
121
- }
122
- .detail-badge {
123
- display: inline-block;
124
- padding: 2px 8px;
125
- border-radius: 12px;
126
- font-size: 11px;
127
- font-weight: 500;
128
- margin-right: 4px;
129
- margin-bottom: 4px;
130
- }
131
- .badge-file { background: rgba(88,166,255,0.15); color: var(--accent); }
132
- .badge-milestone { background: rgba(63,185,80,0.15); color: var(--green); }
133
- .badge-issue { background: rgba(210,153,34,0.15); color: var(--yellow); }
134
- .badge-branch { background: rgba(188,140,255,0.15); color: var(--purple); }
135
- .detail-meta {
136
- font-size: 12px; color: var(--text-dim);
137
- line-height: 1.8;
138
- }
139
- .detail-meta strong { color: var(--text); font-weight: 500; }
140
- .detail-ops {
141
- font-size: 12px; line-height: 1.7;
142
- }
143
- .detail-ops .op-kind {
144
- font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
145
- font-size: 11px;
146
- color: var(--cyan);
147
- }
148
- .detail-ops .op-time { color: var(--text-dim); }
149
-
150
- /* Search results overlay */
151
- #search-results {
152
- position: fixed; top: 52px; left: 0; right: 0;
153
- max-height: 50vh;
154
- background: var(--surface);
155
- border-bottom: 1px solid var(--border);
156
- overflow-y: auto;
157
- display: none;
158
- z-index: 80;
159
- }
160
- #search-results.visible { display: block; }
161
- .search-result {
162
- padding: 10px 16px;
163
- border-bottom: 1px solid var(--border);
164
- cursor: pointer;
165
- transition: background 0.1s;
166
- }
167
- .search-result:hover { background: rgba(88,166,255,0.08); }
168
- .search-result .sr-score {
169
- font-size: 11px; font-weight: 600;
170
- color: var(--green); margin-right: 8px;
171
- }
172
- .search-result .sr-type {
173
- font-size: 11px; color: var(--text-dim);
174
- margin-right: 8px;
175
- }
176
- .search-result .sr-file {
177
- font-size: 12px; color: var(--accent);
178
- }
179
- .search-result .sr-preview {
180
- font-size: 12px; color: var(--text-dim);
181
- margin-top: 4px;
182
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
183
- }
184
-
185
- /* Loading state */
186
- #loading {
187
- position: fixed; top: 0; left: 0; right: 0; bottom: 0;
188
- background: var(--bg);
189
- display: flex; align-items: center; justify-content: center;
190
- z-index: 200;
191
- transition: opacity 0.3s;
192
- }
193
- #loading.hidden { opacity: 0; pointer-events: none; }
194
- .spinner {
195
- width: 32px; height: 32px;
196
- border: 3px solid var(--border);
197
- border-top-color: var(--accent);
198
- border-radius: 50%;
199
- animation: spin 0.8s linear infinite;
200
- }
201
- @keyframes spin { to { transform: rotate(360deg); } }
202
-
203
- /* Tooltip */
204
- .tooltip {
205
- position: fixed;
206
- background: var(--surface);
207
- border: 1px solid var(--border);
208
- border-radius: 6px;
209
- padding: 6px 10px;
210
- font-size: 12px;
211
- color: var(--text);
212
- pointer-events: none;
213
- z-index: 150;
214
- max-width: 280px;
215
- white-space: nowrap;
216
- overflow: hidden;
217
- text-overflow: ellipsis;
218
- display: none;
219
- box-shadow: 0 4px 12px rgba(0,0,0,0.4);
220
- }
12
+ :root {
13
+ --bg: #09090b; --bg2: #0f1015; --surface: #15161b; --surface2: #1a1b22;
14
+ --border: #25262e; --border2: #32333d;
15
+ --text: #e4e4e7; --text2: #a1a1aa; --text3: #63637a;
16
+ --accent: #6d5bfa; --accent2: #8b7cf6; --accent-glow: rgba(109,91,250,0.15);
17
+ --green: #34d399; --yellow: #fbbf24; --red: #f87171; --cyan: #67e8f9;
18
+ --blue: #60a5fa; --purple: #a78bfa; --orange: #fb923c; --pink: #f472b6;
19
+ --radius: 8px; --radius-lg: 12px;
20
+ --font: 'Inter', -apple-system, sans-serif;
21
+ --mono: 'JetBrains Mono', ui-monospace, monospace;
22
+ --nav-w: 56px; --top-h: 48px;
23
+ --glass: rgba(21,22,27,0.75); --glass-border: rgba(255,255,255,0.04);
24
+ }
25
+ *{margin:0;padding:0;box-sizing:border-box}
26
+ body{font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;height:100vh;width:100vw}
27
+ ::-webkit-scrollbar{width:4px;height:4px}
28
+ ::-webkit-scrollbar-track{background:transparent}
29
+ ::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
30
+
31
+ /* ─── Top Bar ─── */
32
+ #topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;padding:0 16px;gap:16px;z-index:100}
33
+ .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--accent2);letter-spacing:-0.3px;white-space:nowrap}
34
+ .logo svg{width:18px;height:18px}
35
+ .logo span{color:var(--text3);font-weight:400;font-size:12px;margin-left:2px}
36
+ .tabs{display:flex;gap:2px;margin-left:24px}
37
+ .tab{background:none;border:none;color:var(--text3);font:500 12px var(--font);padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .15s;letter-spacing:.2px}
38
+ .tab:hover{color:var(--text2);background:var(--surface)}
39
+ .tab.active{color:var(--accent2);background:var(--accent-glow)}
40
+ .top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
41
+ .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
42
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
43
+ .top-stats{font:400 11px var(--mono);color:var(--text3)}
44
+ #cmd-trigger{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 10px;color:var(--text3);font:400 11px var(--font);cursor:pointer;display:flex;align-items:center;gap:6px;transition:border-color .15s}
45
+ #cmd-trigger:hover{border-color:var(--accent)}
46
+ #cmd-trigger kbd{background:var(--bg);padding:1px 5px;border-radius:3px;font:500 10px var(--mono);color:var(--text3)}
47
+
48
+ /* ─── Main Layout ─── */
49
+ #app{position:fixed;top:var(--top-h);left:0;right:0;bottom:0;display:flex}
50
+ #main{flex:1;overflow:hidden;position:relative}
51
+ .panel{position:absolute;inset:0;display:none;overflow:auto}
52
+ .panel.active{display:flex;flex-direction:column}
53
+
54
+ /* ─── Detail Drawer ─── */
55
+ #drawer{position:fixed;top:var(--top-h);right:0;bottom:0;width:340px;background:var(--glass);backdrop-filter:blur(20px);border-left:1px solid var(--glass-border);transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:80;overflow-y:auto;display:flex;flex-direction:column}
56
+ #drawer.open{transform:translateX(0)}
57
+ .drawer-head{position:sticky;top:0;background:var(--surface);padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;z-index:1}
58
+ .drawer-head h3{font:600 13px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
59
+ .drawer-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}
60
+ .drawer-close:hover{color:var(--text);background:var(--surface2)}
61
+ .drawer-body{padding:16px;flex:1}
62
+ .d-section{margin-bottom:16px}
63
+ .d-section h4{font:500 10px var(--font);text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:6px}
64
+ .d-badge{display:inline-block;padding:2px 8px;border-radius:10px;font:500 10px var(--mono);margin-right:4px}
65
+ .d-meta{font:400 12px var(--font);color:var(--text2);line-height:1.8}
66
+ .d-meta strong{color:var(--text);font-weight:500}
67
+ .d-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font:400 11px var(--mono);color:var(--text2)}
68
+ .d-kv .k{color:var(--text3)}
69
+ .d-kv .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
70
+
71
+ /* ─── Command Palette ─── */
72
+ #cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
73
+ #cmd-overlay.open{display:flex}
74
+ #cmd-box{width:520px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}
75
+ #cmd-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);padding:14px 16px;color:var(--text);font:400 14px var(--font);outline:none}
76
+ #cmd-input::placeholder{color:var(--text3)}
77
+ #cmd-results{max-height:320px;overflow-y:auto}
78
+ .cmd-item{padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .1s}
79
+ .cmd-item:hover,.cmd-item.selected{background:var(--accent-glow)}
80
+ .cmd-item .ci-type{font:500 9px var(--mono);color:var(--text3);text-transform:uppercase;width:48px;flex-shrink:0}
81
+ .cmd-item .ci-label{font:400 13px var(--font);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
82
+
83
+ /* ─── Graph Panel ─── */
84
+ #graph-panel svg{width:100%;height:100%}
85
+ .graph-controls{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px}
86
+ .graph-controls button{width:32px;height:32px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
87
+ .graph-controls button:hover{background:var(--surface2);color:var(--text)}
88
+ .graph-legend{position:absolute;bottom:16px;left:16px;display:flex;gap:12px;font:400 11px var(--font);color:var(--text3)}
89
+ .legend-item{display:flex;align-items:center;gap:5px}
90
+ .legend-dot{width:7px;height:7px;border-radius:50%}
91
+
92
+ /* ─── Timeline Panel ─── */
93
+ #timeline-panel{padding:0}
94
+ .tl-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
95
+ .tl-header h2{font:600 14px var(--font);color:var(--text)}
96
+ .tl-header .tl-stats{font:400 11px var(--mono);color:var(--text3)}
97
+ .tl-body{flex:1;overflow:auto;position:relative;padding:20px}
98
+ .tl-body svg{min-width:100%}
99
+ .tl-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13px}
100
+
101
+ /* ─── Store Panel ─── */
102
+ #store-panel{padding:0}
103
+ .store-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);flex:1;overflow:hidden}
104
+ .store-col{background:var(--bg);overflow-y:auto;display:flex;flex-direction:column}
105
+ .store-section{padding:14px 16px}
106
+ .store-section h3{font:600 12px var(--font);color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
107
+ .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;padding:0 16px}
108
+ .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center}
109
+ .stat-card .sv{font:700 20px var(--mono);color:var(--accent2)}
110
+ .stat-card .sl{font:400 10px var(--font);color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
111
+ .entity-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background .1s;font-size:12px}
112
+ .entity-row:hover{background:var(--surface)}
113
+ .entity-row .et{font:500 10px var(--mono);color:var(--purple);width:70px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
114
+ .entity-row .ei{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
115
+ .entity-row .ec{font:400 10px var(--mono);color:var(--text3);flex-shrink:0}
116
+ .type-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--surface);border:1px solid var(--border);border-radius:99px;font:500 10px var(--mono);color:var(--text2);cursor:pointer;transition:all .1s}
117
+ .type-pill:hover,.type-pill.active{border-color:var(--accent);color:var(--accent2)}
118
+ .type-pill .tc{color:var(--text3)}
119
+ .catalog-table{width:100%;border-collapse:collapse;font:400 11px var(--mono)}
120
+ .catalog-table th{text-align:left;color:var(--text3);font-weight:500;padding:4px 8px;border-bottom:1px solid var(--border)}
121
+ .catalog-table td{padding:4px 8px;color:var(--text2);border-bottom:1px solid rgba(37,38,46,.5)}
122
+
123
+ /* ─── System Panel ─── */
124
+ #system-panel{padding:24px;gap:20px}
125
+ .sys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
126
+ .sys-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:12px}
127
+ .sys-card h3{font:600 12px var(--font);color:var(--text);display:flex;align-items:center;gap:8px}
128
+ .sys-card h3 .icon{font-size:14px}
129
+ .sys-row{display:flex;justify-content:space-between;align-items:center;font:400 12px var(--font)}
130
+ .sys-row .label{color:var(--text3)}
131
+ .sys-row .value{color:var(--text2);font-family:var(--mono);font-size:11px}
132
+ .sys-badge{display:inline-block;padding:2px 8px;border-radius:99px;font:600 10px var(--mono)}
133
+ .sys-badge.on{background:rgba(52,211,153,.12);color:var(--green)}
134
+ .sys-badge.off{background:rgba(248,113,113,.1);color:var(--red)}
135
+ .parser-tags{display:flex;flex-wrap:wrap;gap:4px}
136
+ .parser-tag{padding:3px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font:400 10px var(--mono);color:var(--text2)}
137
+
138
+ /* ─── Loading ─── */
139
+ #loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:300;transition:opacity .3s}
140
+ #loading.hidden{opacity:0;pointer-events:none}
141
+ .spinner{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
142
+ @keyframes spin{to{transform:rotate(360deg)}}
143
+
144
+ /* ─── Tooltip ─── */
145
+ .tooltip{position:fixed;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:5px 10px;font:400 11px var(--font);color:var(--text);pointer-events:none;z-index:150;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;box-shadow:0 4px 16px rgba(0,0,0,.5)}
221
146
  </style>
222
147
  </head>
223
148
  <body>
224
-
225
149
  <div id="loading"><div class="spinner"></div></div>
226
150
 
227
151
  <div id="topbar">
228
- <div class="logo">Trellis <span>Graph Explorer</span></div>
229
- <input id="search-box" type="text" placeholder="Search (semantic)… press Enter" autocomplete="off">
230
- <div class="stats" id="stats"></div>
231
- <div class="legend">
232
- <div class="legend-item"><div class="legend-dot" style="background:var(--accent)"></div> File</div>
233
- <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div> Milestone</div>
234
- <div class="legend-item"><div class="legend-dot" style="background:var(--yellow)"></div> Issue</div>
235
- <div class="legend-item"><div class="legend-dot" style="background:var(--purple)"></div> Branch</div>
152
+ <div class="logo">
153
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5"/></svg>
154
+ Trellis <span>System Visualizer</span>
155
+ </div>
156
+ <div class="tabs" id="view-tabs">
157
+ <button class="tab active" data-panel="graph">Graph</button>
158
+ <button class="tab" data-panel="timeline">Timeline</button>
159
+ <button class="tab" data-panel="store">Store</button>
160
+ <button class="tab" data-panel="system">System</button>
161
+ </div>
162
+ <div class="top-right">
163
+ <div class="live-dot"></div>
164
+ <div class="top-stats" id="top-stats"></div>
165
+ <button id="cmd-trigger"><span>Search</span><kbd>⌘K</kbd></button>
236
166
  </div>
237
167
  </div>
238
168
 
239
- <div id="graph"></div>
240
- <div id="sidebar">
241
- <div id="sidebar-header">
242
- <h3 id="sidebar-title"></h3>
243
- <button id="sidebar-close">&times;</button>
169
+ <div id="app">
170
+ <div id="main">
171
+ <div id="graph-panel" class="panel active"></div>
172
+ <div id="timeline-panel" class="panel"></div>
173
+ <div id="store-panel" class="panel"></div>
174
+ <div id="system-panel" class="panel"></div>
244
175
  </div>
245
- <div id="sidebar-body"></div>
246
176
  </div>
247
- <div id="search-results"></div>
248
- <div class="tooltip" id="tooltip"></div>
249
-
250
- <script>
251
- (async function() {
252
- // -------------------------------------------------------------------------
253
- // Config
254
- // -------------------------------------------------------------------------
255
- const TYPE_COLORS = {
256
- file: '#58a6ff',
257
- milestone: '#3fb950',
258
- issue: '#d29922',
259
- branch: '#bc8cff',
260
- };
261
- const TYPE_RADIUS = {
262
- file: 4,
263
- milestone: 8,
264
- issue: 7,
265
- branch: 6,
266
- };
267
- const EDGE_COLORS = {
268
- milestone_file: '#3fb95044',
269
- issue_branch: '#d2992244',
270
- wikilink: '#58a6ff44',
271
- causal: '#30363d',
272
- };
273
-
274
- // -------------------------------------------------------------------------
275
- // Fetch graph
276
- // -------------------------------------------------------------------------
277
- let graphData;
278
- try {
279
- const res = await fetch('/api/graph');
280
- graphData = await res.json();
281
- } catch (e) {
282
- document.getElementById('loading').innerHTML =
283
- '<div style="color:var(--red);font-size:14px">Failed to load graph data</div>';
284
- return;
285
- }
286
177
 
287
- const { nodes, edges } = graphData;
288
- document.getElementById('stats').textContent =
289
- `${nodes.length} nodes · ${edges.length} edges`;
290
-
291
- // -------------------------------------------------------------------------
292
- // D3 Force Simulation
293
- // -------------------------------------------------------------------------
294
- const container = document.getElementById('graph');
295
- const width = container.clientWidth;
296
- const height = container.clientHeight;
297
-
298
- const svg = d3.select('#graph')
299
- .append('svg')
300
- .attr('width', width)
301
- .attr('height', height);
302
-
303
- // Zoom group
304
- const g = svg.append('g');
305
- const zoom = d3.zoom()
306
- .scaleExtent([0.1, 8])
307
- .on('zoom', (e) => g.attr('transform', e.transform));
308
- svg.call(zoom);
309
-
310
- // Build link/node data — D3 mutates these
311
- const simLinks = edges.map(e => ({
312
- source: e.source,
313
- target: e.target,
314
- type: e.type,
315
- label: e.label,
316
- }));
317
- const simNodes = nodes.map(n => ({ ...n }));
318
-
319
- // Create a lookup for quick access
320
- const nodeMap = new Map();
321
- simNodes.forEach(n => nodeMap.set(n.id, n));
322
-
323
- const simulation = d3.forceSimulation(simNodes)
324
- .force('link', d3.forceLink(simLinks).id(d => d.id).distance(60).strength(0.3))
325
- .force('charge', d3.forceManyBody().strength(-80).distanceMax(300))
326
- .force('center', d3.forceCenter(width / 2, height / 2))
327
- .force('collision', d3.forceCollide().radius(d => TYPE_RADIUS[d.type] + 2))
328
- .force('x', d3.forceX(width / 2).strength(0.03))
329
- .force('y', d3.forceY(height / 2).strength(0.03));
330
-
331
- // Edges
332
- const link = g.append('g')
333
- .selectAll('line')
334
- .data(simLinks)
335
- .join('line')
336
- .attr('stroke', d => EDGE_COLORS[d.type] || '#30363d')
337
- .attr('stroke-width', d => d.type === 'wikilink' ? 1.5 : 0.8);
338
-
339
- // Nodes
340
- const node = g.append('g')
341
- .selectAll('circle')
342
- .data(simNodes)
343
- .join('circle')
344
- .attr('r', d => TYPE_RADIUS[d.type] || 4)
345
- .attr('fill', d => TYPE_COLORS[d.type] || '#8b949e')
346
- .attr('stroke', 'none')
347
- .attr('cursor', 'pointer')
348
- .call(drag(simulation));
349
-
350
- // Labels (only for milestones, issues, branches — not files to avoid clutter)
351
- const labels = g.append('g')
352
- .selectAll('text')
353
- .data(simNodes.filter(d => d.type !== 'file'))
354
- .join('text')
355
- .text(d => {
356
- const maxLen = 24;
357
- return d.label.length > maxLen ? d.label.slice(0, maxLen) + '…' : d.label;
358
- })
359
- .attr('font-size', 10)
360
- .attr('fill', d => TYPE_COLORS[d.type] || '#8b949e')
361
- .attr('dx', d => TYPE_RADIUS[d.type] + 4)
362
- .attr('dy', 3)
363
- .attr('pointer-events', 'none')
364
- .attr('opacity', 0.8);
365
-
366
- simulation.on('tick', () => {
367
- link
368
- .attr('x1', d => d.source.x)
369
- .attr('y1', d => d.source.y)
370
- .attr('x2', d => d.target.x)
371
- .attr('y2', d => d.target.y);
372
- node
373
- .attr('cx', d => d.x)
374
- .attr('cy', d => d.y);
375
- labels
376
- .attr('x', d => d.x)
377
- .attr('y', d => d.y);
378
- });
379
-
380
- // Drag behavior
381
- function drag(simulation) {
382
- return d3.drag()
383
- .on('start', (event, d) => {
384
- if (!event.active) simulation.alphaTarget(0.3).restart();
385
- d.fx = d.x; d.fy = d.y;
386
- })
387
- .on('drag', (event, d) => {
388
- d.fx = event.x; d.fy = event.y;
389
- })
390
- .on('end', (event, d) => {
391
- if (!event.active) simulation.alphaTarget(0);
392
- d.fx = null; d.fy = null;
393
- });
394
- }
395
-
396
- // Hide loading
397
- document.getElementById('loading').classList.add('hidden');
398
-
399
- // -------------------------------------------------------------------------
400
- // Tooltip on hover
401
- // -------------------------------------------------------------------------
402
- const tooltip = document.getElementById('tooltip');
403
- node.on('mouseover', (event, d) => {
404
- tooltip.textContent = d.label;
405
- tooltip.style.display = 'block';
406
- tooltip.style.left = (event.clientX + 12) + 'px';
407
- tooltip.style.top = (event.clientY - 8) + 'px';
408
- }).on('mousemove', (event) => {
409
- tooltip.style.left = (event.clientX + 12) + 'px';
410
- tooltip.style.top = (event.clientY - 8) + 'px';
411
- }).on('mouseout', () => {
412
- tooltip.style.display = 'none';
413
- });
414
-
415
- // -------------------------------------------------------------------------
416
- // Click → sidebar detail
417
- // -------------------------------------------------------------------------
418
- const sidebar = document.getElementById('sidebar');
419
- const sidebarTitle = document.getElementById('sidebar-title');
420
- const sidebarBody = document.getElementById('sidebar-body');
178
+ <div id="drawer">
179
+ <div class="drawer-head"><h3 id="drawer-title"></h3><button class="drawer-close" id="drawer-close">&times;</button></div>
180
+ <div class="drawer-body" id="drawer-body"></div>
181
+ </div>
421
182
 
422
- document.getElementById('sidebar-close').addEventListener('click', () => {
423
- sidebar.classList.remove('open');
424
- clearHighlight();
425
- });
183
+ <div id="cmd-overlay">
184
+ <div id="cmd-box">
185
+ <input id="cmd-input" type="text" placeholder="Search entities, ops, files…" autocomplete="off">
186
+ <div id="cmd-results"></div>
187
+ </div>
188
+ </div>
426
189
 
427
- node.on('click', async (event, d) => {
428
- event.stopPropagation();
429
- highlightNode(d);
430
-
431
- sidebarTitle.textContent = d.label;
432
- sidebarBody.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Loading…</div>';
433
- sidebar.classList.add('open');
434
-
435
- try {
436
- const res = await fetch(`/api/node/${encodeURIComponent(d.id)}`);
437
- const detail = await res.json();
438
- renderDetail(detail, d);
439
- } catch {
440
- sidebarBody.innerHTML = '<div style="color:var(--red)">Failed to load</div>';
441
- }
442
- });
190
+ <div class="tooltip" id="tooltip"></div>
443
191
 
444
- svg.on('click', () => {
445
- sidebar.classList.remove('open');
446
- clearHighlight();
192
+ <script>
193
+ (async function(){
194
+ // ─── State ───
195
+ const S = { panel: 'graph', graph: null, timeline: null, store: null, system: null, cmdOpen: false, drawerOpen: false };
196
+ const $ = id => document.getElementById(id);
197
+ const TYPE_COLORS = { file:'#60a5fa', milestone:'#34d399', issue:'#fbbf24', branch:'#a78bfa', default:'#63637a' };
198
+ const TYPE_RADIUS = { file:4, milestone:8, issue:7, branch:6, default:4 };
199
+
200
+ // ─── Panel Switching ───
201
+ const tabs = document.querySelectorAll('.tab');
202
+ const panels = document.querySelectorAll('.panel');
203
+ function switchPanel(name){
204
+ S.panel = name;
205
+ tabs.forEach(t => t.classList.toggle('active', t.dataset.panel === name));
206
+ panels.forEach(p => p.classList.toggle('active', p.id === name+'-panel'));
207
+ if(name==='timeline' && !S.timeline) loadTimeline();
208
+ if(name==='store' && !S.store) loadStore();
209
+ if(name==='system' && !S.system) loadSystem();
210
+ }
211
+ tabs.forEach(t => t.addEventListener('click', () => switchPanel(t.dataset.panel)));
212
+
213
+ // ─── Drawer ───
214
+ const drawer = $('drawer'), drawerTitle = $('drawer-title'), drawerBody = $('drawer-body');
215
+ $('drawer-close').onclick = () => { drawer.classList.remove('open'); S.drawerOpen = false; };
216
+ function openDrawer(title, html){ drawerTitle.textContent = title; drawerBody.innerHTML = html; drawer.classList.add('open'); S.drawerOpen = true; }
217
+
218
+ // ─── Command Palette ───
219
+ const cmdOverlay = $('cmd-overlay'), cmdInput = $('cmd-input'), cmdResults = $('cmd-results');
220
+ let cmdItems = [];
221
+ function openCmd(){ cmdOverlay.classList.add('open'); cmdInput.value=''; cmdInput.focus(); renderCmdResults(''); S.cmdOpen=true; }
222
+ function closeCmd(){ cmdOverlay.classList.remove('open'); S.cmdOpen=false; }
223
+ $('cmd-trigger').onclick = openCmd;
224
+ cmdOverlay.addEventListener('click', e => { if(e.target===cmdOverlay) closeCmd(); });
225
+ cmdInput.addEventListener('input', () => renderCmdResults(cmdInput.value));
226
+ cmdInput.addEventListener('keydown', e => { if(e.key==='Escape') closeCmd(); });
227
+
228
+ function buildCmdItems(){
229
+ cmdItems = [];
230
+ if(S.graph){ S.graph.nodes.forEach(n => cmdItems.push({type:n.type, label:n.label, id:n.id})); }
231
+ ['graph','timeline','store','system'].forEach(p => cmdItems.push({type:'panel', label:'Go to '+p.charAt(0).toUpperCase()+p.slice(1), id:'panel:'+p}));
232
+ }
233
+ function renderCmdResults(q){
234
+ const query = q.toLowerCase();
235
+ let items = cmdItems;
236
+ if(query) items = items.filter(i => i.label.toLowerCase().includes(query) || i.type.includes(query));
237
+ items = items.slice(0,20);
238
+ cmdResults.innerHTML = items.map(i =>
239
+ `<div class="cmd-item" data-id="${i.id}" data-type="${i.type}"><span class="ci-type">${i.type}</span><span class="ci-label">${esc(i.label)}</span></div>`
240
+ ).join('');
241
+ cmdResults.querySelectorAll('.cmd-item').forEach(el => el.addEventListener('click', () => {
242
+ const id = el.dataset.id;
243
+ if(id.startsWith('panel:')){ switchPanel(id.slice(6)); closeCmd(); return; }
244
+ closeCmd();
245
+ if(S.panel==='graph') focusGraphNode(id);
246
+ else loadNodeDetail(id);
247
+ }));
248
+ }
249
+ function esc(s){ return s.replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
250
+
251
+ // ─── Keyboard ───
252
+ document.addEventListener('keydown', e => {
253
+ if((e.metaKey||e.ctrlKey) && e.key==='k'){ e.preventDefault(); openCmd(); }
254
+ if(e.key==='Escape'){ if(S.cmdOpen) closeCmd(); else { drawer.classList.remove('open'); S.drawerOpen=false; } }
447
255
  });
448
256
 
449
- function renderDetail(detail, d) {
450
- let html = '';
451
-
452
- // Type badge
453
- const badgeClass = `badge-${d.type}`;
454
- html += `<div class="detail-section">
455
- <span class="detail-badge ${badgeClass}">${d.type}</span>
456
- </div>`;
457
-
458
- if (detail.type === 'file') {
459
- html += `<div class="detail-section">
460
- <h4>Path</h4>
461
- <div class="detail-meta"><strong>${detail.path}</strong></div>
462
- </div>`;
463
- if (detail.contentHash) {
464
- html += `<div class="detail-section">
465
- <h4>Content Hash</h4>
466
- <div class="detail-meta" style="font-family:monospace;font-size:11px">${detail.contentHash}</div>
467
- </div>`;
257
+ // ─── Node Detail ───
258
+ async function loadNodeDetail(nodeId){
259
+ openDrawer(nodeId, '<div style="color:var(--text3)">Loading…</div>');
260
+ try{
261
+ const res = await fetch('/api/node/'+encodeURIComponent(nodeId));
262
+ const d = await res.json();
263
+ let h = `<div class="d-section"><span class="d-badge" style="background:${TYPE_COLORS[d.type]||TYPE_COLORS.default}22;color:${TYPE_COLORS[d.type]||TYPE_COLORS.default}">${d.type}</span></div>`;
264
+ if(d.type==='file'){
265
+ h += `<div class="d-section"><h4>Path</h4><div class="d-meta"><strong>${esc(d.path)}</strong></div></div>`;
266
+ if(d.contentHash) h += `<div class="d-section"><h4>Hash</h4><div style="font:11px var(--mono);color:var(--text3);word-break:break-all">${d.contentHash}</div></div>`;
267
+ if(d.recentOps?.length) { h += `<div class="d-section"><h4>Recent Ops</h4>`; d.recentOps.forEach(o => h += `<div style="font:11px var(--mono);color:var(--cyan)">${o.kind} <span style="color:var(--text3)">${ago(o.timestamp)}</span></div>`); h += '</div>'; }
268
+ } else if(d.type==='milestone'){
269
+ h += `<div class="d-section"><h4>Message</h4><div class="d-meta"><strong>${esc(d.message||'(none)')}</strong></div></div>`;
270
+ if(d.affectedFiles?.length) h += `<div class="d-section"><h4>Files (${d.affectedFiles.length})</h4><div class="d-meta">${d.affectedFiles.map(f=>'<div>'+esc(f)+'</div>').join('')}</div></div>`;
271
+ } else if(d.type==='issue'){
272
+ h += `<div class="d-section"><h4>Details</h4><div class="d-kv">`;
273
+ if(d.status) h+=`<span class="k">status</span><span class="v">${d.status}</span>`;
274
+ if(d.priority) h+=`<span class="k">priority</span><span class="v">${d.priority}</span>`;
275
+ if(d.assignee) h+=`<span class="k">assignee</span><span class="v">${d.assignee}</span>`;
276
+ h += '</div></div>';
277
+ } else if(d.type==='branch'){
278
+ h += `<div class="d-section"><h4>Branch</h4><div class="d-kv"><span class="k">name</span><span class="v">${esc(d.name||'')}</span></div></div>`;
468
279
  }
469
- if (detail.recentOps && detail.recentOps.length > 0) {
470
- html += `<div class="detail-section"><h4>Recent Ops</h4><div class="detail-ops">`;
471
- for (const op of detail.recentOps) {
472
- html += `<div><span class="op-kind">${op.kind}</span> <span class="op-time">${formatTime(op.timestamp)}</span></div>`;
473
- }
474
- html += `</div></div>`;
475
- }
476
- } else if (detail.type === 'milestone') {
477
- html += `<div class="detail-section">
478
- <h4>Message</h4>
479
- <div class="detail-meta"><strong>${detail.message || '(none)'}</strong></div>
480
- </div>`;
481
- if (detail.createdAt) {
482
- html += `<div class="detail-section"><h4>Created</h4>
483
- <div class="detail-meta">${formatTime(detail.createdAt)}</div></div>`;
484
- }
485
- if (detail.affectedFiles && detail.affectedFiles.length > 0) {
486
- html += `<div class="detail-section"><h4>Affected Files (${detail.affectedFiles.length})</h4>
487
- <div class="detail-meta">${detail.affectedFiles.map(f => `<div>${f}</div>`).join('')}</div></div>`;
488
- }
489
- } else if (detail.type === 'issue') {
490
- if (detail.description) {
491
- html += `<div class="detail-section"><h4>Description</h4>
492
- <div class="detail-meta">${detail.description}</div></div>`;
493
- }
494
- html += `<div class="detail-section"><h4>Details</h4><div class="detail-meta">`;
495
- if (detail.status) html += `<div><strong>Status:</strong> ${detail.status}</div>`;
496
- if (detail.priority) html += `<div><strong>Priority:</strong> ${detail.priority}</div>`;
497
- if (detail.assignee) html += `<div><strong>Assignee:</strong> ${detail.assignee}</div>`;
498
- if (detail.labels && detail.labels.length) html += `<div><strong>Labels:</strong> ${detail.labels.join(', ')}</div>`;
499
- if (detail.createdAt) html += `<div><strong>Created:</strong> ${formatTime(detail.createdAt)}</div>`;
500
- if (detail.branchName) html += `<div><strong>Branch:</strong> ${detail.branchName}</div>`;
501
- html += `</div></div>`;
502
- if (detail.criteria && detail.criteria.length > 0) {
503
- html += `<div class="detail-section"><h4>Acceptance Criteria</h4><div class="detail-meta">`;
504
- for (const c of detail.criteria) {
505
- const icon = c.status === 'passed' ? '✓' : c.status === 'failed' ? '✗' : '○';
506
- const color = c.status === 'passed' ? 'var(--green)' : c.status === 'failed' ? 'var(--red)' : 'var(--text-dim)';
507
- html += `<div style="color:${color}">${icon} ${c.description || c.id}</div>`;
508
- }
509
- html += `</div></div>`;
510
- }
511
- } else if (detail.type === 'branch') {
512
- html += `<div class="detail-section"><h4>Details</h4><div class="detail-meta">`;
513
- html += `<div><strong>Name:</strong> ${detail.name}</div>`;
514
- if (detail.isCurrent) html += `<div><strong>Current:</strong> yes</div>`;
515
- if (detail.createdAt) html += `<div><strong>Created:</strong> ${formatTime(detail.createdAt)}</div>`;
516
- html += `</div></div>`;
517
- }
518
-
519
- sidebarBody.innerHTML = html;
520
- }
521
-
522
- function formatTime(iso) {
523
- if (!iso) return '';
524
- const d = new Date(iso);
525
- const now = Date.now();
526
- const diff = now - d.getTime();
527
- if (diff < 60000) return 'just now';
528
- if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
529
- if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
530
- return Math.floor(diff / 86400000) + 'd ago';
531
- }
532
-
533
- // -------------------------------------------------------------------------
534
- // Highlight
535
- // -------------------------------------------------------------------------
536
- let highlightedId = null;
537
-
538
- function highlightNode(d) {
539
- highlightedId = d.id;
540
- const connected = new Set();
541
- connected.add(d.id);
542
- simLinks.forEach(l => {
543
- const sid = typeof l.source === 'object' ? l.source.id : l.source;
544
- const tid = typeof l.target === 'object' ? l.target.id : l.target;
545
- if (sid === d.id) connected.add(tid);
546
- if (tid === d.id) connected.add(sid);
547
- });
548
-
549
- node.attr('opacity', n => connected.has(n.id) ? 1 : 0.15);
550
- link.attr('opacity', l => {
551
- const sid = typeof l.source === 'object' ? l.source.id : l.source;
552
- const tid = typeof l.target === 'object' ? l.target.id : l.target;
553
- return (sid === d.id || tid === d.id) ? 1 : 0.05;
280
+ drawerBody.innerHTML = h;
281
+ } catch{ drawerBody.innerHTML = '<div style="color:var(--red)">Failed to load</div>'; }
282
+ }
283
+ function ago(iso){ if(!iso) return ''; const d=Date.now()-new Date(iso).getTime(); if(d<60000) return 'now'; if(d<3600000) return Math.floor(d/60000)+'m'; if(d<86400000) return Math.floor(d/3600000)+'h'; return Math.floor(d/86400000)+'d'; }
284
+
285
+ // ─── Entity Detail (store) ───
286
+ async function loadEntityDetail(entityId){
287
+ openDrawer(entityId, '<div style="color:var(--text3)">Loading…</div>');
288
+ try{
289
+ const res = await fetch('/api/store/entity/'+encodeURIComponent(entityId));
290
+ const d = await res.json();
291
+ let h = `<div class="d-section"><span class="d-badge" style="background:var(--accent-glow);color:var(--accent2)">${esc(String(d.type))}</span></div>`;
292
+ h += '<div class="d-section"><h4>Facts</h4><div class="d-kv">';
293
+ d.facts.forEach(f => h += `<span class="k">${esc(f.a)}</span><span class="v">${esc(String(f.v))}</span>`);
294
+ h += '</div></div>';
295
+ if(d.links?.length){ h += '<div class="d-section"><h4>Links ('+d.links.length+')</h4>'; d.links.forEach(l => { h += `<div style="font:11px var(--mono);color:var(--text2)">${l.direction==='outgoing'?'→':'←'} <span style="color:var(--accent2)">${esc(l.a)}</span> ${esc(l.direction==='outgoing'?l.target:l.source)}</div>`; }); h+='</div>'; }
296
+ drawerBody.innerHTML = h;
297
+ } catch{ drawerBody.innerHTML = '<div style="color:var(--red)">Failed to load</div>'; }
298
+ }
299
+
300
+ // ═══════════════════════════════════════════════════════════════════════════
301
+ // GRAPH PANEL
302
+ // ═══════════════════════════════════════════════════════════════════════════
303
+ let graphSim, graphZoom, graphSvg, graphG, graphNodes, graphLinks, graphLabels, graphNodeMap;
304
+
305
+ async function initGraph(){
306
+ try{ const r = await fetch('/api/graph'); S.graph = await r.json(); }
307
+ catch{ $('graph-panel').innerHTML='<div style="padding:40px;color:var(--red)">Failed to load graph</div>'; return; }
308
+ const { nodes, edges } = S.graph;
309
+ $('top-stats').textContent = nodes.length + ' nodes · ' + edges.length + ' edges';
310
+ buildCmdItems();
311
+
312
+ const container = $('graph-panel');
313
+ const w = container.clientWidth, h = container.clientHeight;
314
+
315
+ const svg = d3.select('#graph-panel').append('svg').attr('width', w).attr('height', h);
316
+ graphSvg = svg;
317
+ const g = svg.append('g');
318
+ graphG = g;
319
+ graphZoom = d3.zoom().scaleExtent([0.1,8]).on('zoom', e => g.attr('transform', e.transform));
320
+ svg.call(graphZoom);
321
+
322
+ const simLinks = edges.map(e => ({...e}));
323
+ const simNodes = nodes.map(n => ({...n}));
324
+ graphNodeMap = new Map(); simNodes.forEach(n => graphNodeMap.set(n.id, n));
325
+
326
+ graphSim = d3.forceSimulation(simNodes)
327
+ .force('link', d3.forceLink(simLinks).id(d=>d.id).distance(55).strength(0.3))
328
+ .force('charge', d3.forceManyBody().strength(-70).distanceMax(280))
329
+ .force('center', d3.forceCenter(w/2, h/2))
330
+ .force('collision', d3.forceCollide().radius(d=>(TYPE_RADIUS[d.type]||4)+2))
331
+ .force('x', d3.forceX(w/2).strength(0.03))
332
+ .force('y', d3.forceY(h/2).strength(0.03));
333
+
334
+ graphLinks = g.append('g').selectAll('line').data(simLinks).join('line')
335
+ .attr('stroke', d => d.type==='wikilink'?'#60a5fa33':d.type==='milestone_file'?'#34d39933':d.type==='issue_branch'?'#fbbf2433':'#25262e')
336
+ .attr('stroke-width', d => d.type==='wikilink'?1.2:0.7);
337
+
338
+ graphNodes = g.append('g').selectAll('circle').data(simNodes).join('circle')
339
+ .attr('r', d => TYPE_RADIUS[d.type]||4)
340
+ .attr('fill', d => TYPE_COLORS[d.type]||TYPE_COLORS.default)
341
+ .attr('cursor','pointer')
342
+ .call(d3.drag().on('start',(e,d)=>{if(!e.active)graphSim.alphaTarget(.3).restart();d.fx=d.x;d.fy=d.y}).on('drag',(e,d)=>{d.fx=e.x;d.fy=e.y}).on('end',(e,d)=>{if(!e.active)graphSim.alphaTarget(0);d.fx=null;d.fy=null}));
343
+
344
+ graphLabels = g.append('g').selectAll('text').data(simNodes.filter(d=>d.type!=='file')).join('text')
345
+ .text(d => d.label.length>22?d.label.slice(0,22)+'…':d.label)
346
+ .attr('font-size',10).attr('fill',d=>TYPE_COLORS[d.type]||'#63637a').attr('dx',d=>(TYPE_RADIUS[d.type]||4)+4).attr('dy',3).attr('pointer-events','none').attr('opacity',.8).attr('font-family','Inter,sans-serif');
347
+
348
+ graphSim.on('tick', () => {
349
+ graphLinks.attr('x1',d=>d.source.x).attr('y1',d=>d.source.y).attr('x2',d=>d.target.x).attr('y2',d=>d.target.y);
350
+ graphNodes.attr('cx',d=>d.x).attr('cy',d=>d.y);
351
+ graphLabels.attr('x',d=>d.x).attr('y',d=>d.y);
554
352
  });
555
- labels.attr('opacity', n => connected.has(n.id) ? 1 : 0.1);
556
- }
557
-
558
- function clearHighlight() {
559
- highlightedId = null;
560
- node.attr('opacity', 1);
561
- link.attr('opacity', 1);
562
- labels.attr('opacity', 0.8);
563
- }
564
-
565
- // -------------------------------------------------------------------------
566
- // Search
567
- // -------------------------------------------------------------------------
568
- const searchBox = document.getElementById('search-box');
569
- const searchResults = document.getElementById('search-results');
570
- let searchTimeout = null;
571
-
572
- searchBox.addEventListener('keydown', (e) => {
573
- if (e.key === 'Enter') {
574
- doSearch(searchBox.value.trim());
575
- }
576
- if (e.key === 'Escape') {
577
- searchResults.classList.remove('visible');
578
- searchBox.blur();
579
- }
580
- });
581
-
582
- async function doSearch(query) {
583
- if (!query) {
584
- searchResults.classList.remove('visible');
585
- return;
586
- }
587
-
588
- searchResults.innerHTML = '<div style="padding:16px;color:var(--text-dim);font-size:12px">Searching…</div>';
589
- searchResults.classList.add('visible');
590
-
591
- try {
592
- const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=15`);
593
- const data = await res.json();
594
-
595
- if (data.message) {
596
- searchResults.innerHTML = `<div style="padding:16px;color:var(--text-dim);font-size:12px">${data.message}</div>`;
597
- return;
598
- }
599
-
600
- if (!data.results || data.results.length === 0) {
601
- searchResults.innerHTML = '<div style="padding:16px;color:var(--text-dim);font-size:12px">No results</div>';
602
- return;
603
- }
604
-
605
- // Highlight matching nodes on the graph
606
- const matchedFiles = new Set(data.results.filter(r => r.filePath).map(r => `file:${r.filePath}`));
607
- node.attr('opacity', n => matchedFiles.size === 0 || matchedFiles.has(n.id) ? 1 : 0.15);
608
- link.attr('opacity', 0.1);
609
- labels.attr('opacity', n => matchedFiles.has(n.id) ? 1 : 0.1);
610
-
611
- searchResults.innerHTML = data.results.map(r => {
612
- const score = (r.score * 100).toFixed(1);
613
- const preview = (r.content || '').slice(0, 120).replace(/</g, '&lt;');
614
- return `<div class="search-result" data-file="${r.filePath || ''}" data-entity="${r.entityId || ''}">
615
- <span class="sr-score">${score}%</span>
616
- <span class="sr-type">[${r.chunkType}]</span>
617
- ${r.filePath ? `<span class="sr-file">${r.filePath}</span>` : ''}
618
- <div class="sr-preview">${preview}</div>
619
- </div>`;
620
- }).join('');
621
-
622
- // Click search result → focus that node
623
- searchResults.querySelectorAll('.search-result').forEach(el => {
624
- el.addEventListener('click', () => {
625
- const fileId = `file:${el.dataset.file}`;
626
- const n = nodeMap.get(fileId);
627
- if (n) {
628
- highlightNode(n);
629
- // Pan to node
630
- const transform = d3.zoomTransform(svg.node());
631
- const x = transform.applyX(n.x);
632
- const y = transform.applyY(n.y);
633
- svg.transition().duration(500).call(
634
- zoom.translateTo, n.x, n.y
635
- );
636
- }
637
- searchResults.classList.remove('visible');
638
- });
639
- });
640
- } catch (err) {
641
- searchResults.innerHTML = `<div style="padding:16px;color:var(--red);font-size:12px">Search failed: ${err.message}</div>`;
642
- }
643
- }
644
353
 
645
- // Click outside search results to close
646
- document.addEventListener('click', (e) => {
647
- if (!searchResults.contains(e.target) && e.target !== searchBox) {
648
- searchResults.classList.remove('visible');
649
- }
650
- });
651
-
652
- // -------------------------------------------------------------------------
653
- // Keyboard shortcuts
654
- // -------------------------------------------------------------------------
655
- document.addEventListener('keydown', (e) => {
656
- // "/" to focus search
657
- if (e.key === '/' && document.activeElement !== searchBox) {
658
- e.preventDefault();
659
- searchBox.focus();
660
- }
661
- // Escape to clear
662
- if (e.key === 'Escape') {
663
- sidebar.classList.remove('open');
664
- searchResults.classList.remove('visible');
665
- clearHighlight();
666
- }
667
- });
668
-
669
- // -------------------------------------------------------------------------
670
- // Fit to viewport on load
671
- // -------------------------------------------------------------------------
672
- simulation.on('end', () => {
673
- // Auto-fit after simulation settles
674
- const bounds = g.node().getBBox();
675
- if (bounds.width === 0 || bounds.height === 0) return;
676
- const pad = 60;
677
- const scale = Math.min(
678
- (width - pad * 2) / bounds.width,
679
- (height - pad * 2) / bounds.height,
680
- 2
681
- );
682
- const cx = bounds.x + bounds.width / 2;
683
- const cy = bounds.y + bounds.height / 2;
684
- svg.transition().duration(750).call(
685
- zoom.transform,
686
- d3.zoomIdentity
687
- .translate(width / 2, height / 2)
688
- .scale(scale)
689
- .translate(-cx, -cy)
690
- );
691
- });
354
+ // Tooltip
355
+ const tip = $('tooltip');
356
+ graphNodes.on('mouseover',(e,d)=>{tip.textContent=d.label;tip.style.display='block';tip.style.left=(e.clientX+12)+'px';tip.style.top=(e.clientY-8)+'px'})
357
+ .on('mousemove',e=>{tip.style.left=(e.clientX+12)+'px';tip.style.top=(e.clientY-8)+'px'})
358
+ .on('mouseout',()=>{tip.style.display='none'});
359
+
360
+ // Click → detail
361
+ graphNodes.on('click',(e,d)=>{e.stopPropagation();highlightGraphNode(d);loadNodeDetail(d.id)});
362
+ svg.on('click',()=>{clearGraphHighlight();drawer.classList.remove('open')});
363
+
364
+ // Legend
365
+ const legendHtml = Object.entries(TYPE_COLORS).filter(([k])=>k!=='default').map(([k,c])=>`<div class="legend-item"><div class="legend-dot" style="background:${c}"></div>${k}</div>`).join('');
366
+ const legendDiv = document.createElement('div'); legendDiv.className='graph-legend'; legendDiv.innerHTML=legendHtml; container.appendChild(legendDiv);
367
+
368
+ // Zoom controls
369
+ const ctrlDiv = document.createElement('div'); ctrlDiv.className='graph-controls';
370
+ ctrlDiv.innerHTML='<button id="gz-in">+</button><button id="gz-out">−</button><button id="gz-fit">⊙</button>';
371
+ container.appendChild(ctrlDiv);
372
+ $('gz-in').onclick=()=>svg.transition().duration(300).call(graphZoom.scaleBy,1.5);
373
+ $('gz-out').onclick=()=>svg.transition().duration(300).call(graphZoom.scaleBy,0.67);
374
+ $('gz-fit').onclick=()=>fitGraph();
375
+
376
+ graphSim.on('end', fitGraph);
377
+ }
378
+ function fitGraph(){ const b=graphG.node().getBBox();if(!b.width)return;const w=$('graph-panel').clientWidth,h=$('graph-panel').clientHeight,p=50;const s=Math.min((w-p*2)/b.width,(h-p*2)/b.height,2);graphSvg.transition().duration(600).call(graphZoom.transform,d3.zoomIdentity.translate(w/2,h/2).scale(s).translate(-b.x-b.width/2,-b.y-b.height/2)); }
379
+ function highlightGraphNode(d){ const c=new Set([d.id]);graphLinks.each(function(l){const s=typeof l.source==='object'?l.source.id:l.source;const t=typeof l.target==='object'?l.target.id:l.target;if(s===d.id)c.add(t);if(t===d.id)c.add(s)});graphNodes.attr('opacity',n=>c.has(n.id)?1:.12);graphLinks.attr('opacity',l=>{const s=typeof l.source==='object'?l.source.id:l.source;const t=typeof l.target==='object'?l.target.id:l.target;return(s===d.id||t===d.id)?1:.04});graphLabels.attr('opacity',n=>c.has(n.id)?1:.08); }
380
+ function clearGraphHighlight(){ graphNodes?.attr('opacity',1); graphLinks?.attr('opacity',1); graphLabels?.attr('opacity',.8); }
381
+ function focusGraphNode(id){ const n=graphNodeMap?.get(id);if(!n)return;highlightGraphNode(n);loadNodeDetail(id);graphSvg.transition().duration(500).call(graphZoom.translateTo,n.x,n.y); }
382
+
383
+ // ═══════════════════════════════════════════════════════════════════════════
384
+ // TIMELINE PANEL
385
+ // ═══════════════════════════════════════════════════════════════════════════
386
+ async function loadTimeline(){
387
+ const panel = $('timeline-panel');
388
+ panel.innerHTML = '<div class="tl-header"><h2>Causal Stream</h2><div class="tl-stats" id="tl-stats"></div></div><div class="tl-body" id="tl-body"></div>';
389
+ try{
390
+ const r = await fetch('/api/timeline'); S.timeline = await r.json();
391
+ } catch{ panel.innerHTML='<div class="tl-empty">Failed to load timeline</div>'; return; }
392
+ const { ops, milestones, checkpoints, totalOps } = S.timeline;
393
+ $('tl-stats').textContent = totalOps + ' ops · ' + milestones.length + ' milestones';
394
+ if(!ops.length){ $('tl-body').innerHTML='<div class="tl-empty">No operations yet</div>'; return; }
395
+ const body = $('tl-body');
396
+ const W = Math.max(body.clientWidth, ops.length*14+120), H = body.clientHeight-20;
397
+ const KIND_COLORS = {'vcs:fileAdd':TYPE_COLORS.file,'vcs:fileModify':'#38bdf8','vcs:fileDelete':TYPE_COLORS.issue,'vcs:fileRename':'#fb923c','vcs:branchCreate':TYPE_COLORS.branch,'vcs:branchDelete':'#f472b6','vcs:milestoneCreate':TYPE_COLORS.milestone,'vcs:checkpointCreate':'#6b7280'};
398
+ const svg = d3.select('#tl-body').append('svg').attr('width',W).attr('height',H);
399
+ const x = d3.scaleLinear().domain([0,ops.length-1||1]).range([40,W-40]);
400
+ const laneY = H/2;
401
+
402
+ // Main lane
403
+ svg.append('line').attr('x1',40).attr('y1',laneY).attr('x2',W-40).attr('y2',laneY).attr('stroke','#25262e').attr('stroke-width',1);
404
+
405
+ // Ops
406
+ svg.selectAll('.op-dot').data(ops).join('circle').attr('class','op-dot')
407
+ .attr('cx',(_,i)=>x(i)).attr('cy',laneY).attr('r',3)
408
+ .attr('fill',d=>KIND_COLORS[d.kind]||'#63637a').attr('opacity',.7)
409
+ .attr('cursor','pointer')
410
+ .on('mouseover',function(e,d){const tip=$('tooltip');tip.innerHTML=`<strong>${d.kind}</strong> ${d.filePath||d.branchName||d.message||''}<br><span style="color:var(--text3)">${ago(d.timestamp)}</span>`;tip.style.display='block';tip.style.left=(e.clientX+12)+'px';tip.style.top=(e.clientY-8)+'px';d3.select(this).attr('r',5).attr('opacity',1)})
411
+ .on('mouseout',function(){$('tooltip').style.display='none';d3.select(this).attr('r',3).attr('opacity',.7)})
412
+ .on('click',(e,d)=>{e.stopPropagation();openDrawer('Op: '+d.kind,`<div class="d-section"><div class="d-kv"><span class="k">kind</span><span class="v">${d.kind}</span><span class="k">hash</span><span class="v">${d.hash}</span><span class="k">time</span><span class="v">${d.timestamp||''}</span><span class="k">agent</span><span class="v">${d.agentId||''}</span>${d.filePath?'<span class="k">file</span><span class="v">'+esc(d.filePath)+'</span>':''}${d.branchName?'<span class="k">branch</span><span class="v">'+esc(d.branchName)+'</span>':''}</div></div>`)});
413
+
414
+ // Milestone markers
415
+ milestones.forEach(m=>{const mx=x(m.atOpIndex);svg.append('polygon').attr('points',`${mx},${laneY-18} ${mx+6},${laneY-10} ${mx},${laneY-2} ${mx-6},${laneY-10}`).attr('fill',TYPE_COLORS.milestone).attr('opacity',.85).attr('cursor','pointer')
416
+ .on('click',()=>openDrawer('Milestone',`<div class="d-section"><h4>Message</h4><div class="d-meta"><strong>${esc(m.message||'')}</strong></div></div><div class="d-section"><div class="d-kv"><span class="k">ID</span><span class="v">${m.id}</span><span class="k">at op</span><span class="v">#${m.atOpIndex}</span><span class="k">files</span><span class="v">${m.affectedFiles}</span></div></div>`));
417
+ svg.append('text').attr('x',mx).attr('y',laneY-22).attr('text-anchor','middle').attr('font-size',9).attr('fill',TYPE_COLORS.milestone).attr('font-family','Inter').text(m.message?.slice(0,20)||m.id)});
418
+
419
+ // Checkpoint ticks
420
+ checkpoints.forEach(c=>{const cx=x(c.atOpIndex);svg.append('line').attr('x1',cx).attr('y1',laneY+8).attr('x2',cx).attr('y2',laneY+18).attr('stroke','#6b7280').attr('stroke-width',1).attr('opacity',.5)});
421
+ }
422
+
423
+ // ═══════════════════════════════════════════════════════════════════════════
424
+ // STORE PANEL
425
+ // ═══════════════════════════════════════════════════════════════════════════
426
+ async function loadStore(){
427
+ const panel = $('store-panel');
428
+ panel.innerHTML='<div style="padding:40px;color:var(--text3)">Loading store…</div>';
429
+ try{ const r=await fetch('/api/store'); S.store=await r.json(); } catch{ panel.innerHTML='<div style="padding:40px;color:var(--red)">Failed to load</div>'; return; }
430
+ const d=S.store;
431
+ let h='<div class="stat-grid"><div class="stat-card"><div class="sv">'+d.stats.totalFacts+'</div><div class="sl">Facts</div></div><div class="stat-card"><div class="sv">'+d.stats.totalLinks+'</div><div class="sl">Links</div></div><div class="stat-card"><div class="sv">'+d.stats.uniqueEntities+'</div><div class="sl">Entities</div></div><div class="stat-card"><div class="sv">'+d.stats.uniqueAttributes+'</div><div class="sl">Attributes</div></div></div>';
432
+ h+='<div class="store-grid"><div class="store-col"><div class="store-section"><h3>Entity Types</h3><div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px">';
433
+ Object.entries(d.entityTypes).forEach(([t,c])=>h+=`<span class="type-pill" data-type="${esc(t)}">${esc(t)} <span class="tc">${c}</span></span>`);
434
+ h+='</div><div id="entity-list">';
435
+ d.entities.slice(0,200).forEach(e=>h+=`<div class="entity-row" data-eid="${esc(e.id)}"><span class="et">${esc(e.type)}</span><span class="ei">${esc(e.id)}</span><span class="ec">${e.factCount}f</span></div>`);
436
+ h+='</div></div></div><div class="store-col"><div class="store-section"><h3>Attribute Catalog</h3><table class="catalog-table"><thead><tr><th>Attribute</th><th>Type</th><th>Card</th><th>#</th></tr></thead><tbody>';
437
+ d.catalog.forEach(c=>h+=`<tr><td>${esc(c.attribute)}</td><td>${c.type}</td><td>${c.cardinality}</td><td>${c.distinctCount}</td></tr>`);
438
+ h+='</tbody></table></div></div></div>';
439
+ panel.innerHTML=h;
440
+
441
+ // Entity click → detail
442
+ panel.querySelectorAll('.entity-row').forEach(el=>el.addEventListener('click',()=>loadEntityDetail(el.dataset.eid)));
443
+ // Type filter
444
+ panel.querySelectorAll('.type-pill').forEach(el=>el.addEventListener('click',()=>{
445
+ const t=el.dataset.type; const active=el.classList.toggle('active');
446
+ panel.querySelectorAll('.type-pill').forEach(p=>{if(p!==el)p.classList.remove('active')});
447
+ panel.querySelectorAll('.entity-row').forEach(r=>{r.style.display=(!active||r.querySelector('.et').textContent===t)?'':'none'});
448
+ }));
449
+ }
450
+
451
+ // ═══════════════════════════════════════════════════════════════════════════
452
+ // SYSTEM PANEL
453
+ // ═══════════════════════════════════════════════════════════════════════════
454
+ async function loadSystem(){
455
+ const panel=$('system-panel');
456
+ panel.innerHTML='<div style="color:var(--text3)">Loading…</div>';
457
+ try{ const r=await fetch('/api/system'); S.system=await r.json(); }catch{ panel.innerHTML='<div style="color:var(--red)">Failed to load</div>'; return; }
458
+ const d=S.system;
459
+ let h='<h2 style="font:600 16px var(--font);color:var(--text)">System Overview</h2><div class="sys-grid">';
460
+ // Engine card
461
+ h+=`<div class="sys-card"><h3><span class="icon">⚡</span>Engine</h3>
462
+ <div class="sys-row"><span class="label">Root</span><span class="value">${esc(d.engine.rootPath)}</span></div>
463
+ <div class="sys-row"><span class="label">Branch</span><span class="value">${esc(d.engine.branch)}</span></div>
464
+ <div class="sys-row"><span class="label">Total Ops</span><span class="value">${d.engine.totalOps}</span></div>
465
+ <div class="sys-row"><span class="label">Tracked Files</span><span class="value">${d.engine.trackedFiles}</span></div>
466
+ <div class="sys-row"><span class="label">Last Op</span><span class="value">${ago(d.engine.lastOpAt)}</span></div></div>`;
467
+ // Store card
468
+ h+=`<div class="sys-card"><h3><span class="icon">◆</span>EAV Store</h3>
469
+ <div class="sys-row"><span class="label">Facts</span><span class="value">${d.store.totalFacts}</span></div>
470
+ <div class="sys-row"><span class="label">Links</span><span class="value">${d.store.totalLinks}</span></div>
471
+ <div class="sys-row"><span class="label">Entities</span><span class="value">${d.store.uniqueEntities}</span></div>
472
+ <div class="sys-row"><span class="label">Attributes</span><span class="value">${d.store.uniqueAttributes}</span></div></div>`;
473
+ // Features card
474
+ h+=`<div class="sys-card"><h3><span class="icon">⊕</span>Features</h3>
475
+ <div class="sys-row"><span class="label">Embeddings</span><span class="sys-badge ${d.features.embeddings?'on':'off'}">${d.features.embeddings?'active':'off'}</span></div>
476
+ <div class="sys-row"><span class="label">Blob Store</span><span class="sys-badge ${d.features.blobStore?'on':'off'}">${d.features.blobStore?'active':'off'}</span></div></div>`;
477
+ // Parsers card
478
+ h+=`<div class="sys-card"><h3><span class="icon">⟨⟩</span>Parser Adapters</h3><div class="parser-tags">${d.parsers.map(p=>`<span class="parser-tag">${p}</span>`).join('')}</div></div>`;
479
+ h+='</div>';
480
+ panel.innerHTML=h;
481
+ }
482
+
483
+ // ═══════════════════════════════════════════════════════════════════════════
484
+ // BOOT
485
+ // ═══════════════════════════════════════════════════════════════════════════
486
+ await initGraph();
487
+ $('loading').classList.add('hidden');
692
488
  })();
693
489
  </script>
694
490
  </body>