@assistant-ui/mcp-docs-server 0.2.3 → 0.3.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 (452) hide show
  1. package/README.md +16 -43
  2. package/dist/index.d.ts +2 -3
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +3 -91
  5. package/dist/index.js.map +1 -1
  6. package/dist/proxy.d.ts +9 -0
  7. package/dist/proxy.d.ts.map +1 -0
  8. package/dist/proxy.js +76 -0
  9. package/dist/proxy.js.map +1 -0
  10. package/package.json +8 -12
  11. package/src/index.ts +3 -115
  12. package/src/proxy.test.ts +250 -0
  13. package/src/proxy.ts +111 -0
  14. package/.docs/organized/code-examples/waterfall.md +0 -807
  15. package/.docs/organized/code-examples/with-a2a.md +0 -675
  16. package/.docs/organized/code-examples/with-ag-ui.md +0 -553
  17. package/.docs/organized/code-examples/with-ai-sdk-v7.md +0 -466
  18. package/.docs/organized/code-examples/with-artifacts.md +0 -815
  19. package/.docs/organized/code-examples/with-assistant-transport.md +0 -576
  20. package/.docs/organized/code-examples/with-browser-extension.md +0 -371
  21. package/.docs/organized/code-examples/with-chain-of-thought.md +0 -962
  22. package/.docs/organized/code-examples/with-cloud-standalone.md +0 -681
  23. package/.docs/organized/code-examples/with-cloud.md +0 -439
  24. package/.docs/organized/code-examples/with-custom-thread-list.md +0 -569
  25. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +0 -527
  26. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +0 -697
  27. package/.docs/organized/code-examples/with-eve.md +0 -405
  28. package/.docs/organized/code-examples/with-expo.md +0 -2246
  29. package/.docs/organized/code-examples/with-external-store.md +0 -421
  30. package/.docs/organized/code-examples/with-ffmpeg.md +0 -829
  31. package/.docs/organized/code-examples/with-generative-ui.md +0 -1810
  32. package/.docs/organized/code-examples/with-google-adk.md +0 -368
  33. package/.docs/organized/code-examples/with-heat-graph.md +0 -304
  34. package/.docs/organized/code-examples/with-image-generation.md +0 -463
  35. package/.docs/organized/code-examples/with-interactables.md +0 -733
  36. package/.docs/organized/code-examples/with-langchain.md +0 -446
  37. package/.docs/organized/code-examples/with-langgraph.md +0 -855
  38. package/.docs/organized/code-examples/with-livekit.md +0 -643
  39. package/.docs/organized/code-examples/with-mcp.md +0 -782
  40. package/.docs/organized/code-examples/with-nuxt.md +0 -2428
  41. package/.docs/organized/code-examples/with-opencode.md +0 -1974
  42. package/.docs/organized/code-examples/with-openui.md +0 -450
  43. package/.docs/organized/code-examples/with-pi.md +0 -2084
  44. package/.docs/organized/code-examples/with-react-hook-form.md +0 -727
  45. package/.docs/organized/code-examples/with-react-ink-web.md +0 -740
  46. package/.docs/organized/code-examples/with-react-ink.md +0 -473
  47. package/.docs/organized/code-examples/with-react-router.md +0 -936
  48. package/.docs/organized/code-examples/with-resumable-stream.md +0 -668
  49. package/.docs/organized/code-examples/with-store.md +0 -679
  50. package/.docs/organized/code-examples/with-svelte.md +0 -415
  51. package/.docs/organized/code-examples/with-sveltekit.md +0 -1061
  52. package/.docs/organized/code-examples/with-tanstack.md +0 -812
  53. package/.docs/organized/code-examples/with-tap-runtime.md +0 -813
  54. package/.docs/organized/code-examples/with-virtualized-thread.md +0 -681
  55. package/.docs/organized/code-examples/with-vue.md +0 -408
  56. package/.docs/raw/docs/(getting-started)/architecture.mdx +0 -146
  57. package/.docs/raw/docs/(getting-started)/base-ui.mdx +0 -39
  58. package/.docs/raw/docs/(getting-started)/cli.mdx +0 -542
  59. package/.docs/raw/docs/(getting-started)/devtools.mdx +0 -79
  60. package/.docs/raw/docs/(getting-started)/index.mdx +0 -23
  61. package/.docs/raw/docs/(getting-started)/installation.mdx +0 -483
  62. package/.docs/raw/docs/(getting-started)/llm.mdx +0 -211
  63. package/.docs/raw/docs/(getting-started)/rtl.mdx +0 -78
  64. package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +0 -36
  65. package/.docs/raw/docs/(reference)/api-reference/adapters/feedback.mdx +0 -20
  66. package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +0 -34
  67. package/.docs/raw/docs/(reference)/api-reference/adapters/model.mdx +0 -44
  68. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +0 -59
  69. package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +0 -20
  70. package/.docs/raw/docs/(reference)/api-reference/adapters/suggestions.mdx +0 -26
  71. package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx +0 -84
  72. package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +0 -22
  73. package/.docs/raw/docs/(reference)/api-reference/context-providers/scoped-providers.mdx +0 -64
  74. package/.docs/raw/docs/(reference)/api-reference/external-store/index.mdx +0 -22
  75. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +0 -57
  76. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +0 -49
  77. package/.docs/raw/docs/(reference)/api-reference/generative-ui/a2ui.mdx +0 -40
  78. package/.docs/raw/docs/(reference)/api-reference/generative-ui/actions.mdx +0 -56
  79. package/.docs/raw/docs/(reference)/api-reference/generative-ui/components.mdx +0 -86
  80. package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +0 -39
  81. package/.docs/raw/docs/(reference)/api-reference/generative-ui/json-generative-ui.mdx +0 -42
  82. package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +0 -84
  83. package/.docs/raw/docs/(reference)/api-reference/generative-ui/slack.mdx +0 -85
  84. package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +0 -45
  85. package/.docs/raw/docs/(reference)/api-reference/generative-ui/teams.mdx +0 -93
  86. package/.docs/raw/docs/(reference)/api-reference/generative-ui/tokens.mdx +0 -62
  87. package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +0 -129
  88. package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +0 -31
  89. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +0 -34
  90. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +0 -350
  91. package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +0 -28
  92. package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +0 -97
  93. package/.docs/raw/docs/(reference)/api-reference/integrations/ai-sdk.mdx +0 -200
  94. package/.docs/raw/docs/(reference)/api-reference/integrations/cloud-ai-sdk.mdx +0 -24
  95. package/.docs/raw/docs/(reference)/api-reference/integrations/eve.mdx +0 -118
  96. package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +0 -28
  97. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +0 -37
  98. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +0 -50
  99. package/.docs/raw/docs/(reference)/api-reference/model-context/index.mdx +0 -22
  100. package/.docs/raw/docs/(reference)/api-reference/model-context/registry.mdx +0 -20
  101. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +0 -566
  102. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx +0 -152
  103. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +0 -239
  104. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +0 -208
  105. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +0 -108
  106. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +0 -99
  107. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +0 -145
  108. package/.docs/raw/docs/(reference)/api-reference/primitives/chain-of-thought.mdx +0 -82
  109. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +0 -637
  110. package/.docs/raw/docs/(reference)/api-reference/primitives/composition.mdx +0 -22
  111. package/.docs/raw/docs/(reference)/api-reference/primitives/error.mdx +0 -65
  112. package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +0 -73
  113. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +0 -117
  114. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +0 -339
  115. package/.docs/raw/docs/(reference)/api-reference/primitives/queue-item.mdx +0 -77
  116. package/.docs/raw/docs/(reference)/api-reference/primitives/selection-toolbar.mdx +0 -88
  117. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +0 -81
  118. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item-more.mdx +0 -129
  119. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +0 -138
  120. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +0 -122
  121. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +0 -289
  122. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +0 -20
  123. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +0 -24
  124. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +0 -32
  125. package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +0 -43
  126. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +0 -43
  127. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +0 -24
  128. package/.docs/raw/docs/(reference)/api-reference/runtimes/queue-state.mdx +0 -20
  129. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +0 -24
  130. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +0 -24
  131. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +0 -36
  132. package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +0 -85
  133. package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +0 -45
  134. package/.docs/raw/docs/(reference)/api-reference/tools/interactables-legacy.mdx +0 -55
  135. package/.docs/raw/docs/(reference)/api-reference/tools/interactables.mdx +0 -151
  136. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +0 -106
  137. package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +0 -62
  138. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +0 -178
  139. package/.docs/raw/docs/(reference)/api-reference/transport/assistant-transport.mdx +0 -48
  140. package/.docs/raw/docs/(reference)/api-reference/transport/frame.mdx +0 -62
  141. package/.docs/raw/docs/(reference)/api-reference/transport/index.mdx +0 -22
  142. package/.docs/raw/docs/(reference)/api-reference/utilities/index.mdx +0 -19
  143. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +0 -152
  144. package/.docs/raw/docs/(reference)/api-reference/voice/index.mdx +0 -22
  145. package/.docs/raw/docs/(reference)/api-reference/voice/session.mdx +0 -54
  146. package/.docs/raw/docs/(reference)/api-reference/voice/speech-dictation.mdx +0 -36
  147. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +0 -527
  148. package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -604
  149. package/.docs/raw/docs/cloud/authorization.mdx +0 -252
  150. package/.docs/raw/docs/cloud/index.mdx +0 -46
  151. package/.docs/raw/docs/cloud/langgraph.mdx +0 -554
  152. package/.docs/raw/docs/copilots/assistant-frame.mdx +0 -411
  153. package/.docs/raw/docs/copilots/make-assistant-visible.mdx +0 -82
  154. package/.docs/raw/docs/copilots/model-context.mdx +0 -156
  155. package/.docs/raw/docs/copilots/motivation.mdx +0 -202
  156. package/.docs/raw/docs/copilots/use-assistant-instructions.mdx +0 -64
  157. package/.docs/raw/docs/guides/attachments.mdx +0 -619
  158. package/.docs/raw/docs/guides/branching.mdx +0 -76
  159. package/.docs/raw/docs/guides/chain-of-thought.mdx +0 -164
  160. package/.docs/raw/docs/guides/chatgpt-subscription.mdx +0 -108
  161. package/.docs/raw/docs/guides/context-api.mdx +0 -619
  162. package/.docs/raw/docs/guides/dictation.mdx +0 -298
  163. package/.docs/raw/docs/guides/editing.mdx +0 -102
  164. package/.docs/raw/docs/guides/electron.mdx +0 -369
  165. package/.docs/raw/docs/guides/headless-composer-input.mdx +0 -113
  166. package/.docs/raw/docs/guides/image-generation.mdx +0 -74
  167. package/.docs/raw/docs/guides/index.mdx +0 -117
  168. package/.docs/raw/docs/guides/input-history.mdx +0 -55
  169. package/.docs/raw/docs/guides/latex.mdx +0 -158
  170. package/.docs/raw/docs/guides/mentions.mdx +0 -575
  171. package/.docs/raw/docs/guides/message-timing.mdx +0 -215
  172. package/.docs/raw/docs/guides/quoting.mdx +0 -169
  173. package/.docs/raw/docs/guides/resumable-stream-deployment.mdx +0 -212
  174. package/.docs/raw/docs/guides/resumable-stream-stores.mdx +0 -152
  175. package/.docs/raw/docs/guides/resumable-streams.mdx +0 -292
  176. package/.docs/raw/docs/guides/slash-commands.mdx +0 -358
  177. package/.docs/raw/docs/guides/speech.mdx +0 -172
  178. package/.docs/raw/docs/guides/suggestions.mdx +0 -384
  179. package/.docs/raw/docs/guides/virtualization.mdx +0 -133
  180. package/.docs/raw/docs/guides/voice.mdx +0 -310
  181. package/.docs/raw/docs/ink/adapters.mdx +0 -99
  182. package/.docs/raw/docs/ink/custom-backend.mdx +0 -254
  183. package/.docs/raw/docs/ink/hooks.mdx +0 -469
  184. package/.docs/raw/docs/ink/index.mdx +0 -237
  185. package/.docs/raw/docs/ink/migration.mdx +0 -138
  186. package/.docs/raw/docs/ink/primitives.mdx +0 -1259
  187. package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +0 -528
  188. package/.docs/raw/docs/integrations/auth/better-auth.mdx +0 -188
  189. package/.docs/raw/docs/integrations/auth/clerk.mdx +0 -166
  190. package/.docs/raw/docs/integrations/auth/next-auth.mdx +0 -191
  191. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +0 -88
  192. package/.docs/raw/docs/integrations/frameworks/cloudflare-agents.mdx +0 -283
  193. package/.docs/raw/docs/integrations/frameworks/mastra/full-stack.mdx +0 -188
  194. package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +0 -57
  195. package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +0 -201
  196. package/.docs/raw/docs/integrations/gateways/index.mdx +0 -162
  197. package/.docs/raw/docs/integrations/index.mdx +0 -178
  198. package/.docs/raw/docs/integrations/observability/helicone.mdx +0 -129
  199. package/.docs/raw/docs/integrations/observability/langfuse.mdx +0 -161
  200. package/.docs/raw/docs/integrations/observability/langsmith.mdx +0 -151
  201. package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +0 -773
  202. package/.docs/raw/docs/migrations/deprecation-policy.mdx +0 -42
  203. package/.docs/raw/docs/migrations/index.mdx +0 -50
  204. package/.docs/raw/docs/migrations/react-compatibility.mdx +0 -74
  205. package/.docs/raw/docs/migrations/react-langgraph-v0-7.mdx +0 -328
  206. package/.docs/raw/docs/migrations/toolkit-tools.mdx +0 -236
  207. package/.docs/raw/docs/migrations/v0-11.mdx +0 -172
  208. package/.docs/raw/docs/migrations/v0-12.mdx +0 -302
  209. package/.docs/raw/docs/migrations/v0-14.mdx +0 -297
  210. package/.docs/raw/docs/migrations/v0-15.mdx +0 -270
  211. package/.docs/raw/docs/primitives/action-bar.mdx +0 -352
  212. package/.docs/raw/docs/primitives/assistant-modal.mdx +0 -216
  213. package/.docs/raw/docs/primitives/attachment.mdx +0 -217
  214. package/.docs/raw/docs/primitives/branch-picker.mdx +0 -222
  215. package/.docs/raw/docs/primitives/chain-of-thought.mdx +0 -315
  216. package/.docs/raw/docs/primitives/composer.mdx +0 -659
  217. package/.docs/raw/docs/primitives/error.mdx +0 -142
  218. package/.docs/raw/docs/primitives/index.mdx +0 -99
  219. package/.docs/raw/docs/primitives/message.mdx +0 -618
  220. package/.docs/raw/docs/primitives/selection-toolbar.mdx +0 -191
  221. package/.docs/raw/docs/primitives/suggestion.mdx +0 -254
  222. package/.docs/raw/docs/primitives/thread-list.mdx +0 -467
  223. package/.docs/raw/docs/primitives/thread.mdx +0 -509
  224. package/.docs/raw/docs/react-native/adapters.mdx +0 -94
  225. package/.docs/raw/docs/react-native/custom-backend.mdx +0 -207
  226. package/.docs/raw/docs/react-native/hooks.mdx +0 -339
  227. package/.docs/raw/docs/react-native/index.mdx +0 -289
  228. package/.docs/raw/docs/react-native/migration.mdx +0 -142
  229. package/.docs/raw/docs/react-native/primitives.mdx +0 -976
  230. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +0 -399
  231. package/.docs/raw/docs/runtimes/a2a/overview.mdx +0 -60
  232. package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +0 -216
  233. package/.docs/raw/docs/runtimes/ag-ui/agent-state.mdx +0 -124
  234. package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +0 -70
  235. package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +0 -243
  236. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +0 -267
  237. package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +0 -61
  238. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +0 -122
  239. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +0 -135
  240. package/.docs/raw/docs/runtimes/ai-sdk/v6-legacy.mdx +0 -636
  241. package/.docs/raw/docs/runtimes/ai-sdk/v7.mdx +0 -731
  242. package/.docs/raw/docs/runtimes/claude-managed-agents.mdx +0 -118
  243. package/.docs/raw/docs/runtimes/concepts/adapters.mdx +0 -265
  244. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +0 -167
  245. package/.docs/raw/docs/runtimes/concepts/stability.mdx +0 -68
  246. package/.docs/raw/docs/runtimes/concepts/threads.mdx +0 -513
  247. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +0 -763
  248. package/.docs/raw/docs/runtimes/custom/data-stream.mdx +0 -339
  249. package/.docs/raw/docs/runtimes/custom/external-store.mdx +0 -957
  250. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +0 -902
  251. package/.docs/raw/docs/runtimes/custom/overview.mdx +0 -71
  252. package/.docs/raw/docs/runtimes/eve/overview.mdx +0 -151
  253. package/.docs/raw/docs/runtimes/eve/quickstart.mdx +0 -192
  254. package/.docs/raw/docs/runtimes/google-adk/api.mdx +0 -256
  255. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +0 -784
  256. package/.docs/raw/docs/runtimes/google-adk/overview.mdx +0 -69
  257. package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +0 -229
  258. package/.docs/raw/docs/runtimes/langchain.mdx +0 -901
  259. package/.docs/raw/docs/runtimes/langgraph/agent-state.mdx +0 -181
  260. package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +0 -305
  261. package/.docs/raw/docs/runtimes/langgraph/interrupts.mdx +0 -104
  262. package/.docs/raw/docs/runtimes/langgraph/overview.mdx +0 -84
  263. package/.docs/raw/docs/runtimes/langgraph/quickstart.mdx +0 -496
  264. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +0 -144
  265. package/.docs/raw/docs/runtimes/langgraph/threads.mdx +0 -113
  266. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +0 -29
  267. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +0 -93
  268. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +0 -347
  269. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +0 -393
  270. package/.docs/raw/docs/runtimes/opencode/hooks.mdx +0 -194
  271. package/.docs/raw/docs/runtimes/opencode/overview.mdx +0 -58
  272. package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +0 -119
  273. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +0 -133
  274. package/.docs/raw/docs/tools/a2ui.mdx +0 -107
  275. package/.docs/raw/docs/tools/backend.mdx +0 -147
  276. package/.docs/raw/docs/tools/defining-tools.mdx +0 -574
  277. package/.docs/raw/docs/tools/dynamic-tools.mdx +0 -112
  278. package/.docs/raw/docs/tools/generative-ui-primitive.mdx +0 -180
  279. package/.docs/raw/docs/tools/generative-ui-slack.mdx +0 -167
  280. package/.docs/raw/docs/tools/generative-ui-teams.mdx +0 -160
  281. package/.docs/raw/docs/tools/generative-ui.mdx +0 -322
  282. package/.docs/raw/docs/tools/index.mdx +0 -72
  283. package/.docs/raw/docs/tools/interactables.mdx +0 -1084
  284. package/.docs/raw/docs/tools/mcp-apps.mdx +0 -363
  285. package/.docs/raw/docs/tools/mcp.mdx +0 -466
  286. package/.docs/raw/docs/tools/multi-agent.mdx +0 -237
  287. package/.docs/raw/docs/tools/openui.mdx +0 -175
  288. package/.docs/raw/docs/tools/tool-ui.mdx +0 -1020
  289. package/.docs/raw/docs/tools/user-managed-mcp.mdx +0 -428
  290. package/.docs/raw/docs/ui/assistant-modal.mdx +0 -166
  291. package/.docs/raw/docs/ui/assistant-sidebar.mdx +0 -89
  292. package/.docs/raw/docs/ui/attachment.mdx +0 -279
  293. package/.docs/raw/docs/ui/composer-trigger-popover.mdx +0 -247
  294. package/.docs/raw/docs/ui/context-display.mdx +0 -148
  295. package/.docs/raw/docs/ui/directive-text.mdx +0 -114
  296. package/.docs/raw/docs/ui/file.mdx +0 -159
  297. package/.docs/raw/docs/ui/follow-up-suggestions.mdx +0 -82
  298. package/.docs/raw/docs/ui/image.mdx +0 -102
  299. package/.docs/raw/docs/ui/markdown.mdx +0 -103
  300. package/.docs/raw/docs/ui/mcp-config.mdx +0 -107
  301. package/.docs/raw/docs/ui/mermaid.mdx +0 -92
  302. package/.docs/raw/docs/ui/message-timing.mdx +0 -93
  303. package/.docs/raw/docs/ui/model-selector.mdx +0 -455
  304. package/.docs/raw/docs/ui/part-grouping.mdx +0 -614
  305. package/.docs/raw/docs/ui/quote.mdx +0 -211
  306. package/.docs/raw/docs/ui/reasoning.mdx +0 -214
  307. package/.docs/raw/docs/ui/scrollbar.mdx +0 -77
  308. package/.docs/raw/docs/ui/sources.mdx +0 -186
  309. package/.docs/raw/docs/ui/streamdown.mdx +0 -392
  310. package/.docs/raw/docs/ui/syntax-highlighting.mdx +0 -205
  311. package/.docs/raw/docs/ui/thread-list.mdx +0 -411
  312. package/.docs/raw/docs/ui/thread.mdx +0 -559
  313. package/.docs/raw/docs/ui/tool-fallback.mdx +0 -141
  314. package/.docs/raw/docs/ui/tool-group.mdx +0 -240
  315. package/.docs/raw/docs/ui/voice.mdx +0 -173
  316. package/.docs/raw/docs/utilities/heat-graph.mdx +0 -237
  317. package/.docs/raw/docs/utilities/react-o11y.mdx +0 -362
  318. package/.docs/raw/docs/utilities/tw-shimmer.mdx +0 -212
  319. package/dist/constants.d.ts +0 -14
  320. package/dist/constants.d.ts.map +0 -1
  321. package/dist/constants.js +0 -19
  322. package/dist/constants.js.map +0 -1
  323. package/dist/prepare-docs/code-examples.d.ts +0 -5
  324. package/dist/prepare-docs/code-examples.d.ts.map +0 -1
  325. package/dist/prepare-docs/code-examples.js +0 -117
  326. package/dist/prepare-docs/code-examples.js.map +0 -1
  327. package/dist/prepare-docs/copy-raw.d.ts +0 -5
  328. package/dist/prepare-docs/copy-raw.d.ts.map +0 -1
  329. package/dist/prepare-docs/copy-raw.js +0 -49
  330. package/dist/prepare-docs/copy-raw.js.map +0 -1
  331. package/dist/prepare-docs/prepare.d.ts +0 -1
  332. package/dist/prepare-docs/prepare.js +0 -22
  333. package/dist/prepare-docs/prepare.js.map +0 -1
  334. package/dist/prompts/xulux-playground.d.ts +0 -12
  335. package/dist/prompts/xulux-playground.d.ts.map +0 -1
  336. package/dist/prompts/xulux-playground.js +0 -33
  337. package/dist/prompts/xulux-playground.js.map +0 -1
  338. package/dist/tools/docs.d.ts +0 -22
  339. package/dist/tools/docs.d.ts.map +0 -1
  340. package/dist/tools/docs.js +0 -177
  341. package/dist/tools/docs.js.map +0 -1
  342. package/dist/tools/examples.d.ts +0 -24
  343. package/dist/tools/examples.d.ts.map +0 -1
  344. package/dist/tools/examples.js +0 -87
  345. package/dist/tools/examples.js.map +0 -1
  346. package/dist/tools/resources.d.ts +0 -6
  347. package/dist/tools/resources.d.ts.map +0 -1
  348. package/dist/tools/resources.js +0 -75
  349. package/dist/tools/resources.js.map +0 -1
  350. package/dist/tools/search.d.ts +0 -24
  351. package/dist/tools/search.d.ts.map +0 -1
  352. package/dist/tools/search.js +0 -39
  353. package/dist/tools/search.js.map +0 -1
  354. package/dist/tools/tests/mcp-test-client.d.ts +0 -15
  355. package/dist/tools/tests/mcp-test-client.d.ts.map +0 -1
  356. package/dist/tools/tests/mcp-test-client.js +0 -68
  357. package/dist/tools/tests/mcp-test-client.js.map +0 -1
  358. package/dist/tools/tests/test-setup.d.ts +0 -7
  359. package/dist/tools/tests/test-setup.d.ts.map +0 -1
  360. package/dist/tools/tests/test-setup.js +0 -36
  361. package/dist/tools/tests/test-setup.js.map +0 -1
  362. package/dist/tools/xulux-templates.d.ts +0 -58
  363. package/dist/tools/xulux-templates.d.ts.map +0 -1
  364. package/dist/tools/xulux-templates.js +0 -84
  365. package/dist/tools/xulux-templates.js.map +0 -1
  366. package/dist/utils/cache.d.ts +0 -5
  367. package/dist/utils/cache.d.ts.map +0 -1
  368. package/dist/utils/cache.js +0 -18
  369. package/dist/utils/cache.js.map +0 -1
  370. package/dist/utils/logger.d.ts +0 -10
  371. package/dist/utils/logger.d.ts.map +0 -1
  372. package/dist/utils/logger.js +0 -20
  373. package/dist/utils/logger.js.map +0 -1
  374. package/dist/utils/mcp-format.d.ts +0 -11
  375. package/dist/utils/mcp-format.d.ts.map +0 -1
  376. package/dist/utils/mcp-format.js +0 -14
  377. package/dist/utils/mcp-format.js.map +0 -1
  378. package/dist/utils/mdx.d.ts +0 -12
  379. package/dist/utils/mdx.d.ts.map +0 -1
  380. package/dist/utils/mdx.js +0 -45
  381. package/dist/utils/mdx.js.map +0 -1
  382. package/dist/utils/paths.d.ts +0 -12
  383. package/dist/utils/paths.d.ts.map +0 -1
  384. package/dist/utils/paths.js +0 -93
  385. package/dist/utils/paths.js.map +0 -1
  386. package/dist/utils/search.d.ts +0 -10
  387. package/dist/utils/search.d.ts.map +0 -1
  388. package/dist/utils/search.js +0 -97
  389. package/dist/utils/search.js.map +0 -1
  390. package/dist/utils/security.d.ts +0 -5
  391. package/dist/utils/security.d.ts.map +0 -1
  392. package/dist/utils/security.js +0 -22
  393. package/dist/utils/security.js.map +0 -1
  394. package/dist/xulux/catalog-client.d.ts +0 -14
  395. package/dist/xulux/catalog-client.d.ts.map +0 -1
  396. package/dist/xulux/catalog-client.js +0 -112
  397. package/dist/xulux/catalog-client.js.map +0 -1
  398. package/dist/xulux/fallback-catalog.d.ts +0 -7
  399. package/dist/xulux/fallback-catalog.d.ts.map +0 -1
  400. package/dist/xulux/fallback-catalog.js +0 -47
  401. package/dist/xulux/fallback-catalog.js.map +0 -1
  402. package/dist/xulux/fetch-sandbox.d.ts +0 -5
  403. package/dist/xulux/fetch-sandbox.d.ts.map +0 -1
  404. package/dist/xulux/fetch-sandbox.js +0 -40
  405. package/dist/xulux/fetch-sandbox.js.map +0 -1
  406. package/dist/xulux/template-service.d.ts +0 -84
  407. package/dist/xulux/template-service.d.ts.map +0 -1
  408. package/dist/xulux/template-service.js +0 -223
  409. package/dist/xulux/template-service.js.map +0 -1
  410. package/dist/xulux/types.d.ts +0 -55
  411. package/dist/xulux/types.d.ts.map +0 -1
  412. package/dist/xulux/types.js +0 -6
  413. package/dist/xulux/types.js.map +0 -1
  414. package/src/constants.ts +0 -24
  415. package/src/prepare-docs/code-examples.ts +0 -158
  416. package/src/prepare-docs/copy-raw.ts +0 -50
  417. package/src/prepare-docs/prepare.ts +0 -24
  418. package/src/prompts/xulux-playground.ts +0 -36
  419. package/src/tools/docs.ts +0 -255
  420. package/src/tools/examples.ts +0 -114
  421. package/src/tools/resources.ts +0 -111
  422. package/src/tools/search.ts +0 -46
  423. package/src/tools/tests/completions.test.ts +0 -60
  424. package/src/tools/tests/directory-size-cap.test.ts +0 -50
  425. package/src/tools/tests/docs.test.ts +0 -147
  426. package/src/tools/tests/examples.test.ts +0 -94
  427. package/src/tools/tests/integration.test.ts +0 -45
  428. package/src/tools/tests/json-parsing.test.ts +0 -23
  429. package/src/tools/tests/listings-cache.test.ts +0 -19
  430. package/src/tools/tests/mcp-protocol.test.ts +0 -216
  431. package/src/tools/tests/mcp-test-client.ts +0 -111
  432. package/src/tools/tests/path-traversal.test.ts +0 -84
  433. package/src/tools/tests/resources.test.ts +0 -133
  434. package/src/tools/tests/search.test.ts +0 -37
  435. package/src/tools/tests/test-setup.ts +0 -50
  436. package/src/tools/tests/xulux-templates.test.ts +0 -325
  437. package/src/tools/xulux-templates.ts +0 -141
  438. package/src/utils/cache.ts +0 -20
  439. package/src/utils/logger.ts +0 -20
  440. package/src/utils/mcp-format.ts +0 -14
  441. package/src/utils/mdx.ts +0 -59
  442. package/src/utils/paths.ts +0 -139
  443. package/src/utils/search.ts +0 -131
  444. package/src/utils/security.ts +0 -52
  445. package/src/utils/tests/cache.test.ts +0 -51
  446. package/src/utils/tests/mcp-format.test.ts +0 -22
  447. package/src/utils/tests/security.test.ts +0 -119
  448. package/src/xulux/catalog-client.ts +0 -150
  449. package/src/xulux/fallback-catalog.ts +0 -63
  450. package/src/xulux/fetch-sandbox.ts +0 -56
  451. package/src/xulux/template-service.ts +0 -406
  452. package/src/xulux/types.ts +0 -64
@@ -1,807 +0,0 @@
1
- # Example: waterfall
2
-
3
- ## app/globals.css
4
-
5
- ```css
6
- @import "tailwindcss";
7
-
8
- :root {
9
- --background: #ffffff;
10
- --foreground: #171717;
11
- --muted-foreground: #737373;
12
- --border: #e5e5e5;
13
- --accent: #f5f5f5;
14
- }
15
-
16
- @theme inline {
17
- --color-background: var(--background);
18
- --color-foreground: var(--foreground);
19
- --color-muted-foreground: var(--muted-foreground);
20
- --color-border: var(--border);
21
- --color-accent: var(--accent);
22
- --font-sans: var(--font-geist-sans);
23
- --font-mono: var(--font-geist-mono);
24
- }
25
-
26
- @media (prefers-color-scheme: dark) {
27
- :root {
28
- --background: #0a0a0a;
29
- --foreground: #ededed;
30
- --muted-foreground: #a3a3a3;
31
- --border: #2e2e2e;
32
- --accent: #1a1a1a;
33
- }
34
- }
35
-
36
- body {
37
- background: var(--background);
38
- color: var(--foreground);
39
- font-family: Arial, Helvetica, sans-serif;
40
- }
41
-
42
- ```
43
-
44
- ## app/layout.tsx
45
-
46
- ```tsx
47
- import type { Metadata } from "next";
48
- import { Geist, Geist_Mono } from "next/font/google";
49
- import "./globals.css";
50
-
51
- const geistSans = Geist({
52
- variable: "--font-geist-sans",
53
- subsets: ["latin"],
54
- });
55
-
56
- const geistMono = Geist_Mono({
57
- variable: "--font-geist-mono",
58
- subsets: ["latin"],
59
- });
60
-
61
- export const metadata: Metadata = {
62
- title: "Waterfall Example",
63
- description: "Span waterfall visualization with @assistant-ui/react-o11y",
64
- };
65
-
66
- export default function RootLayout({
67
- children,
68
- }: Readonly<{
69
- children: React.ReactNode;
70
- }>) {
71
- return (
72
- <html lang="en">
73
- <body
74
- className={`${geistSans.variable} ${geistMono.variable} antialiased`}
75
- >
76
- {children}
77
- </body>
78
- </html>
79
- );
80
- }
81
-
82
- ```
83
-
84
- ## app/page.tsx
85
-
86
- ```tsx
87
- import { WaterfallPage } from "@/lib/waterfall-page";
88
-
89
- export default function Home() {
90
- return (
91
- <div className="bg-background min-h-screen p-8">
92
- <div className="mx-auto max-w-6xl">
93
- <div className="mb-8">
94
- <h1 className="text-foreground mb-2 text-4xl font-bold">
95
- Waterfall Timeline
96
- </h1>
97
- <p className="text-muted-foreground text-lg">
98
- Span visualization powered by @assistant-ui/react-o11y
99
- </p>
100
- </div>
101
-
102
- <WaterfallPage />
103
- </div>
104
- </div>
105
- );
106
- }
107
-
108
- ```
109
-
110
- ## lib/mock-data.ts
111
-
112
- ```typescript
113
- import type { SpanData } from "@assistant-ui/react-o11y";
114
-
115
- const BASE = Date.now() - 5000;
116
-
117
- export const mockSpans: SpanData[] = [
118
- {
119
- id: "span-1",
120
- parentSpanId: null,
121
- name: "POST /api/chat",
122
- type: "api",
123
- status: "completed",
124
- startedAt: BASE,
125
- endedAt: BASE + 4200,
126
- latencyMs: 4200,
127
- },
128
- {
129
- id: "span-2",
130
- parentSpanId: "span-1",
131
- name: "authenticate",
132
- type: "action",
133
- status: "completed",
134
- startedAt: BASE + 50,
135
- endedAt: BASE + 200,
136
- latencyMs: 150,
137
- },
138
- {
139
- id: "span-3",
140
- parentSpanId: "span-1",
141
- name: "agent-pipeline",
142
- type: "pipeline",
143
- status: "completed",
144
- startedAt: BASE + 220,
145
- endedAt: BASE + 4100,
146
- latencyMs: 3880,
147
- },
148
- {
149
- id: "span-4",
150
- parentSpanId: "span-3",
151
- name: "retrieve-context",
152
- type: "tool",
153
- status: "completed",
154
- startedAt: BASE + 250,
155
- endedAt: BASE + 900,
156
- latencyMs: 650,
157
- },
158
- {
159
- id: "span-5",
160
- parentSpanId: "span-3",
161
- name: "llm-generate",
162
- type: "action",
163
- status: "completed",
164
- startedAt: BASE + 920,
165
- endedAt: BASE + 2800,
166
- latencyMs: 1880,
167
- },
168
- {
169
- id: "span-6",
170
- parentSpanId: "span-3",
171
- name: "web-search",
172
- type: "tool",
173
- status: "completed",
174
- startedAt: BASE + 2850,
175
- endedAt: BASE + 3500,
176
- latencyMs: 650,
177
- },
178
- {
179
- id: "span-7",
180
- parentSpanId: "span-3",
181
- name: "llm-summarize",
182
- type: "action",
183
- status: "completed",
184
- startedAt: BASE + 3520,
185
- endedAt: BASE + 4050,
186
- latencyMs: 530,
187
- },
188
- {
189
- id: "span-8",
190
- parentSpanId: "span-1",
191
- name: "log-response",
192
- type: "action",
193
- status: "completed",
194
- startedAt: BASE + 4110,
195
- endedAt: BASE + 4180,
196
- latencyMs: 70,
197
- },
198
- {
199
- id: "span-9",
200
- parentSpanId: null,
201
- name: "POST /api/feedback",
202
- type: "api",
203
- status: "completed",
204
- startedAt: BASE + 4500,
205
- endedAt: BASE + 4700,
206
- latencyMs: 200,
207
- },
208
- {
209
- id: "span-10",
210
- parentSpanId: "span-9",
211
- name: "validate-input",
212
- type: "action",
213
- status: "completed",
214
- startedAt: BASE + 4520,
215
- endedAt: BASE + 4560,
216
- latencyMs: 40,
217
- },
218
- {
219
- id: "span-11",
220
- parentSpanId: "span-9",
221
- name: "store-feedback",
222
- type: "action",
223
- status: "failed",
224
- startedAt: BASE + 4570,
225
- endedAt: BASE + 4680,
226
- latencyMs: 110,
227
- },
228
- {
229
- id: "span-12",
230
- parentSpanId: null,
231
- name: "GET /api/status",
232
- type: "api",
233
- status: "running",
234
- startedAt: BASE + 4800,
235
- endedAt: null,
236
- latencyMs: null,
237
- },
238
- {
239
- id: "span-13",
240
- parentSpanId: "span-12",
241
- name: "health-check",
242
- type: "flow",
243
- status: "running",
244
- startedAt: BASE + 4830,
245
- endedAt: null,
246
- latencyMs: null,
247
- },
248
- {
249
- id: "span-14",
250
- parentSpanId: "span-4",
251
- name: "vector-search",
252
- type: "tool",
253
- status: "completed",
254
- startedAt: BASE + 280,
255
- endedAt: BASE + 700,
256
- latencyMs: 420,
257
- },
258
- {
259
- id: "span-15",
260
- parentSpanId: "span-4",
261
- name: "rerank",
262
- type: "action",
263
- status: "completed",
264
- startedAt: BASE + 710,
265
- endedAt: BASE + 880,
266
- latencyMs: 170,
267
- },
268
- ];
269
-
270
- ```
271
-
272
- ## lib/waterfall-bar.tsx
273
-
274
- ```tsx
275
- "use client";
276
-
277
- import { useCallback, useEffect, useRef } from "react";
278
- import { useAuiState } from "@assistant-ui/store";
279
- import type { SpanItemState } from "@assistant-ui/react-o11y";
280
- import { useWaterfallLayout } from "./waterfall-timeline";
281
-
282
- const TYPE_COLORS: Record<string, string> = {
283
- action: "hsl(221 83% 53%)",
284
- api: "hsl(262 83% 58%)",
285
- tool: "hsl(142 71% 45%)",
286
- flow: "hsl(25 95% 53%)",
287
- pipeline: "hsl(340 75% 55%)",
288
- };
289
-
290
- const FALLBACK_COLOR = "hsl(220 9% 46%)";
291
-
292
- const STATUS_OPACITY: Record<SpanItemState["status"], number> = {
293
- running: 0.7,
294
- completed: 1,
295
- failed: 1,
296
- skipped: 0.5,
297
- };
298
-
299
- export function WaterfallBar() {
300
- const { barWidth, timeRange, barHeight } = useWaterfallLayout();
301
- const startedAt = useAuiState((s) => s.span.startedAt);
302
- const endedAt = useAuiState((s) => s.span.endedAt) as number | null;
303
- const status = useAuiState((s) => s.span.status) as SpanItemState["status"];
304
- const type = useAuiState((s) => s.span.type);
305
-
306
- const barRef = useRef<SVGRectElement>(null);
307
-
308
- const scale = useCallback(
309
- (t: number) => {
310
- const range = timeRange.max - timeRange.min || 1;
311
- return ((t - timeRange.min) / range) * barWidth;
312
- },
313
- [timeRange, barWidth],
314
- );
315
-
316
- const x = scale(startedAt);
317
-
318
- useEffect(() => {
319
- if (status !== "running") return;
320
-
321
- let frameId: number;
322
- const tick = () => {
323
- const width = scale(Date.now()) - x;
324
- barRef.current?.setAttribute("width", String(Math.max(0, width)));
325
- frameId = requestAnimationFrame(tick);
326
- };
327
- frameId = requestAnimationFrame(tick);
328
- return () => cancelAnimationFrame(frameId);
329
- }, [status, x, scale]);
330
-
331
- const rawWidth = endedAt ? scale(endedAt) - x : 0;
332
- const width = Math.max(rawWidth, 4);
333
- const fill = TYPE_COLORS[type] ?? FALLBACK_COLOR;
334
- const opacity = STATUS_OPACITY[status];
335
-
336
- return (
337
- <g>
338
- <rect
339
- ref={barRef}
340
- x={x}
341
- y={4}
342
- width={width}
343
- height={barHeight - 8}
344
- rx={3}
345
- fill={fill}
346
- opacity={opacity}
347
- className={status === "running" ? "animate-pulse" : ""}
348
- />
349
- {status === "failed" && (
350
- <rect
351
- x={x}
352
- y={4}
353
- width={width}
354
- height={barHeight - 8}
355
- rx={3}
356
- fill="none"
357
- stroke="hsl(0 84% 60%)"
358
- strokeWidth={2}
359
- />
360
- )}
361
- </g>
362
- );
363
- }
364
-
365
- ```
366
-
367
- ## lib/waterfall-page.tsx
368
-
369
- ```tsx
370
- "use client";
371
-
372
- import { AuiProvider, AuiConfig } from "@assistant-ui/store";
373
- import { SpanResource } from "@assistant-ui/react-o11y";
374
- import { mockSpans } from "./mock-data";
375
- import { WaterfallTimeline } from "./waterfall-timeline";
376
-
377
- const config = AuiConfig({
378
- span: SpanResource({ spans: mockSpans }),
379
- });
380
-
381
- export function WaterfallPage() {
382
- return (
383
- <AuiProvider config={config}>
384
- <WaterfallTimeline />
385
- </AuiProvider>
386
- );
387
- }
388
-
389
- ```
390
-
391
- ## lib/waterfall-row.tsx
392
-
393
- ```tsx
394
- "use client";
395
-
396
- import { SpanPrimitive } from "@assistant-ui/react-o11y";
397
- import { AuiIf } from "@assistant-ui/store";
398
- import { WaterfallBar } from "./waterfall-bar";
399
- import { useWaterfallLayout } from "./waterfall-timeline";
400
-
401
- const LABEL_WIDTH = 200;
402
-
403
- export function WaterfallRow() {
404
- const { barWidth, contentWidth, barHeight } = useWaterfallLayout();
405
-
406
- return (
407
- <SpanPrimitive.Root
408
- className="group flex cursor-pointer items-center"
409
- style={{ width: contentWidth, height: barHeight }}
410
- >
411
- <SpanPrimitive.Indent
412
- baseIndent={8}
413
- indentPerLevel={12}
414
- className="border-border bg-background group-hover:bg-accent/50 sticky left-0 z-10 flex shrink-0 items-center gap-1 overflow-hidden border-r px-2"
415
- style={{ width: LABEL_WIDTH, height: barHeight }}
416
- >
417
- <AuiIf condition={(s) => s.span.hasChildren}>
418
- <SpanPrimitive.CollapseToggle className="text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center rounded p-0.5">
419
- <svg
420
- aria-hidden="true"
421
- className="size-3.5 transition-transform group-data-[collapsed=true]:-rotate-90"
422
- viewBox="0 0 16 16"
423
- fill="currentColor"
424
- >
425
- <path d="M4 6l4 4 4-4H4z" />
426
- </svg>
427
- </SpanPrimitive.CollapseToggle>
428
- </AuiIf>
429
- <AuiIf condition={(s) => !s.span.hasChildren}>
430
- <span className="w-4.5 shrink-0" />
431
- </AuiIf>
432
- <SpanPrimitive.StatusIndicator className="size-1.5 shrink-0 rounded-full bg-current" />
433
- <SpanPrimitive.TypeBadge className="border-border text-muted-foreground shrink-0 rounded border px-1 text-[10px]" />
434
- <SpanPrimitive.Name className="truncate text-sm" />
435
- </SpanPrimitive.Indent>
436
-
437
- {/* Timeline bar */}
438
- <div
439
- className="group-hover:bg-accent/30"
440
- style={{ width: barWidth, height: barHeight }}
441
- >
442
- <svg aria-hidden="true" width={barWidth} height={barHeight}>
443
- <WaterfallBar />
444
- </svg>
445
- </div>
446
- </SpanPrimitive.Root>
447
- );
448
- }
449
-
450
- ```
451
-
452
- ## lib/waterfall-timeline.tsx
453
-
454
- ```tsx
455
- "use client";
456
-
457
- import {
458
- createContext,
459
- useContext,
460
- useEffect,
461
- useLayoutEffect,
462
- useMemo,
463
- useRef,
464
- useState,
465
- } from "react";
466
- import { useAuiState } from "@assistant-ui/store";
467
- import { SpanPrimitive, type SpanState } from "@assistant-ui/react-o11y";
468
- import { WaterfallRow } from "./waterfall-row";
469
-
470
- const LABEL_WIDTH = 200;
471
- const MAX_LIST_HEIGHT = 400;
472
- const MIN_ZOOM = 1;
473
- const MAX_ZOOM = 20;
474
- const RIGHT_PADDING_RATIO = 0.08;
475
-
476
- export type WaterfallLayoutContextValue = {
477
- barWidth: number;
478
- timeRange: { min: number; max: number };
479
- barHeight: number;
480
- contentWidth: number;
481
- selectedSpanId: string | null;
482
- onSelectSpan: (spanId: string) => void;
483
- };
484
-
485
- export const WaterfallLayoutContext =
486
- createContext<WaterfallLayoutContextValue | null>(null);
487
-
488
- export function useWaterfallLayout(): WaterfallLayoutContextValue {
489
- const ctx = useContext(WaterfallLayoutContext);
490
- if (!ctx) {
491
- throw new Error(
492
- "useWaterfallLayout must be used within WaterfallLayoutContext",
493
- );
494
- }
495
- return ctx;
496
- }
497
-
498
- function formatTime(ms: number): string {
499
- if (ms < 1000) return `${Math.round(ms)} ms`;
500
- return `${(ms / 1000).toFixed(1)} s`;
501
- }
502
-
503
- function TimeAxisTicks({
504
- timeRange,
505
- barWidth,
506
- }: {
507
- timeRange: { min: number; max: number };
508
- barWidth: number;
509
- }) {
510
- const duration = timeRange.max - timeRange.min;
511
- const tickCount = Math.min(5, Math.max(2, Math.floor(barWidth / 100)));
512
- const ticks = Array.from({ length: tickCount + 1 }, (_, i) => {
513
- const t = (i / tickCount) * duration;
514
- const x = (i / tickCount) * barWidth;
515
- return { t, x };
516
- });
517
-
518
- return (
519
- <svg
520
- aria-hidden="true"
521
- width={barWidth}
522
- height={28}
523
- className="overflow-visible"
524
- >
525
- {ticks.map(({ t, x }) => (
526
- <g key={x}>
527
- <line
528
- x1={x}
529
- y1={20}
530
- x2={x}
531
- y2={28}
532
- stroke="currentColor"
533
- className="text-border"
534
- />
535
- <text
536
- x={x}
537
- y={14}
538
- textAnchor="middle"
539
- className="fill-muted-foreground text-[10px]"
540
- >
541
- {formatTime(t)}
542
- </text>
543
- </g>
544
- ))}
545
- </svg>
546
- );
547
- }
548
-
549
- export function WaterfallTimeline() {
550
- const outerRef = useRef<HTMLDivElement>(null);
551
- const scrollRef = useRef<HTMLDivElement>(null);
552
-
553
- const [baseBarWidth, setBaseBarWidth] = useState(400);
554
- const [zoom, setZoom] = useState(1);
555
- const zoomRef = useRef(1);
556
- const baseBarWidthRef = useRef(400);
557
- const scrollAdjustRef = useRef<{
558
- mouseX: number;
559
- ratio: number;
560
- } | null>(null);
561
-
562
- const [selectedSpanId, setSelectedSpanId] = useState<string | null>(null);
563
-
564
- const barWidth = Math.max(200, Math.round(baseBarWidth * zoom));
565
-
566
- const hasSpans = useAuiState((s) => s.span.hasChildren);
567
- const timeRange = useAuiState(
568
- (s) => s.span.timeRange,
569
- ) as SpanState["timeRange"];
570
-
571
- // Measure outer container width — re-attach when scroll container mounts
572
- useEffect(() => {
573
- const el = outerRef.current;
574
- if (!el) return;
575
-
576
- const observer = new ResizeObserver((entries) => {
577
- const entry = entries[0];
578
- if (entry) {
579
- const w = Math.max(200, entry.contentRect.width - LABEL_WIDTH);
580
- baseBarWidthRef.current = w;
581
- setBaseBarWidth(w);
582
- }
583
- });
584
-
585
- observer.observe(el);
586
- return () => observer.disconnect();
587
- }, [hasSpans]);
588
-
589
- // Cmd + scroll wheel zoom — re-attach when scroll container mounts
590
- useEffect(() => {
591
- const el = scrollRef.current;
592
- if (!el) return;
593
-
594
- const handleWheel = (e: WheelEvent) => {
595
- if (!e.metaKey) return;
596
- e.preventDefault();
597
-
598
- const rect = el.getBoundingClientRect();
599
- const mouseXInView = e.clientX - rect.left - LABEL_WIDTH;
600
- const mouseXInContent = el.scrollLeft + mouseXInView;
601
- const currentBarWidth = baseBarWidthRef.current * zoomRef.current;
602
- const ratio = currentBarWidth > 0 ? mouseXInContent / currentBarWidth : 0;
603
-
604
- const newZoom = Math.max(
605
- MIN_ZOOM,
606
- Math.min(MAX_ZOOM, zoomRef.current * 2 ** (-e.deltaY * 0.003)),
607
- );
608
-
609
- scrollAdjustRef.current = { mouseX: mouseXInView, ratio };
610
- zoomRef.current = newZoom;
611
- setZoom(newZoom);
612
- };
613
-
614
- el.addEventListener("wheel", handleWheel, { passive: false });
615
- return () => el.removeEventListener("wheel", handleWheel);
616
- }, [hasSpans]);
617
-
618
- // Adjust scroll after zoom
619
- useLayoutEffect(() => {
620
- const adj = scrollAdjustRef.current;
621
- const el = scrollRef.current;
622
- if (!adj || !el) return;
623
- scrollAdjustRef.current = null;
624
-
625
- const newBarX = adj.ratio * barWidth;
626
- el.scrollLeft = newBarX - adj.mouseX;
627
- }, [barWidth]);
628
-
629
- const renderTimeRange = useMemo(() => {
630
- const duration = timeRange.max - timeRange.min;
631
- return {
632
- min: timeRange.min,
633
- max: timeRange.max + duration * RIGHT_PADDING_RATIO,
634
- };
635
- }, [timeRange]);
636
-
637
- const contentWidth = LABEL_WIDTH + barWidth;
638
- const scrollMaxHeight = MAX_LIST_HEIGHT + 28;
639
-
640
- const layoutValue = useMemo(
641
- () => ({
642
- barWidth,
643
- timeRange: renderTimeRange,
644
- barHeight: 32,
645
- contentWidth,
646
- selectedSpanId,
647
- onSelectSpan: setSelectedSpanId,
648
- }),
649
- [barWidth, renderTimeRange, contentWidth, selectedSpanId],
650
- );
651
-
652
- if (!hasSpans) {
653
- return (
654
- <div className="border-border text-muted-foreground rounded-lg border py-12 text-center text-sm">
655
- No spans recorded.
656
- </div>
657
- );
658
- }
659
-
660
- return (
661
- <div ref={outerRef} className="border-border rounded-lg border">
662
- <div
663
- ref={scrollRef}
664
- className="overflow-auto"
665
- style={{ maxHeight: scrollMaxHeight }}
666
- >
667
- {/* Time axis */}
668
- <div
669
- className="border-border bg-background sticky top-0 z-20 flex border-b"
670
- style={{ width: contentWidth }}
671
- >
672
- <div
673
- className="border-border bg-background text-muted-foreground sticky left-0 z-30 shrink-0 border-r px-2 py-1.5 text-xs"
674
- style={{ width: LABEL_WIDTH }}
675
- >
676
- Span
677
- </div>
678
- <div style={{ width: barWidth, height: 28 }}>
679
- <TimeAxisTicks timeRange={renderTimeRange} barWidth={barWidth} />
680
- </div>
681
- </div>
682
-
683
- {/* Span rows */}
684
- <WaterfallLayoutContext.Provider value={layoutValue}>
685
- <div
686
- style={{ width: contentWidth }}
687
- onClick={(e) => {
688
- const target = e.target as HTMLElement;
689
- const el = target.closest("[data-span-id]") as HTMLElement | null;
690
- if (el?.dataset.spanId) {
691
- setSelectedSpanId(el.dataset.spanId);
692
- }
693
- }}
694
- >
695
- <SpanPrimitive.Children>
696
- {() => <WaterfallRow />}
697
- </SpanPrimitive.Children>
698
- </div>
699
- </WaterfallLayoutContext.Provider>
700
- </div>
701
-
702
- {/* Legend */}
703
- <div className="border-border text-muted-foreground flex items-center gap-4 border-t px-3 py-2 text-xs">
704
- <div className="flex items-center gap-1.5">
705
- <span
706
- className="size-2.5 rounded-sm"
707
- style={{ background: "hsl(221 83% 53%)" }}
708
- />
709
- <span>action</span>
710
- </div>
711
- <div className="flex items-center gap-1.5">
712
- <span
713
- className="size-2.5 rounded-sm"
714
- style={{ background: "hsl(262 83% 58%)" }}
715
- />
716
- <span>api</span>
717
- </div>
718
- <div className="flex items-center gap-1.5">
719
- <span
720
- className="size-2.5 rounded-sm"
721
- style={{ background: "hsl(142 71% 45%)" }}
722
- />
723
- <span>tool</span>
724
- </div>
725
- <div className="flex items-center gap-1.5">
726
- <span
727
- className="size-2.5 rounded-sm"
728
- style={{ background: "hsl(25 95% 53%)" }}
729
- />
730
- <span>flow</span>
731
- </div>
732
- <div className="flex items-center gap-1.5">
733
- <span
734
- className="size-2.5 rounded-sm"
735
- style={{ background: "hsl(340 75% 55%)" }}
736
- />
737
- <span>pipeline</span>
738
- </div>
739
- </div>
740
- </div>
741
- );
742
- }
743
-
744
- ```
745
-
746
- ## next.config.ts
747
-
748
- ```typescript
749
- import { withAui } from "@assistant-ui/next";
750
- import type { NextConfig } from "next";
751
-
752
- const nextConfig: NextConfig = {/* config options here */};
753
-
754
- export default withAui(nextConfig);
755
-
756
- ```
757
-
758
- ## package.json
759
-
760
- ```json
761
- {
762
- "name": "waterfall",
763
- "version": "0.0.0",
764
- "private": true,
765
- "type": "module",
766
- "scripts": {
767
- "dev": "next dev",
768
- "build": "next build",
769
- "start": "next start"
770
- },
771
- "dependencies": {
772
- "@assistant-ui/react-o11y": "workspace:*",
773
- "@assistant-ui/store": "workspace:*",
774
- "@assistant-ui/tap": "workspace:*",
775
- "next": "^16.3.2",
776
- "react": "^19.2.8",
777
- "react-dom": "^19.2.8"
778
- },
779
- "devDependencies": {
780
- "@assistant-ui/next": "workspace:*",
781
- "@assistant-ui/x-buildutils": "workspace:*",
782
- "@tailwindcss/postcss": "^4.3.3",
783
- "@types/node": "^26.2.0",
784
- "@types/react": "^19.2.18",
785
- "@types/react-dom": "^19.2.5",
786
- "postcss": "^8.5.26",
787
- "tailwindcss": "^4.3.3",
788
- "typescript": "^7.0.2"
789
- }
790
- }
791
-
792
- ```
793
-
794
- ## tsconfig.json
795
-
796
- ```json
797
- {
798
- "extends": "@assistant-ui/x-buildutils/ts/next",
799
- "compilerOptions": {
800
- "paths": { "@/*": ["./*"] }
801
- },
802
- "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
803
- "exclude": ["node_modules"]
804
- }
805
-
806
- ```
807
-