@rkarim08/sia 1.0.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 (355) hide show
  1. package/.claude-plugin/marketplace.json +35 -0
  2. package/.claude-plugin/plugin.json +27 -0
  3. package/.mcp.json +13 -0
  4. package/CLAUDE.md +226 -0
  5. package/LICENSE +202 -0
  6. package/PLUGIN_README.md +253 -0
  7. package/README.md +1013 -0
  8. package/agents/sia-changelog-writer.md +89 -0
  9. package/agents/sia-code-reviewer.md +86 -0
  10. package/agents/sia-conflict-resolver.md +100 -0
  11. package/agents/sia-convention-enforcer.md +69 -0
  12. package/agents/sia-debug.md +106 -0
  13. package/agents/sia-decision-reviewer.md +101 -0
  14. package/agents/sia-dependency-tracker.md +80 -0
  15. package/agents/sia-explain.md +126 -0
  16. package/agents/sia-feature.md +116 -0
  17. package/agents/sia-knowledge-capture.md +117 -0
  18. package/agents/sia-lead-architecture-advisor.md +93 -0
  19. package/agents/sia-lead-team-health.md +107 -0
  20. package/agents/sia-migration.md +100 -0
  21. package/agents/sia-onboarding.md +115 -0
  22. package/agents/sia-orientation.md +99 -0
  23. package/agents/sia-pm-briefing.md +106 -0
  24. package/agents/sia-pm-risk-advisor.md +82 -0
  25. package/agents/sia-qa-analyst.md +116 -0
  26. package/agents/sia-qa-regression-map.md +94 -0
  27. package/agents/sia-refactor.md +115 -0
  28. package/agents/sia-regression.md +112 -0
  29. package/agents/sia-security-audit.md +125 -0
  30. package/agents/sia-test-advisor.md +91 -0
  31. package/hooks/hooks.json +98 -0
  32. package/migrations/bridge/001_initial.sql +34 -0
  33. package/migrations/episodic/001_initial.sql +35 -0
  34. package/migrations/meta/001_initial.sql +68 -0
  35. package/migrations/semantic/001_initial.sql +292 -0
  36. package/migrations/semantic/002_ontology.sql +89 -0
  37. package/migrations/semantic/003_freshness.sql +63 -0
  38. package/migrations/semantic/004_v5_unified_schema.sql +194 -0
  39. package/migrations/semantic/005_backfill_event_kinds.sql +8 -0
  40. package/migrations/semantic/006_tree_sitter.sql +6 -0
  41. package/migrations/semantic/007_branch_snapshots.sql +22 -0
  42. package/package.json +110 -0
  43. package/scripts/branch-switch.sh +13 -0
  44. package/scripts/build-wasm-grammars.sh +81 -0
  45. package/scripts/post-compact.sh +8 -0
  46. package/scripts/post-tool-use.sh +10 -0
  47. package/scripts/pre-compact.sh +8 -0
  48. package/scripts/session-end.sh +8 -0
  49. package/scripts/session-start.sh +8 -0
  50. package/scripts/start-mcp.ts +45 -0
  51. package/scripts/stop-hook.sh +8 -0
  52. package/scripts/user-prompt-submit.sh +8 -0
  53. package/scripts/viz-server.ts +152 -0
  54. package/skills/sia-brainstorm/SKILL.md +156 -0
  55. package/skills/sia-brainstorm/scripts/frame-template.html +214 -0
  56. package/skills/sia-brainstorm/scripts/helper.js +95 -0
  57. package/skills/sia-brainstorm/scripts/server.cjs +338 -0
  58. package/skills/sia-brainstorm/scripts/start-server.sh +153 -0
  59. package/skills/sia-brainstorm/scripts/stop-server.sh +55 -0
  60. package/skills/sia-brainstorm/spec-document-reviewer-prompt.md +49 -0
  61. package/skills/sia-brainstorm/visual-companion.md +286 -0
  62. package/skills/sia-capture/SKILL.md +64 -0
  63. package/skills/sia-compare/SKILL.md +33 -0
  64. package/skills/sia-conflicts/SKILL.md +38 -0
  65. package/skills/sia-debug-workflow/SKILL.md +120 -0
  66. package/skills/sia-debug-workflow/root-cause-tracing.md +70 -0
  67. package/skills/sia-debug-workflow/scripts/find-polluter.sh +64 -0
  68. package/skills/sia-debug-workflow/temporal-investigation.md +72 -0
  69. package/skills/sia-digest/SKILL.md +23 -0
  70. package/skills/sia-dispatch/SKILL.md +69 -0
  71. package/skills/sia-dispatch/agent-task-template.md +99 -0
  72. package/skills/sia-doctor/SKILL.md +39 -0
  73. package/skills/sia-execute/SKILL.md +70 -0
  74. package/skills/sia-execute-plan/SKILL.md +85 -0
  75. package/skills/sia-export-import/SKILL.md +49 -0
  76. package/skills/sia-export-knowledge/SKILL.md +46 -0
  77. package/skills/sia-finish/SKILL.md +100 -0
  78. package/skills/sia-finish/pr-summary-template.md +54 -0
  79. package/skills/sia-freshness/SKILL.md +38 -0
  80. package/skills/sia-history/SKILL.md +42 -0
  81. package/skills/sia-impact/SKILL.md +70 -0
  82. package/skills/sia-index/SKILL.md +54 -0
  83. package/skills/sia-install/SKILL.md +39 -0
  84. package/skills/sia-lead-compliance/SKILL.md +16 -0
  85. package/skills/sia-lead-drift-report/SKILL.md +16 -0
  86. package/skills/sia-lead-knowledge-map/SKILL.md +16 -0
  87. package/skills/sia-learn/SKILL.md +58 -0
  88. package/skills/sia-plan/SKILL.md +68 -0
  89. package/skills/sia-plan/plan-reviewer-prompt.md +63 -0
  90. package/skills/sia-playbooks/SKILL.md +29 -0
  91. package/skills/sia-playbooks/reference-feature.md +100 -0
  92. package/skills/sia-playbooks/reference-flagging.md +50 -0
  93. package/skills/sia-playbooks/reference-orientation.md +92 -0
  94. package/skills/sia-playbooks/reference-regression.md +115 -0
  95. package/skills/sia-playbooks/reference-review.md +64 -0
  96. package/skills/sia-playbooks/reference-tools.md +239 -0
  97. package/skills/sia-pm-decision-log/SKILL.md +28 -0
  98. package/skills/sia-pm-risk-dashboard/SKILL.md +24 -0
  99. package/skills/sia-pm-sprint-summary/SKILL.md +27 -0
  100. package/skills/sia-prune/SKILL.md +45 -0
  101. package/skills/sia-qa-coverage/SKILL.md +28 -0
  102. package/skills/sia-qa-flaky/SKILL.md +20 -0
  103. package/skills/sia-qa-report/SKILL.md +26 -0
  104. package/skills/sia-reindex/SKILL.md +30 -0
  105. package/skills/sia-review-respond/SKILL.md +88 -0
  106. package/skills/sia-review-respond/pushback-patterns.md +90 -0
  107. package/skills/sia-search/SKILL.md +47 -0
  108. package/skills/sia-setup/SKILL.md +82 -0
  109. package/skills/sia-setup/setup-checklist.md +97 -0
  110. package/skills/sia-stats/SKILL.md +36 -0
  111. package/skills/sia-status/SKILL.md +44 -0
  112. package/skills/sia-sync/SKILL.md +46 -0
  113. package/skills/sia-team/SKILL.md +64 -0
  114. package/skills/sia-test/SKILL.md +92 -0
  115. package/skills/sia-test/testing-anti-patterns.md +104 -0
  116. package/skills/sia-tour/SKILL.md +29 -0
  117. package/skills/sia-upgrade/SKILL.md +43 -0
  118. package/skills/sia-verify/SKILL.md +81 -0
  119. package/skills/sia-visualize/SKILL.md +28 -0
  120. package/skills/sia-visualize-live/SKILL.md +55 -0
  121. package/skills/sia-visualize-live/scripts/graph-template.html +389 -0
  122. package/skills/sia-visualize-live/scripts/start-visualizer.sh +161 -0
  123. package/skills/sia-visualize-live/scripts/stop-visualizer.sh +55 -0
  124. package/skills/sia-visualize-live/scripts/visualizer-server.cjs +264 -0
  125. package/skills/sia-workspace/SKILL.md +57 -0
  126. package/src/agent/claude-md-template-flagging.md +219 -0
  127. package/src/agent/claude-md-template.md +213 -0
  128. package/src/agent/modules/sia-feature.md +100 -0
  129. package/src/agent/modules/sia-flagging.md +50 -0
  130. package/src/agent/modules/sia-orientation.md +92 -0
  131. package/src/agent/modules/sia-regression.md +115 -0
  132. package/src/agent/modules/sia-review.md +64 -0
  133. package/src/agent/modules/sia-tools.md +239 -0
  134. package/src/ast/extractors/c-include.ts +189 -0
  135. package/src/ast/extractors/csharp-project.ts +260 -0
  136. package/src/ast/extractors/prisma-schema.ts +44 -0
  137. package/src/ast/extractors/project-manifest.ts +111 -0
  138. package/src/ast/extractors/sql-schema.ts +67 -0
  139. package/src/ast/extractors/tier-a.ts +423 -0
  140. package/src/ast/extractors/tier-b.ts +289 -0
  141. package/src/ast/extractors/tier-dispatch.ts +247 -0
  142. package/src/ast/index-worker.ts +108 -0
  143. package/src/ast/indexer.ts +484 -0
  144. package/src/ast/languages.ts +408 -0
  145. package/src/ast/pagerank-builder.ts +125 -0
  146. package/src/ast/path-utils.ts +137 -0
  147. package/src/ast/tree-sitter/backends/native.ts +57 -0
  148. package/src/ast/tree-sitter/backends/wasm.ts +39 -0
  149. package/src/ast/tree-sitter/call-walker.ts +44 -0
  150. package/src/ast/tree-sitter/edit-computer.ts +55 -0
  151. package/src/ast/tree-sitter/query-runner.ts +46 -0
  152. package/src/ast/tree-sitter/service.ts +174 -0
  153. package/src/ast/tree-sitter/tree-cache.ts +39 -0
  154. package/src/ast/tree-sitter/types.ts +79 -0
  155. package/src/ast/watcher.ts +322 -0
  156. package/src/capture/chunker.ts +169 -0
  157. package/src/capture/consolidate.ts +127 -0
  158. package/src/capture/edge-inferrer.ts +161 -0
  159. package/src/capture/embedder.ts +166 -0
  160. package/src/capture/embedding-cache.ts +73 -0
  161. package/src/capture/flag-processor.ts +64 -0
  162. package/src/capture/hook.ts +67 -0
  163. package/src/capture/pipeline.ts +450 -0
  164. package/src/capture/prompts/consolidate.ts +25 -0
  165. package/src/capture/prompts/edge-infer.ts +29 -0
  166. package/src/capture/prompts/extract-flagged.ts +36 -0
  167. package/src/capture/prompts/extract.ts +42 -0
  168. package/src/capture/tokenizer.ts +147 -0
  169. package/src/capture/track-a-ast.ts +93 -0
  170. package/src/capture/track-b-llm.ts +149 -0
  171. package/src/capture/types.ts +64 -0
  172. package/src/cli/commands/community.ts +137 -0
  173. package/src/cli/commands/compare.ts +123 -0
  174. package/src/cli/commands/conflicts.ts +41 -0
  175. package/src/cli/commands/digest.ts +197 -0
  176. package/src/cli/commands/disable-flagging.ts +34 -0
  177. package/src/cli/commands/doctor.ts +240 -0
  178. package/src/cli/commands/download-model.ts +161 -0
  179. package/src/cli/commands/enable-flagging.ts +34 -0
  180. package/src/cli/commands/export-knowledge.ts +208 -0
  181. package/src/cli/commands/export.ts +85 -0
  182. package/src/cli/commands/freshness.ts +164 -0
  183. package/src/cli/commands/graph.ts +51 -0
  184. package/src/cli/commands/history.ts +139 -0
  185. package/src/cli/commands/import.ts +335 -0
  186. package/src/cli/commands/install.ts +156 -0
  187. package/src/cli/commands/lead-report.ts +241 -0
  188. package/src/cli/commands/learn.ts +321 -0
  189. package/src/cli/commands/pm-report.ts +413 -0
  190. package/src/cli/commands/prune.ts +75 -0
  191. package/src/cli/commands/qa-report.ts +278 -0
  192. package/src/cli/commands/reindex.ts +104 -0
  193. package/src/cli/commands/rollback.ts +70 -0
  194. package/src/cli/commands/search.ts +103 -0
  195. package/src/cli/commands/server.ts +91 -0
  196. package/src/cli/commands/share.ts +33 -0
  197. package/src/cli/commands/stats.ts +79 -0
  198. package/src/cli/commands/status.ts +176 -0
  199. package/src/cli/commands/sync.ts +96 -0
  200. package/src/cli/commands/team.ts +118 -0
  201. package/src/cli/commands/tour.ts +157 -0
  202. package/src/cli/commands/visualize-live.ts +162 -0
  203. package/src/cli/commands/workspace.ts +117 -0
  204. package/src/cli/index.ts +424 -0
  205. package/src/cli/learn-progress.ts +87 -0
  206. package/src/community/detection-bridge.ts +344 -0
  207. package/src/community/leiden.ts +462 -0
  208. package/src/community/raptor.ts +210 -0
  209. package/src/community/scheduler.ts +74 -0
  210. package/src/community/summarize.ts +115 -0
  211. package/src/decay/archiver.ts +73 -0
  212. package/src/decay/bridge-orphan-cleanup.ts +212 -0
  213. package/src/decay/consolidation-sweep.ts +112 -0
  214. package/src/decay/decay.ts +116 -0
  215. package/src/decay/deep-validator.ts +62 -0
  216. package/src/decay/episodic-promoter.ts +132 -0
  217. package/src/decay/maintenance-scheduler.ts +326 -0
  218. package/src/decay/scheduler.ts +6 -0
  219. package/src/decay/session-sweeper.ts +79 -0
  220. package/src/decay/types.ts +17 -0
  221. package/src/freshness/confidence-decay.ts +122 -0
  222. package/src/freshness/cuckoo-filter.ts +176 -0
  223. package/src/freshness/deep-validation.ts +345 -0
  224. package/src/freshness/dirty-tracker.ts +237 -0
  225. package/src/freshness/file-watcher-layer.ts +119 -0
  226. package/src/freshness/firewall.ts +64 -0
  227. package/src/freshness/git-reconcile-layer.ts +161 -0
  228. package/src/freshness/inverted-index.ts +158 -0
  229. package/src/freshness/stale-read-layer.ts +222 -0
  230. package/src/graph/audit.ts +69 -0
  231. package/src/graph/bridge-db.ts +141 -0
  232. package/src/graph/communities.ts +195 -0
  233. package/src/graph/db-interface.ts +259 -0
  234. package/src/graph/edges.ts +163 -0
  235. package/src/graph/entities.ts +327 -0
  236. package/src/graph/episodic-db.ts +113 -0
  237. package/src/graph/flags.ts +31 -0
  238. package/src/graph/meta-db.ts +200 -0
  239. package/src/graph/semantic-db.ts +101 -0
  240. package/src/graph/session-resume.ts +56 -0
  241. package/src/graph/snapshots.ts +342 -0
  242. package/src/graph/staging.ts +151 -0
  243. package/src/graph/types.ts +128 -0
  244. package/src/hooks/adapters/claude-code.ts +21 -0
  245. package/src/hooks/adapters/cline.ts +43 -0
  246. package/src/hooks/adapters/cursor.ts +65 -0
  247. package/src/hooks/adapters/generic.ts +12 -0
  248. package/src/hooks/agent-detect.ts +34 -0
  249. package/src/hooks/claude-md-directives.ts +32 -0
  250. package/src/hooks/event-router.ts +182 -0
  251. package/src/hooks/extractors/pattern-detector.ts +111 -0
  252. package/src/hooks/handlers/post-compact.ts +30 -0
  253. package/src/hooks/handlers/post-tool-use.ts +403 -0
  254. package/src/hooks/handlers/pre-compact.ts +100 -0
  255. package/src/hooks/handlers/session-end.ts +47 -0
  256. package/src/hooks/handlers/session-start.ts +154 -0
  257. package/src/hooks/handlers/stop.ts +128 -0
  258. package/src/hooks/handlers/user-prompt-submit.ts +68 -0
  259. package/src/hooks/plugin-branch-switch.ts +68 -0
  260. package/src/hooks/plugin-common.ts +47 -0
  261. package/src/hooks/plugin-post-compact.ts +28 -0
  262. package/src/hooks/plugin-post-tool-use.ts +38 -0
  263. package/src/hooks/plugin-pre-compact.ts +37 -0
  264. package/src/hooks/plugin-session-end.ts +37 -0
  265. package/src/hooks/plugin-session-start.ts +75 -0
  266. package/src/hooks/plugin-stop.ts +61 -0
  267. package/src/hooks/plugin-user-prompt-submit.ts +47 -0
  268. package/src/hooks/types.ts +43 -0
  269. package/src/knowledge/discovery.ts +238 -0
  270. package/src/knowledge/external-refs.ts +98 -0
  271. package/src/knowledge/freshness.ts +221 -0
  272. package/src/knowledge/ingest.ts +330 -0
  273. package/src/knowledge/markdown-export.ts +229 -0
  274. package/src/knowledge/markdown-import.ts +359 -0
  275. package/src/knowledge/patterns.ts +74 -0
  276. package/src/knowledge/templates.ts +307 -0
  277. package/src/llm/ai-sdk-adapter.ts +46 -0
  278. package/src/llm/config.ts +88 -0
  279. package/src/llm/cost-tracker.ts +110 -0
  280. package/src/llm/prompts/extraction.ts +55 -0
  281. package/src/llm/prompts/summarization.ts +36 -0
  282. package/src/llm/prompts/validation.ts +37 -0
  283. package/src/llm/provider-registry.ts +68 -0
  284. package/src/llm/reliability.ts +179 -0
  285. package/src/llm/schemas.ts +52 -0
  286. package/src/mcp/freshness-annotator.ts +69 -0
  287. package/src/mcp/server.ts +949 -0
  288. package/src/mcp/tools/sia-ast-query.ts +225 -0
  289. package/src/mcp/tools/sia-at-time.ts +151 -0
  290. package/src/mcp/tools/sia-backlinks.ts +87 -0
  291. package/src/mcp/tools/sia-batch-execute.ts +169 -0
  292. package/src/mcp/tools/sia-by-file.ts +89 -0
  293. package/src/mcp/tools/sia-community.ts +113 -0
  294. package/src/mcp/tools/sia-doctor.ts +73 -0
  295. package/src/mcp/tools/sia-execute-file.ts +122 -0
  296. package/src/mcp/tools/sia-execute.ts +104 -0
  297. package/src/mcp/tools/sia-expand.ts +158 -0
  298. package/src/mcp/tools/sia-fetch-and-index.ts +241 -0
  299. package/src/mcp/tools/sia-flag.ts +65 -0
  300. package/src/mcp/tools/sia-index.ts +111 -0
  301. package/src/mcp/tools/sia-note.ts +134 -0
  302. package/src/mcp/tools/sia-search.ts +105 -0
  303. package/src/mcp/tools/sia-stats.ts +63 -0
  304. package/src/mcp/tools/sia-sync-status.ts +44 -0
  305. package/src/mcp/tools/sia-upgrade.ts +247 -0
  306. package/src/mcp/truncate.ts +231 -0
  307. package/src/native/bridge.ts +167 -0
  308. package/src/native/fallback-ast-diff.ts +144 -0
  309. package/src/native/fallback-graph.ts +325 -0
  310. package/src/ontology/constraints.ts +56 -0
  311. package/src/ontology/errors.ts +8 -0
  312. package/src/ontology/middleware.ts +266 -0
  313. package/src/retrieval/bm25-search.ts +151 -0
  314. package/src/retrieval/context-assembly.ts +76 -0
  315. package/src/retrieval/graph-traversal.ts +168 -0
  316. package/src/retrieval/pagerank.ts +40 -0
  317. package/src/retrieval/query-classifier.ts +106 -0
  318. package/src/retrieval/reranker.ts +156 -0
  319. package/src/retrieval/search.ts +236 -0
  320. package/src/retrieval/throttle.ts +102 -0
  321. package/src/retrieval/vector-search.ts +203 -0
  322. package/src/retrieval/workspace-search.ts +130 -0
  323. package/src/sandbox/context-mode.ts +285 -0
  324. package/src/sandbox/credential-pass.ts +55 -0
  325. package/src/sandbox/executor.ts +235 -0
  326. package/src/security/pattern-detector.ts +127 -0
  327. package/src/security/rule-of-two.ts +50 -0
  328. package/src/security/sanitize.ts +46 -0
  329. package/src/security/semantic-consistency.ts +93 -0
  330. package/src/security/staging-promoter.ts +154 -0
  331. package/src/shared/config.ts +302 -0
  332. package/src/shared/diagnostics.ts +210 -0
  333. package/src/shared/errors.ts +48 -0
  334. package/src/shared/git-utils.ts +143 -0
  335. package/src/shared/llm-client.ts +120 -0
  336. package/src/shared/logger.ts +99 -0
  337. package/src/shared/types.ts +79 -0
  338. package/src/sync/client.ts +43 -0
  339. package/src/sync/conflict.ts +106 -0
  340. package/src/sync/dedup.ts +183 -0
  341. package/src/sync/hlc.ts +117 -0
  342. package/src/sync/keychain.ts +144 -0
  343. package/src/sync/pull.ts +232 -0
  344. package/src/sync/push.ts +131 -0
  345. package/src/types/chokidar.d.ts +23 -0
  346. package/src/visualization/graph-renderer.ts +312 -0
  347. package/src/visualization/subgraph-extract.ts +208 -0
  348. package/src/visualization/views/community-clusters.ts +246 -0
  349. package/src/visualization/views/dependency-map.ts +189 -0
  350. package/src/visualization/views/graph-explorer.ts +364 -0
  351. package/src/visualization/views/timeline.ts +247 -0
  352. package/src/workspace/api-contracts.ts +226 -0
  353. package/src/workspace/cross-repo.ts +61 -0
  354. package/src/workspace/detector.ts +190 -0
  355. package/src/workspace/manifest.ts +141 -0
package/src/visualization/views/graph-explorer.ts ADDED
@@ -0,0 +1,364 @@
1
+ // Module: graph-explorer — Generate interactive graph explorer HTML with D3.js
2
+ //
3
+ // Extends the base graph-renderer with trust tier filtering, community coloring,
4
+ // click-to-expand, and an entity detail panel.
5
+
6
+ import type { SubgraphData } from "@/visualization/subgraph-extract";
7
+
8
+ /** Color palette by entity type category. */
9
+ const TYPE_COLORS: Record<string, string> = {
10
+ FileNode: "#4A90D9",
11
+ CodeEntity: "#4A90D9",
12
+ PackageNode: "#4A90D9",
13
+ Decision: "#5DB85D",
14
+ Convention: "#5DB85D",
15
+ Bug: "#E74C3C",
16
+ Solution: "#2ECC71",
17
+ Concept: "#5DB85D",
18
+ Community: "#9B59B6",
19
+ ContentChunk: "#E67E22",
20
+ Dependency: "#95A5A6",
21
+ };
22
+
23
+ const CATEGORY_LABELS: Array<{ label: string; color: string; types: string[] }> = [
24
+ { label: "Structural", color: "#4A90D9", types: ["FileNode", "CodeEntity", "PackageNode"] },
25
+ {
26
+ label: "Semantic",
27
+ color: "#5DB85D",
28
+ types: ["Decision", "Convention", "Bug", "Solution", "Concept"],
29
+ },
30
+ { label: "Community", color: "#9B59B6", types: ["Community"] },
31
+ { label: "Content", color: "#E67E22", types: ["ContentChunk"] },
32
+ { label: "Other", color: "#95A5A6", types: ["Dependency"] },
33
+ ];
34
+
35
+ const DEFAULT_COLOR = "#95A5A6";
36
+
37
+ function escapeHtml(s: string): string {
38
+ return s
39
+ .replace(/&/g, "&amp;")
40
+ .replace(/</g, "&lt;")
41
+ .replace(/>/g, "&gt;")
42
+ .replace(/"/g, "&quot;");
43
+ }
44
+
45
+ /**
46
+ * Generate a self-contained interactive graph explorer HTML page.
47
+ *
48
+ * Features beyond the base renderer:
49
+ * - Trust tier filter (checkboxes for tiers 1-4)
50
+ * - Community-based coloring (nodes carry a communityId)
51
+ * - Search highlighting
52
+ * - Click-to-expand placeholder (posts event to server)
53
+ * - Entity detail sidebar
54
+ */
55
+ export function generateGraphExplorerHtml(data: SubgraphData, opts?: { title?: string }): string {
56
+ const pageTitle = opts?.title ?? "SIA Graph Explorer";
57
+ const nodesJson = JSON.stringify(data.nodes);
58
+ const edgesJson = JSON.stringify(data.edges);
59
+ const typeColorsJson = JSON.stringify(TYPE_COLORS);
60
+
61
+ // Build legend HTML
62
+ const legendHtml = CATEGORY_LABELS.map(
63
+ (cat) =>
64
+ `<div class="legend-item">
65
+ <span class="legend-dot" style="background:${cat.color}"></span>
66
+ <span class="legend-label">${cat.label} (${cat.types.join(", ")})</span>
67
+ </div>`,
68
+ ).join("\n");
69
+
70
+ // Build type checkboxes
71
+ const allTypes = [...new Set(data.nodes.map((n) => n.type))].sort();
72
+ const filterCheckboxes = allTypes
73
+ .map(
74
+ (t) =>
75
+ `<label class="filter-checkbox">
76
+ <input type="checkbox" value="${t}" checked onchange="applyFilters()"> ${t}
77
+ </label>`,
78
+ )
79
+ .join("\n");
80
+
81
+ // Trust tier checkboxes
82
+ const tierCheckboxes = [1, 2, 3, 4]
83
+ .map(
84
+ (t) =>
85
+ `<label class="filter-checkbox">
86
+ <input type="checkbox" class="tier-cb" value="${t}" checked onchange="applyFilters()"> Tier ${t}
87
+ </label>`,
88
+ )
89
+ .join("\n");
90
+
91
+ return `<!DOCTYPE html>
92
+ <html lang="en">
93
+ <head>
94
+ <meta charset="UTF-8">
95
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
96
+ <title>${escapeHtml(pageTitle)}</title>
97
+ <style>
98
+ * { margin: 0; padding: 0; box-sizing: border-box; }
99
+ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; overflow: hidden; }
100
+ #graph-container { width: 100vw; height: 100vh; }
101
+ svg { width: 100%; height: 100%; }
102
+
103
+ /* Controls */
104
+ .controls { position: fixed; top: 16px; left: 16px; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
105
+ .search-box { padding: 8px 12px; border-radius: 6px; border: 1px solid #444; background: #2a2a4a; color: #e0e0e0; font-size: 14px; width: 260px; }
106
+ .search-box::placeholder { color: #888; }
107
+
108
+ /* Info panel */
109
+ .panel { position: fixed; top: 16px; right: 16px; z-index: 10; background: #2a2a4a; border: 1px solid #444; border-radius: 8px; padding: 16px; max-width: 340px; max-height: 80vh; overflow-y: auto; }
110
+ .panel h2 { font-size: 16px; margin-bottom: 8px; color: #fff; }
111
+ .panel h3 { font-size: 14px; margin-bottom: 4px; color: #ccc; }
112
+ .panel p { font-size: 12px; color: #aaa; margin-bottom: 4px; }
113
+ .panel .node-type { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 8px; }
114
+ .info-panel { display: none; }
115
+ .info-panel.visible { display: block; }
116
+ .expand-btn { margin-top: 8px; padding: 6px 12px; background: #e94560; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
117
+ .expand-btn:hover { background: #c73a52; }
118
+
119
+ /* Legend */
120
+ .legend { position: fixed; bottom: 16px; left: 16px; z-index: 10; background: #2a2a4a; border: 1px solid #444; border-radius: 8px; padding: 12px 16px; }
121
+ .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
122
+ .legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
123
+ .legend-label { font-size: 12px; color: #ccc; }
124
+
125
+ /* Filter panel */
126
+ .filter-panel { position: fixed; bottom: 16px; right: 16px; z-index: 10; background: #2a2a4a; border: 1px solid #444; border-radius: 8px; padding: 12px 16px; max-height: 50vh; overflow-y: auto; }
127
+ .filter-panel h3 { font-size: 13px; margin-bottom: 8px; color: #fff; }
128
+ .filter-checkbox { display: block; font-size: 12px; color: #ccc; margin-bottom: 4px; cursor: pointer; }
129
+ .filter-checkbox input { margin-right: 6px; }
130
+ .filter-section { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #333; }
131
+ .filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
132
+
133
+ /* Title bar */
134
+ .title-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
135
+ .stats { font-size: 11px; color: #888; text-align: center; margin-top: 2px; }
136
+
137
+ /* Graph elements */
138
+ line.edge { stroke-opacity: 0.4; }
139
+ line.edge:hover { stroke-opacity: 0.8; }
140
+ circle.node { cursor: pointer; stroke: #fff; stroke-width: 1.5; }
141
+ circle.node:hover { stroke-width: 3; }
142
+ circle.node.highlighted { stroke: #FFD700; stroke-width: 3; }
143
+ circle.node.dimmed { opacity: 0.15; }
144
+ circle.node.selected { stroke: #e94560; stroke-width: 3; }
145
+ line.edge.dimmed { opacity: 0.05; }
146
+ text.node-label { font-size: 10px; fill: #ccc; pointer-events: none; text-anchor: middle; }
147
+ text.node-label.dimmed { opacity: 0.1; }
148
+ </style>
149
+ </head>
150
+ <body>
151
+ <div class="title-bar">
152
+ <div>${escapeHtml(pageTitle)}</div>
153
+ <div class="stats" id="stats"></div>
154
+ </div>
155
+ <div class="controls">
156
+ <input type="text" class="search-box" id="search" placeholder="Search nodes by name..." oninput="onSearch(this.value)">
157
+ </div>
158
+ <div class="panel info-panel" id="info-panel">
159
+ <h2 id="info-name"></h2>
160
+ <span class="node-type" id="info-type"></span>
161
+ <p id="info-summary"></p>
162
+ <p><strong>Importance:</strong> <span id="info-importance"></span></p>
163
+ <p><strong>Trust Tier:</strong> <span id="info-trust"></span></p>
164
+ <p><strong>Community:</strong> <span id="info-community"></span></p>
165
+ <p><strong>ID:</strong> <span id="info-id" style="font-size:10px;word-break:break-all"></span></p>
166
+ <button class="expand-btn" id="expand-btn" onclick="expandNode()">Expand neighbors</button>
167
+ </div>
168
+ <div class="legend">
169
+ ${legendHtml}
170
+ </div>
171
+ <div class="filter-panel" id="filter-panel">
172
+ <div class="filter-section">
173
+ <h3>Filter by Type</h3>
174
+ ${filterCheckboxes}
175
+ </div>
176
+ <div class="filter-section">
177
+ <h3>Trust Tier</h3>
178
+ ${tierCheckboxes}
179
+ </div>
180
+ </div>
181
+ <div id="graph-container"></div>
182
+ <script src="https://d3js.org/d3.v7.min.js"></script>
183
+ <script>
184
+ (function() {
185
+ var rawNodes = ${nodesJson};
186
+ var rawEdges = ${edgesJson};
187
+ var typeColors = ${typeColorsJson};
188
+ var defaultColor = "${DEFAULT_COLOR}";
189
+
190
+ document.getElementById("stats").textContent =
191
+ rawNodes.length + " nodes, " + rawEdges.length + " edges";
192
+
193
+ // Assign communityId to nodes (use existing or derive from type)
194
+ var communityColors = d3.scaleOrdinal(d3.schemeTableau10);
195
+ var nodes = rawNodes.map(function(n) {
196
+ var copy = Object.assign({}, n);
197
+ copy.communityId = n.communityId || n.type;
198
+ return copy;
199
+ });
200
+ var edges = rawEdges.map(function(e) {
201
+ return Object.assign({}, e, { source: e.from_id, target: e.to_id });
202
+ });
203
+
204
+ var nodeById = new Map();
205
+ nodes.forEach(function(n) { nodeById.set(n.id, n); });
206
+ edges = edges.filter(function(e) { return nodeById.has(e.source) && nodeById.has(e.target); });
207
+
208
+ var width = window.innerWidth;
209
+ var height = window.innerHeight;
210
+ var selectedNode = null;
211
+
212
+ var svg = d3.select("#graph-container")
213
+ .append("svg")
214
+ .attr("width", width)
215
+ .attr("height", height);
216
+
217
+ var g = svg.append("g");
218
+
219
+ // Zoom
220
+ var zoom = d3.zoom()
221
+ .scaleExtent([0.1, 8])
222
+ .on("zoom", function(event) { g.attr("transform", event.transform); });
223
+ svg.call(zoom);
224
+
225
+ // Simulation
226
+ var simulation = d3.forceSimulation(nodes)
227
+ .force("link", d3.forceLink(edges).id(function(d) { return d.id; }).distance(80))
228
+ .force("charge", d3.forceManyBody().strength(-200))
229
+ .force("center", d3.forceCenter(width / 2, height / 2))
230
+ .force("collision", d3.forceCollide().radius(function(d) { return nodeRadius(d) + 2; }));
231
+
232
+ function nodeRadius(d) { return 5 + (d.importance || 0.5) * 15; }
233
+
234
+ function nodeColor(d) {
235
+ return typeColors[d.type] || defaultColor;
236
+ }
237
+
238
+ // Draw edges
239
+ var edgeElements = g.append("g").selectAll("line").data(edges).join("line")
240
+ .attr("class", "edge")
241
+ .attr("stroke", "#556")
242
+ .attr("stroke-width", function(d) { return Math.max(1, (d.weight || 1) * 2); });
243
+
244
+ // Draw nodes
245
+ var nodeElements = g.append("g").selectAll("circle").data(nodes).join("circle")
246
+ .attr("class", "node")
247
+ .attr("r", nodeRadius)
248
+ .attr("fill", nodeColor)
249
+ .on("click", function(event, d) { selectNode(d); })
250
+ .call(d3.drag()
251
+ .on("start", function(event, d) {
252
+ if (!event.active) simulation.alphaTarget(0.3).restart();
253
+ d.fx = d.x; d.fy = d.y;
254
+ })
255
+ .on("drag", function(event, d) { d.fx = event.x; d.fy = event.y; })
256
+ .on("end", function(event, d) {
257
+ if (!event.active) simulation.alphaTarget(0);
258
+ d.fx = null; d.fy = null;
259
+ }));
260
+
261
+ // Draw labels
262
+ var labelElements = g.append("g").selectAll("text").data(nodes).join("text")
263
+ .attr("class", "node-label")
264
+ .text(function(d) { return d.name.length > 20 ? d.name.slice(0, 18) + "..." : d.name; })
265
+ .attr("dy", function(d) { return nodeRadius(d) + 12; });
266
+
267
+ simulation.on("tick", function() {
268
+ edgeElements
269
+ .attr("x1", function(d) { return d.source.x; })
270
+ .attr("y1", function(d) { return d.source.y; })
271
+ .attr("x2", function(d) { return d.target.x; })
272
+ .attr("y2", function(d) { return d.target.y; });
273
+ nodeElements
274
+ .attr("cx", function(d) { return d.x; })
275
+ .attr("cy", function(d) { return d.y; });
276
+ labelElements
277
+ .attr("x", function(d) { return d.x; })
278
+ .attr("y", function(d) { return d.y; });
279
+ });
280
+
281
+ // Node selection + info panel
282
+ function selectNode(d) {
283
+ selectedNode = d;
284
+ nodeElements.classed("selected", function(n) { return n.id === d.id; });
285
+ var panel = document.getElementById("info-panel");
286
+ panel.classList.add("visible");
287
+ document.getElementById("info-name").textContent = d.name;
288
+ var typeEl = document.getElementById("info-type");
289
+ typeEl.textContent = d.type;
290
+ typeEl.style.background = nodeColor(d);
291
+ typeEl.style.color = "#fff";
292
+ document.getElementById("info-summary").textContent = d.summary || "(no summary)";
293
+ document.getElementById("info-importance").textContent = (d.importance || 0).toFixed(2);
294
+ document.getElementById("info-trust").textContent = "Tier " + (d.trustTier || "?");
295
+ document.getElementById("info-community").textContent = d.communityId || "—";
296
+ document.getElementById("info-id").textContent = d.id;
297
+ }
298
+
299
+ // Expand node — posts event to server for the CLI to handle
300
+ window.expandNode = function() {
301
+ if (!selectedNode) return;
302
+ fetch("/event", {
303
+ method: "POST",
304
+ body: JSON.stringify({ type: "expand", entityId: selectedNode.id, timestamp: Date.now() })
305
+ });
306
+ document.getElementById("expand-btn").textContent = "Expanding...";
307
+ setTimeout(function() {
308
+ document.getElementById("expand-btn").textContent = "Expand neighbors";
309
+ }, 2000);
310
+ };
311
+
312
+ // Search
313
+ window.onSearch = function(query) {
314
+ var q = query.toLowerCase().trim();
315
+ if (!q) {
316
+ nodeElements.classed("highlighted", false).classed("dimmed", false);
317
+ edgeElements.classed("dimmed", false);
318
+ labelElements.classed("dimmed", false);
319
+ return;
320
+ }
321
+ var matchIds = new Set();
322
+ nodes.forEach(function(n) {
323
+ if (n.name.toLowerCase().includes(q) || (n.summary || "").toLowerCase().includes(q)) matchIds.add(n.id);
324
+ });
325
+ nodeElements.classed("highlighted", function(d) { return matchIds.has(d.id); });
326
+ nodeElements.classed("dimmed", function(d) { return !matchIds.has(d.id); });
327
+ edgeElements.classed("dimmed", function(d) {
328
+ var sid = typeof d.source === "object" ? d.source.id : d.source;
329
+ var tid = typeof d.target === "object" ? d.target.id : d.target;
330
+ return !matchIds.has(sid) && !matchIds.has(tid);
331
+ });
332
+ labelElements.classed("dimmed", function(d) { return !matchIds.has(d.id); });
333
+ };
334
+
335
+ // Filter by type + trust tier
336
+ window.applyFilters = function() {
337
+ var typeCheckboxes = document.querySelectorAll(".filter-checkbox input:not(.tier-cb)");
338
+ var activeTypes = new Set();
339
+ typeCheckboxes.forEach(function(cb) { if (cb.checked) activeTypes.add(cb.value); });
340
+
341
+ var tierCheckboxes = document.querySelectorAll(".tier-cb");
342
+ var activeTiers = new Set();
343
+ tierCheckboxes.forEach(function(cb) { if (cb.checked) activeTiers.add(parseInt(cb.value)); });
344
+
345
+ nodeElements.style("display", function(d) {
346
+ return activeTypes.has(d.type) && activeTiers.has(d.trustTier || 3) ? null : "none";
347
+ });
348
+ labelElements.style("display", function(d) {
349
+ return activeTypes.has(d.type) && activeTiers.has(d.trustTier || 3) ? null : "none";
350
+ });
351
+ edgeElements.style("display", function(d) {
352
+ var sid = typeof d.source === "object" ? d.source.id : d.source;
353
+ var tid = typeof d.target === "object" ? d.target.id : d.target;
354
+ var sn = nodeById.get(sid);
355
+ var tn = nodeById.get(tid);
356
+ return (sn && activeTypes.has(sn.type) && activeTiers.has(sn.trustTier || 3)
357
+ && tn && activeTypes.has(tn.type) && activeTiers.has(tn.trustTier || 3)) ? null : "none";
358
+ });
359
+ };
360
+ })();
361
+ </script>
362
+ </body>
363
+ </html>`;
364
+ }
package/src/visualization/views/timeline.ts ADDED
@@ -0,0 +1,247 @@
1
+ // Module: timeline — Generate temporal timeline HTML visualization with D3.js
2
+ //
3
+ // Shows entities on a horizontal time axis with colored dots/bars by type.
4
+ // Invalidated entities appear as faded bars from created → invalidated.
5
+
6
+ export interface TimelineEvent {
7
+ id: string;
8
+ type: string;
9
+ name: string;
10
+ created_at: number;
11
+ invalidated_at?: number;
12
+ kind?: string;
13
+ }
14
+
15
+ const TYPE_COLORS: Record<string, string> = {
16
+ Decision: "#5DB85D",
17
+ Convention: "#5DB85D",
18
+ Bug: "#E74C3C",
19
+ Solution: "#2ECC71",
20
+ FileNode: "#4A90D9",
21
+ CodeEntity: "#4A90D9",
22
+ Community: "#9B59B6",
23
+ Concept: "#5DB85D",
24
+ ContentChunk: "#E67E22",
25
+ };
26
+
27
+ const DEFAULT_COLOR = "#95A5A6";
28
+
29
+ function escapeHtml(s: string): string {
30
+ return s
31
+ .replace(/&/g, "&amp;")
32
+ .replace(/</g, "&lt;")
33
+ .replace(/>/g, "&gt;")
34
+ .replace(/"/g, "&quot;");
35
+ }
36
+
37
+ /**
38
+ * Generate a self-contained HTML page with a temporal timeline of events.
39
+ */
40
+ export function generateTimelineHtml(
41
+ events: TimelineEvent[],
42
+ opts?: { title?: string; since?: number },
43
+ ): string {
44
+ const pageTitle = opts?.title ?? "SIA Timeline";
45
+ const eventsJson = JSON.stringify(events);
46
+ const typeColorsJson = JSON.stringify(TYPE_COLORS);
47
+
48
+ return `<!DOCTYPE html>
49
+ <html lang="en">
50
+ <head>
51
+ <meta charset="UTF-8">
52
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
53
+ <title>${escapeHtml(pageTitle)}</title>
54
+ <style>
55
+ * { margin: 0; padding: 0; box-sizing: border-box; }
56
+ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; overflow: hidden; }
57
+ #timeline-container { width: 100vw; height: 100vh; }
58
+ svg { width: 100%; height: 100%; }
59
+ .title-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
60
+ .stats { font-size: 11px; color: #888; text-align: center; margin-top: 2px; }
61
+ .tooltip { position: absolute; background: #2a2a4a; border: 1px solid #444; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #e0e0e0; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 20; max-width: 300px; }
62
+ .tooltip .tt-name { font-weight: 600; color: #fff; margin-bottom: 4px; }
63
+ .tooltip .tt-type { font-size: 11px; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-bottom: 4px; }
64
+ .tooltip .tt-date { font-size: 11px; color: #888; }
65
+ .legend { position: fixed; bottom: 16px; left: 16px; z-index: 10; background: #2a2a4a; border: 1px solid #444; border-radius: 8px; padding: 12px 16px; }
66
+ .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
67
+ .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
68
+ .legend-label { font-size: 11px; color: #ccc; }
69
+ .axis text { fill: #888; font-size: 11px; }
70
+ .axis line, .axis path { stroke: #444; }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="title-bar">
75
+ <div>${escapeHtml(pageTitle)}</div>
76
+ <div class="stats" id="stats"></div>
77
+ </div>
78
+ <div class="tooltip" id="tooltip"></div>
79
+ <div class="legend" id="legend"></div>
80
+ <div id="timeline-container"></div>
81
+ <script src="https://d3js.org/d3.v7.min.js"></script>
82
+ <script>
83
+ (function() {
84
+ var events = ${eventsJson};
85
+ var typeColors = ${typeColorsJson};
86
+ var defaultColor = "${DEFAULT_COLOR}";
87
+
88
+ document.getElementById("stats").textContent = events.length + " events";
89
+
90
+ // Build legend from unique types using safe DOM methods
91
+ var types = [...new Set(events.map(function(e) { return e.type; }))].sort();
92
+ var legendEl = document.getElementById("legend");
93
+ types.forEach(function(t) {
94
+ var item = document.createElement("div");
95
+ item.className = "legend-item";
96
+ var dot = document.createElement("span");
97
+ dot.className = "legend-dot";
98
+ dot.style.background = typeColors[t] || defaultColor;
99
+ var label = document.createElement("span");
100
+ label.className = "legend-label";
101
+ label.textContent = t;
102
+ item.appendChild(dot);
103
+ item.appendChild(label);
104
+ legendEl.appendChild(item);
105
+ });
106
+
107
+ var width = window.innerWidth;
108
+ var height = window.innerHeight;
109
+ var margin = { top: 80, right: 40, bottom: 60, left: 40 };
110
+ var innerW = width - margin.left - margin.right;
111
+ var innerH = height - margin.top - margin.bottom;
112
+
113
+ var svg = d3.select("#timeline-container")
114
+ .append("svg")
115
+ .attr("width", width)
116
+ .attr("height", height);
117
+
118
+ var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
119
+
120
+ // Time scale
121
+ var allTimes = [];
122
+ events.forEach(function(e) {
123
+ allTimes.push(e.created_at);
124
+ if (e.invalidated_at) allTimes.push(e.invalidated_at);
125
+ });
126
+ if (allTimes.length === 0) allTimes = [Date.now() - 86400000, Date.now()];
127
+
128
+ var xScale = d3.scaleTime()
129
+ .domain([d3.min(allTimes), d3.max(allTimes)])
130
+ .range([0, innerW])
131
+ .nice();
132
+
133
+ // Y positions: spread events vertically by type
134
+ var typeIndex = {};
135
+ types.forEach(function(t, i) { typeIndex[t] = i; });
136
+ var yBand = innerH / Math.max(types.length, 1);
137
+
138
+ // X axis
139
+ g.append("g")
140
+ .attr("class", "axis")
141
+ .attr("transform", "translate(0," + innerH + ")")
142
+ .call(d3.axisBottom(xScale).ticks(8));
143
+
144
+ // Zoom
145
+ var zoomG = g.append("g");
146
+ var zoom = d3.zoom()
147
+ .scaleExtent([0.5, 20])
148
+ .translateExtent([[-100, -100], [innerW + 100, innerH + 100]])
149
+ .on("zoom", function(event) {
150
+ var newX = event.transform.rescaleX(xScale);
151
+ zoomG.selectAll(".event-bar")
152
+ .attr("x", function(d) { return newX(d.created_at); })
153
+ .attr("width", function(d) {
154
+ return d.invalidated_at ? Math.max(2, newX(d.invalidated_at) - newX(d.created_at)) : 0;
155
+ });
156
+ zoomG.selectAll(".event-dot")
157
+ .attr("cx", function(d) { return newX(d.created_at); });
158
+ zoomG.selectAll(".event-label")
159
+ .attr("x", function(d) { return newX(d.created_at) + 8; });
160
+ g.select(".axis").call(d3.axisBottom(newX).ticks(8));
161
+ });
162
+ svg.call(zoom);
163
+
164
+ var tooltipEl = document.getElementById("tooltip");
165
+
166
+ function showTooltip(event, d) {
167
+ var created = new Date(d.created_at).toLocaleDateString();
168
+ // Build tooltip content safely using DOM methods
169
+ tooltipEl.textContent = "";
170
+ var nameDiv = document.createElement("div");
171
+ nameDiv.className = "tt-name";
172
+ nameDiv.textContent = d.name;
173
+ tooltipEl.appendChild(nameDiv);
174
+
175
+ var typeSpan = document.createElement("span");
176
+ typeSpan.className = "tt-type";
177
+ typeSpan.style.background = typeColors[d.type] || defaultColor;
178
+ typeSpan.style.color = "#fff";
179
+ typeSpan.textContent = d.type;
180
+ tooltipEl.appendChild(typeSpan);
181
+
182
+ var dateDiv = document.createElement("div");
183
+ dateDiv.className = "tt-date";
184
+ dateDiv.textContent = "Created: " + created;
185
+ tooltipEl.appendChild(dateDiv);
186
+
187
+ if (d.invalidated_at) {
188
+ var invDiv = document.createElement("div");
189
+ invDiv.className = "tt-date";
190
+ invDiv.style.color = "#E74C3C";
191
+ invDiv.textContent = "Invalidated: " + new Date(d.invalidated_at).toLocaleDateString();
192
+ tooltipEl.appendChild(invDiv);
193
+ }
194
+
195
+ tooltipEl.style.opacity = 1;
196
+ tooltipEl.style.left = (event.pageX + 12) + "px";
197
+ tooltipEl.style.top = (event.pageY - 10) + "px";
198
+ }
199
+
200
+ function hideTooltip() { tooltipEl.style.opacity = 0; }
201
+
202
+ // Draw invalidated bars (faded)
203
+ zoomG.selectAll(".event-bar")
204
+ .data(events.filter(function(e) { return !!e.invalidated_at; }))
205
+ .join("rect")
206
+ .attr("class", "event-bar")
207
+ .attr("x", function(d) { return xScale(d.created_at); })
208
+ .attr("y", function(d) { return (typeIndex[d.type] || 0) * yBand + yBand * 0.3; })
209
+ .attr("width", function(d) { return Math.max(2, xScale(d.invalidated_at) - xScale(d.created_at)); })
210
+ .attr("height", yBand * 0.4)
211
+ .attr("rx", 3)
212
+ .attr("fill", function(d) { return typeColors[d.type] || defaultColor; })
213
+ .attr("opacity", 0.25)
214
+ .on("mouseover", showTooltip)
215
+ .on("mouseout", hideTooltip);
216
+
217
+ // Draw event dots
218
+ zoomG.selectAll(".event-dot")
219
+ .data(events)
220
+ .join("circle")
221
+ .attr("class", "event-dot")
222
+ .attr("cx", function(d) { return xScale(d.created_at); })
223
+ .attr("cy", function(d) { return (typeIndex[d.type] || 0) * yBand + yBand * 0.5; })
224
+ .attr("r", 6)
225
+ .attr("fill", function(d) { return typeColors[d.type] || defaultColor; })
226
+ .attr("stroke", "#fff")
227
+ .attr("stroke-width", 1.5)
228
+ .attr("opacity", function(d) { return d.invalidated_at ? 0.4 : 1; })
229
+ .attr("cursor", "pointer")
230
+ .on("mouseover", showTooltip)
231
+ .on("mouseout", hideTooltip);
232
+
233
+ // Draw labels
234
+ zoomG.selectAll(".event-label")
235
+ .data(events)
236
+ .join("text")
237
+ .attr("class", "event-label")
238
+ .attr("x", function(d) { return xScale(d.created_at) + 8; })
239
+ .attr("y", function(d) { return (typeIndex[d.type] || 0) * yBand + yBand * 0.55; })
240
+ .attr("fill", function(d) { return d.invalidated_at ? "#666" : "#ccc"; })
241
+ .attr("font-size", "10px")
242
+ .text(function(d) { return d.name.length > 25 ? d.name.slice(0, 23) + "..." : d.name; });
243
+ })();
244
+ </script>
245
+ </body>
246
+ </html>`;
247
+ }