@vertesia/tools-admin-ui 1.5.0-dev.20260910.052912Z → 1.6.0-dev.20260912.110338Z

package/src/AdminApp.tsx

@@ -1,8 +1,7 @@
-import { Spinner } from '@vertesia/ui/core';
 import type { Route } from '@vertesia/ui/router';
 import { NestedRouterProvider, RouteComponent } from '@vertesia/ui/router';
-
 import { AdminContext } from './AdminContext.js';
+import { AdminLoadingPage } from './components/AdminLoadingPage.js';
 import { AdminTopBar } from './components/AdminTopBar.js';
 import { useResourceData, useServerInfo } from './hooks.js';
 import { ActivityCollection } from './pages/ActivityCollection.js';
@@ -57,11 +56,7 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     const error = infoError || dataError;
 
     if (isLoading) {
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+        return <AdminLoadingPage fullPage />;
     }
 
     if (error) {
@@ -73,7 +68,7 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
     const title = serverInfo.message.replace('Vertesia Tools API', 'Tools Server');
 
     return (
-        <div className="min-h-screen bg-background text-foreground">
+        <div className="flex min-h-dvh flex-col bg-background text-foreground">
             <AdminTopBar title={title} />
             <AdminContext.Provider
                 value={{
@@ -84,7 +79,9 @@ export function AdminApp({ baseUrl = '/api' }: AdminAppProps) {
                 }}
             >
                 <NestedRouterProvider routes={routes}>
-                    <RouteComponent />
+                    <div className="flex flex-1 flex-col">
+                        <RouteComponent />
+                    </div>
                 </NestedRouterProvider>
             </AdminContext.Provider>
         </div>

package/src/components/AdminLoadingPage.tsx

@@ -0,0 +1,12 @@
+import { BrandedLoadingIndicator } from '@vertesia/ui/shell';
+
+/** Shared placeholder for startup and resource-page loads; inherits the host shell's branding. */
+export function AdminLoadingPage({ fullPage = false }: { fullPage?: boolean }) {
+    return (
+        <div
+            className={`flex flex-1 items-center justify-center bg-background text-foreground ${fullPage ? 'min-h-dvh' : 'min-h-64'}`}
+        >
+            <BrandedLoadingIndicator delayMs={200} />
+        </div>
+    );
+}

package/src/components/DetailPage.tsx

@@ -20,11 +20,11 @@ export function DetailPage({ type, title, description, tags, backHref = '/', chi
         <div className="mx-auto max-w-5xl px-7 py-10">
             <nav className="mb-5 flex items-center gap-4">
                 {backHref !== '/' && (
-                    <NavLink href="/" className="text-sm text-primary hover:opacity-75">
+                    <NavLink href="/" className="text-sm text-info hover:opacity-75">
                         Home
                     </NavLink>
                 )}
-                <NavLink href={backHref} className="flex items-center gap-1 text-sm text-primary hover:opacity-75">
+                <NavLink href={backHref} className="flex items-center gap-1 text-sm text-info hover:opacity-75">
                     <ArrowLeft className="size-3.5" />
                     Back
                 </NavLink>

package/src/components/EndpointPanel.tsx

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

package/src/components/HeroSection.tsx

@@ -43,7 +43,7 @@ export function HeroSection({ title, version, resources }: HeroSectionProps) {
     const counts = countByType(resources);
 
     return (
-        <Card className="mb-10 overflow-hidden border bg-linear-to-br from-card to-muted-background">
+        <Card className="mb-10 overflow-hidden border bg-linear-to-br from-card to-muted">
             <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">
@@ -78,7 +78,7 @@ export function HeroSection({ title, version, resources }: HeroSectionProps) {
                         </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"
+                            className="inline-flex h-8 items-center gap-2 rounded bg-info px-3 text-xs font-medium text-info shadow-xs hover:bg-info dark:bg-info dark:hover:bg-info"
                         >
                             <Download className="size-4" />
                             Plugin Bundle

package/src/pages/ActivityCollection.tsx

@@ -1,8 +1,8 @@
 import type { RemoteActivityDefinition } from '@vertesia/common';
-import { Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -29,12 +29,7 @@ export function ActivityCollection() {
         return (
             <div className="p-6 text-destructive">Failed to load activity collection &ldquo;{collection}&rdquo;.</div>
         );
-    if (!data)
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+    if (!data) return <AdminLoadingPage />;
 
     return (
         <DetailPage
@@ -62,7 +57,7 @@ export function ActivityCollection() {
                                 <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted">
                                     Input Schema
                                 </p>
-                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                                     {JSON.stringify(activity.input_schema, null, 2)}
                                 </pre>
                             </div>
@@ -72,7 +67,7 @@ export function ActivityCollection() {
                                 <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted">
                                     Output Schema
                                 </p>
-                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                                     {JSON.stringify(activity.output_schema, null, 2)}
                                 </pre>
                             </div>

package/src/pages/InteractionCollection.tsx

@@ -1,8 +1,8 @@
 import type { CatalogInteractionRef } from '@vertesia/common';
-import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { NavLink, useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -24,11 +24,7 @@ export function InteractionCollection() {
     }
 
     if (!interactions) {
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+        return <AdminLoadingPage />;
     }
 
     return (

package/src/pages/InteractionDetail.tsx

@@ -1,9 +1,9 @@
 import type { InteractionSpec } from '@vertesia/common';
-import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { ROLE_VARIANTS } from '../components/typeVariants.js';
 
@@ -39,11 +39,7 @@ export function InteractionDetail() {
     }
 
     if (!interaction) {
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+        return <AdminLoadingPage />;
     }
 
     const { agent_runner_options } = interaction;
@@ -73,7 +69,7 @@ export function InteractionDetail() {
                                     </span>
                                     {prompt.name && <span className="text-sm italic text-muted">{prompt.name}</span>}
                                 </div>
-                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                                     {prompt.content}
                                 </pre>
                             </CardContent>
@@ -85,7 +81,7 @@ export function InteractionDetail() {
             {interaction.result_schema && (
                 <div className="mb-8">
                     <h2 className="mb-3 text-lg font-semibold text-foreground">Result 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">
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(interaction.result_schema, null, 2)}
                     </pre>
                 </div>

package/src/pages/SkillCollection.tsx

@@ -1,8 +1,8 @@
-import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { NavLink, useParams } from '@vertesia/ui/router';
 import { useMemo } from 'react';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -60,12 +60,7 @@ export function SkillCollection() {
 
     if (error)
         return <div className="p-6 text-destructive">Failed to load skill collection &ldquo;{collection}&rdquo;.</div>;
-    if (!data)
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+    if (!data) return <AdminLoadingPage />;
 
     return (
         <DetailPage

package/src/pages/SkillDetail.tsx

@@ -1,7 +1,7 @@
-import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 
 interface SkillDefinitionResponse {
@@ -36,12 +36,7 @@ export function SkillDetail() {
     );
 
     if (error) return <div className="p-6 text-destructive">Failed to load skill &ldquo;{name}&rdquo;.</div>;
-    if (!skill)
-        return (
-            <div className="flex h-64 items-center justify-center text-muted">
-                <Spinner />
-            </div>
-        );
+    if (!skill) return <AdminLoadingPage />;
 
     return (
         <DetailPage
@@ -108,7 +103,7 @@ export function SkillDetail() {
                     Instructions
                     {skill.content_type === 'jst' && <Badge className="ml-2">JST template</Badge>}
                 </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">
+                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                     {skill.instructions}
                 </pre>
             </div>
@@ -116,7 +111,7 @@ export function SkillDetail() {
             {skill.input_schema && (
                 <div className="mb-8">
                     <h2 className="mb-3 text-lg font-semibold text-foreground">Input 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">
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(skill.input_schema, null, 2)}
                     </pre>
                 </div>

package/src/pages/TemplateCollection.tsx

@@ -1,8 +1,8 @@
 import type { RenderingTemplateDefinitionRef } from '@vertesia/common';
-import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { NavLink, useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -23,12 +23,7 @@ export function TemplateCollection() {
         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">
-                <Spinner />
-            </div>
-        );
+    if (!templates) return <AdminLoadingPage />;
 
     return (
         <DetailPage

package/src/pages/TemplateDetail.tsx

@@ -1,7 +1,7 @@
-import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 
 interface TemplateDefinitionResponse {
@@ -30,12 +30,7 @@ export function TemplateDetail() {
     );
 
     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">
-                <Spinner />
-            </div>
-        );
+    if (!template) return <AdminLoadingPage />;
 
     return (
         <DetailPage
@@ -66,7 +61,7 @@ export function TemplateDetail() {
 
             <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">
+                <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                     {template.instructions}
                 </pre>
             </div>

package/src/pages/ToolCollection.tsx

@@ -1,7 +1,7 @@
-import { Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -32,12 +32,7 @@ export function ToolCollection() {
 
     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">
-                <Spinner />
-            </div>
-        );
+    if (!data) return <AdminLoadingPage />;
 
     return (
         <DetailPage
@@ -60,7 +55,7 @@ export function ToolCollection() {
                         </div>
                         <div className="text-sm text-muted">{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">
+                            <pre className="mt-3 whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                                 {JSON.stringify(tool.input_schema, null, 2)}
                             </pre>
                         )}

package/src/pages/TypeCollection.tsx

@@ -1,8 +1,8 @@
 import type { InCodeTypeDefinition } from '@vertesia/common';
-import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, Card, CardContent, useFetch } from '@vertesia/ui/core';
 import { NavLink, useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
@@ -21,12 +21,7 @@ export function TypeCollection() {
 
     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">
-                <Spinner />
-            </div>
-        );
+    if (!types) return <AdminLoadingPage />;
 
     return (
         <DetailPage

package/src/pages/TypeDetail.tsx

@@ -1,8 +1,8 @@
 import type { InCodeTypeDefinition } from '@vertesia/common';
-import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
+import { Badge, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
-
 import { useAdminContext } from '../AdminContext.js';
+import { AdminLoadingPage } from '../components/AdminLoadingPage.js';
 import { DetailPage } from '../components/DetailPage.js';
 
 export function TypeDetail() {
@@ -21,12 +21,7 @@ export function TypeDetail() {
     );
 
     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">
-                <Spinner />
-            </div>
-        );
+    if (!typeDef) return <AdminLoadingPage />;
 
     return (
         <DetailPage
@@ -48,7 +43,7 @@ export function TypeDetail() {
             {typeDef.object_schema && (
                 <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">
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(typeDef.object_schema, null, 2)}
                     </pre>
                 </div>
@@ -57,7 +52,7 @@ export function TypeDetail() {
             {typeDef.table_layout && typeDef.table_layout.length > 0 && (
                 <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">
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(typeDef.table_layout, null, 2)}
                     </pre>
                 </div>