feat(gallery): add public templates gallery frontend (Tasks 4 & 5)

Add types, API client, page component, card components, detail modal,
and /templates route for the public templates gallery. Uses raw fetch()
for unauthenticated access, glass-card design system, and URL-synced
filters with debounced search.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/public/FlowTemplateCard.tsx

@@ -0,0 +1,96 @@
+import { GitBranch, BarChart3, Layers } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { PublicFlowTemplate } from '@/types'
+
+interface FlowTemplateCardProps {
+  template: PublicFlowTemplate
+  onClick: () => void
+}
+
+const typeLabels: Record<string, string> = {
+  troubleshooting: 'Troubleshooting',
+  procedural: 'Project',
+  maintenance: 'Maintenance',
+}
+
+export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="glass-card text-left w-full flex flex-col gap-3 p-5"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
+          {template.name}
+        </h3>
+        <span className="shrink-0">
+          <GitBranch className="w-4 h-4 text-muted-foreground" />
+        </span>
+      </div>
+
+      {template.description && (
+        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
+          {template.description}
+        </p>
+      )}
+
+      {template.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {template.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+            >
+              {tag}
+            </span>
+          ))}
+          {template.tags.length > 3 && (
+            <span className="font-label text-[0.625rem] text-muted-foreground">
+              +{template.tags.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
+        {template.category && (
+          <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            {template.category}
+          </span>
+        )}
+        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
+          <Layers className="w-3 h-3" />
+          {template.step_count} steps
+        </span>
+        {template.success_rate !== null && (
+          <span
+            className={cn(
+              'font-label text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
+              template.success_rate >= 80
+                ? 'text-emerald-400'
+                : template.success_rate >= 50
+                  ? 'text-amber-400'
+                  : 'text-rose-500'
+            )}
+          >
+            <BarChart3 className="w-3 h-3" />
+            {Math.round(template.success_rate)}%
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className={cn(
+          'font-label text-[0.625rem] px-2 py-0.5 rounded-md border',
+          'bg-primary/5 border-primary/20 text-primary'
+        )}>
+          {typeLabels[template.tree_type] || template.tree_type}
+        </span>
+        <span className="font-label text-[0.625rem] text-[#5a6170]">
+          {template.usage_count.toLocaleString()} uses
+        </span>
+      </div>
+    </button>
+  )
+}

frontend/src/components/public/ScriptTemplateCard.tsx

@@ -0,0 +1,101 @@
+import { Terminal, ShieldCheck, CheckCircle2, Package } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { PublicScriptTemplate } from '@/types'
+
+interface ScriptTemplateCardProps {
+  template: PublicScriptTemplate
+  onClick: () => void
+}
+
+const complexityColors: Record<string, string> = {
+  basic: 'text-emerald-400 border-emerald-400/20 bg-emerald-400/5',
+  intermediate: 'text-amber-400 border-amber-400/20 bg-amber-400/5',
+  advanced: 'text-rose-500 border-rose-500/20 bg-rose-500/5',
+}
+
+export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="glass-card text-left w-full flex flex-col gap-3 p-5"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
+            {template.name}
+          </h3>
+          {template.is_verified && (
+            <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
+          )}
+        </div>
+        <span className="shrink-0">
+          <Terminal className="w-4 h-4 text-muted-foreground" />
+        </span>
+      </div>
+
+      {template.description && (
+        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
+          {template.description}
+        </p>
+      )}
+
+      {template.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {template.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+            >
+              {tag}
+            </span>
+          ))}
+          {template.tags.length > 3 && (
+            <span className="font-label text-[0.625rem] text-muted-foreground">
+              +{template.tags.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
+        {template.complexity && (
+          <span
+            className={cn(
+              'font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
+              complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
+            )}
+          >
+            {template.complexity}
+          </span>
+        )}
+        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+          {template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
+        </span>
+        {template.requires_elevation && (
+          <ShieldCheck className="w-3.5 h-3.5 text-amber-400" />
+        )}
+      </div>
+
+      {template.requires_modules.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {template.requires_modules.slice(0, 2).map((mod) => (
+            <span
+              key={mod}
+              className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
+            >
+              <Package className="w-3 h-3" />
+              {mod}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-end">
+        <span className="font-label text-[0.625rem] text-[#5a6170]">
+          {template.usage_count.toLocaleString()} uses
+        </span>
+      </div>
+    </button>
+  )
+}

frontend/src/components/public/TemplateDetailModal.tsx

@@ -0,0 +1,314 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import {
+  X,
+  GitBranch,
+  Terminal,
+  Layers,
+  BarChart3,
+  ShieldCheck,
+  CheckCircle2,
+  Package,
+  ChevronRight,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { PublicFlowDetail, PublicScriptDetail } from '@/types'
+
+type TemplateDetailModalProps =
+  | {
+      type: 'flow'
+      template: PublicFlowDetail
+      onClose: () => void
+    }
+  | {
+      type: 'script'
+      template: PublicScriptDetail
+      onClose: () => void
+    }
+
+const complexityColors: Record<string, string> = {
+  basic: 'text-emerald-400',
+  intermediate: 'text-amber-400',
+  advanced: 'text-rose-500',
+}
+
+export function TemplateDetailModal(props: TemplateDetailModalProps) {
+  const { type, template, onClose } = props
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  // Prevent body scroll while modal is open
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <div
+        className="glass-card-static relative w-full max-w-2xl max-h-[85vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4 p-6 border-b border-border">
+          <div className="flex items-center gap-3 min-w-0">
+            {type === 'flow' ? (
+              <GitBranch className="w-5 h-5 text-primary shrink-0" />
+            ) : (
+              <Terminal className="w-5 h-5 text-primary shrink-0" />
+            )}
+            <div className="min-w-0">
+              <h2 className="font-heading text-foreground text-xl font-semibold leading-tight flex items-center gap-2">
+                {template.name}
+                {type === 'script' && (template as PublicScriptDetail).is_verified && (
+                  <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
+                )}
+              </h2>
+              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mt-1">
+                {type === 'flow' ? 'Flow Template' : 'Script Template'}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+          {template.description && (
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              {template.description}
+            </p>
+          )}
+
+          {/* Metadata */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+            {type === 'flow' && (
+              <>
+                <MetaStat
+                  label="Steps"
+                  value={String((template as PublicFlowDetail).step_count)}
+                  icon={<Layers className="w-4 h-4" />}
+                />
+                {(template as PublicFlowDetail).success_rate !== null && (
+                  <MetaStat
+                    label="Success Rate"
+                    value={`${Math.round((template as PublicFlowDetail).success_rate!)}%`}
+                    icon={<BarChart3 className="w-4 h-4" />}
+                    valueClassName={
+                      (template as PublicFlowDetail).success_rate! >= 80
+                        ? 'text-emerald-400'
+                        : (template as PublicFlowDetail).success_rate! >= 50
+                          ? 'text-amber-400'
+                          : 'text-rose-500'
+                    }
+                  />
+                )}
+                <MetaStat
+                  label="Uses"
+                  value={(template as PublicFlowDetail).usage_count.toLocaleString()}
+                />
+              </>
+            )}
+            {type === 'script' && (
+              <>
+                {(template as PublicScriptDetail).complexity && (
+                  <MetaStat
+                    label="Complexity"
+                    value={(template as PublicScriptDetail).complexity!}
+                    valueClassName={
+                      complexityColors[(template as PublicScriptDetail).complexity!] ||
+                      'text-foreground'
+                    }
+                  />
+                )}
+                <MetaStat
+                  label="Uses"
+                  value={(template as PublicScriptDetail).usage_count.toLocaleString()}
+                />
+                {(template as PublicScriptDetail).requires_elevation && (
+                  <MetaStat
+                    label="Elevation"
+                    value="Required"
+                    icon={<ShieldCheck className="w-4 h-4 text-amber-400" />}
+                  />
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Tags */}
+          {template.tags.length > 0 && (
+            <div>
+              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+                Tags
+              </h4>
+              <div className="flex flex-wrap gap-1.5">
+                {template.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Flow preview structure */}
+          {type === 'flow' && (template as PublicFlowDetail).preview_structure && (
+            <div>
+              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+                Flow Preview
+              </h4>
+              <div className="bg-card border border-border rounded-xl p-4">
+                <PreviewTree structure={(template as PublicFlowDetail).preview_structure!} />
+              </div>
+            </div>
+          )}
+
+          {/* Script parameters */}
+          {type === 'script' && (template as PublicScriptDetail).parameters.length > 0 && (
+            <div>
+              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+                Parameters
+              </h4>
+              <div className="space-y-2">
+                {(template as PublicScriptDetail).parameters.map((param) => (
+                  <div
+                    key={param.name}
+                    className="flex items-start gap-3 bg-card border border-border rounded-xl p-3"
+                  >
+                    <code className="font-label text-xs text-primary shrink-0">
+                      {param.name}
+                    </code>
+                    <span className="text-muted-foreground text-sm flex-1">
+                      {param.description}
+                    </span>
+                    <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
+                      {param.type}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Script modules */}
+          {type === 'script' && (template as PublicScriptDetail).requires_modules.length > 0 && (
+            <div>
+              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+                Required Modules
+              </h4>
+              <div className="flex flex-wrap gap-1.5">
+                {(template as PublicScriptDetail).requires_modules.map((mod) => (
+                  <span
+                    key={mod}
+                    className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
+                  >
+                    <Package className="w-3 h-3" />
+                    {mod}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between gap-4 p-6 border-t border-border">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2.5 rounded-[10px] text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
+          >
+            Close
+          </button>
+          <Link
+            to="/register"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
+          >
+            Sign Up to Use This
+            <ChevronRight className="w-4 h-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MetaStat({
+  label,
+  value,
+  icon,
+  valueClassName,
+}: {
+  label: string
+  value: string
+  icon?: React.ReactNode
+  valueClassName?: string
+}) {
+  return (
+    <div className="bg-card border border-border rounded-xl p-3">
+      <div className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
+        {label}
+      </div>
+      <div className={cn('text-foreground text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
+        {icon}
+        {value}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Renders a simplified nested list from the preview_structure object.
+ * Expected shape: { name: string, children?: Array<...> }
+ */
+function PreviewTree({ structure }: { structure: Record<string, unknown> }) {
+  const name = (structure.name as string) || (structure.title as string) || 'Root'
+  const children = (structure.children as Array<Record<string, unknown>>) || []
+
+  return (
+    <div className="text-sm">
+      <div className="flex items-center gap-2 text-foreground">
+        <ChevronRight className="w-3.5 h-3.5 text-primary" />
+        <span>{name}</span>
+      </div>
+      {children.length > 0 && (
+        <div className="ml-5 mt-1 space-y-1 border-l border-border pl-3">
+          {children.slice(0, 8).map((child, i) => (
+            <PreviewTree key={i} structure={child} />
+          ))}
+          {children.length > 8 && (
+            <span className="text-muted-foreground text-xs">
+              +{children.length - 8} more steps...
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}