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

package/src/components/AdminTopBar.tsx

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

package/src/components/CollectionCard.tsx

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

package/src/components/DetailPage.tsx

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

package/src/components/EndpointPanel.tsx

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

package/src/components/HeroSection.tsx

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

package/src/components/ResourceCard.tsx

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

package/src/components/ResourceSection.tsx

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

package/src/components/SearchBar.tsx

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

package/src/components/SummaryBadge.tsx

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

package/src/components/index.ts

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

package/src/components/typeVariants.ts

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

package/src/dev/index.css

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

package/src/dev/main.tsx

@@ -1,10 +1,13 @@
 /// <reference types="vite/client" />
+import './index.css';
 import "./env.js"
+
+import { VertesiaShell } from '@vertesia/ui/shell';
+import { RouterProvider } from '@vertesia/ui/router';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { RouterProvider } from '@vertesia/ui/router';
+
 import { AdminApp } from '../AdminApp.js';
-import { VertesiaShell } from '@vertesia/ui/shell';
 
 const baseUrl = import.meta.env.VITE_API_BASE_URL;
 

package/src/hooks.ts

@@ -3,7 +3,8 @@
  */
 
 import { useFetch } from '@vertesia/ui/core';
-import type { ServerInfo, ResourceData } from './types.js';
+
+import type { ResourceData, ServerInfo } from './types.js';
 import { buildResourceData } from './types.js';
 
 /**

package/src/pages/HomePage.tsx

@@ -1,8 +1,11 @@
+import { Separator } from '@vertesia/ui/core';
 import { useMemo, useState } from 'react';
+
+import { useAdminContext } from '../AdminContext.js';
+import { CollectionCard, HeroSection, ResourceSection, SearchBar } from '../components/index.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 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.' },
@@ -25,7 +28,7 @@ export function HomePage() {
     const isSearching = search.trim().length > 0;
 
     return (
-        <div className="vta-root">
+        <div className="mx-auto max-w-5xl px-7 py-10">
             <HeroSection
                 title={serverInfo.message.replace('Vertesia Tools API', 'Tools Server')}
                 version={serverInfo.version}
@@ -41,7 +44,6 @@ export function HomePage() {
             />
 
             {isSearching ? (
-                /* Search mode: show individual resource cards */
                 sections.map((section, i) => {
                     const sectionItems = filtered.filter(r => r.type === section.type);
                     return (
@@ -55,7 +57,6 @@ export function HomePage() {
                     );
                 })
             ) : (
-                /* 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'
@@ -66,27 +67,29 @@ export function HomePage() {
 
                     return (
                         <section key={section.type}>
-                            {i > 0 && <hr className="vta-divider" />}
+                            {i > 0 && <Separator className="my-8" />}
                             <div>
-                                <h2 className="vta-section-title">
+                                <h2 className="text-xl font-semibold text-foreground">
                                     {section.title}
-                                    <span className="vta-section-count">
+                                    <span className="ml-2 text-sm font-normal text-muted-foreground">
                                         ({sectionCollections.length}{sectionCollections.length === 1
                                             ? ' collection' : ' collections'})
                                     </span>
                                 </h2>
-                                <p className="vta-section-subtitle">{section.subtitle}</p>
+                                <p className="mb-4 text-sm text-muted-foreground">{section.subtitle}</p>
                             </div>
-                            <div className="vta-card-grid">
+                            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                                 {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 key={r.name} className="rounded-xl border border-border bg-card p-5 shadow-sm">
+                                        <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.mcp}`}>
+                                            mcp
+                                        </span>
+                                        <div className="font-semibold text-card-foreground">{r.title}</div>
+                                        <div className="mt-1 text-sm text-muted-foreground">{r.description || 'No description'}</div>
+                                        {r.url && <div className="mt-2 truncate font-mono text-xs text-muted-foreground">{r.url}</div>}
                                     </div>
                                 ))}
                             </div>