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

package/src/pages/ActivityCollection.tsx

@@ -0,0 +1,67 @@
+import type { RemoteActivityDefinition } from '@vertesia/common';
+import { Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+
+import { useAdminContext } from '../AdminContext.js';
+import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
+
+interface ActivityCollectionResponse {
+    title: string;
+    description: string;
+    activities: RemoteActivityDefinition[];
+}
+
+export function ActivityCollection() {
+    const collection = useParams('collection');
+    const { baseUrl } = useAdminContext();
+
+    const { data, error } = useFetch<ActivityCollectionResponse>(
+        () => fetch(`${baseUrl}/activities/${collection}`).then(r => {
+            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+            return r.json();
+        }),
+        [baseUrl, collection]
+    );
+
+    if (error) 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-foreground"><Spinner /></div>;
+
+    return (
+        <DetailPage
+            type="activity"
+            title={data.title || collection}
+            description={data.description || `${data.activities.length} activit${data.activities.length !== 1 ? 'ies' : 'y'} in this collection.`}
+        >
+            {data.activities.map(activity => (
+                <Card key={activity.name} className="mb-4">
+                    <CardContent className="p-5">
+                        <div className="mb-2 flex items-center gap-2">
+                            <span className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.activity}`}>
+                                activity
+                            </span>
+                            <span className="font-semibold text-card-foreground">{activity.name}</span>
+                        </div>
+                        <div className="text-sm text-muted-foreground">{activity.description || 'No description'}</div>
+                        {activity.input_schema && (
+                            <div className="mt-3">
+                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">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">
+                                    {JSON.stringify(activity.input_schema, null, 2)}
+                                </pre>
+                            </div>
+                        )}
+                        {activity.output_schema && (
+                            <div className="mt-3">
+                                <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">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">
+                                    {JSON.stringify(activity.output_schema, null, 2)}
+                                </pre>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            ))}
+        </DetailPage>
+    );
+}

package/src/pages/HomePage.tsx

@@ -1,11 +1,15 @@
+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.' },
+    { type: 'activity', title: 'Activities', subtitle: 'Remote activities for DSL workflows, invoked via HTTP.' },
     { 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.' },
@@ -25,7 +29,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 +45,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 +58,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 +68,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>

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>