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/api/index.ts

@@ -28,3 +28,4 @@ export { aiSessionsApi } from './aiSessions'
 export { flowProposalsApi } from './flowProposals'
 export { flowpilotAnalyticsApi } from './flowpilotAnalytics'
 export { notificationsApi } from './notifications'
+export { publicTemplatesApi } from './publicTemplates'

frontend/src/api/publicTemplates.ts

@@ -0,0 +1,54 @@
+import type {
+  PublicGalleryResponse,
+  PublicFlowDetail,
+  PublicScriptDetail,
+  GalleryCategory,
+} from '@/types/public-templates'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+export const publicTemplatesApi = {
+  async listGallery(params?: {
+    category?: string
+    type?: string
+    sort?: string
+    page?: number
+    per_page?: number
+  }): Promise<PublicGalleryResponse> {
+    const searchParams = new URLSearchParams()
+    if (params?.category) searchParams.set('category', params.category)
+    if (params?.type) searchParams.set('type', params.type)
+    if (params?.sort) searchParams.set('sort', params.sort)
+    if (params?.page) searchParams.set('page', String(params.page))
+    if (params?.per_page) searchParams.set('per_page', String(params.per_page))
+    const qs = searchParams.toString()
+    const response = await fetch(`${API_URL}/api/v1/public/templates${qs ? `?${qs}` : ''}`)
+    if (!response.ok) throw new Error('Failed to load gallery')
+    return response.json()
+  },
+
+  async getFlowDetail(id: string): Promise<PublicFlowDetail> {
+    const response = await fetch(`${API_URL}/api/v1/public/templates/flows/${id}`)
+    if (!response.ok) throw new Error('Failed to load flow detail')
+    return response.json()
+  },
+
+  async getScriptDetail(id: string): Promise<PublicScriptDetail> {
+    const response = await fetch(`${API_URL}/api/v1/public/templates/scripts/${id}`)
+    if (!response.ok) throw new Error('Failed to load script detail')
+    return response.json()
+  },
+
+  async listCategories(): Promise<GalleryCategory[]> {
+    const response = await fetch(`${API_URL}/api/v1/public/templates/categories`)
+    if (!response.ok) throw new Error('Failed to load categories')
+    return response.json()
+  },
+
+  async search(q: string): Promise<PublicGalleryResponse> {
+    const searchParams = new URLSearchParams({ q })
+    const response = await fetch(`${API_URL}/api/v1/public/templates/search?${searchParams}`)
+    if (!response.ok) throw new Error('Search failed')
+    return response.json()
+  },
+}

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>
+  )
+}

frontend/src/pages/PublicTemplatesPage.tsx

@@ -0,0 +1,456 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { Search, SlidersHorizontal, ChevronDown, Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { PageMeta } from '@/components/common/PageMeta'
+import { BrandLogo } from '@/components/common/BrandLogo'
+import { FlowTemplateCard } from '@/components/public/FlowTemplateCard'
+import { ScriptTemplateCard } from '@/components/public/ScriptTemplateCard'
+import { TemplateDetailModal } from '@/components/public/TemplateDetailModal'
+import { publicTemplatesApi } from '@/api/publicTemplates'
+import type {
+  PublicFlowTemplate,
+  PublicScriptTemplate,
+  PublicFlowDetail,
+  PublicScriptDetail,
+  PublicGalleryResponse,
+} from '@/types'
+
+type SortOption = 'most_used' | 'newest' | 'highest_success'
+type TypeFilter = 'all' | 'flows' | 'scripts'
+
+const sortLabels: Record<SortOption, string> = {
+  most_used: 'Most Used',
+  newest: 'Newest',
+  highest_success: 'Highest Success Rate',
+}
+
+export default function PublicTemplatesPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  // State
+  const [data, setData] = useState<PublicGalleryResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Filters
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '')
+  const [activeCategory, setActiveCategory] = useState(searchParams.get('category') || '')
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>(
+    (searchParams.get('type') as TypeFilter) || 'all'
+  )
+  const [sort, setSort] = useState<SortOption>(
+    (searchParams.get('sort') as SortOption) || 'most_used'
+  )
+  const [sortOpen, setSortOpen] = useState(false)
+
+  // Detail modal
+  const [selectedFlow, setSelectedFlow] = useState<PublicFlowDetail | null>(null)
+  const [selectedScript, setSelectedScript] = useState<PublicScriptDetail | null>(null)
+  const [detailLoading, setDetailLoading] = useState(false)
+
+  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Fetch gallery data
+  const fetchGallery = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await publicTemplatesApi.listGallery({
+        category: activeCategory || undefined,
+        type: typeFilter === 'all' ? undefined : typeFilter,
+        sort,
+      })
+      setData(result)
+    } catch {
+      setError('Failed to load templates. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }, [activeCategory, typeFilter, sort])
+
+  // Search
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      fetchGallery()
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await publicTemplatesApi.search(q.trim())
+      setData(result)
+    } catch {
+      setError('Search failed. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }, [fetchGallery])
+
+  // Initial load & filter changes
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      fetchGallery()
+    }
+  }, [fetchGallery, searchQuery])
+
+  // Sync filters to URL
+  useEffect(() => {
+    const params = new URLSearchParams()
+    if (searchQuery) params.set('q', searchQuery)
+    if (activeCategory) params.set('category', activeCategory)
+    if (typeFilter !== 'all') params.set('type', typeFilter)
+    if (sort !== 'most_used') params.set('sort', sort)
+    setSearchParams(params, { replace: true })
+  }, [searchQuery, activeCategory, typeFilter, sort, setSearchParams])
+
+  // Debounced search
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value)
+    if (searchTimeout.current) clearTimeout(searchTimeout.current)
+    searchTimeout.current = setTimeout(() => {
+      doSearch(value)
+    }, 400)
+  }
+
+  // Open detail modal
+  const openFlowDetail = async (template: PublicFlowTemplate) => {
+    setDetailLoading(true)
+    try {
+      const detail = await publicTemplatesApi.getFlowDetail(template.id)
+      setSelectedFlow(detail)
+    } catch {
+      // Fallback to the list data
+      setSelectedFlow(template)
+    } finally {
+      setDetailLoading(false)
+    }
+  }
+
+  const openScriptDetail = async (template: PublicScriptTemplate) => {
+    setDetailLoading(true)
+    try {
+      const detail = await publicTemplatesApi.getScriptDetail(template.id)
+      setSelectedScript(detail)
+    } catch {
+      // Script list items don't have full detail — show what we have
+      setSelectedScript({
+        ...template,
+        parameters: [],
+      })
+    } finally {
+      setDetailLoading(false)
+    }
+  }
+
+  const categories = data?.categories || []
+  const flows = data?.flow_templates || []
+  const scripts = data?.script_templates || []
+  const showFlows = typeFilter === 'all' || typeFilter === 'flows'
+  const showScripts = typeFilter === 'all' || typeFilter === 'scripts'
+
+  return (
+    <>
+      <PageMeta
+        title="MSP Templates Gallery"
+        description="Browse battle-tested troubleshooting flows and scripts built by MSP engineers. Free to explore."
+      />
+
+      <div className="min-h-screen bg-background text-foreground">
+        {/* Ambient orbs */}
+        <div
+          className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
+          style={{
+            background: 'radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%)',
+          }}
+        />
+        <div
+          className="fixed bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
+          style={{
+            background: 'radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%)',
+          }}
+        />
+
+        {/* Header */}
+        <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-xl">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+            <Link to="/landing" className="flex items-center gap-2.5">
+              <BrandLogo size="sm" />
+              <span className="font-heading text-lg font-semibold">
+                <span className="text-foreground">Resolution</span>
+                <span className="text-gradient-brand">Flow</span>
+              </span>
+            </Link>
+            <div className="flex items-center gap-3">
+              <Link
+                to="/login"
+                className="px-4 py-2 rounded-[10px] text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Sign In
+              </Link>
+              <Link
+                to="/register"
+                className="px-4 py-2 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 Free
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        {/* Hero */}
+        <section className="pt-16 pb-10 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-3xl mx-auto text-center">
+            <h1 className="font-heading text-4xl lg:text-5xl font-bold tracking-tight">
+              MSP Troubleshooting{' '}
+              <span className="text-gradient-brand">Templates</span>
+            </h1>
+            <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+              Battle-tested flows and scripts built by MSP engineers. Free to browse, powerful when connected to FlowPilot.
+            </p>
+
+            {/* Search */}
+            <div className="mt-8 max-w-xl mx-auto relative">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search templates..."
+                value={searchQuery}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Filters */}
+        <section className="px-4 sm:px-6 lg:px-8 pb-6">
+          <div className="max-w-7xl mx-auto space-y-4">
+            {/* Category pills */}
+            {categories.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  onClick={() => setActiveCategory('')}
+                  className={cn(
+                    'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
+                    !activeCategory
+                      ? 'bg-primary/10 text-foreground border-primary/30'
+                      : 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+                  )}
+                >
+                  All
+                </button>
+                {categories.map((cat) => (
+                  <button
+                    key={cat}
+                    type="button"
+                    onClick={() => setActiveCategory(cat === activeCategory ? '' : cat)}
+                    className={cn(
+                      'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
+                      cat === activeCategory
+                        ? 'bg-primary/10 text-foreground border-primary/30'
+                        : 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+                    )}
+                  >
+                    {cat}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Type toggle + Sort */}
+            <div className="flex items-center justify-between gap-4 flex-wrap">
+              {/* Type segmented control */}
+              <div className="flex items-center rounded-xl border border-border bg-card overflow-hidden">
+                {(['all', 'flows', 'scripts'] as TypeFilter[]).map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    onClick={() => setTypeFilter(t)}
+                    className={cn(
+                      'px-4 py-2 text-sm font-medium transition-colors',
+                      t === typeFilter
+                        ? 'bg-primary/10 text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    {t === 'all' ? 'All' : t === 'flows' ? 'Flows' : 'Scripts'}
+                  </button>
+                ))}
+              </div>
+
+              {/* Sort dropdown */}
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setSortOpen(!sortOpen)}
+                  className="flex items-center gap-2 px-3 py-2 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"
+                >
+                  <SlidersHorizontal className="w-4 h-4 text-muted-foreground" />
+                  {sortLabels[sort]}
+                  <ChevronDown className={cn('w-4 h-4 text-muted-foreground transition-transform', sortOpen && 'rotate-180')} />
+                </button>
+                {sortOpen && (
+                  <>
+                    <div className="fixed inset-0 z-10" onClick={() => setSortOpen(false)} />
+                    <div className="absolute right-0 mt-1 z-20 w-52 rounded-xl border border-border bg-card shadow-lg shadow-black/30 overflow-hidden">
+                      {(Object.entries(sortLabels) as [SortOption, string][]).map(([key, label]) => (
+                        <button
+                          key={key}
+                          type="button"
+                          onClick={() => {
+                            setSort(key)
+                            setSortOpen(false)
+                          }}
+                          className={cn(
+                            'w-full text-left px-4 py-2.5 text-sm transition-colors',
+                            key === sort
+                              ? 'bg-primary/10 text-foreground'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)]'
+                          )}
+                        >
+                          {label}
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Content */}
+        <section className="px-4 sm:px-6 lg:px-8 pb-20">
+          <div className="max-w-7xl mx-auto">
+            {/* Loading */}
+            {loading && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <div key={i} className="glass-card-static p-5 space-y-3 animate-pulse">
+                    <div className="h-5 bg-[rgba(255,255,255,0.06)] rounded w-3/4" />
+                    <div className="h-4 bg-[rgba(255,255,255,0.04)] rounded w-full" />
+                    <div className="h-4 bg-[rgba(255,255,255,0.04)] rounded w-2/3" />
+                    <div className="h-3 bg-[rgba(255,255,255,0.03)] rounded w-1/2 mt-4" />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Error */}
+            {!loading && error && (
+              <div className="text-center py-16">
+                <p className="text-muted-foreground text-sm">{error}</p>
+                <button
+                  type="button"
+                  onClick={fetchGallery}
+                  className="mt-4 px-4 py-2 rounded-[10px] text-sm font-medium bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97] transition-all"
+                >
+                  Try Again
+                </button>
+              </div>
+            )}
+
+            {/* Empty */}
+            {!loading && !error && flows.length === 0 && scripts.length === 0 && (
+              <div className="text-center py-16">
+                <p className="text-muted-foreground text-sm">
+                  No templates found. Try a different search or category.
+                </p>
+              </div>
+            )}
+
+            {/* Results */}
+            {!loading && !error && (flows.length > 0 || scripts.length > 0) && (
+              <div className="space-y-8">
+                {/* Flows */}
+                {showFlows && flows.length > 0 && (
+                  <div>
+                    {typeFilter === 'all' && (
+                      <h2 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
+                        Flows ({data?.total_flows || flows.length})
+                      </h2>
+                    )}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
+                      {flows.map((flow) => (
+                        <FlowTemplateCard
+                          key={flow.id}
+                          template={flow}
+                          onClick={() => openFlowDetail(flow)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Scripts */}
+                {showScripts && scripts.length > 0 && (
+                  <div>
+                    {typeFilter === 'all' && (
+                      <h2 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
+                        Scripts ({data?.total_scripts || scripts.length})
+                      </h2>
+                    )}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
+                      {scripts.map((script) => (
+                        <ScriptTemplateCard
+                          key={script.id}
+                          template={script}
+                          onClick={() => openScriptDetail(script)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer className="border-t border-border py-8 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto flex items-center justify-between">
+            <Link
+              to="/landing"
+              className="text-muted-foreground text-sm hover:text-foreground transition-colors"
+            >
+              Powered by <span className="font-semibold">ResolutionFlow</span>
+            </Link>
+            <div className="flex items-center gap-4">
+              <Link
+                to="/register"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Get Started
+              </Link>
+            </div>
+          </div>
+        </footer>
+
+        {/* Detail loading overlay */}
+        {detailLoading && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+            <Loader2 className="w-8 h-8 text-primary animate-spin" />
+          </div>
+        )}
+
+        {/* Detail modals */}
+        {selectedFlow && (
+          <TemplateDetailModal
+            type="flow"
+            template={selectedFlow}
+            onClose={() => setSelectedFlow(null)}
+          />
+        )}
+        {selectedScript && (
+          <TemplateDetailModal
+            type="script"
+            template={selectedScript}
+            onClose={() => setSelectedScript(null)}
+          />
+        )}
+      </div>
+    </>
+  )
+}

frontend/src/router.tsx

@@ -14,6 +14,7 @@ import {
 
 // Public pages
 const LandingPage = lazy(() => import('@/pages/LandingPage'))
+const PublicTemplatesPage = lazy(() => import('@/pages/PublicTemplatesPage'))
 const SharedSessionPage = lazy(() => import('@/pages/SharedSessionPage'))
 const SurveyPage = lazy(() => import('@/pages/SurveyPage'))
 const SurveyThankYouPage = lazy(() => import('@/pages/SurveyThankYouPage'))
@@ -92,6 +93,11 @@ export const router = sentryCreateBrowserRouter([
     element: page(LandingPage),
     errorElement: <RouteError />,
   },
+  {
+    path: '/templates',
+    element: page(PublicTemplatesPage),
+    errorElement: <RouteError />,
+  },
   {
     path: '/login',
     element: <LoginPage />,

frontend/src/types/index.ts

@@ -94,3 +94,4 @@ export type {
 export * from './scripts'
 export * from './integrations'
 export * from './notification'
+export type * from './public-templates'

frontend/src/types/public-templates.ts

@@ -0,0 +1,60 @@
+export interface PublicFlowTemplate {
+  id: string
+  name: string
+  description: string | null
+  category: string | null
+  tree_type: string
+  step_count: number
+  usage_count: number
+  success_rate: number | null
+  tags: string[]
+  preview_structure: Record<string, unknown> | null
+  created_at: string
+}
+
+export interface PublicScriptTemplate {
+  id: string
+  name: string
+  description: string | null
+  category_name: string | null
+  category_icon: string | null
+  complexity: string | null
+  tags: string[]
+  parameter_count: number
+  requires_elevation: boolean
+  requires_modules: string[]
+  usage_count: number
+  is_verified: boolean
+  created_at: string
+}
+
+export interface PublicGalleryResponse {
+  flow_templates: PublicFlowTemplate[]
+  script_templates: PublicScriptTemplate[]
+  total_flows: number
+  total_scripts: number
+  categories: string[]
+  domains: string[]
+}
+
+export interface PublicFlowDetail extends PublicFlowTemplate {}
+
+export interface PublicScriptDetail {
+  id: string
+  name: string
+  description: string | null
+  category_name: string | null
+  complexity: string | null
+  tags: string[]
+  parameters: Array<{ name: string; description: string; type: string }>
+  requires_elevation: boolean
+  requires_modules: string[]
+  usage_count: number
+  is_verified: boolean
+  created_at: string
+}
+
+export interface GalleryCategory {
+  name: string
+  count: number
+}