Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions ui/AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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`

Expand Down
3 changes: 3 additions & 0 deletions ui/empty-css-module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Empty module to replace CSS imports from Jupiter DS
// (we import the CSS manually in _app.tsx)
module.exports = {};
24 changes: 24 additions & 0 deletions ui/next.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
7 changes: 5 additions & 2 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
Loading
Loading