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

package/src/pages/TemplateCollection.tsx

@@ -1,14 +1,16 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams, NavLink } from '@vertesia/ui/router';
 import type { RenderingTemplateDefinitionRef } from '@vertesia/common';
+import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { NavLink, useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 export function TemplateCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data: templates, isLoading, error } = useFetch<RenderingTemplateDefinitionRef[]>(
+    const { data: templates, error } = useFetch<RenderingTemplateDefinitionRef[]>(
         () => fetch(`${baseUrl}/templates/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -16,8 +18,8 @@ export function TemplateCollection() {
         [baseUrl, collection]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
-    if (error || !templates) return <div className="vta-error">Failed to load template collection &ldquo;{collection}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load template collection &ldquo;{collection}&rdquo;.</div>;
+    if (!templates) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -25,27 +27,29 @@ export function TemplateCollection() {
             title={collection}
             description={`${templates.length} template${templates.length !== 1 ? 's' : ''} in this collection.`}
         >
-            <div className="vta-card-grid">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {templates.map(tmpl => (
                     <NavLink
                         key={tmpl.name}
                         href={`/templates/${collection}/${tmpl.name}`}
-                        className="vta-card-link"
+                        className="no-underline"
                     >
-                        <div className="vta-card vta-card--link">
-                            <div className="vta-card-type vta-card-type--template">
-                                {tmpl.type || 'template'}
-                            </div>
-                            <div className="vta-card-title">{tmpl.title || tmpl.name}</div>
-                            <div className="vta-card-desc">{tmpl.description || 'No description'}</div>
-                            {tmpl.tags && tmpl.tags.length > 0 && (
-                                <div className="vta-card-tags">
-                                    {tmpl.tags.map(tag => (
-                                        <span key={tag} className="vta-tag">{tag}</span>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
+                        <Card className="h-full 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.template}`}>
+                                    {tmpl.type || 'template'}
+                                </span>
+                                <div className="font-semibold text-card-foreground">{tmpl.title || tmpl.name}</div>
+                                <div className="mt-1 text-sm text-muted-foreground">{tmpl.description || 'No description'}</div>
+                                {tmpl.tags && tmpl.tags.length > 0 && (
+                                    <div className="mt-3 flex flex-wrap gap-1.5">
+                                        {tmpl.tags.map(tag => (
+                                            <Badge key={tag} variant="default">{tag}</Badge>
+                                        ))}
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
                     </NavLink>
                 ))}
             </div>

package/src/pages/TemplateDetail.tsx

@@ -1,5 +1,6 @@
-import { useFetch } from '@vertesia/ui/core';
+import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
 
@@ -19,7 +20,7 @@ export function TemplateDetail() {
     const name = params.name;
     const { baseUrl } = useAdminContext();
 
-    const { data: template, isLoading, error } = useFetch<TemplateDefinitionResponse>(
+    const { data: template, error } = useFetch<TemplateDefinitionResponse>(
         () => fetch(`${baseUrl}/templates/${collection}/${name}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load template: ${r.statusText}`);
             return r.json();
@@ -27,8 +28,8 @@ export function TemplateDetail() {
         [baseUrl, collection, name]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading template...</div>;
-    if (error || !template) return <div className="vta-error">Failed to load template &ldquo;{name}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load template &ldquo;{name}&rdquo;.</div>;
+    if (!template) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -38,30 +39,30 @@ export function TemplateDetail() {
             tags={template.tags}
             backHref={`/templates/${collection}`}
         >
-            {/* Type badge & Assets */}
-            <div className="vta-detail-section">
-                <div className="vta-detail-flags">
-                    <span className="vta-detail-flag">{template.type}</span>
+            <div className="mb-8">
+                <div className="flex flex-wrap gap-2">
+                    <Badge variant="success">{template.type}</Badge>
                 </div>
             </div>
 
             {template.assets && template.assets.length > 0 && (
-                <div className="vta-detail-section">
-                    <h2>Assets</h2>
-                    <div className="vta-detail-flags">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Assets</h2>
+                    <div className="flex flex-wrap gap-2">
                         {template.assets.map(asset => (
-                            <span key={asset} className="vta-detail-flag">
+                            <Badge key={asset} variant="success">
                                 {asset.split('/').pop()}
-                            </span>
+                            </Badge>
                         ))}
                     </div>
                 </div>
             )}
 
-            {/* Instructions */}
-            <div className="vta-detail-section">
-                <h2>Instructions</h2>
-                <pre className="vta-detail-code">{template.instructions}</pre>
+            <div className="mb-8">
+                <h2 className="mb-3 text-lg font-semibold text-foreground">Instructions</h2>
+                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                    {template.instructions}
+                </pre>
             </div>
         </DetailPage>
     );

package/src/pages/ToolCollection.tsx

@@ -1,7 +1,9 @@
-import { useFetch } from '@vertesia/ui/core';
+import { Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 interface ToolDef {
     name: string;
@@ -19,7 +21,7 @@ export function ToolCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data, isLoading, error } = useFetch<ToolCollectionResponse>(
+    const { data, error } = useFetch<ToolCollectionResponse>(
         () => fetch(`${baseUrl}/tools/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -27,8 +29,8 @@ export function ToolCollection() {
         [baseUrl, collection]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
-    if (error || !data) return <div className="vta-error">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
+    if (!data) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -37,18 +39,22 @@ export function ToolCollection() {
             description={data.description || `${data.tools.length} tool${data.tools.length !== 1 ? 's' : ''} in this collection.`}
         >
             {data.tools.map(tool => (
-                <div key={tool.name} className="vta-detail-card">
-                    <div className="vta-detail-card-header">
-                        <span className="vta-card-type vta-card-type--tool">tool</span>
-                        <div className="vta-card-title">{tool.name}</div>
-                    </div>
-                    <div className="vta-card-desc">{tool.description || 'No description'}</div>
-                    {tool.input_schema && (
-                        <pre className="vta-detail-code">
-                            {JSON.stringify(tool.input_schema, null, 2)}
-                        </pre>
-                    )}
-                </div>
+                <Card key={tool.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.tool}`}>
+                                tool
+                            </span>
+                            <span className="font-semibold text-card-foreground">{tool.name}</span>
+                        </div>
+                        <div className="text-sm text-muted-foreground">{tool.description || 'No description'}</div>
+                        {tool.input_schema && (
+                            <pre className="mt-3 whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                                {JSON.stringify(tool.input_schema, null, 2)}
+                            </pre>
+                        )}
+                    </CardContent>
+                </Card>
             ))}
         </DetailPage>
     );

package/src/pages/TypeCollection.tsx

@@ -1,14 +1,16 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams, NavLink } from '@vertesia/ui/router';
 import type { InCodeTypeDefinition } from '@vertesia/common';
+import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { NavLink, useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 export function TypeCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data: types, isLoading, error } = useFetch<InCodeTypeDefinition[]>(
+    const { data: types, error } = useFetch<InCodeTypeDefinition[]>(
         () => fetch(`${baseUrl}/types/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -16,8 +18,8 @@ export function TypeCollection() {
         [baseUrl, collection]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
-    if (error || !types) return <div className="vta-error">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
+    if (!types) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -25,32 +27,38 @@ export function TypeCollection() {
             title={collection}
             description={`${types.length} content type${types.length !== 1 ? 's' : ''} in this collection.`}
         >
-            <div className="vta-card-grid">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {types.map(t => {
                     const typeName = t.id?.split(':')[1] || t.name;
                     return (
                         <NavLink
                             key={t.name}
                             href={`/types/${collection}/${typeName}`}
-                            className="vta-card-link"
+                            className="no-underline"
                         >
-                            <div className="vta-card vta-card--link">
-                                <span className="vta-card-type vta-card-type--type">type</span>
-                                <div className="vta-card-title">{t.name}</div>
-                                <div className="vta-card-desc">{t.description || 'No description'}</div>
-                                {t.tags && t.tags.length > 0 && (
-                                    <div className="vta-card-tags">
-                                        {t.tags.map(tag => (
-                                            <span key={tag} className="vta-tag">{tag}</span>
-                                        ))}
-                                    </div>
-                                )}
-                                <div className="vta-card-url">
-                                    {t.is_chunkable && 'chunkable'}
-                                    {t.is_chunkable && t.strict_mode && ' · '}
-                                    {t.strict_mode && 'strict'}
-                                </div>
-                            </div>
+                            <Card className="h-full 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.type}`}>
+                                        type
+                                    </span>
+                                    <div className="font-semibold text-card-foreground">{t.name}</div>
+                                    <div className="mt-1 text-sm text-muted-foreground">{t.description || 'No description'}</div>
+                                    {t.tags && t.tags.length > 0 && (
+                                        <div className="mt-3 flex flex-wrap gap-1.5">
+                                            {t.tags.map(tag => (
+                                                <Badge key={tag} variant="default">{tag}</Badge>
+                                            ))}
+                                        </div>
+                                    )}
+                                    {(t.is_chunkable || t.strict_mode) && (
+                                        <div className="mt-2 truncate font-mono text-xs text-muted-foreground">
+                                            {t.is_chunkable && 'chunkable'}
+                                            {t.is_chunkable && t.strict_mode && ' · '}
+                                            {t.strict_mode && 'strict'}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
                         </NavLink>
                     );
                 })}

package/src/pages/TypeDetail.tsx

@@ -1,6 +1,7 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams } from '@vertesia/ui/router';
 import type { InCodeTypeDefinition } from '@vertesia/common';
+import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
 
@@ -10,7 +11,7 @@ export function TypeDetail() {
     const name = params.name;
     const { baseUrl } = useAdminContext();
 
-    const { data: typeDef, isLoading, error } = useFetch<InCodeTypeDefinition>(
+    const { data: typeDef, error } = useFetch<InCodeTypeDefinition>(
         () => fetch(`${baseUrl}/types/${collection}/${name}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
             return r.json();
@@ -18,8 +19,8 @@ export function TypeDetail() {
         [baseUrl, collection, name]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading type...</div>;
-    if (error || !typeDef) return <div className="vta-error">Failed to load type &ldquo;{name}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load type &ldquo;{name}&rdquo;.</div>;
+    if (!typeDef) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -29,31 +30,28 @@ export function TypeDetail() {
             tags={typeDef.tags}
             backHref={`/types/${collection}`}
         >
-            {/* Flags */}
             {(typeDef.is_chunkable || typeDef.strict_mode) && (
-                <div className="vta-detail-section">
-                    <div className="vta-detail-flags">
-                        {typeDef.is_chunkable && <span className="vta-detail-flag">Chunkable</span>}
-                        {typeDef.strict_mode && <span className="vta-detail-flag">Strict Mode</span>}
+                <div className="mb-8">
+                    <div className="flex flex-wrap gap-2">
+                        {typeDef.is_chunkable && <Badge variant="success">Chunkable</Badge>}
+                        {typeDef.strict_mode && <Badge variant="success">Strict Mode</Badge>}
                     </div>
                 </div>
             )}
 
-            {/* Object Schema */}
             {typeDef.object_schema && (
-                <div className="vta-detail-section">
-                    <h2>Object Schema</h2>
-                    <pre className="vta-detail-code">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Object Schema</h2>
+                    <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(typeDef.object_schema, null, 2)}
                     </pre>
                 </div>
             )}
 
-            {/* Table Layout */}
             {typeDef.table_layout && typeDef.table_layout.length > 0 && (
-                <div className="vta-detail-section">
-                    <h2>Table Layout</h2>
-                    <pre className="vta-detail-code">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Table Layout</h2>
+                    <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(typeDef.table_layout, null, 2)}
                     </pre>
                 </div>

package/src/theme.css

@@ -0,0 +1,12 @@
+/**
+ * Default theme for @vertesia/tools-admin-ui.
+ *
+ * Consumers should import this file (or provide their own equivalent)
+ * so that @vertesia/ui shadcn components resolve their CSS custom properties.
+ *
+ *   @import '@vertesia/tools-admin-ui/theme.css';
+ */
+
+@import "@vertesia/ui/styles/color.css";
+@import "@vertesia/ui/styles/theme.css";
+@import "@vertesia/ui/styles/utilities.css";

package/src/types.ts

@@ -6,6 +6,7 @@ import type {
     AgentToolDefinition,
     CatalogInteractionRef,
     InCodeTypeDefinition,
+    RemoteActivityDefinition,
     RenderingTemplateDefinitionRef,
 } from '@vertesia/common';
 
@@ -18,12 +19,13 @@ export interface ServerInfo {
     endpoints: {
         tools: string[];
         interactions: string[];
+        activities: string[];
         templates: string[];
         mcp: string[];
     };
 }
 
-export type ResourceType = 'tool' | 'skill' | 'interaction' | 'type' | 'template' | 'mcp';
+export type ResourceType = 'tool' | 'activity' | 'skill' | 'interaction' | 'type' | 'template' | 'mcp';
 
 /**
  * A normalized resource entry for display and search.
@@ -82,6 +84,11 @@ interface TypesResponse {
     collections: CollectionMeta[];
 }
 
+interface ActivitiesResponse {
+    activities: RemoteActivityDefinition[];
+    collections: CollectionMeta[];
+}
+
 interface TemplatesResponse {
     templates: RenderingTemplateDefinitionRef[];
     collections: CollectionMeta[];
@@ -136,6 +143,7 @@ export function buildResourceData(
     interactionsResp: InteractionsResponse,
     toolsResp: ToolsResponse,
     skillsResp: SkillsResponse,
+    activitiesResp: ActivitiesResponse,
     typesResp: TypesResponse,
     templatesResp: TemplatesResponse,
     mcpEndpoints?: string[],
@@ -219,6 +227,31 @@ export function buildResourceData(
         });
     }
 
+    // --- Activities (use collection field from definition) ---
+    const actCounts = countPerCollection(
+        activitiesResp.activities,
+        activitiesResp.collections,
+        (a) => a.collection,
+    );
+    for (const col of activitiesResp.collections) {
+        collections.push({
+            name: col.name,
+            title: col.title || formatTitle(col.name),
+            description: col.description || '',
+            type: 'activity',
+            count: actCounts.get(col.name) || 0,
+        });
+    }
+    for (const act of activitiesResp.activities) {
+        resources.push({
+            name: act.name,
+            title: act.title || formatTitle(act.name),
+            description: act.description || '',
+            type: 'activity',
+            url: act.url,
+        });
+    }
+
     // --- Types (id format: "collection:pathName") ---
     const typeCounts = countPerCollection(
         typesResp.types,