From f1abc1d918ece80389fd506573b2f2eb62f59f27 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Mon, 2 Feb 2026 11:38:09 +0100
Subject: [PATCH 01/14] observability: add charts lib

---
 frontend/bun.lock     | 21 ++++++++++++++++++---
 frontend/package.json |  1 +
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/bun.lock b/frontend/bun.lock
index 44ddea665..a82484e91 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -80,6 +80,7 @@
         "react-markdown": "^10.1.0",
         "react-simple-code-editor": "^0.14.1",
         "react-syntax-highlighter": "^15.6.6",
+        "recharts": "2.15.4",
         "remark-emoji": "^5.0.2",
         "remark-gfm": "^4.0.1",
         "remark-prism": "^1.3.6",
@@ -1884,6 +1885,8 @@
 
     "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-named-character-reference": ["decode-named-character-reference@1.2.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -2080,6 +2083,8 @@
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
+    "fast-equals": ["fast-equals@5.4.0", "", {}, "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw=="],
+
     "fast-fifo": ["fast-fifo@1.3.2", "", {}, "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="],
 
     "fast-uri": ["fast-uri@3.1.0", "", {}, "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA=="],
@@ -2998,7 +3003,7 @@
 
     "react-icons": ["react-icons@4.12.0", "", { "peerDependencies": { "react": "*" } }, "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw=="],
 
-    "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
 
@@ -3024,6 +3029,8 @@
 
     "react-simple-code-editor": ["react-simple-code-editor@0.14.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow=="],
 
+    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],
+
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
     "react-syntax-highlighter": ["react-syntax-highlighter@15.6.6", "", { "dependencies": { "@babel/runtime": "^7.3.1", "highlight.js": "^10.4.1", "highlightjs-vue": "^1.0.0", "lowlight": "^1.17.0", "prismjs": "^1.30.0", "refractor": "^3.6.0" }, "peerDependencies": { "react": ">= 0.14.0" } }, "sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw=="],
@@ -3038,6 +3045,10 @@
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "recharts": ["recharts@2.15.4", "", { "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", "react-is": "^18.3.1", "react-smooth": "^4.0.4", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", "victory-vendor": "^36.6.8" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw=="],
+
+    "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
+
     "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
 
     "reduce-configs": ["reduce-configs@1.1.1", "", {}, "sha512-EYtsVGAQarE8daT54cnaY1PIknF2VB78ug6Zre2rs36EsJfC40EG6hmTU2A2P1ZuXnKAt2KI0fzOGHcX7wzdPw=="],
@@ -3504,6 +3515,8 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
+    "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
+
     "vite": ["vite@7.2.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ=="],
 
     "vite-plugin-env-compatible": ["vite-plugin-env-compatible@2.0.1", "", { "dependencies": { "dotenv": "8.2.0", "dotenv-expand": "5.1.0" } }, "sha512-DRrOZTg/W44ojVQQfGSMPEgYQGzp5TeIpt9cpaK35hTOC/b2D7Ffl8/RIgK8vQ0mlnDIUgETcA173bnMEkyzdw=="],
@@ -4058,6 +4071,8 @@
 
     "prebuild-install/tar-fs": ["tar-fs@2.1.4", "", { "dependencies": { "chownr": "^1.1.1", "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", "tar-stream": "^2.1.4" } }, "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ=="],
 
+    "pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "proxy-addr/ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
@@ -4072,6 +4087,8 @@
 
     "react-highlight-words/memoize-one": ["memoize-one@4.1.0", "", {}, "sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA=="],
 
+    "react-redux/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
     "react-remove-scroll/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "react-remove-scroll-bar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -4240,8 +4257,6 @@
 
     "@redpanda-data/ui/react-markdown/property-information": ["property-information@6.5.0", "", {}, "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig=="],
 
-    "@redpanda-data/ui/react-markdown/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
-
     "@redpanda-data/ui/react-markdown/remark-parse": ["remark-parse@10.0.2", "", { "dependencies": { "@types/mdast": "^3.0.0", "mdast-util-from-markdown": "^1.0.0", "unified": "^10.0.0" } }, "sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw=="],
 
     "@redpanda-data/ui/react-markdown/remark-rehype": ["remark-rehype@10.1.0", "", { "dependencies": { "@types/hast": "^2.0.0", "@types/mdast": "^3.0.0", "mdast-util-to-hast": "^12.1.0", "unified": "^10.0.0" } }, "sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw=="],
diff --git a/frontend/package.json b/frontend/package.json
index 4dba7c890..46f05d1f6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -120,6 +120,7 @@
     "react-markdown": "^10.1.0",
     "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^15.6.6",
+    "recharts": "2.15.4",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
     "remark-prism": "^1.3.6",

From 17f679cbc7770c1a29c3dde98f566e8a029600bc Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Mon, 2 Feb 2026 11:54:42 +0100
Subject: [PATCH 02/14] observability: pass feature flags from embedding app

---
 frontend/src/components/constants.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/constants.ts b/frontend/src/components/constants.ts
index 172027f3e..b61384fc1 100644
--- a/frontend/src/components/constants.ts
+++ b/frontend/src/components/constants.ts
@@ -20,6 +20,8 @@ export const FEATURE_FLAGS = {
   enableTranscriptsInConsole: false,
   enableApiKeyConfigurationAgent: false,
   shadowlinkCloudUi: false,
+  enableDataplaneObservabilityServerless: false,
+  enableDataplaneObservability: false,
 };
 
 // Cloud-managed tag keys for service account integration

From 144a773b733fd79a9dc5e37388dc3a81980ffd06 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Mon, 2 Feb 2026 11:55:04 +0100
Subject: [PATCH 03/14] observability: import chart from ui lib

---
 .../redpanda-ui/components/chart.tsx          | 296 ++++++++++++++++++
 1 file changed, 296 insertions(+)
 create mode 100644 frontend/src/components/redpanda-ui/components/chart.tsx

diff --git a/frontend/src/components/redpanda-ui/components/chart.tsx b/frontend/src/components/redpanda-ui/components/chart.tsx
new file mode 100644
index 000000000..f58d7387b
--- /dev/null
+++ b/frontend/src/components/redpanda-ui/components/chart.tsx
@@ -0,0 +1,296 @@
+'use client';
+
+import React from 'react';
+import { Legend, type LegendProps, ResponsiveContainer, Tooltip } from 'recharts';
+
+import { cn, type SharedProps } from '../lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  testId,
+  ...props
+}: React.ComponentProps<'div'> &
+  SharedProps & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+  }) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        data-chart={chartId}
+        data-slot="chart"
+        data-testid={testId}
+        {...props}
+      >
+        <ChartStyle config={config} id={chartId} />
+        <ResponsiveContainer>{children}</ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme || itemConfig.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: part of chart implementation
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label;
+
+    if (labelFormatter) {
+      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+  if (!(active && payload?.length)) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      className={cn(
+        'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+        className
+      )}
+    >
+      {!nestLabel && tooltipLabel}
+      <div className="grid gap-1.5">
+        {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: part of chart implementation */}
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              className={cn(
+                'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                indicator === 'dot' && 'items-center'
+              )}
+              key={item.dataKey}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                          'h-2.5 w-2.5': indicator === 'dot',
+                          'w-1': indicator === 'line',
+                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                          'my-0.5': nestLabel && indicator === 'dashed',
+                        })}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                    </div>
+                    {item.value !== undefined && item.value !== null ? (
+                      <span className="font-medium font-mono text-foreground tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    ) : null}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}
+            key={item.value}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
+    return;
+  }
+
+  const payloadPayload =
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };

From f8d5d101d9c54cd2f89855c7da74b09ebbd93c40 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Mon, 2 Feb 2026 11:56:22 +0100
Subject: [PATCH 04/14] observability: add hooks for API call

---
 frontend/src/react-query/api/observability.ts | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 frontend/src/react-query/api/observability.ts

diff --git a/frontend/src/react-query/api/observability.ts b/frontend/src/react-query/api/observability.ts
new file mode 100644
index 000000000..71951991d
--- /dev/null
+++ b/frontend/src/react-query/api/observability.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { useQuery } from '@connectrpc/connect-query';
+import {
+  type ExecuteInstantQueryRequest,
+  ExecuteInstantQueryRequestSchema,
+  type ExecuteRangeQueryRequest,
+  ExecuteRangeQueryRequestSchema,
+  type ListQueriesRequest,
+  ListQueriesRequestSchema,
+} from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
+import {
+  executeInstantQuery,
+  executeRangeQuery,
+  listQueries,
+} from 'protogen/redpanda/api/dataplane/v1alpha3/observability-ObservabilityService_connectquery';
+import { fastFailRetry, type MessageInit } from 'react-query/react-query.utils';
+
+export const useListQueries = (
+  request?: MessageInit<ListQueriesRequest>,
+  opts?: { enabled?: boolean; refetchInterval?: number | false }
+) => {
+  const listQueriesRequest = create(ListQueriesRequestSchema, request || {});
+  return useQuery(listQueries, listQueriesRequest, {
+    ...opts,
+    retry: fastFailRetry,
+  });
+};
+
+export const useExecuteRangeQuery = (
+  request: MessageInit<ExecuteRangeQueryRequest>,
+  opts?: { enabled?: boolean; refetchInterval?: number | false }
+) => {
+  const executeRangeQueryRequest = create(ExecuteRangeQueryRequestSchema, request);
+  return useQuery(executeRangeQuery, executeRangeQueryRequest, {
+    ...opts,
+    retry: fastFailRetry,
+  });
+};
+
+export const useExecuteInstantQuery = (
+  request: MessageInit<ExecuteInstantQueryRequest>,
+  opts?: { enabled?: boolean; refetchInterval?: number | false }
+) => {
+  const executeInstantQueryRequest = create(ExecuteInstantQueryRequestSchema, request);
+  return useQuery(executeInstantQuery, executeInstantQueryRequest, {
+    ...opts,
+    retry: fastFailRetry,
+  });
+};

From e440fae51bca446710822d64687ca1665766df2f Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Mon, 2 Feb 2026 15:24:12 +0100
Subject: [PATCH 05/14] observability: add new observability page

---
 .../pages/observability/metric-chart.tsx      | 277 ++++++++++++++++++
 .../observability/observability-page.test.tsx | 179 +++++++++++
 .../observability/observability-page.tsx      | 107 +++++++
 .../observability/observability-toolbar.tsx   | 120 ++++++++
 4 files changed, 683 insertions(+)
 create mode 100644 frontend/src/components/pages/observability/metric-chart.tsx
 create mode 100644 frontend/src/components/pages/observability/observability-page.test.tsx
 create mode 100644 frontend/src/components/pages/observability/observability-page.tsx
 create mode 100644 frontend/src/components/pages/observability/observability-toolbar.tsx

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
new file mode 100644
index 000000000..beb7fe270
--- /dev/null
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -0,0 +1,277 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { timestampFromMs } from '@bufbuild/protobuf/wkt';
+import { Alert, AlertIcon, Box, Heading, Skeleton, Text } from '@redpanda-data/ui';
+import type { ExecuteRangeQueryResponse } from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { useExecuteRangeQuery } from 'react-query/api/observability';
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../redpanda-ui/components/chart';
+
+type MetricChartProps = {
+  queryName: string;
+  timeRange: {
+    start: Date;
+    end: Date;
+  };
+};
+
+// Helper to add data point to timestamp map
+function addDataPoint(
+  timestampMap: Map<number, { timestamp: number; [key: string]: number }>,
+  seriesName: string,
+  point: { timestamp?: { seconds: bigint }; value?: number }
+): void {
+  if (!point.timestamp || point.value === undefined) {
+    return;
+  }
+
+  // Convert seconds to milliseconds for JavaScript Date
+  const ts = Number(point.timestamp.seconds) * 1000;
+
+  if (!timestampMap.has(ts)) {
+    timestampMap.set(ts, { timestamp: ts });
+  }
+
+  const entry = timestampMap.get(ts);
+  if (entry) {
+    entry[seriesName] = point.value;
+  }
+}
+
+// Helper function to transform time series data into chart format
+function transformTimeSeriesData(results: ExecuteRangeQueryResponse['results']): Array<{
+  timestamp: number;
+  [key: string]: number;
+}> {
+  if (!results || results.length === 0) {
+    return [];
+  }
+
+  const timestampMap = new Map<number, { timestamp: number; [key: string]: number }>();
+
+  for (const series of results) {
+    const seriesName = series.name || 'value';
+    for (const point of series.values) {
+      addDataPoint(timestampMap, seriesName, point);
+    }
+  }
+
+  return Array.from(timestampMap.values()).sort((a, b) => a.timestamp - b.timestamp);
+}
+
+export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
+  const { data, isLoading, isError } = useExecuteRangeQuery({
+    queryName,
+    params: {
+      start: timestampFromMs(timeRange.start.getTime()),
+      end: timestampFromMs(timeRange.end.getTime()),
+      filters: {},
+    },
+  });
+
+  // Transform the time series data into chart format
+  const chartData = useMemo(() => transformTimeSeriesData(data?.results || []), [data]);
+
+  // Extract series names for creating lines
+  const seriesNames = useMemo(() => {
+    if (!data?.results) {
+      return [];
+    }
+    return data.results
+      .map((series) => series.name || 'value')
+      .filter((name, index, self) => self.indexOf(name) === index);
+  }, [data]);
+
+  // Chart configuration
+  const chartConfig = useMemo(() => {
+    const config: Record<string, { label: string; color: string }> = {};
+    const colors = [
+      'var(--color-chart-1)',
+      'var(--color-chart-2)',
+      'var(--color-chart-3)',
+      'var(--color-chart-4)',
+      'var(--color-chart-5)',
+    ];
+
+    for (let i = 0; i < seriesNames.length; i++) {
+      config[seriesNames[i]] = {
+        label: seriesNames[i],
+        color: colors[i % colors.length],
+      };
+    }
+
+    return config;
+  }, [seriesNames]);
+
+  if (isLoading) {
+    return (
+      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+        <Skeleton height="200px" mt={2} />
+      </Box>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+        <Alert mt={2} status="warning">
+          <AlertIcon />
+          <Text fontSize="sm">Failed to load data for this metric</Text>
+        </Alert>
+      </Box>
+    );
+  }
+
+  if (chartData.length === 0) {
+    return (
+      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+        {data.metadata?.description ? (
+          <Heading mb={2} size="sm">
+            {data.metadata.description}
+          </Heading>
+        ) : null}
+        <Alert mt={2} status="info">
+          <AlertIcon />
+          <Text fontSize="sm">No data available for this time range</Text>
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+      {data.metadata?.description ? (
+        <Heading mb={4} size="sm">
+          {data.metadata.description}
+        </Heading>
+      ) : null}
+
+      <ChartContainer className="h-[250px] w-full" config={chartConfig}>
+        <LineChart accessibilityLayer data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} />
+          <XAxis
+            axisLine={false}
+            dataKey="timestamp"
+            tickFormatter={(value) => {
+              const date = new Date(value);
+              return date.toLocaleTimeString('en-US', {
+                hour: '2-digit',
+                minute: '2-digit',
+                timeZone: 'UTC',
+              });
+            }}
+            tickLine={false}
+            tickMargin={10}
+          />
+          <YAxis
+            axisLine={false}
+            label={
+              data.metadata?.unit
+                ? {
+                    value: data.metadata.unit,
+                    angle: -90,
+                    position: 'insideLeft',
+                    style: { textAnchor: 'middle' },
+                  }
+                : undefined
+            }
+            tickFormatter={(value) => {
+              // Format large numbers with K, M, B suffixes
+              if (value >= 1_000_000_000) {
+                return `${(value / 1_000_000_000).toFixed(1)}B`;
+              }
+              if (value >= 1_000_000) {
+                return `${(value / 1_000_000).toFixed(1)}M`;
+              }
+              if (value >= 1000) {
+                return `${(value / 1000).toFixed(1)}K`;
+              }
+              // Show decimals for small values
+              if (value < 10) {
+                return value.toFixed(2);
+              }
+              if (value < 100) {
+                return value.toFixed(1);
+              }
+              return value.toFixed(0);
+            }}
+            tickLine={false}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                className="min-w-[200px]"
+                formatter={(value, name, item) => {
+                  const indicatorColor = item.payload.fill || item.color;
+                  return (
+                    <div className="flex w-full items-center gap-3">
+                      <div className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: indicatorColor }} />
+                      <span className="text-muted-foreground">{name}</span>
+                      <span className="ml-auto font-medium font-mono tabular-nums">
+                        {value?.toLocaleString()}
+                        {data.metadata?.unit ? ` ${data.metadata.unit}` : ''}
+                      </span>
+                    </div>
+                  );
+                }}
+                hideLabel={false}
+                labelFormatter={(_value, payload) => {
+                  // Get timestamp from payload data
+                  const timestamp = payload?.[0]?.payload?.timestamp;
+                  if (!timestamp) {
+                    return '';
+                  }
+                  const ts = typeof timestamp === 'number' ? timestamp : Number(timestamp);
+                  if (Number.isNaN(ts)) {
+                    return '';
+                  }
+                  const date = new Date(ts);
+                  if (Number.isNaN(date.getTime())) {
+                    return '';
+                  }
+                  return date.toLocaleString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    timeZone: 'UTC',
+                    timeZoneName: 'short',
+                  });
+                }}
+              />
+            }
+          />
+          {seriesNames.map((seriesName) => (
+            <Line
+              dataKey={seriesName}
+              dot={false}
+              key={seriesName}
+              stroke={chartConfig[seriesName]?.color}
+              strokeWidth={2}
+              type="linear"
+            />
+          ))}
+          <ChartLegend content={<ChartLegendContent />} />
+        </LineChart>
+      </ChartContainer>
+    </Box>
+  );
+};
diff --git a/frontend/src/components/pages/observability/observability-page.test.tsx b/frontend/src/components/pages/observability/observability-page.test.tsx
new file mode 100644
index 000000000..1a38a7b4b
--- /dev/null
+++ b/frontend/src/components/pages/observability/observability-page.test.tsx
@@ -0,0 +1,179 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { create } from '@bufbuild/protobuf';
+import { timestampFromMs } from '@bufbuild/protobuf/wkt';
+import { createRouterTransport } from '@connectrpc/connect';
+import {
+  DataPointSchema,
+  ExecuteRangeQueryResponseSchema,
+  ListQueriesResponseSchema,
+  QueryMetadataSchema,
+  TimeSeriesSchema,
+} from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
+import {
+  executeRangeQuery,
+  listQueries,
+} from 'protogen/redpanda/api/dataplane/v1alpha3/observability-ObservabilityService_connectquery';
+import { renderWithFileRoutes, screen, waitFor } from 'test-utils';
+
+vi.mock('config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('config')>();
+  return {
+    ...actual,
+    config: {
+      jwt: 'test-jwt-token',
+      controlplaneUrl: 'http://localhost:9090',
+    },
+    isFeatureFlagEnabled: vi.fn(() => false),
+    addBearerTokenInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
+  };
+});
+
+vi.mock('state/ui-state', () => ({
+  uiState: {
+    pageTitle: '',
+    pageBreadcrumbs: [],
+  },
+}));
+
+vi.mock('state/app-global', () => ({
+  appGlobal: {
+    onRefresh: null,
+  },
+}));
+
+import ObservabilityPage from './observability-page';
+
+describe('ObservabilityPage', () => {
+  test('should render and display content when data loads', async () => {
+    const listQueriesResponse = create(ListQueriesResponseSchema, {
+      queries: [],
+    });
+
+    const listQueriesMock = vi.fn().mockReturnValue(listQueriesResponse);
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listQueries, listQueriesMock);
+    });
+
+    renderWithFileRoutes(<ObservabilityPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('No metrics queries available at this time.')).toBeInTheDocument();
+    });
+
+    expect(listQueriesMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('should display metrics queries when data is loaded', async () => {
+    const query1 = create(QueryMetadataSchema, {
+      name: 'cpu_usage',
+      description: 'CPU usage percentage',
+      unit: 'percent',
+      filters: [],
+      tags: {},
+    });
+
+    const query2 = create(QueryMetadataSchema, {
+      name: 'memory_usage',
+      description: 'Memory usage in bytes',
+      unit: 'bytes',
+      filters: [],
+      tags: {},
+    });
+
+    const listQueriesResponse = create(ListQueriesResponseSchema, {
+      queries: [query1, query2],
+    });
+
+    // Create mock time series data
+    const now = Date.now();
+    const oneHourAgo = now - 60 * 60 * 1000;
+
+    const mockTimeSeries = create(TimeSeriesSchema, {
+      name: 'default',
+      values: [
+        create(DataPointSchema, {
+          timestamp: timestampFromMs(oneHourAgo),
+          value: 50.5,
+        }),
+        create(DataPointSchema, {
+          timestamp: timestampFromMs(now),
+          value: 75.2,
+        }),
+      ],
+    });
+
+    const listQueriesMock = vi.fn().mockReturnValue(listQueriesResponse);
+    const executeRangeQueryMock = vi.fn().mockImplementation((request) => {
+      let metadata: typeof query1 | typeof query2 | undefined;
+      if (request.queryName === 'cpu_usage') {
+        metadata = query1;
+      } else if (request.queryName === 'memory_usage') {
+        metadata = query2;
+      }
+
+      return create(ExecuteRangeQueryResponseSchema, {
+        metadata,
+        results: [mockTimeSeries],
+      });
+    });
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listQueries, listQueriesMock);
+      rpc(executeRangeQuery, executeRangeQueryMock);
+    });
+
+    renderWithFileRoutes(<ObservabilityPage />, { transport });
+
+    // Wait for titles to appear
+    await waitFor(() => {
+      expect(screen.getByText('CPU usage percentage')).toBeInTheDocument();
+      expect(screen.getByText('Memory usage in bytes')).toBeInTheDocument();
+    });
+  });
+
+  test('should display no metrics message when queries array is empty', async () => {
+    const listQueriesResponse = create(ListQueriesResponseSchema, {
+      queries: [],
+    });
+
+    const listQueriesMock = vi.fn().mockReturnValue(listQueriesResponse);
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listQueries, listQueriesMock);
+    });
+
+    renderWithFileRoutes(<ObservabilityPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('No metrics queries available at this time.')).toBeInTheDocument();
+    });
+  });
+
+  test('should display error message when query fails', async () => {
+    const listQueriesMock = vi.fn().mockImplementation(() => {
+      throw new Error('Failed to fetch metrics');
+    });
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listQueries, listQueriesMock);
+    });
+
+    renderWithFileRoutes(<ObservabilityPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Error loading metrics')).toBeInTheDocument();
+      expect(screen.getByText('Failed to load observability metrics. Please try again later.')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/src/components/pages/observability/observability-page.tsx b/frontend/src/components/pages/observability/observability-page.tsx
new file mode 100644
index 000000000..92ef89462
--- /dev/null
+++ b/frontend/src/components/pages/observability/observability-page.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { Alert, AlertIcon, Box, Skeleton, Text } from '@redpanda-data/ui';
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useListQueries } from 'react-query/api/observability';
+import { appGlobal } from 'state/app-global';
+import { uiState } from 'state/ui-state';
+
+import { MetricChart } from './metric-chart';
+import { calculateTimeRange, ObservabilityToolbar, type TimeRange } from './observability-toolbar';
+
+const ObservabilityPage: FC = () => {
+  const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>('1h');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const {
+    data: queries,
+    isLoading: isLoadingQueries,
+    isError,
+    refetch,
+  } = useListQueries({
+    filter: {
+      tags: {
+        // We show in the cluster observability page only metric charts marked with (all) the following tags.
+        component: 'cluster',
+        category: 'overview',
+      },
+    },
+  });
+
+  const refreshData = useCallback(() => {
+    setRefreshKey((prev) => prev + 1);
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    uiState.pageBreadcrumbs = [{ title: 'Metrics', linkTo: '/observability' }];
+    appGlobal.onRefresh = () => refreshData();
+  }, [refreshData]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
+  const timeRange = useMemo(() => calculateTimeRange(selectedTimeRange), [selectedTimeRange, refreshKey]);
+
+  if (isLoadingQueries) {
+    return (
+      <Box display="flex" flexDirection="column" gap={4}>
+        <Skeleton height="40px" />
+        <Skeleton height="200px" />
+        <Skeleton height="200px" />
+      </Box>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Alert status="error">
+        <AlertIcon />
+        <Box>
+          <Text fontWeight="bold">Error loading metrics</Text>
+          <Text>Failed to load observability metrics. Please try again later.</Text>
+        </Box>
+      </Alert>
+    );
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" gap={6}>
+      <ObservabilityToolbar
+        onTimeRangeChange={setSelectedTimeRange}
+        refreshKey={refreshKey}
+        selectedTimeRange={selectedTimeRange}
+      />
+
+      {queries?.queries && queries.queries.length > 0 ? (
+        <Box
+          display="grid"
+          gap={6}
+          gridTemplateColumns={{
+            base: '1fr',
+            lg: 'repeat(2, 1fr)',
+          }}
+        >
+          {queries.queries.map((query) => (
+            <MetricChart key={query.name} queryName={query.name} timeRange={timeRange} />
+          ))}
+        </Box>
+      ) : (
+        <Alert status="info">
+          <AlertIcon />
+          <Text>No metrics queries available at this time.</Text>
+        </Alert>
+      )}
+    </Box>
+  );
+};
+
+export default ObservabilityPage;
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
new file mode 100644
index 000000000..7b50c1beb
--- /dev/null
+++ b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { Box, Flex, Text } from '@redpanda-data/ui';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../redpanda-ui/components/select';
+
+export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h';
+
+const TIME_RANGE_MS: Record<TimeRange, number> = {
+  '5m': 5 * 60 * 1000,
+  '15m': 15 * 60 * 1000,
+  '30m': 30 * 60 * 1000,
+  '1h': 60 * 60 * 1000,
+  '3h': 3 * 60 * 60 * 1000,
+  '6h': 6 * 60 * 60 * 1000,
+};
+
+export type TimeRangeDates = {
+  start: Date;
+  end: Date;
+};
+
+type ObservabilityToolbarProps = {
+  selectedTimeRange: TimeRange;
+  onTimeRangeChange: (timeRange: TimeRange) => void;
+  refreshKey: number;
+};
+
+export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
+  selectedTimeRange,
+  onTimeRangeChange,
+  refreshKey,
+}) => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
+  const timeRange = useMemo(() => {
+    const now = new Date();
+    const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
+
+    return {
+      start: startTime,
+      end: now,
+    };
+  }, [selectedTimeRange, refreshKey]);
+
+  const timeRangeDisplay = useMemo(() => {
+    const formatDate = (date: Date) =>
+      date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        timeZone: 'UTC',
+      });
+
+    return {
+      start: formatDate(timeRange.start),
+      end: formatDate(timeRange.end),
+    };
+  }, [timeRange]);
+
+  return (
+    <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" boxShadow="sm" p={4}>
+      <Flex gap={6}>
+        <Box>
+          <Text className="mb-1 text-gray-600 text-xs">TIME RANGE</Text>
+          <Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
+            <SelectTrigger className="h-8 w-[110px] text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="5m">Last 5m</SelectItem>
+              <SelectItem value="15m">Last 15m</SelectItem>
+              <SelectItem value="30m">Last 30m</SelectItem>
+              <SelectItem value="1h">Last 1h</SelectItem>
+              <SelectItem value="3h">Last 3h</SelectItem>
+              <SelectItem value="6h">Last 6h</SelectItem>
+            </SelectContent>
+          </Select>
+        </Box>
+        <Box className="w-px bg-gray-300" />
+        <Box>
+          <Text className="mb-1 text-gray-600 text-xs">FROM</Text>
+          <Text className="font-medium text-sm">{timeRangeDisplay.start}</Text>
+        </Box>
+        <Box className="w-px bg-gray-300" />
+        <Box>
+          <Text className="mb-1 text-gray-600 text-xs">TO</Text>
+          <Text className="font-medium text-sm">{timeRangeDisplay.end}</Text>
+        </Box>
+        <Box className="w-px bg-gray-300" />
+        <Box>
+          <Text className="mb-1 text-gray-600 text-xs">TIMEZONE</Text>
+          <Text className="font-medium text-sm">UTC</Text>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export function calculateTimeRange(selectedTimeRange: TimeRange): TimeRangeDates {
+  const now = new Date();
+  const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
+
+  return {
+    start: startTime,
+    end: now,
+  };
+}

From fe489992f5783f873649fd3823f4616fc22106ca Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Tue, 3 Feb 2026 15:06:04 +0100
Subject: [PATCH 06/14] observability: add route conditional to feature flag

---
 frontend/src/routes/observability/index.tsx | 36 +++++++++++++++++++++
 frontend/src/utils/route-utils.tsx          | 10 ++++++
 2 files changed, 46 insertions(+)
 create mode 100644 frontend/src/routes/observability/index.tsx

diff --git a/frontend/src/routes/observability/index.tsx b/frontend/src/routes/observability/index.tsx
new file mode 100644
index 000000000..014706a3c
--- /dev/null
+++ b/frontend/src/routes/observability/index.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { ActivityIcon } from 'components/icons';
+import { isFeatureFlagEnabled, isServerless } from 'config';
+
+import ObservabilityPage from '../../components/pages/observability/observability-page';
+
+export const Route = createFileRoute('/observability/')({
+  staticData: {
+    title: 'Metrics',
+    icon: ActivityIcon,
+  },
+  beforeLoad: () => {
+    const isObservabilityEnabled = isServerless()
+      ? isFeatureFlagEnabled('enableDataplaneObservabilityServerless')
+      : isFeatureFlagEnabled('enableDataplaneObservability');
+
+    if (!isObservabilityEnabled) {
+      throw redirect({
+        to: '/',
+        replace: true,
+      });
+    }
+  },
+  component: ObservabilityPage,
+});
diff --git a/frontend/src/utils/route-utils.tsx b/frontend/src/utils/route-utils.tsx
index 97b5c911e..b10abc830 100644
--- a/frontend/src/utils/route-utils.tsx
+++ b/frontend/src/utils/route-utils.tsx
@@ -191,6 +191,16 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     icon: HomeIcon,
     visibilityCheck: routeVisibility(true),
   },
+  {
+    path: '/observability',
+    title: 'Metrics',
+    icon: ActivityIcon,
+    visibilityCheck: routeVisibility(() =>
+      isEmbedded() && isServerless()
+        ? isFeatureFlagEnabled('enableDataplaneObservabilityServerless')
+        : isFeatureFlagEnabled('enableDataplaneObservability')
+    ),
+  },
   {
     path: '/topics',
     title: 'Topics',

From 66dc700f35e936921e66a6eadcbbd90f37ffaa58 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Tue, 3 Feb 2026 18:21:05 +0100
Subject: [PATCH 07/14] observability: fix route-showing logic

---
 frontend/src/utils/route-utils.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/utils/route-utils.tsx b/frontend/src/utils/route-utils.tsx
index b10abc830..f99203d2f 100644
--- a/frontend/src/utils/route-utils.tsx
+++ b/frontend/src/utils/route-utils.tsx
@@ -195,10 +195,12 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     path: '/observability',
     title: 'Metrics',
     icon: ActivityIcon,
-    visibilityCheck: routeVisibility(() =>
-      isEmbedded() && isServerless()
-        ? isFeatureFlagEnabled('enableDataplaneObservabilityServerless')
-        : isFeatureFlagEnabled('enableDataplaneObservability')
+    visibilityCheck: routeVisibility(
+      () =>
+        isEmbedded() &&
+        (isServerless()
+          ? isFeatureFlagEnabled('enableDataplaneObservabilityServerless')
+          : isFeatureFlagEnabled('enableDataplaneObservability'))
     ),
   },
   {

From 78e8eb1fcad5ac8d18fb655379e7c64a7d3ba2a8 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Tue, 3 Feb 2026 18:50:20 +0100
Subject: [PATCH 08/14] observability: switch to using the new UI registry

---
 .../pages/observability/metric-chart.tsx      | 38 ++++++++--------
 .../observability/observability-page.tsx      | 42 +++++++----------
 .../observability/observability-toolbar.tsx   | 45 +++++++++----------
 3 files changed, 57 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
index beb7fe270..ff52793a3 100644
--- a/frontend/src/components/pages/observability/metric-chart.tsx
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -10,13 +10,13 @@
  */
 
 import { timestampFromMs } from '@bufbuild/protobuf/wkt';
-import { Alert, AlertIcon, Box, Heading, Skeleton, Text } from '@redpanda-data/ui';
 import type { ExecuteRangeQueryResponse } from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import { useExecuteRangeQuery } from 'react-query/api/observability';
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 
+import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
 import {
   ChartContainer,
   ChartLegend,
@@ -24,6 +24,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '../../redpanda-ui/components/chart';
+import { Skeleton } from '../../redpanda-ui/components/skeleton';
+import { Heading } from '../../redpanda-ui/components/typography';
 
 type MetricChartProps = {
   queryName: string;
@@ -123,48 +125,46 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
 
   if (isLoading) {
     return (
-      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
-        <Skeleton height="200px" mt={2} />
-      </Box>
+      <div className="rounded-md border border-gray-200 p-4">
+        <Skeleton className="h-[200px] mt-2" />
+      </div>
     );
   }
 
   if (isError || !data) {
     return (
-      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
-        <Alert mt={2} status="warning">
-          <AlertIcon />
-          <Text fontSize="sm">Failed to load data for this metric</Text>
+      <div className="rounded-md border border-gray-200 p-4">
+        <Alert variant="warning" className="mt-2">
+          <AlertDescription>Failed to load data for this metric</AlertDescription>
         </Alert>
-      </Box>
+      </div>
     );
   }
 
   if (chartData.length === 0) {
     return (
-      <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+      <div className="rounded-md border border-gray-200 p-4">
         {data.metadata?.description ? (
-          <Heading mb={2} size="sm">
+          <Heading level={4} className="mb-4">
             {data.metadata.description}
           </Heading>
         ) : null}
-        <Alert mt={2} status="info">
-          <AlertIcon />
-          <Text fontSize="sm">No data available for this time range</Text>
+        <Alert variant="info" className="mt-2">
+          <AlertDescription>No data available for this time range</AlertDescription>
         </Alert>
-      </Box>
+      </div>
     );
   }
 
   return (
-    <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" p={4}>
+    <div className="rounded-md border border-gray-200 p-4">
       {data.metadata?.description ? (
-        <Heading mb={4} size="sm">
+        <Heading level={3} className="mb-4">
           {data.metadata.description}
         </Heading>
       ) : null}
 
-      <ChartContainer className="h-[250px] w-full" config={chartConfig}>
+      <ChartContainer className="mt-4 h-[250px] w-full" config={chartConfig}>
         <LineChart accessibilityLayer data={chartData}>
           <CartesianGrid strokeDasharray="3 3" vertical={false} />
           <XAxis
@@ -272,6 +272,6 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
           <ChartLegend content={<ChartLegendContent />} />
         </LineChart>
       </ChartContainer>
-    </Box>
+    </div>
   );
 };
diff --git a/frontend/src/components/pages/observability/observability-page.tsx b/frontend/src/components/pages/observability/observability-page.tsx
index 92ef89462..53e3401a9 100644
--- a/frontend/src/components/pages/observability/observability-page.tsx
+++ b/frontend/src/components/pages/observability/observability-page.tsx
@@ -9,13 +9,14 @@
  * by the Apache License, Version 2.0
  */
 
-import { Alert, AlertIcon, Box, Skeleton, Text } from '@redpanda-data/ui';
 import type { FC } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useListQueries } from 'react-query/api/observability';
 import { appGlobal } from 'state/app-global';
 import { uiState } from 'state/ui-state';
 
+import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
+import { Skeleton } from '../../redpanda-ui/components/skeleton';
 import { MetricChart } from './metric-chart';
 import { calculateTimeRange, ObservabilityToolbar, type TimeRange } from './observability-toolbar';
 
@@ -53,28 +54,25 @@ const ObservabilityPage: FC = () => {
 
   if (isLoadingQueries) {
     return (
-      <Box display="flex" flexDirection="column" gap={4}>
-        <Skeleton height="40px" />
-        <Skeleton height="200px" />
-        <Skeleton height="200px" />
-      </Box>
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-[40px]" />
+        <Skeleton className="h-[200px]" />
+        <Skeleton className="h-[200px]" />
+      </div>
     );
   }
 
   if (isError) {
     return (
-      <Alert status="error">
-        <AlertIcon />
-        <Box>
-          <Text fontWeight="bold">Error loading metrics</Text>
-          <Text>Failed to load observability metrics. Please try again later.</Text>
-        </Box>
+      <Alert variant="destructive">
+        <AlertTitle>Error loading metrics</AlertTitle>
+        <AlertDescription>Failed to load observability metrics. Please try again later.</AlertDescription>
       </Alert>
     );
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={6}>
+    <div className="flex flex-col gap-6">
       <ObservabilityToolbar
         onTimeRangeChange={setSelectedTimeRange}
         refreshKey={refreshKey}
@@ -82,25 +80,17 @@ const ObservabilityPage: FC = () => {
       />
 
       {queries?.queries && queries.queries.length > 0 ? (
-        <Box
-          display="grid"
-          gap={6}
-          gridTemplateColumns={{
-            base: '1fr',
-            lg: 'repeat(2, 1fr)',
-          }}
-        >
+        <div className="grid gap-6 grid-cols-1 lg:grid-cols-2">
           {queries.queries.map((query) => (
             <MetricChart key={query.name} queryName={query.name} timeRange={timeRange} />
           ))}
-        </Box>
+        </div>
       ) : (
-        <Alert status="info">
-          <AlertIcon />
-          <Text>No metrics queries available at this time.</Text>
+        <Alert variant="info">
+          <AlertDescription>No metrics queries available at this time.</AlertDescription>
         </Alert>
       )}
-    </Box>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
index 7b50c1beb..a109505e5 100644
--- a/frontend/src/components/pages/observability/observability-toolbar.tsx
+++ b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -9,7 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, Flex, Text } from '@redpanda-data/ui';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
@@ -71,10 +70,10 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
   }, [timeRange]);
 
   return (
-    <Box borderColor="gray.200" borderRadius="md" borderWidth="1px" boxShadow="sm" p={4}>
-      <Flex gap={6}>
-        <Box>
-          <Text className="mb-1 text-gray-600 text-xs">TIME RANGE</Text>
+    <div className="rounded-md border border-gray-200 p-4 shadow-sm">
+      <div className="flex gap-6">
+        <div>
+          <div className="mb-1 text-gray-600 text-xs">TIME RANGE</div>
           <Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
             <SelectTrigger className="h-8 w-[110px] text-sm">
               <SelectValue />
@@ -88,24 +87,24 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
               <SelectItem value="6h">Last 6h</SelectItem>
             </SelectContent>
           </Select>
-        </Box>
-        <Box className="w-px bg-gray-300" />
-        <Box>
-          <Text className="mb-1 text-gray-600 text-xs">FROM</Text>
-          <Text className="font-medium text-sm">{timeRangeDisplay.start}</Text>
-        </Box>
-        <Box className="w-px bg-gray-300" />
-        <Box>
-          <Text className="mb-1 text-gray-600 text-xs">TO</Text>
-          <Text className="font-medium text-sm">{timeRangeDisplay.end}</Text>
-        </Box>
-        <Box className="w-px bg-gray-300" />
-        <Box>
-          <Text className="mb-1 text-gray-600 text-xs">TIMEZONE</Text>
-          <Text className="font-medium text-sm">UTC</Text>
-        </Box>
-      </Flex>
-    </Box>
+        </div>
+        <div className="w-px bg-gray-300" />
+        <div>
+          <div className="mb-1 text-gray-600 text-xs">FROM</div>
+          <div className="font-medium text-sm">{timeRangeDisplay.start}</div>
+        </div>
+        <div className="w-px bg-gray-300" />
+        <div>
+          <div className="mb-1 text-gray-600 text-xs">TO</div>
+          <div className="font-medium text-sm">{timeRangeDisplay.end}</div>
+        </div>
+        <div className="w-px bg-gray-300" />
+        <div>
+          <div className="mb-1 text-gray-600 text-xs">TIMEZONE</div>
+          <div className="font-medium text-sm">UTC</div>
+        </div>
+      </div>
+    </div>
   );
 };
 

From 8e07663eff104071384f85a42986b2ddb7708ea8 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Tue, 3 Feb 2026 18:59:17 +0100
Subject: [PATCH 09/14] observability: use conversion utils

---
 .../components/pages/observability/metric-chart.tsx   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
index ff52793a3..effb4c6cf 100644
--- a/frontend/src/components/pages/observability/metric-chart.tsx
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -17,6 +17,7 @@ import { useExecuteRangeQuery } from 'react-query/api/observability';
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 
 import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
+import { prettyNumber } from 'utils/utils';
 import {
   ChartContainer,
   ChartLegend,
@@ -194,15 +195,9 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
                 : undefined
             }
             tickFormatter={(value) => {
-              // Format large numbers with K, M, B suffixes
-              if (value >= 1_000_000_000) {
-                return `${(value / 1_000_000_000).toFixed(1)}B`;
-              }
-              if (value >= 1_000_000) {
-                return `${(value / 1_000_000).toFixed(1)}M`;
-              }
+              // Use prettyNumber for large values (handles K, M, B formatting)
               if (value >= 1000) {
-                return `${(value / 1000).toFixed(1)}K`;
+                return prettyNumber(value).toUpperCase();
               }
               // Show decimals for small values
               if (value < 10) {

From d713e215f36a2f53d3c6b760fcd5ee5ed2a52c39 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Wed, 4 Feb 2026 09:53:07 +0100
Subject: [PATCH 10/14] observability: regen routeTree

---
 frontend/src/routeTree.gen.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 4608e71c3..b5f23ca3b 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -23,6 +23,7 @@ import { Route as SecurityIndexRouteImport } from './routes/security/index';
 import { Route as SecretsIndexRouteImport } from './routes/secrets/index';
 import { Route as SchemaRegistryIndexRouteImport } from './routes/schema-registry/index';
 import { Route as OverviewIndexRouteImport } from './routes/overview/index';
+import { Route as ObservabilityIndexRouteImport } from './routes/observability/index';
 import { Route as McpServersIndexRouteImport } from './routes/mcp-servers/index';
 import { Route as LoginIndexRouteImport } from './routes/login/index';
 import { Route as KnowledgebasesIndexRouteImport } from './routes/knowledgebases/index';
@@ -144,6 +145,11 @@ const OverviewIndexRoute = OverviewIndexRouteImport.update({
   path: '/overview/',
   getParentRoute: () => rootRouteImport,
 } as any);
+const ObservabilityIndexRoute = ObservabilityIndexRouteImport.update({
+  id: '/observability/',
+  path: '/observability/',
+  getParentRoute: () => rootRouteImport,
+} as any);
 const McpServersIndexRoute = McpServersIndexRouteImport.update({
   id: '/mcp-servers/',
   path: '/mcp-servers/',
@@ -443,6 +449,7 @@ export interface FileRoutesByFullPath {
   '/knowledgebases/': typeof KnowledgebasesIndexRoute;
   '/login/': typeof LoginIndexRoute;
   '/mcp-servers/': typeof McpServersIndexRoute;
+  '/observability/': typeof ObservabilityIndexRoute;
   '/overview/': typeof OverviewIndexRoute;
   '/schema-registry/': typeof SchemaRegistryIndexRoute;
   '/secrets/': typeof SecretsIndexRoute;
@@ -509,6 +516,7 @@ export interface FileRoutesByTo {
   '/knowledgebases': typeof KnowledgebasesIndexRoute;
   '/login': typeof LoginIndexRoute;
   '/mcp-servers': typeof McpServersIndexRoute;
+  '/observability': typeof ObservabilityIndexRoute;
   '/overview': typeof OverviewIndexRoute;
   '/schema-registry': typeof SchemaRegistryIndexRoute;
   '/secrets': typeof SecretsIndexRoute;
@@ -576,6 +584,7 @@ export interface FileRoutesById {
   '/knowledgebases/': typeof KnowledgebasesIndexRoute;
   '/login/': typeof LoginIndexRoute;
   '/mcp-servers/': typeof McpServersIndexRoute;
+  '/observability/': typeof ObservabilityIndexRoute;
   '/overview/': typeof OverviewIndexRoute;
   '/schema-registry/': typeof SchemaRegistryIndexRoute;
   '/secrets/': typeof SecretsIndexRoute;
@@ -644,6 +653,7 @@ export interface FileRouteTypes {
     | '/knowledgebases/'
     | '/login/'
     | '/mcp-servers/'
+    | '/observability/'
     | '/overview/'
     | '/schema-registry/'
     | '/secrets/'
@@ -710,6 +720,7 @@ export interface FileRouteTypes {
     | '/knowledgebases'
     | '/login'
     | '/mcp-servers'
+    | '/observability'
     | '/overview'
     | '/schema-registry'
     | '/secrets'
@@ -776,6 +787,7 @@ export interface FileRouteTypes {
     | '/knowledgebases/'
     | '/login/'
     | '/mcp-servers/'
+    | '/observability/'
     | '/overview/'
     | '/schema-registry/'
     | '/secrets/'
@@ -843,6 +855,7 @@ export interface RootRouteChildren {
   KnowledgebasesIndexRoute: typeof KnowledgebasesIndexRoute;
   LoginIndexRoute: typeof LoginIndexRoute;
   McpServersIndexRoute: typeof McpServersIndexRoute;
+  ObservabilityIndexRoute: typeof ObservabilityIndexRoute;
   OverviewIndexRoute: typeof OverviewIndexRoute;
   SchemaRegistryIndexRoute: typeof SchemaRegistryIndexRoute;
   SecretsIndexRoute: typeof SecretsIndexRoute;
@@ -980,6 +993,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof OverviewIndexRouteImport;
       parentRoute: typeof rootRouteImport;
     };
+    '/observability/': {
+      id: '/observability/';
+      path: '/observability';
+      fullPath: '/observability/';
+      preLoaderRoute: typeof ObservabilityIndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
     '/mcp-servers/': {
       id: '/mcp-servers/';
       path: '/mcp-servers';
@@ -1363,6 +1383,7 @@ const rootRouteChildren: RootRouteChildren = {
   KnowledgebasesIndexRoute: KnowledgebasesIndexRoute,
   LoginIndexRoute: LoginIndexRoute,
   McpServersIndexRoute: McpServersIndexRoute,
+  ObservabilityIndexRoute: ObservabilityIndexRoute,
   OverviewIndexRoute: OverviewIndexRoute,
   SchemaRegistryIndexRoute: SchemaRegistryIndexRoute,
   SecretsIndexRoute: SecretsIndexRoute,

From 1c675d42b704d7f2625edc3200c23d6e8fdf950c Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Thu, 5 Feb 2026 12:13:10 +0100
Subject: [PATCH 11/14] observability: first pass on comments

---
 .../pages/observability/metric-chart.tsx      | 40 +++++++++----------
 .../observability/observability-page.tsx      |  6 +--
 .../observability/observability-toolbar.tsx   | 10 +----
 3 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
index effb4c6cf..d7ac3791f 100644
--- a/frontend/src/components/pages/observability/metric-chart.tsx
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -16,8 +16,8 @@ import { useMemo } from 'react';
 import { useExecuteRangeQuery } from 'react-query/api/observability';
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 
+import { prettyNumber } from '../../../utils/utils';
 import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
-import { prettyNumber } from 'utils/utils';
 import {
   ChartContainer,
   ChartLegend,
@@ -28,6 +28,14 @@ import {
 import { Skeleton } from '../../redpanda-ui/components/skeleton';
 import { Heading } from '../../redpanda-ui/components/typography';
 
+const CHART_COLORS = [
+  'var(--color-chart-1)',
+  'var(--color-chart-2)',
+  'var(--color-chart-3)',
+  'var(--color-chart-4)',
+  'var(--color-chart-5)',
+] as const;
+
 type MetricChartProps = {
   queryName: string;
   timeRange: {
@@ -106,18 +114,11 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
   // Chart configuration
   const chartConfig = useMemo(() => {
     const config: Record<string, { label: string; color: string }> = {};
-    const colors = [
-      'var(--color-chart-1)',
-      'var(--color-chart-2)',
-      'var(--color-chart-3)',
-      'var(--color-chart-4)',
-      'var(--color-chart-5)',
-    ];
 
     for (let i = 0; i < seriesNames.length; i++) {
       config[seriesNames[i]] = {
         label: seriesNames[i],
-        color: colors[i % colors.length],
+        color: CHART_COLORS[i % CHART_COLORS.length],
       };
     }
 
@@ -127,7 +128,7 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
   if (isLoading) {
     return (
       <div className="rounded-md border border-gray-200 p-4">
-        <Skeleton className="h-[200px] mt-2" />
+        <Skeleton className="mt-2 h-[200px]" />
       </div>
     );
   }
@@ -135,7 +136,7 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
   if (isError || !data) {
     return (
       <div className="rounded-md border border-gray-200 p-4">
-        <Alert variant="warning" className="mt-2">
+        <Alert className="mt-2" variant="warning">
           <AlertDescription>Failed to load data for this metric</AlertDescription>
         </Alert>
       </div>
@@ -146,11 +147,11 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
     return (
       <div className="rounded-md border border-gray-200 p-4">
         {data.metadata?.description ? (
-          <Heading level={4} className="mb-4">
+          <Heading className="mb-4" level={4}>
             {data.metadata.description}
           </Heading>
         ) : null}
-        <Alert variant="info" className="mt-2">
+        <Alert className="mt-2" variant="info">
           <AlertDescription>No data available for this time range</AlertDescription>
         </Alert>
       </div>
@@ -160,7 +161,7 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
   return (
     <div className="rounded-md border border-gray-200 p-4">
       {data.metadata?.description ? (
-        <Heading level={3} className="mb-4">
+        <Heading className="mb-4" level={3}>
           {data.metadata.description}
         </Heading>
       ) : null}
@@ -229,17 +230,12 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
                 }}
                 hideLabel={false}
                 labelFormatter={(_value, payload) => {
-                  // Get timestamp from payload data
                   const timestamp = payload?.[0]?.payload?.timestamp;
-                  if (!timestamp) {
-                    return '';
-                  }
-                  const ts = typeof timestamp === 'number' ? timestamp : Number(timestamp);
-                  if (Number.isNaN(ts)) {
+                  if (!timestamp || typeof timestamp !== 'number') {
                     return '';
                   }
-                  const date = new Date(ts);
-                  if (Number.isNaN(date.getTime())) {
+                  const date = new Date(timestamp);
+                  if (!date.getTime()) {
                     return '';
                   }
                   return date.toLocaleString('en-US', {
diff --git a/frontend/src/components/pages/observability/observability-page.tsx b/frontend/src/components/pages/observability/observability-page.tsx
index 53e3401a9..c1407a721 100644
--- a/frontend/src/components/pages/observability/observability-page.tsx
+++ b/frontend/src/components/pages/observability/observability-page.tsx
@@ -15,10 +15,10 @@ import { useListQueries } from 'react-query/api/observability';
 import { appGlobal } from 'state/app-global';
 import { uiState } from 'state/ui-state';
 
-import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
-import { Skeleton } from '../../redpanda-ui/components/skeleton';
 import { MetricChart } from './metric-chart';
 import { calculateTimeRange, ObservabilityToolbar, type TimeRange } from './observability-toolbar';
+import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
+import { Skeleton } from '../../redpanda-ui/components/skeleton';
 
 const ObservabilityPage: FC = () => {
   const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>('1h');
@@ -80,7 +80,7 @@ const ObservabilityPage: FC = () => {
       />
 
       {queries?.queries && queries.queries.length > 0 ? (
-        <div className="grid gap-6 grid-cols-1 lg:grid-cols-2">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
           {queries.queries.map((query) => (
             <MetricChart key={query.name} queryName={query.name} timeRange={timeRange} />
           ))}
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
index a109505e5..da8688b8b 100644
--- a/frontend/src/components/pages/observability/observability-toolbar.tsx
+++ b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -42,15 +42,7 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
   refreshKey,
 }) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
-  const timeRange = useMemo(() => {
-    const now = new Date();
-    const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
-
-    return {
-      start: startTime,
-      end: now,
-    };
-  }, [selectedTimeRange, refreshKey]);
+  const timeRange = useMemo(() => calculateTimeRange(selectedTimeRange), [selectedTimeRange, refreshKey]);
 
   const timeRangeDisplay = useMemo(() => {
     const formatDate = (date: Date) =>

From 67a1902f3a69a0e3bdb994ca032096d59927cb15 Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Thu, 5 Feb 2026 15:03:58 +0100
Subject: [PATCH 12/14] observability: move some code to utils

---
 .../pages/observability/metric-chart.tsx      | 54 +---------------
 .../observability/observability-page.tsx      |  3 +-
 .../observability/observability-toolbar.tsx   | 62 ++++--------------
 .../pages/observability/utils/chart-data.ts   | 64 +++++++++++++++++++
 .../pages/observability/utils/time-range.ts   | 56 ++++++++++++++++
 5 files changed, 137 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/components/pages/observability/utils/chart-data.ts
 create mode 100644 frontend/src/components/pages/observability/utils/time-range.ts

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
index d7ac3791f..35a86efab 100644
--- a/frontend/src/components/pages/observability/metric-chart.tsx
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -10,12 +10,12 @@
  */
 
 import { timestampFromMs } from '@bufbuild/protobuf/wkt';
-import type { ExecuteRangeQueryResponse } from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import { useExecuteRangeQuery } from 'react-query/api/observability';
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 
+import { CHART_COLORS, transformTimeSeriesData } from './utils/chart-data';
 import { prettyNumber } from '../../../utils/utils';
 import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
 import {
@@ -28,14 +28,6 @@ import {
 import { Skeleton } from '../../redpanda-ui/components/skeleton';
 import { Heading } from '../../redpanda-ui/components/typography';
 
-const CHART_COLORS = [
-  'var(--color-chart-1)',
-  'var(--color-chart-2)',
-  'var(--color-chart-3)',
-  'var(--color-chart-4)',
-  'var(--color-chart-5)',
-] as const;
-
 type MetricChartProps = {
   queryName: string;
   timeRange: {
@@ -44,50 +36,6 @@ type MetricChartProps = {
   };
 };
 
-// Helper to add data point to timestamp map
-function addDataPoint(
-  timestampMap: Map<number, { timestamp: number; [key: string]: number }>,
-  seriesName: string,
-  point: { timestamp?: { seconds: bigint }; value?: number }
-): void {
-  if (!point.timestamp || point.value === undefined) {
-    return;
-  }
-
-  // Convert seconds to milliseconds for JavaScript Date
-  const ts = Number(point.timestamp.seconds) * 1000;
-
-  if (!timestampMap.has(ts)) {
-    timestampMap.set(ts, { timestamp: ts });
-  }
-
-  const entry = timestampMap.get(ts);
-  if (entry) {
-    entry[seriesName] = point.value;
-  }
-}
-
-// Helper function to transform time series data into chart format
-function transformTimeSeriesData(results: ExecuteRangeQueryResponse['results']): Array<{
-  timestamp: number;
-  [key: string]: number;
-}> {
-  if (!results || results.length === 0) {
-    return [];
-  }
-
-  const timestampMap = new Map<number, { timestamp: number; [key: string]: number }>();
-
-  for (const series of results) {
-    const seriesName = series.name || 'value';
-    for (const point of series.values) {
-      addDataPoint(timestampMap, seriesName, point);
-    }
-  }
-
-  return Array.from(timestampMap.values()).sort((a, b) => a.timestamp - b.timestamp);
-}
-
 export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
   const { data, isLoading, isError } = useExecuteRangeQuery({
     queryName,
diff --git a/frontend/src/components/pages/observability/observability-page.tsx b/frontend/src/components/pages/observability/observability-page.tsx
index c1407a721..2461d810d 100644
--- a/frontend/src/components/pages/observability/observability-page.tsx
+++ b/frontend/src/components/pages/observability/observability-page.tsx
@@ -16,7 +16,8 @@ import { appGlobal } from 'state/app-global';
 import { uiState } from 'state/ui-state';
 
 import { MetricChart } from './metric-chart';
-import { calculateTimeRange, ObservabilityToolbar, type TimeRange } from './observability-toolbar';
+import { ObservabilityToolbar } from './observability-toolbar';
+import { calculateTimeRange, type TimeRange } from './utils/time-range';
 import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
 import { Skeleton } from '../../redpanda-ui/components/skeleton';
 
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
index da8688b8b..9dfe1b12d 100644
--- a/frontend/src/components/pages/observability/observability-toolbar.tsx
+++ b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -12,24 +12,10 @@
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
+import type { TimeRange } from './utils/time-range';
+import { calculateTimeRange, formatTimeRangeDate, TIME_RANGE_OPTIONS } from './utils/time-range';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../redpanda-ui/components/select';
 
-export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h';
-
-const TIME_RANGE_MS: Record<TimeRange, number> = {
-  '5m': 5 * 60 * 1000,
-  '15m': 15 * 60 * 1000,
-  '30m': 30 * 60 * 1000,
-  '1h': 60 * 60 * 1000,
-  '3h': 3 * 60 * 60 * 1000,
-  '6h': 6 * 60 * 60 * 1000,
-};
-
-export type TimeRangeDates = {
-  start: Date;
-  end: Date;
-};
-
 type ObservabilityToolbarProps = {
   selectedTimeRange: TimeRange;
   onTimeRangeChange: (timeRange: TimeRange) => void;
@@ -44,22 +30,13 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
   // biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
   const timeRange = useMemo(() => calculateTimeRange(selectedTimeRange), [selectedTimeRange, refreshKey]);
 
-  const timeRangeDisplay = useMemo(() => {
-    const formatDate = (date: Date) =>
-      date.toLocaleString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-        timeZone: 'UTC',
-      });
-
-    return {
-      start: formatDate(timeRange.start),
-      end: formatDate(timeRange.end),
-    };
-  }, [timeRange]);
+  const timeRangeDisplay = useMemo(
+    () => ({
+      start: formatTimeRangeDate(timeRange.start),
+      end: formatTimeRangeDate(timeRange.end),
+    }),
+    [timeRange]
+  );
 
   return (
     <div className="rounded-md border border-gray-200 p-4 shadow-sm">
@@ -71,12 +48,11 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="5m">Last 5m</SelectItem>
-              <SelectItem value="15m">Last 15m</SelectItem>
-              <SelectItem value="30m">Last 30m</SelectItem>
-              <SelectItem value="1h">Last 1h</SelectItem>
-              <SelectItem value="3h">Last 3h</SelectItem>
-              <SelectItem value="6h">Last 6h</SelectItem>
+              {TIME_RANGE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
         </div>
@@ -99,13 +75,3 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
     </div>
   );
 };
-
-export function calculateTimeRange(selectedTimeRange: TimeRange): TimeRangeDates {
-  const now = new Date();
-  const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
-
-  return {
-    start: startTime,
-    end: now,
-  };
-}
diff --git a/frontend/src/components/pages/observability/utils/chart-data.ts b/frontend/src/components/pages/observability/utils/chart-data.ts
new file mode 100644
index 000000000..21c5af249
--- /dev/null
+++ b/frontend/src/components/pages/observability/utils/chart-data.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import type { ExecuteRangeQueryResponse } from 'protogen/redpanda/api/dataplane/v1alpha3/observability_pb';
+
+export const CHART_COLORS = [
+  'var(--color-chart-1)',
+  'var(--color-chart-2)',
+  'var(--color-chart-3)',
+  'var(--color-chart-4)',
+  'var(--color-chart-5)',
+] as const;
+
+// Helper to add data point to timestamp map
+function addDataPoint(
+  timestampMap: Map<number, { timestamp: number; [key: string]: number }>,
+  seriesName: string,
+  point: { timestamp?: { seconds: bigint }; value?: number }
+): void {
+  if (!point.timestamp || point.value === undefined) {
+    return;
+  }
+
+  // Convert seconds to milliseconds for JavaScript Date
+  const ts = Number(point.timestamp.seconds) * 1000;
+
+  if (!timestampMap.has(ts)) {
+    timestampMap.set(ts, { timestamp: ts });
+  }
+
+  const entry = timestampMap.get(ts);
+  if (entry) {
+    entry[seriesName] = point.value;
+  }
+}
+
+// Helper function to transform time series data into chart format
+export function transformTimeSeriesData(results: ExecuteRangeQueryResponse['results']): Array<{
+  timestamp: number;
+  [key: string]: number;
+}> {
+  if (!results || results.length === 0) {
+    return [];
+  }
+
+  const timestampMap = new Map<number, { timestamp: number; [key: string]: number }>();
+
+  for (const series of results) {
+    const seriesName = series.name || 'value';
+    for (const point of series.values) {
+      addDataPoint(timestampMap, seriesName, point);
+    }
+  }
+
+  return Array.from(timestampMap.values()).sort((a, b) => a.timestamp - b.timestamp);
+}
diff --git a/frontend/src/components/pages/observability/utils/time-range.ts b/frontend/src/components/pages/observability/utils/time-range.ts
new file mode 100644
index 000000000..d9b1407f9
--- /dev/null
+++ b/frontend/src/components/pages/observability/utils/time-range.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h';
+
+export type TimeRangeDates = {
+  start: Date;
+  end: Date;
+};
+
+export const TIME_RANGE_MS: Record<TimeRange, number> = {
+  '5m': 5 * 60 * 1000,
+  '15m': 15 * 60 * 1000,
+  '30m': 30 * 60 * 1000,
+  '1h': 60 * 60 * 1000,
+  '3h': 3 * 60 * 60 * 1000,
+  '6h': 6 * 60 * 60 * 1000,
+};
+
+export const TIME_RANGE_OPTIONS: Array<{ value: TimeRange; label: string }> = [
+  { value: '5m', label: 'Last 5m' },
+  { value: '15m', label: 'Last 15m' },
+  { value: '30m', label: 'Last 30m' },
+  { value: '1h', label: 'Last 1h' },
+  { value: '3h', label: 'Last 3h' },
+  { value: '6h', label: 'Last 6h' },
+];
+
+export function calculateTimeRange(selectedTimeRange: TimeRange): TimeRangeDates {
+  const now = new Date();
+  const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
+
+  return {
+    start: startTime,
+    end: now,
+  };
+}
+
+export function formatTimeRangeDate(date: Date): string {
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZone: 'UTC',
+  });
+}

From bbc0d52ee57b6464857ababc01660d4d288709df Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Thu, 5 Feb 2026 18:13:14 +0100
Subject: [PATCH 13/14] observability: apply unit conversion to Y axis

---
 .../pages/observability/metric-chart.tsx      |  34 +----
 frontend/src/utils/unit.test.ts               |  56 ++++++++
 frontend/src/utils/unit.ts                    | 120 ++++++++++++++++++
 3 files changed, 181 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/utils/unit.test.ts
 create mode 100644 frontend/src/utils/unit.ts

diff --git a/frontend/src/components/pages/observability/metric-chart.tsx b/frontend/src/components/pages/observability/metric-chart.tsx
index 35a86efab..982c3e6f7 100644
--- a/frontend/src/components/pages/observability/metric-chart.tsx
+++ b/frontend/src/components/pages/observability/metric-chart.tsx
@@ -16,7 +16,7 @@ import { useExecuteRangeQuery } from 'react-query/api/observability';
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 
 import { CHART_COLORS, transformTimeSeriesData } from './utils/chart-data';
-import { prettyNumber } from '../../../utils/utils';
+import { formatWithUnit } from '../../../utils/unit';
 import { Alert, AlertDescription } from '../../redpanda-ui/components/alert';
 import {
   ChartContainer,
@@ -133,31 +133,9 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
           />
           <YAxis
             axisLine={false}
-            label={
-              data.metadata?.unit
-                ? {
-                    value: data.metadata.unit,
-                    angle: -90,
-                    position: 'insideLeft',
-                    style: { textAnchor: 'middle' },
-                  }
-                : undefined
-            }
-            tickFormatter={(value) => {
-              // Use prettyNumber for large values (handles K, M, B formatting)
-              if (value >= 1000) {
-                return prettyNumber(value).toUpperCase();
-              }
-              // Show decimals for small values
-              if (value < 10) {
-                return value.toFixed(2);
-              }
-              if (value < 100) {
-                return value.toFixed(1);
-              }
-              return value.toFixed(0);
-            }}
+            tickFormatter={(value) => formatWithUnit(value, data.metadata?.unit)}
             tickLine={false}
+            width={80}
           />
           <ChartTooltip
             content={
@@ -165,14 +143,12 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
                 className="min-w-[200px]"
                 formatter={(value, name, item) => {
                   const indicatorColor = item.payload.fill || item.color;
+                  const formattedValue = typeof value === 'number' ? formatWithUnit(value, data.metadata?.unit) : value;
                   return (
                     <div className="flex w-full items-center gap-3">
                       <div className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: indicatorColor }} />
                       <span className="text-muted-foreground">{name}</span>
-                      <span className="ml-auto font-medium font-mono tabular-nums">
-                        {value?.toLocaleString()}
-                        {data.metadata?.unit ? ` ${data.metadata.unit}` : ''}
-                      </span>
+                      <span className="ml-auto font-medium font-mono tabular-nums">{formattedValue}</span>
                     </div>
                   );
                 }}
diff --git a/frontend/src/utils/unit.test.ts b/frontend/src/utils/unit.test.ts
new file mode 100644
index 000000000..335132de2
--- /dev/null
+++ b/frontend/src/utils/unit.test.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { describe, expect, test } from 'vitest';
+
+import { formatWithUnit } from './unit';
+
+describe('formatWithUnit', () => {
+  test('formats bytes with scale', () => {
+    expect(formatWithUnit(512, 'bytes')).toBe('512 B');
+    expect(formatWithUnit(1024, 'bytes')).toBe('1.0 KB');
+    expect(formatWithUnit(1_500_000, 'bytes')).toBe('1.5 MB');
+    expect(formatWithUnit(2_000_000_000, 'BYTES')).toBe('2.0 GB');
+  });
+
+  test('formats bytes per second', () => {
+    expect(formatWithUnit(2048, 'bytes/second')).toBe('2.0 KB/s');
+    expect(formatWithUnit(1_500_000, 'B/s')).toBe('1.5 MB/s');
+  });
+
+  test('formats time units', () => {
+    expect(formatWithUnit(150, 'ms')).toBe('150 ms');
+    expect(formatWithUnit(1500, 'milliseconds')).toBe('1.5K ms');
+    expect(formatWithUnit(45, 'seconds')).toBe('45.0 s');
+  });
+
+  test('formats compound units', () => {
+    expect(formatWithUnit(1500, 'requests/second')).toBe('1.5K req/s');
+    expect(formatWithUnit(120, 'operations/minute')).toBe('120 ope/min');
+  });
+
+  test('abbreviates unknown units to 3 chars', () => {
+    expect(formatWithUnit(42, 'widgets')).toBe('42.0 wid');
+    expect(formatWithUnit(5, 'kg')).toBe('5.00 kg');
+  });
+
+  test('formats numbers without units', () => {
+    expect(formatWithUnit(1500, undefined)).toBe('1.5K');
+    expect(formatWithUnit(5, undefined)).toBe('5.00');
+    expect(formatWithUnit(1_000_000, undefined)).toBe('1.0M');
+  });
+
+  test('handles edge cases', () => {
+    expect(formatWithUnit(0, 'bytes')).toBe('0.00 B');
+    expect(formatWithUnit(-100, 'bytes')).toBe('-100 B');
+    expect(formatWithUnit(1024, '  bytes  ')).toBe('1.0 KB');
+  });
+});
diff --git a/frontend/src/utils/unit.ts b/frontend/src/utils/unit.ts
new file mode 100644
index 000000000..c2cc87fe8
--- /dev/null
+++ b/frontend/src/utils/unit.ts
@@ -0,0 +1,120 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+/**
+ * Unit abbreviations map
+ */
+const UNIT_ABBREV: Record<string, string> = {
+  // Bytes
+  byte: 'B',
+  bytes: 'B',
+  b: 'B',
+
+  // Time
+  second: 's',
+  seconds: 's',
+  sec: 's',
+  s: 's',
+
+  millisecond: 'ms',
+  milliseconds: 'ms',
+  ms: 'ms',
+
+  minute: 'min',
+  minutes: 'min',
+  min: 'min',
+
+  hour: 'h',
+  hours: 'h',
+  h: 'h',
+
+  day: 'd',
+  days: 'd',
+  d: 'd',
+};
+
+/**
+ * Abbreviate a single unit
+ */
+function abbreviateUnit(unit: string): string {
+  const normalized = unit.toLowerCase().trim();
+
+  if (UNIT_ABBREV[normalized]) {
+    return UNIT_ABBREV[normalized];
+  }
+
+  // Truncate to 3 chars
+  return normalized.substring(0, 3);
+}
+
+/**
+ * Canonicalize a unit to form "x" or "x/y"
+ */
+function canonicalizeUnit(unit: string): string {
+  if (!unit) return '';
+
+  const normalized = unit.toLowerCase().trim();
+
+  if (normalized.includes('/')) {
+    const [numerator, denominator] = normalized.split('/').map((s) => s.trim());
+    return `${abbreviateUnit(numerator)}/${abbreviateUnit(denominator)}`;
+  }
+
+  return abbreviateUnit(normalized);
+}
+
+/**
+ * Format a number and return formatted value and scale
+ */
+function formatNumber(value: number): { formatted: string; scale: string } {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? '-' : '';
+
+  if (abs >= 1_000_000_000) {
+    return { formatted: `${sign}${(abs / 1_000_000_000).toFixed(1)}`, scale: 'G' };
+  }
+  if (abs >= 1_000_000) {
+    return { formatted: `${sign}${(abs / 1_000_000).toFixed(1)}`, scale: 'M' };
+  }
+  if (abs >= 1000) {
+    return { formatted: `${sign}${(abs / 1000).toFixed(1)}`, scale: 'K' };
+  }
+
+  // Small numbers
+  if (abs < 10) {
+    return { formatted: `${sign}${abs.toFixed(2)}`, scale: '' };
+  }
+  if (abs < 100) {
+    return { formatted: `${sign}${abs.toFixed(1)}`, scale: '' };
+  }
+  return { formatted: `${sign}${abs.toFixed(0)}`, scale: '' };
+}
+
+/**
+ * Format a number with its unit
+ */
+export function formatWithUnit(value: number, unit: string | undefined): string {
+  if (!unit) {
+    const { formatted, scale } = formatNumber(value);
+    return `${formatted}${scale}`;
+  }
+
+  const canonical = canonicalizeUnit(unit);
+  const { formatted, scale } = formatNumber(value);
+
+  // If numerator is B (bytes), attach scale to the unit
+  if (canonical === 'B' || canonical.startsWith('B/')) {
+    return `${formatted} ${scale}${canonical}`.trim();
+  }
+
+  // For other units, attach scale to the number
+  return `${formatted}${scale} ${canonical}`.trim();
+}

From 3d3f76535d8cf5c321993e6a817089ace9b5713b Mon Sep 17 00:00:00 2001
From: nicolaferraro <ni.ferraro@gmail.com>
Date: Thu, 5 Feb 2026 18:40:43 +0100
Subject: [PATCH 14/14] observability: use a common time-range approach with
 transcripts

---
 .../observability/observability-page.tsx      |  2 +-
 .../observability/observability-toolbar.tsx   | 21 +++++--
 .../pages/observability/utils/time-range.ts   | 56 -------------------
 .../components/transcript-filter-bar.tsx      | 18 +-----
 .../transcripts/transcript-list-page.tsx      | 12 +---
 frontend/src/utils/time-range.ts              | 52 +++++++++++++++++
 6 files changed, 74 insertions(+), 87 deletions(-)
 delete mode 100644 frontend/src/components/pages/observability/utils/time-range.ts
 create mode 100644 frontend/src/utils/time-range.ts

diff --git a/frontend/src/components/pages/observability/observability-page.tsx b/frontend/src/components/pages/observability/observability-page.tsx
index 2461d810d..0473c0663 100644
--- a/frontend/src/components/pages/observability/observability-page.tsx
+++ b/frontend/src/components/pages/observability/observability-page.tsx
@@ -17,7 +17,7 @@ import { uiState } from 'state/ui-state';
 
 import { MetricChart } from './metric-chart';
 import { ObservabilityToolbar } from './observability-toolbar';
-import { calculateTimeRange, type TimeRange } from './utils/time-range';
+import { calculateTimeRange, type TimeRange } from '../../../utils/time-range';
 import { Alert, AlertDescription, AlertTitle } from '../../redpanda-ui/components/alert';
 import { Skeleton } from '../../redpanda-ui/components/skeleton';
 
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
index 9dfe1b12d..af37661aa 100644
--- a/frontend/src/components/pages/observability/observability-toolbar.tsx
+++ b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -12,10 +12,23 @@
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
-import type { TimeRange } from './utils/time-range';
-import { calculateTimeRange, formatTimeRangeDate, TIME_RANGE_OPTIONS } from './utils/time-range';
+import type { TimeRange } from '../../../utils/time-range';
+import { calculateTimeRange, getTimeRanges } from '../../../utils/time-range';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../redpanda-ui/components/select';
 
+const TIME_RANGES = getTimeRanges(12 * 60 * 60 * 1000); // Up to 12 hours
+
+function formatTimeRangeDate(date: Date): string {
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZone: 'UTC',
+  });
+}
+
 type ObservabilityToolbarProps = {
   selectedTimeRange: TimeRange;
   onTimeRangeChange: (timeRange: TimeRange) => void;
@@ -44,11 +57,11 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
         <div>
           <div className="mb-1 text-gray-600 text-xs">TIME RANGE</div>
           <Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
-            <SelectTrigger className="h-8 w-[110px] text-sm">
+            <SelectTrigger className="h-8 w-[145px] text-sm">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {TIME_RANGE_OPTIONS.map((option) => (
+              {TIME_RANGES.map((option) => (
                 <SelectItem key={option.value} value={option.value}>
                   {option.label}
                 </SelectItem>
diff --git a/frontend/src/components/pages/observability/utils/time-range.ts b/frontend/src/components/pages/observability/utils/time-range.ts
deleted file mode 100644
index d9b1407f9..000000000
--- a/frontend/src/components/pages/observability/utils/time-range.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2026 Redpanda Data, Inc.
- *
- * Use of this software is governed by the Business Source License
- * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
- *
- * As of the Change Date specified in that file, in accordance with
- * the Business Source License, use of this software will be governed
- * by the Apache License, Version 2.0
- */
-
-export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h';
-
-export type TimeRangeDates = {
-  start: Date;
-  end: Date;
-};
-
-export const TIME_RANGE_MS: Record<TimeRange, number> = {
-  '5m': 5 * 60 * 1000,
-  '15m': 15 * 60 * 1000,
-  '30m': 30 * 60 * 1000,
-  '1h': 60 * 60 * 1000,
-  '3h': 3 * 60 * 60 * 1000,
-  '6h': 6 * 60 * 60 * 1000,
-};
-
-export const TIME_RANGE_OPTIONS: Array<{ value: TimeRange; label: string }> = [
-  { value: '5m', label: 'Last 5m' },
-  { value: '15m', label: 'Last 15m' },
-  { value: '30m', label: 'Last 30m' },
-  { value: '1h', label: 'Last 1h' },
-  { value: '3h', label: 'Last 3h' },
-  { value: '6h', label: 'Last 6h' },
-];
-
-export function calculateTimeRange(selectedTimeRange: TimeRange): TimeRangeDates {
-  const now = new Date();
-  const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
-
-  return {
-    start: startTime,
-    end: now,
-  };
-}
-
-export function formatTimeRangeDate(date: Date): string {
-  return date.toLocaleString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    timeZone: 'UTC',
-  });
-}
diff --git a/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx b/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx
index 3231b6a66..6fbb907ca 100644
--- a/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx
+++ b/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx
@@ -28,6 +28,7 @@ import type { LucideIcon } from 'lucide-react';
 import { AlertCircle, ArrowLeft, Bot, Plus, RefreshCw, Sparkles, Wrench, X, Zap } from 'lucide-react';
 import type { FC } from 'react';
 import { useState } from 'react';
+import { getTimeRanges } from 'utils/time-range';
 
 import { ServiceFilter, type ServiceInfo } from './service-filter';
 
@@ -114,22 +115,7 @@ const OPERATOR_OPTIONS: { value: AttributeOperator; label: string }[] = [
   { value: 'not_equals', label: 'not equals' },
 ];
 
-// Time range configuration
-type TimeRangeConfig = {
-  value: string;
-  label: string;
-};
-
-const TIME_RANGES: TimeRangeConfig[] = [
-  { value: '5m', label: 'Last 5 minutes' },
-  { value: '15m', label: 'Last 15 minutes' },
-  { value: '30m', label: 'Last 30 minutes' },
-  { value: '1h', label: 'Last 1 hour' },
-  { value: '3h', label: 'Last 3 hours' },
-  { value: '6h', label: 'Last 6 hours' },
-  { value: '12h', label: 'Last 12 hours' },
-  { value: '24h', label: 'Last 24 hours' },
-];
+const TIME_RANGES = getTimeRanges(24 * 60 * 60 * 1000); // Up to 24 hours
 
 // Jumped state type (matching transcript-list-page)
 type JumpedState = {
diff --git a/frontend/src/components/pages/transcripts/transcript-list-page.tsx b/frontend/src/components/pages/transcripts/transcript-list-page.tsx
index 04a082857..0f48f6862 100644
--- a/frontend/src/components/pages/transcripts/transcript-list-page.tsx
+++ b/frontend/src/components/pages/transcripts/transcript-list-page.tsx
@@ -29,6 +29,7 @@ import { ONE_MINUTE } from 'react-query/react-query.utils';
 import { appGlobal } from 'state/app-global';
 import { uiState } from 'state/ui-state';
 import { pluralize } from 'utils/string';
+import { getTimeRanges } from 'utils/time-range';
 import { z } from 'zod';
 
 import { LinkedTraceBanner } from './components/linked-trace-banner';
@@ -38,16 +39,7 @@ import { type SpanFilter, type SpanFilterPreset, TranscriptFilterBar } from './c
 import { TranscriptsTable } from './components/transcripts-table';
 import { calculateVisibleWindow } from './utils/transcript-statistics';
 
-const TIME_RANGES = [
-  { value: '5m', label: 'Last 5 minutes', ms: 5 * 60 * 1000 },
-  { value: '15m', label: 'Last 15 minutes', ms: 15 * 60 * 1000 },
-  { value: '30m', label: 'Last 30 minutes', ms: 30 * 60 * 1000 },
-  { value: '1h', label: 'Last 1 hour', ms: 60 * 60 * 1000 },
-  { value: '3h', label: 'Last 3 hours', ms: 3 * 60 * 60 * 1000 },
-  { value: '6h', label: 'Last 6 hours', ms: 6 * 60 * 60 * 1000 },
-  { value: '12h', label: 'Last 12 hours', ms: 12 * 60 * 60 * 1000 },
-  { value: '24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },
-];
+const TIME_RANGES = getTimeRanges(24 * 60 * 60 * 1000); // Up to 24 hours
 
 export const TRANSCRIPTS_PAGE_SIZE = 100;
 
diff --git a/frontend/src/utils/time-range.ts b/frontend/src/utils/time-range.ts
new file mode 100644
index 000000000..a56abdc18
--- /dev/null
+++ b/frontend/src/utils/time-range.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h' | '12h' | '24h';
+
+export type TimeRangeConfig = {
+  value: TimeRange;
+  label: string;
+  ms: number;
+};
+
+export type TimeRangeDates = {
+  start: Date;
+  end: Date;
+};
+
+const ALL_TIME_RANGES: TimeRangeConfig[] = [
+  { value: '5m', label: 'Last 5 minutes', ms: 5 * 60 * 1000 },
+  { value: '15m', label: 'Last 15 minutes', ms: 15 * 60 * 1000 },
+  { value: '30m', label: 'Last 30 minutes', ms: 30 * 60 * 1000 },
+  { value: '1h', label: 'Last 1 hour', ms: 60 * 60 * 1000 },
+  { value: '3h', label: 'Last 3 hours', ms: 3 * 60 * 60 * 1000 },
+  { value: '6h', label: 'Last 6 hours', ms: 6 * 60 * 60 * 1000 },
+  { value: '12h', label: 'Last 12 hours', ms: 12 * 60 * 60 * 1000 },
+  { value: '24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },
+];
+
+export function getTimeRanges(maxMs: number): TimeRangeConfig[] {
+  return ALL_TIME_RANGES.filter((range) => range.ms <= maxMs);
+}
+
+export function calculateTimeRange(selectedTimeRange: TimeRange): TimeRangeDates {
+  const now = new Date();
+  const config = ALL_TIME_RANGES.find((range) => range.value === selectedTimeRange);
+  if (!config) {
+    throw new Error(`Invalid time range: ${selectedTimeRange}`);
+  }
+  const startTime = new Date(now.getTime() - config.ms);
+
+  return {
+    start: startTime,
+    end: now,
+  };
+}