@vertesia/tools-admin-ui 0.9.0

package/src/pages/SkillCollection.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+import { useFetch } from '@vertesia/ui/core';
+import { useParams, NavLink } from '@vertesia/ui/router';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+interface SkillToolDef {
+    name: string;
+    description?: string;
+    related_tools?: string[];
+}
+
+interface SkillCollectionResponse {
+    title: string;
+    description: string;
+    tools: SkillToolDef[];
+}
+
+interface WidgetInfo {
+    skill: string;
+    collection: string;
+    url: string;
+}
+
+interface WidgetsResponse {
+    widgets: Record<string, WidgetInfo>;
+}
+
+/** Strip the learn_ prefix added by the SDK when exposing skills as tools. */
+function skillDisplayName(name: string): string {
+    return name.startsWith('learn_') ? name.slice(6) : name;
+}
+
+export function SkillCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data, isLoading, error } = useFetch<SkillCollectionResponse>(
+        () => fetch(`${baseUrl}/skills/${collection}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+            return r.json();
+        }),
+        [baseUrl, collection]
+    );
+
+    const { data: widgetsData } = useFetch<WidgetsResponse>(
+        () => fetch(`${baseUrl}/package?scope=widgets`).then(r => r.ok ? r.json() : { widgets: {} }),
+        [baseUrl]
+    );
+
+    const collectionWidgets = useMemo(() => {
+        if (!widgetsData?.widgets) return [];
+        return Object.entries(widgetsData.widgets)
+            .filter(([_, w]) => w.collection === collection)
+            .map(([name, w]) => ({ name, ...w }));
+    }, [widgetsData, collection]);
+
+    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
+    if (error || !data) return <div className="vta-error">Failed to load skill collection &ldquo;{collection}&rdquo;.</div>;
+
+    return (
+        <DetailPage
+            type="skill"
+            title={data.title || collection}
+            description={data.description || `${data.tools.length} skill${data.tools.length !== 1 ? 's' : ''} in this collection.`}
+        >
+            {/* Widgets provided by this collection */}
+            {collectionWidgets.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Widgets</h2>
+                    <div className="vta-detail-flags">
+                        {collectionWidgets.map(w => (
+                            <span key={w.name} className="vta-detail-flag">
+                                {w.name}
+                                <span className="vta-card-url" style={{ marginLeft: '0.5rem' }}>
+                                    (skill: {w.skill})
+                                </span>
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            <div className="vta-card-grid">
+                {data.tools.map(skill => {
+                    const displayName = skillDisplayName(skill.name);
+                    return (
+                        <NavLink
+                            key={skill.name}
+                            href={`/skills/${collection}/${displayName}`}
+                            className="vta-card-link"
+                        >
+                            <div className="vta-card vta-card--link">
+                                <span className="vta-card-type vta-card-type--skill">skill</span>
+                                <div className="vta-card-title">{displayName}</div>
+                                <div className="vta-card-desc">{skill.description || 'No description'}</div>
+                                {skill.related_tools && skill.related_tools.length > 0 && (
+                                    <div className="vta-card-tags">
+                                        {skill.related_tools.map(t => (
+                                            <span key={t} className="vta-tag">{t}</span>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </NavLink>
+                    );
+                })}
+            </div>
+        </DetailPage>
+    );
+}

package/src/pages/SkillDetail.tsx

@@ -0,0 +1,112 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+interface SkillDefinitionResponse {
+    name: string;
+    title?: string;
+    description: string;
+    instructions: string;
+    content_type: 'md' | 'jst';
+    input_schema?: Record<string, unknown>;
+    related_tools?: string[];
+    execution?: {
+        language: string;
+        packages?: string[];
+    };
+    scripts?: string[];
+    widgets?: string[];
+}
+
+export function SkillDetail() {
+    const params = useParams();
+    const collection = params.collection;
+    const name = params.name;
+    const { baseUrl } = useAdminContext();
+
+    const { data: skill, isLoading, error } = useFetch<SkillDefinitionResponse>(
+        () => fetch(`${baseUrl}/skills/${collection}/${name}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load skill: ${r.statusText}`);
+            return r.json();
+        }),
+        [baseUrl, collection, name]
+    );
+
+    if (isLoading) return <div className="vta-loading">Loading skill...</div>;
+    if (error || !skill) return <div className="vta-error">Failed to load skill &ldquo;{name}&rdquo;.</div>;
+
+    return (
+        <DetailPage
+            type="skill"
+            title={skill.title || skill.name}
+            description={skill.description}
+            backHref={`/skills/${collection}`}
+        >
+            {/* Widgets */}
+            {skill.widgets && skill.widgets.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Widgets</h2>
+                    <div className="vta-detail-flags">
+                        {skill.widgets.map(w => (
+                            <span key={w} className="vta-detail-flag">{w}</span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Scripts */}
+            {skill.scripts && skill.scripts.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Scripts</h2>
+                    <div className="vta-detail-flags">
+                        {skill.scripts.map(s => (
+                            <span key={s} className="vta-detail-flag">{s}</span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Related tools */}
+            {skill.related_tools && skill.related_tools.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Related Tools</h2>
+                    <div className="vta-detail-flags">
+                        {skill.related_tools.map(t => (
+                            <span key={t} className="vta-detail-flag">{t}</span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Execution environment */}
+            {skill.execution && (
+                <div className="vta-detail-section">
+                    <h2>Execution</h2>
+                    <div className="vta-detail-flags">
+                        <span className="vta-detail-flag">{skill.execution.language}</span>
+                        {skill.execution.packages?.map(p => (
+                            <span key={p} className="vta-detail-flag">{p}</span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Instructions */}
+            <div className="vta-detail-section">
+                <h2>Instructions {skill.content_type === 'jst' && <span className="vta-tag">JST template</span>}</h2>
+                <pre className="vta-detail-code">{skill.instructions}</pre>
+            </div>
+
+            {/* Input schema */}
+            {skill.input_schema && (
+                <div className="vta-detail-section">
+                    <h2>Input Schema</h2>
+                    <pre className="vta-detail-code">
+                        {JSON.stringify(skill.input_schema, null, 2)}
+                    </pre>
+                </div>
+            )}
+        </DetailPage>
+    );
+}

package/src/pages/TemplateCollection.tsx

@@ -0,0 +1,54 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams, NavLink } from '@vertesia/ui/router';
+import type { RenderingTemplateDefinitionRef } from '@vertesia/common';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+export function TemplateCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data: templates, isLoading, error } = useFetch<RenderingTemplateDefinitionRef[]>(
+        () => fetch(`${baseUrl}/templates/${collection}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+            return r.json();
+        }),
+        [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>;
+
+    return (
+        <DetailPage
+            type="template"
+            title={collection}
+            description={`${templates.length} template${templates.length !== 1 ? 's' : ''} in this collection.`}
+        >
+            <div className="vta-card-grid">
+                {templates.map(tmpl => (
+                    <NavLink
+                        key={tmpl.name}
+                        href={`/templates/${collection}/${tmpl.name}`}
+                        className="vta-card-link"
+                    >
+                        <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>
+                    </NavLink>
+                ))}
+            </div>
+        </DetailPage>
+    );
+}

package/src/pages/TemplateDetail.tsx

@@ -0,0 +1,68 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+interface TemplateDefinitionResponse {
+    name: string;
+    title?: string;
+    description: string;
+    type: 'presentation' | 'document';
+    tags?: string[];
+    assets: string[];
+    instructions: string;
+}
+
+export function TemplateDetail() {
+    const params = useParams();
+    const collection = params.collection;
+    const name = params.name;
+    const { baseUrl } = useAdminContext();
+
+    const { data: template, isLoading, 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();
+        }),
+        [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>;
+
+    return (
+        <DetailPage
+            type="template"
+            title={template.title || template.name}
+            description={template.description}
+            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>
+            </div>
+
+            {template.assets && template.assets.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Assets</h2>
+                    <div className="vta-detail-flags">
+                        {template.assets.map(asset => (
+                            <span key={asset} className="vta-detail-flag">
+                                {asset.split('/').pop()}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Instructions */}
+            <div className="vta-detail-section">
+                <h2>Instructions</h2>
+                <pre className="vta-detail-code">{template.instructions}</pre>
+            </div>
+        </DetailPage>
+    );
+}

package/src/pages/ToolCollection.tsx

@@ -0,0 +1,55 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+interface ToolDef {
+    name: string;
+    description?: string;
+    input_schema?: Record<string, unknown>;
+}
+
+interface ToolCollectionResponse {
+    title: string;
+    description: string;
+    tools: ToolDef[];
+}
+
+export function ToolCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data, isLoading, error } = useFetch<ToolCollectionResponse>(
+        () => fetch(`${baseUrl}/tools/${collection}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+            return r.json();
+        }),
+        [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>;
+
+    return (
+        <DetailPage
+            type="tool"
+            title={data.title || collection}
+            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>
+            ))}
+        </DetailPage>
+    );
+}

package/src/pages/TypeCollection.tsx

@@ -0,0 +1,60 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams, NavLink } from '@vertesia/ui/router';
+import type { InCodeTypeDefinition } from '@vertesia/common';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+export function TypeCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data: types, isLoading, error } = useFetch<InCodeTypeDefinition[]>(
+        () => fetch(`${baseUrl}/types/${collection}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+            return r.json();
+        }),
+        [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>;
+
+    return (
+        <DetailPage
+            type="type"
+            title={collection}
+            description={`${types.length} content type${types.length !== 1 ? 's' : ''} in this collection.`}
+        >
+            <div className="vta-card-grid">
+                {types.map(t => {
+                    const typeName = t.id?.split(':')[1] || t.name;
+                    return (
+                        <NavLink
+                            key={t.name}
+                            href={`/types/${collection}/${typeName}`}
+                            className="vta-card-link"
+                        >
+                            <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>
+                        </NavLink>
+                    );
+                })}
+            </div>
+        </DetailPage>
+    );
+}

package/src/pages/TypeDetail.tsx

@@ -0,0 +1,63 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import type { InCodeTypeDefinition } from '@vertesia/common';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+export function TypeDetail() {
+    const params = useParams();
+    const collection = params.collection;
+    const name = params.name;
+    const { baseUrl } = useAdminContext();
+
+    const { data: typeDef, isLoading, 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();
+        }),
+        [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>;
+
+    return (
+        <DetailPage
+            type="type"
+            title={typeDef.name}
+            description={typeDef.description}
+            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>
+                </div>
+            )}
+
+            {/* Object Schema */}
+            {typeDef.object_schema && (
+                <div className="vta-detail-section">
+                    <h2>Object Schema</h2>
+                    <pre className="vta-detail-code">
+                        {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">
+                        {JSON.stringify(typeDef.table_layout, null, 2)}
+                    </pre>
+                </div>
+            )}
+        </DetailPage>
+    );
+}