chore(ui): UI fixes (#7)

* feat: inital set of ui fixes

* chore: initial set of fixes for monitoring

* chore: remove scrollarea for sticky header to work.

* chore: tests

* chore: observability minor fixes, code refactoring

* fix: add tab level route

* feat: initial setup to support qp in modals + update tests

* fix: close all modals on success

* chore: control name error rendering

* fix: limit height of tables

* feat: observability ui updated

Author: siddhant-galileo

ui/AGENTS.md

@@ -49,11 +49,17 @@ pnpm fetch-api-types  # regenerate API types from server (must be running on :80
 - `core/page-components/` — actual page UI logic lives here
 - `core/layouts/` — app shell, sidebar navigation
 
-### Evaluator forms (`core/page-components/agent-detail/edit-control/evaluators/`)
+### Evaluator forms (`core/evaluators/`)
 - Each evaluator type has its own folder: `json/`, `sql/`, `regex/`, `list/`, `luna2/`
 - Each folder exports: `form.tsx` (React component), `types.ts` (form types), `index.ts` (re-exports)
 - Registry in `evaluators/index.ts` maps evaluator names to form components
 
+### Form guidelines (control definition + evaluator forms)
+- **Always use the input's `label` prop** — never render a separate `<Text>` above the input as the label. Use Mantine's built-in `label` so required asterisks and layout are consistent.
+- **Label with tooltip**: Use `LabelWithTooltip` from `@/core/components/label-with-tooltip` when a field needs an (i) icon that shows help text on hover. Pass `label={<LabelWithTooltip label="Field name" tooltip="Help text..." />}` and, for inputs that support it, `labelProps={labelPropsInline}` so the label renders inline.
+- **Required fields**: Use the input's `required` prop (e.g. Select, TextInput) so Mantine renders the red asterisk. Use `labelPropsInline` from the same module when you need the label inline.
+- Applies to: control definition form (`edit-control/control-definition-form.tsx`) and all evaluator forms (`core/evaluators/*/form.tsx`).
+
 ### Reusable components (`core/components/`)
 - Create reusable components that encapsulate common patterns and logic
 - **Best practice**: When creating wrapper components around Mantine components, extend the underlying component's props using `Omit` to exclude overridden props, then spread `...rest` to forward all other props
@@ -96,9 +102,9 @@ export function SearchInput({
 ## Common changes
 
 ### Add a new evaluator form
-1. Create folder in `core/page-components/agent-detail/edit-control/evaluators/<name>/`
+1. Create folder in `core/evaluators/<name>/`
 2. Add `types.ts` with form field types
-3. Add `form.tsx` with the form component (use Mantine form components)
+3. Add `form.tsx` with the form component — use Mantine form components with `label` prop and `LabelWithTooltip` from `@/core/components/label-with-tooltip` for fields that need a tooltip (see Form guidelines above)
 4. Add `index.ts` re-exporting form and types
 5. Register in `evaluators/index.ts`
 

ui/empty-css-module.js

@@ -0,0 +1,3 @@
+// Empty module to replace CSS imports from Jupiter DS
+// (we import the CSS manually in _app.tsx)
+module.exports = {};

ui/next.config.ts

@@ -4,6 +4,30 @@ const nextConfig: NextConfig = {
   pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
   reactStrictMode: true,
 
+  // Transpile Jupiter DS package to handle CSS imports
+  transpilePackages: ['@rungalileo/jupiter-ds'],
+  
+  // Configure webpack to ignore CSS imports from Jupiter DS
+  // (we import the CSS manually in _app.tsx)
+  webpack: (config) => {
+    const webpack = require('webpack');
+    
+    // Replace CSS imports from Jupiter DS with empty module
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        /^@mantine\/dates\/styles\.css$/,
+        (resource: any) => {
+          // Only replace if imported from Jupiter DS
+          if (resource.context && resource.context.includes('@rungalileo/jupiter-ds')) {
+            resource.request = require.resolve('./empty-css-module.js');
+          }
+        }
+      )
+    );
+    
+    return config;
+  },
+  
   // Optimize for CI/test builds
   ...(process.env.CI && {
     // Disable source maps in CI (faster builds, not needed for tests)

ui/package.json

@@ -17,6 +17,8 @@
     "test:integration:report": "playwright show-report"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@mantine/charts": "^7.17.8",
     "@mantine/code-highlight": "7.17.5",
     "@mantine/core": "7.17.5",
     "@mantine/dates": "7.17.5",
@@ -26,7 +28,7 @@
     "@mantine/modals": "7.17.7",
     "@mantine/notifications": "7.17.7",
     "@rungalileo/icons": "^0.0.1",
-    "@rungalileo/jupiter-ds": "^0.0.2",
+    "@rungalileo/jupiter-ds": "^0.0.7",
     "@tabler/icons-react": "3.31",
     "@tanstack/react-query": "5.74.4",
     "@tanstack/react-query-devtools": "5.72.2",
@@ -38,7 +40,8 @@
     "next": "15.4.10",
     "openapi-fetch": "0.14.0",
     "react": "^19.1.4",
-    "react-dom": "^19.1.4"
+    "react-dom": "^19.1.4",
+    "recharts": "2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",