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

package/src/AdminApp.tsx

@@ -1,24 +1,28 @@
+import { Spinner } from '@vertesia/ui/core';
 import type { Route } from '@vertesia/ui/router';
 import { NestedRouterProvider, RouteComponent } from '@vertesia/ui/router';
-import { useServerInfo, useResourceData } from './hooks.js';
+
 import { AdminContext } from './AdminContext.js';
+import { AdminTopBar } from './components/AdminTopBar.js';
+import { useResourceData, useServerInfo } from './hooks.js';
+import { ActivityCollection } from './pages/ActivityCollection.js';
 import { HomePage } from './pages/HomePage.js';
 import { InteractionCollection } from './pages/InteractionCollection.js';
 import { InteractionDetail } from './pages/InteractionDetail.js';
-import { ToolCollection } from './pages/ToolCollection.js';
 import { SkillCollection } from './pages/SkillCollection.js';
 import { SkillDetail } from './pages/SkillDetail.js';
-import { TypeCollection } from './pages/TypeCollection.js';
-import { TypeDetail } from './pages/TypeDetail.js';
 import { TemplateCollection } from './pages/TemplateCollection.js';
 import { TemplateDetail } from './pages/TemplateDetail.js';
-import adminStyles from './admin.css?inline';
+import { ToolCollection } from './pages/ToolCollection.js';
+import { TypeCollection } from './pages/TypeCollection.js';
+import { TypeDetail } from './pages/TypeDetail.js';
 
 const routes: Route[] = [
     { path: '/', Component: HomePage },
     { path: '/interactions/:collection', Component: InteractionCollection },
     { path: '/interactions/:collection/:name', Component: InteractionDetail },
     { path: '/tools/:collection', Component: ToolCollection },
+    { path: '/activities/:collection', Component: ActivityCollection },
     { path: '/skills/:collection', Component: SkillCollection },
     { path: '/skills/:collection/:name', Component: SkillDetail },
     { path: '/types/:collection', Component: TypeCollection },
@@ -37,7 +41,9 @@ export interface AdminAppProps {
 
 /**
  * Admin app shell — loads data, provides context, and renders nested routes.
- * CSS is inlined into the JS bundle via Vite's `?inline` import.
+ *
+ * Requires a parent VertesiaShell (or equivalent providers for ThemeProvider,
+ * UserSessionProvider, ToastProvider).
  */
 export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     const { data: serverInfo, isLoading: loadingInfo, error: infoError } = useServerInfo(baseUrl);
@@ -51,27 +57,27 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
 
     if (isLoading) {
         return (
-            <>
-                <style>{adminStyles}</style>
-                <div className="vta-loading">Loading...</div>
-            </>
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
         );
     }
 
     if (error) {
         return (
-            <>
-                <style>{adminStyles}</style>
-                <div className="vta-error">Failed to load server info. Is the API running?</div>
-            </>
+            <div className="p-6 text-destructive">
+                Failed to load server info. Is the API running?
+            </div>
         );
     }
 
     if (!serverInfo || !resourceData) return null;
 
+    const title = serverInfo.message.replace('Vertesia Tools API', 'Tools Server');
+
     return (
-        <>
-            <style>{adminStyles}</style>
+        <div className="min-h-screen bg-background text-foreground">
+            <AdminTopBar title={title} />
             <AdminContext.Provider value={{
                 serverInfo,
                 collections: resourceData.collections,
@@ -82,6 +88,6 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
                     <RouteComponent />
                 </NestedRouterProvider>
             </AdminContext.Provider>
-        </>
+        </div>
     );
 }

package/src/components/AdminTopBar.tsx

@@ -0,0 +1,39 @@
+import { Avatar, Button, ModeToggle } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { LogOut } from 'lucide-react';
+
+interface AdminTopBarProps {
+    title: string;
+}
+
+export function AdminTopBar({ title }: AdminTopBarProps) {
+    const { user, logout } = useUserSession();
+
+    return (
+        <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background px-6">
+            <div className="flex items-center gap-3">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-primary text-xs font-semibold uppercase tracking-wider text-primary-foreground">
+                    {title.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('')}
+                </div>
+                <span className="text-sm font-semibold text-foreground">{title}</span>
+            </div>
+
+            <div className="flex items-center gap-3">
+                <ModeToggle label={false} />
+                {user && (
+                    <>
+                        <Avatar size="sm" name={user.name} color="bg-primary" />
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => logout()}
+                            alt="Sign out"
+                        >
+                            <LogOut className="size-4" />
+                        </Button>
+                    </>
+                )}
+            </div>
+        </header>
+    );
+}

package/src/components/CollectionCard.tsx

@@ -1,23 +1,29 @@
+import { Card, CardContent } from '@vertesia/ui/core';
 import { NavLink } from '@vertesia/ui/router';
+
 import type { CollectionInfo } from '../types.js';
+import { TYPE_VARIANTS } from './typeVariants.js';
 
 export function CollectionCard({ collection }: { collection: CollectionInfo }) {
-    const href = `/${collection.type}s/${collection.name}`;
+    const plural = collection.type === 'activity' ? 'activities' : `${collection.type}s`;
+    const href = `/${plural}/${collection.name}`;
 
     return (
-        <NavLink href={href} className="vta-card-link">
-            <div className="vta-card vta-card--link">
-                <span className={`vta-card-type vta-card-type--${collection.type}`}>
-                    {collection.type}
-                </span>
-                <div className="vta-card-title">{collection.title}</div>
-                <div className="vta-card-desc">
-                    {collection.description || 'No description'}
-                </div>
-                <div className="vta-card-url">
-                    {collection.count} {collection.count === 1 ? 'item' : 'items'}
-                </div>
-            </div>
+        <NavLink href={href} className="block no-underline">
+            <Card className="cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md">
+                <CardContent className="p-5">
+                    <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[collection.type] ?? ''}`}>
+                        {collection.type}
+                    </span>
+                    <div className="font-semibold text-card-foreground">{collection.title}</div>
+                    <div className="mt-1 text-sm text-muted-foreground">
+                        {collection.description || 'No description'}
+                    </div>
+                    <div className="mt-2 font-mono text-xs text-muted-foreground">
+                        {collection.count} {collection.count === 1 ? 'item' : 'items'}
+                    </div>
+                </CardContent>
+            </Card>
         </NavLink>
     );
 }

package/src/components/DetailPage.tsx

@@ -1,6 +1,10 @@
+import { Badge } from '@vertesia/ui/core';
+import { NavLink } from '@vertesia/ui/router';
+import { ArrowLeft } from 'lucide-react';
 import type { ReactNode } from 'react';
+
 import type { ResourceType } from '../types.js';
-import { NavLink } from '@vertesia/ui/router';
+import { TYPE_VARIANTS } from './typeVariants.js';
 
 interface DetailPageProps {
     type: ResourceType;
@@ -13,22 +17,27 @@ interface DetailPageProps {
 
 export function DetailPage({ type, title, description, tags, backHref = '/', children }: DetailPageProps) {
     return (
-        <div className="vta-root">
-            <nav className="vta-detail-nav">
+        <div className="mx-auto max-w-5xl px-7 py-10">
+            <nav className="mb-5 flex items-center gap-4">
                 {backHref !== '/' && (
-                    <NavLink href="/" className="vta-detail-back">Home</NavLink>
+                    <NavLink href="/" className="text-sm text-primary hover:opacity-75">Home</NavLink>
                 )}
-                <NavLink href={backHref} className="vta-detail-back">&larr; Back</NavLink>
+                <NavLink href={backHref} className="flex items-center gap-1 text-sm text-primary hover:opacity-75">
+                    <ArrowLeft className="size-3.5" />
+                    Back
+                </NavLink>
             </nav>
 
-            <div className="vta-detail-header">
-                <span className={`vta-card-type vta-card-type--${type}`}>{type}</span>
-                <h1 className="vta-detail-title">{title}</h1>
-                {description && <p className="vta-detail-desc">{description}</p>}
+            <div className="mb-8">
+                <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[type] ?? ''}`}>
+                    {type}
+                </span>
+                <h1 className="-tracking-wide text-3xl font-bold text-foreground">{title}</h1>
+                {description && <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{description}</p>}
                 {tags && tags.length > 0 && (
-                    <div className="vta-card-tags">
+                    <div className="mt-3 flex flex-wrap gap-1.5">
                         {tags.map(tag => (
-                            <span key={tag} className="vta-tag">{tag}</span>
+                            <Badge key={tag} variant="default">{tag}</Badge>
                         ))}
                     </div>
                 )}

package/src/components/EndpointPanel.tsx

@@ -1,3 +1,5 @@
+import { Button } from '@vertesia/ui/core';
+import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 
 export function EndpointPanel({ label, path }: { label: string; path: string }) {
@@ -11,13 +13,20 @@ export function EndpointPanel({ label, path }: { label: string; path: string })
     }
 
     return (
-        <div className="vta-endpoint">
-            <div className="vta-endpoint-label">{label}</div>
-            <div className="vta-endpoint-box">
-                <code className="vta-endpoint-code">{path}</code>
-                <button onClick={handleCopy} className="vta-copy-btn" title="Copy full URL">
-                    {copied ? '\u2713' : '\u29C9'}
-                </button>
+        <div className="mb-3">
+            <div className="mb-1 text-[0.7rem] font-medium uppercase tracking-widest text-primary">
+                {label}
+            </div>
+            <div className="flex items-center gap-2 rounded-lg border border-border bg-muted-background px-3 py-2">
+                <code className="flex-1 font-mono text-sm text-foreground">{path}</code>
+                <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={handleCopy}
+                    aria-label="Copy full URL"
+                >
+                    {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+                </Button>
             </div>
         </div>
     );

package/src/components/HeroSection.tsx

@@ -1,3 +1,6 @@
+import { Card } from '@vertesia/ui/core';
+import { Download, LayoutDashboard } from 'lucide-react';
+
 import type { ResourceItem, ResourceType } from '../types.js';
 import { EndpointPanel } from './EndpointPanel.js';
 import { SummaryBadge } from './SummaryBadge.js';
@@ -22,6 +25,7 @@ function countByType(resources: ResourceItem[]): Record<string, number> {
 
 const badgeLabels: { type: ResourceType; label: string }[] = [
     { type: 'tool', label: 'tool' },
+    { type: 'activity', label: 'activity' },
     { type: 'skill', label: 'skill' },
     { type: 'interaction', label: 'interaction' },
     { type: 'type', label: 'content type' },
@@ -33,56 +37,59 @@ export function HeroSection({ title, version, resources }: HeroSectionProps) {
     const counts = countByType(resources);
 
     return (
-        <header className="vta-hero">
-            <div className="vta-hero-main">
-                <div className="vta-hero-identity">
-                    <div className="vta-hero-logo">
-                        {getInitials(title)}
-                    </div>
-                    <div>
-                        <p className="vta-hero-eyebrow">Tools Server</p>
-                        <h1 className="vta-hero-title">{title}</h1>
+        <Card className="mb-10 overflow-hidden border bg-linear-to-br from-card to-muted-background">
+            <div className="flex flex-col gap-6 p-6 md:flex-row md:items-start md:justify-between">
+                <div className="flex flex-1 flex-col gap-3">
+                    <div className="flex items-center gap-4">
+                        <div className="flex size-14 items-center justify-center rounded-xl bg-linear-to-br from-sky-400 to-indigo-500 text-sm font-semibold uppercase tracking-wider text-white shadow-lg">
+                            {getInitials(title)}
+                        </div>
+                        <div>
+                            <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">Tools Server</p>
+                            <h1 className="-tracking-wide text-2xl font-bold text-foreground">{title}</h1>
+                        </div>
                     </div>
-                </div>
 
-                <p className="vta-hero-tagline">
-                    Discover the tools, skills, interactions, and content types exposed by this server.
-                </p>
+                    <p className="text-sm text-muted-foreground">
+                        Discover the tools, skills, interactions, and content types exposed by this server.
+                    </p>
 
-                <div className="vta-hero-summary">
-                    {badgeLabels.map(({ type, label }) => (
-                        <SummaryBadge key={type} count={counts[type] || 0} label={label} />
-                    ))}
-                </div>
+                    <div className="flex flex-wrap gap-2">
+                        {badgeLabels.map(({ type, label }) => (
+                            <SummaryBadge key={type} count={counts[type] || 0} label={label} />
+                        ))}
+                    </div>
 
-                <div className="vta-hero-links">
-                    <a href="/app/" target="_blank" className="vta-link-primary">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                            <line x1="9" y1="3" x2="9" y2="21" />
-                        </svg>
-                        UI Plugin Dev
-                    </a>
-                    <a href="/lib/plugin.js" className="vta-link-secondary">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                            <polyline points="7 10 12 15 17 10" />
-                            <line x1="12" y1="15" x2="12" y2="3" />
-                        </svg>
-                        Plugin Bundle
-                    </a>
+                    <div className="flex flex-wrap gap-3 pt-1">
+                        <a
+                            href="/app/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex h-8 items-center gap-2 rounded bg-primary px-3 text-xs font-medium text-white shadow-xs hover:bg-primary/90"
+                        >
+                            <LayoutDashboard className="size-4" />
+                            UI Plugin Dev
+                        </a>
+                        <a
+                            href="/lib/plugin.js"
+                            className="inline-flex h-8 items-center gap-2 rounded bg-primary/5 px-3 text-xs font-medium text-primary shadow-xs hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/20"
+                        >
+                            <Download className="size-4" />
+                            Plugin Bundle
+                        </a>
+                    </div>
                 </div>
-            </div>
 
-            <aside className="vta-hero-panel">
-                <EndpointPanel label="Base endpoint" path="/api" />
-                <EndpointPanel label="Package endpoint" path="/api/package" />
-                <p className="vta-hero-hint">
-                    Use <strong>POST /api/tools/&lt;collection&gt;</strong> or{' '}
-                    <strong>POST /api/skills/&lt;collection&gt;</strong> to call these from your apps or agents.
-                </p>
-                <p className="vta-hero-version">v{version}</p>
-            </aside>
-        </header>
+                <aside className="min-w-55 max-w-65 shrink-0">
+                    <EndpointPanel label="Base endpoint" path="/api" />
+                    <EndpointPanel label="Package endpoint" path="/api/package" />
+                    <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                        Use <strong className="text-foreground">POST /api/tools/&lt;collection&gt;</strong> or{' '}
+                        <strong className="text-foreground">POST /api/skills/&lt;collection&gt;</strong> to call these from your apps or agents.
+                    </p>
+                    <p className="mt-1 text-xs text-muted-foreground">v{version}</p>
+                </aside>
+            </div>
+        </Card>
     );
 }

package/src/components/ResourceCard.tsx

@@ -1,25 +1,30 @@
+import { Badge, Card, CardContent } from '@vertesia/ui/core';
+
 import type { ResourceItem } from '../types.js';
+import { TYPE_VARIANTS } from './typeVariants.js';
 
 export function ResourceCard({ resource }: { resource: ResourceItem }) {
     return (
-        <div className="vta-card">
-            <span className={`vta-card-type vta-card-type--${resource.type}`}>
-                {resource.type}
-            </span>
-            <div className="vta-card-title">{resource.title}</div>
-            <div className="vta-card-desc">
-                {resource.description || 'No description'}
-            </div>
-            {resource.tags && resource.tags.length > 0 && (
-                <div className="vta-card-tags">
-                    {resource.tags.map(tag => (
-                        <span key={tag} className="vta-tag">{tag}</span>
-                    ))}
+        <Card className="transition-all hover:-translate-y-0.5 hover:shadow-md">
+            <CardContent className="p-5">
+                <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[resource.type] ?? ''}`}>
+                    {resource.type}
+                </span>
+                <div className="font-semibold text-card-foreground">{resource.title}</div>
+                <div className="mt-1 text-sm text-muted-foreground">
+                    {resource.description || 'No description'}
                 </div>
-            )}
-            {resource.url && (
-                <div className="vta-card-url">{resource.url}</div>
-            )}
-        </div>
+                {resource.tags && resource.tags.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-1">
+                        {resource.tags.map(tag => (
+                            <Badge key={tag} variant="default">{tag}</Badge>
+                        ))}
+                    </div>
+                )}
+                {resource.url && (
+                    <div className="mt-2 truncate font-mono text-xs text-muted-foreground">{resource.url}</div>
+                )}
+            </CardContent>
+        </Card>
     );
 }

package/src/components/ResourceSection.tsx

@@ -1,3 +1,5 @@
+import { Separator } from '@vertesia/ui/core';
+
 import type { ResourceItem } from '../types.js';
 import { ResourceCard } from './ResourceCard.js';
 
@@ -13,15 +15,15 @@ export function ResourceSection({ title, subtitle, resources, showDivider }: Res
 
     return (
         <section>
-            {showDivider && <hr className="vta-divider" />}
+            {showDivider && <Separator className="my-8" />}
             <div>
-                <h2 className="vta-section-title">
+                <h2 className="text-xl font-semibold text-foreground">
                     {title}
-                    <span className="vta-section-count">({resources.length})</span>
+                    <span className="ml-2 text-sm font-normal text-muted-foreground">({resources.length})</span>
                 </h2>
-                <p className="vta-section-subtitle">{subtitle}</p>
+                <p className="mb-4 text-sm text-muted-foreground">{subtitle}</p>
             </div>
-            <div className="vta-card-grid">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {resources.map(r => (
                     <ResourceCard key={`${r.type}:${r.name}`} resource={r} />
                 ))}

package/src/components/SearchBar.tsx

@@ -1,3 +1,5 @@
+import { Input } from '@vertesia/ui/core';
+
 interface SearchBarProps {
     value: string;
     onChange: (value: string) => void;
@@ -11,22 +13,22 @@ export function SearchBar({ value, onChange, placeholder, resultCount, totalCoun
     const noResults = hasQuery && resultCount === 0;
 
     return (
-        <div className="vta-search">
-            <input
+        <div className="mb-7">
+            <Input
                 type="search"
                 value={value}
-                onChange={e => onChange(e.target.value)}
+                onChange={onChange}
                 placeholder={placeholder || 'Search collections...'}
-                className="vta-search-input"
+                className="max-w-sm rounded-full"
                 autoComplete="off"
             />
             {hasQuery && !noResults && (
-                <p className="vta-search-hint">
+                <p className="mt-1.5 text-xs text-muted-foreground">
                     Showing {resultCount} of {totalCount} resources
                 </p>
             )}
             {noResults && (
-                <p className="vta-search-empty">
+                <p className="mt-2 text-sm text-destructive">
                     No resources match this search.
                 </p>
             )}

package/src/components/SummaryBadge.tsx

@@ -1,9 +1,10 @@
+import { DotBadge } from '@vertesia/ui/core';
+
 export function SummaryBadge({ count, label }: { count: number; label: string }) {
     if (count === 0) return null;
     return (
-        <span className="vta-badge">
-            <span className="vta-badge-dot" />
+        <DotBadge variant="success">
             {count} {label}{count !== 1 ? 's' : ''}
-        </span>
+        </DotBadge>
     );
 }

package/src/components/index.ts

@@ -1,8 +1,9 @@
-export { HeroSection } from './HeroSection.js';
-export { SearchBar } from './SearchBar.js';
-export { ResourceSection } from './ResourceSection.js';
-export { ResourceCard } from './ResourceCard.js';
+export { AdminTopBar } from './AdminTopBar.js';
 export { CollectionCard } from './CollectionCard.js';
+export { DetailPage } from './DetailPage.js';
 export { EndpointPanel } from './EndpointPanel.js';
+export { HeroSection } from './HeroSection.js';
+export { ResourceCard } from './ResourceCard.js';
+export { ResourceSection } from './ResourceSection.js';
+export { SearchBar } from './SearchBar.js';
 export { SummaryBadge } from './SummaryBadge.js';
-export { DetailPage } from './DetailPage.js';

package/src/components/typeVariants.ts

@@ -0,0 +1,19 @@
+/** Tailwind class mappings for resource type badges. */
+export const TYPE_VARIANTS: Record<string, string> = {
+    tool: 'bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300',
+    skill: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300',
+    interaction: 'bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300',
+    type: 'bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300',
+    template: 'bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300',
+    activity: 'bg-rose-100 text-rose-800 dark:bg-rose-500/15 dark:text-rose-300',
+    mcp: 'bg-pink-100 text-pink-800 dark:bg-pink-500/15 dark:text-pink-300',
+};
+
+/** Tailwind class mappings for prompt role badges. */
+export const ROLE_VARIANTS: Record<string, string> = {
+    system: 'bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300',
+    user: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300',
+    assistant: 'bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300',
+    safety: 'bg-pink-100 text-pink-800 dark:bg-pink-500/15 dark:text-pink-300',
+    tool: 'bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300',
+};

package/src/dev/env.ts

@@ -7,8 +7,8 @@ Env.init({
     isDocker: true,
     type: "development",
     endpoints: {
-        studio: "https://api.vertesia.io",
-        zeno: "https://api.vertesia.io",
-        sts: "https://sts.vertesia.io",
+        studio: "https://api.us1.vertesia.io",
+        zeno: "https://api.us1.vertesia.io",
+        sts: "https://sts.us1.vertesia.io",
     }
 });

package/src/dev/index.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+@import "../theme.css";
+
+/**
+ * Scan local sources for Tailwind classes
+ */
+@source "../";
+
+/**
+ * Scan @vertesia/ui sources for Tailwind classes
+ */
+@source "../../../ui/src";

package/src/dev/main.tsx

@@ -1,10 +1,14 @@
 /// <reference types="vite/client" />
+import './index.css';
 import "./env.js"
+
+import { I18nProvider } from '@vertesia/ui/i18n';
+import { VertesiaShell } from '@vertesia/ui/shell';
+import { RouterProvider } from '@vertesia/ui/router';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider } from '@vertesia/ui/router';
+
 import { AdminApp } from '../AdminApp.js';
-import { VertesiaShell } from '@vertesia/ui/shell';
 
 const baseUrl = import.meta.env.VITE_API_BASE_URL;
 
@@ -29,9 +33,11 @@ if (!baseUrl) {
 } else {
     root.render(
         <StrictMode>
-            <VertesiaShell>
-                <RouterProvider routes={devRoutes} />
-            </VertesiaShell>
+            <I18nProvider lng="en">
+                <VertesiaShell>
+                    <RouterProvider routes={devRoutes} />
+                </VertesiaShell>
+            </I18nProvider>
         </StrictMode>,
     );
 }

package/src/hooks.ts

@@ -3,7 +3,8 @@
  */
 
 import { useFetch } from '@vertesia/ui/core';
-import type { ServerInfo, ResourceData } from './types.js';
+
+import type { ResourceData, ServerInfo } from './types.js';
 import { buildResourceData } from './types.js';
 
 /**
@@ -27,10 +28,11 @@ export function useResourceData(baseUrl: string, mcpEndpoints?: string[]) {
             fetchJson('interactions'),
             fetchJson('tools'),
             fetchJson('skills'),
+            fetchJson('activities'),
             fetchJson('types'),
             fetchJson('templates'),
-        ]).then(([interactions, tools, skills, types, templates]) =>
-            buildResourceData(interactions, tools, skills, types, templates, mcpEndpoints)
+        ]).then(([interactions, tools, skills, activities, types, templates]) =>
+            buildResourceData(interactions, tools, skills, activities, types, templates, mcpEndpoints)
         );
     }, [baseUrl, mcpEndpoints]);
 }