@vertesia/tools-admin-ui 0.9.0

package/src/components/EndpointPanel.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+export function EndpointPanel({ label, path }: { label: string; path: string }) {
+    const [copied, setCopied] = useState(false);
+
+    function handleCopy() {
+        const url = window.location.origin + path;
+        navigator.clipboard.writeText(url);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    }
+
+    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>
+        </div>
+    );
+}

package/src/components/HeroSection.tsx

@@ -0,0 +1,88 @@
+import type { ResourceItem, ResourceType } from '../types.js';
+import { EndpointPanel } from './EndpointPanel.js';
+import { SummaryBadge } from './SummaryBadge.js';
+
+interface HeroSectionProps {
+    title: string;
+    version: string;
+    resources: ResourceItem[];
+}
+
+function getInitials(title: string): string {
+    return title.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
+}
+
+function countByType(resources: ResourceItem[]): Record<string, number> {
+    const counts: Record<string, number> = {};
+    for (const r of resources) {
+        counts[r.type] = (counts[r.type] || 0) + 1;
+    }
+    return counts;
+}
+
+const badgeLabels: { type: ResourceType; label: string }[] = [
+    { type: 'tool', label: 'tool' },
+    { type: 'skill', label: 'skill' },
+    { type: 'interaction', label: 'interaction' },
+    { type: 'type', label: 'content type' },
+    { type: 'template', label: 'template' },
+    { type: 'mcp', label: 'MCP provider' },
+];
+
+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>
+                    </div>
+                </div>
+
+                <p className="vta-hero-tagline">
+                    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="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>
+            </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>
+    );
+}

package/src/components/ResourceCard.tsx

@@ -0,0 +1,25 @@
+import type { ResourceItem } from '../types.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>
+                    ))}
+                </div>
+            )}
+            {resource.url && (
+                <div className="vta-card-url">{resource.url}</div>
+            )}
+        </div>
+    );
+}

package/src/components/ResourceSection.tsx

@@ -0,0 +1,31 @@
+import type { ResourceItem } from '../types.js';
+import { ResourceCard } from './ResourceCard.js';
+
+interface ResourceSectionProps {
+    title: string;
+    subtitle: string;
+    resources: ResourceItem[];
+    showDivider?: boolean;
+}
+
+export function ResourceSection({ title, subtitle, resources, showDivider }: ResourceSectionProps) {
+    if (resources.length === 0) return null;
+
+    return (
+        <section>
+            {showDivider && <hr className="vta-divider" />}
+            <div>
+                <h2 className="vta-section-title">
+                    {title}
+                    <span className="vta-section-count">({resources.length})</span>
+                </h2>
+                <p className="vta-section-subtitle">{subtitle}</p>
+            </div>
+            <div className="vta-card-grid">
+                {resources.map(r => (
+                    <ResourceCard key={`${r.type}:${r.name}`} resource={r} />
+                ))}
+            </div>
+        </section>
+    );
+}

package/src/components/SearchBar.tsx

@@ -0,0 +1,35 @@
+interface SearchBarProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    resultCount?: number;
+    totalCount?: number;
+}
+
+export function SearchBar({ value, onChange, placeholder, resultCount, totalCount }: SearchBarProps) {
+    const hasQuery = value.trim().length > 0;
+    const noResults = hasQuery && resultCount === 0;
+
+    return (
+        <div className="vta-search">
+            <input
+                type="search"
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                placeholder={placeholder || 'Search collections...'}
+                className="vta-search-input"
+                autoComplete="off"
+            />
+            {hasQuery && !noResults && (
+                <p className="vta-search-hint">
+                    Showing {resultCount} of {totalCount} resources
+                </p>
+            )}
+            {noResults && (
+                <p className="vta-search-empty">
+                    No resources match this search.
+                </p>
+            )}
+        </div>
+    );
+}

package/src/components/SummaryBadge.tsx

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

package/src/components/index.ts

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

package/src/dev/env.ts

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

package/src/dev/main.tsx

@@ -0,0 +1,37 @@
+/// <reference types="vite/client" />
+import "./env.js"
+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;
+
+const root = createRoot(document.getElementById('root')!);
+
+/**
+ * In dev mode we wrap with RouterProvider since there's no parent router.
+ * In production the plugin host (Studio) provides the router context.
+ */
+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>,
+    );
+} else {
+    root.render(
+        <StrictMode>
+            <VertesiaShell>
+                <RouterProvider routes={devRoutes} />
+            </VertesiaShell>
+        </StrictMode>,
+    );
+}

package/src/hooks.ts

@@ -0,0 +1,36 @@
+/**
+ * Data fetching hooks for the admin panel.
+ */
+
+import { useFetch } from '@vertesia/ui/core';
+import type { ServerInfo, ResourceData } from './types.js';
+import { buildResourceData } from './types.js';
+
+/**
+ * Fetches the tool server info (message, version, endpoints).
+ */
+export function useServerInfo(baseUrl: string) {
+    return useFetch<ServerInfo>(() =>
+        fetch(baseUrl).then(r => r.json()),
+        [baseUrl]
+    );
+}
+
+/**
+ * Fetches all 5 resource endpoints in parallel and builds collections + flat resource list.
+ * MCP endpoints are passed separately since they come from serverInfo.
+ */
+export function useResourceData(baseUrl: string, mcpEndpoints?: string[]) {
+    return useFetch<ResourceData>(() => {
+        const fetchJson = (path: string) => fetch(`${baseUrl}/${path}`).then(r => r.json());
+        return Promise.all([
+            fetchJson('interactions'),
+            fetchJson('tools'),
+            fetchJson('skills'),
+            fetchJson('types'),
+            fetchJson('templates'),
+        ]).then(([interactions, tools, skills, types, templates]) =>
+            buildResourceData(interactions, tools, skills, types, templates, mcpEndpoints)
+        );
+    }, [baseUrl, mcpEndpoints]);
+}

package/src/index.ts

@@ -0,0 +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 type { AdminContextValue } from './AdminContext.js';

package/src/pages/HomePage.tsx

@@ -0,0 +1,99 @@
+import { useMemo, useState } from 'react';
+import type { ResourceType } from '../types.js';
+import { filterResources } from '../types.js';
+import { HeroSection, SearchBar, ResourceSection, CollectionCard } from '../components/index.js';
+import { useAdminContext } from '../AdminContext.js';
+
+const sections: { type: ResourceType; title: string; subtitle: string }[] = [
+    { type: 'tool', title: 'Tools', subtitle: 'Remote tools available to agents via Vertesia.' },
+    { type: 'skill', title: 'Skills', subtitle: 'Reusable instructions and scripts packaged as tools.' },
+    { type: 'interaction', title: 'Interactions', subtitle: 'Conversation blueprints surfaced in the Vertesia UI.' },
+    { type: 'type', title: 'Content Types', subtitle: 'Schema definitions for structured content in the data store.' },
+    { type: 'template', title: 'Rendering Templates', subtitle: 'Document and presentation templates for content generation.' },
+    { type: 'mcp', title: 'MCP Providers', subtitle: 'Remote MCP servers available through this tools server.' },
+];
+
+export function HomePage() {
+    const { serverInfo, collections, resources } = useAdminContext();
+    const [search, setSearch] = useState('');
+
+    const filtered = useMemo(() =>
+        filterResources(resources, search),
+        [resources, search]
+    );
+
+    const isSearching = search.trim().length > 0;
+
+    return (
+        <div className="vta-root">
+            <HeroSection
+                title={serverInfo.message.replace('Vertesia Tools API', 'Tools Server')}
+                version={serverInfo.version}
+                resources={resources}
+            />
+
+            <SearchBar
+                value={search}
+                onChange={setSearch}
+                placeholder="Search tools, skills, interactions, types, templates..."
+                resultCount={filtered.length}
+                totalCount={resources.length}
+            />
+
+            {isSearching ? (
+                /* Search mode: show individual resource cards */
+                sections.map((section, i) => {
+                    const sectionItems = filtered.filter(r => r.type === section.type);
+                    return (
+                        <ResourceSection
+                            key={section.type}
+                            title={section.title}
+                            subtitle={section.subtitle}
+                            resources={sectionItems}
+                            showDivider={i > 0}
+                        />
+                    );
+                })
+            ) : (
+                /* Browse mode: show collection cards grouped by type */
+                sections.map((section, i) => {
+                    const sectionCollections = collections.filter(c => c.type === section.type);
+                    const mcpResources = section.type === 'mcp'
+                        ? resources.filter(r => r.type === 'mcp')
+                        : [];
+
+                    if (sectionCollections.length === 0 && mcpResources.length === 0) return null;
+
+                    return (
+                        <section key={section.type}>
+                            {i > 0 && <hr className="vta-divider" />}
+                            <div>
+                                <h2 className="vta-section-title">
+                                    {section.title}
+                                    <span className="vta-section-count">
+                                        ({sectionCollections.length}{sectionCollections.length === 1
+                                            ? ' collection' : ' collections'})
+                                    </span>
+                                </h2>
+                                <p className="vta-section-subtitle">{section.subtitle}</p>
+                            </div>
+                            <div className="vta-card-grid">
+                                {sectionCollections.map(col => (
+                                    <CollectionCard key={`${col.type}:${col.name}`} collection={col} />
+                                ))}
+                                {mcpResources.map(r => (
+                                    <div key={r.name} className="vta-card">
+                                        <span className="vta-card-type vta-card-type--mcp">mcp</span>
+                                        <div className="vta-card-title">{r.title}</div>
+                                        <div className="vta-card-desc">{r.description || 'No description'}</div>
+                                        {r.url && <div className="vta-card-url">{r.url}</div>}
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
+                    );
+                })
+            )}
+        </div>
+    );
+}

package/src/pages/InteractionCollection.tsx

@@ -0,0 +1,59 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams, NavLink } from '@vertesia/ui/router';
+import type { CatalogInteractionRef } from '@vertesia/common';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+
+export function InteractionCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data: interactions, isLoading, error } = useFetch<CatalogInteractionRef[]>(
+        () => fetch(`${baseUrl}/interactions/${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 || !interactions) {
+        return <div className="vta-error">Failed to load collection &ldquo;{collection}&rdquo;.</div>;
+    }
+
+    return (
+        <DetailPage
+            type="interaction"
+            title={collection}
+            description={`${interactions.length} interaction${interactions.length !== 1 ? 's' : ''} in this collection.`}
+        >
+            <div className="vta-card-grid">
+                {interactions.map(inter => (
+                    <NavLink
+                        key={inter.id}
+                        href={`/interactions/${collection}/${inter.name}`}
+                        className="vta-card-link"
+                    >
+                        <div className="vta-card vta-card--link">
+                            <span className="vta-card-type vta-card-type--interaction">interaction</span>
+                            <div className="vta-card-title">{inter.title || inter.name}</div>
+                            <div className="vta-card-desc">
+                                {inter.description || 'No description'}
+                            </div>
+                            {inter.tags && inter.tags.length > 0 && (
+                                <div className="vta-card-tags">
+                                    {inter.tags.map(tag => (
+                                        <span key={tag} className="vta-tag">{tag}</span>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </NavLink>
+                ))}
+            </div>
+        </DetailPage>
+    );
+}

package/src/pages/InteractionDetail.tsx

@@ -0,0 +1,92 @@
+import { useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import type { InteractionSpec } from '@vertesia/common';
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+import { useUserSession } from '@vertesia/ui/session';
+
+type InteractionResponse = InteractionSpec & { id: string };
+
+export function InteractionDetail() {
+    const { client } = useUserSession();
+    const params = useParams();
+    const collection = params.collection;
+    const name = params.name;
+    const { baseUrl } = useAdminContext();
+
+    const { data: interaction, isLoading, error } = useFetch<InteractionResponse>(
+        () => client.getRawJWT().then(token => fetch(`${baseUrl}/interactions/${collection}/${name}`, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        })).then(r => {
+            if (!r.ok) throw new Error(`Failed to load interaction: ${r.statusText}`);
+            return r.json();
+        }),
+        [baseUrl, collection, name]
+    );
+
+    if (isLoading) {
+        return <div className="vta-loading">Loading interaction...</div>;
+    }
+
+    if (error || !interaction) {
+        return <div className="vta-error">Failed to load interaction &ldquo;{name}&rdquo;.</div>;
+    }
+
+    const { agent_runner_options } = interaction;
+    const hasAgentFlags = agent_runner_options &&
+        (agent_runner_options.is_agent || agent_runner_options.is_tool || agent_runner_options.is_skill);
+
+    return (
+        <DetailPage
+            type="interaction"
+            title={interaction.title || interaction.name}
+            description={interaction.description}
+            tags={interaction.tags}
+            backHref={`/interactions/${collection}`}
+        >
+            {/* Prompts */}
+            {interaction.prompts && interaction.prompts.length > 0 && (
+                <div className="vta-detail-section">
+                    <h2>Prompts</h2>
+                    {interaction.prompts.map((prompt, i) => (
+                        <div key={i} className="vta-detail-card">
+                            <div className="vta-detail-card-header">
+                                <span className={`vta-detail-role vta-detail-role--${prompt.role}`}>
+                                    {prompt.role}
+                                </span>
+                                {prompt.name && (
+                                    <span className="vta-detail-prompt-name">{prompt.name}</span>
+                                )}
+                            </div>
+                            <pre className="vta-detail-code">{prompt.content}</pre>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {/* Result schema */}
+            {interaction.result_schema && (
+                <div className="vta-detail-section">
+                    <h2>Result Schema</h2>
+                    <pre className="vta-detail-code">
+                        {JSON.stringify(interaction.result_schema, null, 2)}
+                    </pre>
+                </div>
+            )}
+
+            {/* Agent runner options */}
+            {hasAgentFlags && (
+                <div className="vta-detail-section">
+                    <h2>Agent Runner</h2>
+                    <div className="vta-detail-flags">
+                        {agent_runner_options.is_agent && <span className="vta-detail-flag">Agent</span>}
+                        {agent_runner_options.is_tool && <span className="vta-detail-flag">Tool</span>}
+                        {agent_runner_options.is_skill && <span className="vta-detail-flag">Skill</span>}
+                    </div>
+                </div>
+            )}
+        </DetailPage>
+    );
+}