@vertesia/ui 0.80.0-dev.20251121 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.80.0-dev.20251121",
+  "version": "0.80.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -44,26 +44,29 @@
     "fast-xml-parser": "^5.2.3",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
+    "html-to-image": "^1.11.13",
     "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.511.0",
     "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
-    "react": "^19.1.0",
+    "react": "^19.2.3",
     "react-calendar": "^6.0.0",
     "react-date-picker": "^11.0.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^10.1.0",
+    "react-pdf": "^10.2.0",
     "react-resizable-panels": "^3.0.6",
+    "recharts": "^3.5.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.80.0-dev.20251121",
-    "@vertesia/json": "0.80.0-dev.20251121",
-    "@vertesia/common": "0.80.0-dev.20251121"
+    "@vertesia/client": "0.80.0",
+    "@vertesia/json": "0.80.0",
+    "@vertesia/common": "0.80.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -73,8 +76,8 @@
     "@types/json-schema": "^7.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.15.21",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "eslint": "^9.27.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",

package/src/core/components/MenuList.tsx

@@ -7,7 +7,7 @@ interface MenuListProps {
 }
 export function MenuList({ className, children }: MenuListProps) {
     return (
-        <ul className={`${className} space-y-1 flex flex-col items-start dark:px-2`}>
+        <ul className={`${className} space-y-1 flex flex-col items-start`}>
             {children}
         </ul>
     )
@@ -21,11 +21,8 @@ interface MenuListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 const MenuListItem = forwardRef<HTMLAnchorElement, MenuListItemProps>(function _MenuListItem(props, ref) {
     const { current, children, className, href = '#', onClick, ...others } = props;
     return (
-        <li className={clsx(className, current ?
-            'bg-gray-50 text-indigo-600'
-            :
-            'text-gray-700 dark:dark:text-slate-300  hover:text-indigo-600 hover:bg-gray-50  dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:border dark:border-transparent dark:hover:border-slate-50',
-            'w-full rounded-md p-2 pl-3 text-sm leading-6 font-semibold')}>
+        <li className={clsx(className, current ? 'bg-muted' : '',
+            'w-full p-2 pl-3 text-sm leading-6 font-semibold hover:bg-muted')}>
             <a ref={ref} href={href} onClick={(e) => {
                 if (onClick) {
                     e.preventDefault();

package/src/core/components/MessageBox.tsx

@@ -74,7 +74,13 @@ export function MessageBox({ icon, status, title, children, className }: Message
 }
 
 export function ErrorBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
-    return <MessageBox status="error" title={title} className={className}><pre>{children}</pre></MessageBox>
+    return (
+        <MessageBox status="error" title={title} className={className}>
+            <pre className="whitespace-pre-wrap break-words">
+                {children}
+            </pre>
+        </MessageBox>
+    );
 }
 
 export function InfoBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
@@ -93,4 +99,3 @@ export function DefaultBox({ title, className, children }: { title: string, clas
     return <MessageBox status="default" title={title} className={className}>{children}</MessageBox>
 }
 
-

package/src/core/components/SelectBox.tsx

@@ -185,4 +185,4 @@ export function ListOption<T>({ option, optionLabel, onClick, className }: { opt
                 </>
             )}
         </ListboxOption>)
-}
+}

package/src/core/components/shadcn/dialog.tsx

@@ -16,6 +16,7 @@ interface ModalProps {
     className?: string;
     allowOverflow?: boolean;
     disableCloseOnClickOutside?: boolean;
+    size?: "sm" | "md" | "lg" | "xl";
 }
 const ModalContext = createContext<boolean>(false)
 export function useIsInModal() {
@@ -34,12 +35,27 @@ export function VModal({
     noCloseButton = false,
     allowOverflow = false,
     disableCloseOnClickOutside = false,
+    size = "md",
 }: ModalProps) {
     const handleOpenChange = (open: boolean) => {
         if (!open) {
             onClose();
         }
     };
+    function getSizeClasses() {
+        switch (size) {
+            case "sm":
+                return "max-w-[20vw]";
+            case "md":
+                return "max-w-[40vw]";
+            case "lg":
+                return "max-w-[60vw]";
+            case "xl":
+                return "max-w-[80vw]";
+            default:
+                return "max-w-[40vw]";
+        }
+    }
 
     return (
         <Dialog
@@ -49,6 +65,7 @@ export function VModal({
                     handleOpenChange(open);
                 }
             }}
+            
         >
             {allowOverflow && <DialogOverlay className="z-50 fixed inset-0 bg-black/80" />}
             <VisuallyHidden>
@@ -57,7 +74,8 @@ export function VModal({
             <DialogContent
                 className={cn(
                     "min-h-20 p-4",
-                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    getSizeClasses(),
                     className
                 )}
             >

package/src/core/components/shadcn/filters/filter/SelectFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CommandItem, CommandEmpty } from "../../command";
+import { CommandItem } from "../../command";
 import { Button } from "../../button";
 import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "../types";
 import { DynamicLabel } from "../DynamicLabel";
@@ -52,12 +52,8 @@ export default function SelectFilter({
   }
 
   const options = getFilteredOptions(selectedView);
-  const selectedGroup = filterGroups.find(g => g.name === selectedView);
-
-  if (options.length === 0) {
-    return <CommandEmpty>No matching options</CommandEmpty>;
-  }
 
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
   const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
 
   const handleApply = () => {
@@ -117,35 +113,39 @@ export default function SelectFilter({
   };
 
   return (
-    <>
-      <div className="flex items-center p-1.5 text-xs text-muted">
+    <div className="flex flex-col h-full">
+      <div className="flex items-center p-1.5 text-xs text-muted shrink-0">
         <span>{groupTitle}</span>
       </div>
-      <div className="max-h-50 overflow-y-auto">
-        {options.map((option: FilterGroupOption) => {
-          const isSelected = selectedOptions.some(opt => opt.value === option.value);
+      <div className="flex-1 overflow-hidden min-h-0">
+        <div className="max-h-[200px] overflow-y-auto">
+          {options.length > 0 && (
+            options.map((option: FilterGroupOption) => {
+              const isSelected = selectedOptions.some(opt => opt.value === option.value);
 
-          return (
-            <CommandItem
-              key={option.value || `option-${Math.random()}`}
-              className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
-                }`}
-              onSelect={() => handleOptionToggle(option)}
-            >
-              <DynamicLabel
-                value={option.value || ''}
-                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
-                fallbackLabel={option.label}
-              />
-              {selectedGroup?.multiple && isSelected && (
-                <span className="ml-auto text-xs text-success">✓</span>
-              )}
-            </CommandItem>
-          );
-        })}
+              return (
+                <CommandItem
+                  key={option.value || `option-${Math.random()}`}
+                  className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
+                    }`}
+                  onSelect={() => handleOptionToggle(option)}
+                >
+                  <DynamicLabel
+                    value={option.value || ''}
+                    labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                    fallbackLabel={option.label}
+                  />
+                  {selectedGroup?.multiple && isSelected && (
+                    <span className="ml-auto text-xs text-success">✓</span>
+                  )}
+                </CommandItem>
+              );
+            })
+          )}
+        </div>
       </div>
       {selectedGroup?.multiple && (
-        <div className="p-2 border-t">
+        <div className="p-2 border-t shrink-0">
           <div className="flex gap-2 justify-end">
             <Button variant="ghost" size="sm" onClick={handleClose}>
               Cancel
@@ -156,6 +156,6 @@ export default function SelectFilter({
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -330,6 +330,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
             )
           }
           <CommandList>
+            <CommandEmpty>No matching filters</CommandEmpty>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>

package/src/core/components/shadcn/selectBox.tsx

@@ -1,12 +1,13 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
-import { Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
-import { useState, useEffect, useRef } from 'react';
+import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
 import { Button } from '@vertesia/ui/core';
+import { VTooltip } from './tooltip';
 
 export interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
@@ -25,6 +26,10 @@ export interface VSelectBoxBaseProps<T> {
     isClearable?: boolean;
     border?: boolean;
     inline?: boolean;
+    /** Show warning when value is not in options list (default: true) */
+    warnOnMissingValue?: boolean;
+    /** Custom warning message when value is not in options */
+    missingValueWarning?: string;
 }
 
 interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
@@ -41,12 +46,27 @@ interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
 
 type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false }: Readonly<VSelectBoxProps<T>>) {
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid" }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
     const [filterValue, setFilterValue] = useState('');
 
+    // Check if value is in options list (for single select only)
+    const isMissingValue = useMemo(() => {
+        if (!warnOnMissingValue || multiple || value == null || !options) return false;
+        // Use the isOptionsEqual helper which respects the 'by' comparator
+        return !options.some(opt => {
+            if (typeof by === 'string') {
+                return (opt as any)[by] === (value as any)[by];
+            } else if (typeof by === 'function') {
+                return by(opt, value as T);
+            } else {
+                return isEqual(opt, value);
+            }
+        });
+    }, [warnOnMissingValue, multiple, value, options, by]);
+
     useEffect(() => {
         const element = triggerRef.current;
         if (!element) {
@@ -185,7 +205,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
             <Command className="overflow-hidden">
                 <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
                     <CommandEmpty>No result found.</CommandEmpty>
-                    <CommandGroup className="overflow-visible">
+                    <CommandGroup>
                         {filteredOptions?.map((opt, index) => {
                             const isSelected = multiple
                                 ? isOptionSelected(opt, Array.isArray(value) ? value : [])
@@ -255,7 +275,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     onClick={handleTriggerClick}
                     className={clsx(
                         className,
-                        border && 'border border-border',
+                        border && (isMissingValue ? 'border border-destructive' : 'border border-border'),
                         'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
                         !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
@@ -268,13 +288,19 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         )}
                     >
                         {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
-                        <div className={clsx('w-full text-left', !disabled && '')}>
+                        <div className={clsx('w-full text-left min-h-6', !disabled && '', isMissingValue && 'text-destructive')}>
+                            {isMissingValue && (
+                                <VTooltip description={missingValueWarning} placement="top" asChild>
+                                    <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
+                                </VTooltip>
+                            )}
                             {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
                     </div>
                     <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <Button variant={"link"} size={"icon"}
+                                disabled={disabled}
                                 alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();

package/src/core/components/shadcn/tabs.tsx

@@ -194,7 +194,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
   );
 };
 
-const VTabsPanel = () => {
+const VTabsPanel = ({ className }: { className?: string }) => {
   const { tabs } = React.useContext(TabsContext);
 
   if (!tabs) return null;
@@ -202,7 +202,7 @@ const VTabsPanel = () => {
   return (
     <>
       {tabs.map((tab) => (
-        <TabsContent key={tab.name} value={tab.name}>
+        <TabsContent key={tab.name} value={tab.name} className={className}>
           {tab.content}
         </TabsContent>
       ))}
@@ -285,6 +285,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "focus-visible:outline-none",
+      "flex-1 overflow-y-auto min-h-0 pt-2",
       className
     )}
     {...props}

package/src/env/index.ts

@@ -6,6 +6,7 @@ import { AuthTokenPayload } from "@vertesia/common";
 export interface EnvProps {
     name: string; // the app name
     version: string,
+    sdkVersion?: string, // the @vertesia/ui package version
     isLocalDev: boolean,
     isDocker: boolean,
     type: "production" | "staging" | "preview" | "development" | string,
@@ -53,6 +54,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this.prop("version");
     }
 
+    get sdkVersion() {
+        return this._props?.sdkVersion;
+    }
+
     get name() {
         return this.prop("name");
     }

package/src/features/agent/CHART_INSTRUCTIONS.md

@@ -0,0 +1,228 @@
+# Chart Creation Instructions for AI Agents
+
+This document provides instructions for AI agents on how to create interactive charts that will be rendered in the UI.
+
+## Overview
+
+You can create charts by including a special markdown code block with the language `chart`. The UI will automatically detect and render these as interactive Recharts visualizations.
+
+## Basic Format
+
+```markdown
+\`\`\`chart
+{
+  "version": "1.0",
+  "library": "recharts",
+  "chart": "bar" | "line" | "composed",
+  "title": "Chart Title",
+  "description": "Optional description",
+  "data": [ /* array of data objects */ ],
+  "xKey": "fieldName",
+  "series": [ /* array of series configurations */ ],
+  "yAxis": { /* optional axis labels */ },
+  "options": { /* optional chart options */ }
+}
+\`\`\`
+```
+
+## Chart Types
+
+### 1. Bar Chart
+Used for comparing values across categories.
+
+```chart
+{
+  "version": "1.0",
+  "chart": "bar",
+  "title": "Revenue by Quarter",
+  "data": [
+    { "quarter": "Q1", "revenue": 100000 },
+    { "quarter": "Q2", "revenue": 150000 },
+    { "quarter": "Q3", "revenue": 120000 }
+  ],
+  "xKey": "quarter",
+  "series": [
+    { "key": "revenue", "label": "Revenue", "type": "bar" }
+  ]
+}
+```
+
+### 2. Line Chart
+Used for showing trends over time.
+
+```chart
+{
+  "version": "1.0",
+  "chart": "line",
+  "title": "Performance Over Time",
+  "data": [
+    { "period": "2024-Q1", "tvpi": 1.2, "dpi": 0.3 },
+    { "period": "2024-Q2", "tvpi": 1.5, "dpi": 0.5 },
+    { "period": "2024-Q3", "tvpi": 1.8, "dpi": 0.7 }
+  ],
+  "xKey": "period",
+  "series": [
+    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5", "dot": false },
+    { "key": "dpi", "label": "DPI", "color": "#16a34a", "dot": false }
+  ],
+  "yAxis": {
+    "left": { "label": "Multiple (x)" }
+  }
+}
+```
+
+### 3. Composed Chart
+Used for mixing bar and line charts (e.g., bars for cashflows, line for net).
+
+```chart
+{
+  "version": "1.0",
+  "chart": "composed",
+  "title": "Cashflow Timeline",
+  "data": [
+    { "period": "2024-Q1", "calls": 1000000, "distributions": 500000, "netCashflow": -500000 },
+    { "period": "2024-Q2", "calls": 800000, "distributions": 1200000, "netCashflow": 400000 }
+  ],
+  "xKey": "period",
+  "series": [
+    { "key": "calls", "label": "Calls", "type": "bar", "color": "#ef4444" },
+    { "key": "distributions", "label": "Distributions", "type": "bar", "color": "#22c55e" },
+    { "key": "netCashflow", "label": "Net CF", "type": "line", "color": "#0ea5e9", "yAxisId": "right", "dot": false }
+  ],
+  "yAxis": {
+    "left": { "label": "Amount" },
+    "right": { "label": "Net" }
+  },
+  "options": {
+    "referenceZero": true
+  }
+}
+```
+
+## Series Configuration
+
+Each series can have:
+
+- `key`: (required) The field name in the data
+- `label`: Display name for the legend
+- `type`: "bar" or "line" (for composed charts)
+- `color`: Hex color code (e.g., "#4f46e5")
+- `yAxisId`: "left" (default) or "right" for dual Y-axis
+- `stackId`: Group bars for stacking
+- `dot`: true/false - show dots on line charts
+
+## Options
+
+- `stacked`: true/false - Stack bars in bar charts
+- `referenceZero`: true/false - Show a reference line at y=0
+- `collapsible`: true/false - Allow users to collapse the chart (default: true)
+- `collapseInitially`: true/false - Start in collapsed state
+
+## Number Formatting
+
+Numbers are automatically formatted:
+- 1,000 → 1K
+- 1,000,000 → 1M
+- 1,000,000,000 → 1B
+
+## Pre-built Chart Builders (TypeScript)
+
+If you're writing TypeScript code, you can use these helper functions:
+
+```typescript
+import {
+  buildCashflowComposedChart,
+  buildPerformanceLineChart,
+  buildScenarioComparisonBarChart,
+  toChartMarkdown
+} from '@vertesia/ui/features';
+
+// Example: Create a cashflow chart
+const chart = buildCashflowComposedChart({
+  title: 'Fund Cashflow',
+  rows: [
+    { period: '2024-Q1', calls: 1000000, distributions: 500000 },
+    { period: '2024-Q2', calls: 800000, distributions: 1200000 }
+  ]
+});
+
+// Convert to markdown
+const markdown = toChartMarkdown(chart);
+```
+
+### Available Builders
+
+1. `buildCashflowComposedChart` - Calls/Distributions + Net CF
+2. `buildPerformanceLineChart` - TVPI/DPI/RVPI J-curve
+3. `buildScenarioComparisonBarChart` - Side-by-side comparison
+4. `buildScenarioDeltaPercentChart` - % change visualization
+5. `buildTvpiOverlayChart` - TVPI comparison between scenarios
+6. `buildNavLineChart` - NAV over time
+
+## Best Practices
+
+1. **Use appropriate chart types**:
+   - Bar charts for comparisons
+   - Line charts for trends
+   - Composed charts for mixed metrics
+
+2. **Keep data concise**:
+   - Limit to 20-30 data points for readability
+   - Use aggregation for large datasets
+
+3. **Color consistency**:
+   - Use the default color palette for consistency
+   - Red (#ef4444) for negative/costs
+   - Green (#22c55e) for positive/gains
+   - Blue (#0ea5e9) for neutral metrics
+
+4. **Add context**:
+   - Always include a descriptive title
+   - Add a description when the chart needs explanation
+   - Use axis labels for clarity
+
+5. **Dual Y-axis**:
+   - Use when comparing metrics with different scales
+   - Example: Amount (left) vs Count (right)
+
+## Example: Complete Workflow
+
+When a user asks "Show me the fund performance":
+
+1. Fetch or calculate the data
+2. Format it as a chart spec
+3. Include it in your response:
+
+```markdown
+Here's the fund performance over time:
+
+\`\`\`chart
+{
+  "version": "1.0",
+  "chart": "line",
+  "title": "Fund Performance",
+  "data": [
+    { "period": "2024-Q1", "tvpi": 1.2 },
+    { "period": "2024-Q2", "tvpi": 1.5 }
+  ],
+  "xKey": "period",
+  "series": [
+    { "key": "tvpi", "label": "TVPI", "color": "#4f46e5" }
+  ]
+}
+\`\`\`
+
+The fund shows strong performance with TVPI increasing from 1.2x to 1.5x.
+```
+
+## Common Pitfalls
+
+❌ **Don't** include line breaks in the JSON
+❌ **Don't** use single quotes in JSON (use double quotes)
+❌ **Don't** forget to specify the chart type
+❌ **Don't** mix up xKey with data field names
+
+✅ **Do** validate your JSON before including it
+✅ **Do** include descriptive labels
+✅ **Do** test with sample data first
+✅ **Do** provide context around the chart