@vertesia/tools-admin-ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/pages/HomePage.tsx

@@ -13,7 +13,11 @@ const sections: { type: ResourceType; title: string; subtitle: string }[] = [
     { type: 'skill', title: 'Skills', subtitle: 'Reusable instructions and scripts packaged as tools.' },
     { type: 'interaction', title: 'Interactions', subtitle: 'Conversation blueprints surfaced in the Vertesia UI.' },
     { type: 'type', title: 'Content Types', subtitle: 'Schema definitions for structured content in the data store.' },
-    { type: 'template', title: 'Rendering Templates', subtitle: 'Document and presentation templates for content generation.' },
+    {
+        type: 'template',
+        title: 'Rendering Templates',
+        subtitle: 'Document and presentation templates for content generation.',
+    },
     { type: 'mcp', title: 'MCP Providers', subtitle: 'Remote MCP servers available through this tools server.' },
 ];
 
@@ -21,10 +25,7 @@ export function HomePage() {
     const { serverInfo, collections, resources } = useAdminContext();
     const [search, setSearch] = useState('');
 
-    const filtered = useMemo(() =>
-        filterResources(resources, search),
-        [resources, search]
-    );
+    const filtered = useMemo(() => filterResources(resources, search), [resources, search]);
 
     const isSearching = search.trim().length > 0;
 
@@ -44,60 +45,67 @@ export function HomePage() {
                 totalCount={resources.length}
             />
 
-            {isSearching ? (
-                sections.map((section, i) => {
-                    const sectionItems = filtered.filter(r => r.type === section.type);
-                    return (
-                        <ResourceSection
-                            key={section.type}
-                            title={section.title}
-                            subtitle={section.subtitle}
-                            resources={sectionItems}
-                            showDivider={i > 0}
-                        />
-                    );
-                })
-            ) : (
-                sections.map((section, i) => {
-                    const sectionCollections = collections.filter(c => c.type === section.type);
-                    const mcpResources = section.type === 'mcp'
-                        ? resources.filter(r => r.type === 'mcp')
-                        : [];
+            {isSearching
+                ? sections.map((section, i) => {
+                      const sectionItems = filtered.filter((r) => r.type === section.type);
+                      return (
+                          <ResourceSection
+                              key={section.type}
+                              title={section.title}
+                              subtitle={section.subtitle}
+                              resources={sectionItems}
+                              showDivider={i > 0}
+                          />
+                      );
+                  })
+                : sections.map((section, i) => {
+                      const sectionCollections = collections.filter((c) => c.type === section.type);
+                      const mcpResources = section.type === 'mcp' ? resources.filter((r) => r.type === 'mcp') : [];
 
-                    if (sectionCollections.length === 0 && mcpResources.length === 0) return null;
+                      if (sectionCollections.length === 0 && mcpResources.length === 0) return null;
 
-                    return (
-                        <section key={section.type}>
-                            {i > 0 && <Separator className="my-8" />}
-                            <div>
-                                <h2 className="text-xl font-semibold text-foreground">
-                                    {section.title}
-                                    <span className="ml-2 text-sm font-normal text-muted-foreground">
-                                        ({sectionCollections.length}{sectionCollections.length === 1
-                                            ? ' collection' : ' collections'})
-                                    </span>
-                                </h2>
-                                <p className="mb-4 text-sm text-muted-foreground">{section.subtitle}</p>
-                            </div>
-                            <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="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>
-                        </section>
-                    );
-                })
-            )}
+                      return (
+                          <section key={section.type}>
+                              {i > 0 && <Separator className="my-8" />}
+                              <div>
+                                  <h2 className="text-xl font-semibold text-foreground">
+                                      {section.title}
+                                      <span className="ml-2 text-sm font-normal text-muted-foreground">
+                                          ({sectionCollections.length}
+                                          {sectionCollections.length === 1 ? ' collection' : ' collections'})
+                                      </span>
+                                  </h2>
+                                  <p className="mb-4 text-sm text-muted-foreground">{section.subtitle}</p>
+                              </div>
+                              <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="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>
+                          </section>
+                      );
+                  })}
         </div>
     );
 }

package/src/pages/InteractionCollection.tsx

@@ -11,11 +11,12 @@ export function InteractionCollection() {
     const { baseUrl } = useAdminContext();
 
     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();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/interactions/${collection}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection],
     );
 
     if (error) {
@@ -23,7 +24,11 @@ export function InteractionCollection() {
     }
 
     if (!interactions) {
-        return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
     }
 
     return (
@@ -33,18 +38,28 @@ export function InteractionCollection() {
             description={`${interactions.length} interaction${interactions.length !== 1 ? 's' : ''} in this collection.`}
         >
             <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="block no-underline">
+                {interactions.map((inter) => (
+                    <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}`}>
+                                <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>
+                                <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>)}
+                                        {inter.tags.map((tag) => (
+                                            <Badge key={tag}>{tag}</Badge>
+                                        ))}
                                     </div>
                                 )}
                             </CardContent>

package/src/pages/InteractionDetail.tsx

@@ -17,15 +17,21 @@ export function InteractionDetail() {
     const { baseUrl } = useAdminContext();
 
     const { data: interaction, error } = useFetch<InteractionResponse>(
-        () => client.getRawJWT().then(token => fetch(`${baseUrl}/interactions/${collection}/${name}`, {
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-        })).then(r => {
-            if (!r.ok) throw new Error(`Failed to load interaction: ${r.statusText}`);
-            return r.json();
-        }),
-        [baseUrl, collection, name]
+        () =>
+            client
+                .getRawJWT()
+                .then((token) =>
+                    fetch(`${baseUrl}/interactions/${collection}/${name}`, {
+                        headers: {
+                            Authorization: `Bearer ${token}`,
+                        },
+                    }),
+                )
+                .then((r) => {
+                    if (!r.ok) throw new Error(`Failed to load interaction: ${r.statusText}`);
+                    return r.json();
+                }),
+        [baseUrl, collection, name],
     );
 
     if (error) {
@@ -33,11 +39,16 @@ export function InteractionDetail() {
     }
 
     if (!interaction) {
-        return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
     }
 
     const { agent_runner_options } = interaction;
-    const hasAgentFlags = agent_runner_options &&
+    const hasAgentFlags =
+        agent_runner_options &&
         (agent_runner_options.is_agent || agent_runner_options.is_tool || agent_runner_options.is_skill);
 
     return (
@@ -55,14 +66,18 @@ export function InteractionDetail() {
                         <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] ?? ''}`}>
+                                    <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>
+                                <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>
                     ))}

package/src/pages/SkillCollection.tsx

@@ -9,7 +9,7 @@ import { TYPE_VARIANTS } from '../components/typeVariants.js';
 interface SkillToolDef {
     name: string;
     description?: string;
-    related_tools?: string[];
+    tools?: string[];
 }
 
 interface SkillCollectionResponse {
@@ -38,16 +38,17 @@ export function SkillCollection() {
     const { baseUrl } = useAdminContext();
 
     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();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/skills/${collection}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection],
     );
 
     const { data: widgetsData } = useFetch<WidgetsResponse>(
-        () => fetch(`${baseUrl}/package?scope=widgets`).then(r => r.ok ? r.json() : { widgets: {} }),
-        [baseUrl]
+        () => fetch(`${baseUrl}/package?scope=widgets`).then((r) => (r.ok ? r.json() : { widgets: {} })),
+        [baseUrl],
     );
 
     const collectionWidgets = useMemo(() => {
@@ -57,20 +58,29 @@ export function SkillCollection() {
             .map(([name, w]) => ({ name, ...w }));
     }, [widgetsData, collection]);
 
-    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>;
+    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
             type="skill"
             title={data.title || collection}
-            description={data.description || `${data.tools.length} skill${data.tools.length !== 1 ? 's' : ''} in this collection.`}
+            description={
+                data.description ||
+                `${data.tools.length} skill${data.tools.length !== 1 ? 's' : ''} in this collection.`
+            }
         >
             {collectionWidgets.length > 0 && (
                 <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 => (
+                        {collectionWidgets.map((w) => (
                             <Badge key={w.name} variant="success">
                                 {w.name}
                                 <span className="ml-2 font-mono text-xs opacity-70">(skill: {w.skill})</span>
@@ -81,20 +91,30 @@ export function SkillCollection() {
             )}
 
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                {data.tools.map(skill => {
+                {data.tools.map((skill) => {
                     const displayName = skillDisplayName(skill.name);
                     return (
-                        <NavLink key={skill.name} href={`/skills/${collection}/${displayName}`} className="block no-underline">
+                        <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}`}>
+                                    <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-1 text-sm text-muted-foreground">
+                                        {skill.description || 'No description'}
+                                    </div>
+                                    {skill.tools && skill.tools.length > 0 && (
                                         <div className="mt-2 flex flex-wrap gap-1">
-                                            {skill.related_tools.map(t => <Badge key={t}>{t}</Badge>)}
+                                            {skill.tools.map((t) => (
+                                                <Badge key={t}>{t}</Badge>
+                                            ))}
                                         </div>
                                     )}
                                 </CardContent>

package/src/pages/SkillDetail.tsx

@@ -11,7 +11,7 @@ interface SkillDefinitionResponse {
     instructions: string;
     content_type: 'md' | 'jst';
     input_schema?: Record<string, unknown>;
-    related_tools?: string[];
+    tools?: string[];
     execution?: {
         language: string;
         packages?: string[];
@@ -27,15 +27,21 @@ export function SkillDetail() {
     const { baseUrl } = useAdminContext();
 
     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();
-        }),
-        [baseUrl, collection, name]
+        () =>
+            fetch(`${baseUrl}/skills/${collection}/${name}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load skill: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection, name],
     );
 
     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>;
+    if (!skill)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage
@@ -48,7 +54,11 @@ export function SkillDetail() {
                 <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>)}
+                        {skill.widgets.map((w) => (
+                            <Badge key={w} variant="success">
+                                {w}
+                            </Badge>
+                        ))}
                     </div>
                 </div>
             )}
@@ -57,16 +67,24 @@ export function SkillDetail() {
                 <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>)}
+                        {skill.scripts.map((s) => (
+                            <Badge key={s} variant="success">
+                                {s}
+                            </Badge>
+                        ))}
                     </div>
                 </div>
             )}
 
-            {skill.related_tools && skill.related_tools.length > 0 && (
+            {skill.tools && skill.tools.length > 0 && (
                 <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>)}
+                        {skill.tools.map((t) => (
+                            <Badge key={t} variant="success">
+                                {t}
+                            </Badge>
+                        ))}
                     </div>
                 </div>
             )}
@@ -76,7 +94,11 @@ export function SkillDetail() {
                     <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>)}
+                        {skill.execution.packages?.map((p) => (
+                            <Badge key={p} variant="success">
+                                {p}
+                            </Badge>
+                        ))}
                     </div>
                 </div>
             )}
@@ -86,7 +108,9 @@ 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">{skill.instructions}</pre>
+                <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>
 
             {skill.input_schema && (

package/src/pages/TemplateCollection.tsx

@@ -11,15 +11,24 @@ export function TemplateCollection() {
     const { baseUrl } = useAdminContext();
 
     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();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/templates/${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 template collection &ldquo;{collection}&rdquo;.</div>;
-    if (!templates) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></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
@@ -28,23 +37,25 @@ export function TemplateCollection() {
             description={`${templates.length} template${templates.length !== 1 ? 's' : ''} in this collection.`}
         >
             <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="no-underline"
-                    >
+                {templates.map((tmpl) => (
+                    <NavLink key={tmpl.name} href={`/templates/${collection}/${tmpl.name}`} className="no-underline">
                         <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}`}>
+                                <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>
+                                <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>
+                                        {tmpl.tags.map((tag) => (
+                                            <Badge key={tag} variant="default">
+                                                {tag}
+                                            </Badge>
                                         ))}
                                     </div>
                                 )}

package/src/pages/TemplateDetail.tsx

@@ -21,15 +21,21 @@ export function TemplateDetail() {
     const { baseUrl } = useAdminContext();
 
     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();
-        }),
-        [baseUrl, collection, name]
+        () =>
+            fetch(`${baseUrl}/templates/${collection}/${name}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load template: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection, name],
     );
 
     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>;
+    if (!template)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage
@@ -49,7 +55,7 @@ export function TemplateDetail() {
                 <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 => (
+                        {template.assets.map((asset) => (
                             <Badge key={asset} variant="success">
                                 {asset.split('/').pop()}
                             </Badge>