From 6ac010d85f70ec0fc7394b4c5b086847d9204d8d Mon Sep 17 00:00:00 2001
From: Makisuo <minetoaster12@gmail.com>
Date: Fri, 20 Feb 2026 01:26:05 +0100
Subject: [PATCH 1/5] feat: move ui in separate pakcgae

---
 apps/landing/package.json                     |   2 +
 .../src/components/FeatureDetailGrid.astro    |  16 ++
 apps/landing/src/components/FeatureHero.astro |  49 ++++
 .../src/components/FeatureSpotlights.astro    |   8 +-
 apps/landing/src/components/Footer.astro      |  29 ++-
 apps/landing/src/components/Nav.astro         |  39 +++-
 .../src/components/RelatedFeatures.astro      |  34 +++
 apps/landing/src/components/SeoHead.astro     |  31 +++
 .../src/components/TraceVisualization.tsx     |   6 +-
 .../src/components/UseCaseShowcase.astro      | 210 +++++++++++++++++
 apps/landing/src/components/ui/button.tsx     |  40 ----
 apps/landing/src/components/ui/tooltip.tsx    |  56 -----
 apps/landing/src/lib/colors.ts                |  82 -------
 .../pages/features/ai-mcp-integration.astro   | 118 ++++++++++
 .../pages/features/distributed-tracing.astro  | 151 ++++++++++++
 .../src/pages/features/error-tracking.astro   | 145 ++++++++++++
 .../src/pages/features/log-management.astro   | 130 +++++++++++
 .../pages/features/metrics-dashboards.astro   | 172 ++++++++++++++
 .../src/pages/features/service-catalog.astro  | 153 ++++++++++++
 apps/landing/src/pages/index.astro            |   2 +
 .../src/pages/use-cases/api-performance.astro | 216 +++++++++++++++++
 .../use-cases/ecommerce-observability.astro   | 206 ++++++++++++++++
 .../use-cases/microservices-debugging.astro   | 220 ++++++++++++++++++
 apps/web/package.json                         |   1 +
 apps/web/src/components/component-example.tsx |  20 +-
 .../dashboard-builder/config/chart-picker.tsx |   4 +-
 .../config/widget-query-builder-page.tsx      |  12 +-
 .../config/widget-query-builder-sheet.tsx     |  16 +-
 .../dashboard-builder/list/dashboard-list.tsx |   4 +-
 .../toolbar/dashboard-toolbar.tsx             |   5 +-
 .../widgets/chart-preview.tsx                 |   2 +-
 .../widgets/chart-widget.tsx                  |   4 +-
 .../dashboard-builder/widgets/stat-widget.tsx |   2 +-
 .../widgets/table-widget.tsx                  |   4 +-
 .../widgets/widget-edit-panel.tsx             |   4 +-
 .../widgets/widget-shell.tsx                  |   6 +-
 .../src/components/dashboard/app-sidebar.tsx  |   6 +-
 .../src/components/dashboard/metrics-grid.tsx |   8 +-
 .../src/components/dashboard/org-switcher.tsx |  10 +-
 .../dashboard/service-usage-cards.tsx         |   4 +-
 .../errors/errors-by-type-table.tsx           |   6 +-
 .../errors/errors-filter-sidebar.tsx          |   2 +-
 .../errors/errors-summary-cards.tsx           |   4 +-
 apps/web/src/components/example.tsx           |   2 +-
 .../src/components/filters/filter-section.tsx |   8 +-
 .../src/components/filters/filter-sidebar.tsx |   8 +-
 .../components/layout/dashboard-layout.tsx    |   6 +-
 .../src/components/logs/log-detail-sheet.tsx  |  10 +-
 .../components/logs/logs-filter-sidebar.tsx   |   2 +-
 apps/web/src/components/logs/logs-table.tsx   |   4 +-
 .../src/components/logs/severity-badge.tsx    |   4 +-
 .../components/metrics/metric-type-badge.tsx  |   2 +-
 .../components/metrics/metrics-overview.tsx   |   2 +-
 .../metrics/metrics-summary-cards.tsx         |   4 +-
 .../src/components/metrics/metrics-table.tsx  |   6 +-
 .../metrics/metrics-volume-chart.tsx          |   6 +-
 .../query-builder/query-builder-lab.tsx       |  22 +-
 .../query-builder/where-clause-editor.tsx     |   4 +-
 .../src/components/quick-start/code-block.tsx |   2 +-
 .../package-manager-code-block.tsx            |   2 +-
 apps/web/src/components/route-error.tsx       |   4 +-
 .../service-map/service-map-edge.tsx          |   2 +-
 .../service-map/service-map-node.tsx          |   6 +-
 .../service-map/service-map-view.tsx          |   2 +-
 .../services/services-filter-sidebar.tsx      |   2 +-
 .../components/services/services-table.tsx    |  10 +-
 .../components/settings/api-keys-section.tsx  |  20 +-
 .../components/settings/billing-section.tsx   |   4 +-
 .../components/settings/members-section.tsx   |  26 +--
 .../src/components/settings/pricing-cards.tsx |  16 +-
 .../settings/scrape-targets-section.tsx       |  18 +-
 .../src/components/settings/usage-meters.tsx  |   4 +-
 .../time-range-picker/custom-range-picker.tsx |   6 +-
 .../time-range-picker/preset-list.tsx         |   2 +-
 .../time-range-picker/quick-select-grid.tsx   |   2 +-
 .../time-range-picker/recently-used.tsx       |   2 +-
 .../time-range-picker/shorthand-input.tsx     |   2 +-
 .../time-range-picker/time-range-picker.tsx   |   8 +-
 .../traces/duration-range-filter.tsx          |   8 +-
 .../components/traces/flamegraph-minimap.tsx  |   2 +-
 .../components/traces/flamegraph-tooltip.tsx  |   2 +-
 apps/web/src/components/traces/flamegraph.tsx |   8 +-
 apps/web/src/components/traces/flow-node.tsx  |   4 +-
 apps/web/src/components/traces/flow-view.tsx  |   4 +-
 .../components/traces/span-detail-panel.tsx   |  16 +-
 apps/web/src/components/traces/span-row.tsx   |   6 +-
 .../src/components/traces/trace-view-tabs.tsx |   2 +-
 .../traces/traces-filter-sidebar.tsx          |   2 +-
 .../src/components/traces/traces-table.tsx    |   6 +-
 apps/web/src/lib/utils.ts                     |   6 -
 apps/web/src/routes/__root.tsx                |   2 +-
 apps/web/src/routes/index.tsx                 |   4 +-
 apps/web/src/routes/quick-start.tsx           |   8 +-
 apps/web/src/routes/services/$serviceName.tsx |   2 +-
 apps/web/src/routes/settings.tsx              |  12 +-
 apps/web/src/routes/sign-in.tsx               |   4 +-
 apps/web/src/routes/traces/$traceId.tsx       |   6 +-
 apps/web/src/styles.css                       |   2 +
 apps/web/tsconfig.json                        |   4 +-
 bun.lock                                      |  34 +++
 packages/ui/package.json                      |  41 ++++
 .../charts/_shared/build-chart-config.ts      |   2 +-
 .../components/charts/_shared/chart-types.ts  |   0
 .../components/charts/_shared/sample-data.ts  |   0
 .../components/charts/_shared/svg-filters.tsx |   0
 .../charts/_shared/svg-patterns.tsx           |   0
 .../charts/_shared/use-dynamic-dasharray.ts   |   0
 .../charts/area/apdex-area-chart.tsx          |  10 +-
 .../charts/area/bar-pattern-area-chart.tsx    |   8 +-
 .../charts/area/dotted-pattern-area-chart.tsx |   8 +-
 .../charts/area/error-rate-area-chart.tsx     |  10 +-
 .../charts/area/gradient-area-chart.tsx       |   8 +-
 .../area/gradient-rounded-area-chart.tsx      |   8 +-
 .../charts/area/query-builder-area-chart.tsx  |   6 +-
 .../charts/area/throughput-area-chart.tsx     |  10 +-
 .../charts/bar/default-bar-chart.tsx          |   8 +-
 .../charts/bar/default-multiple-bar-chart.tsx |   8 +-
 .../charts/bar/duotone-bar-chart.tsx          |   6 +-
 .../charts/bar/glowing-bar-chart.tsx          |   8 +-
 .../charts/bar/gradient-bar-chart.tsx         |   6 +-
 .../charts/bar/hatched-bar-chart.tsx          |   8 +-
 .../charts/bar/highlighted-bar-chart.tsx      |   6 +-
 .../charts/bar/query-builder-bar-chart.tsx    |   6 +-
 .../ui}/src/components/charts/index.ts        |   0
 .../charts/line/dotted-line-chart.tsx         |   6 +-
 .../charts/line/dotted-multi-line-chart.tsx   |   6 +-
 .../charts/line/glowing-line-chart.tsx        |   8 +-
 .../charts/line/latency-line-chart.tsx        |   8 +-
 .../charts/line/number-dot-line-chart.tsx     |   6 +-
 .../charts/line/partial-line-chart.tsx        |   8 +-
 .../charts/line/pinging-dot-chart.tsx         |   6 +-
 .../charts/line/query-builder-line-chart.tsx  |   6 +-
 .../line/rainbow-glow-gradient-line-chart.tsx |   8 +-
 .../charts/pie/default-radial-chart.tsx       |   8 +-
 .../charts/pie/glowing-radial-chart.tsx       |  10 +-
 .../charts/pie/increase-size-pie-chart.tsx    |   8 +-
 .../charts/pie/rounded-pie-chart.tsx          |   8 +-
 .../glowing-multiple-stroke-radar-chart.tsx   |   8 +-
 .../radar/glowing-stroke-radar-chart.tsx      |   8 +-
 .../radar/stroke-multiple-radar-chart.tsx     |   6 +-
 .../charts/radar/stroke-radar-chart.tsx       |   6 +-
 .../ui}/src/components/charts/registry.ts     |   0
 .../ui/src/components/icons/alert-warning.tsx |  12 +
 .../ui/src/components/icons/arrow-down.tsx    |  12 +
 .../ui/src/components/icons/arrow-left.tsx    |  12 +
 .../ui/src/components/icons/arrow-right.tsx   |  12 +
 packages/ui/src/components/icons/check.tsx    |  11 +
 .../ui/src/components/icons/chevron-down.tsx  |  11 +
 .../src/components/icons/chevron-expand-y.tsx |  12 +
 .../ui/src/components/icons/chevron-left.tsx  |  11 +
 .../ui/src/components/icons/chevron-right.tsx |  11 +
 .../ui/src/components/icons/chevron-up.tsx    |  11 +
 .../ui/src/components/icons/circle-check.tsx  |  12 +
 .../ui/src/components/icons/circle-info.tsx   |  13 ++
 .../ui/src/components/icons/circle-xmark.tsx  |  13 ++
 packages/ui/src/components/icons/code.tsx     |  12 +
 packages/ui/src/components/icons/dots.tsx     |  13 ++
 packages/ui/src/components/icons/eye.tsx      |  12 +
 packages/ui/src/components/icons/icon.tsx     |   7 +
 packages/ui/src/components/icons/index.ts     |  26 +++
 packages/ui/src/components/icons/loader.tsx   |  18 ++
 .../ui/src/components/icons/magnifier.tsx     |  12 +
 packages/ui/src/components/icons/minus.tsx    |  11 +
 .../ui/src/components/icons/network-nodes.tsx |  19 ++
 packages/ui/src/components/icons/pulse.tsx    |  11 +
 .../ui/src/components/icons/radio-checked.tsx |  12 +
 .../ui/src/components/icons/sidebar-left.tsx  |  12 +
 packages/ui/src/components/icons/xmark.tsx    |  12 +
 .../components/traces/flamegraph-minimap.tsx  |   0
 .../components/traces/flamegraph-tooltip.tsx  |   0
 .../ui}/src/components/traces/flamegraph.tsx  |   0
 .../ui}/src/components/traces/flow-node.tsx   |   0
 .../ui}/src/components/traces/flow-utils.ts   |   0
 .../ui}/src/components/traces/flow-view.tsx   |   0
 .../ui}/src/components/ui/accordion.tsx       |   4 +-
 .../ui}/src/components/ui/alert-dialog.tsx    |   4 +-
 .../ui}/src/components/ui/alert.tsx           |   2 +-
 .../ui}/src/components/ui/aspect-ratio.tsx    |   2 +-
 .../ui}/src/components/ui/avatar.tsx          |   2 +-
 .../ui}/src/components/ui/badge.tsx           |   2 +-
 .../ui}/src/components/ui/breadcrumb.tsx      |   4 +-
 .../ui}/src/components/ui/button-group.tsx    |   4 +-
 .../ui}/src/components/ui/button.tsx          |   2 +-
 .../ui}/src/components/ui/calendar.tsx        |   6 +-
 .../ui}/src/components/ui/card.tsx            |   2 +-
 .../ui}/src/components/ui/carousel.tsx        |   6 +-
 .../ui}/src/components/ui/chart.tsx           |   2 +-
 .../ui}/src/components/ui/checkbox.tsx        |   4 +-
 .../ui}/src/components/ui/collapsible.tsx     |   0
 .../ui}/src/components/ui/combobox.tsx        |   8 +-
 .../ui}/src/components/ui/command.tsx         |   8 +-
 .../ui}/src/components/ui/context-menu.tsx    |   4 +-
 .../ui}/src/components/ui/dialog.tsx          |   6 +-
 .../ui}/src/components/ui/direction.tsx       |   0
 .../ui}/src/components/ui/drawer.tsx          |   2 +-
 .../ui}/src/components/ui/dropdown-menu.tsx   |   4 +-
 .../ui}/src/components/ui/empty.tsx           |   2 +-
 .../ui}/src/components/ui/field.tsx           |   6 +-
 .../ui}/src/components/ui/gradient-chart.tsx  |   2 +-
 .../ui}/src/components/ui/hover-card.tsx      |   2 +-
 .../ui}/src/components/ui/input-group.tsx     |   8 +-
 .../ui}/src/components/ui/input-otp.tsx       |   4 +-
 .../ui}/src/components/ui/input.tsx           |   2 +-
 .../ui}/src/components/ui/item.tsx            |   4 +-
 .../ui}/src/components/ui/kbd.tsx             |   2 +-
 .../ui}/src/components/ui/label.tsx           |   2 +-
 .../ui}/src/components/ui/menubar.tsx         |   6 +-
 .../ui}/src/components/ui/native-select.tsx   |   4 +-
 .../ui}/src/components/ui/navigation-menu.tsx |   4 +-
 .../ui}/src/components/ui/pagination.tsx      |   6 +-
 .../ui}/src/components/ui/popover.tsx         |   2 +-
 .../ui}/src/components/ui/progress.tsx        |   2 +-
 .../ui}/src/components/ui/radio-group.tsx     |   4 +-
 .../ui}/src/components/ui/resizable.tsx       |   2 +-
 .../ui}/src/components/ui/scroll-area.tsx     |   2 +-
 .../ui}/src/components/ui/select.tsx          |   4 +-
 .../ui}/src/components/ui/separator.tsx       |   2 +-
 .../ui}/src/components/ui/sheet.tsx           |   6 +-
 .../ui}/src/components/ui/sidebar.tsx         |  18 +-
 .../ui}/src/components/ui/skeleton.tsx        |   2 +-
 .../ui}/src/components/ui/slider.tsx          |   2 +-
 .../ui}/src/components/ui/sonner.tsx          |   2 +-
 .../ui}/src/components/ui/spinner.tsx         |   4 +-
 .../ui}/src/components/ui/switch.tsx          |   2 +-
 .../ui}/src/components/ui/table.tsx           |   2 +-
 .../ui}/src/components/ui/tabs.tsx            |   2 +-
 .../ui}/src/components/ui/textarea.tsx        |   2 +-
 .../ui}/src/components/ui/toggle-group.tsx    |   4 +-
 .../ui}/src/components/ui/toggle.tsx          |   2 +-
 .../ui}/src/components/ui/tooltip.tsx         |   2 +-
 packages/ui/src/env.d.ts                      |   4 +
 packages/ui/src/hooks/use-mobile.tsx          |  19 ++
 {apps/web => packages/ui}/src/lib/colors.ts   |   0
 packages/ui/src/lib/format.ts                 | 165 +++++++++++++
 .../landing => packages/ui}/src/lib/types.ts  |   0
 .../landing => packages/ui}/src/lib/utils.ts  |   0
 packages/ui/tsconfig.json                     |  17 ++
 237 files changed, 2987 insertions(+), 652 deletions(-)
 create mode 100644 apps/landing/src/components/FeatureDetailGrid.astro
 create mode 100644 apps/landing/src/components/FeatureHero.astro
 create mode 100644 apps/landing/src/components/RelatedFeatures.astro
 create mode 100644 apps/landing/src/components/SeoHead.astro
 create mode 100644 apps/landing/src/components/UseCaseShowcase.astro
 delete mode 100644 apps/landing/src/components/ui/button.tsx
 delete mode 100644 apps/landing/src/components/ui/tooltip.tsx
 delete mode 100644 apps/landing/src/lib/colors.ts
 create mode 100644 apps/landing/src/pages/features/ai-mcp-integration.astro
 create mode 100644 apps/landing/src/pages/features/distributed-tracing.astro
 create mode 100644 apps/landing/src/pages/features/error-tracking.astro
 create mode 100644 apps/landing/src/pages/features/log-management.astro
 create mode 100644 apps/landing/src/pages/features/metrics-dashboards.astro
 create mode 100644 apps/landing/src/pages/features/service-catalog.astro
 create mode 100644 apps/landing/src/pages/use-cases/api-performance.astro
 create mode 100644 apps/landing/src/pages/use-cases/ecommerce-observability.astro
 create mode 100644 apps/landing/src/pages/use-cases/microservices-debugging.astro
 delete mode 100644 apps/web/src/lib/utils.ts
 create mode 100644 packages/ui/package.json
 rename {apps/web => packages/ui}/src/components/charts/_shared/build-chart-config.ts (92%)
 rename {apps/web => packages/ui}/src/components/charts/_shared/chart-types.ts (100%)
 rename {apps/web => packages/ui}/src/components/charts/_shared/sample-data.ts (100%)
 rename {apps/web => packages/ui}/src/components/charts/_shared/svg-filters.tsx (100%)
 rename {apps/web => packages/ui}/src/components/charts/_shared/svg-patterns.tsx (100%)
 rename {apps/web => packages/ui}/src/components/charts/_shared/use-dynamic-dasharray.ts (100%)
 rename {apps/web => packages/ui}/src/components/charts/area/apdex-area-chart.tsx (89%)
 rename {apps/web => packages/ui}/src/components/charts/area/bar-pattern-area-chart.tsx (82%)
 rename {apps/web => packages/ui}/src/components/charts/area/dotted-pattern-area-chart.tsx (82%)
 rename {apps/web => packages/ui}/src/components/charts/area/error-rate-area-chart.tsx (89%)
 rename {apps/web => packages/ui}/src/components/charts/area/gradient-area-chart.tsx (83%)
 rename {apps/web => packages/ui}/src/components/charts/area/gradient-rounded-area-chart.tsx (83%)
 rename {apps/web => packages/ui}/src/components/charts/area/query-builder-area-chart.tsx (97%)
 rename {apps/web => packages/ui}/src/components/charts/area/throughput-area-chart.tsx (90%)
 rename {apps/web => packages/ui}/src/components/charts/bar/default-bar-chart.tsx (74%)
 rename {apps/web => packages/ui}/src/components/charts/bar/default-multiple-bar-chart.tsx (81%)
 rename {apps/web => packages/ui}/src/components/charts/bar/duotone-bar-chart.tsx (83%)
 rename {apps/web => packages/ui}/src/components/charts/bar/glowing-bar-chart.tsx (80%)
 rename {apps/web => packages/ui}/src/components/charts/bar/gradient-bar-chart.tsx (87%)
 rename {apps/web => packages/ui}/src/components/charts/bar/hatched-bar-chart.tsx (74%)
 rename {apps/web => packages/ui}/src/components/charts/bar/highlighted-bar-chart.tsx (83%)
 rename {apps/web => packages/ui}/src/components/charts/bar/query-builder-bar-chart.tsx (96%)
 rename {apps/web => packages/ui}/src/components/charts/index.ts (100%)
 rename {apps/web => packages/ui}/src/components/charts/line/dotted-line-chart.tsx (76%)
 rename {apps/web => packages/ui}/src/components/charts/line/dotted-multi-line-chart.tsx (81%)
 rename {apps/web => packages/ui}/src/components/charts/line/glowing-line-chart.tsx (75%)
 rename {apps/web => packages/ui}/src/components/charts/line/latency-line-chart.tsx (92%)
 rename {apps/web => packages/ui}/src/components/charts/line/number-dot-line-chart.tsx (83%)
 rename {apps/web => packages/ui}/src/components/charts/line/partial-line-chart.tsx (81%)
 rename {apps/web => packages/ui}/src/components/charts/line/pinging-dot-chart.tsx (87%)
 rename {apps/web => packages/ui}/src/components/charts/line/query-builder-line-chart.tsx (97%)
 rename {apps/web => packages/ui}/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx (76%)
 rename {apps/web => packages/ui}/src/components/charts/pie/default-radial-chart.tsx (69%)
 rename {apps/web => packages/ui}/src/components/charts/pie/glowing-radial-chart.tsx (79%)
 rename {apps/web => packages/ui}/src/components/charts/pie/increase-size-pie-chart.tsx (77%)
 rename {apps/web => packages/ui}/src/components/charts/pie/rounded-pie-chart.tsx (71%)
 rename {apps/web => packages/ui}/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx (80%)
 rename {apps/web => packages/ui}/src/components/charts/radar/glowing-stroke-radar-chart.tsx (75%)
 rename {apps/web => packages/ui}/src/components/charts/radar/stroke-multiple-radar-chart.tsx (81%)
 rename {apps/web => packages/ui}/src/components/charts/radar/stroke-radar-chart.tsx (76%)
 rename {apps/web => packages/ui}/src/components/charts/registry.ts (100%)
 create mode 100644 packages/ui/src/components/icons/alert-warning.tsx
 create mode 100644 packages/ui/src/components/icons/arrow-down.tsx
 create mode 100644 packages/ui/src/components/icons/arrow-left.tsx
 create mode 100644 packages/ui/src/components/icons/arrow-right.tsx
 create mode 100644 packages/ui/src/components/icons/check.tsx
 create mode 100644 packages/ui/src/components/icons/chevron-down.tsx
 create mode 100644 packages/ui/src/components/icons/chevron-expand-y.tsx
 create mode 100644 packages/ui/src/components/icons/chevron-left.tsx
 create mode 100644 packages/ui/src/components/icons/chevron-right.tsx
 create mode 100644 packages/ui/src/components/icons/chevron-up.tsx
 create mode 100644 packages/ui/src/components/icons/circle-check.tsx
 create mode 100644 packages/ui/src/components/icons/circle-info.tsx
 create mode 100644 packages/ui/src/components/icons/circle-xmark.tsx
 create mode 100644 packages/ui/src/components/icons/code.tsx
 create mode 100644 packages/ui/src/components/icons/dots.tsx
 create mode 100644 packages/ui/src/components/icons/eye.tsx
 create mode 100644 packages/ui/src/components/icons/icon.tsx
 create mode 100644 packages/ui/src/components/icons/index.ts
 create mode 100644 packages/ui/src/components/icons/loader.tsx
 create mode 100644 packages/ui/src/components/icons/magnifier.tsx
 create mode 100644 packages/ui/src/components/icons/minus.tsx
 create mode 100644 packages/ui/src/components/icons/network-nodes.tsx
 create mode 100644 packages/ui/src/components/icons/pulse.tsx
 create mode 100644 packages/ui/src/components/icons/radio-checked.tsx
 create mode 100644 packages/ui/src/components/icons/sidebar-left.tsx
 create mode 100644 packages/ui/src/components/icons/xmark.tsx
 rename {apps/landing => packages/ui}/src/components/traces/flamegraph-minimap.tsx (100%)
 rename {apps/landing => packages/ui}/src/components/traces/flamegraph-tooltip.tsx (100%)
 rename {apps/landing => packages/ui}/src/components/traces/flamegraph.tsx (100%)
 rename {apps/landing => packages/ui}/src/components/traces/flow-node.tsx (100%)
 rename {apps/landing => packages/ui}/src/components/traces/flow-utils.ts (100%)
 rename {apps/landing => packages/ui}/src/components/traces/flow-view.tsx (100%)
 rename {apps/web => packages/ui}/src/components/ui/accordion.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/alert-dialog.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/alert.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/aspect-ratio.tsx (90%)
 rename {apps/web => packages/ui}/src/components/ui/avatar.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/badge.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/breadcrumb.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/button-group.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/button.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/calendar.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/card.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/carousel.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/chart.tsx (99%)
 rename {apps/web => packages/ui}/src/components/ui/checkbox.tsx (94%)
 rename {apps/web => packages/ui}/src/components/ui/collapsible.tsx (100%)
 rename {apps/web => packages/ui}/src/components/ui/combobox.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/command.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/context-menu.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/dialog.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/direction.tsx (100%)
 rename {apps/web => packages/ui}/src/components/ui/drawer.tsx (99%)
 rename {apps/web => packages/ui}/src/components/ui/dropdown-menu.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/empty.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/field.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/gradient-chart.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/hover-card.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/input-group.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/input-otp.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/input.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/item.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/kbd.tsx (95%)
 rename {apps/web => packages/ui}/src/components/ui/label.tsx (92%)
 rename {apps/web => packages/ui}/src/components/ui/menubar.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/native-select.tsx (95%)
 rename {apps/web => packages/ui}/src/components/ui/navigation-menu.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/pagination.tsx (94%)
 rename {apps/web => packages/ui}/src/components/ui/popover.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/progress.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/radio-group.tsx (94%)
 rename {apps/web => packages/ui}/src/components/ui/resizable.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/scroll-area.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/select.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/separator.tsx (93%)
 rename {apps/web => packages/ui}/src/components/ui/sheet.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/sidebar.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/skeleton.tsx (86%)
 rename {apps/web => packages/ui}/src/components/ui/slider.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/sonner.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/spinner.tsx (80%)
 rename {apps/web => packages/ui}/src/components/ui/switch.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/table.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/tabs.tsx (98%)
 rename {apps/web => packages/ui}/src/components/ui/textarea.tsx (96%)
 rename {apps/web => packages/ui}/src/components/ui/toggle-group.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/toggle.tsx (97%)
 rename {apps/web => packages/ui}/src/components/ui/tooltip.tsx (98%)
 create mode 100644 packages/ui/src/env.d.ts
 create mode 100644 packages/ui/src/hooks/use-mobile.tsx
 rename {apps/web => packages/ui}/src/lib/colors.ts (100%)
 create mode 100644 packages/ui/src/lib/format.ts
 rename {apps/landing => packages/ui}/src/lib/types.ts (100%)
 rename {apps/landing => packages/ui}/src/lib/utils.ts (100%)
 create mode 100644 packages/ui/tsconfig.json

diff --git a/apps/landing/package.json b/apps/landing/package.json
index a1fc673..5664213 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@astrojs/react": "^4.4.2",
     "@maple/infra": "workspace:*",
+    "@maple/ui": "workspace:*",
     "alchemy": "https://pkg.pr.new/Makisuo/alchemy@e3f48848",
     "@base-ui/react": "^1.1.0",
     "@clerk/clerk-react": "^5.60.0",
@@ -24,6 +25,7 @@
     "astro": "^5.17.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "recharts": "2.15.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.4.0",
diff --git a/apps/landing/src/components/FeatureDetailGrid.astro b/apps/landing/src/components/FeatureDetailGrid.astro
new file mode 100644
index 0000000..14eb46e
--- /dev/null
+++ b/apps/landing/src/components/FeatureDetailGrid.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+    items: Array<{ title: string; description: string }>;
+}
+
+const { items } = Astro.props;
+---
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+    {items.map(item => (
+        <div class="bg-bg p-6 md:p-8">
+            <h3 class="text-base font-semibold text-fg mb-2">{item.title}</h3>
+            <p class="text-sm text-fg-muted leading-relaxed">{item.description}</p>
+        </div>
+    ))}
+</div>
diff --git a/apps/landing/src/components/FeatureHero.astro b/apps/landing/src/components/FeatureHero.astro
new file mode 100644
index 0000000..d31f759
--- /dev/null
+++ b/apps/landing/src/components/FeatureHero.astro
@@ -0,0 +1,49 @@
+---
+interface Props {
+    label: string;
+    title: string;
+    subtitle: string;
+}
+
+const { label, title, subtitle } = Astro.props;
+---
+
+<section class="relative pt-[47px] overflow-hidden">
+    <!-- Grid background -->
+    <div class="absolute inset-0 pointer-events-none" style="
+        background-image:
+            linear-gradient(to right, oklch(1 0 0 / 4%) 1px, transparent 1px),
+            linear-gradient(to bottom, oklch(1 0 0 / 4%) 1px, transparent 1px);
+        background-size: 60px 60px;
+        mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent);
+    "></div>
+
+    <div class="relative mx-auto max-w-6xl px-6 pt-24 md:pt-32 pb-16 md:pb-24">
+        <!-- Badge -->
+        <div class="mb-6">
+            <span class="inline-block border border-border px-3 py-1 text-[11px] text-accent uppercase tracking-wider">
+                {label}
+            </span>
+        </div>
+
+        <!-- Headline -->
+        <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-fg leading-tight max-w-3xl">
+            {title}
+        </h1>
+
+        <!-- Subtitle -->
+        <p class="mt-5 text-sm md:text-base text-fg-muted max-w-xl leading-relaxed">
+            {subtitle}
+        </p>
+
+        <!-- Dual CTAs -->
+        <div class="mt-8 flex flex-wrap items-center gap-4">
+            <a href="/waitlist" class="bg-accent text-accent-foreground px-6 py-2.5 text-sm font-medium hover:opacity-90 transition-opacity">
+                Join the waitlist
+            </a>
+            <a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="border border-border px-6 py-2.5 text-sm font-medium text-fg hover:opacity-90 transition-opacity">
+                View on GitHub
+            </a>
+        </div>
+    </div>
+</section>
diff --git a/apps/landing/src/components/FeatureSpotlights.astro b/apps/landing/src/components/FeatureSpotlights.astro
index de0a8b1..f9490bf 100644
--- a/apps/landing/src/components/FeatureSpotlights.astro
+++ b/apps/landing/src/components/FeatureSpotlights.astro
@@ -18,7 +18,7 @@
                     Visualize request flows across services with flamegraph and waterfall views.
                     Drill into any span to see attributes, events, and timing.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/distributed-tracing" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
             <div class="border border-border bg-bg-elevated overflow-hidden">
                 <!-- Mini waterfall view -->
@@ -96,7 +96,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     Search and filter logs with full-text search. Correlated with traces for seamless debugging across your stack.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/log-management" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
         </div>
 
@@ -108,7 +108,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     Track request rates, error rates, and latency percentiles. Build custom charts from any metric your services emit.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/metrics-dashboards" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
             <div class="grid grid-cols-2 gap-2">
                 <!-- Latency chart -->
@@ -183,7 +183,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     See all your services at a glance with latency percentiles, throughput, error rates, and environment badges.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/service-catalog" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
         </div>
     </div>
diff --git a/apps/landing/src/components/Footer.astro b/apps/landing/src/components/Footer.astro
index 31b2620..61a8ba7 100644
--- a/apps/landing/src/components/Footer.astro
+++ b/apps/landing/src/components/Footer.astro
@@ -4,7 +4,7 @@
 
 <footer class="border-t border-border">
     <div class="mx-auto max-w-6xl px-6 py-12">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
             <!-- Col 1: Logo + tagline -->
             <div class="col-span-2 md:col-span-1">
                 <div class="flex items-center gap-3 mb-3">
@@ -28,20 +28,35 @@
                 </ul>
             </div>
 
-            <!-- Col 3: Resources -->
+            <!-- Col 3: Features -->
             <div>
-                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Resources</h4>
+                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Features</h4>
                 <ul class="space-y-2">
-                    <li><a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">GitHub</a></li>
-                    <li><a href="https://opentelemetry.io" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">OpenTelemetry</a></li>
+                    <li><a href="/features/distributed-tracing" class="text-fg-muted text-xs hover:text-fg transition-colors">Distributed Tracing</a></li>
+                    <li><a href="/features/log-management" class="text-fg-muted text-xs hover:text-fg transition-colors">Log Management</a></li>
+                    <li><a href="/features/metrics-dashboards" class="text-fg-muted text-xs hover:text-fg transition-colors">Metrics & Dashboards</a></li>
+                    <li><a href="/features/service-catalog" class="text-fg-muted text-xs hover:text-fg transition-colors">Service Catalog</a></li>
+                    <li><a href="/features/error-tracking" class="text-fg-muted text-xs hover:text-fg transition-colors">Error Tracking</a></li>
+                    <li><a href="/features/ai-mcp-integration" class="text-fg-muted text-xs hover:text-fg transition-colors">AI & MCP</a></li>
                 </ul>
             </div>
 
-            <!-- Col 4: Community -->
+            <!-- Col 4: Use Cases -->
+            <div>
+                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Use Cases</h4>
+                <ul class="space-y-2">
+                    <li><a href="/use-cases/ecommerce-observability" class="text-fg-muted text-xs hover:text-fg transition-colors">E-Commerce</a></li>
+                    <li><a href="/use-cases/microservices-debugging" class="text-fg-muted text-xs hover:text-fg transition-colors">Microservices</a></li>
+                    <li><a href="/use-cases/api-performance" class="text-fg-muted text-xs hover:text-fg transition-colors">API Performance</a></li>
+                </ul>
+            </div>
+
+            <!-- Col 5: Community -->
             <div>
                 <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Community</h4>
                 <ul class="space-y-2">
-                    <li><span class="relative group cursor-default opacity-40 text-fg-muted text-xs">Discussions<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap bg-bg border border-border px-2 py-1 text-[10px] text-fg-muted opacity-0 group-hover:opacity-100 transition-opacity">Coming soon</span></span></li>
+                    <li><a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">GitHub</a></li>
+                    <li><a href="https://opentelemetry.io" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">OpenTelemetry</a></li>
                     <li><a href="https://x.com/maple_dev" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">Twitter / X</a></li>
                 </ul>
             </div>
diff --git a/apps/landing/src/components/Nav.astro b/apps/landing/src/components/Nav.astro
index 6719f17..676e6e2 100644
--- a/apps/landing/src/components/Nav.astro
+++ b/apps/landing/src/components/Nav.astro
@@ -9,6 +9,7 @@
 
 <nav class="fixed top-[28px] left-0 right-0 z-50 border-b border-border bg-bg/95 backdrop-blur-md">
     <div class="mx-auto max-w-6xl flex items-center justify-between px-6 h-14">
+        <!-- Logo -->
         <a href="/" class="flex items-center gap-3">
             <div class="w-7 h-7 bg-accent flex items-center justify-center">
                 <span class="text-accent-foreground text-sm font-bold">M</span>
@@ -17,13 +18,47 @@
         </a>
 
         <div class="flex items-center gap-6">
-            <a href="#features" class="text-fg-muted text-xs hover:text-fg transition-colors hidden sm:block">Features</a>
-            <a href="#how-it-works" class="text-fg-muted text-xs hover:text-fg transition-colors hidden sm:block">How it works</a>
+            <!-- Features dropdown (desktop only) -->
+            <div class="relative group hidden sm:block">
+                <button class="text-fg-muted text-xs hover:text-fg transition-colors flex items-center gap-1">
+                    Features
+                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </button>
+                <div class="invisible group-hover:visible group-focus-within:visible absolute top-full left-1/2 -translate-x-1/2 pt-2 z-50">
+                    <div class="bg-bg border border-border p-3 min-w-[320px] grid grid-cols-2 gap-1">
+                        <a href="/features/distributed-tracing" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Distributed Tracing</a>
+                        <a href="/features/metrics-dashboards" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Metrics & Dashboards</a>
+                        <a href="/features/log-management" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Log Management</a>
+                        <a href="/features/service-catalog" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Service Catalog & Map</a>
+                        <a href="/features/error-tracking" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Error Tracking</a>
+                        <a href="/features/ai-mcp-integration" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">AI & MCP Integration</a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Use Cases dropdown (desktop only) -->
+            <div class="relative group hidden sm:block">
+                <button class="text-fg-muted text-xs hover:text-fg transition-colors flex items-center gap-1">
+                    Use Cases
+                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+                </button>
+                <div class="invisible group-hover:visible group-focus-within:visible absolute top-full left-1/2 -translate-x-1/2 pt-2 z-50">
+                    <div class="bg-bg border border-border p-3 min-w-[220px]">
+                        <a href="/use-cases/ecommerce-observability" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">E-Commerce Observability</a>
+                        <a href="/use-cases/microservices-debugging" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Microservices Debugging</a>
+                        <a href="/use-cases/api-performance" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">API Performance</a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- GitHub icon -->
             <a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted hover:text-fg transition-colors hidden sm:block">
                 <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                 </svg>
             </a>
+
+            <!-- CTA -->
             <a href="/waitlist" class="bg-accent text-accent-foreground px-4 py-1.5 text-xs font-medium hover:opacity-90 transition-opacity">
                 Join waitlist
             </a>
diff --git a/apps/landing/src/components/RelatedFeatures.astro b/apps/landing/src/components/RelatedFeatures.astro
new file mode 100644
index 0000000..2d4fcc6
--- /dev/null
+++ b/apps/landing/src/components/RelatedFeatures.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+    current: string;
+}
+
+const { current } = Astro.props;
+
+const features = [
+    { slug: "distributed-tracing", label: "Distributed Tracing", description: "Follow every request across services" },
+    { slug: "log-management", label: "Log Management", description: "Search and correlate logs instantly" },
+    { slug: "metrics-dashboards", label: "Metrics & Dashboards", description: "Track every signal that matters" },
+    { slug: "service-catalog", label: "Service Catalog & Map", description: "All your services at a glance" },
+    { slug: "error-tracking", label: "Error Tracking", description: "Find and fix errors faster" },
+    { slug: "ai-mcp-integration", label: "AI & MCP Integration", description: "AI-powered diagnostics via MCP" },
+];
+
+const filtered = features.filter(f => f.slug !== current).slice(0, 3);
+---
+
+<section class="py-24 md:py-32">
+    <div class="mx-auto max-w-6xl px-6">
+        <span class="text-[11px] text-accent uppercase tracking-wider">Explore more</span>
+        <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-12">Related features</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+            {filtered.map(f => (
+                <a href={`/features/${f.slug}`} class="bg-bg p-6 md:p-8 hover:bg-muted/10 transition-colors group">
+                    <h3 class="text-base font-semibold text-fg mb-2 group-hover:text-accent transition-colors">{f.label}</h3>
+                    <p class="text-sm text-fg-muted leading-relaxed">{f.description}</p>
+                    <span class="mt-4 inline-block text-xs text-accent">Learn more &rarr;</span>
+                </a>
+            ))}
+        </div>
+    </div>
+</section>
diff --git a/apps/landing/src/components/SeoHead.astro b/apps/landing/src/components/SeoHead.astro
new file mode 100644
index 0000000..b290bb4
--- /dev/null
+++ b/apps/landing/src/components/SeoHead.astro
@@ -0,0 +1,31 @@
+---
+interface Props {
+    title: string;
+    description: string;
+    type?: "SoftwareApplication" | "WebPage";
+    url?: string;
+}
+
+const { title, description, type = "WebPage", url } = Astro.props;
+
+const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": type,
+    name: title,
+    description,
+    ...(url ? { url } : {}),
+    ...(type === "SoftwareApplication"
+        ? {
+              applicationCategory: "DeveloperApplication",
+              operatingSystem: "Web",
+              offers: {
+                  "@type": "Offer",
+                  price: "0",
+                  priceCurrency: "USD",
+              },
+          }
+        : {}),
+};
+---
+
+<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
diff --git a/apps/landing/src/components/TraceVisualization.tsx b/apps/landing/src/components/TraceVisualization.tsx
index 8e0d76a..f37f178 100644
--- a/apps/landing/src/components/TraceVisualization.tsx
+++ b/apps/landing/src/components/TraceVisualization.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react"
-import { Flamegraph } from "./traces/flamegraph"
-import { TraceFlowView } from "./traces/flow-view"
-import type { SpanNode } from "../lib/types"
+import { Flamegraph } from "@maple/ui/components/traces/flamegraph"
+import { TraceFlowView } from "@maple/ui/components/traces/flow-view"
+import type { SpanNode } from "@maple/ui/types"
 
 const BASE_TIME = "2024-01-15T14:23:01.000Z"
 
diff --git a/apps/landing/src/components/UseCaseShowcase.astro b/apps/landing/src/components/UseCaseShowcase.astro
new file mode 100644
index 0000000..2f691bd
--- /dev/null
+++ b/apps/landing/src/components/UseCaseShowcase.astro
@@ -0,0 +1,210 @@
+---
+
+---
+
+<section class="py-24 md:py-32">
+    <div class="mx-auto max-w-6xl px-6">
+        <span class="text-[11px] text-accent uppercase tracking-wider">Use Cases</span>
+        <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-16">Real-world debugging scenarios</h2>
+
+        <!-- Scenario 1: Checkout errors spike (text left, mock right) -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center pb-16 border-b border-border">
+            <div>
+                <span class="text-[11px] text-accent uppercase tracking-wider">E-Commerce</span>
+                <h3 class="mt-3 text-xl md:text-2xl font-bold text-fg">Checkout errors spike during a flash sale</h3>
+                <p class="mt-3 text-sm text-fg-muted leading-relaxed">
+                    Your flash sale goes live and payment failures start climbing. You need to find the failing service,
+                    the exact error, and the upstream cause — fast.
+                </p>
+                <p class="mt-4 text-xs text-accent leading-relaxed">
+                    Root cause in 90 seconds: Stripe timeout, correlated with retry-exhaustion logs.
+                </p>
+                <a href="/use-cases/ecommerce-observability" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">See the full story &rarr;</a>
+            </div>
+            <div class="border border-border bg-bg-elevated overflow-hidden">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Trace: f7a2c8e1</span>
+                </div>
+                <!-- Condensed trace with payment span in red -->
+                <div class="p-3 space-y-1.5">
+                    <div class="flex items-center gap-2">
+                        <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">api-gateway</span>
+                        <div class="flex-1 h-4 bg-bg relative">
+                            <div class="absolute inset-y-0 left-0 bg-chart-1/70 flex items-center px-1.5" style="width: 100%">
+                                <span class="text-[8px] text-fg truncate">POST /checkout</span>
+                            </div>
+                        </div>
+                        <span class="text-[8px] text-fg-muted w-10 text-right shrink-0">1.2s</span>
+                    </div>
+                    <div class="flex items-center gap-2 pl-4">
+                        <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">order-svc</span>
+                        <div class="flex-1 h-4 bg-bg relative">
+                            <div class="absolute inset-y-0 bg-chart-3/70 flex items-center px-1.5" style="width: 60%; left: 10%">
+                                <span class="text-[8px] text-fg truncate">createOrder</span>
+                            </div>
+                        </div>
+                        <span class="text-[8px] text-fg-muted w-10 text-right shrink-0">680ms</span>
+                    </div>
+                    <div class="flex items-center gap-2 pl-8">
+                        <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">payment-svc</span>
+                        <div class="flex-1 h-4 bg-bg relative">
+                            <div class="absolute inset-y-0 bg-destructive/70 flex items-center px-1.5" style="width: 50%; left: 25%">
+                                <span class="text-[8px] text-fg truncate">chargeCard ERROR</span>
+                            </div>
+                        </div>
+                        <span class="text-[8px] text-destructive w-10 text-right shrink-0">5000ms</span>
+                    </div>
+                </div>
+                <!-- Correlated log entry -->
+                <div class="border-t border-border px-3 py-2">
+                    <div class="text-[8px] text-fg-muted uppercase tracking-wider mb-1.5">Correlated Logs</div>
+                    <div class="flex items-center gap-2 text-[9px]">
+                        <span class="text-fg-muted font-mono text-[8px]">14:23:01</span>
+                        <span class="text-[7px] px-1 py-0.5 bg-yellow-500/10 text-yellow-400">WARN</span>
+                        <span class="text-fg-muted truncate">Retry 3/3 exhausted for Stripe charge txn_9d1e — timeout 5000ms</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Scenario 2: API latency doubles (mock left, text right) -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center py-16 border-b border-border">
+            <div class="order-2 md:order-1 border border-border bg-bg-elevated overflow-hidden">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Service Map</span>
+                </div>
+                <!-- Static service map with boxes and edges -->
+                <div class="p-4 relative" style="min-height: 200px">
+                    <!-- Service nodes -->
+                    <div class="flex justify-center gap-6 mb-6">
+                        <div class="border border-border bg-bg px-3 py-2 text-center">
+                            <span class="text-[9px] text-fg font-medium block">api-gateway</span>
+                            <span class="text-[8px] text-fg-muted">P99: 120ms</span>
+                        </div>
+                    </div>
+                    <div class="flex justify-center gap-3 mb-2">
+                        <svg class="w-full h-6" viewBox="0 0 320 24">
+                            <line x1="80" y1="0" x2="40" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                            <line x1="160" y1="0" x2="160" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                            <line x1="240" y1="0" x2="280" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                        </svg>
+                    </div>
+                    <div class="flex justify-center gap-3">
+                        <div class="border border-border bg-bg px-3 py-2 text-center">
+                            <span class="text-[9px] text-fg font-medium block">auth-svc</span>
+                            <span class="text-[8px] text-fg-muted">22ms</span>
+                        </div>
+                        <div class="border border-border bg-bg px-3 py-2 text-center">
+                            <span class="text-[9px] text-fg font-medium block">order-svc</span>
+                            <span class="text-[8px] text-fg-muted">85ms</span>
+                        </div>
+                        <div class="border-2 border-destructive bg-destructive/5 px-3 py-2 text-center">
+                            <span class="text-[9px] text-destructive font-medium block">user-db</span>
+                            <span class="text-[8px] text-destructive">450ms</span>
+                        </div>
+                    </div>
+                    <div class="flex justify-center mt-2">
+                        <svg class="h-6 w-32" viewBox="0 0 128 24">
+                            <line x1="64" y1="0" x2="64" y2="24" stroke="oklch(0.637 0.237 25.331)" stroke-width="1.5"/>
+                        </svg>
+                    </div>
+                    <div class="flex justify-center">
+                        <div class="border border-border bg-bg px-3 py-2 text-center">
+                            <span class="text-[9px] text-fg font-medium block">postgres</span>
+                            <span class="text-[8px] text-fg-muted">pool: 50/50</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="order-1 md:order-2">
+                <span class="text-[11px] text-accent uppercase tracking-wider">Microservices</span>
+                <h3 class="mt-3 text-xl md:text-2xl font-bold text-fg">API latency doubles without any deployment</h3>
+                <p class="mt-3 text-sm text-fg-muted leading-relaxed">
+                    No one deployed anything, but P95 latency just doubled. The service map shows which
+                    dependency is the bottleneck and how the cascade propagates.
+                </p>
+                <p class="mt-4 text-xs text-accent leading-relaxed">
+                    Service map reveals connection pool exhaustion cascading from user-db.
+                </p>
+                <a href="/use-cases/microservices-debugging" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">See the full story &rarr;</a>
+            </div>
+        </div>
+
+        <!-- Scenario 3: 3 AM alert (text left, mock right) -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center pt-16">
+            <div>
+                <span class="text-[11px] text-accent uppercase tracking-wider">AI Diagnostics</span>
+                <h3 class="mt-3 text-xl md:text-2xl font-bold text-fg">3 AM alert, nobody awake</h3>
+                <p class="mt-3 text-sm text-fg-muted leading-relaxed">
+                    An alert fires at 3 AM. Instead of paging your on-call, the MCP agent connects to Maple,
+                    investigates the issue, and posts a diagnosis to Slack.
+                </p>
+                <p class="mt-4 text-xs text-accent leading-relaxed">
+                    MCP agent auto-diagnoses and posts to Slack before anyone wakes up.
+                </p>
+                <a href="/use-cases/api-performance" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">See the full story &rarr;</a>
+            </div>
+            <div class="border border-border bg-bg-elevated overflow-hidden">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">MCP Agent Session</span>
+                </div>
+                <!-- Agent conversation -->
+                <div class="p-3 space-y-3">
+                    <!-- Alert trigger -->
+                    <div class="flex items-start gap-2">
+                        <div class="w-4 h-4 bg-destructive/20 flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-destructive">!</span>
+                        </div>
+                        <div>
+                            <span class="text-[9px] text-fg font-medium">Alert: Error rate spike</span>
+                            <span class="text-[8px] text-fg-muted block">payment-svc at 4.2%, threshold 1.0%</span>
+                        </div>
+                    </div>
+                    <!-- Tool call 1 -->
+                    <div class="border border-border bg-bg px-2.5 py-1.5">
+                        <div class="flex items-center gap-1.5">
+                            <span class="text-[8px] text-accent font-mono">system_health()</span>
+                        </div>
+                        <span class="text-[8px] text-fg-muted block mt-0.5">3 services degraded, payment-svc critical</span>
+                    </div>
+                    <!-- Tool call 2 -->
+                    <div class="border border-border bg-bg px-2.5 py-1.5">
+                        <div class="flex items-center gap-1.5">
+                            <span class="text-[8px] text-accent font-mono">find_errors("payment-svc")</span>
+                        </div>
+                        <span class="text-[8px] text-fg-muted block mt-0.5">42 errors in last 5m: StripeTimeoutError</span>
+                    </div>
+                    <!-- Diagnosis -->
+                    <div class="flex items-start gap-2">
+                        <div class="w-4 h-4 bg-chart-2/20 flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-chart-2">AI</span>
+                        </div>
+                        <div>
+                            <span class="text-[9px] text-fg font-medium">Diagnosis</span>
+                            <span class="text-[8px] text-fg-muted block">Stripe API timeout causing payment failures. Connection pool at capacity. Recommend circuit breaker activation.</span>
+                        </div>
+                    </div>
+                    <!-- Slack notification -->
+                    <div class="border-t border-border pt-2 mt-2">
+                        <div class="flex items-center gap-1.5">
+                            <span class="text-[8px] text-chart-3">Posted to #incidents</span>
+                            <span class="text-[8px] text-fg-muted">3:02 AM</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/apps/landing/src/components/ui/button.tsx b/apps/landing/src/components/ui/button.tsx
deleted file mode 100644
index 657e9f8..0000000
--- a/apps/landing/src/components/ui/button.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../lib/utils"
-
-const buttonVariants = cva(
-  "rounded-none border border-transparent text-xs font-medium inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground",
-      },
-      size: {
-        default: "h-8 gap-1.5 px-2.5",
-        sm: "h-7 gap-1 px-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/apps/landing/src/components/ui/tooltip.tsx b/apps/landing/src/components/ui/tooltip.tsx
deleted file mode 100644
index 24b8e5b..0000000
--- a/apps/landing/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client"
-
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
-import { cn } from "../../lib/utils"
-
-function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
-}
-
-function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  side = "top",
-  sideOffset = 4,
-  align = "center",
-  alignOffset = 0,
-  children,
-  ...props
-}: TooltipPrimitive.Popup.Props &
-  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-        className="isolate z-50"
-      >
-        <TooltipPrimitive.Popup
-          data-slot="tooltip-content"
-          className={cn(
-            "rounded-none px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </TooltipPrimitive.Popup>
-      </TooltipPrimitive.Positioner>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/landing/src/lib/colors.ts b/apps/landing/src/lib/colors.ts
deleted file mode 100644
index ea3b708..0000000
--- a/apps/landing/src/lib/colors.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-const SERVICE_HUES = [210, 160, 280, 340, 30, 100, 50, 190]
-
-function hashString(str: string): number {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return Math.abs(hash)
-}
-
-export function extractClassName(spanName: string): string | null {
-  const dotMatch = spanName.match(/^(.+?)\.[\w]+$/)
-  if (dotMatch) return dotMatch[1]
-  const colonMatch = spanName.match(/^(.+?)::[\w]+$/)
-  if (colonMatch) return colonMatch[1]
-  return null
-}
-
-export function getSpanColorStyle(
-  spanName: string,
-  serviceName: string,
-  services: string[]
-): React.CSSProperties {
-  const serviceIndex = services.indexOf(serviceName)
-  const baseHue = SERVICE_HUES[serviceIndex % SERVICE_HUES.length]
-  const className = extractClassName(spanName)
-
-  let lightness = 0.55
-  let chroma = 0.15
-
-  if (className) {
-    const classHash = hashString(className)
-    lightness = 0.45 + (classHash % 20) / 100
-    chroma = 0.12 + (classHash % 6) / 100
-  }
-
-  const bgColor = `oklch(${lightness} ${chroma} ${baseHue})`
-  const textColor = lightness > 0.55 ? 'oklch(0.2 0 0)' : 'oklch(0.98 0 0)'
-
-  return { backgroundColor: bgColor, color: textColor }
-}
-
-export function getServiceLegendColor(serviceName: string, services: string[]): string {
-  const serviceIndex = services.indexOf(serviceName)
-  const baseHue = SERVICE_HUES[serviceIndex % SERVICE_HUES.length]
-  return `oklch(0.55 0.15 ${baseHue})`
-}
-
-export function calculateSelfTime(
-  span: { startTime: string; durationMs: number },
-  children: Array<{ startTime: string; durationMs: number }>
-): number {
-  if (children.length === 0) return span.durationMs
-
-  const spanStartMs = new Date(span.startTime).getTime()
-  const spanEndMs = spanStartMs + span.durationMs
-
-  const childIntervals = children.map(child => {
-    const childStartMs = new Date(child.startTime).getTime()
-    const childEndMs = childStartMs + child.durationMs
-    return {
-      start: Math.max(childStartMs, spanStartMs),
-      end: Math.min(childEndMs, spanEndMs)
-    }
-  }).filter(i => i.end > i.start)
-
-  if (childIntervals.length === 0) return span.durationMs
-
-  childIntervals.sort((a, b) => a.start - b.start)
-  const merged: Array<{ start: number; end: number }> = []
-
-  for (const interval of childIntervals) {
-    if (merged.length === 0 || merged[merged.length - 1].end < interval.start) {
-      merged.push({ ...interval })
-    } else {
-      merged[merged.length - 1].end = Math.max(merged[merged.length - 1].end, interval.end)
-    }
-  }
-
-  const childrenTime = merged.reduce((sum, i) => sum + (i.end - i.start), 0)
-  return Math.max(0, span.durationMs - childrenTime)
-}
diff --git a/apps/landing/src/pages/features/ai-mcp-integration.astro b/apps/landing/src/pages/features/ai-mcp-integration.astro
new file mode 100644
index 0000000..c8b3cda
--- /dev/null
+++ b/apps/landing/src/pages/features/ai-mcp-integration.astro
@@ -0,0 +1,118 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="AI & MCP Integration | Maple" description="Connect Claude, Cursor, or any MCP client to diagnose production issues with 10+ AI-powered tools.">
+    <SeoHead title="AI & MCP Integration | Maple" description="Connect Claude, Cursor, or any MCP client to diagnose production issues with 10+ AI-powered tools." />
+    <Nav />
+    <FeatureHero
+        label="AI & MCP"
+        title="AI-powered observability diagnostics"
+        subtitle="Connect Claude Code, Cursor, or any MCP-compatible client to diagnose production issues using 10+ specialized tools."
+    />
+
+    <!-- Demo Mock: Agent Conversation -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Claude Code</span>
+                </div>
+
+                <div class="p-4 md:p-6 space-y-4 max-w-2xl mx-auto">
+                    <!-- User message -->
+                    <div class="flex gap-3">
+                        <div class="w-5 h-5 bg-muted flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-fg font-bold">U</span>
+                        </div>
+                        <div>
+                            <span class="text-[10px] text-fg leading-relaxed">Our checkout is failing for some users. What's happening?</span>
+                        </div>
+                    </div>
+
+                    <!-- Agent: system_health tool call -->
+                    <div class="flex gap-3">
+                        <div class="w-5 h-5 bg-accent/20 flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-accent font-bold">A</span>
+                        </div>
+                        <div class="space-y-2 flex-1">
+                            <div class="inline-flex items-center gap-1.5 border border-border bg-bg px-2 py-1">
+                                <div class="w-1.5 h-1.5 bg-chart-2"></div>
+                                <code class="text-[9px] text-fg-muted">system_health</code>
+                            </div>
+                            <p class="text-[10px] text-fg leading-relaxed">3 services healthy, <span class="text-destructive">payment-svc showing 2.3% error rate</span></p>
+                        </div>
+                    </div>
+
+                    <!-- Agent: find_errors tool call -->
+                    <div class="flex gap-3">
+                        <div class="w-5 h-5 bg-accent/20 flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-accent font-bold">A</span>
+                        </div>
+                        <div class="space-y-2 flex-1">
+                            <div class="inline-flex items-center gap-1.5 border border-border bg-bg px-2 py-1">
+                                <div class="w-1.5 h-1.5 bg-chart-2"></div>
+                                <code class="text-[9px] text-fg-muted">find_errors</code>
+                            </div>
+                            <p class="text-[10px] text-fg leading-relaxed">142 <code class="text-[9px] text-destructive bg-destructive/10 px-1 py-0.5">ConnectionTimeout</code> errors in payment-svc in last hour</p>
+                        </div>
+                    </div>
+
+                    <!-- Agent: inspect_trace tool call -->
+                    <div class="flex gap-3">
+                        <div class="w-5 h-5 bg-accent/20 flex items-center justify-center shrink-0 mt-0.5">
+                            <span class="text-[8px] text-accent font-bold">A</span>
+                        </div>
+                        <div class="space-y-2 flex-1">
+                            <div class="inline-flex items-center gap-1.5 border border-border bg-bg px-2 py-1">
+                                <div class="w-1.5 h-1.5 bg-chart-2"></div>
+                                <code class="text-[9px] text-fg-muted">inspect_trace</code>
+                            </div>
+                            <p class="text-[10px] text-fg leading-relaxed">Root cause: Stripe API timeout at 5000ms. Payment retries exhausting (3/3 failed)</p>
+                        </div>
+                    </div>
+
+                    <!-- Agent summary box -->
+                    <div class="ml-8 border border-accent/30 bg-accent/5 p-4">
+                        <div class="flex items-center gap-2 mb-2">
+                            <div class="w-1.5 h-1.5 bg-accent"></div>
+                            <span class="text-[9px] text-accent uppercase tracking-wider font-medium">Diagnosis</span>
+                        </div>
+                        <p class="text-[10px] text-fg leading-relaxed">
+                            Root cause identified: Stripe webhook timeout causing payment failures. Recommend increasing timeout to 10s and adding circuit breaker.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "10+ MCP Tools", description: "system_health, find_errors, inspect_trace, search_logs, search_traces, and more." },
+                { title: "Auto-Diagnosis", description: "AI agent chains tools together to automatically trace from symptoms to root cause." },
+                { title: "Claude Code", description: "Connect directly from Claude Code for terminal-based observability diagnostics." },
+                { title: "Cursor", description: "Use Maple's MCP server from Cursor for in-editor debugging." },
+                { title: "OpenCode", description: "Compatible with OpenCode and other MCP clients." },
+                { title: "Any MCP Client", description: "Standard MCP protocol means any compatible client works out of the box." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="ai-mcp-integration" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/features/distributed-tracing.astro b/apps/landing/src/pages/features/distributed-tracing.astro
new file mode 100644
index 0000000..1b67096
--- /dev/null
+++ b/apps/landing/src/pages/features/distributed-tracing.astro
@@ -0,0 +1,151 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Distributed Tracing | Maple" description="Visualize request flows across services with flamegraph and waterfall views. Drill into any span to see attributes, events, and timing.">
+    <SeoHead title="Distributed Tracing | Maple" description="Visualize request flows across services with flamegraph and waterfall views. Drill into any span to see attributes, events, and timing." />
+    <Nav />
+    <FeatureHero
+        label="Distributed Tracing"
+        title="Follow every request across services"
+        subtitle="Visualize request flows with flamegraph, waterfall, and flow views. See exactly where time is spent across your distributed system."
+    />
+
+    <!-- Demo Mock: Waterfall Trace View -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Trace: a3f8c1d2</span>
+                </div>
+
+                <div class="flex flex-col md:flex-row">
+                    <!-- Waterfall spans -->
+                    <div class="flex-1 p-4 md:p-6 space-y-3">
+                        <div class="flex items-center justify-between mb-4">
+                            <span class="text-[10px] text-fg-muted uppercase tracking-wider">Waterfall</span>
+                            <span class="text-[10px] text-fg-muted">Duration: 1.24s</span>
+                        </div>
+
+                        <!-- api-gateway span -->
+                        <div class="space-y-1">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[9px] text-fg-muted w-24 shrink-0 truncate">api-gateway</span>
+                                <div class="flex-1 h-5 bg-bg relative">
+                                    <div class="absolute inset-y-0 left-0 bg-chart-1/80 flex items-center px-2" style="width: 100%">
+                                        <span class="text-[8px] text-fg font-medium truncate">POST /checkout</span>
+                                    </div>
+                                </div>
+                                <span class="text-[9px] text-fg-muted w-12 text-right shrink-0">1.24s</span>
+                            </div>
+                        </div>
+
+                        <!-- auth-service span -->
+                        <div class="space-y-1 pl-6">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[9px] text-fg-muted w-24 shrink-0 truncate">auth-service</span>
+                                <div class="flex-1 h-5 bg-bg relative">
+                                    <div class="absolute inset-y-0 left-0 bg-chart-2/80 flex items-center px-2" style="width: 15%">
+                                        <span class="text-[8px] text-fg font-medium truncate">validateToken</span>
+                                    </div>
+                                </div>
+                                <span class="text-[9px] text-fg-muted w-12 text-right shrink-0">45ms</span>
+                            </div>
+                        </div>
+
+                        <!-- order-service span -->
+                        <div class="space-y-1 pl-6">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[9px] text-fg-muted w-24 shrink-0 truncate">order-service</span>
+                                <div class="flex-1 h-5 bg-bg relative">
+                                    <div class="absolute inset-y-0 bg-chart-3/80 flex items-center px-2" style="width: 40%; left: 12%">
+                                        <span class="text-[8px] text-fg font-medium truncate">createOrder</span>
+                                    </div>
+                                </div>
+                                <span class="text-[9px] text-fg-muted w-12 text-right shrink-0">480ms</span>
+                            </div>
+                        </div>
+
+                        <!-- payment-svc span (ERROR) -->
+                        <div class="space-y-1 pl-12">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[9px] text-fg-muted w-24 shrink-0 truncate">payment-svc</span>
+                                <div class="flex-1 h-5 bg-bg relative">
+                                    <div class="absolute inset-y-0 bg-destructive/60 flex items-center px-2" style="width: 45%; left: 30%">
+                                        <span class="text-[8px] text-fg font-medium truncate">processPayment</span>
+                                    </div>
+                                </div>
+                                <span class="text-[9px] text-destructive w-12 text-right shrink-0">ERROR</span>
+                            </div>
+                        </div>
+
+                        <!-- inventory-svc span -->
+                        <div class="space-y-1 pl-12">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[9px] text-fg-muted w-24 shrink-0 truncate">inventory-svc</span>
+                                <div class="flex-1 h-5 bg-bg relative">
+                                    <div class="absolute inset-y-0 bg-chart-5/80 flex items-center px-2" style="width: 12%; left: 52%">
+                                        <span class="text-[8px] text-fg font-medium truncate">reserveItems</span>
+                                    </div>
+                                </div>
+                                <span class="text-[9px] text-fg-muted w-12 text-right shrink-0">89ms</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Span attributes panel -->
+                    <div class="w-full md:w-64 border-t md:border-t-0 md:border-l border-border p-4 md:p-6">
+                        <span class="text-[10px] text-fg-muted uppercase tracking-wider">Span Attributes</span>
+                        <div class="mt-4 space-y-3">
+                            <div>
+                                <span class="text-[9px] text-fg-muted block">http.method</span>
+                                <span class="text-[10px] text-fg font-mono">POST</span>
+                            </div>
+                            <div>
+                                <span class="text-[9px] text-fg-muted block">http.route</span>
+                                <span class="text-[10px] text-fg font-mono">/checkout</span>
+                            </div>
+                            <div>
+                                <span class="text-[9px] text-fg-muted block">http.status_code</span>
+                                <span class="text-[10px] text-destructive font-mono">500</span>
+                            </div>
+                            <div>
+                                <span class="text-[9px] text-fg-muted block">error.type</span>
+                                <span class="text-[10px] text-destructive font-mono">PaymentTimeout</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "Waterfall View", description: "See the full timeline of a request with nested spans, timing bars, and service colors." },
+                { title: "Flamegraph View", description: "Identify hot paths and time-consuming operations with interactive flamegraph visualization." },
+                { title: "Flow View", description: "Understand service-to-service communication with an interactive dependency flow diagram." },
+                { title: "Span Attributes", description: "Inspect HTTP headers, database queries, error messages, and custom attributes on any span." },
+                { title: "Trace-Log Correlation", description: "Jump from any span directly to its correlated logs. Every signal connected by trace ID." },
+                { title: "Root Span Filtering", description: "Filter traces by service, duration, status, HTTP method, and custom attributes." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="distributed-tracing" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/features/error-tracking.astro b/apps/landing/src/pages/features/error-tracking.astro
new file mode 100644
index 0000000..56f1c03
--- /dev/null
+++ b/apps/landing/src/pages/features/error-tracking.astro
@@ -0,0 +1,145 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Error Tracking | Maple" description="Find and fix errors faster with smart grouping, trend detection, and root cause analysis linked to traces.">
+    <SeoHead title="Error Tracking | Maple" description="Find and fix errors faster with smart grouping, trend detection, and root cause analysis linked to traces." />
+    <Nav />
+    <FeatureHero
+        label="Error Tracking"
+        title="Find and fix errors faster"
+        subtitle="Smart error grouping with trend detection, root cause analysis, and direct links to failing traces."
+    />
+
+    <!-- Demo Mock: Error Dashboard -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Errors</span>
+                </div>
+
+                <div class="p-4 md:p-6">
+                    <!-- Stat cards row -->
+                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+                        <!-- Total Errors -->
+                        <div class="border border-border bg-bg p-4">
+                            <span class="text-[9px] text-fg-muted uppercase tracking-wider block mb-2">Total Errors</span>
+                            <div class="flex items-baseline gap-2">
+                                <span class="text-2xl font-bold text-fg">1,247</span>
+                                <span class="text-[9px] text-destructive flex items-center gap-0.5">
+                                    <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                                    23% from last hour
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Error Rate -->
+                        <div class="border border-border bg-bg p-4">
+                            <span class="text-[9px] text-fg-muted uppercase tracking-wider block mb-2">Error Rate</span>
+                            <span class="text-2xl font-bold text-fg">2.3%</span>
+                        </div>
+
+                        <!-- Affected Services -->
+                        <div class="border border-border bg-bg p-4">
+                            <span class="text-[9px] text-fg-muted uppercase tracking-wider block mb-2">Affected Services</span>
+                            <span class="text-2xl font-bold text-fg">4<span class="text-base text-fg-muted font-normal">/12</span></span>
+                        </div>
+                    </div>
+
+                    <!-- Error type table -->
+                    <div class="border border-border bg-bg">
+                        <div class="px-4 py-3 border-b border-border">
+                            <span class="text-[10px] text-fg font-medium">Error Groups</span>
+                        </div>
+                        <table class="w-full">
+                            <thead>
+                                <tr class="border-b border-border">
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-left py-2 px-4">Error Type</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-left py-2 px-4">Service</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 px-4">Count</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 px-4">Trend</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-border/50 hover:bg-muted/5">
+                                    <td class="text-[10px] text-destructive font-mono py-2.5 px-4">ConnectionTimeout</td>
+                                    <td class="text-[10px] text-fg-muted py-2.5 px-4">payment-svc</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 px-4">142</td>
+                                    <td class="text-right py-2.5 px-4">
+                                        <span class="text-[9px] text-destructive flex items-center justify-end gap-1">
+                                            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                                            trending
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr class="border-b border-border/50 hover:bg-muted/5">
+                                    <td class="text-[10px] text-destructive font-mono py-2.5 px-4">NullPointerException</td>
+                                    <td class="text-[10px] text-fg-muted py-2.5 px-4">order-service</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 px-4">89</td>
+                                    <td class="text-right py-2.5 px-4">
+                                        <span class="text-[9px] text-fg-muted flex items-center justify-end gap-1">
+                                            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>
+                                            stable
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr class="border-b border-border/50 hover:bg-muted/5">
+                                    <td class="text-[10px] text-destructive font-mono py-2.5 px-4">AuthTokenExpired</td>
+                                    <td class="text-[10px] text-fg-muted py-2.5 px-4">auth-service</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 px-4">67</td>
+                                    <td class="text-right py-2.5 px-4">
+                                        <span class="text-[9px] text-chart-2 flex items-center justify-end gap-1">
+                                            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
+                                            declining
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr class="hover:bg-muted/5">
+                                    <td class="text-[10px] text-destructive font-mono py-2.5 px-4">RateLimitExceeded</td>
+                                    <td class="text-[10px] text-fg-muted py-2.5 px-4">api-gateway</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 px-4">34</td>
+                                    <td class="text-right py-2.5 px-4">
+                                        <span class="text-[9px] text-destructive flex items-center justify-end gap-1">
+                                            <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                                            trending
+                                        </span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "Smart Grouping", description: "Errors are automatically grouped by type and message. No manual triage needed." },
+                { title: "Trend Detection", description: "See at a glance which errors are trending up, stable, or declining." },
+                { title: "Root Cause Analysis", description: "Drill into any error group to see the failing trace and exact span." },
+                { title: "Trace Linking", description: "Every error links directly to the trace that produced it." },
+                { title: "Spam Filtering", description: "Filter out noisy errors like health check failures and bot traffic." },
+                { title: "Environment Filtering", description: "Compare error rates between production, staging, and development." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="error-tracking" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/features/log-management.astro b/apps/landing/src/pages/features/log-management.astro
new file mode 100644
index 0000000..aa81fc5
--- /dev/null
+++ b/apps/landing/src/pages/features/log-management.astro
@@ -0,0 +1,130 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Log Management | Maple" description="Search and filter logs with full-text search. Correlate with traces for seamless debugging across your stack.">
+    <SeoHead title="Log Management | Maple" description="Search and filter logs with full-text search. Correlate with traces for seamless debugging across your stack." />
+    <Nav />
+    <FeatureHero
+        label="Log Management"
+        title="Search and correlate logs instantly"
+        subtitle="Full-text search across all your logs with severity filtering, service grouping, and trace correlation."
+    />
+
+    <!-- Demo Mock: Log Viewer -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Logs</span>
+                </div>
+
+                <div class="flex flex-col md:flex-row">
+                    <!-- Sidebar: severity filter -->
+                    <div class="w-full md:w-44 border-b md:border-b-0 md:border-r border-border p-4">
+                        <span class="text-[10px] text-fg-muted uppercase tracking-wider block mb-3">Severity</span>
+                        <div class="space-y-2">
+                            <div class="flex items-center justify-between px-2 py-1.5 bg-destructive/10 border border-destructive/20">
+                                <span class="text-[10px] text-destructive font-medium">ERROR</span>
+                                <span class="text-[9px] text-destructive">142</span>
+                            </div>
+                            <div class="flex items-center justify-between px-2 py-1.5">
+                                <span class="text-[10px] text-chart-1 font-medium">WARN</span>
+                                <span class="text-[9px] text-fg-muted">891</span>
+                            </div>
+                            <div class="flex items-center justify-between px-2 py-1.5">
+                                <span class="text-[10px] text-chart-2 font-medium">INFO</span>
+                                <span class="text-[9px] text-fg-muted">12.3K</span>
+                            </div>
+                            <div class="flex items-center justify-between px-2 py-1.5">
+                                <span class="text-[10px] text-fg-muted font-medium">DEBUG</span>
+                                <span class="text-[9px] text-fg-muted">45.1K</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Main content -->
+                    <div class="flex-1 p-4 md:p-6">
+                        <!-- Search bar -->
+                        <div class="flex items-center gap-2 px-3 py-2 border border-border bg-bg mb-4">
+                            <svg class="w-3 h-3 text-fg-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+                            <span class="text-[10px] text-fg">connection timeout</span>
+                        </div>
+
+                        <!-- Log entries -->
+                        <div class="space-y-0">
+                            <!-- ERROR row (highlighted) -->
+                            <div class="flex items-start gap-3 px-3 py-2 bg-destructive/5 border-l-2 border-destructive">
+                                <span class="text-[9px] text-fg-muted font-mono shrink-0">14:23:01</span>
+                                <span class="text-[9px] text-chart-4 shrink-0 w-20 truncate">payment-svc</span>
+                                <span class="text-[9px] text-destructive font-medium shrink-0 w-10">ERROR</span>
+                                <span class="text-[10px] text-fg leading-tight">Connection timeout after 5000ms</span>
+                            </div>
+
+                            <!-- WARN row -->
+                            <div class="flex items-start gap-3 px-3 py-2 border-b border-border/50">
+                                <span class="text-[9px] text-fg-muted font-mono shrink-0">14:23:01</span>
+                                <span class="text-[9px] text-chart-4 shrink-0 w-20 truncate">payment-svc</span>
+                                <span class="text-[9px] text-chart-1 font-medium shrink-0 w-10">WARN</span>
+                                <span class="text-[10px] text-fg leading-tight">Retry 2/3 charge txn_9d1e</span>
+                            </div>
+
+                            <!-- INFO row -->
+                            <div class="flex items-start gap-3 px-3 py-2 border-b border-border/50">
+                                <span class="text-[9px] text-fg-muted font-mono shrink-0">14:22:58</span>
+                                <span class="text-[9px] text-chart-3 shrink-0 w-20 truncate">api-gateway</span>
+                                <span class="text-[9px] text-chart-2 font-medium shrink-0 w-10">INFO</span>
+                                <span class="text-[10px] text-fg leading-tight">POST /checkout 200 203ms</span>
+                            </div>
+
+                            <!-- DEBUG row -->
+                            <div class="flex items-start gap-3 px-3 py-2 border-b border-border/50">
+                                <span class="text-[9px] text-fg-muted font-mono shrink-0">14:22:57</span>
+                                <span class="text-[9px] text-chart-2 shrink-0 w-20 truncate">auth-svc</span>
+                                <span class="text-[9px] text-fg-muted font-medium shrink-0 w-10">DEBUG</span>
+                                <span class="text-[10px] text-fg leading-tight">Token validated usr_2f8a</span>
+                            </div>
+
+                            <!-- Another ERROR row -->
+                            <div class="flex items-start gap-3 px-3 py-2 bg-destructive/5 border-l-2 border-destructive">
+                                <span class="text-[9px] text-fg-muted font-mono shrink-0">14:22:55</span>
+                                <span class="text-[9px] text-chart-4 shrink-0 w-20 truncate">payment-svc</span>
+                                <span class="text-[9px] text-destructive font-medium shrink-0 w-10">ERROR</span>
+                                <span class="text-[10px] text-fg leading-tight">Connection timeout after 5000ms</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "Full-Text Search", description: "Search across all log fields with instant results. Find the needle in the haystack." },
+                { title: "Severity Filtering", description: "Filter by ERROR, WARN, INFO, or DEBUG with real-time counts." },
+                { title: "Trace Correlation", description: "Click any log to see its parent trace. Jump between logs and spans seamlessly." },
+                { title: "Service Filtering", description: "Filter logs by service name to focus on the component you're debugging." },
+                { title: "Log Detail View", description: "Expand any log entry to see all structured fields, resource attributes, and context." },
+                { title: "Real-Time Streaming", description: "Watch logs arrive in real-time as your services emit them." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="log-management" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/features/metrics-dashboards.astro b/apps/landing/src/pages/features/metrics-dashboards.astro
new file mode 100644
index 0000000..d691225
--- /dev/null
+++ b/apps/landing/src/pages/features/metrics-dashboards.astro
@@ -0,0 +1,172 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Metrics & Dashboards | Maple" description="Build custom dashboards with 20+ chart types. Track latency, throughput, error rates, and any custom metric.">
+    <SeoHead title="Metrics & Dashboards | Maple" description="Build custom dashboards with 20+ chart types. Track latency, throughput, error rates, and any custom metric." />
+    <Nav />
+    <FeatureHero
+        label="Metrics & Dashboards"
+        title="Track every signal that matters"
+        subtitle="Drag-and-drop dashboard builder with 20+ chart types. Monitor latency, throughput, error rates, and custom metrics."
+    />
+
+    <!-- Demo Mock: Dashboard Canvas -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Dashboard: Production Overview</span>
+                </div>
+
+                <div class="p-4 md:p-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <!-- P95 Latency widget -->
+                        <div class="border border-border bg-bg p-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-[9px] text-fg-muted cursor-grab">&#x22EE;&#x22EE;</span>
+                                    <span class="text-[10px] text-fg font-medium">P95 Latency</span>
+                                </div>
+                                <span class="text-[9px] text-fg-muted">Last 1h</span>
+                            </div>
+                            <div class="flex items-end gap-[2px] h-20">
+                                <div class="flex-1 bg-chart-1/30 hover:bg-chart-1/50 transition-colors" style="height: 30%"></div>
+                                <div class="flex-1 bg-chart-1/40 hover:bg-chart-1/50 transition-colors" style="height: 40%"></div>
+                                <div class="flex-1 bg-chart-1/50 hover:bg-chart-1/60 transition-colors" style="height: 35%"></div>
+                                <div class="flex-1 bg-chart-1/50 hover:bg-chart-1/60 transition-colors" style="height: 55%"></div>
+                                <div class="flex-1 bg-chart-1/60 hover:bg-chart-1/70 transition-colors" style="height: 50%"></div>
+                                <div class="flex-1 bg-chart-1/60 hover:bg-chart-1/70 transition-colors" style="height: 65%"></div>
+                                <div class="flex-1 bg-chart-1/70 hover:bg-chart-1/80 transition-colors" style="height: 80%"></div>
+                                <div class="flex-1 bg-chart-1 hover:bg-chart-1 transition-colors" style="height: 95%"></div>
+                            </div>
+                            <div class="flex items-center justify-between mt-2">
+                                <span class="text-[9px] text-fg-muted">12:00</span>
+                                <span class="text-[9px] text-fg-muted">13:00</span>
+                            </div>
+                        </div>
+
+                        <!-- Throughput widget -->
+                        <div class="border border-border bg-bg p-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-[9px] text-fg-muted cursor-grab">&#x22EE;&#x22EE;</span>
+                                    <span class="text-[10px] text-fg font-medium">Throughput</span>
+                                </div>
+                                <span class="text-[9px] text-fg-muted">Last 1h</span>
+                            </div>
+                            <div class="flex items-end gap-[2px] h-20">
+                                <div class="flex-1 bg-chart-3/70 hover:bg-chart-3/90 transition-colors" style="height: 60%"></div>
+                                <div class="flex-1 bg-chart-3/70 hover:bg-chart-3/90 transition-colors" style="height: 75%"></div>
+                                <div class="flex-1 bg-chart-3/70 hover:bg-chart-3/90 transition-colors" style="height: 65%"></div>
+                                <div class="flex-1 bg-chart-3/80 hover:bg-chart-3/90 transition-colors" style="height: 85%"></div>
+                                <div class="flex-1 bg-chart-3/80 hover:bg-chart-3/90 transition-colors" style="height: 90%"></div>
+                                <div class="flex-1 bg-chart-3/70 hover:bg-chart-3/90 transition-colors" style="height: 70%"></div>
+                                <div class="flex-1 bg-chart-3/80 hover:bg-chart-3/90 transition-colors" style="height: 80%"></div>
+                                <div class="flex-1 bg-chart-3 hover:bg-chart-3 transition-colors" style="height: 88%"></div>
+                            </div>
+                            <div class="flex items-center justify-between mt-2">
+                                <span class="text-[9px] text-fg-muted">12:00</span>
+                                <span class="text-[9px] text-fg-muted">13:00</span>
+                            </div>
+                        </div>
+
+                        <!-- Error Rate stat widget -->
+                        <div class="border border-border bg-bg p-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-[9px] text-fg-muted cursor-grab">&#x22EE;&#x22EE;</span>
+                                    <span class="text-[10px] text-fg font-medium">Error Rate</span>
+                                </div>
+                                <span class="text-[9px] text-fg-muted">Last 1h</span>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <span class="text-3xl font-bold text-fg">0.42%</span>
+                                <div class="flex-1">
+                                    <div class="flex items-end gap-[1px] h-8">
+                                        <div class="flex-1 bg-chart-2/30" style="height: 40%"></div>
+                                        <div class="flex-1 bg-chart-2/35" style="height: 35%"></div>
+                                        <div class="flex-1 bg-chart-2/40" style="height: 50%"></div>
+                                        <div class="flex-1 bg-chart-2/45" style="height: 45%"></div>
+                                        <div class="flex-1 bg-chart-2/50" style="height: 55%"></div>
+                                        <div class="flex-1 bg-chart-2/55" style="height: 60%"></div>
+                                        <div class="flex-1 bg-chart-2/60" style="height: 50%"></div>
+                                        <div class="flex-1 bg-chart-2/65" style="height: 65%"></div>
+                                        <div class="flex-1 bg-chart-2/70" style="height: 55%"></div>
+                                        <div class="flex-1 bg-chart-2/75" style="height: 70%"></div>
+                                        <div class="flex-1 bg-chart-2/80" style="height: 60%"></div>
+                                        <div class="flex-1 bg-chart-2" style="height: 42%"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <span class="text-[9px] text-chart-2 mt-2 block">Within healthy threshold</span>
+                        </div>
+
+                        <!-- Mini services table -->
+                        <div class="border border-border bg-bg p-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-[9px] text-fg-muted cursor-grab">&#x22EE;&#x22EE;</span>
+                                    <span class="text-[10px] text-fg font-medium">Top Services</span>
+                                </div>
+                                <span class="text-[9px] text-fg-muted">By latency</span>
+                            </div>
+                            <div class="space-y-0">
+                                <div class="flex items-center justify-between py-2 border-b border-border/50">
+                                    <span class="text-[10px] text-fg">api-gateway</span>
+                                    <div class="flex items-center gap-4">
+                                        <span class="text-[9px] text-fg-muted">P95: 45ms</span>
+                                        <span class="text-[9px] text-chart-2">0.94</span>
+                                    </div>
+                                </div>
+                                <div class="flex items-center justify-between py-2 border-b border-border/50">
+                                    <span class="text-[10px] text-fg">order-service</span>
+                                    <div class="flex items-center gap-4">
+                                        <span class="text-[9px] text-fg-muted">P95: 89ms</span>
+                                        <span class="text-[9px] text-chart-2">0.87</span>
+                                    </div>
+                                </div>
+                                <div class="flex items-center justify-between py-2">
+                                    <span class="text-[10px] text-fg">payment-svc</span>
+                                    <div class="flex items-center gap-4">
+                                        <span class="text-[9px] text-fg-muted">P95: 150ms</span>
+                                        <span class="text-[9px] text-chart-1">0.72</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "Drag-Drop Builder", description: "Build dashboards visually. Drag widgets, resize them, arrange in any layout." },
+                { title: "20+ Chart Types", description: "Area, line, bar, pie, radar charts with multiple style variants." },
+                { title: "Gauge & Counter", description: "Display scalar metrics with stat widgets, gauges, and counters." },
+                { title: "Custom Time Ranges", description: "Zoom into any time window. Compare periods side-by-side." },
+                { title: "Dashboard Sharing", description: "Share dashboards with your team. Persist layouts to your account." },
+                { title: "Widget Templates", description: "Start fast with pre-built widget presets for common observability patterns." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="metrics-dashboards" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/features/service-catalog.astro b/apps/landing/src/pages/features/service-catalog.astro
new file mode 100644
index 0000000..1b391b9
--- /dev/null
+++ b/apps/landing/src/pages/features/service-catalog.astro
@@ -0,0 +1,153 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import FeatureDetailGrid from "../../components/FeatureDetailGrid.astro";
+import RelatedFeatures from "../../components/RelatedFeatures.astro";
+import SeoHead from "../../components/SeoHead.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Service Catalog & Map | Maple" description="See all your services at a glance with latency percentiles, Apdex scores, throughput, and dependency mapping.">
+    <SeoHead title="Service Catalog & Map | Maple" description="See all your services at a glance with latency percentiles, Apdex scores, throughput, and dependency mapping." />
+    <Nav />
+    <FeatureHero
+        label="Service Catalog"
+        title="All your services at a glance"
+        subtitle="Monitor every service with latency percentiles, Apdex scores, throughput metrics, and dependency visualization."
+    />
+
+    <!-- Demo Mock: Services Table + Dependency Graph -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6">
+            <div class="bg-bg-elevated border border-border">
+                <!-- Window chrome -->
+                <div class="flex items-center gap-2 px-4 py-3 border-b border-border">
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <div class="w-2 h-2 bg-border"></div>
+                    <span class="text-[9px] text-fg-muted ml-2">Services</span>
+                </div>
+
+                <div class="flex flex-col lg:flex-row">
+                    <!-- Services table -->
+                    <div class="flex-1 p-4 md:p-6 overflow-x-auto">
+                        <table class="w-full">
+                            <thead>
+                                <tr class="border-b border-border">
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-left py-2 pr-4">Service</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-left py-2 pr-4">Env</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 pr-4">P50</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 pr-4">P95</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 pr-4">P99</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2 pr-4">Apdex</th>
+                                    <th class="text-[9px] text-fg-muted uppercase tracking-wider text-right py-2">Throughput</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-border/50">
+                                    <td class="text-[10px] text-fg py-2.5 pr-4">api-gateway</td>
+                                    <td class="text-[9px] text-fg-muted py-2.5 pr-4">prod</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">12ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">45ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">120ms</td>
+                                    <td class="text-[10px] text-chart-2 font-mono text-right py-2.5 pr-4">0.94</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5">1.2K/s</td>
+                                </tr>
+                                <tr class="border-b border-border/50">
+                                    <td class="text-[10px] text-fg py-2.5 pr-4">order-service</td>
+                                    <td class="text-[9px] text-fg-muted py-2.5 pr-4">prod</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">23ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">89ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">234ms</td>
+                                    <td class="text-[10px] text-chart-2 font-mono text-right py-2.5 pr-4">0.87</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5">456/s</td>
+                                </tr>
+                                <tr class="border-b border-border/50">
+                                    <td class="text-[10px] text-fg py-2.5 pr-4">payment-svc</td>
+                                    <td class="text-[9px] text-fg-muted py-2.5 pr-4">prod</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">34ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">150ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">380ms</td>
+                                    <td class="text-[10px] text-chart-1 font-mono text-right py-2.5 pr-4">0.72</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5">234/s</td>
+                                </tr>
+                                <tr>
+                                    <td class="text-[10px] text-fg py-2.5 pr-4">user-db</td>
+                                    <td class="text-[9px] text-fg-muted py-2.5 pr-4">prod</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">8ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">15ms</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5 pr-4">42ms</td>
+                                    <td class="text-[10px] text-chart-2 font-mono text-right py-2.5 pr-4">0.98</td>
+                                    <td class="text-[10px] text-fg font-mono text-right py-2.5">890/s</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <!-- Mini dependency graph -->
+                    <div class="w-full lg:w-72 border-t lg:border-t-0 lg:border-l border-border p-4 md:p-6">
+                        <span class="text-[10px] text-fg-muted uppercase tracking-wider block mb-4">Dependencies</span>
+                        <div class="relative h-48">
+                            <!-- api-gateway (top center) -->
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 border border-chart-1/40 bg-chart-1/10 px-3 py-1.5">
+                                <span class="text-[9px] text-chart-1">api-gateway</span>
+                            </div>
+
+                            <!-- Lines from api-gateway down -->
+                            <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 240 180">
+                                <!-- api-gateway to order-service -->
+                                <line x1="120" y1="30" x2="60" y2="80" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
+                                <!-- api-gateway to auth-service -->
+                                <line x1="120" y1="30" x2="180" y2="80" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
+                                <!-- order-service to payment-svc -->
+                                <line x1="60" y1="105" x2="60" y2="145" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
+                                <!-- auth-service to user-db -->
+                                <line x1="180" y1="105" x2="180" y2="145" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
+                            </svg>
+
+                            <!-- order-service (middle left) -->
+                            <div class="absolute top-[75px] left-0 border border-chart-3/40 bg-chart-3/10 px-3 py-1.5">
+                                <span class="text-[9px] text-chart-3">order-service</span>
+                            </div>
+
+                            <!-- auth-service (middle right) -->
+                            <div class="absolute top-[75px] right-0 border border-chart-2/40 bg-chart-2/10 px-3 py-1.5">
+                                <span class="text-[9px] text-chart-2">auth-service</span>
+                            </div>
+
+                            <!-- payment-svc (bottom left) -->
+                            <div class="absolute bottom-0 left-0 border border-destructive/40 bg-destructive/10 px-3 py-1.5">
+                                <span class="text-[9px] text-destructive">payment-svc</span>
+                            </div>
+
+                            <!-- user-db (bottom right) -->
+                            <div class="absolute bottom-0 right-0 border border-chart-5/40 bg-chart-5/10 px-3 py-1.5">
+                                <span class="text-[9px] text-chart-5">user-db</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Detail Grid -->
+    <section class="py-24 md:py-32">
+        <div class="mx-auto max-w-6xl px-6">
+            <FeatureDetailGrid items={[
+                { title: "Latency Percentiles", description: "Track P50, P95, and P99 latency for every service in real-time." },
+                { title: "Apdex Score", description: "Application performance index at a glance. Color-coded for quick assessment." },
+                { title: "Service Dependencies", description: "Visualize service-to-service communication with an interactive dependency map." },
+                { title: "Environment Filtering", description: "Filter by production, staging, or any custom environment." },
+                { title: "Commit SHA Tracking", description: "Correlate performance changes with specific deployments." },
+                { title: "Throughput Monitoring", description: "Track requests per second across all services." },
+            ]} />
+        </div>
+    </section>
+
+    <RelatedFeatures current="service-catalog" />
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/index.astro b/apps/landing/src/pages/index.astro
index 923f3c9..6405d94 100644
--- a/apps/landing/src/pages/index.astro
+++ b/apps/landing/src/pages/index.astro
@@ -5,6 +5,7 @@ import Hero from "../components/Hero.astro";
 import TrustBar from "../components/TrustBar.astro";
 import ProductTabs from "../components/ProductTabs.astro";
 import FeatureSpotlights from "../components/FeatureSpotlights.astro";
+import UseCaseShowcase from "../components/UseCaseShowcase.astro";
 import WhyOpenTelemetry from "../components/WhyOpenTelemetry.astro";
 import TechnicalDifferentiators from "../components/TechnicalDifferentiators.astro";
 import AIAgentIntegration from "../components/AIAgentIntegration.astro";
@@ -26,6 +27,7 @@ if (!PUBLISHABLE_KEY) {
     <TrustBar />
     <ProductTabs />
     <FeatureSpotlights />
+    <UseCaseShowcase />
     <WhyOpenTelemetry />
     <TechnicalDifferentiators />
     <AIAgentIntegration />
diff --git a/apps/landing/src/pages/use-cases/api-performance.astro b/apps/landing/src/pages/use-cases/api-performance.astro
new file mode 100644
index 0000000..e966ed2
--- /dev/null
+++ b/apps/landing/src/pages/use-cases/api-performance.astro
@@ -0,0 +1,216 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="API Performance Monitoring | Maple" description="Monitor API latency, throughput, and error rates with custom dashboards, Apdex scoring, and AI-powered diagnostics.">
+    <Nav />
+    <FeatureHero
+        label="Use Case"
+        title="Monitor API performance end-to-end"
+        subtitle="Track SLOs, detect latency regressions, and let AI agents diagnose issues while you sleep."
+    />
+
+    <!-- Scenario Walkthrough -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6 space-y-16">
+
+            <!-- Step 1: SLO monitoring -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">1</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">SLO monitoring</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Your Apdex score drops below the acceptable threshold, and P99 latency breaches 200ms.
+                        The dashboard immediately surfaces which endpoints are affected.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">API Performance Dashboard</span>
+                    </div>
+                    <div class="p-4 grid grid-cols-2 gap-3">
+                        <!-- Apdex widget -->
+                        <div class="border border-border bg-bg p-3">
+                            <span class="text-[8px] text-fg-muted block mb-1">Apdex Score</span>
+                            <div class="flex items-baseline gap-2">
+                                <span class="text-xl font-bold text-yellow-400">0.72</span>
+                                <span class="text-[8px] text-fg-muted">/ 1.0</span>
+                            </div>
+                            <div class="mt-2 w-full h-1.5 bg-bg-elevated">
+                                <div class="h-full bg-yellow-400/70" style="width: 72%"></div>
+                            </div>
+                            <span class="text-[8px] text-yellow-400 mt-1 block">Below target (0.85)</span>
+                        </div>
+                        <!-- P99 widget -->
+                        <div class="border border-border bg-bg p-3">
+                            <span class="text-[8px] text-fg-muted block mb-1">P99 Latency</span>
+                            <div class="flex items-baseline gap-2">
+                                <span class="text-xl font-bold text-destructive">380ms</span>
+                            </div>
+                            <div class="mt-2 flex items-end gap-[2px] h-6">
+                                <div class="flex-1 bg-chart-1/40 h-[30%]"></div>
+                                <div class="flex-1 bg-chart-1/40 h-[35%]"></div>
+                                <div class="flex-1 bg-chart-1/50 h-[32%]"></div>
+                                <div class="flex-1 bg-chart-1/50 h-[40%]"></div>
+                                <div class="flex-1 bg-chart-1/60 h-[55%]"></div>
+                                <div class="flex-1 bg-destructive/60 h-[75%]"></div>
+                                <div class="flex-1 bg-destructive/70 h-[88%]"></div>
+                                <div class="flex-1 bg-destructive h-[95%]"></div>
+                            </div>
+                            <div class="relative mt-1">
+                                <div class="absolute w-full border-t border-dashed border-destructive/50" style="bottom: 0"></div>
+                                <span class="text-[7px] text-destructive">threshold: 200ms</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 2: Regression detection -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">2</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Regression detection</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Compare performance across commits to pinpoint exactly when the regression was introduced.
+                        The commit comparison table shows the P99 jump from 120ms to 380ms.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Commit Comparison — order-service</span>
+                    </div>
+                    <div class="p-0">
+                        <div class="flex items-center text-[8px] text-fg-muted border-b border-border bg-muted/30 px-3 py-1.5">
+                            <span class="w-20 shrink-0">Commit</span>
+                            <span class="w-16 shrink-0">P50</span>
+                            <span class="w-16 shrink-0">P95</span>
+                            <span class="w-16 shrink-0">P99</span>
+                            <span class="flex-1 text-right">Error %</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-2 border-b border-border">
+                            <span class="w-20 shrink-0 text-fg font-mono text-[8px]">abc123</span>
+                            <span class="w-16 shrink-0 text-fg-muted font-mono">24ms</span>
+                            <span class="w-16 shrink-0 text-fg-muted font-mono">85ms</span>
+                            <span class="w-16 shrink-0 text-fg-muted font-mono">120ms</span>
+                            <span class="flex-1 text-right text-fg-muted font-mono">0.1%</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-2 bg-destructive/5">
+                            <span class="w-20 shrink-0 text-fg font-mono text-[8px]">def456</span>
+                            <span class="w-16 shrink-0 text-fg-muted font-mono">42ms</span>
+                            <span class="w-16 shrink-0 text-destructive font-mono">210ms</span>
+                            <span class="w-16 shrink-0 text-destructive font-mono font-medium">380ms</span>
+                            <span class="flex-1 text-right text-destructive font-mono">1.8%</span>
+                        </div>
+                    </div>
+                    <div class="px-3 py-2 border-t border-border">
+                        <div class="flex items-center gap-2">
+                            <div class="w-2 h-2 bg-destructive"></div>
+                            <span class="text-[8px] text-fg-muted">P99 regression: <span class="text-destructive font-medium">+217%</span> after commit def456</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 3: AI diagnosis -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">3</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">AI diagnosis</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        The MCP agent automatically analyzes the regression, traces it to the specific commit,
+                        and identifies the root cause: an N+1 query introduced in the order service.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">MCP Agent</span>
+                    </div>
+                    <div class="p-3 space-y-3">
+                        <!-- Agent thinking -->
+                        <div class="flex items-start gap-2">
+                            <div class="w-4 h-4 bg-chart-2/20 flex items-center justify-center shrink-0 mt-0.5">
+                                <span class="text-[8px] text-chart-2">AI</span>
+                            </div>
+                            <span class="text-[9px] text-fg-muted">Analyzing latency regression in order-service...</span>
+                        </div>
+                        <!-- Tool call -->
+                        <div class="border border-border bg-bg px-2.5 py-1.5">
+                            <div class="flex items-center gap-1.5">
+                                <span class="text-[8px] text-accent font-mono">diagnose_service("order-service")</span>
+                            </div>
+                            <span class="text-[8px] text-fg-muted block mt-0.5">P99 jumped 217% between abc123 and def456</span>
+                        </div>
+                        <!-- Tool call 2 -->
+                        <div class="border border-border bg-bg px-2.5 py-1.5">
+                            <div class="flex items-center gap-1.5">
+                                <span class="text-[8px] text-accent font-mono">find_slow_traces("order-service", commit="def456")</span>
+                            </div>
+                            <span class="text-[8px] text-fg-muted block mt-0.5">12 traces with 50+ db spans per request (was 3)</span>
+                        </div>
+                        <!-- Diagnosis -->
+                        <div class="flex items-start gap-2">
+                            <div class="w-4 h-4 bg-chart-2/20 flex items-center justify-center shrink-0 mt-0.5">
+                                <span class="text-[8px] text-chart-2">AI</span>
+                            </div>
+                            <div>
+                                <span class="text-[9px] text-fg font-medium">Root Cause Found</span>
+                                <span class="text-[8px] text-fg-muted block">N+1 query detected in order-service after commit def456. Each order now triggers individual item lookups instead of a batch query. Recommend adding eager loading.</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Feature Highlights -->
+    <section class="py-24 md:py-32 border-t border-border">
+        <div class="mx-auto max-w-6xl px-6">
+            <span class="text-[11px] text-accent uppercase tracking-wider">Capabilities</span>
+            <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-12">Built for API reliability</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Custom Dashboards</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Build API monitoring dashboards with latency, throughput, and error widgets. Drag-and-drop layout.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Apdex Scoring</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Application performance index with configurable thresholds per service and endpoint.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">AI Diagnostics</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">MCP agent automatically traces regressions to specific commits and queries. Diagnosis while you sleep.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/use-cases/ecommerce-observability.astro b/apps/landing/src/pages/use-cases/ecommerce-observability.astro
new file mode 100644
index 0000000..342cc58
--- /dev/null
+++ b/apps/landing/src/pages/use-cases/ecommerce-observability.astro
@@ -0,0 +1,206 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="E-Commerce Observability | Maple" description="Debug checkout failures, payment timeouts, and inventory issues in real-time with distributed tracing and log correlation.">
+    <Nav />
+    <FeatureHero
+        label="Use Case"
+        title="Debug checkout failures in seconds"
+        subtitle="When your flash sale hits and payments start failing, Maple shows you exactly what's happening across every service."
+    />
+
+    <!-- Scenario Walkthrough -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6 space-y-16">
+
+            <!-- Step 1: Alert fires -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">1</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Alert fires</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Your monitoring detects an error rate spike on the payment service. The alert includes
+                        the threshold breach and affected service, giving you immediate context.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Alerts</span>
+                    </div>
+                    <div class="p-4">
+                        <div class="border border-destructive/30 bg-destructive/5 p-3">
+                            <div class="flex items-center gap-2 mb-2">
+                                <div class="w-2 h-2 bg-destructive"></div>
+                                <span class="text-[10px] text-fg font-medium">Error rate spike: payment-svc</span>
+                            </div>
+                            <div class="space-y-1">
+                                <div class="flex items-center justify-between text-[9px]">
+                                    <span class="text-fg-muted">Current error rate</span>
+                                    <span class="text-destructive font-mono">2.3%</span>
+                                </div>
+                                <div class="flex items-center justify-between text-[9px]">
+                                    <span class="text-fg-muted">Threshold</span>
+                                    <span class="text-fg-muted font-mono">1.0%</span>
+                                </div>
+                                <div class="flex items-center justify-between text-[9px]">
+                                    <span class="text-fg-muted">Triggered</span>
+                                    <span class="text-fg-muted font-mono">14:22:45 UTC</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 2: Trace the failure -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">2</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Trace the failure</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Click into a failing trace to see the full request path. The payment span is immediately
+                        visible in red, showing a 5000ms timeout on the Stripe API call.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Trace: d4e1a9f2</span>
+                    </div>
+                    <div class="p-3 space-y-1.5">
+                        <div class="flex items-center gap-2">
+                            <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">api-gateway</span>
+                            <div class="flex-1 h-4 bg-bg relative">
+                                <div class="absolute inset-y-0 left-0 bg-chart-1/70 flex items-center px-1.5" style="width: 100%">
+                                    <span class="text-[8px] text-fg truncate">POST /checkout</span>
+                                </div>
+                            </div>
+                            <span class="text-[8px] text-fg-muted w-12 text-right shrink-0">5.2s</span>
+                        </div>
+                        <div class="flex items-center gap-2 pl-4">
+                            <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">auth-svc</span>
+                            <div class="flex-1 h-4 bg-bg relative">
+                                <div class="absolute inset-y-0 left-0 bg-chart-2/70 flex items-center px-1.5" style="width: 8%">
+                                    <span class="text-[8px] text-fg truncate">validate</span>
+                                </div>
+                            </div>
+                            <span class="text-[8px] text-fg-muted w-12 text-right shrink-0">38ms</span>
+                        </div>
+                        <div class="flex items-center gap-2 pl-4">
+                            <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">order-svc</span>
+                            <div class="flex-1 h-4 bg-bg relative">
+                                <div class="absolute inset-y-0 bg-chart-3/70 flex items-center px-1.5" style="width: 40%; left: 8%">
+                                    <span class="text-[8px] text-fg truncate">createOrder</span>
+                                </div>
+                            </div>
+                            <span class="text-[8px] text-fg-muted w-12 text-right shrink-0">180ms</span>
+                        </div>
+                        <div class="flex items-center gap-2 pl-8">
+                            <span class="text-[9px] text-fg-muted w-20 shrink-0 truncate">payment-svc</span>
+                            <div class="flex-1 h-4 bg-destructive/10 relative border border-destructive/30">
+                                <div class="absolute inset-y-0 bg-destructive/60 flex items-center px-1.5" style="width: 96%; left: 2%">
+                                    <span class="text-[8px] text-fg truncate">chargeCard TIMEOUT</span>
+                                </div>
+                            </div>
+                            <span class="text-[8px] text-destructive w-12 text-right shrink-0 font-medium">5000ms</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 3: Find root cause -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">3</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Find root cause</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Jump to correlated logs for the failing span. The Stripe API timeout and retry exhaustion
+                        are immediately visible, confirming the root cause without switching tools.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Correlated Logs</span>
+                    </div>
+                    <div class="p-0">
+                        <div class="flex items-center text-[8px] text-fg-muted border-b border-border bg-muted/30 px-3 py-1">
+                            <span class="w-14 shrink-0">Time</span>
+                            <span class="w-10 shrink-0">Level</span>
+                            <span class="flex-1">Message</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-1.5 border-b border-border">
+                            <span class="w-14 shrink-0 text-fg-muted font-mono text-[8px]">14:22:48</span>
+                            <span class="w-10 shrink-0"><span class="text-[7px] px-1 py-0.5 bg-yellow-500/10 text-yellow-400">WARN</span></span>
+                            <span class="flex-1 text-fg-muted truncate">Stripe API response time: 4800ms (threshold: 3000ms)</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-1.5 border-b border-border bg-destructive/5">
+                            <span class="w-14 shrink-0 text-fg-muted font-mono text-[8px]">14:22:50</span>
+                            <span class="w-10 shrink-0"><span class="text-[7px] px-1 py-0.5 bg-red-500/10 text-red-400">ERROR</span></span>
+                            <span class="flex-1 text-fg-muted truncate">Stripe API timeout after 5000ms on charge txn_9d1e</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-1.5 border-b border-border bg-destructive/5">
+                            <span class="w-14 shrink-0 text-fg-muted font-mono text-[8px]">14:22:51</span>
+                            <span class="w-10 shrink-0"><span class="text-[7px] px-1 py-0.5 bg-red-500/10 text-red-400">ERROR</span></span>
+                            <span class="flex-1 text-fg-muted truncate">Retry 3/3 exhausted for charge txn_9d1e</span>
+                        </div>
+                        <div class="flex items-center text-[9px] px-3 py-1.5">
+                            <span class="w-14 shrink-0 text-fg-muted font-mono text-[8px]">14:22:51</span>
+                            <span class="w-10 shrink-0"><span class="text-[7px] px-1 py-0.5 bg-red-500/10 text-red-400">ERROR</span></span>
+                            <span class="flex-1 text-fg-muted truncate">Checkout failed: payment_timeout usr_2f8a order_7c3d</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Feature Highlights -->
+    <section class="py-24 md:py-32 border-t border-border">
+        <div class="mx-auto max-w-6xl px-6">
+            <span class="text-[11px] text-accent uppercase tracking-wider">Capabilities</span>
+            <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-12">Built for e-commerce reliability</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Distributed Tracing</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Follow checkout requests from cart to payment to confirmation. See every service hop with timing.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Log Correlation</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Every failed payment links to its retry logs and timeout errors. One click from trace to logs.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Error Tracking</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Group payment errors by type, see trends, fix systematically. No more searching through log files.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/landing/src/pages/use-cases/microservices-debugging.astro b/apps/landing/src/pages/use-cases/microservices-debugging.astro
new file mode 100644
index 0000000..d9e1225
--- /dev/null
+++ b/apps/landing/src/pages/use-cases/microservices-debugging.astro
@@ -0,0 +1,220 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Nav from "../../components/Nav.astro";
+import FeatureHero from "../../components/FeatureHero.astro";
+import BottomCTA from "../../components/BottomCTA.astro";
+import Footer from "../../components/Footer.astro";
+---
+
+<Layout title="Microservices Debugging | Maple" description="Debug latency cascades across distributed services with service maps, trace analysis, and dependency visualization.">
+    <Nav />
+    <FeatureHero
+        label="Use Case"
+        title="Debug latency cascades across services"
+        subtitle="When latency doubles without a deployment, Maple's service map shows you exactly where the cascade originates."
+    />
+
+    <!-- Scenario Walkthrough -->
+    <section class="py-16 md:py-24">
+        <div class="mx-auto max-w-6xl px-6 space-y-16">
+
+            <!-- Step 1: Dashboard alert -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">1</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Dashboard alert</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Your P95 latency dashboard shows a sudden spike. No deployments in the last 24 hours,
+                        so something in the infrastructure changed. Time to investigate.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">P95 Latency — api-gateway</span>
+                    </div>
+                    <div class="p-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="text-[9px] text-fg-muted">Last 60 minutes</span>
+                            <span class="text-[9px] text-destructive font-mono">Current: 480ms</span>
+                        </div>
+                        <div class="flex items-end gap-[3px] h-20">
+                            <div class="flex-1 bg-chart-1/50 h-[20%]"></div>
+                            <div class="flex-1 bg-chart-1/50 h-[22%]"></div>
+                            <div class="flex-1 bg-chart-1/50 h-[18%]"></div>
+                            <div class="flex-1 bg-chart-1/50 h-[25%]"></div>
+                            <div class="flex-1 bg-chart-1/50 h-[20%]"></div>
+                            <div class="flex-1 bg-chart-1/55 h-[23%]"></div>
+                            <div class="flex-1 bg-chart-1/55 h-[22%]"></div>
+                            <div class="flex-1 bg-chart-1/60 h-[28%]"></div>
+                            <div class="flex-1 bg-chart-1/65 h-[35%]"></div>
+                            <div class="flex-1 bg-chart-1/70 h-[48%]"></div>
+                            <div class="flex-1 bg-destructive/70 h-[72%]"></div>
+                            <div class="flex-1 bg-destructive/70 h-[85%]"></div>
+                            <div class="flex-1 bg-destructive/80 h-[90%]"></div>
+                            <div class="flex-1 bg-destructive/80 h-[88%]"></div>
+                            <div class="flex-1 bg-destructive h-[92%]"></div>
+                            <div class="flex-1 bg-destructive h-[95%]"></div>
+                        </div>
+                        <div class="flex items-center justify-between mt-2">
+                            <span class="text-[8px] text-fg-muted">13:00</span>
+                            <div class="flex items-center gap-1">
+                                <div class="w-6 border-t border-dashed border-destructive/50"></div>
+                                <span class="text-[8px] text-destructive">threshold: 200ms</span>
+                            </div>
+                            <span class="text-[8px] text-fg-muted">14:00</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 2: Service map investigation -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">2</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Service map investigation</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        The service map highlights user-db with a red border, indicating it is the source of
+                        the latency cascade. The 450ms edge latency is far above its normal 12ms baseline.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Service Map</span>
+                    </div>
+                    <div class="p-4" style="min-height: 240px">
+                        <!-- Top tier -->
+                        <div class="flex justify-center mb-2">
+                            <div class="border border-border bg-bg px-4 py-2 text-center">
+                                <span class="text-[9px] text-fg font-medium block">api-gateway</span>
+                                <span class="text-[8px] text-fg-muted">P95: 480ms</span>
+                            </div>
+                        </div>
+                        <!-- Edges down -->
+                        <div class="flex justify-center">
+                            <svg class="w-64 h-8" viewBox="0 0 256 32">
+                                <line x1="128" y1="0" x2="48" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                                <line x1="128" y1="0" x2="128" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                                <line x1="128" y1="0" x2="208" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                            </svg>
+                        </div>
+                        <!-- Middle tier -->
+                        <div class="flex justify-center gap-3 mb-2">
+                            <div class="border border-border bg-bg px-3 py-2 text-center">
+                                <span class="text-[9px] text-fg font-medium block">auth-svc</span>
+                                <span class="text-[8px] text-fg-muted">12ms</span>
+                            </div>
+                            <div class="border border-border bg-bg px-3 py-2 text-center">
+                                <span class="text-[9px] text-fg font-medium block">order-svc</span>
+                                <span class="text-[8px] text-fg-muted">320ms</span>
+                            </div>
+                            <div class="border border-border bg-bg px-3 py-2 text-center">
+                                <span class="text-[9px] text-fg font-medium block">payment-svc</span>
+                                <span class="text-[8px] text-fg-muted">280ms</span>
+                            </div>
+                        </div>
+                        <!-- Edge to user-db (red) -->
+                        <div class="flex justify-center">
+                            <svg class="w-64 h-8" viewBox="0 0 256 32">
+                                <line x1="80" y1="0" x2="128" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
+                                <line x1="128" y1="0" x2="128" y2="32" stroke="oklch(0.637 0.237 25.331)" stroke-width="2"/>
+                                <line x1="176" y1="0" x2="128" y2="32" stroke="oklch(0.637 0.237 25.331)" stroke-width="2"/>
+                            </svg>
+                        </div>
+                        <!-- Bottom tier: user-db highlighted -->
+                        <div class="flex justify-center">
+                            <div class="border-2 border-destructive bg-destructive/5 px-4 py-2 text-center">
+                                <span class="text-[9px] text-destructive font-medium block">user-db</span>
+                                <span class="text-[8px] text-destructive">450ms (was 12ms)</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 3: Span-level diagnosis -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-8 h-8 bg-accent flex items-center justify-center shrink-0">
+                            <span class="text-accent-foreground text-sm font-bold">3</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-fg">Span-level diagnosis</h3>
+                    </div>
+                    <p class="text-sm text-fg-muted leading-relaxed">
+                        Drill into the user-db span attributes to find the connection pool is completely exhausted:
+                        50 active connections with 23 queries waiting. The root cause is clear.
+                    </p>
+                </div>
+                <div class="border border-border bg-bg-elevated overflow-hidden">
+                    <div class="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <div class="w-2 h-2 bg-border"></div>
+                        <span class="text-[9px] text-fg-muted ml-2">Span Attributes — user-db</span>
+                    </div>
+                    <div class="p-4 space-y-3">
+                        <div class="flex items-center justify-between border-b border-border pb-2">
+                            <span class="text-[9px] text-fg-muted">db.system</span>
+                            <span class="text-[10px] text-fg font-mono">postgresql</span>
+                        </div>
+                        <div class="flex items-center justify-between border-b border-border pb-2">
+                            <span class="text-[9px] text-fg-muted">db.statement</span>
+                            <span class="text-[10px] text-fg font-mono truncate ml-4">SELECT * FROM users WHERE...</span>
+                        </div>
+                        <div class="flex items-center justify-between border-b border-border pb-2">
+                            <span class="text-[9px] text-fg-muted">db.pool.active</span>
+                            <span class="text-[10px] text-destructive font-mono font-medium">50 / 50</span>
+                        </div>
+                        <div class="flex items-center justify-between border-b border-border pb-2">
+                            <span class="text-[9px] text-fg-muted">db.pool.waiting</span>
+                            <span class="text-[10px] text-destructive font-mono font-medium">23</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-[9px] text-fg-muted">db.pool.idle</span>
+                            <span class="text-[10px] text-fg font-mono">0</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Feature Highlights -->
+    <section class="py-24 md:py-32 border-t border-border">
+        <div class="mx-auto max-w-6xl px-6">
+            <span class="text-[11px] text-accent uppercase tracking-wider">Capabilities</span>
+            <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-12">Built for microservices complexity</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Service Catalog</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">See all services with P50/P95/P99 latency and Apdex scores. Spot degradations instantly.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Dependency Map</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Visualize how services connect and where cascades originate. Red edges show slow paths.</p>
+                </div>
+                <div class="bg-bg p-6">
+                    <h3 class="text-sm font-bold text-fg mb-2">Span Attributes</h3>
+                    <p class="text-xs text-fg-muted leading-relaxed">Drill into connection pools, query plans, and resource metrics on any span in the trace.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <BottomCTA />
+    <Footer />
+</Layout>
diff --git a/apps/web/package.json b/apps/web/package.json
index 6e471c5..0b8eac2 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,6 +19,7 @@
     "@effect/platform": "^0.94.4",
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@maple/domain": "workspace:*",
+    "@maple/ui": "workspace:*",
     "@maple/infra": "workspace:*",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "^0.9.5",
diff --git a/apps/web/src/components/component-example.tsx b/apps/web/src/components/component-example.tsx
index 86ba5fc..13dfe80 100644
--- a/apps/web/src/components/component-example.tsx
+++ b/apps/web/src/components/component-example.tsx
@@ -17,9 +17,9 @@ import {
   AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+} from "@maple/ui/components/ui/alert-dialog"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   Card,
   CardAction,
@@ -28,7 +28,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@maple/ui/components/ui/card"
 import {
   Combobox,
   ComboboxContent,
@@ -36,7 +36,7 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-} from "@/components/ui/combobox"
+} from "@maple/ui/components/ui/combobox"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -53,9 +53,9 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
+} from "@maple/ui/components/ui/dropdown-menu"
+import { Field, FieldGroup, FieldLabel } from "@maple/ui/components/ui/field"
+import { Input } from "@maple/ui/components/ui/input"
 import {
   Select,
   SelectContent,
@@ -63,8 +63,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
+} from "@maple/ui/components/ui/select"
+import { Textarea } from "@maple/ui/components/ui/textarea"
 import { PlusIcon, BluetoothIcon, DotsVerticalIcon, FileIcon, FolderIcon, FolderOpenIcon, CodeIcon, DotsIcon, MagnifierIcon, FloppyDiskIcon, DownloadIcon, EyeIcon, LayoutLeftIcon, PaletteIcon, SunIcon, MoonIcon, ComputerIcon, UserIcon, CreditCardIcon, GearIcon, KeyboardIcon, LanguageIcon, BellIcon, EnvelopeIcon, ShieldIcon, CircleQuestionIcon, LogoutIcon } from "@/components/icons"
 
 export function ComponentExample() {
diff --git a/apps/web/src/components/dashboard-builder/config/chart-picker.tsx b/apps/web/src/components/dashboard-builder/config/chart-picker.tsx
index 9394ce8..fa0b1e4 100644
--- a/apps/web/src/components/dashboard-builder/config/chart-picker.tsx
+++ b/apps/web/src/components/dashboard-builder/config/chart-picker.tsx
@@ -6,8 +6,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@/components/ui/dialog"
-import { getChartById } from "@/components/charts/registry"
+} from "@maple/ui/components/ui/dialog"
+import { getChartById } from "@maple/ui/components/charts/registry"
 import { ChartPreview } from "@/components/dashboard-builder/widgets/chart-preview"
 import type {
   VisualizationType,
diff --git a/apps/web/src/components/dashboard-builder/config/widget-query-builder-page.tsx b/apps/web/src/components/dashboard-builder/config/widget-query-builder-page.tsx
index 146cb39..345a0f6 100644
--- a/apps/web/src/components/dashboard-builder/config/widget-query-builder-page.tsx
+++ b/apps/web/src/components/dashboard-builder/config/widget-query-builder-page.tsx
@@ -1,18 +1,18 @@
 import * as React from "react"
 import { Result, useAtomValue } from "@effect-atom/atom-react"
 
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Input } from "@/components/ui/input"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
+import { Checkbox } from "@maple/ui/components/ui/checkbox"
+import { Input } from "@maple/ui/components/ui/input"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { chartRegistry } from "@/components/charts/registry"
+} from "@maple/ui/components/ui/select"
+import { chartRegistry } from "@maple/ui/components/charts/registry"
 import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
 import { ChartWidget } from "@/components/dashboard-builder/widgets/chart-widget"
 import { StatWidget } from "@/components/dashboard-builder/widgets/stat-widget"
diff --git a/apps/web/src/components/dashboard-builder/config/widget-query-builder-sheet.tsx b/apps/web/src/components/dashboard-builder/config/widget-query-builder-sheet.tsx
index f184ff7..a53070c 100644
--- a/apps/web/src/components/dashboard-builder/config/widget-query-builder-sheet.tsx
+++ b/apps/web/src/components/dashboard-builder/config/widget-query-builder-sheet.tsx
@@ -1,26 +1,26 @@
 import * as React from "react"
 import { Result, useAtomValue } from "@effect-atom/atom-react"
 
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Input } from "@/components/ui/input"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
+import { Checkbox } from "@maple/ui/components/ui/checkbox"
+import { Input } from "@maple/ui/components/ui/input"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@maple/ui/components/ui/select"
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet"
-import { chartRegistry } from "@/components/charts/registry"
+} from "@maple/ui/components/ui/sheet"
+import { chartRegistry } from "@maple/ui/components/charts/registry"
 import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
 import { ChartWidget } from "@/components/dashboard-builder/widgets/chart-widget"
 import { StatWidget } from "@/components/dashboard-builder/widgets/stat-widget"
diff --git a/apps/web/src/components/dashboard-builder/list/dashboard-list.tsx b/apps/web/src/components/dashboard-builder/list/dashboard-list.tsx
index f56f250..608bce4 100644
--- a/apps/web/src/components/dashboard-builder/list/dashboard-list.tsx
+++ b/apps/web/src/components/dashboard-builder/list/dashboard-list.tsx
@@ -1,7 +1,7 @@
 import { PlusIcon, TrashIcon } from "@/components/icons"
 
-import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@maple/ui/components/ui/card"
+import { Button } from "@maple/ui/components/ui/button"
 import type { Dashboard } from "@/components/dashboard-builder/types"
 
 interface DashboardListProps {
diff --git a/apps/web/src/components/dashboard-builder/toolbar/dashboard-toolbar.tsx b/apps/web/src/components/dashboard-builder/toolbar/dashboard-toolbar.tsx
index c27eee5..6cef3da 100644
--- a/apps/web/src/components/dashboard-builder/toolbar/dashboard-toolbar.tsx
+++ b/apps/web/src/components/dashboard-builder/toolbar/dashboard-toolbar.tsx
@@ -1,6 +1,6 @@
 import { PlusIcon, PencilIcon, CheckIcon, GridIcon } from "@/components/icons"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@maple/ui/components/ui/button"
 import { TimeRangePicker } from "@/components/time-range-picker/time-range-picker"
 import { useDashboardTimeRange } from "@/components/dashboard-builder/dashboard-providers"
 import { relativeToAbsolute } from "@/lib/time-utils"
@@ -38,7 +38,8 @@ export function DashboardToolbar({
     state: { timeRange },
     actions: { setTimeRange },
   } = useDashboardTimeRange()
-  const pickerRange = resolveForPicker(timeRange)
+
+   const pickerRange = resolveForPicker(timeRange)
 
   return (
     <div className="flex items-center gap-1">
diff --git a/apps/web/src/components/dashboard-builder/widgets/chart-preview.tsx b/apps/web/src/components/dashboard-builder/widgets/chart-preview.tsx
index 71c0cab..2a3375f 100644
--- a/apps/web/src/components/dashboard-builder/widgets/chart-preview.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/chart-preview.tsx
@@ -1,5 +1,5 @@
 import { Suspense, type ComponentType } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 
 interface ChartPreviewProps {
   component: ComponentType<{ className?: string }>
diff --git a/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx b/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
index ff0f05b..8647ff7 100644
--- a/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/chart-widget.tsx
@@ -1,7 +1,7 @@
 import { memo, Suspense } from "react"
 
-import { Skeleton } from "@/components/ui/skeleton"
-import { getChartById } from "@/components/charts/registry"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { getChartById } from "@maple/ui/components/charts/registry"
 import { WidgetShell } from "@/components/dashboard-builder/widgets/widget-shell"
 import type {
   WidgetDataState,
diff --git a/apps/web/src/components/dashboard-builder/widgets/stat-widget.tsx b/apps/web/src/components/dashboard-builder/widgets/stat-widget.tsx
index b7739d1..f08292f 100644
--- a/apps/web/src/components/dashboard-builder/widgets/stat-widget.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/stat-widget.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { WidgetShell } from "@/components/dashboard-builder/widgets/widget-shell"
 import type {
   WidgetDataState,
diff --git a/apps/web/src/components/dashboard-builder/widgets/table-widget.tsx b/apps/web/src/components/dashboard-builder/widgets/table-widget.tsx
index 243bc14..212db51 100644
--- a/apps/web/src/components/dashboard-builder/widgets/table-widget.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/table-widget.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import {
   Table,
   TableBody,
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@maple/ui/components/ui/table"
 import { WidgetShell } from "@/components/dashboard-builder/widgets/widget-shell"
 import type {
   WidgetDataState,
diff --git a/apps/web/src/components/dashboard-builder/widgets/widget-edit-panel.tsx b/apps/web/src/components/dashboard-builder/widgets/widget-edit-panel.tsx
index 40943f3..b1616c6 100644
--- a/apps/web/src/components/dashboard-builder/widgets/widget-edit-panel.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/widget-edit-panel.tsx
@@ -1,5 +1,5 @@
-import { Input } from "@/components/ui/input"
-import { getChartById, getChartsByCategory } from "@/components/charts/registry"
+import { Input } from "@maple/ui/components/ui/input"
+import { getChartById, getChartsByCategory } from "@maple/ui/components/charts/registry"
 import { ChartPreview } from "@/components/dashboard-builder/widgets/chart-preview"
 import type {
   DashboardWidget,
diff --git a/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx b/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
index 8bc5990..eae7f90 100644
--- a/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
+++ b/apps/web/src/components/dashboard-builder/widgets/widget-shell.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from "react"
 import { GripDotsIcon, TrashIcon, GearIcon, PencilIcon } from "@/components/icons"
 
-import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle } from "@/components/ui/popover"
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@maple/ui/components/ui/card"
+import { Button } from "@maple/ui/components/ui/button"
+import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle } from "@maple/ui/components/ui/popover"
 import type { WidgetMode } from "@/components/dashboard-builder/types"
 
 interface WidgetShellProps {
diff --git a/apps/web/src/components/dashboard/app-sidebar.tsx b/apps/web/src/components/dashboard/app-sidebar.tsx
index a48a8e8..d8968e2 100644
--- a/apps/web/src/components/dashboard/app-sidebar.tsx
+++ b/apps/web/src/components/dashboard/app-sidebar.tsx
@@ -20,7 +20,7 @@ import {
   Collapsible,
   CollapsibleTrigger,
   CollapsibleContent,
-} from "@/components/ui/collapsible"
+} from "@maple/ui/components/ui/collapsible"
 import { OrgSwitcher } from "@/components/dashboard/org-switcher"
 import {
   DropdownMenu,
@@ -30,7 +30,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@maple/ui/components/ui/dropdown-menu"
 import {
   Sidebar,
   SidebarContent,
@@ -43,7 +43,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from "@maple/ui/components/ui/sidebar"
 import { isClerkAuthEnabled } from "@/lib/services/common/auth-mode"
 import { clearSelfHostedSessionToken } from "@/lib/services/common/self-hosted-auth"
 import { useQuickStart } from "@/hooks/use-quick-start"
diff --git a/apps/web/src/components/dashboard/metrics-grid.tsx b/apps/web/src/components/dashboard/metrics-grid.tsx
index e78570a..ddf8e66 100644
--- a/apps/web/src/components/dashboard/metrics-grid.tsx
+++ b/apps/web/src/components/dashboard/metrics-grid.tsx
@@ -1,12 +1,12 @@
 import { Suspense } from "react"
 
-import { cn } from "@/lib/utils"
-import { Skeleton } from "@/components/ui/skeleton"
-import { getChartById } from "@/components/charts/registry"
+import { cn } from "@maple/ui/utils"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { getChartById } from "@maple/ui/components/charts/registry"
 import type {
   ChartLegendMode,
   ChartTooltipMode,
-} from "@/components/charts/_shared/chart-types"
+} from "@maple/ui/components/charts/_shared/chart-types"
 import { ReadonlyWidgetShell } from "@/components/dashboard-builder/widgets/widget-shell"
 
 interface MetricsGridItem {
diff --git a/apps/web/src/components/dashboard/org-switcher.tsx b/apps/web/src/components/dashboard/org-switcher.tsx
index 54d8560..f8667fb 100644
--- a/apps/web/src/components/dashboard/org-switcher.tsx
+++ b/apps/web/src/components/dashboard/org-switcher.tsx
@@ -17,21 +17,21 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@maple/ui/components/ui/dropdown-menu"
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from "@maple/ui/components/ui/sidebar"
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
+} from "@maple/ui/components/ui/dialog"
+import { Input } from "@maple/ui/components/ui/input"
+import { Button } from "@maple/ui/components/ui/button"
 import { isClerkAuthEnabled } from "@/lib/services/common/auth-mode"
 
 function OrgAvatar({
diff --git a/apps/web/src/components/dashboard/service-usage-cards.tsx b/apps/web/src/components/dashboard/service-usage-cards.tsx
index 12e0f15..e9f09b1 100644
--- a/apps/web/src/components/dashboard/service-usage-cards.tsx
+++ b/apps/web/src/components/dashboard/service-usage-cards.tsx
@@ -6,8 +6,8 @@ import {
   DatabaseIcon,
 } from "@/components/icons"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@maple/ui/components/ui/card"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { getServiceUsageResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 
 function formatNumber(num: number): string {
diff --git a/apps/web/src/components/errors/errors-by-type-table.tsx b/apps/web/src/components/errors/errors-by-type-table.tsx
index 7b9f4e2..cf0b5ce 100644
--- a/apps/web/src/components/errors/errors-by-type-table.tsx
+++ b/apps/web/src/components/errors/errors-by-type-table.tsx
@@ -11,9 +11,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/table"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type GetErrorsByTypeInput, type ErrorByType } from "@/api/tinybird/errors"
 import { formatDuration } from "@/lib/format"
 import {
diff --git a/apps/web/src/components/errors/errors-filter-sidebar.tsx b/apps/web/src/components/errors/errors-filter-sidebar.tsx
index ff462be..ca398b2 100644
--- a/apps/web/src/components/errors/errors-filter-sidebar.tsx
+++ b/apps/web/src/components/errors/errors-filter-sidebar.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "@tanstack/react-router"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { FilterSection, SingleCheckboxFilter } from "@/components/traces/filter-section"
 import { Route } from "@/routes/errors"
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@maple/ui/components/ui/separator"
 import { getErrorsFacetsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import {
   FilterSidebarBody,
diff --git a/apps/web/src/components/errors/errors-summary-cards.tsx b/apps/web/src/components/errors/errors-summary-cards.tsx
index e146699..c86e36e 100644
--- a/apps/web/src/components/errors/errors-summary-cards.tsx
+++ b/apps/web/src/components/errors/errors-summary-cards.tsx
@@ -6,8 +6,8 @@ import {
   PulseIcon,
 } from "@/components/icons"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@maple/ui/components/ui/card"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type GetErrorsSummaryInput } from "@/api/tinybird/errors"
 import { getErrorsSummaryResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 
diff --git a/apps/web/src/components/example.tsx b/apps/web/src/components/example.tsx
index 7883492..8873388 100644
--- a/apps/web/src/components/example.tsx
+++ b/apps/web/src/components/example.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/web/src/components/filters/filter-section.tsx b/apps/web/src/components/filters/filter-section.tsx
index 31ca9ad..0b1be2e 100644
--- a/apps/web/src/components/filters/filter-section.tsx
+++ b/apps/web/src/components/filters/filter-section.tsx
@@ -1,14 +1,14 @@
 import * as React from "react"
 import { ChevronDownIcon, XmarkIcon, MagnifierIcon } from "@/components/icons"
 
-import { cn } from "@/lib/utils"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Label } from "@/components/ui/label"
+import { cn } from "@maple/ui/utils"
+import { Checkbox } from "@maple/ui/components/ui/checkbox"
+import { Label } from "@maple/ui/components/ui/label"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@maple/ui/components/ui/collapsible"
 
 export interface FilterOption {
   name: string
diff --git a/apps/web/src/components/filters/filter-sidebar.tsx b/apps/web/src/components/filters/filter-sidebar.tsx
index e63134e..f068f10 100644
--- a/apps/web/src/components/filters/filter-sidebar.tsx
+++ b/apps/web/src/components/filters/filter-sidebar.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from "react"
 
-import { Separator } from "@/components/ui/separator"
-import { Skeleton } from "@/components/ui/skeleton"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { cn } from "@/lib/utils"
+import { Separator } from "@maple/ui/components/ui/separator"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
+import { cn } from "@maple/ui/utils"
 
 interface FilterSidebarFrameProps {
   children: ReactNode
diff --git a/apps/web/src/components/layout/dashboard-layout.tsx b/apps/web/src/components/layout/dashboard-layout.tsx
index 8b33c2c..41b0747 100644
--- a/apps/web/src/components/layout/dashboard-layout.tsx
+++ b/apps/web/src/components/layout/dashboard-layout.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 
 import { AppSidebar } from "@/components/dashboard/app-sidebar"
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
-import { Separator } from "@/components/ui/separator"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@maple/ui/components/ui/sidebar"
+import { Separator } from "@maple/ui/components/ui/separator"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -10,7 +10,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
+} from "@maple/ui/components/ui/breadcrumb"
 import { Link } from "@tanstack/react-router"
 
 export interface BreadcrumbItem {
diff --git a/apps/web/src/components/logs/log-detail-sheet.tsx b/apps/web/src/components/logs/log-detail-sheet.tsx
index a54350c..0d1507f 100644
--- a/apps/web/src/components/logs/log-detail-sheet.tsx
+++ b/apps/web/src/components/logs/log-detail-sheet.tsx
@@ -7,12 +7,12 @@ import {
   SheetContent,
   SheetTitle,
   SheetClose,
-} from "@/components/ui/sheet"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
+} from "@maple/ui/components/ui/sheet"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
 import { SeverityBadge } from "./severity-badge"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import type { Log } from "@/api/tinybird/logs"
 
 interface LogDetailSheetProps {
diff --git a/apps/web/src/components/logs/logs-filter-sidebar.tsx b/apps/web/src/components/logs/logs-filter-sidebar.tsx
index 2f04ab0..ac4f87e 100644
--- a/apps/web/src/components/logs/logs-filter-sidebar.tsx
+++ b/apps/web/src/components/logs/logs-filter-sidebar.tsx
@@ -9,7 +9,7 @@ import {
   SearchableFilterSection,
 } from "@/components/filters/filter-section"
 import { Route } from "@/routes/logs"
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@maple/ui/components/ui/separator"
 import { getLogsFacetsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import {
   FilterSidebarBody,
diff --git a/apps/web/src/components/logs/logs-table.tsx b/apps/web/src/components/logs/logs-table.tsx
index 45dccf6..cc7d883 100644
--- a/apps/web/src/components/logs/logs-table.tsx
+++ b/apps/web/src/components/logs/logs-table.tsx
@@ -8,8 +8,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/table"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type Log } from "@/api/tinybird/logs"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { SeverityBadge } from "./severity-badge"
diff --git a/apps/web/src/components/logs/severity-badge.tsx b/apps/web/src/components/logs/severity-badge.tsx
index f1738e2..d7698b7 100644
--- a/apps/web/src/components/logs/severity-badge.tsx
+++ b/apps/web/src/components/logs/severity-badge.tsx
@@ -1,5 +1,5 @@
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { cn } from "@maple/ui/utils"
 
 interface SeverityBadgeProps {
   severity: string
diff --git a/apps/web/src/components/metrics/metric-type-badge.tsx b/apps/web/src/components/metrics/metric-type-badge.tsx
index 97aadbe..f538e68 100644
--- a/apps/web/src/components/metrics/metric-type-badge.tsx
+++ b/apps/web/src/components/metrics/metric-type-badge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@maple/ui/components/ui/badge"
 
 const metricTypeConfig: Record<string, { label: string; className: string }> = {
   sum: {
diff --git a/apps/web/src/components/metrics/metrics-overview.tsx b/apps/web/src/components/metrics/metrics-overview.tsx
index de497d4..fe9a388 100644
--- a/apps/web/src/components/metrics/metrics-overview.tsx
+++ b/apps/web/src/components/metrics/metrics-overview.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { Input } from "@/components/ui/input"
+import { Input } from "@maple/ui/components/ui/input"
 import { MetricsSummaryCards, type MetricType } from "./metrics-summary-cards"
 import { MetricsVolumeChart } from "./metrics-volume-chart"
 import { MetricsTable } from "./metrics-table"
diff --git a/apps/web/src/components/metrics/metrics-summary-cards.tsx b/apps/web/src/components/metrics/metrics-summary-cards.tsx
index 033568b..5cfde4d 100644
--- a/apps/web/src/components/metrics/metrics-summary-cards.tsx
+++ b/apps/web/src/components/metrics/metrics-summary-cards.tsx
@@ -6,8 +6,8 @@ import {
   ChartBarTrendUpIcon,
 } from "@/components/icons"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@maple/ui/components/ui/card"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type ListMetricsInput } from "@/api/tinybird/metrics"
 import { getMetricsSummaryResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 
diff --git a/apps/web/src/components/metrics/metrics-table.tsx b/apps/web/src/components/metrics/metrics-table.tsx
index e19841f..7c6d2ee 100644
--- a/apps/web/src/components/metrics/metrics-table.tsx
+++ b/apps/web/src/components/metrics/metrics-table.tsx
@@ -7,9 +7,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Badge } from "@/components/ui/badge"
+} from "@maple/ui/components/ui/table"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { Badge } from "@maple/ui/components/ui/badge"
 import { MetricTypeBadge } from "./metric-type-badge"
 import { type Metric, type ListMetricsInput } from "@/api/tinybird/metrics"
 import { listMetricsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
diff --git a/apps/web/src/components/metrics/metrics-volume-chart.tsx b/apps/web/src/components/metrics/metrics-volume-chart.tsx
index 82961cb..5aa0be6 100644
--- a/apps/web/src/components/metrics/metrics-volume-chart.tsx
+++ b/apps/web/src/components/metrics/metrics-volume-chart.tsx
@@ -6,9 +6,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
   type ChartConfig,
-} from "@/components/ui/chart"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/chart"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@maple/ui/components/ui/card"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type GetMetricTimeSeriesInput, type MetricTimeSeriesResponse } from "@/api/tinybird/metrics"
 import { disabledResultAtom } from "@/lib/services/atoms/disabled-result-atom"
 import { getMetricTimeSeriesResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
diff --git a/apps/web/src/components/query-builder/query-builder-lab.tsx b/apps/web/src/components/query-builder/query-builder-lab.tsx
index 46af3f2..1519733 100644
--- a/apps/web/src/components/query-builder/query-builder-lab.tsx
+++ b/apps/web/src/components/query-builder/query-builder-lab.tsx
@@ -2,8 +2,8 @@ import * as React from "react"
 import { Result, useAtomValue } from "@effect-atom/atom-react"
 import { PulseIcon, XmarkIcon, PlusIcon, MagnifierIcon } from "@/components/icons"
 
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   Card,
   CardContent,
@@ -11,19 +11,19 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
+} from "@maple/ui/components/ui/card"
+import { Checkbox } from "@maple/ui/components/ui/checkbox"
+import { Input } from "@maple/ui/components/ui/input"
+import { Label } from "@maple/ui/components/ui/label"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
+import { Separator } from "@maple/ui/components/ui/separator"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@maple/ui/components/ui/select"
 import {
   Table,
   TableBody,
@@ -31,8 +31,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { cn } from "@/lib/utils"
+} from "@maple/ui/components/ui/table"
+import { cn } from "@maple/ui/utils"
 import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
 import {
   getLogsFacetsResultAtom,
diff --git a/apps/web/src/components/query-builder/where-clause-editor.tsx b/apps/web/src/components/query-builder/where-clause-editor.tsx
index 52271b7..cfdc14a 100644
--- a/apps/web/src/components/query-builder/where-clause-editor.tsx
+++ b/apps/web/src/components/query-builder/where-clause-editor.tsx
@@ -1,13 +1,13 @@
 import * as React from "react"
 
-import { Textarea } from "@/components/ui/textarea"
+import { Textarea } from "@maple/ui/components/ui/textarea"
 import {
   applyWhereClauseSuggestion,
   getWhereClauseAutocomplete,
   type WhereClauseAutocompleteValues,
 } from "@/lib/query-builder/where-clause-autocomplete"
 import type { QueryBuilderDataSource } from "@/lib/query-builder/model"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 interface WhereClauseEditorProps {
   dataSource: QueryBuilderDataSource
diff --git a/apps/web/src/components/quick-start/code-block.tsx b/apps/web/src/components/quick-start/code-block.tsx
index 642c0af..cd398cd 100644
--- a/apps/web/src/components/quick-start/code-block.tsx
+++ b/apps/web/src/components/quick-start/code-block.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react"
 import { toast } from "sonner"
 import { CopyIcon, CheckIcon } from "@/components/icons"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import { highlightCode } from "@/lib/sugar-high"
 
 interface CodeBlockProps {
diff --git a/apps/web/src/components/quick-start/package-manager-code-block.tsx b/apps/web/src/components/quick-start/package-manager-code-block.tsx
index d7c14f8..bf0fb9f 100644
--- a/apps/web/src/components/quick-start/package-manager-code-block.tsx
+++ b/apps/web/src/components/quick-start/package-manager-code-block.tsx
@@ -1,4 +1,4 @@
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@maple/ui/components/ui/tabs"
 import { CodeBlock } from "@/components/quick-start/code-block"
 
 const packageManagers = [
diff --git a/apps/web/src/components/route-error.tsx b/apps/web/src/components/route-error.tsx
index f6728f2..fad1c45 100644
--- a/apps/web/src/components/route-error.tsx
+++ b/apps/web/src/components/route-error.tsx
@@ -1,14 +1,14 @@
 import type { ErrorComponentProps } from "@tanstack/react-router"
 import { Link, useRouter } from "@tanstack/react-router"
 import { AlertWarningIcon, CircleQuestionIcon, HouseIcon } from "@/components/icons"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button, buttonVariants } from "@maple/ui/components/ui/button"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/components/ui/empty"
+} from "@maple/ui/components/ui/empty"
 
 function RouteError({ error, reset }: ErrorComponentProps) {
   const router = useRouter()
diff --git a/apps/web/src/components/service-map/service-map-edge.tsx b/apps/web/src/components/service-map/service-map-edge.tsx
index 9fd5cf8..7c3cfed 100644
--- a/apps/web/src/components/service-map/service-map-edge.tsx
+++ b/apps/web/src/components/service-map/service-map-edge.tsx
@@ -1,6 +1,6 @@
 import { memo, useId } from "react"
 import { getSmoothStepPath, type EdgeProps } from "@xyflow/react"
-import { getServiceLegendColor } from "@/lib/colors"
+import { getServiceLegendColor } from "@maple/ui/colors"
 import { useReducedMotion } from "@/hooks/use-reduced-motion"
 import type { ServiceEdgeData } from "./service-map-utils"
 
diff --git a/apps/web/src/components/service-map/service-map-node.tsx b/apps/web/src/components/service-map/service-map-node.tsx
index 2be668c..3a99fa4 100644
--- a/apps/web/src/components/service-map/service-map-node.tsx
+++ b/apps/web/src/components/service-map/service-map-node.tsx
@@ -1,12 +1,12 @@
 import { memo } from "react"
 import { Handle, Position } from "@xyflow/react"
-import { cn } from "@/lib/utils"
-import { getServiceLegendColor } from "@/lib/colors"
+import { cn } from "@maple/ui/utils"
+import { getServiceLegendColor } from "@maple/ui/colors"
 import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-} from "@/components/ui/tooltip"
+} from "@maple/ui/components/ui/tooltip"
 import type { ServiceNodeData } from "./service-map-utils"
 
 function formatRate(value: number): string {
diff --git a/apps/web/src/components/service-map/service-map-view.tsx b/apps/web/src/components/service-map/service-map-view.tsx
index c65d38a..5a7e264 100644
--- a/apps/web/src/components/service-map/service-map-view.tsx
+++ b/apps/web/src/components/service-map/service-map-view.tsx
@@ -14,7 +14,7 @@ import "@xyflow/react/dist/style.css"
 
 import { Result, useAtomValue } from "@effect-atom/atom-react"
 
-import { getServiceLegendColor } from "@/lib/colors"
+import { getServiceLegendColor } from "@maple/ui/colors"
 import { getServiceMapResultAtom, getServiceOverviewResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import type { GetServiceMapInput, ServiceEdge } from "@/api/tinybird/service-map"
 import type { GetServiceOverviewInput, ServiceOverview } from "@/api/tinybird/services"
diff --git a/apps/web/src/components/services/services-filter-sidebar.tsx b/apps/web/src/components/services/services-filter-sidebar.tsx
index d00c6b3..8f65750 100644
--- a/apps/web/src/components/services/services-filter-sidebar.tsx
+++ b/apps/web/src/components/services/services-filter-sidebar.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "@tanstack/react-router"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { FilterSection } from "@/components/traces/filter-section"
 import { Route } from "@/routes/services/index"
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@maple/ui/components/ui/separator"
 import { getServicesFacetsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import {
   FilterSidebarBody,
diff --git a/apps/web/src/components/services/services-table.tsx b/apps/web/src/components/services/services-table.tsx
index 239695b..9731a2a 100644
--- a/apps/web/src/components/services/services-table.tsx
+++ b/apps/web/src/components/services/services-table.tsx
@@ -9,15 +9,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Sparkline } from "@/components/ui/gradient-chart"
+} from "@maple/ui/components/ui/table"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { Sparkline } from "@maple/ui/components/ui/gradient-chart"
 import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-} from "@/components/ui/tooltip"
+} from "@maple/ui/components/ui/tooltip"
 import {
   type ServiceOverview,
   type CommitBreakdown,
diff --git a/apps/web/src/components/settings/api-keys-section.tsx b/apps/web/src/components/settings/api-keys-section.tsx
index 3632d66..4d3175e 100644
--- a/apps/web/src/components/settings/api-keys-section.tsx
+++ b/apps/web/src/components/settings/api-keys-section.tsx
@@ -3,17 +3,17 @@ import { useState } from "react"
 import { Exit } from "effect"
 import { toast } from "sonner"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@maple/ui/components/ui/card"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Input } from "@maple/ui/components/ui/input"
+import { Label } from "@maple/ui/components/ui/label"
 import {
   Dialog,
   DialogContent,
@@ -21,7 +21,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "@maple/ui/components/ui/dialog"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -32,21 +32,21 @@ import {
   AlertDialogHeader,
   AlertDialogMedia,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
+} from "@maple/ui/components/ui/alert-dialog"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/components/ui/input-group"
+} from "@maple/ui/components/ui/input-group"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/components/ui/empty"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/empty"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import {
   AlertWarningIcon,
   CheckIcon,
diff --git a/apps/web/src/components/settings/billing-section.tsx b/apps/web/src/components/settings/billing-section.tsx
index e98c13b..fbd8a44 100644
--- a/apps/web/src/components/settings/billing-section.tsx
+++ b/apps/web/src/components/settings/billing-section.tsx
@@ -4,8 +4,8 @@ import { useCustomer } from "autumn-js/react"
 import { PricingCards } from "./pricing-cards"
 import { format } from "date-fns"
 
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@maple/ui/components/ui/card"
 import { getServiceUsageResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import { formatForTinybird } from "@/lib/time-utils"
 import { aggregateUsage } from "@/lib/billing/usage"
diff --git a/apps/web/src/components/settings/members-section.tsx b/apps/web/src/components/settings/members-section.tsx
index a6dba8b..c26e83d 100644
--- a/apps/web/src/components/settings/members-section.tsx
+++ b/apps/web/src/components/settings/members-section.tsx
@@ -2,14 +2,14 @@ import { useOrganization, useAuth } from "@clerk/clerk-react"
 import { useState } from "react"
 import { toast } from "sonner"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@maple/ui/components/ui/card"
 import {
   Table,
   TableBody,
@@ -17,9 +17,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
+} from "@maple/ui/components/ui/table"
+import { Avatar, AvatarFallback, AvatarImage } from "@maple/ui/components/ui/avatar"
+import { Badge } from "@maple/ui/components/ui/badge"
 import {
   Dialog,
   DialogContent,
@@ -27,22 +27,22 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@maple/ui/components/ui/dialog"
+import { Input } from "@maple/ui/components/ui/input"
+import { Label } from "@maple/ui/components/ui/label"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@maple/ui/components/ui/select"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@maple/ui/components/ui/dropdown-menu"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -53,15 +53,15 @@ import {
   AlertDialogHeader,
   AlertDialogMedia,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/alert-dialog"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/components/ui/empty"
+} from "@maple/ui/components/ui/empty"
 import {
   PlusIcon,
   DotsVerticalIcon,
diff --git a/apps/web/src/components/settings/pricing-cards.tsx b/apps/web/src/components/settings/pricing-cards.tsx
index 62d3ffd..f24245d 100644
--- a/apps/web/src/components/settings/pricing-cards.tsx
+++ b/apps/web/src/components/settings/pricing-cards.tsx
@@ -7,7 +7,7 @@ type Product = NonNullable<
 >[number]
 type ProductItem = Product["items"][number]
 
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import { getPlanFeatures } from "@/lib/billing/plans"
 import {
   Card,
@@ -16,12 +16,12 @@ import {
   CardHeader,
   CardTitle,
   CardDescription,
-} from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Separator } from "@/components/ui/separator"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Spinner } from "@/components/ui/spinner"
+} from "@maple/ui/components/ui/card"
+import { Button } from "@maple/ui/components/ui/button"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Separator } from "@maple/ui/components/ui/separator"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { Spinner } from "@maple/ui/components/ui/spinner"
 import {
   Dialog,
   DialogContent,
@@ -29,7 +29,7 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from "@/components/ui/dialog"
+} from "@maple/ui/components/ui/dialog"
 import {
   FileIcon,
   PulseIcon,
diff --git a/apps/web/src/components/settings/scrape-targets-section.tsx b/apps/web/src/components/settings/scrape-targets-section.tsx
index 4296c39..940cb2e 100644
--- a/apps/web/src/components/settings/scrape-targets-section.tsx
+++ b/apps/web/src/components/settings/scrape-targets-section.tsx
@@ -12,15 +12,15 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button"
+} from "@maple/ui/components/ui/alert-dialog"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@maple/ui/components/ui/card"
 import {
   Dialog,
   DialogContent,
@@ -28,18 +28,18 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Badge } from "@/components/ui/badge"
+} from "@maple/ui/components/ui/dialog"
+import { Input } from "@maple/ui/components/ui/input"
+import { Label } from "@maple/ui/components/ui/label"
+import { Switch } from "@maple/ui/components/ui/switch"
+import { Badge } from "@maple/ui/components/ui/badge"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@maple/ui/components/ui/select"
 import {
   CircleCheckIcon,
   CircleXmarkIcon,
diff --git a/apps/web/src/components/settings/usage-meters.tsx b/apps/web/src/components/settings/usage-meters.tsx
index 464726f..8cef8a8 100644
--- a/apps/web/src/components/settings/usage-meters.tsx
+++ b/apps/web/src/components/settings/usage-meters.tsx
@@ -6,7 +6,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@maple/ui/components/ui/card"
 import {
   FileIcon,
   PulseIcon,
@@ -16,7 +16,7 @@ import {
 import type { AggregatedUsage } from "@/lib/billing/usage"
 import { formatGB, usagePercentage } from "@/lib/billing/usage"
 import type { PlanLimits } from "@/lib/billing/plans"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 interface MeterRowProps {
   icon: IconComponent
diff --git a/apps/web/src/components/time-range-picker/custom-range-picker.tsx b/apps/web/src/components/time-range-picker/custom-range-picker.tsx
index 7322de0..94a1ade 100644
--- a/apps/web/src/components/time-range-picker/custom-range-picker.tsx
+++ b/apps/web/src/components/time-range-picker/custom-range-picker.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
-import { Calendar } from "@/components/ui/calendar"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Calendar } from "@maple/ui/components/ui/calendar"
+import { Button } from "@maple/ui/components/ui/button"
+import { Input } from "@maple/ui/components/ui/input"
 import { format, parse, isValid, setHours, setMinutes } from "date-fns"
 import type { DateRange } from "react-day-picker"
 import { formatForTinybird } from "@/lib/time-utils"
diff --git a/apps/web/src/components/time-range-picker/preset-list.tsx b/apps/web/src/components/time-range-picker/preset-list.tsx
index 46c68de..649b2c5 100644
--- a/apps/web/src/components/time-range-picker/preset-list.tsx
+++ b/apps/web/src/components/time-range-picker/preset-list.tsx
@@ -1,5 +1,5 @@
 import { PRESET_OPTIONS, type TimePreset } from "@/lib/time-utils"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 interface PresetListProps {
   selectedValue?: string
diff --git a/apps/web/src/components/time-range-picker/quick-select-grid.tsx b/apps/web/src/components/time-range-picker/quick-select-grid.tsx
index 8ce2652..632ba58 100644
--- a/apps/web/src/components/time-range-picker/quick-select-grid.tsx
+++ b/apps/web/src/components/time-range-picker/quick-select-grid.tsx
@@ -1,5 +1,5 @@
 import { QUICK_SELECT_OPTIONS, relativeToAbsolute } from "@/lib/time-utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@maple/ui/components/ui/button"
 
 interface QuickSelectGridProps {
   onSelect: (range: { startTime: string; endTime: string }, value: string, label: string) => void
diff --git a/apps/web/src/components/time-range-picker/recently-used.tsx b/apps/web/src/components/time-range-picker/recently-used.tsx
index 2839fd3..a4bd17e 100644
--- a/apps/web/src/components/time-range-picker/recently-used.tsx
+++ b/apps/web/src/components/time-range-picker/recently-used.tsx
@@ -1,5 +1,5 @@
 import type { RecentTimeRange } from "@/hooks/use-recently-used-times"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 interface RecentlyUsedProps {
   recentTimes: RecentTimeRange[]
diff --git a/apps/web/src/components/time-range-picker/shorthand-input.tsx b/apps/web/src/components/time-range-picker/shorthand-input.tsx
index 9df1d93..83af032 100644
--- a/apps/web/src/components/time-range-picker/shorthand-input.tsx
+++ b/apps/web/src/components/time-range-picker/shorthand-input.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react"
-import { Input } from "@/components/ui/input"
+import { Input } from "@maple/ui/components/ui/input"
 import { relativeToAbsolute } from "@/lib/time-utils"
 
 interface ShorthandInputProps {
diff --git a/apps/web/src/components/time-range-picker/time-range-picker.tsx b/apps/web/src/components/time-range-picker/time-range-picker.tsx
index 0cd4771..2d4d825 100644
--- a/apps/web/src/components/time-range-picker/time-range-picker.tsx
+++ b/apps/web/src/components/time-range-picker/time-range-picker.tsx
@@ -1,8 +1,8 @@
 import { useState, useCallback } from "react"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
+import { Popover, PopoverContent, PopoverTrigger } from "@maple/ui/components/ui/popover"
+import { Button } from "@maple/ui/components/ui/button"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
+import { Separator } from "@maple/ui/components/ui/separator"
 import { ClockIcon } from "@/components/icons"
 
 import { formatTimeRangeDisplay, presetLabel, type TimePreset, relativeToAbsolute } from "@/lib/time-utils"
diff --git a/apps/web/src/components/traces/duration-range-filter.tsx b/apps/web/src/components/traces/duration-range-filter.tsx
index 0e3f71b..00fc770 100644
--- a/apps/web/src/components/traces/duration-range-filter.tsx
+++ b/apps/web/src/components/traces/duration-range-filter.tsx
@@ -1,14 +1,14 @@
 import * as React from "react"
 import { ChevronDownIcon } from "@/components/icons"
 
-import { cn } from "@/lib/utils"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { cn } from "@maple/ui/utils"
+import { Input } from "@maple/ui/components/ui/input"
+import { Label } from "@maple/ui/components/ui/label"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@maple/ui/components/ui/collapsible"
 
 interface DurationRangeFilterProps {
   minValue: number | undefined
diff --git a/apps/web/src/components/traces/flamegraph-minimap.tsx b/apps/web/src/components/traces/flamegraph-minimap.tsx
index ba344bf..30a83a0 100644
--- a/apps/web/src/components/traces/flamegraph-minimap.tsx
+++ b/apps/web/src/components/traces/flamegraph-minimap.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { getSpanColorStyle } from "@/lib/colors"
+import { getSpanColorStyle } from "@maple/ui/colors"
 import type { SpanNode } from "@/api/tinybird/traces"
 
 interface FlamegraphMinimapProps {
diff --git a/apps/web/src/components/traces/flamegraph-tooltip.tsx b/apps/web/src/components/traces/flamegraph-tooltip.tsx
index cfacd80..f981693 100644
--- a/apps/web/src/components/traces/flamegraph-tooltip.tsx
+++ b/apps/web/src/components/traces/flamegraph-tooltip.tsx
@@ -1,5 +1,5 @@
 import { formatDuration } from "@/lib/format"
-import { getServiceLegendColor, calculateSelfTime } from "@/lib/colors"
+import { getServiceLegendColor, calculateSelfTime } from "@maple/ui/colors"
 import type { SpanNode } from "@/api/tinybird/traces"
 
 interface FlamegraphTooltipProps {
diff --git a/apps/web/src/components/traces/flamegraph.tsx b/apps/web/src/components/traces/flamegraph.tsx
index 6d2c51f..11b855b 100644
--- a/apps/web/src/components/traces/flamegraph.tsx
+++ b/apps/web/src/components/traces/flamegraph.tsx
@@ -2,13 +2,13 @@ import * as React from "react"
 
 import { XmarkIcon } from "@/components/icons"
 
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
+import { Button } from "@maple/ui/components/ui/button"
+import { Tooltip, TooltipTrigger, TooltipContent } from "@maple/ui/components/ui/tooltip"
 import { FlamegraphTooltipContent } from "./flamegraph-tooltip"
 import { FlamegraphMinimap } from "./flamegraph-minimap"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import { formatDuration } from "@/lib/format"
-import { getSpanColorStyle, getServiceLegendColor } from "@/lib/colors"
+import { getSpanColorStyle, getServiceLegendColor } from "@maple/ui/colors"
 import { getCacheInfo } from "@/lib/cache"
 import type { SpanNode } from "@/api/tinybird/traces"
 
diff --git a/apps/web/src/components/traces/flow-node.tsx b/apps/web/src/components/traces/flow-node.tsx
index dba3ccc..0d597ff 100644
--- a/apps/web/src/components/traces/flow-node.tsx
+++ b/apps/web/src/components/traces/flow-node.tsx
@@ -11,9 +11,9 @@ import {
 } from "@/components/icons"
 import type { IconComponent } from "@/components/icons"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import { formatDuration } from "@/lib/format"
-import { getSpanColorStyle, extractClassName } from "@/lib/colors"
+import { getSpanColorStyle, extractClassName } from "@maple/ui/colors"
 import { getCacheInfo, cacheResultStyles, CACHE_OPERATION_COLORS } from "@/lib/cache"
 import type { CacheInfo } from "@/lib/cache"
 import type { FlowNodeData, AggregatedDuration } from "./flow-utils"
diff --git a/apps/web/src/components/traces/flow-view.tsx b/apps/web/src/components/traces/flow-view.tsx
index 645a315..a4d87f5 100644
--- a/apps/web/src/components/traces/flow-view.tsx
+++ b/apps/web/src/components/traces/flow-view.tsx
@@ -13,8 +13,8 @@ import "@xyflow/react/dist/style.css"
 
 import { EyeIcon } from "@/components/icons"
 
-import { Button } from "@/components/ui/button"
-import { getServiceLegendColor } from "@/lib/colors"
+import { Button } from "@maple/ui/components/ui/button"
+import { getServiceLegendColor } from "@maple/ui/colors"
 import { FlowSpanNode } from "./flow-node"
 import {
   transformSpansToFlow,
diff --git a/apps/web/src/components/traces/span-detail-panel.tsx b/apps/web/src/components/traces/span-detail-panel.tsx
index fed2128..88dc439 100644
--- a/apps/web/src/components/traces/span-detail-panel.tsx
+++ b/apps/web/src/components/traces/span-detail-panel.tsx
@@ -3,16 +3,16 @@ import { Result, useAtomValue } from "@effect-atom/atom-react"
 import { XmarkIcon, ClockIcon, CircleWarningIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon } from "@/components/icons"
 import { toast } from "sonner"
 
-import { Button } from "@/components/ui/button"
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@maple/ui/components/ui/button"
+import { Alert, AlertTitle, AlertDescription } from "@maple/ui/components/ui/alert"
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@maple/ui/components/ui/collapsible"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@maple/ui/components/ui/tabs"
+import { ScrollArea } from "@maple/ui/components/ui/scroll-area"
 import { type Log, type LogsResponse } from "@/api/tinybird/logs"
 import { formatDuration } from "@/lib/format"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 import { getCacheInfo, cacheResultStyles } from "@/lib/cache"
 import type { SpanNode } from "@/api/tinybird/traces"
 import { disabledResultAtom } from "@/lib/services/atoms/disabled-result-atom"
diff --git a/apps/web/src/components/traces/span-row.tsx b/apps/web/src/components/traces/span-row.tsx
index 65004cb..df903a0 100644
--- a/apps/web/src/components/traces/span-row.tsx
+++ b/apps/web/src/components/traces/span-row.tsx
@@ -1,8 +1,8 @@
 import { ChevronRightIcon, ChevronDownIcon } from "@/components/icons"
 
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Button } from "@maple/ui/components/ui/button"
+import { cn } from "@maple/ui/utils"
 import { formatDuration } from "@/lib/format"
 import { getCacheInfo, cacheResultStyles } from "@/lib/cache"
 import type { SpanNode } from "@/api/tinybird/traces"
diff --git a/apps/web/src/components/traces/trace-view-tabs.tsx b/apps/web/src/components/traces/trace-view-tabs.tsx
index 20e9040..730e951 100644
--- a/apps/web/src/components/traces/trace-view-tabs.tsx
+++ b/apps/web/src/components/traces/trace-view-tabs.tsx
@@ -1,6 +1,6 @@
 import { MenuIcon, FireIcon, NetworkNodesIcon } from "@/components/icons"
 
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@maple/ui/components/ui/tabs"
 import { SpanHierarchy } from "./span-hierarchy"
 import { Flamegraph } from "./flamegraph"
 import { TraceFlowView } from "./flow-view"
diff --git a/apps/web/src/components/traces/traces-filter-sidebar.tsx b/apps/web/src/components/traces/traces-filter-sidebar.tsx
index b411b7f..8fd35c9 100644
--- a/apps/web/src/components/traces/traces-filter-sidebar.tsx
+++ b/apps/web/src/components/traces/traces-filter-sidebar.tsx
@@ -9,7 +9,7 @@ import {
 } from "./filter-section"
 import { DurationRangeFilter } from "./duration-range-filter"
 import { Route } from "@/routes/traces"
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@maple/ui/components/ui/separator"
 import { getTracesFacetsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import {
   FilterSidebarBody,
diff --git a/apps/web/src/components/traces/traces-table.tsx b/apps/web/src/components/traces/traces-table.tsx
index e0f2341..0ab0238 100644
--- a/apps/web/src/components/traces/traces-table.tsx
+++ b/apps/web/src/components/traces/traces-table.tsx
@@ -9,9 +9,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@maple/ui/components/ui/table"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import { type Trace } from "@/api/tinybird/traces"
 import { listTracesResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
 import type { TracesSearchParams } from "@/routes/traces"
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
deleted file mode 100644
index bd0c391..0000000
--- a/apps/web/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index ea7064d..471fd3f 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -1,7 +1,7 @@
 import { useAuth } from "@clerk/clerk-react"
 import { useCustomer } from "autumn-js/react"
 import { Navigate, Outlet, createRootRouteWithContext, redirect, useRouterState } from "@tanstack/react-router"
-import { Toaster } from "@/components/ui/sonner"
+import { Toaster } from "@maple/ui/components/ui/sonner"
 import { hasSelectedPlan } from "@/lib/billing/plan-gating"
 import { isClerkAuthEnabled } from "@/lib/services/common/auth-mode"
 import type { RouterAuthContext } from "@/router"
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index dd05bed..e5b9f73 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -11,14 +11,14 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@maple/ui/components/ui/select"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { ServiceUsageCards } from "@/components/dashboard/service-usage-cards"
 import { MetricsGrid } from "@/components/dashboard/metrics-grid"
 import type {
   ChartLegendMode,
   ChartTooltipMode,
-} from "@/components/charts/_shared/chart-types"
+} from "@maple/ui/components/charts/_shared/chart-types"
 import {
   getCustomChartTimeSeriesResultAtom,
   getOverviewTimeSeriesResultAtom,
diff --git a/apps/web/src/routes/quick-start.tsx b/apps/web/src/routes/quick-start.tsx
index 9d3e99e..dc643de 100644
--- a/apps/web/src/routes/quick-start.tsx
+++ b/apps/web/src/routes/quick-start.tsx
@@ -9,9 +9,9 @@ import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import {
   Card,
   CardContent,
-} from "@/components/ui/card"
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
-import { Button } from "@/components/ui/button"
+} from "@maple/ui/components/ui/card"
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@maple/ui/components/ui/input-group"
+import { Button } from "@maple/ui/components/ui/button"
 import {
   CheckIcon,
   CopyIcon,
@@ -36,7 +36,7 @@ import { ingestUrl } from "@/lib/services/common/ingest-url"
 import { MapleApiAtomClient } from "@/lib/services/common/atom-client"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { getServiceOverviewResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
-import { cn } from "@/lib/utils"
+import { cn } from "@maple/ui/utils"
 
 import { useCustomer } from "autumn-js/react"
 import { hasSelectedPlan } from "@/lib/billing/plan-gating"
diff --git a/apps/web/src/routes/services/$serviceName.tsx b/apps/web/src/routes/services/$serviceName.tsx
index ca9233c..3e86bf9 100644
--- a/apps/web/src/routes/services/$serviceName.tsx
+++ b/apps/web/src/routes/services/$serviceName.tsx
@@ -9,7 +9,7 @@ import { MetricsGrid } from "@/components/dashboard/metrics-grid"
 import type {
   ChartLegendMode,
   ChartTooltipMode,
-} from "@/components/charts/_shared/chart-types"
+} from "@maple/ui/components/charts/_shared/chart-types"
 import {
   getCustomChartServiceDetailResultAtom,
   getServiceApdexTimeSeriesResultAtom,
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index e814b14..5c21fec 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -11,13 +11,13 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@maple/ui/components/ui/card"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/components/ui/input-group"
+} from "@maple/ui/components/ui/input-group"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,10 +28,10 @@ import {
   AlertDialogHeader,
   AlertDialogMedia,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Badge } from "@/components/ui/badge"
-import { Separator } from "@/components/ui/separator"
+} from "@maple/ui/components/ui/alert-dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@maple/ui/components/ui/tabs"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Separator } from "@maple/ui/components/ui/separator"
 import {
   AlertWarningIcon,
   CheckIcon,
diff --git a/apps/web/src/routes/sign-in.tsx b/apps/web/src/routes/sign-in.tsx
index 26bdb56..99237e5 100644
--- a/apps/web/src/routes/sign-in.tsx
+++ b/apps/web/src/routes/sign-in.tsx
@@ -2,8 +2,8 @@ import { SignIn } from "@clerk/clerk-react"
 import { FormEvent, useState } from "react"
 import { createFileRoute } from "@tanstack/react-router"
 import { Schema } from "effect"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Button } from "@maple/ui/components/ui/button"
+import { Input } from "@maple/ui/components/ui/input"
 import { apiBaseUrl } from "@/lib/services/common/api-base-url"
 import { isClerkAuthEnabled } from "@/lib/services/common/auth-mode"
 import { setSelfHostedSessionToken } from "@/lib/services/common/self-hosted-auth"
diff --git a/apps/web/src/routes/traces/$traceId.tsx b/apps/web/src/routes/traces/$traceId.tsx
index 0ab9868..e6b109a 100644
--- a/apps/web/src/routes/traces/$traceId.tsx
+++ b/apps/web/src/routes/traces/$traceId.tsx
@@ -6,13 +6,13 @@ import { toast } from "sonner"
 import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import { TraceViewTabs } from "@/components/traces/trace-view-tabs"
 import { SpanDetailPanel } from "@/components/traces/span-detail-panel"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@maple/ui/components/ui/badge"
+import { Skeleton } from "@maple/ui/components/ui/skeleton"
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizableHandle,
-} from "@/components/ui/resizable"
+} from "@maple/ui/components/ui/resizable"
 import { formatDuration } from "@/lib/format"
 import { type Span, type SpanNode } from "@/api/tinybird/traces"
 import { getSpanHierarchyResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 6a19dff..1a6e44a 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2,6 +2,8 @@
 @import "tw-animate-css";
 @import "@fontsource-variable/geist-mono";
 
+@source "../../../packages/ui/src";
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 6b454fd..3c68551 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -16,9 +16,9 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@maple/ui/*": ["../../packages/ui/src/*"]
     },
     "plugins": [
       {
diff --git a/bun.lock b/bun.lock
index adfc508..989a3bf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -50,6 +50,7 @@
         "@clerk/clerk-react": "^5.60.0",
         "@fontsource-variable/geist-mono": "^5.2.7",
         "@maple/infra": "workspace:*",
+        "@maple/ui": "workspace:*",
         "@tailwindcss/vite": "^4.1.18",
         "@types/react": "^19.2.13",
         "@types/react-dom": "^19.2.3",
@@ -60,6 +61,7 @@
         "clsx": "^2.1.1",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "recharts": "2.15.4",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
       },
@@ -74,6 +76,7 @@
         "@fontsource-variable/geist-mono": "^5.2.7",
         "@maple/domain": "workspace:*",
         "@maple/infra": "workspace:*",
+        "@maple/ui": "workspace:*",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-devtools": "^0.9.5",
         "@tanstack/react-router": "^1.159.5",
@@ -165,6 +168,35 @@
         "typescript": "^5.9.3",
       },
     },
+    "packages/ui": {
+      "name": "@maple/ui",
+      "dependencies": {
+        "@base-ui/react": "^1.1.0",
+        "@xyflow/react": "^12.10.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "embla-carousel-react": "^8.6.0",
+        "input-otp": "^1.4.2",
+        "next-themes": "^0.4.6",
+        "react-day-picker": "^9.13.0",
+        "react-resizable-panels": "^4.6.2",
+        "recharts": "2.15.4",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.4.0",
+        "vaul": "^1.1.2",
+      },
+      "devDependencies": {
+        "@types/react": "^19.2.13",
+        "@types/react-dom": "^19.2.3",
+        "typescript": "^5.9.3",
+      },
+      "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "tailwindcss": "^4.0.0",
+      },
+    },
   },
   "packages": {
     "@acemir/cssom": ["@acemir/cssom@0.9.31", "", {}, "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA=="],
@@ -587,6 +619,8 @@
 
     "@maple/landing": ["@maple/landing@workspace:apps/landing"],
 
+    "@maple/ui": ["@maple/ui@workspace:packages/ui"],
+
     "@maple/web": ["@maple/web@workspace:apps/web"],
 
     "@mishieck/ink-titled-box": ["@mishieck/ink-titled-box@0.3.0", "", { "peerDependencies": { "ink": "^6.0.0", "react": "^19.1.0", "typescript": "^5" } }, "sha512-ugzVH9hixp3hwKfQ8On/qnsrdAxS3y9rTu/aGOFed4zVUvtZyGZNIR4rxAwXult8HKI4vJEh0OM8wib9NPrwUg=="],
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..62949e2
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@maple/ui",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./utils": "./src/lib/utils.ts",
+    "./colors": "./src/lib/colors.ts",
+    "./types": "./src/lib/types.ts",
+    "./format": "./src/lib/format.ts",
+    "./*": "./src/*"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "@xyflow/react": "^12.10.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-resizable-panels": "^4.6.2",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/apps/web/src/components/charts/_shared/build-chart-config.ts b/packages/ui/src/components/charts/_shared/build-chart-config.ts
similarity index 92%
rename from apps/web/src/components/charts/_shared/build-chart-config.ts
rename to packages/ui/src/components/charts/_shared/build-chart-config.ts
index eace736..9a5df30 100644
--- a/apps/web/src/components/charts/_shared/build-chart-config.ts
+++ b/packages/ui/src/components/charts/_shared/build-chart-config.ts
@@ -1,4 +1,4 @@
-import type { ChartConfig } from "@/components/ui/chart"
+import type { ChartConfig } from "../../ui/chart"
 
 const CHART_COLORS = [
   "var(--chart-1)",
diff --git a/apps/web/src/components/charts/_shared/chart-types.ts b/packages/ui/src/components/charts/_shared/chart-types.ts
similarity index 100%
rename from apps/web/src/components/charts/_shared/chart-types.ts
rename to packages/ui/src/components/charts/_shared/chart-types.ts
diff --git a/apps/web/src/components/charts/_shared/sample-data.ts b/packages/ui/src/components/charts/_shared/sample-data.ts
similarity index 100%
rename from apps/web/src/components/charts/_shared/sample-data.ts
rename to packages/ui/src/components/charts/_shared/sample-data.ts
diff --git a/apps/web/src/components/charts/_shared/svg-filters.tsx b/packages/ui/src/components/charts/_shared/svg-filters.tsx
similarity index 100%
rename from apps/web/src/components/charts/_shared/svg-filters.tsx
rename to packages/ui/src/components/charts/_shared/svg-filters.tsx
diff --git a/apps/web/src/components/charts/_shared/svg-patterns.tsx b/packages/ui/src/components/charts/_shared/svg-patterns.tsx
similarity index 100%
rename from apps/web/src/components/charts/_shared/svg-patterns.tsx
rename to packages/ui/src/components/charts/_shared/svg-patterns.tsx
diff --git a/apps/web/src/components/charts/_shared/use-dynamic-dasharray.ts b/packages/ui/src/components/charts/_shared/use-dynamic-dasharray.ts
similarity index 100%
rename from apps/web/src/components/charts/_shared/use-dynamic-dasharray.ts
rename to packages/ui/src/components/charts/_shared/use-dynamic-dasharray.ts
diff --git a/apps/web/src/components/charts/area/apdex-area-chart.tsx b/packages/ui/src/components/charts/area/apdex-area-chart.tsx
similarity index 89%
rename from apps/web/src/components/charts/area/apdex-area-chart.tsx
rename to packages/ui/src/components/charts/area/apdex-area-chart.tsx
index 3c5abb2..a5eea04 100644
--- a/apps/web/src/components/charts/area/apdex-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/apdex-area-chart.tsx
@@ -1,9 +1,9 @@
 import { useId, useMemo } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { apdexTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { VerticalGradient } from "@/components/charts/_shared/svg-patterns"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { apdexTimeSeriesData } from "../_shared/sample-data"
+import { VerticalGradient } from "../_shared/svg-patterns"
 import {
   type ChartConfig,
   ChartContainer,
@@ -11,8 +11,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const chartConfig = {
   apdexScore: { label: "Apdex", color: "var(--chart-5)" },
diff --git a/apps/web/src/components/charts/area/bar-pattern-area-chart.tsx b/packages/ui/src/components/charts/area/bar-pattern-area-chart.tsx
similarity index 82%
rename from apps/web/src/components/charts/area/bar-pattern-area-chart.tsx
rename to packages/ui/src/components/charts/area/bar-pattern-area-chart.tsx
index 7392d11..33fb4e7 100644
--- a/apps/web/src/components/charts/area/bar-pattern-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/bar-pattern-area-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { areaTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { BarPattern } from "@/components/charts/_shared/svg-patterns"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { areaTimeSeriesData } from "../_shared/sample-data"
+import { BarPattern } from "../_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/area/dotted-pattern-area-chart.tsx b/packages/ui/src/components/charts/area/dotted-pattern-area-chart.tsx
similarity index 82%
rename from apps/web/src/components/charts/area/dotted-pattern-area-chart.tsx
rename to packages/ui/src/components/charts/area/dotted-pattern-area-chart.tsx
index 7c93cac..e65ee7a 100644
--- a/apps/web/src/components/charts/area/dotted-pattern-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/dotted-pattern-area-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { areaTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { DottedPattern } from "@/components/charts/_shared/svg-patterns"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { areaTimeSeriesData } from "../_shared/sample-data"
+import { DottedPattern } from "../_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/area/error-rate-area-chart.tsx b/packages/ui/src/components/charts/area/error-rate-area-chart.tsx
similarity index 89%
rename from apps/web/src/components/charts/area/error-rate-area-chart.tsx
rename to packages/ui/src/components/charts/area/error-rate-area-chart.tsx
index 303a8c6..dd86efb 100644
--- a/apps/web/src/components/charts/area/error-rate-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/error-rate-area-chart.tsx
@@ -1,9 +1,9 @@
 import { useId, useMemo } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { errorRateTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { VerticalGradient } from "@/components/charts/_shared/svg-patterns"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { errorRateTimeSeriesData } from "../_shared/sample-data"
+import { VerticalGradient } from "../_shared/svg-patterns"
 import {
   type ChartConfig,
   ChartContainer,
@@ -11,8 +11,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { formatErrorRate, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { formatErrorRate, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const chartConfig = {
   errorRate: { label: "Error Rate", color: "var(--color-destructive, #ef4444)" },
diff --git a/apps/web/src/components/charts/area/gradient-area-chart.tsx b/packages/ui/src/components/charts/area/gradient-area-chart.tsx
similarity index 83%
rename from apps/web/src/components/charts/area/gradient-area-chart.tsx
rename to packages/ui/src/components/charts/area/gradient-area-chart.tsx
index 8ebd7c1..4f64b0e 100644
--- a/apps/web/src/components/charts/area/gradient-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/gradient-area-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { areaTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { VerticalGradient } from "@/components/charts/_shared/svg-patterns"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { areaTimeSeriesData } from "../_shared/sample-data"
+import { VerticalGradient } from "../_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/area/gradient-rounded-area-chart.tsx b/packages/ui/src/components/charts/area/gradient-rounded-area-chart.tsx
similarity index 83%
rename from apps/web/src/components/charts/area/gradient-rounded-area-chart.tsx
rename to packages/ui/src/components/charts/area/gradient-rounded-area-chart.tsx
index 93ceff4..3071108 100644
--- a/apps/web/src/components/charts/area/gradient-rounded-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/gradient-rounded-area-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { areaTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { VerticalGradient } from "@/components/charts/_shared/svg-patterns"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { areaTimeSeriesData } from "../_shared/sample-data"
+import { VerticalGradient } from "../_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/area/query-builder-area-chart.tsx b/packages/ui/src/components/charts/area/query-builder-area-chart.tsx
similarity index 97%
rename from apps/web/src/components/charts/area/query-builder-area-chart.tsx
rename to packages/ui/src/components/charts/area/query-builder-area-chart.tsx
index 7896c1d..1f86869 100644
--- a/apps/web/src/components/charts/area/query-builder-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/query-builder-area-chart.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
+import type { BaseChartProps } from "../_shared/chart-types"
 import {
   type ChartConfig,
   ChartContainer,
@@ -9,8 +9,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const fallbackData: Record<string, unknown>[] = [
   { bucket: "2026-01-01T00:00:00Z", A: 12, B: 8 },
diff --git a/apps/web/src/components/charts/area/throughput-area-chart.tsx b/packages/ui/src/components/charts/area/throughput-area-chart.tsx
similarity index 90%
rename from apps/web/src/components/charts/area/throughput-area-chart.tsx
rename to packages/ui/src/components/charts/area/throughput-area-chart.tsx
index e1d3ab6..504dbba 100644
--- a/apps/web/src/components/charts/area/throughput-area-chart.tsx
+++ b/packages/ui/src/components/charts/area/throughput-area-chart.tsx
@@ -1,9 +1,9 @@
 import { useMemo, useId } from "react"
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { throughputTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { VerticalGradient } from "@/components/charts/_shared/svg-patterns"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { throughputTimeSeriesData } from "../_shared/sample-data"
+import { VerticalGradient } from "../_shared/svg-patterns"
 import {
   type ChartConfig,
   ChartContainer,
@@ -11,8 +11,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { inferBucketSeconds, inferRangeMs, formatBucketLabel, bucketIntervalLabel, formatThroughput } from "@/lib/format"
+} from "../../ui/chart"
+import { inferBucketSeconds, inferRangeMs, formatBucketLabel, bucketIntervalLabel, formatThroughput } from "../../../lib/format"
 
 export function ThroughputAreaChart({ data, className, legend, tooltip }: BaseChartProps) {
   const id = useId()
diff --git a/apps/web/src/components/charts/bar/default-bar-chart.tsx b/packages/ui/src/components/charts/bar/default-bar-chart.tsx
similarity index 74%
rename from apps/web/src/components/charts/bar/default-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/default-bar-chart.tsx
index 52301a8..936a47c 100644
--- a/apps/web/src/components/charts/bar/default-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/default-bar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { defaultBarData } from "@/components/charts/_shared/sample-data"
-import { DottedPattern } from "@/components/charts/_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { defaultBarData } from "../_shared/sample-data"
+import { DottedPattern } from "../_shared/svg-patterns"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/default-multiple-bar-chart.tsx b/packages/ui/src/components/charts/bar/default-multiple-bar-chart.tsx
similarity index 81%
rename from apps/web/src/components/charts/bar/default-multiple-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/default-multiple-bar-chart.tsx
index c846688..6d6146c 100644
--- a/apps/web/src/components/charts/bar/default-multiple-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/default-multiple-bar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { multiBarData } from "@/components/charts/_shared/sample-data"
-import { DottedPattern } from "@/components/charts/_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { multiBarData } from "../_shared/sample-data"
+import { DottedPattern } from "../_shared/svg-patterns"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/duotone-bar-chart.tsx b/packages/ui/src/components/charts/bar/duotone-bar-chart.tsx
similarity index 83%
rename from apps/web/src/components/charts/bar/duotone-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/duotone-bar-chart.tsx
index 6bdf441..cac4239 100644
--- a/apps/web/src/components/charts/bar/duotone-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/duotone-bar-chart.tsx
@@ -2,9 +2,9 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { defaultBarData } from "@/components/charts/_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { defaultBarData } from "../_shared/sample-data"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/glowing-bar-chart.tsx b/packages/ui/src/components/charts/bar/glowing-bar-chart.tsx
similarity index 80%
rename from apps/web/src/components/charts/bar/glowing-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/glowing-bar-chart.tsx
index 3dcfe2c..9c75ddb 100644
--- a/apps/web/src/components/charts/bar/glowing-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/glowing-bar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { multiBarData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter } from "@/components/charts/_shared/svg-filters"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { multiBarData } from "../_shared/sample-data"
+import { GlowFilter } from "../_shared/svg-filters"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/gradient-bar-chart.tsx b/packages/ui/src/components/charts/bar/gradient-bar-chart.tsx
similarity index 87%
rename from apps/web/src/components/charts/bar/gradient-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/gradient-bar-chart.tsx
index 98d9b47..c8aadcf 100644
--- a/apps/web/src/components/charts/bar/gradient-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/gradient-bar-chart.tsx
@@ -2,9 +2,9 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { defaultBarData } from "@/components/charts/_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { defaultBarData } from "../_shared/sample-data"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/hatched-bar-chart.tsx b/packages/ui/src/components/charts/bar/hatched-bar-chart.tsx
similarity index 74%
rename from apps/web/src/components/charts/bar/hatched-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/hatched-bar-chart.tsx
index ee7bf01..cd68648 100644
--- a/apps/web/src/components/charts/bar/hatched-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/hatched-bar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { defaultBarData } from "@/components/charts/_shared/sample-data"
-import { HatchedPattern } from "@/components/charts/_shared/svg-patterns"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { defaultBarData } from "../_shared/sample-data"
+import { HatchedPattern } from "../_shared/svg-patterns"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/highlighted-bar-chart.tsx b/packages/ui/src/components/charts/bar/highlighted-bar-chart.tsx
similarity index 83%
rename from apps/web/src/components/charts/bar/highlighted-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/highlighted-bar-chart.tsx
index 341e7cd..61c6600 100644
--- a/apps/web/src/components/charts/bar/highlighted-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/highlighted-bar-chart.tsx
@@ -2,9 +2,9 @@
 
 import { useState } from "react"
 import { Bar, BarChart, CartesianGrid, Cell, XAxis } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { defaultBarData } from "@/components/charts/_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { defaultBarData } from "../_shared/sample-data"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/bar/query-builder-bar-chart.tsx b/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
similarity index 96%
rename from apps/web/src/components/charts/bar/query-builder-bar-chart.tsx
rename to packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
index 8b00e85..59f0102 100644
--- a/apps/web/src/components/charts/bar/query-builder-bar-chart.tsx
+++ b/packages/ui/src/components/charts/bar/query-builder-bar-chart.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
+import type { BaseChartProps } from "../_shared/chart-types"
 import {
   type ChartConfig,
   ChartContainer,
@@ -9,8 +9,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const fallbackData: Record<string, unknown>[] = [
   { bucket: "2026-01-01T00:00:00Z", A: 12, B: 8 },
diff --git a/apps/web/src/components/charts/index.ts b/packages/ui/src/components/charts/index.ts
similarity index 100%
rename from apps/web/src/components/charts/index.ts
rename to packages/ui/src/components/charts/index.ts
diff --git a/apps/web/src/components/charts/line/dotted-line-chart.tsx b/packages/ui/src/components/charts/line/dotted-line-chart.tsx
similarity index 76%
rename from apps/web/src/components/charts/line/dotted-line-chart.tsx
rename to packages/ui/src/components/charts/line/dotted-line-chart.tsx
index 27cfff0..9407e46 100644
--- a/apps/web/src/components/charts/line/dotted-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/dotted-line-chart.tsx
@@ -1,8 +1,8 @@
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { lineTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { lineTimeSeriesData } from "../_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/dotted-multi-line-chart.tsx b/packages/ui/src/components/charts/line/dotted-multi-line-chart.tsx
similarity index 81%
rename from apps/web/src/components/charts/line/dotted-multi-line-chart.tsx
rename to packages/ui/src/components/charts/line/dotted-multi-line-chart.tsx
index b37ab5c..6cfc420 100644
--- a/apps/web/src/components/charts/line/dotted-multi-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/dotted-multi-line-chart.tsx
@@ -1,8 +1,8 @@
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { multiLineData } from "@/components/charts/_shared/sample-data"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { multiLineData } from "../_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   desktop: { label: "Desktop", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/glowing-line-chart.tsx b/packages/ui/src/components/charts/line/glowing-line-chart.tsx
similarity index 75%
rename from apps/web/src/components/charts/line/glowing-line-chart.tsx
rename to packages/ui/src/components/charts/line/glowing-line-chart.tsx
index 3cffcb6..6ab192a 100644
--- a/apps/web/src/components/charts/line/glowing-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/glowing-line-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { lineTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter } from "@/components/charts/_shared/svg-filters"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { lineTimeSeriesData } from "../_shared/sample-data"
+import { GlowFilter } from "../_shared/svg-filters"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/latency-line-chart.tsx b/packages/ui/src/components/charts/line/latency-line-chart.tsx
similarity index 92%
rename from apps/web/src/components/charts/line/latency-line-chart.tsx
rename to packages/ui/src/components/charts/line/latency-line-chart.tsx
index c6c24d2..55c4b98 100644
--- a/apps/web/src/components/charts/line/latency-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/latency-line-chart.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from "react"
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { latencyTimeSeriesData } from "@/components/charts/_shared/sample-data"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { latencyTimeSeriesData } from "../_shared/sample-data"
 import {
   type ChartConfig,
   ChartContainer,
@@ -10,8 +10,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { formatLatency, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { formatLatency, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const chartConfig = {
   p99LatencyMs: { label: "P99", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/number-dot-line-chart.tsx b/packages/ui/src/components/charts/line/number-dot-line-chart.tsx
similarity index 83%
rename from apps/web/src/components/charts/line/number-dot-line-chart.tsx
rename to packages/ui/src/components/charts/line/number-dot-line-chart.tsx
index 63e0025..30b3fcc 100644
--- a/apps/web/src/components/charts/line/number-dot-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/number-dot-line-chart.tsx
@@ -1,8 +1,8 @@
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { lineTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { lineTimeSeriesData } from "../_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/partial-line-chart.tsx b/packages/ui/src/components/charts/line/partial-line-chart.tsx
similarity index 81%
rename from apps/web/src/components/charts/line/partial-line-chart.tsx
rename to packages/ui/src/components/charts/line/partial-line-chart.tsx
index f039008..7a07da2 100644
--- a/apps/web/src/components/charts/line/partial-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/partial-line-chart.tsx
@@ -1,9 +1,9 @@
 import { CartesianGrid, Customized, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { partialLineData } from "@/components/charts/_shared/sample-data"
-import { useDynamicDasharray } from "@/components/charts/_shared/use-dynamic-dasharray"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { partialLineData } from "../_shared/sample-data"
+import { useDynamicDasharray } from "../_shared/use-dynamic-dasharray"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/pinging-dot-chart.tsx b/packages/ui/src/components/charts/line/pinging-dot-chart.tsx
similarity index 87%
rename from apps/web/src/components/charts/line/pinging-dot-chart.tsx
rename to packages/ui/src/components/charts/line/pinging-dot-chart.tsx
index 6c82267..b3cd2c8 100644
--- a/apps/web/src/components/charts/line/pinging-dot-chart.tsx
+++ b/packages/ui/src/components/charts/line/pinging-dot-chart.tsx
@@ -1,8 +1,8 @@
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { lineTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { lineTimeSeriesData } from "../_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/line/query-builder-line-chart.tsx b/packages/ui/src/components/charts/line/query-builder-line-chart.tsx
similarity index 97%
rename from apps/web/src/components/charts/line/query-builder-line-chart.tsx
rename to packages/ui/src/components/charts/line/query-builder-line-chart.tsx
index 78eff76..6d79508 100644
--- a/apps/web/src/components/charts/line/query-builder-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/query-builder-line-chart.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
+import type { BaseChartProps } from "../_shared/chart-types"
 import {
   type ChartConfig,
   ChartContainer,
@@ -9,8 +9,8 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "@/lib/format"
+} from "../../ui/chart"
+import { formatNumber, inferBucketSeconds, inferRangeMs, formatBucketLabel } from "../../../lib/format"
 
 const fallbackData: Record<string, unknown>[] = [
   { bucket: "2026-01-01T00:00:00Z", A: 12, B: 8 },
diff --git a/apps/web/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx b/packages/ui/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx
similarity index 76%
rename from apps/web/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx
rename to packages/ui/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx
index 80c8bce..d25c005 100644
--- a/apps/web/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx
+++ b/packages/ui/src/components/charts/line/rainbow-glow-gradient-line-chart.tsx
@@ -1,10 +1,10 @@
 import { useId } from "react"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { lineTimeSeriesData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter, RainbowGradient } from "@/components/charts/_shared/svg-filters"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { lineTimeSeriesData } from "../_shared/sample-data"
+import { GlowFilter, RainbowGradient } from "../_shared/svg-filters"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
 
 const chartConfig = {
   value: { label: "Value", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/pie/default-radial-chart.tsx b/packages/ui/src/components/charts/pie/default-radial-chart.tsx
similarity index 69%
rename from apps/web/src/components/charts/pie/default-radial-chart.tsx
rename to packages/ui/src/components/charts/pie/default-radial-chart.tsx
index cf48dda..e668a8d 100644
--- a/apps/web/src/components/charts/pie/default-radial-chart.tsx
+++ b/packages/ui/src/components/charts/pie/default-radial-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useMemo } from "react"
 import { RadialBar, RadialBarChart } from "recharts"
-import { ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { buildChartConfig } from "@/components/charts/_shared/build-chart-config"
-import { radialData } from "@/components/charts/_shared/sample-data"
+import { ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { buildChartConfig } from "../_shared/build-chart-config"
+import { radialData } from "../_shared/sample-data"
 
 export function DefaultRadialChart({ data = radialData, className }: BaseChartProps) {
   const { config, data: coloredData } = useMemo(() => buildChartConfig(data), [data])
diff --git a/apps/web/src/components/charts/pie/glowing-radial-chart.tsx b/packages/ui/src/components/charts/pie/glowing-radial-chart.tsx
similarity index 79%
rename from apps/web/src/components/charts/pie/glowing-radial-chart.tsx
rename to packages/ui/src/components/charts/pie/glowing-radial-chart.tsx
index 85ad3e2..76bc127 100644
--- a/apps/web/src/components/charts/pie/glowing-radial-chart.tsx
+++ b/packages/ui/src/components/charts/pie/glowing-radial-chart.tsx
@@ -2,11 +2,11 @@
 
 import { useId, useMemo, useState } from "react"
 import { RadialBar, RadialBarChart } from "recharts"
-import { ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { buildChartConfig } from "@/components/charts/_shared/build-chart-config"
-import { radialData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter } from "@/components/charts/_shared/svg-filters"
+import { ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { buildChartConfig } from "../_shared/build-chart-config"
+import { radialData } from "../_shared/sample-data"
+import { GlowFilter } from "../_shared/svg-filters"
 
 export function GlowingRadialChart({ data = radialData, className }: BaseChartProps) {
   const id = useId()
diff --git a/apps/web/src/components/charts/pie/increase-size-pie-chart.tsx b/packages/ui/src/components/charts/pie/increase-size-pie-chart.tsx
similarity index 77%
rename from apps/web/src/components/charts/pie/increase-size-pie-chart.tsx
rename to packages/ui/src/components/charts/pie/increase-size-pie-chart.tsx
index 4789fe4..bf2d022 100644
--- a/apps/web/src/components/charts/pie/increase-size-pie-chart.tsx
+++ b/packages/ui/src/components/charts/pie/increase-size-pie-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useMemo } from "react"
 import { Cell, Pie, PieChart } from "recharts"
-import { ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { buildChartConfig } from "@/components/charts/_shared/build-chart-config"
-import { pieData } from "@/components/charts/_shared/sample-data"
+import { ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { buildChartConfig } from "../_shared/build-chart-config"
+import { pieData } from "../_shared/sample-data"
 
 export function IncreaseSizePieChart({ data = pieData, className }: BaseChartProps) {
   const { config, data: coloredData } = useMemo(() => buildChartConfig(data), [data])
diff --git a/apps/web/src/components/charts/pie/rounded-pie-chart.tsx b/packages/ui/src/components/charts/pie/rounded-pie-chart.tsx
similarity index 71%
rename from apps/web/src/components/charts/pie/rounded-pie-chart.tsx
rename to packages/ui/src/components/charts/pie/rounded-pie-chart.tsx
index 84b8aa6..aad852b 100644
--- a/apps/web/src/components/charts/pie/rounded-pie-chart.tsx
+++ b/packages/ui/src/components/charts/pie/rounded-pie-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useMemo } from "react"
 import { LabelList, Pie, PieChart } from "recharts"
-import { ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { buildChartConfig } from "@/components/charts/_shared/build-chart-config"
-import { pieData } from "@/components/charts/_shared/sample-data"
+import { ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { buildChartConfig } from "../_shared/build-chart-config"
+import { pieData } from "../_shared/sample-data"
 
 export function RoundedPieChart({ data = pieData, className }: BaseChartProps) {
   const { config, data: coloredData } = useMemo(() => buildChartConfig(data), [data])
diff --git a/apps/web/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx b/packages/ui/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx
similarity index 80%
rename from apps/web/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx
rename to packages/ui/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx
index 8fe393c..5cfa32a 100644
--- a/apps/web/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx
+++ b/packages/ui/src/components/charts/radar/glowing-multiple-stroke-radar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { radarData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter } from "@/components/charts/_shared/svg-filters"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { radarData } from "../_shared/sample-data"
+import { GlowFilter } from "../_shared/svg-filters"
 
 const chartConfig = {
   a: { label: "Student A", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/radar/glowing-stroke-radar-chart.tsx b/packages/ui/src/components/charts/radar/glowing-stroke-radar-chart.tsx
similarity index 75%
rename from apps/web/src/components/charts/radar/glowing-stroke-radar-chart.tsx
rename to packages/ui/src/components/charts/radar/glowing-stroke-radar-chart.tsx
index ae1f7b5..f05f2d5 100644
--- a/apps/web/src/components/charts/radar/glowing-stroke-radar-chart.tsx
+++ b/packages/ui/src/components/charts/radar/glowing-stroke-radar-chart.tsx
@@ -2,10 +2,10 @@
 
 import { useId } from "react"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { radarData } from "@/components/charts/_shared/sample-data"
-import { GlowFilter } from "@/components/charts/_shared/svg-filters"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { radarData } from "../_shared/sample-data"
+import { GlowFilter } from "../_shared/svg-filters"
 
 const chartConfig = {
   a: { label: "Student A", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/radar/stroke-multiple-radar-chart.tsx b/packages/ui/src/components/charts/radar/stroke-multiple-radar-chart.tsx
similarity index 81%
rename from apps/web/src/components/charts/radar/stroke-multiple-radar-chart.tsx
rename to packages/ui/src/components/charts/radar/stroke-multiple-radar-chart.tsx
index c14e013..363b630 100644
--- a/apps/web/src/components/charts/radar/stroke-multiple-radar-chart.tsx
+++ b/packages/ui/src/components/charts/radar/stroke-multiple-radar-chart.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { radarData } from "@/components/charts/_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { radarData } from "../_shared/sample-data"
 
 const chartConfig = {
   a: { label: "Student A", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/radar/stroke-radar-chart.tsx b/packages/ui/src/components/charts/radar/stroke-radar-chart.tsx
similarity index 76%
rename from apps/web/src/components/charts/radar/stroke-radar-chart.tsx
rename to packages/ui/src/components/charts/radar/stroke-radar-chart.tsx
index 1da0934..b7038bb 100644
--- a/apps/web/src/components/charts/radar/stroke-radar-chart.tsx
+++ b/packages/ui/src/components/charts/radar/stroke-radar-chart.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import type { BaseChartProps } from "@/components/charts/_shared/chart-types"
-import { radarData } from "@/components/charts/_shared/sample-data"
+import { type ChartConfig, ChartContainer } from "../../ui/chart"
+import type { BaseChartProps } from "../_shared/chart-types"
+import { radarData } from "../_shared/sample-data"
 
 const chartConfig = {
   a: { label: "Student A", color: "var(--chart-1)" },
diff --git a/apps/web/src/components/charts/registry.ts b/packages/ui/src/components/charts/registry.ts
similarity index 100%
rename from apps/web/src/components/charts/registry.ts
rename to packages/ui/src/components/charts/registry.ts
diff --git a/packages/ui/src/components/icons/alert-warning.tsx b/packages/ui/src/components/icons/alert-warning.tsx
new file mode 100644
index 0000000..724b809
--- /dev/null
+++ b/packages/ui/src/components/icons/alert-warning.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function AlertWarningIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <circle cx="12" cy="20.5" r=".5" fill="currentColor" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { AlertWarningIcon }
diff --git a/packages/ui/src/components/icons/arrow-down.tsx b/packages/ui/src/components/icons/arrow-down.tsx
new file mode 100644
index 0000000..f4e3e05
--- /dev/null
+++ b/packages/ui/src/components/icons/arrow-down.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function ArrowDownIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M12 3V21V20.5" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M19 14L12 21L5 14" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ArrowDownIcon }
diff --git a/packages/ui/src/components/icons/arrow-left.tsx b/packages/ui/src/components/icons/arrow-left.tsx
new file mode 100644
index 0000000..4a580c7
--- /dev/null
+++ b/packages/ui/src/components/icons/arrow-left.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function ArrowLeftIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M21 12L3 12L3.5 12" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M10 19L3 12L10 5" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ArrowLeftIcon }
diff --git a/packages/ui/src/components/icons/arrow-right.tsx b/packages/ui/src/components/icons/arrow-right.tsx
new file mode 100644
index 0000000..54a2421
--- /dev/null
+++ b/packages/ui/src/components/icons/arrow-right.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function ArrowRightIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M3 12L21 12L20.5 12" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M14 19L21 12L14 5" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ArrowRightIcon }
diff --git a/packages/ui/src/components/icons/check.tsx b/packages/ui/src/components/icons/check.tsx
new file mode 100644
index 0000000..76ba375
--- /dev/null
+++ b/packages/ui/src/components/icons/check.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function CheckIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <polyline points="3 13 8 19 21 5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { CheckIcon }
diff --git a/packages/ui/src/components/icons/chevron-down.tsx b/packages/ui/src/components/icons/chevron-down.tsx
new file mode 100644
index 0000000..cac0ec6
--- /dev/null
+++ b/packages/ui/src/components/icons/chevron-down.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function ChevronDownIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M21 8L12 17L3 8" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ChevronDownIcon }
diff --git a/packages/ui/src/components/icons/chevron-expand-y.tsx b/packages/ui/src/components/icons/chevron-expand-y.tsx
new file mode 100644
index 0000000..ef41169
--- /dev/null
+++ b/packages/ui/src/components/icons/chevron-expand-y.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function ChevronExpandYIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <polyline points="7 8 12 3 17 8" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <polyline points="17 16 12 21 7 16" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { ChevronExpandYIcon }
diff --git a/packages/ui/src/components/icons/chevron-left.tsx b/packages/ui/src/components/icons/chevron-left.tsx
new file mode 100644
index 0000000..4baf07c
--- /dev/null
+++ b/packages/ui/src/components/icons/chevron-left.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function ChevronLeftIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M16 21L7 12L16 3" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ChevronLeftIcon }
diff --git a/packages/ui/src/components/icons/chevron-right.tsx b/packages/ui/src/components/icons/chevron-right.tsx
new file mode 100644
index 0000000..0256431
--- /dev/null
+++ b/packages/ui/src/components/icons/chevron-right.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function ChevronRightIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M8 21L17 12L8 3" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ChevronRightIcon }
diff --git a/packages/ui/src/components/icons/chevron-up.tsx b/packages/ui/src/components/icons/chevron-up.tsx
new file mode 100644
index 0000000..5e99452
--- /dev/null
+++ b/packages/ui/src/components/icons/chevron-up.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function ChevronUpIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M21 16L12 7L3 16" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { ChevronUpIcon }
diff --git a/packages/ui/src/components/icons/circle-check.tsx b/packages/ui/src/components/icons/circle-check.tsx
new file mode 100644
index 0000000..6863ec2
--- /dev/null
+++ b/packages/ui/src/components/icons/circle-check.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function CircleCheckIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <polyline points="7 13 10 16 17 8" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { CircleCheckIcon }
diff --git a/packages/ui/src/components/icons/circle-info.tsx b/packages/ui/src/components/icons/circle-info.tsx
new file mode 100644
index 0000000..79effe5
--- /dev/null
+++ b/packages/ui/src/components/icons/circle-info.tsx
@@ -0,0 +1,13 @@
+import type { IconProps } from "./icon"
+
+function CircleInfoIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <circle cx="12" cy="7.25" r="1.25" fill="currentColor" strokeWidth="0" />
+    </svg>
+  )
+}
+export { CircleInfoIcon }
diff --git a/packages/ui/src/components/icons/circle-xmark.tsx b/packages/ui/src/components/icons/circle-xmark.tsx
new file mode 100644
index 0000000..126c392
--- /dev/null
+++ b/packages/ui/src/components/icons/circle-xmark.tsx
@@ -0,0 +1,13 @@
+import type { IconProps } from "./icon"
+
+function CircleXmarkIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <line x1="15.5" y1="8.5" x2="8.5" y2="15.5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <line x1="15.5" y1="15.5" x2="8.5" y2="8.5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { CircleXmarkIcon }
diff --git a/packages/ui/src/components/icons/code.tsx b/packages/ui/src/components/icons/code.tsx
new file mode 100644
index 0000000..e1dd563
--- /dev/null
+++ b/packages/ui/src/components/icons/code.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function CodeIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M7.5 17.5L2 12L7.5 6.5" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M16.5 17.5L22 12L16.5 6.5" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { CodeIcon }
diff --git a/packages/ui/src/components/icons/dots.tsx b/packages/ui/src/components/icons/dots.tsx
new file mode 100644
index 0000000..1f31c50
--- /dev/null
+++ b/packages/ui/src/components/icons/dots.tsx
@@ -0,0 +1,13 @@
+import type { IconProps } from "./icon"
+
+function DotsIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="12" r=".75" fill="currentColor" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <circle cx="20.25" cy="12" r=".75" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" fill="currentColor" />
+      <circle cx="3.75" cy="12" r=".75" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" fill="currentColor" />
+    </svg>
+  )
+}
+export { DotsIcon }
diff --git a/packages/ui/src/components/icons/eye.tsx b/packages/ui/src/components/icons/eye.tsx
new file mode 100644
index 0000000..ebbe36e
--- /dev/null
+++ b/packages/ui/src/components/icons/eye.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function EyeIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="10" r="5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <path d="m1.141,12s3.859-7,10.859-7,10.859,7,10.859,7c0,0-3.859,7-10.859,7S1.141,12,1.141,12Z" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { EyeIcon }
diff --git a/packages/ui/src/components/icons/icon.tsx b/packages/ui/src/components/icons/icon.tsx
new file mode 100644
index 0000000..87d3788
--- /dev/null
+++ b/packages/ui/src/components/icons/icon.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps, ComponentType } from "react"
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number | string
+}
+
+export type IconComponent = ComponentType<IconProps>
diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts
new file mode 100644
index 0000000..1f32292
--- /dev/null
+++ b/packages/ui/src/components/icons/index.ts
@@ -0,0 +1,26 @@
+export type { IconProps, IconComponent } from "./icon"
+
+export { AlertWarningIcon } from "./alert-warning"
+export { ArrowDownIcon } from "./arrow-down"
+export { ArrowLeftIcon } from "./arrow-left"
+export { ArrowRightIcon } from "./arrow-right"
+export { CheckIcon } from "./check"
+export { ChevronDownIcon } from "./chevron-down"
+export { ChevronExpandYIcon } from "./chevron-expand-y"
+export { ChevronLeftIcon } from "./chevron-left"
+export { ChevronRightIcon } from "./chevron-right"
+export { ChevronUpIcon } from "./chevron-up"
+export { CircleCheckIcon } from "./circle-check"
+export { CircleInfoIcon } from "./circle-info"
+export { CircleXmarkIcon } from "./circle-xmark"
+export { CodeIcon } from "./code"
+export { DotsIcon } from "./dots"
+export { EyeIcon } from "./eye"
+export { LoaderIcon } from "./loader"
+export { MagnifierIcon } from "./magnifier"
+export { MinusIcon } from "./minus"
+export { NetworkNodesIcon } from "./network-nodes"
+export { PulseIcon } from "./pulse"
+export { RadioCheckedIcon } from "./radio-checked"
+export { SidebarLeftIcon } from "./sidebar-left"
+export { XmarkIcon } from "./xmark"
diff --git a/packages/ui/src/components/icons/loader.tsx b/packages/ui/src/components/icons/loader.tsx
new file mode 100644
index 0000000..0ef8f9f
--- /dev/null
+++ b/packages/ui/src/components/icons/loader.tsx
@@ -0,0 +1,18 @@
+import type { IconProps } from "./icon"
+
+function LoaderIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path opacity="0.5" d="M12 19V22" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path d="M12 2V5" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.25" d="M5.005 11.995L2.005 11.995" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.75" d="M22.005 11.995L19.005 11.995" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.38" d="M7.05171 16.9462L4.93039 19.0675" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.88" d="M19.0725 4.92542L16.9512 7.04674" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.13" d="M7.05879 7.04669L4.93747 4.92537" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      <path opacity="0.63" d="M19.0796 19.0675L16.9583 16.9462" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { LoaderIcon }
diff --git a/packages/ui/src/components/icons/magnifier.tsx b/packages/ui/src/components/icons/magnifier.tsx
new file mode 100644
index 0000000..6530791
--- /dev/null
+++ b/packages/ui/src/components/icons/magnifier.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function MagnifierIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <line x1="20.5" y1="20.5" x2="15" y2="15" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <circle cx="10" cy="10" r="7" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { MagnifierIcon }
diff --git a/packages/ui/src/components/icons/minus.tsx b/packages/ui/src/components/icons/minus.tsx
new file mode 100644
index 0000000..090c552
--- /dev/null
+++ b/packages/ui/src/components/icons/minus.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function MinusIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <line x1="21" y1="12" x2="3" y2="12" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { MinusIcon }
diff --git a/packages/ui/src/components/icons/network-nodes.tsx b/packages/ui/src/components/icons/network-nodes.tsx
new file mode 100644
index 0000000..104270a
--- /dev/null
+++ b/packages/ui/src/components/icons/network-nodes.tsx
@@ -0,0 +1,19 @@
+import type { IconProps } from "./icon"
+
+function NetworkNodesIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M4.5 13.5L10.5 19.5" stroke="currentColor" strokeWidth="2" />
+      <path d="M4.5 10.5L10.5 4.5" stroke="currentColor" strokeWidth="2" />
+      <path d="M19.5 13.5L13.5 19.5" stroke="currentColor" strokeWidth="2" />
+      <path d="M19.5 10.5L13.5 4.5" stroke="currentColor" strokeWidth="2" />
+      <path d="M12 5C13.1046 5 14 4.10457 14 3C14 1.89543 13.1046 1 12 1C10.8954 1 10 1.89543 10 3C10 4.10457 10.8954 5 12 5Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M12 23C13.1046 23 14 22.1046 14 21C14 19.8954 13.1046 19 12 19C10.8954 19 10 19.8954 10 21C10 22.1046 10.8954 23 12 23Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M19 12C19 13.1046 19.8954 14 21 14C22.1046 14 23 13.1046 23 12C23 10.8954 22.1046 10 21 10C19.8954 10 19 10.8954 19 12Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M1 12C1 13.1046 1.89543 14 3 14C4.10457 14 5 13.1046 5 12C5 10.8954 4.10457 10 3 10C1.89543 10 1 10.8954 1 12Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { NetworkNodesIcon }
diff --git a/packages/ui/src/components/icons/pulse.tsx b/packages/ui/src/components/icons/pulse.tsx
new file mode 100644
index 0000000..8ef2cc4
--- /dev/null
+++ b/packages/ui/src/components/icons/pulse.tsx
@@ -0,0 +1,11 @@
+import type { IconProps } from "./icon"
+
+function PulseIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M2 12H4L5.5 9L9.5 18L14.5 6L18.5 15L20 12H22" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { PulseIcon }
diff --git a/packages/ui/src/components/icons/radio-checked.tsx b/packages/ui/src/components/icons/radio-checked.tsx
new file mode 100644
index 0000000..63b3a77
--- /dev/null
+++ b/packages/ui/src/components/icons/radio-checked.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function RadioCheckedIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <circle cx="12" cy="12" r="4" fill="currentColor" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { RadioCheckedIcon }
diff --git a/packages/ui/src/components/icons/sidebar-left.tsx b/packages/ui/src/components/icons/sidebar-left.tsx
new file mode 100644
index 0000000..014deb8
--- /dev/null
+++ b/packages/ui/src/components/icons/sidebar-left.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function SidebarLeftIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <path d="M8 4L8 20" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+      <path d="M22 20L22 4L2 4L2 20L22 20Z" stroke="currentColor" strokeWidth="2" strokeMiterlimit="10" strokeLinecap="square" />
+    </svg>
+  )
+}
+export { SidebarLeftIcon }
diff --git a/packages/ui/src/components/icons/xmark.tsx b/packages/ui/src/components/icons/xmark.tsx
new file mode 100644
index 0000000..43f6eb6
--- /dev/null
+++ b/packages/ui/src/components/icons/xmark.tsx
@@ -0,0 +1,12 @@
+import type { IconProps } from "./icon"
+
+function XmarkIcon({ size = 24, className, ...props }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      width={size} height={size} className={className} fill="none" {...props}>
+      <line x1="19" y1="19" x2="5" y2="5" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+      <line x1="19" y1="5" x2="5" y2="19" stroke="currentColor" strokeLinecap="square" strokeMiterlimit="10" strokeWidth="2" />
+    </svg>
+  )
+}
+export { XmarkIcon }
diff --git a/apps/landing/src/components/traces/flamegraph-minimap.tsx b/packages/ui/src/components/traces/flamegraph-minimap.tsx
similarity index 100%
rename from apps/landing/src/components/traces/flamegraph-minimap.tsx
rename to packages/ui/src/components/traces/flamegraph-minimap.tsx
diff --git a/apps/landing/src/components/traces/flamegraph-tooltip.tsx b/packages/ui/src/components/traces/flamegraph-tooltip.tsx
similarity index 100%
rename from apps/landing/src/components/traces/flamegraph-tooltip.tsx
rename to packages/ui/src/components/traces/flamegraph-tooltip.tsx
diff --git a/apps/landing/src/components/traces/flamegraph.tsx b/packages/ui/src/components/traces/flamegraph.tsx
similarity index 100%
rename from apps/landing/src/components/traces/flamegraph.tsx
rename to packages/ui/src/components/traces/flamegraph.tsx
diff --git a/apps/landing/src/components/traces/flow-node.tsx b/packages/ui/src/components/traces/flow-node.tsx
similarity index 100%
rename from apps/landing/src/components/traces/flow-node.tsx
rename to packages/ui/src/components/traces/flow-node.tsx
diff --git a/apps/landing/src/components/traces/flow-utils.ts b/packages/ui/src/components/traces/flow-utils.ts
similarity index 100%
rename from apps/landing/src/components/traces/flow-utils.ts
rename to packages/ui/src/components/traces/flow-utils.ts
diff --git a/apps/landing/src/components/traces/flow-view.tsx b/packages/ui/src/components/traces/flow-view.tsx
similarity index 100%
rename from apps/landing/src/components/traces/flow-view.tsx
rename to packages/ui/src/components/traces/flow-view.tsx
diff --git a/apps/web/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
similarity index 96%
rename from apps/web/src/components/ui/accordion.tsx
rename to packages/ui/src/components/ui/accordion.tsx
index ec21e0c..ec45c0d 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -1,7 +1,7 @@
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "../icons"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
similarity index 98%
rename from apps/web/src/components/ui/alert-dialog.tsx
rename to packages/ui/src/components/ui/alert-dialog.tsx
index 35028c5..d35cab8 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
diff --git a/apps/web/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
similarity index 98%
rename from apps/web/src/components/ui/alert.tsx
rename to packages/ui/src/components/ui/alert.tsx
index 08916e5..f0fd300 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const alertVariants = cva("grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
   variants: {
diff --git a/apps/web/src/components/ui/aspect-ratio.tsx b/packages/ui/src/components/ui/aspect-ratio.tsx
similarity index 90%
rename from apps/web/src/components/ui/aspect-ratio.tsx
rename to packages/ui/src/components/ui/aspect-ratio.tsx
index 4c0ebaa..400573e 100644
--- a/apps/web/src/components/ui/aspect-ratio.tsx
+++ b/packages/ui/src/components/ui/aspect-ratio.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function AspectRatio({
   ratio,
diff --git a/apps/web/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
similarity index 98%
rename from apps/web/src/components/ui/avatar.tsx
rename to packages/ui/src/components/ui/avatar.tsx
index 6c744e2..b1b78ba 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Avatar({
   className,
diff --git a/apps/web/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
similarity index 98%
rename from apps/web/src/components/ui/badge.tsx
rename to packages/ui/src/components/ui/badge.tsx
index 6d23feb..b1a243b 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/packages/ui/src/components/ui/badge.tsx
@@ -2,7 +2,7 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const badgeVariants = cva(
   "h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
diff --git a/apps/web/src/components/ui/breadcrumb.tsx b/packages/ui/src/components/ui/breadcrumb.tsx
similarity index 96%
rename from apps/web/src/components/ui/breadcrumb.tsx
rename to packages/ui/src/components/ui/breadcrumb.tsx
index 935f09c..ee8e24d 100644
--- a/apps/web/src/components/ui/breadcrumb.tsx
+++ b/packages/ui/src/components/ui/breadcrumb.tsx
@@ -2,8 +2,8 @@ import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, DotsIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronRightIcon, DotsIcon } from "../icons"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
diff --git a/apps/web/src/components/ui/button-group.tsx b/packages/ui/src/components/ui/button-group.tsx
similarity index 96%
rename from apps/web/src/components/ui/button-group.tsx
rename to packages/ui/src/components/ui/button-group.tsx
index 587c0af..70b74a4 100644
--- a/apps/web/src/components/ui/button-group.tsx
+++ b/packages/ui/src/components/ui/button-group.tsx
@@ -2,8 +2,8 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "../../lib/utils"
+import { Separator } from "./separator"
 
 const buttonGroupVariants = cva(
   "rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
diff --git a/apps/web/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
similarity index 98%
rename from apps/web/src/components/ui/button.tsx
rename to packages/ui/src/components/ui/button.tsx
index c9ed23b..1c3d928 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
   "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
diff --git a/apps/web/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
similarity index 97%
rename from apps/web/src/components/ui/calendar.tsx
rename to packages/ui/src/components/ui/calendar.tsx
index 51fcb56..f055d26 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -8,9 +8,9 @@ import {
   type Locale,
 } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-import { ArrowLeftIcon, ArrowRightIcon, ArrowDownIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { Button, buttonVariants } from "./button"
+import { ArrowLeftIcon, ArrowRightIcon, ArrowDownIcon } from "../icons"
 
 function Calendar({
   className,
diff --git a/apps/web/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
similarity index 98%
rename from apps/web/src/components/ui/card.tsx
rename to packages/ui/src/components/ui/card.tsx
index d63cd65..4d4f51c 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Card({
   className,
diff --git a/apps/web/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
similarity index 97%
rename from apps/web/src/components/ui/carousel.tsx
rename to packages/ui/src/components/ui/carousel.tsx
index 2838e48..1028379 100644
--- a/apps/web/src/components/ui/carousel.tsx
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -3,9 +3,9 @@ import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
diff --git a/apps/web/src/components/ui/chart.tsx b/packages/ui/src/components/ui/chart.tsx
similarity index 99%
rename from apps/web/src/components/ui/chart.tsx
rename to packages/ui/src/components/ui/chart.tsx
index 19d8ada..3ceb097 100644
--- a/apps/web/src/components/ui/chart.tsx
+++ b/packages/ui/src/components/ui/chart.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
diff --git a/apps/web/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
similarity index 94%
rename from apps/web/src/components/ui/checkbox.tsx
rename to packages/ui/src/components/ui/checkbox.tsx
index a3b183c..22226f3 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -2,8 +2,8 @@
 
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
-import { cn } from "@/lib/utils"
-import { CheckIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { CheckIcon } from "../icons"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
diff --git a/apps/web/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx
similarity index 100%
rename from apps/web/src/components/ui/collapsible.tsx
rename to packages/ui/src/components/ui/collapsible.tsx
diff --git a/apps/web/src/components/ui/combobox.tsx b/packages/ui/src/components/ui/combobox.tsx
similarity index 97%
rename from apps/web/src/components/ui/combobox.tsx
rename to packages/ui/src/components/ui/combobox.tsx
index 96f7463..e2dc1b6 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/packages/ui/src/components/ui/combobox.tsx
@@ -3,15 +3,15 @@
 import * as React from "react"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/components/ui/input-group"
-import { ChevronDownIcon, XmarkIcon, CheckIcon } from "@/components/icons"
+} from "./input-group"
+import { ChevronDownIcon, XmarkIcon, CheckIcon } from "../icons"
 
 const Combobox = ComboboxPrimitive.Root
 
diff --git a/apps/web/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
similarity index 96%
rename from apps/web/src/components/ui/command.tsx
rename to packages/ui/src/components/ui/command.tsx
index 278bc46..b9a786e 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/packages/ui/src/components/ui/command.tsx
@@ -1,19 +1,19 @@
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "./dialog"
 import {
   InputGroup,
   InputGroupAddon,
-} from "@/components/ui/input-group"
-import { MagnifierIcon, CheckIcon } from "@/components/icons"
+} from "./input-group"
+import { MagnifierIcon, CheckIcon } from "../icons"
 
 function Command({
   className,
diff --git a/apps/web/src/components/ui/context-menu.tsx b/packages/ui/src/components/ui/context-menu.tsx
similarity index 98%
rename from apps/web/src/components/ui/context-menu.tsx
rename to packages/ui/src/components/ui/context-menu.tsx
index 7891b30..ca25322 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/packages/ui/src/components/ui/context-menu.tsx
@@ -3,8 +3,8 @@
 import * as React from "react"
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
 
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, CheckIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronRightIcon, CheckIcon } from "../icons"
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
diff --git a/apps/web/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
similarity index 96%
rename from apps/web/src/components/ui/dialog.tsx
rename to packages/ui/src/components/ui/dialog.tsx
index 94c559e..dba9fba 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -3,9 +3,9 @@
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XmarkIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { XmarkIcon } from "../icons"
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
diff --git a/apps/web/src/components/ui/direction.tsx b/packages/ui/src/components/ui/direction.tsx
similarity index 100%
rename from apps/web/src/components/ui/direction.tsx
rename to packages/ui/src/components/ui/direction.tsx
diff --git a/apps/web/src/components/ui/drawer.tsx b/packages/ui/src/components/ui/drawer.tsx
similarity index 99%
rename from apps/web/src/components/ui/drawer.tsx
rename to packages/ui/src/components/ui/drawer.tsx
index 34e2b77..ea96b19 100644
--- a/apps/web/src/components/ui/drawer.tsx
+++ b/packages/ui/src/components/ui/drawer.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Drawer({
   ...props
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
similarity index 98%
rename from apps/web/src/components/ui/dropdown-menu.tsx
rename to packages/ui/src/components/ui/dropdown-menu.tsx
index 22e8adb..fa90972 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, CheckIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronRightIcon, CheckIcon } from "../icons"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
diff --git a/apps/web/src/components/ui/empty.tsx b/packages/ui/src/components/ui/empty.tsx
similarity index 98%
rename from apps/web/src/components/ui/empty.tsx
rename to packages/ui/src/components/ui/empty.tsx
index 56b9661..be0f5b4 100644
--- a/apps/web/src/components/ui/empty.tsx
+++ b/packages/ui/src/components/ui/empty.tsx
@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/web/src/components/ui/field.tsx b/packages/ui/src/components/ui/field.tsx
similarity index 97%
rename from apps/web/src/components/ui/field.tsx
rename to packages/ui/src/components/ui/field.tsx
index b81cab9..a6a656c 100644
--- a/apps/web/src/components/ui/field.tsx
+++ b/packages/ui/src/components/ui/field.tsx
@@ -3,9 +3,9 @@
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+import { Separator } from "./separator"
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
diff --git a/apps/web/src/components/ui/gradient-chart.tsx b/packages/ui/src/components/ui/gradient-chart.tsx
similarity index 97%
rename from apps/web/src/components/ui/gradient-chart.tsx
rename to packages/ui/src/components/ui/gradient-chart.tsx
index 41a846b..d159cff 100644
--- a/apps/web/src/components/ui/gradient-chart.tsx
+++ b/packages/ui/src/components/ui/gradient-chart.tsx
@@ -6,7 +6,7 @@ import { Area, AreaChart } from "recharts";
 import {
   type ChartConfig,
   ChartContainer,
-} from "@/components/ui/chart";
+} from "./chart";
 
 interface SparklineProps {
   data: { value: number }[];
diff --git a/apps/web/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx
similarity index 98%
rename from apps/web/src/components/ui/hover-card.tsx
rename to packages/ui/src/components/ui/hover-card.tsx
index 5ffbb34..59eeb2a 100644
--- a/apps/web/src/components/ui/hover-card.tsx
+++ b/packages/ui/src/components/ui/hover-card.tsx
@@ -2,7 +2,7 @@
 
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
   return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
diff --git a/apps/web/src/components/ui/input-group.tsx b/packages/ui/src/components/ui/input-group.tsx
similarity index 96%
rename from apps/web/src/components/ui/input-group.tsx
rename to packages/ui/src/components/ui/input-group.tsx
index c49e22b..5947a8d 100644
--- a/apps/web/src/components/ui/input-group.tsx
+++ b/packages/ui/src/components/ui/input-group.tsx
@@ -1,10 +1,10 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/web/src/components/ui/input-otp.tsx b/packages/ui/src/components/ui/input-otp.tsx
similarity index 96%
rename from apps/web/src/components/ui/input-otp.tsx
rename to packages/ui/src/components/ui/input-otp.tsx
index 84c1338..6321216 100644
--- a/apps/web/src/components/ui/input-otp.tsx
+++ b/packages/ui/src/components/ui/input-otp.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 
-import { cn } from "@/lib/utils"
-import { MinusIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { MinusIcon } from "../icons"
 
 function InputOTP({
   className,
diff --git a/apps/web/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
similarity index 96%
rename from apps/web/src/components/ui/input.tsx
rename to packages/ui/src/components/ui/input.tsx
index 52219c4..617c22c 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Input as InputPrimitive } from "@base-ui/react/input"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
diff --git a/apps/web/src/components/ui/item.tsx b/packages/ui/src/components/ui/item.tsx
similarity index 98%
rename from apps/web/src/components/ui/item.tsx
rename to packages/ui/src/components/ui/item.tsx
index f923049..5ec4920 100644
--- a/apps/web/src/components/ui/item.tsx
+++ b/packages/ui/src/components/ui/item.tsx
@@ -3,8 +3,8 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "../../lib/utils"
+import { Separator } from "./separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/web/src/components/ui/kbd.tsx b/packages/ui/src/components/ui/kbd.tsx
similarity index 95%
rename from apps/web/src/components/ui/kbd.tsx
rename to packages/ui/src/components/ui/kbd.tsx
index 30efbc9..a909a35 100644
--- a/apps/web/src/components/ui/kbd.tsx
+++ b/packages/ui/src/components/ui/kbd.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
diff --git a/apps/web/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
similarity index 92%
rename from apps/web/src/components/ui/label.tsx
rename to packages/ui/src/components/ui/label.tsx
index 138bee1..0c0a993 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/packages/ui/src/components/ui/label.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
diff --git a/apps/web/src/components/ui/menubar.tsx b/packages/ui/src/components/ui/menubar.tsx
similarity index 98%
rename from apps/web/src/components/ui/menubar.tsx
rename to packages/ui/src/components/ui/menubar.tsx
index ac4b177..9cce45e 100644
--- a/apps/web/src/components/ui/menubar.tsx
+++ b/packages/ui/src/components/ui/menubar.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,8 +17,8 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { CheckIcon } from "@/components/icons"
+} from "./dropdown-menu"
+import { CheckIcon } from "../icons"
 
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
diff --git a/apps/web/src/components/ui/native-select.tsx b/packages/ui/src/components/ui/native-select.tsx
similarity index 95%
rename from apps/web/src/components/ui/native-select.tsx
rename to packages/ui/src/components/ui/native-select.tsx
index 2168b4d..df0ce0f 100644
--- a/apps/web/src/components/ui/native-select.tsx
+++ b/packages/ui/src/components/ui/native-select.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
-import { ChevronExpandYIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronExpandYIcon } from "../icons"
 
 type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
   size?: "sm" | "default"
diff --git a/apps/web/src/components/ui/navigation-menu.tsx b/packages/ui/src/components/ui/navigation-menu.tsx
similarity index 98%
rename from apps/web/src/components/ui/navigation-menu.tsx
rename to packages/ui/src/components/ui/navigation-menu.tsx
index 88b4b84..9be1a2c 100644
--- a/apps/web/src/components/ui/navigation-menu.tsx
+++ b/packages/ui/src/components/ui/navigation-menu.tsx
@@ -1,8 +1,8 @@
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
 import { cva } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronDownIcon } from "../icons"
 
 function NavigationMenu({
   align = "start",
diff --git a/apps/web/src/components/ui/pagination.tsx b/packages/ui/src/components/ui/pagination.tsx
similarity index 94%
rename from apps/web/src/components/ui/pagination.tsx
rename to packages/ui/src/components/ui/pagination.tsx
index 0a83690..b25a0a6 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/packages/ui/src/components/ui/pagination.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon, DotsIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { ChevronLeftIcon, ChevronRightIcon, DotsIcon } from "../icons"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
diff --git a/apps/web/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
similarity index 98%
rename from apps/web/src/components/ui/popover.tsx
rename to packages/ui/src/components/ui/popover.tsx
index ee2f867..ada37f0 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
diff --git a/apps/web/src/components/ui/progress.tsx b/packages/ui/src/components/ui/progress.tsx
similarity index 97%
rename from apps/web/src/components/ui/progress.tsx
rename to packages/ui/src/components/ui/progress.tsx
index f37167e..020933e 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/packages/ui/src/components/ui/progress.tsx
@@ -2,7 +2,7 @@
 
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Progress({
   className,
diff --git a/apps/web/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx
similarity index 94%
rename from apps/web/src/components/ui/radio-group.tsx
rename to packages/ui/src/components/ui/radio-group.tsx
index 9d47f74..7843146 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/packages/ui/src/components/ui/radio-group.tsx
@@ -1,8 +1,8 @@
 import { Radio as RadioPrimitive } from "@base-ui/react/radio"
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
 
-import { cn } from "@/lib/utils"
-import { RadioCheckedIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { RadioCheckedIcon } from "../icons"
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
diff --git a/apps/web/src/components/ui/resizable.tsx b/packages/ui/src/components/ui/resizable.tsx
similarity index 97%
rename from apps/web/src/components/ui/resizable.tsx
rename to packages/ui/src/components/ui/resizable.tsx
index cb8dabb..9f255f1 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/packages/ui/src/components/ui/resizable.tsx
@@ -2,7 +2,7 @@
 
 import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function ResizablePanelGroup({
   className,
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
similarity index 97%
rename from apps/web/src/components/ui/scroll-area.tsx
rename to packages/ui/src/components/ui/scroll-area.tsx
index 8a90afb..56d25da 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -1,6 +1,6 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function ScrollArea({
   className,
diff --git a/apps/web/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
similarity index 98%
rename from apps/web/src/components/ui/select.tsx
rename to packages/ui/src/components/ui/select.tsx
index 3d13e83..ce54d7e 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -3,8 +3,8 @@
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
-import { cn } from "@/lib/utils"
-import { ChevronExpandYIcon, CheckIcon, ChevronUpIcon, ChevronDownIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { ChevronExpandYIcon, CheckIcon, ChevronUpIcon, ChevronDownIcon } from "../icons"
 
 const Select = SelectPrimitive.Root
 
diff --git a/apps/web/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
similarity index 93%
rename from apps/web/src/components/ui/separator.tsx
rename to packages/ui/src/components/ui/separator.tsx
index 3703d32..b44d459 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -1,6 +1,6 @@
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Separator({
   className,
diff --git a/apps/web/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
similarity index 97%
rename from apps/web/src/components/ui/sheet.tsx
rename to packages/ui/src/components/ui/sheet.tsx
index c84658e..fc3a86a 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -1,9 +1,9 @@
 import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XmarkIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { XmarkIcon } from "../icons"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
diff --git a/apps/web/src/components/ui/sidebar.tsx b/packages/ui/src/components/ui/sidebar.tsx
similarity index 98%
rename from apps/web/src/components/ui/sidebar.tsx
rename to packages/ui/src/components/ui/sidebar.tsx
index 3a38dea..6ce2007 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/packages/ui/src/components/ui/sidebar.tsx
@@ -3,25 +3,25 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Separator } from "./separator"
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "./sheet"
+import { Skeleton } from "./skeleton"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { useIsMobile } from "@/hooks/use-mobile"
-import { SidebarLeftIcon } from "@/components/icons"
+} from "./tooltip"
+import { useIsMobile } from "../../hooks/use-mobile"
+import { SidebarLeftIcon } from "../icons"
 
 const SIDEBAR_STORAGE_KEY = "maple-sidebar-expanded"
 const SIDEBAR_WIDTH = "16rem"
diff --git a/apps/web/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
similarity index 86%
rename from apps/web/src/components/ui/skeleton.tsx
rename to packages/ui/src/components/ui/skeleton.tsx
index f768775..38a8037 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/apps/web/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
similarity index 98%
rename from apps/web/src/components/ui/slider.tsx
rename to packages/ui/src/components/ui/slider.tsx
index 55b56be..a1ab3db 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/packages/ui/src/components/ui/slider.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Slider as SliderPrimitive } from "@base-ui/react/slider"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Slider({
   className,
diff --git a/apps/web/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
similarity index 96%
rename from apps/web/src/components/ui/sonner.tsx
rename to packages/ui/src/components/ui/sonner.tsx
index 0302475..a056f82 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, CircleInfoIcon, AlertWarningIcon, CircleXmarkIcon, LoaderIcon } from "@/components/icons"
+import { CircleCheckIcon, CircleInfoIcon, AlertWarningIcon, CircleXmarkIcon, LoaderIcon } from "../icons"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
diff --git a/apps/web/src/components/ui/spinner.tsx b/packages/ui/src/components/ui/spinner.tsx
similarity index 80%
rename from apps/web/src/components/ui/spinner.tsx
rename to packages/ui/src/components/ui/spinner.tsx
index 990173c..ab5bbc0 100644
--- a/apps/web/src/components/ui/spinner.tsx
+++ b/packages/ui/src/components/ui/spinner.tsx
@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils"
-import { LoaderIcon } from "@/components/icons"
+import { cn } from "../../lib/utils"
+import { LoaderIcon } from "../icons"
 
 function Spinner({
   className,
diff --git a/apps/web/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
similarity index 97%
rename from apps/web/src/components/ui/switch.tsx
rename to packages/ui/src/components/ui/switch.tsx
index cfa13af..d474a0f 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -2,7 +2,7 @@
 
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Switch({
   className,
diff --git a/apps/web/src/components/ui/table.tsx b/packages/ui/src/components/ui/table.tsx
similarity index 98%
rename from apps/web/src/components/ui/table.tsx
rename to packages/ui/src/components/ui/table.tsx
index 4886601..6e6de38 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/packages/ui/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
diff --git a/apps/web/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
similarity index 98%
rename from apps/web/src/components/ui/tabs.tsx
rename to packages/ui/src/components/ui/tabs.tsx
index 3200099..429730e 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/packages/ui/src/components/ui/tabs.tsx
@@ -3,7 +3,7 @@
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Tabs({
   className,
diff --git a/apps/web/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
similarity index 96%
rename from apps/web/src/components/ui/textarea.tsx
rename to packages/ui/src/components/ui/textarea.tsx
index 1692ac9..51d157a 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
   ({ className, ...props }, ref) => {
diff --git a/apps/web/src/components/ui/toggle-group.tsx b/packages/ui/src/components/ui/toggle-group.tsx
similarity index 97%
rename from apps/web/src/components/ui/toggle-group.tsx
rename to packages/ui/src/components/ui/toggle-group.tsx
index 4fb45ba..51b5a7a 100644
--- a/apps/web/src/components/ui/toggle-group.tsx
+++ b/packages/ui/src/components/ui/toggle-group.tsx
@@ -5,8 +5,8 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
 import { type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "../../lib/utils"
+import { toggleVariants } from "./toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
diff --git a/apps/web/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
similarity index 97%
rename from apps/web/src/components/ui/toggle.tsx
rename to packages/ui/src/components/ui/toggle.tsx
index 6ef1f5d..6986473 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -1,7 +1,7 @@
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const toggleVariants = cva(
   "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
diff --git a/apps/web/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
similarity index 98%
rename from apps/web/src/components/ui/tooltip.tsx
rename to packages/ui/src/components/ui/tooltip.tsx
index 6c608e2..11cd2d7 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -2,7 +2,7 @@
 
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function TooltipProvider({
   delay = 0,
diff --git a/packages/ui/src/env.d.ts b/packages/ui/src/env.d.ts
new file mode 100644
index 0000000..2eeb318
--- /dev/null
+++ b/packages/ui/src/env.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: string
+  export default content
+}
diff --git a/packages/ui/src/hooks/use-mobile.tsx b/packages/ui/src/hooks/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/packages/ui/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/web/src/lib/colors.ts b/packages/ui/src/lib/colors.ts
similarity index 100%
rename from apps/web/src/lib/colors.ts
rename to packages/ui/src/lib/colors.ts
diff --git a/packages/ui/src/lib/format.ts b/packages/ui/src/lib/format.ts
new file mode 100644
index 0000000..9e9b8fc
--- /dev/null
+++ b/packages/ui/src/lib/format.ts
@@ -0,0 +1,165 @@
+/**
+ * Format a duration in milliseconds to a human-readable string.
+ * - < 1ms: displays in microseconds (μs)
+ * - 1ms - 1000ms: displays in milliseconds (ms)
+ * - >= 1000ms: displays in seconds (s)
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1) {
+    return `${(ms * 1000).toFixed(0)}μs`
+  }
+  if (ms < 1000) {
+    return `${ms.toFixed(1)}ms`
+  }
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+/**
+ * Format a number with compact notation.
+ * - >= 1M: displays as e.g. "1.2M"
+ * - >= 1K: displays as e.g. "3.4K"
+ * - < 1K: displays with locale formatting
+ */
+export function formatNumber(num: number): string {
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}K`
+  }
+  return num.toLocaleString()
+}
+
+/**
+ * Format a latency value in milliseconds to a human-readable string.
+ */
+export function formatLatency(ms: number): string {
+  if (ms == null || Number.isNaN(ms)) {
+    return "-"
+  }
+  if (ms < 1) {
+    return `${(ms * 1000).toFixed(0)}μs`
+  }
+  if (ms < 1000) {
+    return `${ms.toFixed(1)}ms`
+  }
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+/**
+ * Format an error rate percentage.
+ */
+export function formatErrorRate(rate: number): string {
+  if (rate < 0.01) {
+    return "0%"
+  }
+  if (rate < 1) {
+    return `${rate.toFixed(2)}%`
+  }
+  return `${rate.toFixed(1)}%`
+}
+
+/**
+ * Infer the bucket interval in seconds from consecutive data points.
+ * Expects data with a `bucket` string timestamp field.
+ */
+export function inferBucketSeconds(data: Array<{ bucket: string }>): number | undefined {
+  if (data.length < 2) return undefined
+  const t0 = new Date(data[0].bucket).getTime()
+  const t1 = new Date(data[1].bucket).getTime()
+  const diffMs = t1 - t0
+  if (diffMs <= 0 || Number.isNaN(diffMs)) return undefined
+  return diffMs / 1000
+}
+
+/**
+ * Parse a bucket value to a millisecond timestamp.
+ */
+export function parseBucketMs(value: unknown): number | null {
+  if (typeof value !== "string") return null
+  const parsed = new Date(value).getTime()
+  return Number.isNaN(parsed) ? null : parsed
+}
+
+/**
+ * Infer the total time range in milliseconds from an array of data points with a `bucket` key.
+ */
+export function inferRangeMs(data: Array<Record<string, unknown>>): number {
+  const bucketTimes = data
+    .map((row) => parseBucketMs(row.bucket))
+    .filter((value): value is number => value != null)
+
+  if (bucketTimes.length < 2) return 0
+  return Math.max(...bucketTimes) - Math.min(...bucketTimes)
+}
+
+/**
+ * Format a bucket timestamp label that adapts based on the overall time range:
+ * - >= 24h with daily buckets: "Feb 14"
+ * - >= 24h with sub-day buckets: "Feb 14, 02:00 PM"
+ * - 30min - 24h: "02:00 PM"
+ * - <= 30min: "02:00:30 PM"
+ */
+export function formatBucketLabel(
+  value: unknown,
+  context: { rangeMs: number; bucketSeconds: number | undefined },
+  mode: "tick" | "tooltip",
+): string {
+  if (typeof value !== "string") return ""
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+
+  const includeDate = context.rangeMs >= 24 * 60 * 60 * 1000 || (context.bucketSeconds ?? 0) >= 24 * 60 * 60
+  const includeSeconds = context.rangeMs <= 30 * 60 * 1000 && !includeDate
+
+  if (mode === "tooltip") {
+    return date.toLocaleString(undefined, {
+      year: includeDate ? "numeric" : undefined,
+      month: includeDate ? "short" : undefined,
+      day: includeDate ? "numeric" : undefined,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: includeSeconds ? "2-digit" : undefined,
+    })
+  }
+
+  if (includeDate) {
+    if ((context.bucketSeconds ?? 0) >= 24 * 60 * 60) {
+      return date.toLocaleDateString(undefined, { month: "short", day: "numeric" })
+    }
+    return date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })
+  }
+
+  return date
+    .toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: includeSeconds ? "2-digit" : undefined,
+    })
+    .replace(/^24:/, "00:")
+}
+
+const bucketLabelMap: Record<number, string> = {
+  60: "/min",
+  300: "/5min",
+  900: "/15min",
+  3600: "/h",
+  14400: "/4h",
+  86400: "/d",
+}
+
+/**
+ * Map bucket interval seconds to a human-readable rate suffix.
+ */
+export function bucketIntervalLabel(seconds: number | undefined): string {
+  if (seconds == null) return ""
+  return bucketLabelMap[seconds] ?? ""
+}
+
+/**
+ * Format a throughput value with a rate suffix for chart axes.
+ */
+export function formatThroughput(value: number, suffix: string): string {
+  return `${formatNumber(value)}${suffix}`
+}
diff --git a/apps/landing/src/lib/types.ts b/packages/ui/src/lib/types.ts
similarity index 100%
rename from apps/landing/src/lib/types.ts
rename to packages/ui/src/lib/types.ts
diff --git a/apps/landing/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
similarity index 100%
rename from apps/landing/src/lib/utils.ts
rename to packages/ui/src/lib/utils.ts
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..7e4b9b5
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  }
+}

From a6b29f6eeb7a0ec718b0de9a096f539d9e0d4901 Mon Sep 17 00:00:00 2001
From: Makisuo <minetoaster12@gmail.com>
Date: Fri, 20 Feb 2026 01:37:21 +0100
Subject: [PATCH 2/5] stuff

---
 .../landing/src/components/ServiceMapMock.tsx | 437 ++++++++++++++++++
 .../src/components/UseCaseShowcase.astro      |  44 +-
 .../src/pages/features/service-catalog.astro  |  40 +-
 .../use-cases/microservices-debugging.astro   |  49 +-
 apps/web/src/api/tinybird/traces.test.ts      |  95 ++++
 apps/web/src/api/tinybird/traces.ts           |  12 +
 .../query-builder/where-clause-editor.tsx     |   6 +-
 .../traces/traces-filter-sidebar.tsx          | 150 +++++-
 .../src/components/traces/traces-table.tsx    |   2 +
 .../where-clause-autocomplete.test.ts         |  47 ++
 .../where-clause-autocomplete.ts              | 120 ++++-
 .../lib/traces/advanced-filter-sync.test.ts   | 111 +++++
 .../src/lib/traces/advanced-filter-sync.ts    | 375 +++++++++++++++
 apps/web/src/routes/traces/index.tsx          |  28 +-
 packages/domain/src/tinybird/endpoints.ts     |  59 +++
 15 files changed, 1422 insertions(+), 153 deletions(-)
 create mode 100644 apps/landing/src/components/ServiceMapMock.tsx
 create mode 100644 apps/web/src/api/tinybird/traces.test.ts
 create mode 100644 apps/web/src/lib/traces/advanced-filter-sync.test.ts
 create mode 100644 apps/web/src/lib/traces/advanced-filter-sync.ts

diff --git a/apps/landing/src/components/ServiceMapMock.tsx b/apps/landing/src/components/ServiceMapMock.tsx
new file mode 100644
index 0000000..95999dc
--- /dev/null
+++ b/apps/landing/src/components/ServiceMapMock.tsx
@@ -0,0 +1,437 @@
+import { memo, useId } from "react"
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Handle,
+  Position,
+  getSmoothStepPath,
+  type EdgeProps,
+  type NodeProps,
+  type Node,
+  type Edge,
+} from "@xyflow/react"
+import "@xyflow/react/dist/style.css"
+import { cn } from "@maple/ui/utils"
+import { getServiceLegendColor } from "@maple/ui/colors"
+
+// --- TYPES ---
+
+interface MockNodeData extends Record<string, unknown> {
+  label: string
+  throughput: number
+  errorRate: number
+  avgLatencyMs: number
+  services: string[]
+}
+
+interface MockEdgeData extends Record<string, unknown> {
+  callCount: number
+  callsPerSecond: number
+  errorRate: number
+  services: string[]
+}
+
+// --- UTILS ---
+
+function formatRate(value: number): string {
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`
+  if (value >= 1) return value.toFixed(1)
+  return value.toFixed(2)
+}
+
+function formatLatency(ms: number): string {
+  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`
+  return `${ms.toFixed(0)}ms`
+}
+
+function getHealthClass(errorRate: number): string {
+  if (errorRate > 5) return "ring-red-500/60"
+  if (errorRate > 1) return "ring-amber-500/60"
+  return "ring-emerald-500/40"
+}
+
+function getHealthDotClass(errorRate: number): string {
+  if (errorRate > 5) return "bg-red-500"
+  if (errorRate > 1) return "bg-amber-500"
+  return "bg-emerald-500"
+}
+
+// --- CUSTOM NODE ---
+
+const MockNode = memo(function MockNode({ data }: NodeProps<Node>) {
+  const mockData = data as unknown as MockNodeData
+  const { label, throughput, errorRate, avgLatencyMs, services } = mockData
+  const color = getServiceLegendColor(label, services)
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!opacity-0 !w-0 !h-0 !min-w-0 !min-h-0"
+        isConnectable={false}
+      />
+      <div
+        className={cn(
+          "w-[140px] rounded-lg shadow-sm ring-2 transition-shadow hover:shadow-md bg-card",
+          getHealthClass(errorRate),
+        )}
+      >
+        <div
+          className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-t-lg text-[10px] font-semibold truncate"
+          style={{ backgroundColor: color, color: "oklch(0.98 0 0)" }}
+        >
+          <div className={cn("h-1.5 w-1.5 rounded-full shrink-0", getHealthDotClass(errorRate))} />
+          <span className="truncate">{label}</span>
+        </div>
+        <div className="grid grid-cols-2 divide-x divide-border px-1 py-1.5 text-center text-[9px]">
+          <div>
+            <div className="font-medium text-muted-foreground">req/s</div>
+            <div className="font-mono font-semibold text-foreground tabular-nums">
+              {formatRate(throughput)}
+            </div>
+          </div>
+          <div>
+            <div className="font-medium text-muted-foreground">P95</div>
+            <div
+              className={cn(
+                "font-mono font-semibold tabular-nums",
+                errorRate > 5
+                  ? "text-red-600 dark:text-red-400"
+                  : errorRate > 1
+                    ? "text-amber-600 dark:text-amber-400"
+                    : "text-foreground",
+              )}
+            >
+              {formatLatency(avgLatencyMs)}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!opacity-0 !w-0 !h-0 !min-w-0 !min-h-0"
+        isConnectable={false}
+      />
+    </>
+  )
+})
+
+// --- CUSTOM EDGE ---
+
+function getStrokeWidth(callCount: number): number {
+  if (callCount <= 0) return 2
+  return Math.min(6, Math.max(2, 2 + Math.log10(callCount) * 1.5))
+}
+
+function getEdgeIntensity(callsPerSecond: number): number {
+  if (callsPerSecond <= 0) return 0.15
+  return Math.min(1, 0.3 + 0.7 * (Math.log10(1 + callsPerSecond) / Math.log10(100)))
+}
+
+function simpleHash(str: string): number {
+  let h = 0
+  for (let i = 0; i < str.length; i++) {
+    h = (h * 31 + str.charCodeAt(i)) | 0
+  }
+  return (Math.abs(h) % 1000) / 1000
+}
+
+const TRAVERSE_TIME = 2
+const MAX_DUR = 20
+const MAX_PARTICLES = 5
+
+const MockEdge = memo(function MockEdge({
+  id,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}: EdgeProps<Edge>) {
+  const uniqueId = useId()
+  const edgeData = data as unknown as MockEdgeData
+
+  const callCount = edgeData?.callCount ?? 0
+  const callsPerSecond = edgeData?.callsPerSecond ?? 0
+  const services = edgeData?.services ?? []
+
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 12,
+  })
+
+  const sourceColor = getServiceLegendColor(source, services)
+  const targetColor = getServiceLegendColor(target, services)
+  const sw = getStrokeWidth(callCount)
+  const i = getEdgeIntensity(callsPerSecond)
+
+  const rate = Math.max(callsPerSecond, 0)
+  let particleCount: number
+  let traversalDuration: number
+
+  if (rate <= 0) {
+    particleCount = 0
+    traversalDuration = TRAVERSE_TIME
+  } else {
+    const interArrival = 1 / rate
+    if (interArrival > TRAVERSE_TIME) {
+      particleCount = 1
+      traversalDuration = Math.min(interArrival, MAX_DUR)
+    } else {
+      traversalDuration = TRAVERSE_TIME
+      particleCount = Math.min(MAX_PARTICLES, Math.max(1, Math.round(rate * TRAVERSE_TIME)))
+    }
+  }
+
+  const stagger = traversalDuration / particleCount
+  const edgeOffset = simpleHash(id) * Math.min(stagger, 1)
+  const particleRadius = Math.max(2, sw * 0.6)
+
+  const safeId = `${id}-${uniqueId}`.replace(/[^a-zA-Z0-9-_]/g, "_")
+  const pathId = `path-${safeId}`
+  const gradientId = `grad-${safeId}`
+  const ambientFilterId = `ambient-${safeId}`
+  const glassFilterId = `glass-${safeId}`
+  const bloomFilterId = `bloom-${safeId}`
+
+  return (
+    <>
+      <defs>
+        <linearGradient
+          id={gradientId}
+          gradientUnits="userSpaceOnUse"
+          x1={sourceX}
+          y1={sourceY}
+          x2={targetX}
+          y2={targetY}
+        >
+          <stop offset="0%" stopColor={sourceColor} />
+          <stop offset="100%" stopColor={targetColor} />
+        </linearGradient>
+
+        <filter id={ambientFilterId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
+        </filter>
+
+        <filter id={glassFilterId} x="-20%" y="-20%" width="140%" height="140%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="glass-blur" />
+          <feMerge>
+            <feMergeNode in="glass-blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+
+        <filter id={bloomFilterId} x="-200%" y="-200%" width="500%" height="500%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="bloom-wide" />
+          <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="bloom-tight" />
+          <feMerge>
+            <feMergeNode in="bloom-wide" />
+            <feMergeNode in="bloom-tight" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        d={edgePath}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={sw * 3 + 8}
+        strokeOpacity={0.04 + i * 0.08}
+        filter={`url(#${ambientFilterId})`}
+      />
+      <path
+        d={edgePath}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={sw + 3}
+        strokeOpacity={0.12 + i * 0.15}
+      />
+      <path
+        id={pathId}
+        d={edgePath}
+        fill="none"
+        stroke="oklch(0.141 0.005 285.823)"
+        strokeWidth={sw}
+        strokeOpacity={0.5 + i * 0.2}
+      />
+      <path
+        d={edgePath}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={sw * 0.4}
+        strokeOpacity={0.15 + i * 0.25}
+        filter={`url(#${glassFilterId})`}
+      />
+      <path
+        d={edgePath}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={sw * 0.25}
+        strokeOpacity={0.2 + i * 0.4}
+        strokeDasharray="4 20"
+        className="service-map-flowing-dash"
+        style={{
+          animation: `flow 2s linear infinite`,
+        }}
+      />
+
+      <style>{`
+        @keyframes flow {
+          from { stroke-dashoffset: 24; }
+          to { stroke-dashoffset: 0; }
+        }
+      `}</style>
+
+      {Array.from({ length: particleCount }).map((_, idx) => (
+        <g key={idx} filter={`url(#${bloomFilterId})`} visibility="hidden">
+          <set
+            attributeName="visibility"
+            to="visible"
+            begin={`${edgeOffset + idx * stagger}s`}
+            fill="freeze"
+          />
+          <ellipse rx={particleRadius * 2.5} ry={particleRadius * 0.8} fill={sourceColor} opacity={0.4}>
+            <animateMotion
+              dur={`${traversalDuration}s`}
+              repeatCount="indefinite"
+              begin={`${edgeOffset + idx * stagger}s`}
+              rotate="auto"
+            >
+              <mpath href={`#${pathId}`} />
+            </animateMotion>
+          </ellipse>
+          <circle r={particleRadius * 0.6} fill="white" opacity={0.9}>
+            <animateMotion
+              dur={`${traversalDuration}s`}
+              repeatCount="indefinite"
+              begin={`${edgeOffset + idx * stagger}s`}
+              rotate="auto"
+            >
+              <mpath href={`#${pathId}`} />
+            </animateMotion>
+          </circle>
+        </g>
+      ))}
+    </>
+  )
+})
+
+// --- DATA ---
+
+const ALL_SERVICES = ["api-gateway", "auth-svc", "order-svc", "payment-svc", "user-db"]
+
+const initialNodes = [
+  {
+    id: "api-gateway",
+    type: "serviceNode",
+    position: { x: 180, y: 20 },
+    data: { label: "api-gateway", throughput: 1200, errorRate: 0, avgLatencyMs: 480, services: ALL_SERVICES },
+  },
+  {
+    id: "auth-svc",
+    type: "serviceNode",
+    position: { x: 0, y: 140 },
+    data: { label: "auth-svc", throughput: 850, errorRate: 0, avgLatencyMs: 22, services: ALL_SERVICES },
+  },
+  {
+    id: "order-svc",
+    type: "serviceNode",
+    position: { x: 180, y: 140 },
+    data: { label: "order-svc", throughput: 420, errorRate: 2, avgLatencyMs: 85, services: ALL_SERVICES },
+  },
+  {
+    id: "payment-svc",
+    type: "serviceNode",
+    position: { x: 360, y: 140 },
+    data: { label: "payment-svc", throughput: 120, errorRate: 4, avgLatencyMs: 280, services: ALL_SERVICES },
+  },
+  {
+    id: "user-db",
+    type: "serviceNode",
+    position: { x: 180, y: 260 },
+    data: { label: "user-db", throughput: 1800, errorRate: 100, avgLatencyMs: 450, services: ALL_SERVICES },
+  },
+]
+
+const initialEdges = [
+  {
+    id: "api-auth",
+    source: "api-gateway",
+    target: "auth-svc",
+    type: "serviceEdge",
+    data: { callCount: 850, callsPerSecond: 14, errorRate: 0, services: ALL_SERVICES },
+  },
+  {
+    id: "api-order",
+    source: "api-gateway",
+    target: "order-svc",
+    type: "serviceEdge",
+    data: { callCount: 420, callsPerSecond: 7, errorRate: 2, services: ALL_SERVICES },
+  },
+  {
+    id: "api-payment",
+    source: "api-gateway",
+    target: "payment-svc",
+    type: "serviceEdge",
+    data: { callCount: 120, callsPerSecond: 2, errorRate: 4, services: ALL_SERVICES },
+  },
+  {
+    id: "auth-db",
+    source: "auth-svc",
+    target: "user-db",
+    type: "serviceEdge",
+    data: { callCount: 850, callsPerSecond: 14, errorRate: 100, services: ALL_SERVICES },
+  },
+  {
+    id: "order-db",
+    source: "order-svc",
+    target: "user-db",
+    type: "serviceEdge",
+    data: { callCount: 840, callsPerSecond: 14, errorRate: 100, services: ALL_SERVICES },
+  },
+  {
+    id: "payment-db",
+    source: "payment-svc",
+    target: "user-db",
+    type: "serviceEdge",
+    data: { callCount: 120, callsPerSecond: 2, errorRate: 100, services: ALL_SERVICES },
+  },
+]
+
+const nodeTypes = { serviceNode: MockNode }
+const edgeTypes = { serviceEdge: MockEdge }
+
+export function ServiceMapMock() {
+  return (
+    <div className="w-full h-full min-h-[300px] relative pointer-events-none">
+      <ReactFlow
+        nodes={initialNodes}
+        edges={initialEdges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        proOptions={{ hideAttribution: true }}
+        panOnDrag={false}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+      >
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1} color="currentColor" className="opacity-5" />
+      </ReactFlow>
+    </div>
+  )
+}
diff --git a/apps/landing/src/components/UseCaseShowcase.astro b/apps/landing/src/components/UseCaseShowcase.astro
index 2f691bd..4a02a80 100644
--- a/apps/landing/src/components/UseCaseShowcase.astro
+++ b/apps/landing/src/components/UseCaseShowcase.astro
@@ -1,5 +1,5 @@
 ---
-
+import { ServiceMapMock } from "./ServiceMapMock.tsx";
 ---
 
 <section class="py-24 md:py-32">
@@ -82,46 +82,8 @@
                     <span class="text-[9px] text-fg-muted ml-2">Service Map</span>
                 </div>
                 <!-- Static service map with boxes and edges -->
-                <div class="p-4 relative" style="min-height: 200px">
-                    <!-- Service nodes -->
-                    <div class="flex justify-center gap-6 mb-6">
-                        <div class="border border-border bg-bg px-3 py-2 text-center">
-                            <span class="text-[9px] text-fg font-medium block">api-gateway</span>
-                            <span class="text-[8px] text-fg-muted">P99: 120ms</span>
-                        </div>
-                    </div>
-                    <div class="flex justify-center gap-3 mb-2">
-                        <svg class="w-full h-6" viewBox="0 0 320 24">
-                            <line x1="80" y1="0" x2="40" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                            <line x1="160" y1="0" x2="160" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                            <line x1="240" y1="0" x2="280" y2="24" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                        </svg>
-                    </div>
-                    <div class="flex justify-center gap-3">
-                        <div class="border border-border bg-bg px-3 py-2 text-center">
-                            <span class="text-[9px] text-fg font-medium block">auth-svc</span>
-                            <span class="text-[8px] text-fg-muted">22ms</span>
-                        </div>
-                        <div class="border border-border bg-bg px-3 py-2 text-center">
-                            <span class="text-[9px] text-fg font-medium block">order-svc</span>
-                            <span class="text-[8px] text-fg-muted">85ms</span>
-                        </div>
-                        <div class="border-2 border-destructive bg-destructive/5 px-3 py-2 text-center">
-                            <span class="text-[9px] text-destructive font-medium block">user-db</span>
-                            <span class="text-[8px] text-destructive">450ms</span>
-                        </div>
-                    </div>
-                    <div class="flex justify-center mt-2">
-                        <svg class="h-6 w-32" viewBox="0 0 128 24">
-                            <line x1="64" y1="0" x2="64" y2="24" stroke="oklch(0.637 0.237 25.331)" stroke-width="1.5"/>
-                        </svg>
-                    </div>
-                    <div class="flex justify-center">
-                        <div class="border border-border bg-bg px-3 py-2 text-center">
-                            <span class="text-[9px] text-fg font-medium block">postgres</span>
-                            <span class="text-[8px] text-fg-muted">pool: 50/50</span>
-                        </div>
-                    </div>
+                <div class="p-0 relative" style="height: 280px">
+                    <ServiceMapMock client:visible />
                 </div>
             </div>
             <div class="order-1 md:order-2">
diff --git a/apps/landing/src/pages/features/service-catalog.astro b/apps/landing/src/pages/features/service-catalog.astro
index 1b391b9..2654b91 100644
--- a/apps/landing/src/pages/features/service-catalog.astro
+++ b/apps/landing/src/pages/features/service-catalog.astro
@@ -7,6 +7,7 @@ import RelatedFeatures from "../../components/RelatedFeatures.astro";
 import SeoHead from "../../components/SeoHead.astro";
 import BottomCTA from "../../components/BottomCTA.astro";
 import Footer from "../../components/Footer.astro";
+import { ServiceMapMock } from "../../components/ServiceMapMock.tsx";
 ---
 
 <Layout title="Service Catalog & Map | Maple" description="See all your services at a glance with latency percentiles, Apdex scores, throughput, and dependency mapping.">
@@ -89,43 +90,8 @@ import Footer from "../../components/Footer.astro";
                     <!-- Mini dependency graph -->
                     <div class="w-full lg:w-72 border-t lg:border-t-0 lg:border-l border-border p-4 md:p-6">
                         <span class="text-[10px] text-fg-muted uppercase tracking-wider block mb-4">Dependencies</span>
-                        <div class="relative h-48">
-                            <!-- api-gateway (top center) -->
-                            <div class="absolute top-0 left-1/2 -translate-x-1/2 border border-chart-1/40 bg-chart-1/10 px-3 py-1.5">
-                                <span class="text-[9px] text-chart-1">api-gateway</span>
-                            </div>
-
-                            <!-- Lines from api-gateway down -->
-                            <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 240 180">
-                                <!-- api-gateway to order-service -->
-                                <line x1="120" y1="30" x2="60" y2="80" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
-                                <!-- api-gateway to auth-service -->
-                                <line x1="120" y1="30" x2="180" y2="80" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
-                                <!-- order-service to payment-svc -->
-                                <line x1="60" y1="105" x2="60" y2="145" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
-                                <!-- auth-service to user-db -->
-                                <line x1="180" y1="105" x2="180" y2="145" stroke="oklch(1 0 0 / 10%)" stroke-width="1"/>
-                            </svg>
-
-                            <!-- order-service (middle left) -->
-                            <div class="absolute top-[75px] left-0 border border-chart-3/40 bg-chart-3/10 px-3 py-1.5">
-                                <span class="text-[9px] text-chart-3">order-service</span>
-                            </div>
-
-                            <!-- auth-service (middle right) -->
-                            <div class="absolute top-[75px] right-0 border border-chart-2/40 bg-chart-2/10 px-3 py-1.5">
-                                <span class="text-[9px] text-chart-2">auth-service</span>
-                            </div>
-
-                            <!-- payment-svc (bottom left) -->
-                            <div class="absolute bottom-0 left-0 border border-destructive/40 bg-destructive/10 px-3 py-1.5">
-                                <span class="text-[9px] text-destructive">payment-svc</span>
-                            </div>
-
-                            <!-- user-db (bottom right) -->
-                            <div class="absolute bottom-0 right-0 border border-chart-5/40 bg-chart-5/10 px-3 py-1.5">
-                                <span class="text-[9px] text-chart-5">user-db</span>
-                            </div>
+                        <div class="relative h-64 w-full">
+                            <ServiceMapMock client:visible />
                         </div>
                     </div>
                 </div>
diff --git a/apps/landing/src/pages/use-cases/microservices-debugging.astro b/apps/landing/src/pages/use-cases/microservices-debugging.astro
index d9e1225..4df8496 100644
--- a/apps/landing/src/pages/use-cases/microservices-debugging.astro
+++ b/apps/landing/src/pages/use-cases/microservices-debugging.astro
@@ -4,6 +4,7 @@ import Nav from "../../components/Nav.astro";
 import FeatureHero from "../../components/FeatureHero.astro";
 import BottomCTA from "../../components/BottomCTA.astro";
 import Footer from "../../components/Footer.astro";
+import { ServiceMapMock } from "../../components/ServiceMapMock.tsx";
 ---
 
 <Layout title="Microservices Debugging | Maple" description="Debug latency cascades across distributed services with service maps, trace analysis, and dependency visualization.">
@@ -95,52 +96,8 @@ import Footer from "../../components/Footer.astro";
                         <div class="w-2 h-2 bg-border"></div>
                         <span class="text-[9px] text-fg-muted ml-2">Service Map</span>
                     </div>
-                    <div class="p-4" style="min-height: 240px">
-                        <!-- Top tier -->
-                        <div class="flex justify-center mb-2">
-                            <div class="border border-border bg-bg px-4 py-2 text-center">
-                                <span class="text-[9px] text-fg font-medium block">api-gateway</span>
-                                <span class="text-[8px] text-fg-muted">P95: 480ms</span>
-                            </div>
-                        </div>
-                        <!-- Edges down -->
-                        <div class="flex justify-center">
-                            <svg class="w-64 h-8" viewBox="0 0 256 32">
-                                <line x1="128" y1="0" x2="48" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                                <line x1="128" y1="0" x2="128" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                                <line x1="128" y1="0" x2="208" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                            </svg>
-                        </div>
-                        <!-- Middle tier -->
-                        <div class="flex justify-center gap-3 mb-2">
-                            <div class="border border-border bg-bg px-3 py-2 text-center">
-                                <span class="text-[9px] text-fg font-medium block">auth-svc</span>
-                                <span class="text-[8px] text-fg-muted">12ms</span>
-                            </div>
-                            <div class="border border-border bg-bg px-3 py-2 text-center">
-                                <span class="text-[9px] text-fg font-medium block">order-svc</span>
-                                <span class="text-[8px] text-fg-muted">320ms</span>
-                            </div>
-                            <div class="border border-border bg-bg px-3 py-2 text-center">
-                                <span class="text-[9px] text-fg font-medium block">payment-svc</span>
-                                <span class="text-[8px] text-fg-muted">280ms</span>
-                            </div>
-                        </div>
-                        <!-- Edge to user-db (red) -->
-                        <div class="flex justify-center">
-                            <svg class="w-64 h-8" viewBox="0 0 256 32">
-                                <line x1="80" y1="0" x2="128" y2="32" stroke="oklch(0.65 0 0)" stroke-width="1" stroke-dasharray="3,3"/>
-                                <line x1="128" y1="0" x2="128" y2="32" stroke="oklch(0.637 0.237 25.331)" stroke-width="2"/>
-                                <line x1="176" y1="0" x2="128" y2="32" stroke="oklch(0.637 0.237 25.331)" stroke-width="2"/>
-                            </svg>
-                        </div>
-                        <!-- Bottom tier: user-db highlighted -->
-                        <div class="flex justify-center">
-                            <div class="border-2 border-destructive bg-destructive/5 px-4 py-2 text-center">
-                                <span class="text-[9px] text-destructive font-medium block">user-db</span>
-                                <span class="text-[8px] text-destructive">450ms (was 12ms)</span>
-                            </div>
-                        </div>
+                    <div class="p-0" style="height: 320px">
+                        <ServiceMapMock client:visible />
                     </div>
                 </div>
             </div>
diff --git a/apps/web/src/api/tinybird/traces.test.ts b/apps/web/src/api/tinybird/traces.test.ts
new file mode 100644
index 0000000..f9b135e
--- /dev/null
+++ b/apps/web/src/api/tinybird/traces.test.ts
@@ -0,0 +1,95 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { Effect } from "effect"
+
+const tinybirdQueryMocks = {
+  list_traces: vi.fn(() => Effect.succeed({ data: [] })),
+  traces_facets: vi.fn(() => Effect.succeed({ data: [] })),
+  traces_duration_stats: vi.fn(() => Effect.succeed({ data: [] })),
+  span_hierarchy: vi.fn(() => Effect.succeed({ data: [] })),
+  span_attribute_keys: vi.fn(() => Effect.succeed({ data: [] })),
+  span_attribute_values: vi.fn(() => Effect.succeed({ data: [] })),
+}
+
+vi.mock("@/lib/tinybird", () => ({
+  getTinybird: () => ({ query: tinybirdQueryMocks }),
+}))
+
+import {
+  getTracesDurationStats,
+  getTracesFacets,
+  listTraces,
+} from "@/api/tinybird/traces"
+
+describe("tinybird traces attribute filter params", () => {
+  beforeEach(() => {
+    for (const mock of Object.values(tinybirdQueryMocks)) {
+      mock.mockClear()
+    }
+  })
+
+  it("forwards attribute filter params to list_traces", async () => {
+    await Effect.runPromise(
+      listTraces({
+        data: {
+          startTime: "2026-02-01 00:00:00",
+          endTime: "2026-02-01 01:00:00",
+          attributeKey: "http.route",
+          attributeValue: "/checkout",
+        },
+      }),
+    )
+
+    expect(tinybirdQueryMocks.list_traces).toHaveBeenCalledWith(
+      expect.objectContaining({
+        attribute_filter_key: "http.route",
+        attribute_filter_value: "/checkout",
+      }),
+    )
+  })
+
+  it("forwards attribute filter params to traces_facets and traces_duration_stats", async () => {
+    await Effect.runPromise(
+      getTracesFacets({
+        data: {
+          startTime: "2026-02-01 00:00:00",
+          endTime: "2026-02-01 01:00:00",
+          attributeKey: "http.route",
+          attributeValue: "/checkout",
+        },
+      }),
+    )
+
+    expect(tinybirdQueryMocks.traces_facets).toHaveBeenCalledWith(
+      expect.objectContaining({
+        attribute_filter_key: "http.route",
+        attribute_filter_value: "/checkout",
+      }),
+    )
+    expect(tinybirdQueryMocks.traces_duration_stats).toHaveBeenCalledWith(
+      expect.objectContaining({
+        attribute_filter_key: "http.route",
+        attribute_filter_value: "/checkout",
+      }),
+    )
+  })
+
+  it("forwards attribute filter params to standalone traces_duration_stats", async () => {
+    await Effect.runPromise(
+      getTracesDurationStats({
+        data: {
+          startTime: "2026-02-01 00:00:00",
+          endTime: "2026-02-01 01:00:00",
+          attributeKey: "http.route",
+          attributeValue: "/checkout",
+        },
+      }),
+    )
+
+    expect(tinybirdQueryMocks.traces_duration_stats).toHaveBeenCalledWith(
+      expect.objectContaining({
+        attribute_filter_key: "http.route",
+        attribute_filter_value: "/checkout",
+      }),
+    )
+  })
+})
diff --git a/apps/web/src/api/tinybird/traces.ts b/apps/web/src/api/tinybird/traces.ts
index dd770a7..bab3660 100644
--- a/apps/web/src/api/tinybird/traces.ts
+++ b/apps/web/src/api/tinybird/traces.ts
@@ -27,6 +27,8 @@ const ListTracesInputSchema = Schema.Struct({
   httpMethod: Schema.optional(Schema.String),
   httpStatusCode: Schema.optional(Schema.String),
   deploymentEnv: Schema.optional(Schema.String),
+  attributeKey: Schema.optional(Schema.String),
+  attributeValue: Schema.optional(Schema.String),
   rootOnly: Schema.optional(Schema.Boolean),
 })
 
@@ -99,6 +101,8 @@ const listTracesEffect = Effect.fn("Tinybird.listTraces")(function* ({
         http_method: input.httpMethod,
         http_status_code: input.httpStatusCode,
         deployment_env: input.deploymentEnv,
+        attribute_filter_key: input.attributeKey,
+        attribute_filter_value: input.attributeValue,
         root_only: input.rootOnly,
       }),
     )
@@ -295,6 +299,8 @@ const GetTracesFacetsInputSchema = Schema.Struct({
   httpMethod: Schema.optional(Schema.String),
   httpStatusCode: Schema.optional(Schema.String),
   deploymentEnv: Schema.optional(Schema.String),
+  attributeKey: Schema.optional(Schema.String),
+  attributeValue: Schema.optional(Schema.String),
 })
 
 export type GetTracesFacetsInput = Schema.Schema.Type<typeof GetTracesFacetsInputSchema>
@@ -383,6 +389,8 @@ const getTracesFacetsEffect = Effect.fn("Tinybird.getTracesFacets")(function* ({
           http_method: input.httpMethod,
           http_status_code: input.httpStatusCode,
           deployment_env: input.deploymentEnv,
+          attribute_filter_key: input.attributeKey,
+          attribute_filter_value: input.attributeValue,
         }),
       ),
       runTinybirdQuery("traces_duration_stats", () =>
@@ -395,6 +403,8 @@ const getTracesFacetsEffect = Effect.fn("Tinybird.getTracesFacets")(function* ({
           http_method: input.httpMethod,
           http_status_code: input.httpStatusCode,
           deployment_env: input.deploymentEnv,
+          attribute_filter_key: input.attributeKey,
+          attribute_filter_value: input.attributeValue,
         }),
       ),
     ])
@@ -433,6 +443,8 @@ const getTracesDurationStatsEffect = Effect.fn("Tinybird.getTracesDurationStats"
         http_method: input.httpMethod,
         http_status_code: input.httpStatusCode,
         deployment_env: input.deploymentEnv,
+        attribute_filter_key: input.attributeKey,
+        attribute_filter_value: input.attributeValue,
       }),
     )
 
diff --git a/apps/web/src/components/query-builder/where-clause-editor.tsx b/apps/web/src/components/query-builder/where-clause-editor.tsx
index cfdc14a..8ba937a 100644
--- a/apps/web/src/components/query-builder/where-clause-editor.tsx
+++ b/apps/web/src/components/query-builder/where-clause-editor.tsx
@@ -4,6 +4,7 @@ import { Textarea } from "@maple/ui/components/ui/textarea"
 import {
   applyWhereClauseSuggestion,
   getWhereClauseAutocomplete,
+  type WhereClauseAutocompleteScope,
   type WhereClauseAutocompleteValues,
 } from "@/lib/query-builder/where-clause-autocomplete"
 import type { QueryBuilderDataSource } from "@/lib/query-builder/model"
@@ -14,6 +15,7 @@ interface WhereClauseEditorProps {
   value: string
   onChange: (value: string) => void
   values?: WhereClauseAutocompleteValues
+  autocompleteScope?: WhereClauseAutocompleteScope
   onActiveAttributeKey?: (key: string | null) => void
   placeholder?: string
   rows?: number
@@ -27,6 +29,7 @@ export function WhereClauseEditor({
   value,
   onChange,
   values,
+  autocompleteScope,
   onActiveAttributeKey,
   placeholder,
   rows = 2,
@@ -51,8 +54,9 @@ export function WhereClauseEditor({
         cursor,
         dataSource,
         values,
+        scope: autocompleteScope,
       }),
-    [cursor, dataSource, value, values],
+    [autocompleteScope, cursor, dataSource, value, values],
   )
 
   // Notify parent when user is editing a value for an attr.* key
diff --git a/apps/web/src/components/traces/traces-filter-sidebar.tsx b/apps/web/src/components/traces/traces-filter-sidebar.tsx
index 8fd35c9..038b244 100644
--- a/apps/web/src/components/traces/traces-filter-sidebar.tsx
+++ b/apps/web/src/components/traces/traces-filter-sidebar.tsx
@@ -1,7 +1,9 @@
+import * as React from "react"
 import { Result, useAtomValue } from "@effect-atom/atom-react"
 import { useNavigate } from "@tanstack/react-router"
 
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
+import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
 import {
   FilterSection,
   SearchableFilterSection,
@@ -10,7 +12,11 @@ import {
 import { DurationRangeFilter } from "./duration-range-filter"
 import { Route } from "@/routes/traces"
 import { Separator } from "@maple/ui/components/ui/separator"
-import { getTracesFacetsResultAtom } from "@/lib/services/atoms/tinybird-query-atoms"
+import {
+  getSpanAttributeKeysResultAtom,
+  getSpanAttributeValuesResultAtom,
+  getTracesFacetsResultAtom,
+} from "@/lib/services/atoms/tinybird-query-atoms"
 import {
   FilterSidebarBody,
   FilterSidebarError,
@@ -18,6 +24,10 @@ import {
   FilterSidebarHeader,
   FilterSidebarLoading,
 } from "@/components/filters/filter-sidebar"
+import {
+  normalizeTracesSearchParams,
+  type TracesSearchLike,
+} from "@/lib/traces/advanced-filter-sync"
 
 function LoadingState() {
   return <FilterSidebarLoading sectionCount={5} sticky />
@@ -26,11 +36,33 @@ function LoadingState() {
 export function TracesFilterSidebar() {
   const navigate = useNavigate({ from: Route.fullPath })
   const search = Route.useSearch()
+  const [activeAttributeKey, setActiveAttributeKey] = React.useState<string | null>(
+    null,
+  )
   const { startTime: effectiveStartTime, endTime: effectiveEndTime } = useEffectiveTimeRange(
     search.startTime,
     search.endTime,
   )
 
+  const spanAttributeKeysResult = useAtomValue(
+    getSpanAttributeKeysResultAtom({
+      data: {
+        startTime: effectiveStartTime,
+        endTime: effectiveEndTime,
+      },
+    }),
+  )
+
+  const spanAttributeValuesResult = useAtomValue(
+    getSpanAttributeValuesResultAtom({
+      data: {
+        startTime: effectiveStartTime,
+        endTime: effectiveEndTime,
+        attributeKey: activeAttributeKey ?? "",
+      },
+    }),
+  )
+
   const facetsResult = useAtomValue(
     getTracesFacetsResultAtom({
       data: {
@@ -44,55 +76,125 @@ export function TracesFilterSidebar() {
         httpMethod: search.httpMethods?.[0],
         httpStatusCode: search.httpStatusCodes?.[0],
         deploymentEnv: search.deploymentEnvs?.[0],
+        attributeKey: search.attributeKey,
+        attributeValue: search.attributeValue,
       },
     }),
   )
 
+  const navigateWithNormalizedSearch = React.useCallback(
+    (next: TracesSearchLike) => {
+      navigate({
+        search: normalizeTracesSearchParams(next),
+      })
+    },
+    [navigate],
+  )
+
   const updateFilter = <K extends keyof typeof search>(
     key: K,
     value: (typeof search)[K],
   ) => {
-    navigate({
-      search: (prev) => ({
-        ...prev,
-        [key]: value === undefined || (Array.isArray(value) && value.length === 0)
-          ? undefined
-          : value,
-      }),
+    const normalizedValue =
+      value === undefined || (Array.isArray(value) && value.length === 0)
+        ? undefined
+        : value
+
+    navigateWithNormalizedSearch({
+      ...search,
+      [key]: normalizedValue,
+      whereClause: undefined,
     })
   }
 
   const clearAllFilters = () => {
-    navigate({
-      search: {
-        startTime: search.startTime,
-        endTime: search.endTime,
-        rootOnly: search.rootOnly,
-      },
+    setActiveAttributeKey(null)
+    navigateWithNormalizedSearch({
+      startTime: search.startTime,
+      endTime: search.endTime,
     })
   }
 
-  const hasActiveFilters =
-    (search.services?.length ?? 0) > 0 ||
-    (search.spanNames?.length ?? 0) > 0 ||
-    (search.httpMethods?.length ?? 0) > 0 ||
-    (search.httpStatusCodes?.length ?? 0) > 0 ||
-    (search.deploymentEnvs?.length ?? 0) > 0 ||
-    search.hasError ||
-    search.minDurationMs !== undefined ||
-    search.maxDurationMs !== undefined ||
-    search.rootOnly === false
+  const hasActiveFilters = Boolean(search.whereClause?.trim())
+
+  const attributeKeys = React.useMemo(
+    () =>
+      Result.builder(spanAttributeKeysResult)
+        .onSuccess((response) => response.data.map((row) => row.attributeKey))
+        .orElse(() => []),
+    [spanAttributeKeysResult],
+  )
+
+  const attributeValues = React.useMemo(
+    () =>
+      activeAttributeKey
+        ? Result.builder(spanAttributeValuesResult)
+            .onSuccess((response) => response.data.map((row) => row.attributeValue))
+            .orElse(() => [])
+        : [],
+    [activeAttributeKey, spanAttributeValuesResult],
+  )
 
   return Result.builder(facetsResult)
     .onInitial(() => <LoadingState />)
     .onError(() => <FilterSidebarError message="Unable to load filters" sticky />)
     .onSuccess((facetsResponse, result) => {
       const facets = facetsResponse.data
+      const toNames = (items: Array<{ name: string }>): string[] => {
+        const seen = new Set<string>()
+        const values: string[] = []
+
+        for (const item of items) {
+          const next = item.name.trim()
+          if (!next || seen.has(next)) {
+            continue
+          }
+
+          seen.add(next)
+          values.push(next)
+        }
+
+        return values
+      }
+
+      const autocompleteValues = {
+        services: toNames(facets.services ?? []),
+        spanNames: toNames(facets.spanNames ?? []),
+        environments: toNames(facets.deploymentEnvs ?? []),
+        httpMethods: toNames(facets.httpMethods ?? []),
+        httpStatusCodes: toNames(facets.httpStatusCodes ?? []),
+        attributeKeys,
+        attributeValues,
+      }
 
       return (
         <FilterSidebarFrame sticky waiting={result.waiting}>
           <FilterSidebarHeader canClear={hasActiveFilters} onClear={clearAllFilters} />
           <FilterSidebarBody>
+            <div className="space-y-1">
+              <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                Advanced Filter
+              </p>
+              <WhereClauseEditor
+                rows={2}
+                value={search.whereClause ?? ""}
+                dataSource="traces"
+                autocompleteScope="trace_search"
+                values={autocompleteValues}
+                onActiveAttributeKey={setActiveAttributeKey}
+                onChange={(nextWhereClause) =>
+                  navigateWithNormalizedSearch({
+                    ...search,
+                    whereClause: nextWhereClause,
+                  })
+                }
+                placeholder='service.name = "checkout" AND attr.http.route = "/orders/:id"'
+                ariaLabel="Advanced traces where clause"
+              />
+            </div>
+
+            <Separator className="my-2" />
+
             <DurationRangeFilter
               minValue={search.minDurationMs}
               maxValue={search.maxDurationMs}
diff --git a/apps/web/src/components/traces/traces-table.tsx b/apps/web/src/components/traces/traces-table.tsx
index 0ab0238..991c37b 100644
--- a/apps/web/src/components/traces/traces-table.tsx
+++ b/apps/web/src/components/traces/traces-table.tsx
@@ -125,6 +125,8 @@ export function TracesTable({ filters }: TracesTableProps) {
         httpMethod: filters?.httpMethods?.[0],
         httpStatusCode: filters?.httpStatusCodes?.[0],
         deploymentEnv: filters?.deploymentEnvs?.[0],
+        attributeKey: filters?.attributeKey,
+        attributeValue: filters?.attributeValue,
         startTime: effectiveStartTime,
         endTime: effectiveEndTime,
         rootOnly: filters?.rootOnly,
diff --git a/apps/web/src/lib/query-builder/where-clause-autocomplete.test.ts b/apps/web/src/lib/query-builder/where-clause-autocomplete.test.ts
index aa3e0ee..0bdf049 100644
--- a/apps/web/src/lib/query-builder/where-clause-autocomplete.test.ts
+++ b/apps/web/src/lib/query-builder/where-clause-autocomplete.test.ts
@@ -119,4 +119,51 @@ describe("where clause autocomplete", () => {
 
     expect(applied.expression).toBe('service.name = "checkout" AND ')
   })
+
+  it("supports trace_search key suggestions without changing default traces scope", () => {
+    const defaultScope = getWhereClauseAutocomplete({
+      expression: "http",
+      cursor: 4,
+      dataSource: "traces",
+    })
+    const traceScope = getWhereClauseAutocomplete({
+      expression: "http",
+      cursor: 4,
+      dataSource: "traces",
+      scope: "trace_search",
+    })
+
+    expect(
+      defaultScope.suggestions.some((item) => item.insertText === "http.method"),
+    ).toBe(false)
+    expect(
+      traceScope.suggestions.some((item) => item.insertText === "http.method"),
+    ).toBe(true)
+  })
+
+  it("suggests trace_search values for HTTP and booleans", () => {
+    const method = getWhereClauseAutocomplete({
+      expression: "http.method = ge",
+      cursor: "http.method = ge".length,
+      dataSource: "traces",
+      scope: "trace_search",
+      values: {
+        httpMethods: ["GET", "POST"],
+      },
+    })
+    const hasError = getWhereClauseAutocomplete({
+      expression: "has_error = ",
+      cursor: "has_error = ".length,
+      dataSource: "traces",
+      scope: "trace_search",
+    })
+
+    expect(method.context).toBe("value")
+    expect(method.suggestions[0]?.label).toBe("GET")
+    expect(method.suggestions[0]?.insertText).toBe('"GET"')
+    expect(hasError.suggestions.map((item) => item.insertText)).toEqual([
+      "true",
+      "false",
+    ])
+  })
 })
diff --git a/apps/web/src/lib/query-builder/where-clause-autocomplete.ts b/apps/web/src/lib/query-builder/where-clause-autocomplete.ts
index 2a798ad..bb68be1 100644
--- a/apps/web/src/lib/query-builder/where-clause-autocomplete.ts
+++ b/apps/web/src/lib/query-builder/where-clause-autocomplete.ts
@@ -10,12 +10,16 @@ export type WhereClauseAutocompleteContext =
   | "value"
   | "conjunction"
 
+export type WhereClauseAutocompleteScope = "default" | "trace_search"
+
 export interface WhereClauseAutocompleteValues {
   services?: string[]
   spanNames?: string[]
   environments?: string[]
   commitShas?: string[]
   severities?: string[]
+  httpMethods?: string[]
+  httpStatusCodes?: string[]
   metricTypes?: QueryBuilderMetricType[]
   attributeKeys?: string[]
   attributeValues?: string[]
@@ -43,6 +47,7 @@ interface WhereClauseAutocompleteInput {
   cursor: number
   dataSource: QueryBuilderDataSource
   values?: WhereClauseAutocompleteValues
+  scope?: WhereClauseAutocompleteScope
   maxSuggestions?: number
 }
 
@@ -127,6 +132,59 @@ const KEY_DEFINITIONS: Record<QueryBuilderDataSource, KeyDefinition[]> = {
   ],
 }
 
+const TRACE_SEARCH_KEY_DEFINITIONS: KeyDefinition[] = [
+  {
+    label: "service.name",
+    insertText: "service.name",
+    description: "Filter by service",
+  },
+  {
+    label: "span.name",
+    insertText: "span.name",
+    description: "Filter by root span name",
+  },
+  {
+    label: "deployment.environment",
+    insertText: "deployment.environment",
+    description: "Filter by deployment environment",
+  },
+  {
+    label: "http.method",
+    insertText: "http.method",
+    description: "Filter by HTTP method",
+  },
+  {
+    label: "http.status_code",
+    insertText: "http.status_code",
+    description: "Filter by HTTP status code",
+  },
+  {
+    label: "has_error",
+    insertText: "has_error",
+    description: "true or false",
+  },
+  {
+    label: "root_only",
+    insertText: "root_only",
+    description: "true or false",
+  },
+  {
+    label: "min_duration_ms",
+    insertText: "min_duration_ms",
+    description: "Minimum duration in milliseconds",
+  },
+  {
+    label: "max_duration_ms",
+    insertText: "max_duration_ms",
+    description: "Maximum duration in milliseconds",
+  },
+  {
+    label: "attr.<key>",
+    insertText: "attr.",
+    description: "Filter by a single span attribute",
+  },
+]
+
 function isSpace(char: string | undefined): boolean {
   return char == null || /\s/.test(char)
 }
@@ -424,6 +482,26 @@ function normalizeKey(input: string | null): string {
     return "root_only"
   }
 
+  if (normalized === "has_error") {
+    return "has_error"
+  }
+
+  if (normalized === "http.method") {
+    return "http.method"
+  }
+
+  if (normalized === "http.status_code") {
+    return "http.status_code"
+  }
+
+  if (normalized === "min_duration_ms") {
+    return "min_duration_ms"
+  }
+
+  if (normalized === "max_duration_ms") {
+    return "max_duration_ms"
+  }
+
   if (normalized.startsWith("attr.")) {
     return "attr.*"
   }
@@ -524,6 +602,7 @@ function buildValueSuggestions(
   key: string | null,
   dataSource: QueryBuilderDataSource,
   values: WhereClauseAutocompleteValues | undefined,
+  scope: WhereClauseAutocompleteScope,
 ): WhereClauseAutocompleteSuggestion[] {
   const normalizedKey = normalizeKey(key)
 
@@ -544,6 +623,23 @@ function buildValueSuggestions(
     ]
   }
 
+  if (scope === "trace_search" && normalizedKey === "has_error") {
+    return [
+      {
+        id: "value:has_error:true",
+        kind: "value",
+        label: "true",
+        insertText: "true",
+      },
+      {
+        id: "value:has_error:false",
+        kind: "value",
+        label: "false",
+        insertText: "false",
+      },
+    ]
+  }
+
   if (normalizedKey === "metric.type") {
     const metricTypes =
       values?.metricTypes && values.metricTypes.length > 0
@@ -559,6 +655,12 @@ function buildValueSuggestions(
     "deployment.environment": uniqueValues(values?.environments ?? []),
     "deployment.commit_sha": uniqueValues(values?.commitShas ?? []),
     severity: uniqueValues(values?.severities ?? []),
+    ...(scope === "trace_search"
+      ? {
+          "http.method": uniqueValues(values?.httpMethods ?? []),
+          "http.status_code": uniqueValues(values?.httpStatusCodes ?? []),
+        }
+      : {}),
   }
 
   const explicit = mappedValues[normalizedKey]
@@ -619,6 +721,7 @@ function buildSuggestions(
   parsed: ParsedWhereClauseContext,
   dataSource: QueryBuilderDataSource,
   values: WhereClauseAutocompleteValues | undefined,
+  scope: WhereClauseAutocompleteScope,
   maxSuggestions: number,
 ): WhereClauseAutocompleteSuggestion[] {
   if (parsed.context === "key") {
@@ -635,7 +738,12 @@ function buildSuggestions(
       return filterAndRankSuggestions(attrSuggestions, query, maxSuggestions)
     }
 
-    const keySuggestions = KEY_DEFINITIONS[dataSource].map((keyDef) =>
+    const keyDefinitions =
+      scope === "trace_search" && dataSource === "traces"
+        ? TRACE_SEARCH_KEY_DEFINITIONS
+        : KEY_DEFINITIONS[dataSource]
+
+    const keySuggestions = keyDefinitions.map((keyDef) =>
       toSuggestion(
         {
           id: `key:${keyDef.insertText}`,
@@ -665,7 +773,12 @@ function buildSuggestions(
   }
 
   if (parsed.context === "value") {
-    const valueSuggestions = buildValueSuggestions(parsed.key, dataSource, values)
+    const valueSuggestions = buildValueSuggestions(
+      parsed.key,
+      dataSource,
+      values,
+      scope,
+    )
     return filterAndRankSuggestions(valueSuggestions, parsed.query, maxSuggestions)
   }
 
@@ -687,10 +800,11 @@ export function getWhereClauseAutocomplete({
   cursor,
   dataSource,
   values,
+  scope = "default",
   maxSuggestions = 8,
 }: WhereClauseAutocompleteInput): WhereClauseAutocompleteResult {
   const parsed = parseWhereClauseContext(expression, cursor)
-  const suggestions = buildSuggestions(parsed, dataSource, values, maxSuggestions)
+  const suggestions = buildSuggestions(parsed, dataSource, values, scope, maxSuggestions)
 
   return {
     context: parsed.context,
diff --git a/apps/web/src/lib/traces/advanced-filter-sync.test.ts b/apps/web/src/lib/traces/advanced-filter-sync.test.ts
new file mode 100644
index 0000000..e31b9ca
--- /dev/null
+++ b/apps/web/src/lib/traces/advanced-filter-sync.test.ts
@@ -0,0 +1,111 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  areTracesSearchParamsEqual,
+  normalizeTracesSearchParams,
+} from "@/lib/traces/advanced-filter-sync"
+
+describe("advanced-filter-sync", () => {
+  it("normalizes legacy filters into whereClause", () => {
+    const normalized = normalizeTracesSearchParams({
+      services: ["checkout", "billing"],
+      spanNames: ["GET /orders"],
+      deploymentEnvs: ["production"],
+      httpMethods: ["GET"],
+      httpStatusCodes: ["500"],
+      hasError: true,
+      rootOnly: false,
+      minDurationMs: 25,
+      maxDurationMs: 1500,
+      attributeKey: "http.route",
+      attributeValue: "/orders/:id",
+      startTime: "2026-02-01 00:00:00",
+      endTime: "2026-02-01 01:00:00",
+    })
+
+    expect(normalized.services).toEqual(["checkout"])
+    expect(normalized.whereClause).toBe(
+      'service.name = "checkout" AND span.name = "GET /orders" AND deployment.environment = "production" AND http.method = "GET" AND http.status_code = "500" AND has_error = true AND root_only = false AND min_duration_ms = 25 AND max_duration_ms = 1500 AND attr.http.route = "/orders/:id"',
+    )
+  })
+
+  it("parses whereClause and populates legacy fields", () => {
+    const normalized = normalizeTracesSearchParams({
+      whereClause:
+        'service = "checkout" AND span = "GET /orders" AND env = "production" AND http.method = "POST" AND http.status_code = "404" AND has_error = true AND root_only = false AND min_duration_ms = 12.5 AND max_duration_ms = 88 AND attr.http.route = "/api/orders"',
+    })
+
+    expect(normalized.services).toEqual(["checkout"])
+    expect(normalized.spanNames).toEqual(["GET /orders"])
+    expect(normalized.deploymentEnvs).toEqual(["production"])
+    expect(normalized.httpMethods).toEqual(["POST"])
+    expect(normalized.httpStatusCodes).toEqual(["404"])
+    expect(normalized.hasError).toBe(true)
+    expect(normalized.rootOnly).toBe(false)
+    expect(normalized.minDurationMs).toBe(12.5)
+    expect(normalized.maxDurationMs).toBe(88)
+    expect(normalized.attributeKey).toBe("http.route")
+    expect(normalized.attributeValue).toBe("/api/orders")
+  })
+
+  it("drops unsupported and non-functional clauses", () => {
+    const normalized = normalizeTracesSearchParams({
+      whereClause:
+        'foo = "bar" AND has_error = false AND root_only = true AND min_duration_ms = nope AND attr.http.route = "/ok"',
+    })
+
+    expect(normalized.whereClause).toBe('attr.http.route = "/ok"')
+    expect(normalized.hasError).toBeUndefined()
+    expect(normalized.rootOnly).toBeUndefined()
+    expect(normalized.minDurationMs).toBeUndefined()
+    expect(normalized.attributeKey).toBe("http.route")
+  })
+
+  it("uses whereClause as precedence when both legacy and whereClause exist", () => {
+    const normalized = normalizeTracesSearchParams({
+      services: ["legacy"],
+      whereClause: 'service.name = "from-where" AND has_error = true',
+    })
+
+    expect(normalized.services).toEqual(["from-where"])
+    expect(normalized.hasError).toBe(true)
+    expect(normalized.whereClause).toBe(
+      'service.name = "from-where" AND has_error = true',
+    )
+  })
+
+  it("normalizes empty results to undefined whereClause", () => {
+    const normalized = normalizeTracesSearchParams({
+      whereClause: 'has_error = false AND root_only = true',
+    })
+
+    expect(normalized.whereClause).toBeUndefined()
+    expect(normalized.services).toBeUndefined()
+    expect(normalized.attributeKey).toBeUndefined()
+  })
+
+  it("preserves incomplete whereClause text while editing", () => {
+    const normalized = normalizeTracesSearchParams({
+      whereClause: 'service.name = "check',
+      services: ["legacy"],
+    })
+
+    expect(normalized.whereClause).toBe('service.name = "check')
+    expect(normalized.services).toBeUndefined()
+  })
+
+  it("compares search params deterministically", () => {
+    const left = normalizeTracesSearchParams({
+      services: ["checkout"],
+      startTime: "2026-02-01 00:00:00",
+      endTime: "2026-02-01 01:00:00",
+    })
+    const right = normalizeTracesSearchParams({
+      whereClause: 'service = "checkout"',
+      startTime: "2026-02-01 00:00:00",
+      endTime: "2026-02-01 01:00:00",
+    })
+
+    expect(areTracesSearchParamsEqual(left, right)).toBe(true)
+  })
+})
diff --git a/apps/web/src/lib/traces/advanced-filter-sync.ts b/apps/web/src/lib/traces/advanced-filter-sync.ts
new file mode 100644
index 0000000..4e95a8f
--- /dev/null
+++ b/apps/web/src/lib/traces/advanced-filter-sync.ts
@@ -0,0 +1,375 @@
+export interface TracesSearchLike {
+  services?: string[]
+  spanNames?: string[]
+  hasError?: boolean
+  minDurationMs?: number
+  maxDurationMs?: number
+  httpMethods?: string[]
+  httpStatusCodes?: string[]
+  deploymentEnvs?: string[]
+  startTime?: string
+  endTime?: string
+  rootOnly?: boolean
+  whereClause?: string
+  attributeKey?: string
+  attributeValue?: string
+}
+
+interface ParsedWhereClauseFilters {
+  service?: string
+  spanName?: string
+  deploymentEnv?: string
+  httpMethod?: string
+  httpStatusCode?: string
+  hasError?: true
+  rootOnly?: false
+  minDurationMs?: number
+  maxDurationMs?: number
+  attributeKey?: string
+  attributeValue?: string
+}
+
+const TRUE_VALUES = new Set(["1", "true", "yes", "y"])
+const FALSE_VALUES = new Set(["0", "false", "no", "n"])
+
+const CLAUSE_RE = /^([a-zA-Z0-9_.-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s]+))$/
+
+function firstNonEmpty(values?: string[]): string | undefined {
+  if (!values || values.length === 0) {
+    return undefined
+  }
+
+  const first = values[0]?.trim()
+  return first ? first : undefined
+}
+
+function normalizeBoolean(value: unknown): boolean | undefined {
+  if (typeof value !== "boolean") {
+    return undefined
+  }
+
+  return value
+}
+
+function normalizeNumber(value: unknown): number | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return undefined
+  }
+
+  return value
+}
+
+function parseBoolean(value: string): boolean | null {
+  const normalized = value.trim().toLowerCase()
+  if (TRUE_VALUES.has(normalized)) {
+    return true
+  }
+
+  if (FALSE_VALUES.has(normalized)) {
+    return false
+  }
+
+  return null
+}
+
+function parseNumber(value: string): number | null {
+  if (!value.trim()) {
+    return null
+  }
+
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed)) {
+    return null
+  }
+
+  return parsed
+}
+
+function quoteValue(value: string): string {
+  return `"${value.replace(/\\/g, "\\\\").replace(/\"/g, '\\\"')}"`
+}
+
+function hasAnyFilter(filters: ParsedWhereClauseFilters): boolean {
+  return Object.values(filters).some((value) => value !== undefined)
+}
+
+function parseWhereClause(whereClause: string | undefined): {
+  filters: ParsedWhereClauseFilters
+  hasIncompleteClauses: boolean
+} {
+  if (!whereClause || !whereClause.trim()) {
+    return {
+      filters: {},
+      hasIncompleteClauses: false,
+    }
+  }
+
+  const parts = whereClause
+    .trim()
+    .split(/\s+AND\s+/i)
+    .map((part) => part.trim())
+    .filter(Boolean)
+
+  const parsed: ParsedWhereClauseFilters = {}
+  let hasIncompleteClauses = false
+
+  for (const part of parts) {
+    const match = part.match(CLAUSE_RE)
+    if (!match) {
+      hasIncompleteClauses = true
+      continue
+    }
+
+    const unquotedToken = match[4]
+    if (
+      unquotedToken &&
+      (unquotedToken.startsWith("\"") || unquotedToken.startsWith("'"))
+    ) {
+      hasIncompleteClauses = true
+      continue
+    }
+
+    const rawKey = match[1]?.trim().toLowerCase()
+    const rawValue = (match[2] ?? match[3] ?? match[4] ?? "").trim()
+    if (!rawKey || !rawValue) {
+      continue
+    }
+
+    if (rawKey === "service" || rawKey === "service.name") {
+      parsed.service = rawValue
+      continue
+    }
+
+    if (rawKey === "span" || rawKey === "span.name") {
+      parsed.spanName = rawValue
+      continue
+    }
+
+    if (
+      rawKey === "deployment.environment" ||
+      rawKey === "environment" ||
+      rawKey === "env"
+    ) {
+      parsed.deploymentEnv = rawValue
+      continue
+    }
+
+    if (rawKey === "http.method") {
+      parsed.httpMethod = rawValue
+      continue
+    }
+
+    if (rawKey === "http.status_code") {
+      parsed.httpStatusCode = rawValue
+      continue
+    }
+
+    if (rawKey === "has_error") {
+      const boolValue = parseBoolean(rawValue)
+      if (boolValue === null) {
+        hasIncompleteClauses = true
+      } else {
+        parsed.hasError = boolValue === true ? true : undefined
+      }
+      continue
+    }
+
+    if (rawKey === "root_only" || rawKey === "root.only") {
+      const boolValue = parseBoolean(rawValue)
+      if (boolValue === null) {
+        hasIncompleteClauses = true
+      } else {
+        parsed.rootOnly = boolValue === false ? false : undefined
+      }
+      continue
+    }
+
+    if (rawKey === "min_duration_ms") {
+      const numeric = parseNumber(rawValue)
+      if (numeric === null) {
+        hasIncompleteClauses = true
+      } else {
+        parsed.minDurationMs = numeric
+      }
+      continue
+    }
+
+    if (rawKey === "max_duration_ms") {
+      const numeric = parseNumber(rawValue)
+      if (numeric === null) {
+        hasIncompleteClauses = true
+      } else {
+        parsed.maxDurationMs = numeric
+      }
+      continue
+    }
+
+    if (rawKey.startsWith("attr.")) {
+      const attributeKey = rawKey.slice(5).trim()
+      if (!attributeKey || parsed.attributeKey) {
+        continue
+      }
+
+      parsed.attributeKey = attributeKey
+      parsed.attributeValue = rawValue
+    }
+  }
+
+  return {
+    filters: parsed,
+    hasIncompleteClauses,
+  }
+}
+
+function toWhereClause(filters: ParsedWhereClauseFilters): string | undefined {
+  const clauses: string[] = []
+
+  if (filters.service) {
+    clauses.push(`service.name = ${quoteValue(filters.service)}`)
+  }
+
+  if (filters.spanName) {
+    clauses.push(`span.name = ${quoteValue(filters.spanName)}`)
+  }
+
+  if (filters.deploymentEnv) {
+    clauses.push(`deployment.environment = ${quoteValue(filters.deploymentEnv)}`)
+  }
+
+  if (filters.httpMethod) {
+    clauses.push(`http.method = ${quoteValue(filters.httpMethod)}`)
+  }
+
+  if (filters.httpStatusCode) {
+    clauses.push(`http.status_code = ${quoteValue(filters.httpStatusCode)}`)
+  }
+
+  if (filters.hasError === true) {
+    clauses.push("has_error = true")
+  }
+
+  if (filters.rootOnly === false) {
+    clauses.push("root_only = false")
+  }
+
+  if (typeof filters.minDurationMs === "number") {
+    clauses.push(`min_duration_ms = ${String(filters.minDurationMs)}`)
+  }
+
+  if (typeof filters.maxDurationMs === "number") {
+    clauses.push(`max_duration_ms = ${String(filters.maxDurationMs)}`)
+  }
+
+  if (filters.attributeKey && filters.attributeValue) {
+    clauses.push(
+      `attr.${filters.attributeKey} = ${quoteValue(filters.attributeValue)}`,
+    )
+  }
+
+  if (clauses.length === 0) {
+    return undefined
+  }
+
+  return clauses.join(" AND ")
+}
+
+function normalizeLegacyFilters(search: TracesSearchLike): ParsedWhereClauseFilters {
+  const service = firstNonEmpty(search.services)
+  const spanName = firstNonEmpty(search.spanNames)
+  const deploymentEnv = firstNonEmpty(search.deploymentEnvs)
+  const httpMethod = firstNonEmpty(search.httpMethods)
+  const httpStatusCode = firstNonEmpty(search.httpStatusCodes)
+  const hasError = normalizeBoolean(search.hasError) === true ? true : undefined
+  const rootOnly = normalizeBoolean(search.rootOnly) === false ? false : undefined
+  const minDurationMs = normalizeNumber(search.minDurationMs)
+  const maxDurationMs = normalizeNumber(search.maxDurationMs)
+  const attributeKey = search.attributeKey?.trim()
+  const attributeValue = search.attributeValue?.trim()
+
+  return {
+    service,
+    spanName,
+    deploymentEnv,
+    httpMethod,
+    httpStatusCode,
+    hasError,
+    rootOnly,
+    minDurationMs,
+    maxDurationMs,
+    attributeKey: attributeKey && attributeValue ? attributeKey : undefined,
+    attributeValue: attributeKey && attributeValue ? attributeValue : undefined,
+  }
+}
+
+function normalizeWithFilters(
+  search: TracesSearchLike,
+  filters: ParsedWhereClauseFilters,
+): TracesSearchLike {
+  const whereClause = toWhereClause(filters)
+
+  return {
+    startTime: search.startTime,
+    endTime: search.endTime,
+    services: filters.service ? [filters.service] : undefined,
+    spanNames: filters.spanName ? [filters.spanName] : undefined,
+    hasError: filters.hasError,
+    minDurationMs: filters.minDurationMs,
+    maxDurationMs: filters.maxDurationMs,
+    httpMethods: filters.httpMethod ? [filters.httpMethod] : undefined,
+    httpStatusCodes: filters.httpStatusCode ? [filters.httpStatusCode] : undefined,
+    deploymentEnvs: filters.deploymentEnv ? [filters.deploymentEnv] : undefined,
+    rootOnly: filters.rootOnly,
+    whereClause,
+    attributeKey: filters.attributeKey,
+    attributeValue: filters.attributeValue,
+  }
+}
+
+export function normalizeTracesSearchParams(search: TracesSearchLike): TracesSearchLike {
+  const normalizedWhereClause = search.whereClause?.trim()
+
+  if (normalizedWhereClause) {
+    const parsed = parseWhereClause(normalizedWhereClause)
+    if (hasAnyFilter(parsed.filters)) {
+      return normalizeWithFilters(search, parsed.filters)
+    }
+
+    if (parsed.hasIncompleteClauses) {
+      return {
+        startTime: search.startTime,
+        endTime: search.endTime,
+        whereClause: normalizedWhereClause,
+      }
+    }
+
+    return normalizeWithFilters(search, {})
+  }
+
+  return normalizeWithFilters(search, normalizeLegacyFilters(search))
+}
+
+function sortedObject(input: TracesSearchLike): Record<string, unknown> {
+  return {
+    attributeKey: input.attributeKey,
+    attributeValue: input.attributeValue,
+    deploymentEnvs: input.deploymentEnvs,
+    endTime: input.endTime,
+    hasError: input.hasError,
+    httpMethods: input.httpMethods,
+    httpStatusCodes: input.httpStatusCodes,
+    maxDurationMs: input.maxDurationMs,
+    minDurationMs: input.minDurationMs,
+    rootOnly: input.rootOnly,
+    services: input.services,
+    spanNames: input.spanNames,
+    startTime: input.startTime,
+    whereClause: input.whereClause,
+  }
+}
+
+export function areTracesSearchParamsEqual(
+  left: TracesSearchLike,
+  right: TracesSearchLike,
+): boolean {
+  return JSON.stringify(sortedObject(left)) === JSON.stringify(sortedObject(right))
+}
diff --git a/apps/web/src/routes/traces/index.tsx b/apps/web/src/routes/traces/index.tsx
index 5d9da6d..40630da 100644
--- a/apps/web/src/routes/traces/index.tsx
+++ b/apps/web/src/routes/traces/index.tsx
@@ -1,10 +1,15 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { Schema } from "effect"
+import { useEffect } from "react"
 
 import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import { TracesTable } from "@/components/traces/traces-table"
 import { TracesFilterSidebar } from "@/components/traces/traces-filter-sidebar"
 import { TimeRangePicker } from "@/components/time-range-picker"
+import {
+  areTracesSearchParamsEqual,
+  normalizeTracesSearchParams,
+} from "@/lib/traces/advanced-filter-sync"
 
 const tracesSearchSchema = Schema.Struct({
   services: Schema.optional(Schema.mutable(Schema.Array(Schema.String))),
@@ -18,6 +23,9 @@ const tracesSearchSchema = Schema.Struct({
   startTime: Schema.optional(Schema.String),
   endTime: Schema.optional(Schema.String),
   rootOnly: Schema.optional(Schema.Boolean),
+  whereClause: Schema.optional(Schema.String),
+  attributeKey: Schema.optional(Schema.String),
+  attributeValue: Schema.optional(Schema.String),
 })
 
 export type TracesSearchParams = Schema.Schema.Type<typeof tracesSearchSchema>
@@ -31,9 +39,27 @@ function TracesPage() {
   const search = Route.useSearch()
   const navigate = useNavigate({ from: Route.fullPath })
 
+  useEffect(() => {
+    const normalized = normalizeTracesSearchParams(search)
+    if (areTracesSearchParamsEqual(search, normalized)) {
+      return
+    }
+
+    navigate({
+      search: normalized,
+      replace: true,
+    })
+  }, [navigate, search])
+
   const handleTimeChange = ({ startTime, endTime }: { startTime?: string; endTime?: string }) => {
+    const normalized = normalizeTracesSearchParams({
+      ...search,
+      startTime,
+      endTime,
+    })
+
     navigate({
-      search: (prev) => ({ ...prev, startTime, endTime }),
+      search: normalized,
     })
   }
 
diff --git a/packages/domain/src/tinybird/endpoints.ts b/packages/domain/src/tinybird/endpoints.ts
index d97c7ea..5daaf01 100644
--- a/packages/domain/src/tinybird/endpoints.ts
+++ b/packages/domain/src/tinybird/endpoints.ts
@@ -26,6 +26,8 @@ export const listTraces = defineEndpoint("list_traces", {
     http_method: p.string().optional().describe("Filter by HTTP method"),
     http_status_code: p.string().optional().describe("Filter by HTTP status code"),
     deployment_env: p.string().optional().describe("Filter by deployment environment"),
+    attribute_filter_key: p.string().optional().describe("Filter where SpanAttributes[key] = value"),
+    attribute_filter_value: p.string().optional().describe("Value for attribute filter"),
     root_only: p.boolean().optional().describe("Filter to root traces only (spans with no parent)"),
   },
   nodes: [
@@ -55,6 +57,15 @@ export const listTraces = defineEndpoint("list_traces", {
           groupUniqArrayIf(SpanAttributes['http.method'], SpanAttributes['http.method'] != '') AS httpMethods,
           groupUniqArrayIf(SpanAttributes['http.status_code'], SpanAttributes['http.status_code'] != '') AS httpStatusCodes,
           groupUniqArrayIf(ResourceAttributes['deployment.environment'], ResourceAttributes['deployment.environment'] != '') AS deploymentEnvs,
+          {% if defined(attribute_filter_key) %}
+          max(if(
+            SpanAttributes[{{String(attribute_filter_key)}}] = {{String(attribute_filter_value, "")}},
+            1,
+            0
+          )) AS matchesAttributeFilter,
+          {% else %}
+          1 AS matchesAttributeFilter,
+          {% end %}
           countIf(ParentSpanId = '') AS rootSpanCount
         FROM traces
         WHERE TraceId != ''
@@ -109,6 +120,9 @@ export const listTraces = defineEndpoint("list_traces", {
         {% if defined(deployment_env) %}
           AND has(deploymentEnvs, {{String(deployment_env, "")}})
         {% end %}
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         ORDER BY startTime DESC
         LIMIT {{Int32(limit, 100)}}
         OFFSET {{Int32(offset, 0)}}
@@ -1069,6 +1083,8 @@ export const tracesFacets = defineEndpoint("traces_facets", {
     http_method: p.string().optional().describe("Filter by HTTP method"),
     http_status_code: p.string().optional().describe("Filter by HTTP status code"),
     deployment_env: p.string().optional().describe("Filter by deployment environment"),
+    attribute_filter_key: p.string().optional().describe("Filter where SpanAttributes[key] = value"),
+    attribute_filter_value: p.string().optional().describe("Value for attribute filter"),
   },
   nodes: [
     node({
@@ -1093,6 +1109,15 @@ export const tracesFacets = defineEndpoint("traces_facets", {
             OR (SpanAttributes['http.status_code'] != '' AND toUInt16OrZero(SpanAttributes['http.status_code']) >= 500),
             1, 0
           )) AS hasError,
+          {% if defined(attribute_filter_key) %}
+          max(if(
+            SpanAttributes[{{String(attribute_filter_key)}}] = {{String(attribute_filter_value, "")}},
+            1,
+            0
+          )) AS matchesAttributeFilter,
+          {% else %}
+          1 AS matchesAttributeFilter,
+          {% end %}
           (max(toUnixTimestamp64Nano(Timestamp) + Duration) - min(toUnixTimestamp64Nano(Timestamp))) / 1000000.0 AS durationMs
         FROM traces
         WHERE TraceId != ''
@@ -1116,6 +1141,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
         FROM trace_summaries
         ARRAY JOIN services AS service
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(span_name) %}
           AND rootSpanName = {{String(span_name)}}
         {% end %}
@@ -1151,6 +1179,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
           'spanName' AS facetType
         FROM trace_summaries
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(service) %}
           AND has(services, {{String(service)}})
         {% end %}
@@ -1187,6 +1218,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
         FROM trace_summaries
         ARRAY JOIN httpMethods AS method
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(service) %}
           AND has(services, {{String(service)}})
         {% end %}
@@ -1223,6 +1257,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
         FROM trace_summaries
         ARRAY JOIN httpStatusCodes AS status
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(service) %}
           AND has(services, {{String(service)}})
         {% end %}
@@ -1259,6 +1296,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
         FROM trace_summaries
         ARRAY JOIN deploymentEnvs AS env
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(service) %}
           AND has(services, {{String(service)}})
         {% end %}
@@ -1294,6 +1334,9 @@ export const tracesFacets = defineEndpoint("traces_facets", {
           'errorCount' AS facetType
         FROM trace_summaries
         WHERE 1=1
+        {% if defined(attribute_filter_key) %}
+          AND matchesAttributeFilter = 1
+        {% end %}
         {% if defined(service) %}
           AND has(services, {{String(service)}})
         {% end %}
@@ -1359,6 +1402,8 @@ export const tracesDurationStats = defineEndpoint("traces_duration_stats", {
     http_method: p.string().optional().describe("Filter by HTTP method"),
     http_status_code: p.string().optional().describe("Filter by HTTP status code"),
     deployment_env: p.string().optional().describe("Filter by deployment environment"),
+    attribute_filter_key: p.string().optional().describe("Filter where SpanAttributes[key] = value"),
+    attribute_filter_value: p.string().optional().describe("Value for attribute filter"),
   },
   nodes: [
     node({
@@ -1412,6 +1457,20 @@ export const tracesDurationStats = defineEndpoint("traces_duration_stats", {
           {% if defined(deployment_env) %}
             AND ResourceAttributes['deployment.environment'] = {{String(deployment_env)}}
           {% end %}
+          {% if defined(attribute_filter_key) %}
+            AND TraceId IN (
+              SELECT TraceId FROM traces WHERE TraceId != ''
+              AND OrgId = {{String(org_id, "")}}
+              AND SpanAttributes[{{String(attribute_filter_key)}}] = {{String(attribute_filter_value, "")}}
+              {% if defined(start_time) %}
+                AND Timestamp >= {{DateTime(start_time, "2023-01-01 00:00:00")}}
+              {% end %}
+              {% if defined(end_time) %}
+                AND Timestamp <= {{DateTime(end_time, "2099-12-31 23:59:59")}}
+              {% end %}
+              GROUP BY TraceId
+            )
+          {% end %}
           GROUP BY TraceId
         )
       `,

From 233dee058df3d40c943916409122d596c71fb3f2 Mon Sep 17 00:00:00 2001
From: Makisuo <minetoaster12@gmail.com>
Date: Fri, 20 Feb 2026 12:55:12 +0100
Subject: [PATCH 3/5] fix ui

---
 apps/landing/package.json                     |   3 +-
 apps/landing/src/components/Nav.astro         |  59 +---
 apps/landing/src/components/NavBar.tsx        | 101 +++++++
 apps/landing/src/styles/global.css            |   2 +
 .../errors/errors-filter-sidebar.tsx          |   3 -
 .../query-builder/where-clause-editor.tsx     |   5 +-
 .../traces/traces-filter-sidebar.tsx          | 180 ++----------
 .../lib/traces/advanced-filter-sync.test.ts   | 259 ++++++++++++------
 .../src/lib/traces/advanced-filter-sync.ts    | 162 +++--------
 apps/web/src/routes/traces/index.tsx          | 157 +++++++++--
 bun.lock                                      |   1 +
 11 files changed, 496 insertions(+), 436 deletions(-)
 create mode 100644 apps/landing/src/components/NavBar.tsx

diff --git a/apps/landing/package.json b/apps/landing/package.json
index 5664213..959988a 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -29,6 +29,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
   }
 }
\ No newline at end of file
diff --git a/apps/landing/src/components/Nav.astro b/apps/landing/src/components/Nav.astro
index 676e6e2..3ba3862 100644
--- a/apps/landing/src/components/Nav.astro
+++ b/apps/landing/src/components/Nav.astro
@@ -1,5 +1,5 @@
 ---
-
+import { NavBar } from "./NavBar"
 ---
 
 <!-- Announcement bar -->
@@ -8,60 +8,7 @@
 </div>
 
 <nav class="fixed top-[28px] left-0 right-0 z-50 border-b border-border bg-bg/95 backdrop-blur-md">
-    <div class="mx-auto max-w-6xl flex items-center justify-between px-6 h-14">
-        <!-- Logo -->
-        <a href="/" class="flex items-center gap-3">
-            <div class="w-7 h-7 bg-accent flex items-center justify-center">
-                <span class="text-accent-foreground text-sm font-bold">M</span>
-            </div>
-            <span class="text-fg font-medium text-sm">Maple</span>
-        </a>
-
-        <div class="flex items-center gap-6">
-            <!-- Features dropdown (desktop only) -->
-            <div class="relative group hidden sm:block">
-                <button class="text-fg-muted text-xs hover:text-fg transition-colors flex items-center gap-1">
-                    Features
-                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
-                </button>
-                <div class="invisible group-hover:visible group-focus-within:visible absolute top-full left-1/2 -translate-x-1/2 pt-2 z-50">
-                    <div class="bg-bg border border-border p-3 min-w-[320px] grid grid-cols-2 gap-1">
-                        <a href="/features/distributed-tracing" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Distributed Tracing</a>
-                        <a href="/features/metrics-dashboards" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Metrics & Dashboards</a>
-                        <a href="/features/log-management" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Log Management</a>
-                        <a href="/features/service-catalog" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Service Catalog & Map</a>
-                        <a href="/features/error-tracking" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Error Tracking</a>
-                        <a href="/features/ai-mcp-integration" class="px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">AI & MCP Integration</a>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Use Cases dropdown (desktop only) -->
-            <div class="relative group hidden sm:block">
-                <button class="text-fg-muted text-xs hover:text-fg transition-colors flex items-center gap-1">
-                    Use Cases
-                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
-                </button>
-                <div class="invisible group-hover:visible group-focus-within:visible absolute top-full left-1/2 -translate-x-1/2 pt-2 z-50">
-                    <div class="bg-bg border border-border p-3 min-w-[220px]">
-                        <a href="/use-cases/ecommerce-observability" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">E-Commerce Observability</a>
-                        <a href="/use-cases/microservices-debugging" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">Microservices Debugging</a>
-                        <a href="/use-cases/api-performance" class="block px-3 py-2 text-xs text-fg-muted hover:text-fg hover:bg-muted/20 transition-colors">API Performance</a>
-                    </div>
-                </div>
-            </div>
-
-            <!-- GitHub icon -->
-            <a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted hover:text-fg transition-colors hidden sm:block">
-                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-            </a>
-
-            <!-- CTA -->
-            <a href="/waitlist" class="bg-accent text-accent-foreground px-4 py-1.5 text-xs font-medium hover:opacity-90 transition-opacity">
-                Join waitlist
-            </a>
-        </div>
+    <div class="mx-auto max-w-6xl px-6 h-14">
+        <NavBar client:load />
     </div>
 </nav>
diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx
new file mode 100644
index 0000000..598208c
--- /dev/null
+++ b/apps/landing/src/components/NavBar.tsx
@@ -0,0 +1,101 @@
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+} from "@maple/ui/components/ui/navigation-menu"
+
+const featureLinks = [
+  { href: "/features/distributed-tracing", label: "Distributed Tracing" },
+  { href: "/features/metrics-dashboards", label: "Metrics & Dashboards" },
+  { href: "/features/log-management", label: "Log Management" },
+  { href: "/features/service-catalog", label: "Service Catalog & Map" },
+  { href: "/features/error-tracking", label: "Error Tracking" },
+  { href: "/features/ai-mcp-integration", label: "AI & MCP Integration" },
+]
+
+const useCaseLinks = [
+  { href: "/use-cases/ecommerce-observability", label: "E-Commerce Observability" },
+  { href: "/use-cases/microservices-debugging", label: "Microservices Debugging" },
+  { href: "/use-cases/api-performance", label: "API Performance" },
+]
+
+export function NavBar() {
+  return (
+    <div className="flex items-center justify-between h-full">
+      {/* Left group: Logo + Navigation */}
+      <div className="flex items-center gap-1">
+        <a href="/" className="flex items-center gap-3 mr-2">
+          <div className="w-7 h-7 bg-accent flex items-center justify-center">
+            <span className="text-accent-foreground text-sm font-bold">M</span>
+          </div>
+          <span className="text-fg font-medium text-sm">Maple</span>
+        </a>
+
+        <NavigationMenu className="hidden sm:flex">
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="bg-transparent hover:bg-muted/20 text-fg-muted hover:text-fg">
+                Features
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid grid-cols-2 gap-1 p-2">
+                  {featureLinks.map((link) => (
+                    <NavigationMenuLink
+                      key={link.href}
+                      href={link.href}
+                      className="whitespace-nowrap"
+                    >
+                      {link.label}
+                    </NavigationMenuLink>
+                  ))}
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="bg-transparent hover:bg-muted/20 text-fg-muted hover:text-fg">
+                Use Cases
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="p-2 min-w-[220px]">
+                  {useCaseLinks.map((link) => (
+                    <NavigationMenuLink
+                      key={link.href}
+                      href={link.href}
+                    >
+                      {link.label}
+                    </NavigationMenuLink>
+                  ))}
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Right group: GitHub + CTA */}
+      <div className="flex items-center gap-6">
+        <a
+          href="https://github.com/Makisuo/maple"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-fg-muted hover:text-fg transition-colors hidden sm:block"
+        >
+          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </a>
+
+        <a
+          href="/waitlist"
+          className="bg-accent text-accent-foreground px-4 py-1.5 text-xs font-medium hover:opacity-90 transition-opacity"
+        >
+          Join waitlist
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/landing/src/styles/global.css b/apps/landing/src/styles/global.css
index 1922fba..4cab53f 100644
--- a/apps/landing/src/styles/global.css
+++ b/apps/landing/src/styles/global.css
@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@source "../../../../packages/ui/src";
 @import "@fontsource-variable/geist-mono";
 
 :root {
diff --git a/apps/web/src/components/errors/errors-filter-sidebar.tsx b/apps/web/src/components/errors/errors-filter-sidebar.tsx
index ca398b2..7720a27 100644
--- a/apps/web/src/components/errors/errors-filter-sidebar.tsx
+++ b/apps/web/src/components/errors/errors-filter-sidebar.tsx
@@ -29,9 +29,6 @@ export function ErrorsFilterSidebar() {
       data: {
         startTime: effectiveStartTime,
         endTime: effectiveEndTime,
-        services: search.services,
-        deploymentEnvs: search.deploymentEnvs,
-        errorTypes: search.errorTypes,
         showSpam: search.showSpam,
       },
     }),
diff --git a/apps/web/src/components/query-builder/where-clause-editor.tsx b/apps/web/src/components/query-builder/where-clause-editor.tsx
index 8ba937a..81b69e4 100644
--- a/apps/web/src/components/query-builder/where-clause-editor.tsx
+++ b/apps/web/src/components/query-builder/where-clause-editor.tsx
@@ -19,6 +19,7 @@ interface WhereClauseEditorProps {
   onActiveAttributeKey?: (key: string | null) => void
   placeholder?: string
   rows?: number
+  maxSuggestions?: number
   className?: string
   textareaClassName?: string
   ariaLabel?: string
@@ -33,6 +34,7 @@ export function WhereClauseEditor({
   onActiveAttributeKey,
   placeholder,
   rows = 2,
+  maxSuggestions,
   className,
   textareaClassName,
   ariaLabel,
@@ -55,8 +57,9 @@ export function WhereClauseEditor({
         dataSource,
         values,
         scope: autocompleteScope,
+        maxSuggestions,
       }),
-    [autocompleteScope, cursor, dataSource, value, values],
+    [autocompleteScope, cursor, dataSource, maxSuggestions, value, values],
   )
 
   // Notify parent when user is editing a value for an attr.* key
diff --git a/apps/web/src/components/traces/traces-filter-sidebar.tsx b/apps/web/src/components/traces/traces-filter-sidebar.tsx
index 038b244..c72f153 100644
--- a/apps/web/src/components/traces/traces-filter-sidebar.tsx
+++ b/apps/web/src/components/traces/traces-filter-sidebar.tsx
@@ -1,9 +1,6 @@
-import * as React from "react"
-import { Result, useAtomValue } from "@effect-atom/atom-react"
+import { Result } from "@effect-atom/atom-react"
 import { useNavigate } from "@tanstack/react-router"
 
-import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
-import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
 import {
   FilterSection,
   SearchableFilterSection,
@@ -12,11 +9,7 @@ import {
 import { DurationRangeFilter } from "./duration-range-filter"
 import { Route } from "@/routes/traces"
 import { Separator } from "@maple/ui/components/ui/separator"
-import {
-  getSpanAttributeKeysResultAtom,
-  getSpanAttributeValuesResultAtom,
-  getTracesFacetsResultAtom,
-} from "@/lib/services/atoms/tinybird-query-atoms"
+import type { TracesFacetsResponse } from "@/api/tinybird/traces"
 import {
   FilterSidebarBody,
   FilterSidebarError,
@@ -24,177 +17,64 @@ import {
   FilterSidebarHeader,
   FilterSidebarLoading,
 } from "@/components/filters/filter-sidebar"
-import {
-  normalizeTracesSearchParams,
-  type TracesSearchLike,
-} from "@/lib/traces/advanced-filter-sync"
 
 function LoadingState() {
   return <FilterSidebarLoading sectionCount={5} sticky />
 }
 
-export function TracesFilterSidebar() {
+interface TracesFilterSidebarProps {
+  facetsResult: Result.Result<TracesFacetsResponse, unknown>
+}
+
+export function TracesFilterSidebar({ facetsResult }: TracesFilterSidebarProps) {
   const navigate = useNavigate({ from: Route.fullPath })
   const search = Route.useSearch()
-  const [activeAttributeKey, setActiveAttributeKey] = React.useState<string | null>(
-    null,
-  )
-  const { startTime: effectiveStartTime, endTime: effectiveEndTime } = useEffectiveTimeRange(
-    search.startTime,
-    search.endTime,
-  )
-
-  const spanAttributeKeysResult = useAtomValue(
-    getSpanAttributeKeysResultAtom({
-      data: {
-        startTime: effectiveStartTime,
-        endTime: effectiveEndTime,
-      },
-    }),
-  )
-
-  const spanAttributeValuesResult = useAtomValue(
-    getSpanAttributeValuesResultAtom({
-      data: {
-        startTime: effectiveStartTime,
-        endTime: effectiveEndTime,
-        attributeKey: activeAttributeKey ?? "",
-      },
-    }),
-  )
-
-  const facetsResult = useAtomValue(
-    getTracesFacetsResultAtom({
-      data: {
-        startTime: effectiveStartTime,
-        endTime: effectiveEndTime,
-        service: search.services?.[0],
-        spanName: search.spanNames?.[0],
-        hasError: search.hasError,
-        minDurationMs: search.minDurationMs,
-        maxDurationMs: search.maxDurationMs,
-        httpMethod: search.httpMethods?.[0],
-        httpStatusCode: search.httpStatusCodes?.[0],
-        deploymentEnv: search.deploymentEnvs?.[0],
-        attributeKey: search.attributeKey,
-        attributeValue: search.attributeValue,
-      },
-    }),
-  )
-
-  const navigateWithNormalizedSearch = React.useCallback(
-    (next: TracesSearchLike) => {
-      navigate({
-        search: normalizeTracesSearchParams(next),
-      })
-    },
-    [navigate],
-  )
 
   const updateFilter = <K extends keyof typeof search>(
     key: K,
     value: (typeof search)[K],
   ) => {
-    const normalizedValue =
-      value === undefined || (Array.isArray(value) && value.length === 0)
-        ? undefined
-        : value
-
-    navigateWithNormalizedSearch({
-      ...search,
-      [key]: normalizedValue,
-      whereClause: undefined,
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        [key]:
+          value === undefined || (Array.isArray(value) && value.length === 0)
+            ? undefined
+            : value,
+      }),
     })
   }
 
   const clearAllFilters = () => {
-    setActiveAttributeKey(null)
-    navigateWithNormalizedSearch({
-      startTime: search.startTime,
-      endTime: search.endTime,
+    navigate({
+      search: {
+        startTime: search.startTime,
+        endTime: search.endTime,
+      },
     })
   }
 
-  const hasActiveFilters = Boolean(search.whereClause?.trim())
-
-  const attributeKeys = React.useMemo(
-    () =>
-      Result.builder(spanAttributeKeysResult)
-        .onSuccess((response) => response.data.map((row) => row.attributeKey))
-        .orElse(() => []),
-    [spanAttributeKeysResult],
-  )
-
-  const attributeValues = React.useMemo(
-    () =>
-      activeAttributeKey
-        ? Result.builder(spanAttributeValuesResult)
-            .onSuccess((response) => response.data.map((row) => row.attributeValue))
-            .orElse(() => [])
-        : [],
-    [activeAttributeKey, spanAttributeValuesResult],
-  )
+  const hasActiveFilters =
+    (search.services?.length ?? 0) > 0 ||
+    (search.spanNames?.length ?? 0) > 0 ||
+    (search.deploymentEnvs?.length ?? 0) > 0 ||
+    (search.httpMethods?.length ?? 0) > 0 ||
+    (search.httpStatusCodes?.length ?? 0) > 0 ||
+    search.hasError !== undefined ||
+    search.minDurationMs !== undefined ||
+    search.maxDurationMs !== undefined ||
+    search.attributeKey !== undefined
 
   return Result.builder(facetsResult)
     .onInitial(() => <LoadingState />)
     .onError(() => <FilterSidebarError message="Unable to load filters" sticky />)
     .onSuccess((facetsResponse, result) => {
       const facets = facetsResponse.data
-      const toNames = (items: Array<{ name: string }>): string[] => {
-        const seen = new Set<string>()
-        const values: string[] = []
-
-        for (const item of items) {
-          const next = item.name.trim()
-          if (!next || seen.has(next)) {
-            continue
-          }
-
-          seen.add(next)
-          values.push(next)
-        }
-
-        return values
-      }
-
-      const autocompleteValues = {
-        services: toNames(facets.services ?? []),
-        spanNames: toNames(facets.spanNames ?? []),
-        environments: toNames(facets.deploymentEnvs ?? []),
-        httpMethods: toNames(facets.httpMethods ?? []),
-        httpStatusCodes: toNames(facets.httpStatusCodes ?? []),
-        attributeKeys,
-        attributeValues,
-      }
 
       return (
         <FilterSidebarFrame sticky waiting={result.waiting}>
           <FilterSidebarHeader canClear={hasActiveFilters} onClear={clearAllFilters} />
           <FilterSidebarBody>
-            <div className="space-y-1">
-              <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
-                Advanced Filter
-              </p>
-              <WhereClauseEditor
-                rows={2}
-                value={search.whereClause ?? ""}
-                dataSource="traces"
-                autocompleteScope="trace_search"
-                values={autocompleteValues}
-                onActiveAttributeKey={setActiveAttributeKey}
-                onChange={(nextWhereClause) =>
-                  navigateWithNormalizedSearch({
-                    ...search,
-                    whereClause: nextWhereClause,
-                  })
-                }
-                placeholder='service.name = "checkout" AND attr.http.route = "/orders/:id"'
-                ariaLabel="Advanced traces where clause"
-              />
-            </div>
-
-            <Separator className="my-2" />
-
             <DurationRangeFilter
               minValue={search.minDurationMs}
               maxValue={search.maxDurationMs}
diff --git a/apps/web/src/lib/traces/advanced-filter-sync.test.ts b/apps/web/src/lib/traces/advanced-filter-sync.test.ts
index e31b9ca..7ce15d1 100644
--- a/apps/web/src/lib/traces/advanced-filter-sync.test.ts
+++ b/apps/web/src/lib/traces/advanced-filter-sync.test.ts
@@ -1,111 +1,206 @@
 import { describe, expect, it } from "vitest"
 
 import {
-  areTracesSearchParamsEqual,
-  normalizeTracesSearchParams,
+  applyWhereClause,
+  parseWhereClause,
+  toWhereClause,
 } from "@/lib/traces/advanced-filter-sync"
 
-describe("advanced-filter-sync", () => {
-  it("normalizes legacy filters into whereClause", () => {
-    const normalized = normalizeTracesSearchParams({
-      services: ["checkout", "billing"],
-      spanNames: ["GET /orders"],
-      deploymentEnvs: ["production"],
-      httpMethods: ["GET"],
-      httpStatusCodes: ["500"],
+describe("parseWhereClause", () => {
+  it("parses service.name", () => {
+    const { filters } = parseWhereClause('service.name = "checkout"')
+    expect(filters.service).toBe("checkout")
+  })
+
+  it("parses service alias", () => {
+    const { filters } = parseWhereClause('service = "checkout"')
+    expect(filters.service).toBe("checkout")
+  })
+
+  it("parses span.name", () => {
+    const { filters } = parseWhereClause('span.name = "GET /orders"')
+    expect(filters.spanName).toBe("GET /orders")
+  })
+
+  it("parses deployment.environment and aliases", () => {
+    expect(parseWhereClause('deployment.environment = "production"').filters.deploymentEnv).toBe("production")
+    expect(parseWhereClause('environment = "staging"').filters.deploymentEnv).toBe("staging")
+    expect(parseWhereClause('env = "dev"').filters.deploymentEnv).toBe("dev")
+  })
+
+  it("parses http.method and http.status_code", () => {
+    const { filters } = parseWhereClause('http.method = "POST" AND http.status_code = "404"')
+    expect(filters.httpMethod).toBe("POST")
+    expect(filters.httpStatusCode).toBe("404")
+  })
+
+  it("parses has_error = true", () => {
+    const { filters } = parseWhereClause("has_error = true")
+    expect(filters.hasError).toBe(true)
+  })
+
+  it("drops has_error = false", () => {
+    const { filters } = parseWhereClause("has_error = false")
+    expect(filters.hasError).toBeUndefined()
+  })
+
+  it("parses root_only = false", () => {
+    const { filters } = parseWhereClause("root_only = false")
+    expect(filters.rootOnly).toBe(false)
+  })
+
+  it("drops root_only = true", () => {
+    const { filters } = parseWhereClause("root_only = true")
+    expect(filters.rootOnly).toBeUndefined()
+  })
+
+  it("parses duration bounds", () => {
+    const { filters } = parseWhereClause("min_duration_ms = 25 AND max_duration_ms = 1500")
+    expect(filters.minDurationMs).toBe(25)
+    expect(filters.maxDurationMs).toBe(1500)
+  })
+
+  it("parses attr.* keys", () => {
+    const { filters } = parseWhereClause('attr.http.route = "/orders/:id"')
+    expect(filters.attributeKey).toBe("http.route")
+    expect(filters.attributeValue).toBe("/orders/:id")
+  })
+
+  it("marks incomplete clauses for unclosed quotes", () => {
+    const result = parseWhereClause('service.name = "check')
+    expect(result.hasIncompleteClauses).toBe(true)
+  })
+
+  it("marks invalid number as incomplete", () => {
+    const result = parseWhereClause("min_duration_ms = nope")
+    expect(result.hasIncompleteClauses).toBe(true)
+    expect(result.filters.minDurationMs).toBeUndefined()
+  })
+
+  it("returns empty for empty input", () => {
+    const result = parseWhereClause("")
+    expect(result.filters).toEqual({})
+    expect(result.hasIncompleteClauses).toBe(false)
+  })
+
+  it("parses a full combined clause", () => {
+    const { filters } = parseWhereClause(
+      'service = "checkout" AND span = "GET /orders" AND env = "production" AND http.method = "POST" AND http.status_code = "404" AND has_error = true AND root_only = false AND min_duration_ms = 12.5 AND max_duration_ms = 88 AND attr.http.route = "/api/orders"',
+    )
+
+    expect(filters.service).toBe("checkout")
+    expect(filters.spanName).toBe("GET /orders")
+    expect(filters.deploymentEnv).toBe("production")
+    expect(filters.httpMethod).toBe("POST")
+    expect(filters.httpStatusCode).toBe("404")
+    expect(filters.hasError).toBe(true)
+    expect(filters.rootOnly).toBe(false)
+    expect(filters.minDurationMs).toBe(12.5)
+    expect(filters.maxDurationMs).toBe(88)
+    expect(filters.attributeKey).toBe("http.route")
+    expect(filters.attributeValue).toBe("/api/orders")
+  })
+})
+
+describe("toWhereClause", () => {
+  it("builds a where clause from filters", () => {
+    const clause = toWhereClause({
+      service: "checkout",
+      spanName: "GET /orders",
       hasError: true,
-      rootOnly: false,
       minDurationMs: 25,
-      maxDurationMs: 1500,
-      attributeKey: "http.route",
-      attributeValue: "/orders/:id",
-      startTime: "2026-02-01 00:00:00",
-      endTime: "2026-02-01 01:00:00",
     })
-
-    expect(normalized.services).toEqual(["checkout"])
-    expect(normalized.whereClause).toBe(
-      'service.name = "checkout" AND span.name = "GET /orders" AND deployment.environment = "production" AND http.method = "GET" AND http.status_code = "500" AND has_error = true AND root_only = false AND min_duration_ms = 25 AND max_duration_ms = 1500 AND attr.http.route = "/orders/:id"',
+    expect(clause).toBe(
+      'service.name = "checkout" AND span.name = "GET /orders" AND has_error = true AND min_duration_ms = 25',
     )
   })
 
-  it("parses whereClause and populates legacy fields", () => {
-    const normalized = normalizeTracesSearchParams({
-      whereClause:
-        'service = "checkout" AND span = "GET /orders" AND env = "production" AND http.method = "POST" AND http.status_code = "404" AND has_error = true AND root_only = false AND min_duration_ms = 12.5 AND max_duration_ms = 88 AND attr.http.route = "/api/orders"',
-    })
+  it("returns undefined for empty filters", () => {
+    expect(toWhereClause({})).toBeUndefined()
+  })
 
-    expect(normalized.services).toEqual(["checkout"])
-    expect(normalized.spanNames).toEqual(["GET /orders"])
-    expect(normalized.deploymentEnvs).toEqual(["production"])
-    expect(normalized.httpMethods).toEqual(["POST"])
-    expect(normalized.httpStatusCodes).toEqual(["404"])
-    expect(normalized.hasError).toBe(true)
-    expect(normalized.rootOnly).toBe(false)
-    expect(normalized.minDurationMs).toBe(12.5)
-    expect(normalized.maxDurationMs).toBe(88)
-    expect(normalized.attributeKey).toBe("http.route")
-    expect(normalized.attributeValue).toBe("/api/orders")
-  })
-
-  it("drops unsupported and non-functional clauses", () => {
-    const normalized = normalizeTracesSearchParams({
-      whereClause:
-        'foo = "bar" AND has_error = false AND root_only = true AND min_duration_ms = nope AND attr.http.route = "/ok"',
+  it("includes attr.* clauses", () => {
+    const clause = toWhereClause({
+      attributeKey: "http.route",
+      attributeValue: "/orders/:id",
     })
+    expect(clause).toBe('attr.http.route = "/orders/:id"')
+  })
+})
 
-    expect(normalized.whereClause).toBe('attr.http.route = "/ok"')
-    expect(normalized.hasError).toBeUndefined()
-    expect(normalized.rootOnly).toBeUndefined()
-    expect(normalized.minDurationMs).toBeUndefined()
-    expect(normalized.attributeKey).toBe("http.route")
+describe("applyWhereClause", () => {
+  it("merges parsed values into search params", () => {
+    const result = applyWhereClause(
+      { startTime: "2026-02-01 00:00:00", endTime: "2026-02-01 01:00:00" },
+      'service.name = "checkout" AND has_error = true',
+    )
+
+    expect(result.whereClause).toBe('service.name = "checkout" AND has_error = true')
+    expect(result.services).toEqual(["checkout"])
+    expect(result.hasError).toBe(true)
+    expect(result.startTime).toBe("2026-02-01 00:00:00")
+    expect(result.endTime).toBe("2026-02-01 01:00:00")
   })
 
-  it("uses whereClause as precedence when both legacy and whereClause exist", () => {
-    const normalized = normalizeTracesSearchParams({
-      services: ["legacy"],
-      whereClause: 'service.name = "from-where" AND has_error = true',
-    })
+  it("preserves existing search params when clause doesn't override them", () => {
+    const result = applyWhereClause(
+      {
+        services: ["billing"],
+        hasError: true,
+        startTime: "2026-02-01 00:00:00",
+      },
+      'span.name = "POST /pay"',
+    )
 
-    expect(normalized.services).toEqual(["from-where"])
-    expect(normalized.hasError).toBe(true)
-    expect(normalized.whereClause).toBe(
-      'service.name = "from-where" AND has_error = true',
+    expect(result.spanNames).toEqual(["POST /pay"])
+    expect(result.services).toEqual(["billing"])
+    expect(result.hasError).toBe(true)
+  })
+
+  it("overrides search params when clause includes them", () => {
+    const result = applyWhereClause(
+      { services: ["billing"] },
+      'service.name = "checkout"',
     )
+
+    expect(result.services).toEqual(["checkout"])
   })
 
-  it("normalizes empty results to undefined whereClause", () => {
-    const normalized = normalizeTracesSearchParams({
-      whereClause: 'has_error = false AND root_only = true',
-    })
+  it("clears all filter params when clause is empty", () => {
+    const result = applyWhereClause(
+      {
+        services: ["checkout"],
+        hasError: true,
+        minDurationMs: 100,
+        startTime: "2026-02-01 00:00:00",
+      },
+      "",
+    )
 
-    expect(normalized.whereClause).toBeUndefined()
-    expect(normalized.services).toBeUndefined()
-    expect(normalized.attributeKey).toBeUndefined()
+    expect(result.whereClause).toBeUndefined()
+    expect(result.services).toBeUndefined()
+    expect(result.hasError).toBeUndefined()
+    expect(result.minDurationMs).toBeUndefined()
+    expect(result.startTime).toBe("2026-02-01 00:00:00")
   })
 
-  it("preserves incomplete whereClause text while editing", () => {
-    const normalized = normalizeTracesSearchParams({
-      whereClause: 'service.name = "check',
-      services: ["legacy"],
-    })
+  it("handles incomplete clauses gracefully", () => {
+    const result = applyWhereClause(
+      { services: ["billing"] },
+      'service.name = "check',
+    )
 
-    expect(normalized.whereClause).toBe('service.name = "check')
-    expect(normalized.services).toBeUndefined()
+    expect(result.whereClause).toBe('service.name = "check')
+    expect(result.services).toEqual(["billing"])
   })
 
-  it("compares search params deterministically", () => {
-    const left = normalizeTracesSearchParams({
-      services: ["checkout"],
-      startTime: "2026-02-01 00:00:00",
-      endTime: "2026-02-01 01:00:00",
-    })
-    const right = normalizeTracesSearchParams({
-      whereClause: 'service = "checkout"',
-      startTime: "2026-02-01 00:00:00",
-      endTime: "2026-02-01 01:00:00",
-    })
+  it("handles whitespace-only clause as empty", () => {
+    const result = applyWhereClause(
+      { services: ["checkout"] },
+      "   ",
+    )
 
-    expect(areTracesSearchParamsEqual(left, right)).toBe(true)
+    expect(result.whereClause).toBeUndefined()
+    expect(result.services).toBeUndefined()
   })
 })
diff --git a/apps/web/src/lib/traces/advanced-filter-sync.ts b/apps/web/src/lib/traces/advanced-filter-sync.ts
index 4e95a8f..788e62c 100644
--- a/apps/web/src/lib/traces/advanced-filter-sync.ts
+++ b/apps/web/src/lib/traces/advanced-filter-sync.ts
@@ -15,7 +15,7 @@ export interface TracesSearchLike {
   attributeValue?: string
 }
 
-interface ParsedWhereClauseFilters {
+export interface ParsedWhereClauseFilters {
   service?: string
   spanName?: string
   deploymentEnv?: string
@@ -34,31 +34,6 @@ const FALSE_VALUES = new Set(["0", "false", "no", "n"])
 
 const CLAUSE_RE = /^([a-zA-Z0-9_.-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s]+))$/
 
-function firstNonEmpty(values?: string[]): string | undefined {
-  if (!values || values.length === 0) {
-    return undefined
-  }
-
-  const first = values[0]?.trim()
-  return first ? first : undefined
-}
-
-function normalizeBoolean(value: unknown): boolean | undefined {
-  if (typeof value !== "boolean") {
-    return undefined
-  }
-
-  return value
-}
-
-function normalizeNumber(value: unknown): number | undefined {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return undefined
-  }
-
-  return value
-}
-
 function parseBoolean(value: string): boolean | null {
   const normalized = value.trim().toLowerCase()
   if (TRUE_VALUES.has(normalized)) {
@@ -89,11 +64,7 @@ function quoteValue(value: string): string {
   return `"${value.replace(/\\/g, "\\\\").replace(/\"/g, '\\\"')}"`
 }
 
-function hasAnyFilter(filters: ParsedWhereClauseFilters): boolean {
-  return Object.values(filters).some((value) => value !== undefined)
-}
-
-function parseWhereClause(whereClause: string | undefined): {
+export function parseWhereClause(whereClause: string | undefined): {
   filters: ParsedWhereClauseFilters
   hasIncompleteClauses: boolean
 } {
@@ -221,7 +192,7 @@ function parseWhereClause(whereClause: string | undefined): {
   }
 }
 
-function toWhereClause(filters: ParsedWhereClauseFilters): string | undefined {
+export function toWhereClause(filters: ParsedWhereClauseFilters): string | undefined {
   const clauses: string[] = []
 
   if (filters.service) {
@@ -273,103 +244,50 @@ function toWhereClause(filters: ParsedWhereClauseFilters): string | undefined {
   return clauses.join(" AND ")
 }
 
-function normalizeLegacyFilters(search: TracesSearchLike): ParsedWhereClauseFilters {
-  const service = firstNonEmpty(search.services)
-  const spanName = firstNonEmpty(search.spanNames)
-  const deploymentEnv = firstNonEmpty(search.deploymentEnvs)
-  const httpMethod = firstNonEmpty(search.httpMethods)
-  const httpStatusCode = firstNonEmpty(search.httpStatusCodes)
-  const hasError = normalizeBoolean(search.hasError) === true ? true : undefined
-  const rootOnly = normalizeBoolean(search.rootOnly) === false ? false : undefined
-  const minDurationMs = normalizeNumber(search.minDurationMs)
-  const maxDurationMs = normalizeNumber(search.maxDurationMs)
-  const attributeKey = search.attributeKey?.trim()
-  const attributeValue = search.attributeValue?.trim()
-
-  return {
-    service,
-    spanName,
-    deploymentEnv,
-    httpMethod,
-    httpStatusCode,
-    hasError,
-    rootOnly,
-    minDurationMs,
-    maxDurationMs,
-    attributeKey: attributeKey && attributeValue ? attributeKey : undefined,
-    attributeValue: attributeKey && attributeValue ? attributeValue : undefined,
-  }
-}
-
-function normalizeWithFilters(
+/**
+ * One-way transform: parses a where clause string and merges the parsed
+ * filter values into the search params. Does NOT reverse-sync checkboxes
+ * back into whereClause text.
+ */
+export function applyWhereClause(
   search: TracesSearchLike,
-  filters: ParsedWhereClauseFilters,
+  whereClause: string,
 ): TracesSearchLike {
-  const whereClause = toWhereClause(filters)
-
-  return {
-    startTime: search.startTime,
-    endTime: search.endTime,
-    services: filters.service ? [filters.service] : undefined,
-    spanNames: filters.spanName ? [filters.spanName] : undefined,
-    hasError: filters.hasError,
-    minDurationMs: filters.minDurationMs,
-    maxDurationMs: filters.maxDurationMs,
-    httpMethods: filters.httpMethod ? [filters.httpMethod] : undefined,
-    httpStatusCodes: filters.httpStatusCode ? [filters.httpStatusCode] : undefined,
-    deploymentEnvs: filters.deploymentEnv ? [filters.deploymentEnv] : undefined,
-    rootOnly: filters.rootOnly,
-    whereClause,
-    attributeKey: filters.attributeKey,
-    attributeValue: filters.attributeValue,
-  }
-}
-
-export function normalizeTracesSearchParams(search: TracesSearchLike): TracesSearchLike {
-  const normalizedWhereClause = search.whereClause?.trim()
+  const trimmed = whereClause.trim()
 
-  if (normalizedWhereClause) {
-    const parsed = parseWhereClause(normalizedWhereClause)
-    if (hasAnyFilter(parsed.filters)) {
-      return normalizeWithFilters(search, parsed.filters)
-    }
-
-    if (parsed.hasIncompleteClauses) {
-      return {
-        startTime: search.startTime,
-        endTime: search.endTime,
-        whereClause: normalizedWhereClause,
-      }
+  if (!trimmed) {
+    return {
+      ...search,
+      whereClause: undefined,
+      services: undefined,
+      spanNames: undefined,
+      hasError: undefined,
+      minDurationMs: undefined,
+      maxDurationMs: undefined,
+      httpMethods: undefined,
+      httpStatusCodes: undefined,
+      deploymentEnvs: undefined,
+      rootOnly: undefined,
+      attributeKey: undefined,
+      attributeValue: undefined,
     }
-
-    return normalizeWithFilters(search, {})
   }
 
-  return normalizeWithFilters(search, normalizeLegacyFilters(search))
-}
+  const { filters } = parseWhereClause(trimmed)
 
-function sortedObject(input: TracesSearchLike): Record<string, unknown> {
   return {
-    attributeKey: input.attributeKey,
-    attributeValue: input.attributeValue,
-    deploymentEnvs: input.deploymentEnvs,
-    endTime: input.endTime,
-    hasError: input.hasError,
-    httpMethods: input.httpMethods,
-    httpStatusCodes: input.httpStatusCodes,
-    maxDurationMs: input.maxDurationMs,
-    minDurationMs: input.minDurationMs,
-    rootOnly: input.rootOnly,
-    services: input.services,
-    spanNames: input.spanNames,
-    startTime: input.startTime,
-    whereClause: input.whereClause,
+    ...search,
+    whereClause: trimmed,
+    services: filters.service ? [filters.service] : search.services,
+    spanNames: filters.spanName ? [filters.spanName] : search.spanNames,
+    hasError: filters.hasError ?? search.hasError,
+    minDurationMs: filters.minDurationMs ?? search.minDurationMs,
+    maxDurationMs: filters.maxDurationMs ?? search.maxDurationMs,
+    httpMethods: filters.httpMethod ? [filters.httpMethod] : search.httpMethods,
+    httpStatusCodes: filters.httpStatusCode ? [filters.httpStatusCode] : search.httpStatusCodes,
+    deploymentEnvs: filters.deploymentEnv ? [filters.deploymentEnv] : search.deploymentEnvs,
+    rootOnly: filters.rootOnly ?? search.rootOnly,
+    attributeKey: filters.attributeKey ?? search.attributeKey,
+    attributeValue: filters.attributeValue ?? search.attributeValue,
   }
 }
-
-export function areTracesSearchParamsEqual(
-  left: TracesSearchLike,
-  right: TracesSearchLike,
-): boolean {
-  return JSON.stringify(sortedObject(left)) === JSON.stringify(sortedObject(right))
-}
diff --git a/apps/web/src/routes/traces/index.tsx b/apps/web/src/routes/traces/index.tsx
index 40630da..8158c61 100644
--- a/apps/web/src/routes/traces/index.tsx
+++ b/apps/web/src/routes/traces/index.tsx
@@ -1,15 +1,21 @@
+import * as React from "react"
+import { Result, useAtomValue } from "@effect-atom/atom-react"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { Schema } from "effect"
-import { useEffect } from "react"
 
 import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import { TracesTable } from "@/components/traces/traces-table"
 import { TracesFilterSidebar } from "@/components/traces/traces-filter-sidebar"
 import { TimeRangePicker } from "@/components/time-range-picker"
+import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
+import { MagnifierIcon } from "@/components/icons"
+import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
+import { applyWhereClause } from "@/lib/traces/advanced-filter-sync"
 import {
-  areTracesSearchParamsEqual,
-  normalizeTracesSearchParams,
-} from "@/lib/traces/advanced-filter-sync"
+  getTracesFacetsResultAtom,
+  getSpanAttributeKeysResultAtom,
+  getSpanAttributeValuesResultAtom,
+} from "@/lib/services/atoms/tinybird-query-atoms"
 
 const tracesSearchSchema = Schema.Struct({
   services: Schema.optional(Schema.mutable(Schema.Array(Schema.String))),
@@ -38,28 +44,115 @@ export const Route = createFileRoute("/traces/")({
 function TracesPage() {
   const search = Route.useSearch()
   const navigate = useNavigate({ from: Route.fullPath })
+  const [activeAttributeKey, setActiveAttributeKey] = React.useState<string | null>(null)
+  const [whereClauseText, setWhereClauseText] = React.useState(search.whereClause ?? "")
 
-  useEffect(() => {
-    const normalized = normalizeTracesSearchParams(search)
-    if (areTracesSearchParamsEqual(search, normalized)) {
-      return
+  React.useEffect(() => {
+    setWhereClauseText(search.whereClause ?? "")
+  }, [search.whereClause])
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      const trimmed = whereClauseText.trim() || undefined
+      if (trimmed !== (search.whereClause ?? undefined)) {
+        navigate({
+          search: (prev) => applyWhereClause(prev, whereClauseText),
+        })
+      }
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [whereClauseText, search.whereClause, navigate])
+
+  const { startTime: effectiveStartTime, endTime: effectiveEndTime } =
+    useEffectiveTimeRange(search.startTime, search.endTime)
+
+  const facetsResult = useAtomValue(
+    getTracesFacetsResultAtom({
+      data: {
+        startTime: effectiveStartTime,
+        endTime: effectiveEndTime,
+      },
+    }),
+  )
+
+  const spanAttributeKeysResult = useAtomValue(
+    getSpanAttributeKeysResultAtom({
+      data: {
+        startTime: effectiveStartTime,
+        endTime: effectiveEndTime,
+      },
+    }),
+  )
+
+  const spanAttributeValuesResult = useAtomValue(
+    getSpanAttributeValuesResultAtom({
+      data: {
+        startTime: effectiveStartTime,
+        endTime: effectiveEndTime,
+        attributeKey: activeAttributeKey ?? "",
+      },
+    }),
+  )
+
+  const attributeKeys = React.useMemo(
+    () =>
+      Result.builder(spanAttributeKeysResult)
+        .onSuccess((response) => response.data.map((row) => row.attributeKey))
+        .orElse(() => []),
+    [spanAttributeKeysResult],
+  )
+
+  const attributeValues = React.useMemo(
+    () =>
+      activeAttributeKey
+        ? Result.builder(spanAttributeValuesResult)
+            .onSuccess((response) => response.data.map((row) => row.attributeValue))
+            .orElse(() => [])
+        : [],
+    [activeAttributeKey, spanAttributeValuesResult],
+  )
+
+  const autocompleteValues = React.useMemo(() => {
+    const toNames = (items: Array<{ name: string }>): string[] => {
+      const seen = new Set<string>()
+      const values: string[] = []
+      for (const item of items) {
+        const next = item.name.trim()
+        if (!next || seen.has(next)) continue
+        seen.add(next)
+        values.push(next)
+      }
+      return values
     }
 
-    navigate({
-      search: normalized,
-      replace: true,
-    })
-  }, [navigate, search])
+    return Result.builder(facetsResult)
+      .onSuccess((response) => ({
+        services: toNames(response.data.services ?? []),
+        spanNames: toNames(response.data.spanNames ?? []),
+        environments: toNames(response.data.deploymentEnvs ?? []),
+        httpMethods: toNames(response.data.httpMethods ?? []),
+        httpStatusCodes: toNames(response.data.httpStatusCodes ?? []),
+        attributeKeys,
+        attributeValues,
+      }))
+      .orElse(() => ({
+        services: [] as string[],
+        spanNames: [] as string[],
+        environments: [] as string[],
+        httpMethods: [] as string[],
+        httpStatusCodes: [] as string[],
+        attributeKeys,
+        attributeValues,
+      }))
+  }, [facetsResult, attributeKeys, attributeValues])
 
   const handleTimeChange = ({ startTime, endTime }: { startTime?: string; endTime?: string }) => {
-    const normalized = normalizeTracesSearchParams({
-      ...search,
-      startTime,
-      endTime,
-    })
-
     navigate({
-      search: normalized,
+      search: (prev) => ({
+        ...prev,
+        startTime,
+        endTime,
+      }),
     })
   }
 
@@ -76,11 +169,33 @@ function TracesPage() {
         />
       }
     >
+      <div className="mb-4">
+        <div className="flex items-start gap-2 rounded-lg border border-border/60 bg-muted/30 px-3 py-2">
+          <div className="flex items-center gap-1.5 pt-1.5 shrink-0">
+            <MagnifierIcon className="size-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium text-muted-foreground">Filter</span>
+          </div>
+          <WhereClauseEditor
+            className="flex-1 min-w-0"
+            rows={1}
+            value={whereClauseText}
+            dataSource="traces"
+            autocompleteScope="trace_search"
+            maxSuggestions={20}
+            values={autocompleteValues}
+            onActiveAttributeKey={setActiveAttributeKey}
+            onChange={setWhereClauseText}
+            placeholder='service.name = "checkout" AND attr.http.route = "/orders/:id"'
+            textareaClassName="border-0 bg-transparent shadow-none focus-visible:ring-0 resize-none px-0 py-1 text-xs min-h-0"
+            ariaLabel="Advanced traces where clause"
+          />
+        </div>
+      </div>
       <div className="flex gap-4">
         <div className="flex-1 min-w-0">
           <TracesTable filters={search} />
         </div>
-        <TracesFilterSidebar />
+        <TracesFilterSidebar facetsResult={facetsResult} />
       </div>
     </DashboardLayout>
   )
diff --git a/bun.lock b/bun.lock
index 989a3bf..86c724d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -64,6 +64,7 @@
         "recharts": "2.15.4",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
+        "tw-animate-css": "^1.4.0",
       },
     },
     "apps/web": {

From f979a604ba169d3c106c7f80b7148fda26bbfd4b Mon Sep 17 00:00:00 2001
From: Makisuo <minetoaster12@gmail.com>
Date: Fri, 20 Feb 2026 13:01:47 +0100
Subject: [PATCH 4/5] fix

---
 .../components/query-builder/where-clause-editor.tsx  | 11 ++++++++++-
 apps/web/src/routes/traces/index.tsx                  |  8 ++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/query-builder/where-clause-editor.tsx b/apps/web/src/components/query-builder/where-clause-editor.tsx
index 81b69e4..c268d88 100644
--- a/apps/web/src/components/query-builder/where-clause-editor.tsx
+++ b/apps/web/src/components/query-builder/where-clause-editor.tsx
@@ -150,6 +150,15 @@ export function WhereClauseEditor({
         onSelect={(event) => syncCursor(event.currentTarget)}
         onKeyUp={(event) => syncCursor(event.currentTarget)}
         onKeyDown={(event) => {
+          // Always prevent Enter from inserting newlines (where clauses are single-line)
+          if (event.key === "Enter") {
+            event.preventDefault()
+            if (isOpen && suggestions.length > 0) {
+              applySuggestion(activeIndex)
+            }
+            return
+          }
+
           if (!isOpen || suggestions.length === 0) {
             return
           }
@@ -168,7 +177,7 @@ export function WhereClauseEditor({
             return
           }
 
-          if (event.key === "Enter" || event.key === "Tab") {
+          if (event.key === "Tab") {
             event.preventDefault()
             applySuggestion(activeIndex)
             return
diff --git a/apps/web/src/routes/traces/index.tsx b/apps/web/src/routes/traces/index.tsx
index 8158c61..e58bfde 100644
--- a/apps/web/src/routes/traces/index.tsx
+++ b/apps/web/src/routes/traces/index.tsx
@@ -46,15 +46,23 @@ function TracesPage() {
   const navigate = useNavigate({ from: Route.fullPath })
   const [activeAttributeKey, setActiveAttributeKey] = React.useState<string | null>(null)
   const [whereClauseText, setWhereClauseText] = React.useState(search.whereClause ?? "")
+  const isLocalUpdate = React.useRef(false)
 
+  // URL → local (external changes only: back/forward, sidebar clear, etc.)
   React.useEffect(() => {
+    if (isLocalUpdate.current) {
+      isLocalUpdate.current = false
+      return
+    }
     setWhereClauseText(search.whereClause ?? "")
   }, [search.whereClause])
 
+  // Local → URL (debounced 300ms)
   React.useEffect(() => {
     const timer = setTimeout(() => {
       const trimmed = whereClauseText.trim() || undefined
       if (trimmed !== (search.whereClause ?? undefined)) {
+        isLocalUpdate.current = true
         navigate({
           search: (prev) => applyWhereClause(prev, whereClauseText),
         })

From a4dcc7068791492ffdcc9a85dc2de6a7bb786964 Mon Sep 17 00:00:00 2001
From: Makisuo <minetoaster12@gmail.com>
Date: Fri, 20 Feb 2026 13:27:52 +0100
Subject: [PATCH 5/5] fix

---
 .../traces/advanced-filter-dialog.tsx         | 135 ++++++++++++++++++
 apps/web/src/routes/traces/index.tsx          |  95 ++++++------
 2 files changed, 178 insertions(+), 52 deletions(-)
 create mode 100644 apps/web/src/components/traces/advanced-filter-dialog.tsx

diff --git a/apps/web/src/components/traces/advanced-filter-dialog.tsx b/apps/web/src/components/traces/advanced-filter-dialog.tsx
new file mode 100644
index 0000000..0c140d8
--- /dev/null
+++ b/apps/web/src/components/traces/advanced-filter-dialog.tsx
@@ -0,0 +1,135 @@
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@maple/ui/components/ui/dialog"
+import { Button } from "@maple/ui/components/ui/button"
+import { MagnifierIcon } from "@/components/icons"
+import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
+import type { WhereClauseAutocompleteValues } from "@/lib/query-builder/where-clause-autocomplete"
+
+interface AdvancedFilterDialogProps {
+  initialValue: string
+  onApply: (value: string) => void
+  autocompleteValues?: WhereClauseAutocompleteValues
+  onActiveAttributeKey?: (key: string | null) => void
+}
+
+export function AdvancedFilterDialog({
+  initialValue,
+  onApply,
+  autocompleteValues,
+  onActiveAttributeKey,
+}: AdvancedFilterDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState(initialValue)
+
+  React.useEffect(() => {
+    if (open) {
+      setValue(initialValue)
+    }
+  }, [open, initialValue])
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Open with 'f' if not typing in an input
+      if (
+        e.key.toLowerCase() === "f" &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey &&
+        e.target instanceof Element &&
+        !["INPUT", "TEXTAREA", "SELECT"].includes(e.target.tagName) &&
+        !(e.target as HTMLElement).isContentEditable
+      ) {
+        e.preventDefault()
+        setOpen(true)
+      }
+
+      // Cmd+Enter to apply when modal is open
+      if (open && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        onApply(value)
+        setOpen(false)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [open, value, onApply])
+
+  const handleApply = () => {
+    onApply(value)
+    setOpen(false)
+  }
+
+  const handleClear = () => {
+    setValue("")
+    onApply("")
+    setOpen(false)
+  }
+
+  const hasActiveFilter = initialValue.trim().length > 0
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <Button
+            variant={hasActiveFilter ? "secondary" : "outline"}
+            className="gap-2"
+          >
+            <MagnifierIcon
+              className={hasActiveFilter ? "text-primary" : "text-muted-foreground"}
+            />
+            <span>Advanced Filter</span>
+            <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+              F
+            </kbd>
+          </Button>
+        }
+      />
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Advanced Filter</DialogTitle>
+          <DialogDescription>
+            Write SQL-like queries to filter traces. Use <kbd className="bg-muted px-1 py-0.5 rounded text-foreground">Ctrl+Space</kbd> for autocomplete. Press <kbd className="bg-muted px-1 py-0.5 rounded text-foreground">Cmd+Enter</kbd> to apply.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <WhereClauseEditor
+            className="w-full"
+            rows={8}
+            value={value}
+            dataSource="traces"
+            autocompleteScope="trace_search"
+            maxSuggestions={20}
+            values={autocompleteValues}
+            onActiveAttributeKey={onActiveAttributeKey}
+            onChange={setValue}
+            placeholder='service.name = "checkout" AND attr.http.route = "/orders/:id"'
+            textareaClassName="font-mono text-sm leading-relaxed resize-y min-h-[200px]"
+            ariaLabel="Advanced traces where clause"
+          />
+        </div>
+        <DialogFooter>
+          <div className="flex w-full items-center justify-between sm:justify-between">
+            <Button variant="ghost" onClick={handleClear} className="text-muted-foreground">
+              Clear Filter
+            </Button>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleApply}>Apply Filter</Button>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/routes/traces/index.tsx b/apps/web/src/routes/traces/index.tsx
index e58bfde..f045a17 100644
--- a/apps/web/src/routes/traces/index.tsx
+++ b/apps/web/src/routes/traces/index.tsx
@@ -7,8 +7,9 @@ import { DashboardLayout } from "@/components/layout/dashboard-layout"
 import { TracesTable } from "@/components/traces/traces-table"
 import { TracesFilterSidebar } from "@/components/traces/traces-filter-sidebar"
 import { TimeRangePicker } from "@/components/time-range-picker"
-import { WhereClauseEditor } from "@/components/query-builder/where-clause-editor"
-import { MagnifierIcon } from "@/components/icons"
+import { AdvancedFilterDialog } from "@/components/traces/advanced-filter-dialog"
+import { MagnifierIcon, XmarkIcon } from "@/components/icons"
+import { Button } from "@maple/ui/components/ui/button"
 import { useEffectiveTimeRange } from "@/hooks/use-effective-time-range"
 import { applyWhereClause } from "@/lib/traces/advanced-filter-sync"
 import {
@@ -45,31 +46,15 @@ function TracesPage() {
   const search = Route.useSearch()
   const navigate = useNavigate({ from: Route.fullPath })
   const [activeAttributeKey, setActiveAttributeKey] = React.useState<string | null>(null)
-  const [whereClauseText, setWhereClauseText] = React.useState(search.whereClause ?? "")
-  const isLocalUpdate = React.useRef(false)
-
-  // URL → local (external changes only: back/forward, sidebar clear, etc.)
-  React.useEffect(() => {
-    if (isLocalUpdate.current) {
-      isLocalUpdate.current = false
-      return
-    }
-    setWhereClauseText(search.whereClause ?? "")
-  }, [search.whereClause])
-
-  // Local → URL (debounced 300ms)
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      const trimmed = whereClauseText.trim() || undefined
-      if (trimmed !== (search.whereClause ?? undefined)) {
-        isLocalUpdate.current = true
-        navigate({
-          search: (prev) => applyWhereClause(prev, whereClauseText),
-        })
-      }
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [whereClauseText, search.whereClause, navigate])
+
+  const handleApplyWhereClause = React.useCallback(
+    (newClause: string) => {
+      navigate({
+        search: (prev) => applyWhereClause(prev, newClause),
+      })
+    },
+    [navigate],
+  )
 
   const { startTime: effectiveStartTime, endTime: effectiveEndTime } =
     useEffectiveTimeRange(search.startTime, search.endTime)
@@ -170,35 +155,41 @@ function TracesPage() {
       title="Traces"
       description="View distributed traces across your services."
       headerActions={
-        <TimeRangePicker
-          startTime={search.startTime}
-          endTime={search.endTime}
-          onChange={handleTimeChange}
-        />
+        <div className="flex items-center gap-2">
+          <AdvancedFilterDialog
+            initialValue={search.whereClause ?? ""}
+            onApply={handleApplyWhereClause}
+            autocompleteValues={autocompleteValues}
+            onActiveAttributeKey={setActiveAttributeKey}
+          />
+          <TimeRangePicker
+            startTime={search.startTime}
+            endTime={search.endTime}
+            onChange={handleTimeChange}
+          />
+        </div>
       }
     >
-      <div className="mb-4">
-        <div className="flex items-start gap-2 rounded-lg border border-border/60 bg-muted/30 px-3 py-2">
-          <div className="flex items-center gap-1.5 pt-1.5 shrink-0">
-            <MagnifierIcon className="size-3.5 text-muted-foreground" />
-            <span className="text-xs font-medium text-muted-foreground">Filter</span>
+      {search.whereClause && (
+        <div className="mb-4 flex items-center justify-between gap-2 rounded-lg border border-border/60 bg-muted/30 px-3 py-2">
+          <div className="flex items-center gap-2 overflow-hidden">
+            <MagnifierIcon className="size-3.5 text-primary shrink-0" />
+            <span className="text-xs font-mono text-foreground truncate" title={search.whereClause}>
+              {search.whereClause}
+            </span>
           </div>
-          <WhereClauseEditor
-            className="flex-1 min-w-0"
-            rows={1}
-            value={whereClauseText}
-            dataSource="traces"
-            autocompleteScope="trace_search"
-            maxSuggestions={20}
-            values={autocompleteValues}
-            onActiveAttributeKey={setActiveAttributeKey}
-            onChange={setWhereClauseText}
-            placeholder='service.name = "checkout" AND attr.http.route = "/orders/:id"'
-            textareaClassName="border-0 bg-transparent shadow-none focus-visible:ring-0 resize-none px-0 py-1 text-xs min-h-0"
-            ariaLabel="Advanced traces where clause"
-          />
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => handleApplyWhereClause("")}
+            className="shrink-0 text-muted-foreground hover:text-foreground"
+            title="Clear filter"
+          >
+            <XmarkIcon />
+            <span className="sr-only">Clear filter</span>
+          </Button>
         </div>
-      </div>
+      )}
       <div className="flex gap-4">
         <div className="flex-1 min-w-0">
           <TracesTable filters={search} />