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

package/src/pages/InteractionCollection.tsx

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

package/src/pages/InteractionDetail.tsx

@@ -1,9 +1,11 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams } from '@vertesia/ui/router';
 import type { InteractionSpec } from '@vertesia/common';
+import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+import { useUserSession } from '@vertesia/ui/session';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
-import { useUserSession } from '@vertesia/ui/session';
+import { ROLE_VARIANTS } from '../components/typeVariants.js';
 
 type InteractionResponse = InteractionSpec & { id: string };
 
@@ -14,7 +16,7 @@ export function InteractionDetail() {
     const name = params.name;
     const { baseUrl } = useAdminContext();
 
-    const { data: interaction, isLoading, error } = useFetch<InteractionResponse>(
+    const { data: interaction, error } = useFetch<InteractionResponse>(
         () => client.getRawJWT().then(token => fetch(`${baseUrl}/interactions/${collection}/${name}`, {
             headers: {
                 Authorization: `Bearer ${token}`,
@@ -26,12 +28,12 @@ export function InteractionDetail() {
         [baseUrl, collection, name]
     );
 
-    if (isLoading) {
-        return <div className="vta-loading">Loading interaction...</div>;
+    if (error) {
+        return <div className="p-6 text-destructive">Failed to load interaction &ldquo;{name}&rdquo;.</div>;
     }
 
-    if (error || !interaction) {
-        return <div className="vta-error">Failed to load interaction &ldquo;{name}&rdquo;.</div>;
+    if (!interaction) {
+        return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
     }
 
     const { agent_runner_options } = interaction;
@@ -46,44 +48,43 @@ export function InteractionDetail() {
             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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Prompts</h2>
+                    {interaction.prompts.map((prompt) => (
+                        <Card key={`${prompt.role}-${prompt.name ?? ''}`} className="mb-3">
+                            <CardContent className="p-4">
+                                <div className="mb-2 flex items-center gap-2">
+                                    <span className={`rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${ROLE_VARIANTS[prompt.role] ?? ''}`}>
+                                        {prompt.role}
+                                    </span>
+                                    {prompt.name && (
+                                        <span className="text-sm italic text-muted-foreground">{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">{prompt.content}</pre>
+                            </CardContent>
+                        </Card>
                     ))}
                 </div>
             )}
 
-            {/* Result schema */}
             {interaction.result_schema && (
-                <div className="vta-detail-section">
-                    <h2>Result Schema</h2>
-                    <pre className="vta-detail-code">
+                <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">
                         {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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Agent Runner</h2>
+                    <div className="flex flex-wrap gap-2">
+                        {agent_runner_options.is_agent && <Badge variant="success">Agent</Badge>}
+                        {agent_runner_options.is_tool && <Badge variant="success">Tool</Badge>}
+                        {agent_runner_options.is_skill && <Badge variant="success">Skill</Badge>}
                     </div>
                 </div>
             )}

package/src/pages/SkillCollection.tsx

@@ -1,8 +1,10 @@
+import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { NavLink, useParams } from '@vertesia/ui/router';
 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';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 interface SkillToolDef {
     name: string;
@@ -35,7 +37,7 @@ export function SkillCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data, isLoading, error } = useFetch<SkillCollectionResponse>(
+    const { data, error } = useFetch<SkillCollectionResponse>(
         () => fetch(`${baseUrl}/skills/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -55,8 +57,8 @@ export function SkillCollection() {
             .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>;
+    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-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -64,44 +66,39 @@ export function SkillCollection() {
             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">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Widgets</h2>
+                    <div className="flex flex-wrap gap-2">
                         {collectionWidgets.map(w => (
-                            <span key={w.name} className="vta-detail-flag">
+                            <Badge key={w.name} variant="success">
                                 {w.name}
-                                <span className="vta-card-url" style={{ marginLeft: '0.5rem' }}>
-                                    (skill: {w.skill})
-                                </span>
-                            </span>
+                                <span className="ml-2 font-mono text-xs opacity-70">(skill: {w.skill})</span>
+                            </Badge>
                         ))}
                     </div>
                 </div>
             )}
 
-            <div className="vta-card-grid">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {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 key={skill.name} href={`/skills/${collection}/${displayName}`} 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.skill}`}>
+                                        skill
+                                    </span>
+                                    <div className="font-semibold text-card-foreground">{displayName}</div>
+                                    <div className="mt-1 text-sm text-muted-foreground">{skill.description || 'No description'}</div>
+                                    {skill.related_tools && skill.related_tools.length > 0 && (
+                                        <div className="mt-2 flex flex-wrap gap-1">
+                                            {skill.related_tools.map(t => <Badge key={t}>{t}</Badge>)}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
                         </NavLink>
                     );
                 })}

package/src/pages/SkillDetail.tsx

@@ -1,5 +1,6 @@
-import { useFetch } from '@vertesia/ui/core';
+import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
 
@@ -25,7 +26,7 @@ export function SkillDetail() {
     const name = params.name;
     const { baseUrl } = useAdminContext();
 
-    const { data: skill, isLoading, error } = useFetch<SkillDefinitionResponse>(
+    const { data: skill, 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();
@@ -33,8 +34,8 @@ export function SkillDetail() {
         [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>;
+    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-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -43,66 +44,55 @@ export function SkillDetail() {
             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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Widgets</h2>
+                    <div className="flex flex-wrap gap-2">
+                        {skill.widgets.map(w => <Badge key={w} variant="success">{w}</Badge>)}
                     </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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Scripts</h2>
+                    <div className="flex flex-wrap gap-2">
+                        {skill.scripts.map(s => <Badge key={s} variant="success">{s}</Badge>)}
                     </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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Related Tools</h2>
+                    <div className="flex flex-wrap gap-2">
+                        {skill.related_tools.map(t => <Badge key={t} variant="success">{t}</Badge>)}
                     </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 className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Execution</h2>
+                    <div className="flex flex-wrap gap-2">
+                        <Badge variant="success">{skill.execution.language}</Badge>
+                        {skill.execution.packages?.map(p => <Badge key={p} variant="success">{p}</Badge>)}
                     </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 className="mb-8">
+                <h2 className="mb-3 text-lg font-semibold text-foreground">
+                    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">{skill.instructions}</pre>
             </div>
 
-            {/* Input schema */}
             {skill.input_schema && (
-                <div className="vta-detail-section">
-                    <h2>Input Schema</h2>
-                    <pre className="vta-detail-code">
+                <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">
                         {JSON.stringify(skill.input_schema, null, 2)}
                     </pre>
                 </div>

package/src/pages/TemplateCollection.tsx

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

package/src/pages/TemplateDetail.tsx

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