feat: frontend setup — React, TypeScript, Tailwind, auth, layout, routing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/hooks/useProtocols.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import api from '../api/client'
+import type { Protocol } from '../types'
+
+export function useProtocols() {
+  const queryClient = useQueryClient()
+
+  const { data, isLoading } = useQuery<{ items: Protocol[]; total: number }>({
+    queryKey: ['protocols'],
+    queryFn: () => api.get('/protocols').then((r) => r.data),
+    refetchInterval: 5000,
+  })
+
+  const regenerateMutation = useMutation({
+    mutationFn: ({ id, templateId }: { id: string; templateId?: string }) =>
+      api.post(`/protocols/${id}/regenerate`, { template_id: templateId }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['protocols'] }),
+  })
+
+  return {
+    protocols: data?.items ?? [],
+    total: data?.total ?? 0,
+    isLoading,
+    regenerate: regenerateMutation.mutateAsync,
+  }
+}
+
+export function useProtocol(id: string) {
+  return useQuery<Protocol>({
+    queryKey: ['protocol', id],
+    queryFn: () => api.get(`/protocols/${id}`).then((r) => r.data),
+    refetchInterval: 3000,
+  })
+}