Function ProjectHooksSection

web/src/components/settings/ProjectHooksSection.tsx:547–1441

({
  project,
  projectId,
  projectIsLoading,
}: {
  project?: Project
  projectId: string
  projectIsLoading: boolean
})

}

export function ProjectHooksSection({
  project,
  projectId,
  projectIsLoading,
}: {
  project?: Project
  projectId: string
  projectIsLoading: boolean
}) {
  const queryClient = useQueryClient()
  const runsQuery = useProjectHookRunsQuery(projectId)
  const agentsQuery = useAgentsQuery()
  const agentsList = agentsQuery.data?.items ?? []
  const agentOptions = useMemo<ComboSelectOption[]>(
    () =>
      agentsList.map((agent) => ({
        value: agent.id,
        label: agent.name,
        description: `${agent.executor_type} · ${agent.id}`,
      })),
    [agentsList],
  )
  const agentNames = useMemo(() => {
    const map = new Map<string, string>()
    for (const agent of agentsList) map.set(agent.id, agent.name)
    return map
  }, [agentsList])
  const rules = project?.project_hooks ?? []
  const runs = useMemo(
    () => runsQuery.data?.pages.flatMap((page) => page.items) ?? [],
    [runsQuery.data],
  )
  const runStats = useMemo(() => computeRunStats(runs), [runs])

  const [dialogMode, setDialogMode] = useState<DialogMode | null>(null)
  const [form, setForm] = useState<ProjectHookRuleFormState>(() => emptyRuleForm())
  const [formError, setFormError] = useState('')
  const [sectionError, setSectionError] = useState('')
  const [detailIndex, setDetailIndex] = useState<number | null>(null)
  const [showAllRuns, setShowAllRuns] = useState(false)

  const selectedRule = detailIndex !== null ? rules[detailIndex] : null
  const selectedRuleRuns = useMemo(
    () => (selectedRule ? runs.filter((run) => run.rule_id === selectedRule.id) : []),
    [runs, selectedRule],
  )

  const saveRules = useMutation({
    mutationFn: (nextRules: ProjectHookRuleWire[]) =>
      apiFetch<Project>(`/projects/${projectId}`, {
        method: 'PATCH',
        body: JSON.stringify({ project_hooks: nextRules }),
      }),
    onSuccess: (updatedProject) => {
      void queryClient.invalidateQueries({ queryKey: qk.project(updatedProject.id) })
      void queryClient.invalidateQueries({ queryKey: qk.projects })
    },
  })