feat: implement entities list UI

packages/platform-ui/package.json

@@ -46,11 +46,11 @@
     "@radix-ui/react-radio-group": "1.2.3",
     "@radix-ui/react-roving-focus": "1.0.4",
     "@radix-ui/react-scroll-area": "1.2.3",
-    "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-separator": "1.1.2",
     "@radix-ui/react-slider": "1.2.3",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-toggle": "1.1.2",
     "@radix-ui/react-toggle-group": "1.1.2",

packages/platform-ui/src/App.tsx

@@ -20,6 +20,12 @@ import { SettingsLlm } from './pages/SettingsLlm';
 import { AgentsGraphContainer } from './features/graph/containers/AgentsGraphContainer';
 import { OnboardingPage } from './pages/OnboardingPage';
 import { OnboardingGate } from './features/onboarding/components/OnboardingGate';
+import { AgentsListPage } from './pages/AgentsListPage';
+import { TriggersListPage } from './pages/TriggersListPage';
+import { ToolsListPage } from './pages/ToolsListPage';
+import { WorkspacesListPage } from './pages/WorkspacesListPage';
+import { MemoryEntitiesListPage } from './pages/MemoryEntitiesListPage';
+import { McpServersListPage } from './pages/McpServersListPage';
 
 const queryClient = new QueryClient();
 
@@ -29,20 +35,27 @@ function App() {
       <RuntimeTemplatesProvider>
         <TooltipProvider delayDuration={200}>
           <Routes>
-            <Route path="/" element={<Navigate to="/agents/graph" replace />} />
+            <Route path="/" element={<Navigate to="/agents" replace />} />
             <Route path="/onboarding" element={<OnboardingPage />} />
 
             <Route element={<OnboardingGate />}>
               <Route element={<RootLayout />}>
                 {/* Agents */}
+                <Route path="/agents" element={<AgentsListPage />} />
                 <Route path="/agents/graph" element={<AgentsGraphContainer />} />
                 <Route path="/agents/chat" element={<AgentsChat />} />
                 <Route path="/agents/threads" element={<AgentsThreads />} />
                 <Route path="/agents/threads/:threadId" element={<AgentsThreads />} />
                 <Route path="/agents/threads/:threadId/runs/:runId/timeline" element={<AgentsRunScreen />} />
                 <Route path="/agents/reminders" element={<AgentsReminders />} />
                 <Route path="/agents/memory" element={<AgentsMemoryManager />} />
-                <Route path="/memory/*" element={<Navigate to="/agents/memory" replace />} />
+
+                {/* Entities */}
+                <Route path="/triggers" element={<TriggersListPage />} />
+                <Route path="/tools" element={<ToolsListPage />} />
+                <Route path="/mcp" element={<McpServersListPage />} />
+                <Route path="/workspaces" element={<WorkspacesListPage />} />
+                <Route path="/memory" element={<MemoryEntitiesListPage />} />
 
                 {/* Tracing */}
                 <Route path="/tracing/traces" element={<TracingTraces />} />
@@ -70,7 +83,7 @@ function App() {
               </Route>
             </Route>
 
-            <Route path="*" element={<Navigate to="/agents/graph" replace />} />
+            <Route path="*" element={<Navigate to="/agents" replace />} />
           </Routes>
         </TooltipProvider>
       </RuntimeTemplatesProvider>

packages/platform-ui/src/components/Button.tsx

@@ -1,43 +1,49 @@
-import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '@/lib/utils';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'danger' | 'link';
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg' | 'icon';
   children: ReactNode;
+  asChild?: boolean;
 }
 
-export function Button({ 
-  variant = 'primary', 
-  size = 'md', 
-  children, 
-  className = '',
-  ...props 
-}: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-[10px] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed';
-
-  const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
-    primary: 'bg-[var(--agyn-blue)] text-white hover:bg-[var(--agyn-blue-dark)] active:bg-[var(--agyn-blue-dark)]',
-    secondary: 'bg-[var(--agyn-purple)] text-white hover:opacity-90 active:opacity-80',
-    accent: 'bg-[var(--agyn-cyan)] text-white hover:opacity-90 active:opacity-80',
-    outline: 'bg-transparent border-2 border-[var(--agyn-blue)] text-[var(--agyn-blue)] hover:bg-[var(--agyn-blue)] hover:text-white',
-    ghost: 'bg-transparent text-[var(--agyn-blue)] hover:bg-[var(--agyn-blue)] hover:text-white',
-    danger: 'bg-transparent border-2 border-[var(--agyn-status-failed)] text-[var(--agyn-status-failed)] hover:bg-[var(--agyn-status-failed)] hover:text-white',
-    link: 'bg-transparent text-[var(--agyn-blue)] underline-offset-4 hover:underline focus-visible:underline px-0 py-0',
-  };
-
-  const sizes = {
-    sm: 'px-4 py-2 text-sm',
-    md: 'px-6 py-3',
-    lg: 'px-8 py-4',
-  };
-  const sizeClass = variant === 'link' ? 'text-sm font-medium' : sizes[size];
+const baseStyles =
+  'inline-flex items-center justify-center rounded-[10px] font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--agyn-blue)] focus-visible:ring-offset-2';
+
+const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
+  primary:
+    'bg-[var(--agyn-blue)] text-white hover:bg-[var(--agyn-blue-dark)] active:bg-[var(--agyn-blue-dark)]',
+  secondary: 'bg-[var(--agyn-purple)] text-white hover:opacity-90 active:opacity-80',
+  accent: 'bg-[var(--agyn-cyan)] text-white hover:opacity-90 active:opacity-80',
+  outline:
+    'bg-transparent border-2 border-[var(--agyn-blue)] text-[var(--agyn-blue)] hover:bg-[var(--agyn-blue)] hover:text-white',
+  ghost: 'bg-transparent text-[var(--agyn-blue)] hover:bg-[var(--agyn-blue)] hover:text-white',
+  danger:
+    'bg-transparent border-2 border-[var(--agyn-status-failed)] text-[var(--agyn-status-failed)] hover:bg-[var(--agyn-status-failed)] hover:text-white',
+  link:
+    'bg-transparent text-[var(--agyn-blue)] underline-offset-4 hover:underline focus-visible:underline px-0 py-0',
+};
+
+const sizeClasses: Record<Exclude<ButtonProps['size'], undefined>, string> = {
+  sm: 'px-4 py-2 text-sm',
+  md: 'px-6 py-3',
+  lg: 'px-8 py-4',
+  icon: 'p-0 h-10 w-10',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = 'primary', size = 'md', children, className = '', asChild = false, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : 'button';
+  const appliedSize = variant === 'link' ? 'text-sm font-medium px-0 py-0' : sizeClasses[size];
 
   return (
-    <button 
-      className={`${baseStyles} ${variants[variant]} ${sizeClass} ${className}`}
-      {...props}
-    >
+    <Comp ref={ref} className={cn(baseStyles, variants[variant], appliedSize, className)} {...props}>
       {children}
-    </button>
+    </Comp>
   );
-}
+});

packages/platform-ui/src/components/SelectInput.tsx

@@ -1,19 +1,28 @@
-import { forwardRef, type ReactNode, type SelectHTMLAttributes } from 'react';
+import { forwardRef, type ChangeEvent, type ReactNode, type SelectHTMLAttributes } from 'react';
 import { cn } from '@/lib/utils';
 
-type SelectOption = {
+export type SelectOption = {
   value: string;
   label: ReactNode;
+  disabled?: boolean;
 };
 
-interface SelectInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+export interface SelectGroup {
+  label?: string;
+  options: SelectOption[];
+}
+
+export interface SelectInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   label?: ReactNode;
   helperText?: ReactNode;
   error?: ReactNode;
   placeholder?: string;
-  options: SelectOption[];
+  options?: SelectOption[];
+  groups?: SelectGroup[];
   size?: 'sm' | 'default';
   allowEmptyOption?: boolean;
+  variant?: 'default' | 'flat';
+  containerClassName?: string;
 }
 
 export const SelectInput = forwardRef<HTMLSelectElement, SelectInputProps>(function SelectInput(
@@ -22,43 +31,88 @@ export const SelectInput = forwardRef<HTMLSelectElement, SelectInputProps>(funct
     helperText,
     error,
     placeholder,
-    options,
+    options = [],
+    groups = [],
     size = 'default',
     className = '',
+    containerClassName = '',
     allowEmptyOption = false,
+    variant = 'default',
     value,
+    disabled,
+    onChange,
+    defaultValue,
     ...props
   },
   ref,
 ) {
-  const sizeClasses = size === 'sm' ? 'h-10 px-3 text-sm' : 'px-4 py-3';
+  const variantClasses =
+    variant === 'flat'
+      ? 'border-transparent bg-transparent px-0 py-0 h-auto shadow-none focus:ring-0 focus:border-transparent rounded-none'
+      : 'rounded-[10px] border border-[var(--agyn-border-subtle)] bg-white';
+
+  const sizeClasses =
+    variant === 'flat'
+      ? size === 'sm'
+        ? 'text-sm'
+        : 'text-base'
+      : size === 'sm'
+        ? 'h-10 px-3 text-sm'
+        : 'px-4 py-3';
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange?.(event);
+  };
+
+  const selectProps =
+    value !== undefined
+      ? { value: value ?? '' }
+      : defaultValue !== undefined
+        ? { defaultValue }
+        : placeholder
+          ? { defaultValue: '' }
+          : {};
+
+  const hasGroups = groups.length > 0;
 
   return (
-    <div className="w-full">
+    <div className={cn('w-full', containerClassName)}>
       {label ? <label className="mb-2 block text-[var(--agyn-dark)]">{label}</label> : null}
       <select
         ref={ref}
         className={cn(
-          'w-full rounded-[10px] border border-[var(--agyn-border-subtle)] bg-white text-[var(--agyn-dark)]',
-          'focus:outline-none focus:ring-2 focus:ring-[var(--agyn-blue)] focus:border-transparent',
+          'w-full text-[var(--agyn-dark)] focus:outline-none focus:ring-2 focus:ring-[var(--agyn-blue)] focus:border-transparent',
           'disabled:bg-[var(--agyn-bg-light)] disabled:cursor-not-allowed',
           error ? 'border-red-500 focus:ring-red-500' : '',
+          variantClasses,
           sizeClasses,
           className,
         )}
-        value={value ?? ''}
+        disabled={disabled}
+        onChange={handleChange}
+        {...selectProps}
         {...props}
       >
         {placeholder ? (
           <option value="" disabled={!allowEmptyOption} hidden={!allowEmptyOption}>
             {placeholder}
           </option>
         ) : null}
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
+        {hasGroups
+          ? groups.map((group, groupIndex) => (
+              <optgroup key={group.label ?? groupIndex} label={group.label ?? ''}>
+                {group.options.map((option) => (
+                  <option key={option.value} value={option.value} disabled={option.disabled}>
+                    {option.label}
+                  </option>
+                ))}
+              </optgroup>
+            ))
+          : options.map((option) => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
+            ))}
       </select>
       {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
       {!error && helperText ? (

packages/platform-ui/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { 
   ChevronRight,
   User
@@ -31,10 +31,39 @@ interface SidebarProps {
 export default function Sidebar({ 
   menuItems,
   currentUser = { name: 'John Doe', email: 'john@agyn.io' },
-  selectedMenuItem = 'graph',
+  selectedMenuItem = 'entitiesAgents',
   onMenuItemSelect
 }: SidebarProps) {
-  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(['agents']));
+  const parentByChild = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const item of menuItems) {
+      if (!item.items) continue;
+      for (const sub of item.items) {
+        map.set(sub.id, item.id);
+      }
+    }
+    return map;
+  }, [menuItems]);
+
+  const defaultExpandedSection = 'agents';
+
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(() => {
+    const initial = new Set<string>();
+    const parent = parentByChild.get(selectedMenuItem ?? '');
+    initial.add(parent ?? defaultExpandedSection);
+    return initial;
+  });
+
+  useEffect(() => {
+    const parent = parentByChild.get(selectedMenuItem ?? '');
+    if (!parent) return;
+    setExpandedItems((prev) => {
+      if (prev.has(parent)) return prev;
+      const next = new Set(prev);
+      next.add(parent);
+      return next;
+    });
+  }, [selectedMenuItem, parentByChild]);
 
   const toggleExpand = (id: string) => {
     setExpandedItems(prev => {