@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/llms.txt

@@ -26,11 +26,14 @@ import { useNavigate, useParams, NavLink, NestedRouterProvider } from '@vertesia
 // Session (authentication, Vertesia client access)
 import { useUserSession } from '@vertesia/ui/session';
 
-// Layout components
-import { FullHeightLayout } from '@vertesia/ui/layout';
+// Layout components (sidebar, full-height containers)
+import { Sidebar, SidebarSection, SidebarItem, useSidebarToggle, FullHeightLayout } from '@vertesia/ui/layout';
 
-// Feature components (headers, navigation)
-import { GenericPageNavHeader } from '@vertesia/ui/features';
+// Feature components (headers, navigation, agent conversation)
+import { GenericPageNavHeader, ModernAgentConversation } from '@vertesia/ui/features';
+
+// Shell (app wrapper with auth, routing, sidebar)
+import { VertesiaShell, StandaloneApp } from '@vertesia/ui/shell';
 ```
 
 ---
@@ -361,6 +364,123 @@ import { FullHeightLayout } from '@vertesia/ui/layout';
 </FullHeightLayout>
 ```
 
+## Sidebar Components
+
+Collapsible sidebar with sections and navigation items.
+
+```tsx
+import { Sidebar, SidebarSection, SidebarItem, useSidebarToggle } from '@vertesia/ui/layout';
+```
+
+### SidebarSection
+
+Groups sidebar items with an optional title header.
+
+```tsx
+interface SidebarSectionProps {
+  title?: React.ReactNode;     // Section header (hidden when sidebar collapsed)
+  action?: React.ReactNode;    // Action element next to title
+  isFooter?: boolean;          // Pushes section to bottom (mt-auto)
+  className?: string;
+}
+
+<SidebarSection title="Navigation">
+  <SidebarItem ...>Home</SidebarItem>
+  <SidebarItem ...>Settings</SidebarItem>
+</SidebarSection>
+
+// Footer section (theme toggle, user menu, etc.)
+<SidebarSection isFooter>
+  <ModeToggle label={isOpen ? 'Theme' : false} />
+</SidebarSection>
+```
+
+### SidebarItem
+
+Navigation link within a sidebar section.
+
+```tsx
+interface SidebarItemProps {
+  href: string;
+  icon?: React.ComponentType;   // Lucide icon or similar
+  current?: boolean;            // Active/selected state
+  id?: string;
+  external?: boolean;           // Opens in new tab
+  replace?: boolean;            // Replace history entry
+  tools?: React.ReactNode;      // Right-side actions
+  className?: string;
+}
+
+<SidebarItem
+  href="/app/settings"
+  icon={SettingsIcon}
+  current={path === '/app/settings'}
+>
+  Settings
+</SidebarItem>
+
+// For long text, wrap children to truncate
+<SidebarItem href={href} icon={MessageSquare} className="overflow-hidden">
+  <span className="truncate">{longLabel}</span>
+</SidebarItem>
+```
+
+### useSidebarToggle
+
+Access sidebar open/collapsed state.
+
+```tsx
+const { isOpen, toggleMobile } = useSidebarToggle();
+// isOpen: boolean — true when sidebar is expanded
+// toggleMobile(open?: boolean) — toggle mobile sidebar
+```
+
+## ModeToggle (Dark/Light Theme)
+
+```tsx
+import { ModeToggle } from '@vertesia/ui/core';
+
+<ModeToggle />                           // Icon only
+<ModeToggle label="Theme" />             // With label text
+<ModeToggle label={isOpen ? 'Theme' : false} />  // Label when sidebar open
+```
+
+## ModernAgentConversation
+
+Full-featured agent chat interface with streaming messages, plan visualization, and workstream management.
+
+```tsx
+import { ModernAgentConversation } from '@vertesia/ui/features';
+
+interface ModernAgentConversationProps {
+  run?: { runId: string; workflowId: string };  // Active conversation (undefined = start view)
+  startWorkflow: (initialMessage?: string) => Promise<{ run_id: string; workflow_id: string } | undefined>;
+  resetWorkflow?: () => void;          // Called when user clicks "New conversation"
+  title?: string;                       // Header title (default: "Agent")
+  placeholder?: string;                 // Input placeholder text
+  startButtonText?: string;             // Start button label
+  hideObjectLinking?: boolean;          // Hide document linking UI
+  interactive?: boolean;                // Enable user input during conversation
+  fullWidth?: boolean;                  // Disable max-width constraint
+}
+
+// Basic usage
+<ModernAgentConversation
+  run={run ? { runId: run.run_id, workflowId: run.workflow_id } : undefined}
+  startWorkflow={startWorkflow}
+  resetWorkflow={handleReset}
+  title="My Assistant"
+  placeholder="Ask me anything..."
+  startButtonText="Start Conversation"
+  hideObjectLinking
+  interactive
+/>
+```
+
+**Two states:**
+- No `run` prop → shows start view with title, description area, and input to begin a conversation
+- With `run` prop → streams messages and shows the active conversation with real-time updates
+
 ---
 
 # Styling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.0.0-dev.20260227.112605Z",
+  "version": "1.0.0-dev.20260331.091034Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -22,35 +22,36 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/react": "^0.27.11",
-    "@headlessui/react": "^2.2.9",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dismissable-layer": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-focus-guards": "^1.1.3",
+    "@radix-ui/react-focus-scope": "^1.1.7",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-portal": "^1.1.9",
     "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@radix-ui/react-dismissable-layer": "^1.1.11",
-    "@radix-ui/react-focus-guards": "^1.1.3",
-    "@radix-ui/react-focus-scope": "^1.1.7",
-    "@radix-ui/react-portal": "^1.1.9",
-    "aria-hidden": "^1.2.6",
-    "react-remove-scroll": "^2.7.1",
-    "react-remove-scroll-bar": "^2.3.8",
-    "react-style-singleton": "^2.2.3",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-switch": "^1.2.6",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
+    "aria-hidden": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "debounce": "^2.2.0",
-    "dompurify": "^3.3.1",
-    "fast-xml-parser": "^5.3.6",
+    "dompurify": "^3.3.2",
+    "fast-xml-parser": "^5.5.7",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
+    "i18next": "^25.8.14",
     "jwt-decode": "^4.0.0",
     "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
@@ -64,9 +65,13 @@
     "react-date-picker": "^12.0.1",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
+    "react-i18next": "^16.5.5",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.2.0",
+    "react-remove-scroll": "^2.7.1",
+    "react-remove-scroll-bar": "^2.3.8",
     "react-resizable-panels": "^3.0.6",
+    "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
     "remark-definition-list": "^2.0.0",
@@ -81,35 +86,51 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/client": "1.0.0-dev.20260227.112605Z",
-    "@vertesia/common": "1.0.0-dev.20260227.112605Z",
-    "@vertesia/fusion-ux": "1.0.0-dev.20260227.112605Z",
-    "@vertesia/json": "1.0.0-dev.20260227.112605Z"
+    "@vertesia/client": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/common": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/fusion-ux": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/json": "1.0.0-dev.20260331.091034Z"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.27.0",
+    "eslint": "^10.0.2",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "i18next-parser": "^9.4.0",
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
-    "@rollup/plugin-terser": "^0.4.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.16"
   },
   "exports": {
+    "./styles.css": "./src/css/index.css",
+    "./styles/color.css": "./src/css/color.css",
+    "./styles/theme.css": "./src/css/theme.css",
+    "./styles/utilities.css": "./src/css/utilities.css",
+    "./styles/typography.css": "./src/css/typography.css",
+    "./styles/tooltips.css": "./src/css/custom-tooltips.css",
+    "./styles/base.css": "./src/css/base.css",
+    "./css/index.css": "./src/css/index.css",
+    "./css/color.css": "./src/css/color.css",
+    "./css/theme.css": "./src/css/theme.css",
+    "./css/utilities.css": "./src/css/utilities.css",
+    "./css/typography.css": "./src/css/typography.css",
+    "./css/custom-tooltips.css": "./src/css/custom-tooltips.css",
+    "./css/base.css": "./src/css/base.css",
     "./router": {
       "types": "./lib/types/router/index.d.ts",
       "default": "./lib/esm/router/index.js"
@@ -149,6 +170,10 @@
     "./shell": {
       "types": "./lib/types/shell/index.d.ts",
       "default": "./lib/esm/shell/index.js"
+    },
+    "./i18n": {
+      "types": "./lib/types/i18n/index.d.ts",
+      "default": "./lib/esm/i18n/index.js"
     }
   },
   "types": "./lib/index.d.ts",
@@ -183,6 +208,9 @@
       ],
       "shell": [
         "./lib/types/shell/index.d.ts"
+      ],
+      "i18n": [
+        "./lib/types/i18n/index.d.ts"
       ]
     }
   },
@@ -192,7 +220,7 @@
     "directory": "packages/ui"
   },
   "scripts": {
-    "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
+    "build": "pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
   }

package/src/core/components/SelectList.tsx

@@ -1,6 +1,7 @@
 import { Check } from "lucide-react";
 import clsx from "clsx";
 import { ReactNode, useMemo, useState } from "react";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { Input } from "./shadcn";
 
 const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
@@ -32,6 +33,7 @@ export interface SelectListProps<T> {
     filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
 export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
+    const { t } = useUITranslation();
     const [selected, setSelected] = useState(value);
     const [filterValue, setFilterValue] = useState("");
 
@@ -51,7 +53,7 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
     return (
         <div className={clsx("", className)}>
             {filterBy && (
-                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+                <Input type="text" placeholder={t('form.filter')} value={filterValue} onChange={(value) => setFilterValue(value)} />
             )}
             {options.map((option, i) => {
                 if (filterBy && !filterBy(filterValue)(option)) {

package/src/core/components/SidePanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
 import { Button } from './shadcn/button';
@@ -7,14 +7,15 @@ interface SidePanelProps {
     isOpen: boolean;
     onClose: () => void;
     children: React.ReactNode;
-    title?: string;
+    title?: React.ReactNode;
     panelWidth?: number;
     backdrop?: boolean;
     side?: 'left' | 'right';
     resizable?: boolean;
     className?: string;
+    contentClassName?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className, contentClassName }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -101,7 +102,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             )}
 
                                             {/* Scrollable content */}
-                                            <div className="flex-1 overflow-y-auto px-2 sm:px-4 py-4">
+                                            <div className={contentClassName ?? "flex-1 overflow-y-auto px-2 sm:px-4 py-4"}>
                                                 {children}
                                             </div>
                                         </div>

package/src/core/components/index.ts

@@ -3,8 +3,6 @@ export * from "./Avatar.js";
 export * from "./Center.js";
 export * from "./ComboBox.js";
 export * from "./Divider.js";
-export * from "./Dropdown.js";
-export * from "./DropdownList.js";
 export * from "./EmptyCollection.js";
 export * from "./FileUpload.js";
 export * from "./FormItem.js";
@@ -15,14 +13,11 @@ export * from "./NumberInput.js";
 export * from "./Overlay.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
-export * from "./RadioGroup.js";
 export * from "./SelectList.js";
-export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
 export * from "./SidePanel.js";
 export * from "./Spinner.js";
 export * from "./styles.js";
-export * from "./Switch.js";
 export * from "./table/index.js";
 export * from "./TagsInput.js";
 export * from "./toast/index.js";

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

@@ -2,9 +2,10 @@ import * as React from "react"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "../libs/utils"
+import { Button } from "./button"
 
 interface BreadcrumbProps {
-  label: string
+  label: string | React.ReactNode
   href?: string
   onClick?: () => void
 }
@@ -17,19 +18,23 @@ interface BreadcrumbItemProps {
 export function Breadcrumbs({ path, maxItems = 3, className, separator }: BreadcrumbItemProps) {
   const items = path || [];
 
+
   const renderBreadcrumbItem = (item: BreadcrumbProps) => {
+    const shortenedLabel = typeof item.label === "string" && item.label.length > 20
+      ? item.label.slice(0, 17) + "..."
+      : item.label;
     if (item.onClick) {
-      return <BreadcrumbButton onClick={item.onClick} href={item.href}>{item.label}</BreadcrumbButton>;
+      return <BreadcrumbButton onClick={item.onClick} href={item.href} title={typeof item.label === 'string' ? item.label : undefined}>{shortenedLabel}</BreadcrumbButton>;
     } else if (item.href) {
-      return <BreadcrumbButton href={item.href}>{item.label}</BreadcrumbButton>;
+      return <BreadcrumbButton href={item.href} title={typeof item.label === 'string' ? item.label : undefined}>{shortenedLabel}</BreadcrumbButton>;
     } else {
-      return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+      return <BreadcrumbPage>{shortenedLabel}</BreadcrumbPage>;
     }
   };
 
   if (items.length <= maxItems) {
     return (
-      <Breadcrumb className={cn("w-full", className)}>
+      <Breadcrumb className={cn("w-full flex items-center", className)}>
         <BreadcrumbList>
           {items.map((item, index) => (
             <React.Fragment key={index}>
@@ -49,7 +54,7 @@ export function Breadcrumbs({ path, maxItems = 3, className, separator }: Breadc
   const lastThreeItems = items.slice(-(maxItems - 1));
 
   return (
-    <Breadcrumb className={cn("w-full", className)}>
+    <Breadcrumb className={cn("w-full flex items-center", className)}>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbEllipsis />
@@ -85,7 +90,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted sm:gap-2.5",
       className
     )}
     {...props}
@@ -135,9 +140,11 @@ const BreadcrumbButton = React.forwardRef<
   };
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size={"md"}
       ref={ref}
-      className={cn("transition-colors hover:text-foreground cursor-pointer", className)}
+      className={cn("p-0! hover:underline! hover:bg-background!", className)}
       onClick={handleClick}
       {...props}
     />

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

@@ -7,6 +7,7 @@ import { cn } from "../libs/utils"
 import { Check, CopyIcon, Loader2 } from "lucide-react"
 import clsx from "clsx"
 import { useState } from "react"
+import { i18nInstance, NAMESPACE } from '../../../i18n/instance.js'
 
 const buttonVariants = cva(
   "hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -107,6 +108,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
   ({ size, content, toast, className, alt, ...props }, ref) => {
 
     const [isCopied, setIsCopied] = useState(false);
+    const t = i18nInstance.getFixedT(null, NAMESPACE);
 
     const handleCopy = (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -118,7 +120,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         }
         toast.toast({
           status: "success",
-          title: toast.message || "Copied to clipboard",
+          title: toast.message || t('misc.copiedToClipboard'),
           duration: 2000,
         })
       }).catch((err) => {
@@ -126,7 +128,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         if (toast && toast.toast)
           toast.toast({
             status: "error",
-            title: "Failed to copy",
+            title: t('misc.failedToCopy'),
             duration: 2000,
           })
       })
@@ -140,7 +142,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         size={size || "sm"}
         onClick={handleCopy}
         {...props}
-        alt={alt ?? "Copy"}
+        alt={alt ?? t('misc.copy')}
       >
         {isCopied ? 
           <Check className="text-success" />

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

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }