Hook Dashboard

Overview

The Hook Dashboard gives you a single pane of glass to manage automation hooks across three paradigms: Git lifecycle hooks, webhook HTTP callbacks, and Claude Code agentic hooks. Whether you're enforcing commit standards, reacting to Stripe payments, or adding deterministic guardrails to an AI coding agent, all your hooks live here.

Core Concepts

Every hook in the dashboard — regardless of category — shares the same three-part structure:

Understanding this three-part pattern makes any hook immediately legible, regardless of what system it lives in.

Interface Layout

The dashboard is organized into four primary zones:

Stats Bar

The stats bar at the top of the workspace provides an at-a-glance health summary for your entire hook fleet. It updates immediately whenever you create, delete, activate, or deactivate a hook.

Browsing Hooks

The hook list on the left shows a scrollable, filterable set of hook cards. Each card displays:

• A status indicator dot (animated green pulse = active, gray = inactive, red = error)
• The hook name
• An inline toggle switch to activate or deactivate without opening the detail view
• Event and handler type badges
• Run count and last run timestamp

Click anywhere on the card body to open the full detail view in the right panel.

Filtering & Search

Three filter controls sit above the hook list and can be combined freely:

Search

The search box filters across hook name, event, and tags simultaneously. It updates the list as you type — no need to press Enter.

Category Filter

Segment the list by hook system:

Status Filter

Filter by hook lifecycle state: All, Active, Inactive, or Error. Use the Error filter to quickly surface hooks that need attention.

Detail Panel

Selecting a hook opens its full profile in the right panel. This is where you inspect, manage, and understand any hook in depth.

Header Section

Shows the hook's name, status dot, and three primary badges: category, event, and handler type. The edit (✏️) and delete (🗑️) action buttons live here.

Metrics Row

Three inline metric cards display the hook's current status, total run count, and last run timestamp.

Handler Block

The handler's content is rendered in a syntax-styled code block. For command hooks this is a shell script. For prompt hooks it's the instruction sent to the model. For agent hooks it's the task description given to the spawned subagent.

Tags

Freeform labels for discovery and grouping. Click a tag in the detail panel to copy it for use in the search box.

Architecture Note

A context-aware explanation at the bottom of the panel describes how this specific hook type works under the hood — different for each category:

• Claude Code hooks: Exit code behavior and how stderr feeds back to the agent
• Webhooks: The two-phase acknowledge-then-process pattern
• Agent hooks: Subagent spawning and deterministic verification

Activate / Deactivate Button

A context-aware button at the bottom of the detail view lets you toggle the hook's status. The label and color update based on current state.

Creating a New Hook

Click + New Hook in the top-right corner to open the creation modal.

Editing & Deleting Hooks

Editing

Open any hook's detail view and click the ✏️ edit button in the top-right of the panel. The edit modal pre-populates all fields with the hook's current configuration. Make your changes and click Save Changes. The detail panel updates immediately.

Deleting

Click the 🗑️ delete button in the detail panel header. A browser confirmation dialog prevents accidental deletion. Confirming removes the hook from the list and clears the detail panel. This action cannot be undone.

Toggling Hook Status

You can toggle a hook's active/inactive state in two places:

• From the hook card: Click the toggle switch on the right side of any card in the list. This is the fastest path — no need to open the detail view.
• From the detail panel: Use the Activate Hook / Deactivate Hook button at the bottom of the panel.

Status changes are reflected immediately in the stats bar and the hook's card. Note that toggling from error to active is also supported — useful when you've resolved the underlying issue and want to re-enable the hook.

Git Hooks

Git hooks are executable scripts that fire automatically when lifecycle events occur in a repository. They transform version control from a passive record-keeping tool into an active quality enforcement system.

Client-Side vs. Server-Side

Example: pre-commit Linter

#!/bin/sh
npm run lint
if [ $? -ne 0 ]; then
  echo "Linter failed. Aborting commit."
  exit 1
fi

Git Hook Event Reference

Webhooks

Webhooks are user-defined HTTP callbacks triggered by events in a source system and delivered as HTTP POST requests to a destination URL — typically carrying a JSON payload.

Polling vs. Webhooks

The Two-Phase Processing Pattern

The most critical implementation detail for webhooks is response timing. If your handler performs slow work synchronously, the provider may time out and retry — creating duplicate events.

Claude Code Hooks

Claude Code hooks are the frontier of this dashboard. They attach to specific points in an AI agent's operational lifecycle, providing deterministic control over agent behavior.

Claude Code Event Reference

Handler Types

Every hook uses one of three handler types. The type determines how the hook's logic executes and what it can do.

Architecture Reference

The Three Invariants

Regardless of category, a hook's behavior is fully determined by three things:

Exit Code Semantics (Command Hooks)

The Augmentation Principle

Hooks augment without modifying their host system. A pre-commit hook doesn't touch Git internals. A PostToolUse formatter hook doesn't modify the Claude model. A webhook handler doesn't touch Stripe's API. This is why hooks are the essential building block of modular, composable software — they insert behavior without coupling to implementation.

Reference Panel (In-App)

The dashboard includes a built-in reference panel at the bottom of the left column. It has three tabs:

• Git Events — all 7 Git hook events with descriptions
• Claude Events — all 7 Claude Code hook events with descriptions
• Architecture — the three-part hook structure explained inline