@vertesia/tools-admin-ui 1.3.0 → 1.4.0-dev.20260615.042549Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/tools-admin-ui",
-  "version": "1.3.0",
+  "version": "1.4.0-dev.20260615.042549Z",
   "description": "Shared admin UI for Vertesia tool servers",
   "type": "module",
   "license": "Apache-2.0",
@@ -16,24 +16,25 @@
     "./theme.css": "./src/theme.css"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.17",
-    "@types/react": "^19.2.3",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "tailwindcss": "^4.1.17",
-    "typescript": "^6.0.2",
-    "vite": "^7.3.0"
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "@vertesia/tsconfig": "0.1.0"
   },
   "dependencies": {
-    "lucide-react": "^0.562.0",
-    "@vertesia/common": "1.3.0",
-    "@vertesia/ui": "1.3.0"
+    "lucide-react": "^1.17.0",
+    "@vertesia/common": "1.4.0-dev.20260615.042549Z",
+    "@vertesia/ui": "1.4.0-dev.20260615.042549Z"
   },
   "repository": {
     "type": "git",
@@ -48,6 +49,7 @@
     "react"
   ],
   "scripts": {
+    "lint": "biome lint src",
     "build": "rm -rf lib tsconfig.tsbuildinfo && tsc --build && vite build --mode lib",
     "dev": "vite dev"
   }

package/src/AdminApp.tsx

@@ -47,10 +47,11 @@ export interface AdminAppProps {
  */
 export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     const { data: serverInfo, isLoading: loadingInfo, error: infoError } = useServerInfo(baseUrl);
-    const { data: resourceData, isLoading: loadingData, error: dataError } = useResourceData(
-        baseUrl,
-        serverInfo?.endpoints.mcp,
-    );
+    const {
+        data: resourceData,
+        isLoading: loadingData,
+        error: dataError,
+    } = useResourceData(baseUrl, serverInfo?.endpoints?.mcp);
 
     const isLoading = loadingInfo || loadingData;
     const error = infoError || dataError;
@@ -64,11 +65,7 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     }
 
     if (error) {
-        return (
-            <div className="p-6 text-destructive">
-                Failed to load server info. Is the API running?
-            </div>
-        );
+        return <div className="p-6 text-destructive">Failed to load server info. Is the API running?</div>;
     }
 
     if (!serverInfo || !resourceData) return null;
@@ -78,12 +75,14 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     return (
         <div className="min-h-screen bg-background text-foreground">
             <AdminTopBar title={title} />
-            <AdminContext.Provider value={{
-                serverInfo,
-                collections: resourceData.collections,
-                resources: resourceData.resources,
-                baseUrl,
-            }}>
+            <AdminContext.Provider
+                value={{
+                    serverInfo,
+                    collections: resourceData.collections,
+                    resources: resourceData.resources,
+                    baseUrl,
+                }}
+            >
                 <NestedRouterProvider routes={routes}>
                     <RouteComponent />
                 </NestedRouterProvider>

package/src/components/AdminTopBar.tsx

@@ -13,7 +13,12 @@ export function AdminTopBar({ title }: AdminTopBarProps) {
         <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('')}
+                    {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>
@@ -23,12 +28,7 @@ export function AdminTopBar({ title }: AdminTopBarProps) {
                 {user && (
                     <>
                         <Avatar size="sm" name={user.name} color="bg-primary" />
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => logout()}
-                            alt="Sign out"
-                        >
+                        <Button variant="outline" size="sm" onClick={() => logout()} alt="Sign out">
                             <LogOut className="size-4" />
                         </Button>
                     </>

package/src/components/CollectionCard.tsx

@@ -12,7 +12,9 @@ export function CollectionCard({ collection }: { collection: CollectionInfo }) {
         <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] ?? ''}`}>
+                    <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>

package/src/components/DetailPage.tsx

@@ -20,7 +20,9 @@ export function DetailPage({ type, title, description, tags, backHref = '/', chi
         <div className="mx-auto max-w-5xl px-7 py-10">
             <nav className="mb-5 flex items-center gap-4">
                 {backHref !== '/' && (
-                    <NavLink href="/" className="text-sm text-primary hover:opacity-75">Home</NavLink>
+                    <NavLink href="/" className="text-sm text-primary hover:opacity-75">
+                        Home
+                    </NavLink>
                 )}
                 <NavLink href={backHref} className="flex items-center gap-1 text-sm text-primary hover:opacity-75">
                     <ArrowLeft className="size-3.5" />
@@ -29,15 +31,19 @@ export function DetailPage({ type, title, description, tags, backHref = '/', chi
             </nav>
 
             <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] ?? ''}`}>
+                <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="mt-3 flex flex-wrap gap-1.5">
-                        {tags.map(tag => (
-                            <Badge key={tag} variant="default">{tag}</Badge>
+                        {tags.map((tag) => (
+                            <Badge key={tag} variant="default">
+                                {tag}
+                            </Badge>
                         ))}
                     </div>
                 )}

package/src/components/EndpointPanel.tsx

@@ -14,17 +14,10 @@ export function EndpointPanel({ label, path }: { label: string; path: string })
 
     return (
         <div className="mb-3">
-            <div className="mb-1 text-[0.7rem] font-medium uppercase tracking-widest text-primary">
-                {label}
-            </div>
+            <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"
-                >
+                <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>

package/src/components/HeroSection.tsx

@@ -12,7 +12,13 @@ interface HeroSectionProps {
 }
 
 function getInitials(title: string): string {
-    return title.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
+    return title
+        .split(/\s+/)
+        .map((w) => w[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
 }
 
 function countByType(resources: ResourceItem[]): Record<string, number> {
@@ -45,7 +51,9 @@ export function HeroSection({ title, version, resources }: HeroSectionProps) {
                             {getInitials(title)}
                         </div>
                         <div>
-                            <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">Tools Server</p>
+                            <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>
@@ -85,7 +93,8 @@ export function HeroSection({ title, version, resources }: HeroSectionProps) {
                     <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.
+                        <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>

package/src/components/ResourceCard.tsx

@@ -7,17 +7,19 @@ export function ResourceCard({ resource }: { resource: ResourceItem }) {
     return (
         <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] ?? ''}`}>
+                <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>
+                <div className="mt-1 text-sm text-muted-foreground">{resource.description || 'No description'}</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>
+                        {resource.tags.map((tag) => (
+                            <Badge key={tag} variant="default">
+                                {tag}
+                            </Badge>
                         ))}
                     </div>
                 )}

package/src/components/ResourceSection.tsx

@@ -24,7 +24,7 @@ export function ResourceSection({ title, subtitle, resources, showDivider }: Res
                 <p className="mb-4 text-sm text-muted-foreground">{subtitle}</p>
             </div>
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                {resources.map(r => (
+                {resources.map((r) => (
                     <ResourceCard key={`${r.type}:${r.name}`} resource={r} />
                 ))}
             </div>

package/src/components/SearchBar.tsx

@@ -27,11 +27,7 @@ export function SearchBar({ value, onChange, placeholder, resultCount, totalCoun
                     Showing {resultCount} of {totalCount} resources
                 </p>
             )}
-            {noResults && (
-                <p className="mt-2 text-sm text-destructive">
-                    No resources match this search.
-                </p>
-            )}
+            {noResults && <p className="mt-2 text-sm text-destructive">No resources match this search.</p>}
         </div>
     );
 }

package/src/components/SummaryBadge.tsx

@@ -4,7 +4,8 @@ export function SummaryBadge({ count, label }: { count: number; label: string })
     if (count === 0) return null;
     return (
         <DotBadge variant="success">
-            {count} {label}{count !== 1 ? 's' : ''}
+            {count} {label}
+            {count !== 1 ? 's' : ''}
         </DotBadge>
     );
 }

package/src/dev/env.ts

@@ -1,14 +1,14 @@
-import { Env } from "@vertesia/ui/env";
+import { Env } from '@vertesia/ui/env';
 
 Env.init({
-    name: "Tools Admin UI",
-    version: "1.0.0",
+    name: 'Tools Admin UI',
+    version: '1.0.0',
     isLocalDev: true,
     isDocker: true,
-    type: "development",
+    type: 'development',
     endpoints: {
-        studio: "https://api.us1.vertesia.io",
-        zeno: "https://api.us1.vertesia.io",
-        sts: "https://sts.us1.vertesia.io",
-    }
+        studio: 'https://api.us1.vertesia.io',
+        zeno: 'https://api.us1.vertesia.io',
+        sts: 'https://sts.us1.vertesia.io',
+    },
 });

package/src/dev/main.tsx

@@ -1,10 +1,9 @@
 /// <reference types="vite/client" />
 import './index.css';
-import "./env.js"
+import './env.js';
 
-import { I18nProvider } from '@vertesia/ui/i18n';
-import { VertesiaShell } from '@vertesia/ui/shell';
 import { RouterProvider } from '@vertesia/ui/router';
+import { VertesiaShell } from '@vertesia/ui/shell';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -12,6 +11,7 @@ import { AdminApp } from '../AdminApp.js';
 
 const baseUrl = import.meta.env.VITE_API_BASE_URL;
 
+// biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
 const root = createRoot(document.getElementById('root')!);
 
 /**
@@ -22,22 +22,27 @@ const devRoutes = [{ path: '/*', Component: () => <AdminApp baseUrl={baseUrl} />
 
 if (!baseUrl) {
     root.render(
-        <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif', color: '#ef4444' }}>
-            <h2>Missing environment variable</h2>
-            <p><code>VITE_API_BASE_URL</code> is not defined.</p>
-            <p>Create a <code>.env.local</code> file in this package with:</p>
-            <pre style={{ background: '#f3f4f6', padding: '1rem', borderRadius: '8px', color: '#111827' }}>
-                VITE_API_BASE_URL=http://localhost:3000/api</pre>
-        </div>,
+        <StrictMode>
+            <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif', color: '#ef4444' }}>
+                <h2>Missing environment variable</h2>
+                <p>
+                    <code>VITE_API_BASE_URL</code> is not defined.
+                </p>
+                <p>
+                    Create a <code>.env.local</code> file in this package with:
+                </p>
+                <pre style={{ background: '#f3f4f6', padding: '1rem', borderRadius: '8px', color: '#111827' }}>
+                    VITE_API_BASE_URL=http://localhost:3000/api
+                </pre>
+            </div>
+        </StrictMode>,
     );
 } else {
     root.render(
         <StrictMode>
-            <I18nProvider lng="en">
-                <VertesiaShell>
-                    <RouterProvider routes={devRoutes} />
-                </VertesiaShell>
-            </I18nProvider>
+            <VertesiaShell>
+                <RouterProvider routes={devRoutes} />
+            </VertesiaShell>
         </StrictMode>,
     );
 }

package/src/hooks.ts

@@ -7,14 +7,21 @@ import { useFetch } from '@vertesia/ui/core';
 import type { ResourceData, ServerInfo } from './types.js';
 import { buildResourceData } from './types.js';
 
+type ResourceDataArgs = Parameters<typeof buildResourceData>;
+
+async function fetchJson<T>(url: string): Promise<T> {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Request failed: ${response.status} ${response.statusText}`);
+    }
+    return response.json() as Promise<T>;
+}
+
 /**
  * Fetches the tool server info (message, version, endpoints).
  */
 export function useServerInfo(baseUrl: string) {
-    return useFetch<ServerInfo>(() =>
-        fetch(baseUrl).then(r => r.json()),
-        [baseUrl]
-    );
+    return useFetch<ServerInfo>(() => fetchJson<ServerInfo>(baseUrl), [baseUrl]);
 }
 
 /**
@@ -23,16 +30,16 @@ export function useServerInfo(baseUrl: string) {
  */
 export function useResourceData(baseUrl: string, mcpEndpoints?: string[]) {
     return useFetch<ResourceData>(() => {
-        const fetchJson = (path: string) => fetch(`${baseUrl}/${path}`).then(r => r.json());
+        const fetchResource = <T>(path: string) => fetchJson<T>(`${baseUrl}/${path}`);
         return Promise.all([
-            fetchJson('interactions'),
-            fetchJson('tools'),
-            fetchJson('skills'),
-            fetchJson('activities'),
-            fetchJson('types'),
-            fetchJson('templates'),
+            fetchResource<ResourceDataArgs[0]>('interactions'),
+            fetchResource<ResourceDataArgs[1]>('tools'),
+            fetchResource<ResourceDataArgs[2]>('skills'),
+            fetchResource<ResourceDataArgs[3]>('activities'),
+            fetchResource<ResourceDataArgs[4]>('types'),
+            fetchResource<ResourceDataArgs[5]>('templates'),
         ]).then(([interactions, tools, skills, activities, types, templates]) =>
-            buildResourceData(interactions, tools, skills, activities, types, templates, mcpEndpoints)
+            buildResourceData(interactions, tools, skills, activities, types, templates, mcpEndpoints),
         );
     }, [baseUrl, mcpEndpoints]);
 }

package/src/index.ts

@@ -1,6 +1,6 @@
-export { AdminApp } from './AdminApp.js';
 export type { AdminAppProps } from './AdminApp.js';
-export type { ServerInfo, ResourceType, ResourceItem, CollectionInfo } from './types.js';
-export { buildResourceData, filterResources } from './types.js';
-export { AdminContext, useAdminContext } from './AdminContext.js';
+export { AdminApp } from './AdminApp.js';
 export type { AdminContextValue } from './AdminContext.js';
+export { AdminContext, useAdminContext } from './AdminContext.js';
+export type { CollectionInfo, ResourceItem, ResourceType, ServerInfo } from './types.js';
+export { buildResourceData, filterResources } from './types.js';

package/src/pages/ActivityCollection.tsx

@@ -17,27 +17,41 @@ export function ActivityCollection() {
     const { baseUrl } = useAdminContext();
 
     const { data, error } = useFetch<ActivityCollectionResponse>(
-        () => fetch(`${baseUrl}/activities/${collection}`).then(r => {
-            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
-            return r.json();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/activities/${collection}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection],
     );
 
-    if (error) return <div className="p-6 text-destructive">Failed to load activity collection &ldquo;{collection}&rdquo;.</div>;
-    if (!data) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+    if (error)
+        return (
+            <div className="p-6 text-destructive">Failed to load activity collection &ldquo;{collection}&rdquo;.</div>
+        );
+    if (!data)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage
             type="activity"
             title={data.title || collection}
-            description={data.description || `${data.activities.length} activit${data.activities.length !== 1 ? 'ies' : 'y'} in this collection.`}
+            description={
+                data.description ||
+                `${data.activities.length} activit${data.activities.length !== 1 ? 'ies' : 'y'} in this collection.`
+            }
         >
-            {data.activities.map(activity => (
+            {data.activities.map((activity) => (
                 <Card key={activity.name} className="mb-4">
                     <CardContent className="p-5">
                         <div className="mb-2 flex items-center gap-2">
-                            <span className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.activity}`}>
+                            <span
+                                className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.activity}`}
+                            >
                                 activity
                             </span>
                             <span className="font-semibold text-card-foreground">{activity.name}</span>
@@ -45,7 +59,9 @@ export function ActivityCollection() {
                         <div className="text-sm text-muted-foreground">{activity.description || 'No description'}</div>
                         {activity.input_schema && (
                             <div className="mt-3">
-                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Input Schema</p>
+                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                    Input Schema
+                                </p>
                                 <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
                                     {JSON.stringify(activity.input_schema, null, 2)}
                                 </pre>
@@ -53,7 +69,9 @@ export function ActivityCollection() {
                         )}
                         {activity.output_schema && (
                             <div className="mt-3">
-                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Output Schema</p>
+                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                    Output Schema
+                                </p>
                                 <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
                                     {JSON.stringify(activity.output_schema, null, 2)}
                                 </pre>