### Install Hoop with Docker Compose

Source: https://github.com/hoophq/hoop/blob/main/README.md

Installs Hoop using Docker Compose by creating a .env file, downloading the docker-compose.yml configuration, and starting the services.

```bash
touch .env && \
curl -sL https://hoop.dev/docker-compose.yml > docker-compose.yml && \
docker compose up
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/README.md

Run this command to install all necessary Node.js dependencies for the project.

```bash
npm install
```

--------------------------------

### Start Development Presidio Server

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Starts the Presidio server for data masking. Requires Docker to be installed and running.

```sh
make run-dev-presidio
```

--------------------------------

### Install and Run Hoop Gateway

Source: https://github.com/hoophq/hoop/blob/main/README.md

Download the docker-compose.yml file and start the Hoop gateway using Docker Compose. The gateway will be accessible on port 8009.

```bash
curl -sL https://hoop.dev/docker-compose.yml > docker-compose.yml && \
  docker compose up
```

--------------------------------

### Configure and Start Development Server

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Copies the sample environment file and starts the development server. Ensure an identity provider is configured in the .env file. This command builds the agentrs and runs it within Docker.

```sh
# edit .env file with your favorite editor
cp .env.sample .env
```

```sh
make run-dev
```

--------------------------------

### Start Development PostgreSQL Server

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Starts and bootstraps a PostgreSQL server in the background for development use. This step can be skipped if a PostgreSQL server is already running.

```sh
make run-dev-postgres
```

--------------------------------

### Run Hoop Rust Agent

Source: https://github.com/hoophq/hoop/blob/main/agentrs/README.md

Execute this command to start the Hoop Rust Agent. Ensure you have Rust and Cargo installed.

```bash
cargo run --bin agentrs
```

--------------------------------

### Run Full Development Environment

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/README.md

Recommended command to start both the Vite dev server and the ClojureScript dev server simultaneously for a complete development experience.

```bash
npm run dev:full
```

--------------------------------

### Start the HSH Tunnel Daemon

Source: https://github.com/hoophq/hoop/blob/main/tunnel/README.md

Execute the tunnel daemon binary to start the service. Ensure you use sudo with the -E flag to preserve environment variables.

```bash
sudo -E /tmp/hsh-tunneld
```

--------------------------------

### Run Development Gateway and Agent

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Starts the gateway and agent for development. This command reads configuration from a .env file, so ensure .env.sample is copied to .env first.

```bash
make run-dev
```

--------------------------------

### Inject Version at Build Time

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Example of injecting the application version at build time using Go's linker flags.

```go
-ldflags "-X common/version.Version=1.0.0"
```

--------------------------------

### Local Test Recipe for Install Script

Source: https://github.com/hoophq/hoop/blob/main/tunnel/dist/scripts/README.md

This snippet demonstrates how to build the `hsh-tunneld` daemon, copy it alongside the install/uninstall scripts, and then execute the install script within a Docker container for testing purposes. It requires Docker and a specific systemd smoke test image.

```bash
go build -o /tmp/tarball/hsh-tunneld ./tunnel/cmd/hsh-tunneld
cp tunnel/dist/scripts/{install,uninstall}.sh /tmp/tarball/
chmod +x /tmp/tarball/{install,uninstall}.sh
docker run --rm --privileged --cgroupns=host \
  --tmpfs /run --tmpfs /run/lock \
  -v /sys/fs/cgroup:/sys/fs/cgroup:rw \
  -v /tmp/tarball:/opt/tarball:ro \
  hsh-systemd-smoke:24.04 \
  bash -c "cd /opt/tarball && ./install.sh"
```

--------------------------------

### Install or Upgrade Hoop Gateway

Source: https://github.com/hoophq/hoop/blob/main/deploy/helm-chart/README.md

Install or upgrade the Hoop gateway using the Helm chart. This command fetches the latest version and applies the configurations from your values.yaml file.

```sh
VERSION=$(curl -s https://releases.hoop.dev/release/latest.txt)
helm upgrade --install hoop \
  https://releases.hoop.dev/release/$VERSION/hoop-chart-$VERSION.tgz \
  -f values.yaml
```

--------------------------------

### Example Connection Configuration

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/run-exec.md

Defines a custom connection named 'bash-connection' that uses '/bin/bash' as its command. This is a prerequisite for ad-hoc shell executions.

```json
{
  "name": "bash-connection",
  "command": ["/bin/bash"],
  "type": "custom"
}
```

--------------------------------

### Launch shadow-cljs Dev Server

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Starts the shadow-cljs development server for ClojureScript. This rebuilds JavaScript and CSS files, which are then proxied by Vite.

```bash
cd webapp && npm run dev
```

--------------------------------

### Registering a Feature Flag

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Example of adding a new feature flag entry to the 'catalog' in 'common/featureflag/featureflag.go'.

```go
catalog = append(catalog, FeatureFlag{
	Name: "experimental.ssh_multiplex",
	Default: false,
	Stability: StabilityExperimental,
	Components: []Component{
		ComponentGateway,
		ComponentAgent,
		ComponentClient,
	},
})
```

--------------------------------

### Tag Filtering Examples

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/api-connection.md

These examples demonstrate how to filter resources based on tag key/value pairs using equality (=) and inequality (!=) operators. Multiple constraints can be combined with a comma.

```plaintext
environment = production
```

```plaintext
tier != frontend
```

```plaintext
environment=production,tier!=frontend
```

--------------------------------

### Install or Upgrade Hoop Agent

Source: https://github.com/hoophq/hoop/blob/main/deploy/helm-chart/README.md

Install or upgrade the Hoop agent using its Helm chart. This command fetches the latest agent chart and requires a Hoop key for configuration.

```sh
VERSION=$(curl -s https://releases.hoop.dev/release/latest.txt)
helm upgrade --install hoopagent https://releases.hoop.dev/release/$VERSION/hoopagent-chart-$VERSION.tgz \
    --set 'config.HOOP_KEY='

```

--------------------------------

### Global State: Re-frame Subscription to Zustand Store

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Compares reading global state from a Re-frame subscription to reading from a Zustand store. No specific setup is required for the Zustand example beyond store definition.

```clojure
;; CLJS — read global state via subscription
(let [agents @(rf/subscribe [:agents/list])] 
  ...)
```

```clojure
;; CLJS — write global state via event
(rf/dispatch [:agents/fetch])
```

--------------------------------

### Run Dummy Gateway for Testing

Source: https://github.com/hoophq/hoop/blob/main/agentrs/README.md

This command runs a dummy gateway for testing RDP functionality. It starts on ws://localhost:8009 and a TCP port for the RDP client.

```bash
cargo run --example gw
```

--------------------------------

### Run Full Frontend Development Server

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Starts both Vite (port 5173) and shadow-cljs (port 8280) for full-stack frontend development. Note that shadow-cljs edits require a manual browser hard-reload as Vite proxies the bundle.

```bash
cd webapp_v2 && npm run dev:full
```

--------------------------------

### Login to Hoop CLI

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/Authentication.md

Initiate the login process for the Hoop CLI. This command will guide the user through authentication with their identity provider and save the obtained access token to the configuration file.

```sh
hoop login
```

--------------------------------

### Run React Development Server Only

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Starts only the Vite development server on port 5173. React components can be hot-reloaded, but routes handled by shadow-cljs will be blank until it's started separately.

```bash
cd webapp_v2 && npm run dev
```

--------------------------------

### PageLoader Examples

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/COMPONENTS.md

Displays a loading state for the entire page or a contained section. Can also show an error message. Use with `useMinDelay` to prevent brief flashes on fast requests.

```jsx
import PageLoader from '@/components/PageLoader'

<PageLoader />                    // centered spinner, default height
<PageLoader h={400} />           // fixed height container
<PageLoader overlay />            // fixed full-screen overlay
<PageLoader error="message" />   // error state with icon
```

--------------------------------

### Example Connection Tags JSON

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/api-connection.md

This JSON structure shows how to define tags for connection resources. Tags are key/value pairs for identifying attributes.

```json
{
    "connection_tags": {
        "environment": "production",
        "component": "backend"
    }
}
```

--------------------------------

### Start SPIFFE Agent

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Launches a host-side agent that authenticates using the minted SPIFFE JWT. This script also rebuilds the client if necessary and seeds the development database.

```sh
make run-dev-spiffe-agent
```

--------------------------------

### Prepare SPIFFE Agent for Development

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Mints SPIFFE artifacts (trust bundle, signing key, JWT) and patches the .env file with necessary SPIFFE variables for local development. This step is required before starting the gateway with SPIFFE support.

```sh
make run-dev-spiffe-prep
```

--------------------------------

### Update Helm Chart for Environment Variable

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Example of updating the gateway Helm chart to pass through a new environment variable.

```yaml
MY_VAR: '{{ .Values.config.MY_VAR | default "..." }}'
```

--------------------------------

### AI Agent Command Without Hoop (Destructive Action)

Source: https://github.com/hoophq/hoop/blob/main/README.md

This example shows a destructive SQL command executed by an AI agent without Hoop.dev, leading to data loss.

```shell
> claude-code: DROP TABLE orders;
Query OK
47,291,834 rows affected 💀
```

--------------------------------

### MethodCard Component

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/COMPONENTS.md

A selectable card component used for choosing an installation or deployment method. It displays an icon, label, and description, and indicates whether it is currently selected.

```jsx
import MethodCard from '@/components/MethodCard'

<MethodCard
  icon={Docker}
  label="Docker"
  description="Run the agent as a Docker container"
  selected={installMethod === 'docker'}
  onClick={() => setInstallMethod('docker')}
/>
```

--------------------------------

### Get Server Information via API

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/Authentication.md

Retrieve the current server configuration using a cURL command. The access token must be included in the Authorization header as a Bearer token.

```sh
# obtain the current configuration of the server
curl https://{{ .Host }}{{ .BasePath }}/serverinfo -H "Authorization: Bearer $ACCESS_TOKEN"
```

--------------------------------

### Preview Production Build

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/README.md

Serves the production build locally for testing and previewing before deployment.

```bash
npm run preview
```

--------------------------------

### Build for Production

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/README.md

Executes the build process to create a production-ready version of the web application.

```bash
npm run build
```

--------------------------------

### Build Development Client (Non-TLS)

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Generates a development client binary that allows connecting to remote hosts without TLS. The binary is placed at $HOME/.hoop/dev/hoop.

```sh
# generate binary at $HOME/.hoop/dev/hoop
make build-dev-client
```

--------------------------------

### GET /hoophq/hoop/sessions/{id}

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/get-session-by-id.md

Retrieves session data. The response varies based on query parameters.

```APIDOC
## GET /hoophq/hoop/sessions/{id}

### Description
Retrieves a session by its ID. The response payload is conditional based on query parameters.

### Method
GET

### Endpoint
/hoophq/hoop/sessions/{id}

### Query Parameters
- **extension** (string) - Optional - If present, returns a download URL for the session data.
- **event_stream** (string) - Optional - If present with values 'utf8' or 'base64', the `event_stream` attribute will be rendered differently.

### Response
#### Success Response (200)
- **download_url** (string) - URL to download the session data (when `extension` query parameter is present).
- **expire_at** (string) - The expiration timestamp for the download URL.
- **event_stream** (array) - The event stream data.
- **metrics** (object) - Contains metrics related to data masking and event size.
  - **data_masking** (object) - Details about data masking.
    - **err_count** (integer) - Number of errors during data masking.
    - **info_types** (object) - Count of different info types masked.
      - **EMAIL_ADDRESS** (integer) - Count of masked email addresses.
    - **total_redact_count** (integer) - Total number of redactions.
    - **transformed_bytes** (integer) - Number of bytes transformed.
  - **event_size** (integer) - The size of the event.

### Request Example
```json
{
  "query": {
    "extension": "csv",
    "newline": 1,
    "event-time": 0,
    "events": "o,e"
  }
}
```

### Response Example (with extension query parameter)
```json
{
  "download_url": "http://127.0.0.1:8009/api/sessions/<id>/download?token=<token>&extension=csv&newline=1&event-time=0&events=o,e",
  "expire_at": "2024-07-25T15:56:35.317601Z"
}
```

### Response Example (without extension query parameter)
```json
{
  "event_stream": ["hello world"],
  "metrics": {
    "data_masking": {
      "err_count": 0,
      "info_types": {
        "EMAIL_ADDRESS": 1
      },
      "total_redact_count": 1,
      "transformed_bytes": 31
    },
    "event_size": 356
  }
}
```
```

--------------------------------

### Add Environment Variable to Helm Values

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Example of adding a new environment variable to the gateway Helm chart's values.yaml.

```yaml
config:
  # ... other config
  MY_VAR: "some_default_value"
```

--------------------------------

### Build Development CLI

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Builds the development CLI client. The output is placed in $HOME/.hoop/dev/hoop, which is friendly for plaintext editing.

```bash
make build-dev-client
```

--------------------------------

### Importing Icons with Lucide React

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLAUDE.md

Demonstrates how to import and use icons from the 'lucide-react' library. This is the exclusive icon library to be used in the project.

```jsx
import { TriangleAlert, Plus, Trash2 } from 'lucide-react'
```

--------------------------------

### Initial Review Group State

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/api-update-review.md

Represents the default state of a review group entry when a review is initially created. All groups start in a PENDING state.

```json
{
    "id": "aaa257be-5cc9-401d-ae7e-18ae806d366a",
    "group": "banking",
    "status": "PENDING",
    "reviewed_by": null,
    "review_date": null
}
```

--------------------------------

### Create New SQL Migration

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Creates a new SQL migration file with up and down scripts. Requires the golang migrate CLI.

```sh
migrate create -ext sql -dir rootfs/app/migrations -seq my_new_change
```

--------------------------------

### Run Hoop Gateway

Source: https://github.com/hoophq/hoop/blob/main/gateway/README.md

Execute the main gateway application using the Go run command. Ensure you are in the `cmd/gateway` directory.

```bash
go run main.go
```

--------------------------------

### Publish Release

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Publishes a new release to GitHub. This requires the GitHub CLI (gh) to be installed and authenticated. It automatically gathers commits since the last release.

```sh
make publish
```

--------------------------------

### Configure Gateway URL

Source: https://github.com/hoophq/hoop/blob/main/agentrs/README.md

Set the GATEWAY_URL environment variable to connect the agent to your gateway. Replace <gateway_url> with your actual gateway address.

```bash
export GATEWAY_URL=ws://<gateway_url>
```

--------------------------------

### View Hoop Configuration

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/Authentication.md

Display the raw configuration details of the Hoop CLI, including the access token. Use this to verify authentication status and token information.

```sh
hoop config view --raw
```

--------------------------------

### Build Docker Agent Tools Image

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Builds the agent tools Docker image for multiple platforms and pushes it to the registry. Requires Docker and Docker Buildx.

```sh
docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -f Dockerfile.tools \
  --tag hoophq/agent-tools:noble-20251013 \
  --push .
```

--------------------------------

### Importing Lucide Icons

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/COMPONENTS.md

Illustrates the standard way to import icons from the 'lucide-react' library for use in components.

```jsx
import { Trash2, Plus, Zap, TriangleAlert } from 'lucide-react'
```

--------------------------------

### Completed Review Group State

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/api-update-review.md

Shows the structure of a review group entry after it has been completed, including the final status, review timestamp, and reviewer information. This example shows a REJECTED state.

```json
{
    "id": "a546dfba-d917-4c2b-bc38-7852a7932573",
    "group": "banking",
    "status": "REJECTED",
    "reviewed_by": {
        "id": "17e4ff1a-104c-482c-be68-3c01bfc7028e",
        "name": "John Doe",
        "email": "john.doe@domain.tld",
        "slack_id": ""
    },
    "review_date": "2025-05-27T16:40:05.519754143Z"
}
```

--------------------------------

### Create New SQL Migration

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Use this command to create new SQL migration files. Ensure migration numbering is sequential and resolve conflicts by renaming if necessary.

```bash
migrate create -ext sql -dir rootfs/app/migrations -seq <description>
```

--------------------------------

### Session Event Stream with UTF-8

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/get-session-by-id.md

The `event_stream` attribute is rendered as a UTF-8 string when the request contains the `event_stream` query string with the value `utf8`. This example shows a basic string output.

```json
{
  (...)
  "event_stream": ["hello world"]
  (...)
}
```

--------------------------------

### Project Structure Overview

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLAUDE.md

Illustrates the directory structure for the Hoop WebApp V2 project, detailing the placement of components, features, stores, services, pages, and other modules.

```plaintext
src/
├── components/          # Presentational components (receive props, no business logic)
├── layout/              # App shell: Sidebar, Header, EmptyState
├── features/            # Complex features (e.g., CommandPalette)
├── stores/              # Zustand global stores (cross-route state)
├── services/            # Axios API calls (one file per domain)
├── hooks/               # Reusable custom hooks
├── utils/               # Pure utility functions
├── pages/               # Route-based pages (each route = folder)
│   ├── [Page]/
│   │   ├── index.jsx        # Page component
│   │   ├── components/      # Components scoped to this page
│   │   ├── store.js         # Local store (only if state is page-specific)
│   │   └── [SubPage]/
│   │       └── index.jsx
├── App.jsx              # Root component + providers
├── Router.jsx           # Route definitions
└── main.jsx             # Entry point
```

--------------------------------

### Get Session Download URL

Source: https://github.com/hoophq/hoop/blob/main/gateway/api/openapi/docs/get-session-by-id.md

When the `extension` query string is present, this endpoint returns a payload containing a link to download the session data. Ensure all required parameters are included in the URL.

```json
{
  "download_url": "http://127.0.0.1:8009/api/sessions/<id>/download?token=<token>&extension=csv&newline=1&event-time=0&events=o,e",
  "expire_at": "2024-07-25T15:56:35.317601Z"
}
```

--------------------------------

### Generate OpenAPI Documentation

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Generates API documentation using swag. This should be run every time the API changes.

```sh
make generate-openapi-docs
```

--------------------------------

### Lifecycle: component-did-mount to useEffect in React

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Maps the ClojureScript `component-did-mount` lifecycle event to the `useEffect` hook in React for executing side effects after the component mounts. The React example dispatches an agent fetch action.

```clojure
;; CLJS
{:component-did-mount #(rf/dispatch [:agents/fetch])}
```

--------------------------------

### Create Local Store

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/MIGRATION_CHECKLIST.md

Set up a Zustand store for local page state management, including data fetching logic.

```javascript
import { create } from 'zustand'
import { featureService } from '@/services/featureName'

export const useFeatureStore = create((set) => ({
  items: [],
  loading: false,
  error: null,

  fetchItems: async () => {
    set({ loading: true, error: null })
    try {
      const { data } = await featureService.list()
      set({ items: data, loading: false })
    } catch {
      set({ error: 'Failed to load items.', loading: false })
    }
  },
}))
```

--------------------------------

### UI Rendering: JSX with Mantine Components in React

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Presents the React equivalent of Hiccup using JSX and Mantine components for UI structure and styling. This example focuses on creating a similar layout and button functionality.

```jsx
// React — Mantine (no Tailwind, no className for layout)
<Stack gap="md">
  <Title order={3}>Agents</Title>
  <Button onClick={() => navigate('/agents/new')}>New Agent</Button>
</Stack>
```

--------------------------------

### UI Rendering: Hiccup Syntax to JSX in React

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Compares ClojureScript's Hiccup syntax for defining UI elements to JSX in React. The CLJS example uses nested vectors and maps for structure and attributes.

```clojure
;; CLJS — Hiccup syntax
[:div.flex.flex-col.gap-4
  [:h1.text-lg "Agents"]
  [:button {:on-click #(rf/dispatch [:modal/open :create-agent])} "New Agent"]]
```

--------------------------------

### Connect RDP Client to Dummy Gateway

Source: https://github.com/hoophq/hoop/blob/main/agentrs/README.md

Use this command to connect an RDP client to the dummy gateway. This will redirect RDP traffic through the agent proxy.

```bash
xfreerdp /u:fake /p:fake /v:localhost:3389
```

--------------------------------

### HTTP Calls: Re-frame http-xhrio Effect to Axios Service

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Illustrates migrating HTTP requests from a Re-frame `http-xhrio` effect to an Axios service in React. The CLJS example shows the effect configuration within an event handler.

```clojure
;; CLJS — http effect inside an event handler
{:http-xhrio {:method          :get
               :uri             "/api/agents"
               :response-format (ajax/json-response-format {:keywords? true})
               :on-success      [:agents/fetch-success]
               :on-failure      [:agents/fetch-failure]}}
```

--------------------------------

### Configure PostgreSQL Connection URI

Source: https://github.com/hoophq/hoop/blob/main/gateway/README.md

Set this environment variable to connect to your PostgreSQL database. Ensure to replace placeholders with your actual credentials. For development, disabling SSL is recommended for ease of use, but not for production.

```bash
export POSTGRES_DB_URI="postgres://user:password@host:port/dbname?sslmode=disable"
```

--------------------------------

### Source Environment Variables

Source: https://github.com/hoophq/hoop/blob/main/gateway/README.md

Before running the gateway, source the .env file to load your environment variables into the current terminal session.

```bash
source .env
```

--------------------------------

### Local Component State: Reagent Atom to useState

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Demonstrates mapping local component state management from a Reagent atom in ClojureScript to the `useState` hook in React. The CLJS example shows direct atom manipulation for input binding.

```clojure
;; CLJS
(let [name (r/atom "")
      loading? (r/atom false)]
  [:input {:value @name :on-change #(reset! name (-> % .-target .-value))}])
```

--------------------------------

### AI Agent Command With Hoop (Blocked Action)

Source: https://github.com/hoophq/hoop/blob/main/README.md

This demonstrates how Hoop.dev blocks a destructive SQL command from an AI agent using a guardrail, preventing data loss and notifying security.

```shell
> claude-code: DROP TABLE orders;
⛔ Blocked by guardrail: "Prevent destructive DDL in production"
Event logged. Security team notified.
```

--------------------------------

### Global State: Re-frame Dispatch to Zustand Action

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Compares triggering a global state write operation in Re-frame via dispatch to triggering an action in a Zustand store. The React example uses `useEffect` to trigger the action on component mount.

```javascript
// React — read from Zustand store
const { agents, fetchAgents } = useAgentStore()

// React — trigger action
useEffect(() => { fetchAgents() }, [])
```

--------------------------------

### Table Component Examples

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/COMPONENTS.md

A surface-style table component that re-exports Mantine's Table sub-components. It supports standard tables with headers and key-value tables where `Table.Th` is used for row labels. Styles include borders, subtle header backgrounds, and row separators.

```jsx
import Table from '@/components/Table'

// Standard table with column headers
<Table>
  <Table.Thead>
    <Table.Tr>
      <Table.Th>Name</Table.Th>
      <Table.Th>Status</Table.Th>
    </Table.Tr>
  </Table.Thead>
  <Table.Tbody>
    <Table.Tr>
      <Table.Td>agent-1</Table.Td>
      <Table.Td>Online</Table.Td>
    </Table.Tr>
  </Table.Tbody>
</Table>

// Key-value table (no thead — use Table.Th as row labels)
<Table>
  <Table.Tbody>
    <Table.Tr>
      <Table.Th w="30%">Hostname</Table.Th>
      <Table.Td>app.hoop.dev</Table.Td>
    </Table.Tr>
  </Table.Tbody>
</Table>
```

--------------------------------

### Hoop Project Architecture Diagram

Source: https://github.com/hoophq/hoop/blob/main/CLAUDE.md

Illustrates the communication flow between the Client (CLI), Gateway, and Agent using gRPC and HTTP protocols, with a PostgreSQL backend.

```text
┌────────┐  gRPC :8010   ┌─────────┐  gRPC :8010   ┌───────┐
│ Client │ ─────────────> │ Gateway │ <──────────── │ Agent │
│ (CLI)  │  Packet stream │  (API+  │  Packet stream│       │
└────────┘                │  gRPC)  │               └───────┘
                          │ :8009 HTTP/UI
                          └─────────┘
                               │
                          PostgreSQL
```

--------------------------------

### Build Development Webapp

Source: https://github.com/hoophq/hoop/blob/main/DEV.md

Builds the Webapp component for the gateway during development.

```sh
make build-dev-webapp
```

--------------------------------

### Build hsh-tunneld Daemon

Source: https://github.com/hoophq/hoop/blob/main/tunnel/README.md

Builds the hsh-tunneld binary for the host platform into the dist/ directory. Alternatively, use 'go build' for ad-hoc development.

```bash
make build-hsh-tunneld
```

```bash
go build -o /tmp/hsh-tunneld ./tunnel/cmd/hsh-tunneld
```

--------------------------------

### Run Vite Development Server Only

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/README.md

Use this command if the ClojureScript dev server is already running separately, or if you only need to work on React-specific routes.

```bash
npm run dev
```

--------------------------------

### Routing: Pushy Navigation and Route Params in CLJS

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Demonstrates navigation and accessing route parameters in ClojureScript using Pushy. `set-token!` is used for navigation, and route parameters are read from a Re-frame subscription.

```clojure
;; CLJS — Pushy navigate
(pushy/set-token! "/agents/new")

;; CLJS — read current route param
(:id (:route-params @(rf/subscribe [:route])))
```

--------------------------------

### Environment Variables for Development

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CONTEXT_MIGRATION.md

Optional environment variables for configuring development URLs. Vite provides default values, making a .env file unnecessary for basic development.

```bash
VITE_API_URL       Optional. Overrides the /api default base URL
VITE_GATEWAY_URL   Dev only. Backend proxy target (default: localhost:8009)
VITE_CLJS_URL      Dev only. shadow-cljs proxy target (default: localhost:8280)
```

--------------------------------

### Configure Hoop Gateway Values

Source: https://github.com/hoophq/hoop/blob/main/deploy/helm-chart/README.md

Define the minimal configuration for the Hoop gateway by creating a values.yaml file. Ensure to replace placeholders with your specific database and identity provider details.

```sh
cat - > ./values.yaml <<EOF
# gateway base configuration
config:
  POSTGRES_DB_URI: 'postgres://<user>:<pwd>@<db-host>:<port>/<dbname>'
  API_URL: 'https://hoopdev.yourdomain.tld'
  IDP_CLIENT_ID: 'client-id'
  IDP_CLIENT_SECRET: 'client-secret'
  IDP_ISSUER: 'https://idp-issuer-url'
EOF
```

--------------------------------

### Extending Mantine Components with `Component.extend()`

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLAUDE.md

Demonstrates how to define global defaults for a component using `Component.extend()` in its theme file, setting properties like `radius` and `fontWeight`.

```javascript
// src/components/NavLink/theme.js
export const NavLinkTheme = NavLink.extend({
  defaultProps: { radius: 'sm' },
  styles: { label: { fontWeight: '600' } },
})
```

--------------------------------

### Create Service File

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/MIGRATION_CHECKLIST.md

Define API methods for a feature in a new JavaScript service file.

```javascript
import api from './api'

export const featureService = {
  list: () => api.get('/feature-name'),
  get: (id) => api.get(`/feature-name/${id}`),
  create: (data) => api.post('/feature-name', data),
  update: (id, data) => api.put(`/feature-name/${id}`, data),
  delete: (id) => api.delete(`/feature-name/${id}`),
}
```

--------------------------------

### Auth/Permissions: Global State Access in CLJS

Source: https://github.com/hoophq/hoop/blob/main/webapp_v2/CLJS_PATTERNS.md

Illustrates reading authentication and permission states (e.g., admin status, license type) from the global Re-frame database in ClojureScript using subscriptions.

```clojure
;; CLJS — read from re-frame db
@(rf/subscribe [:user/is-admin?])
@(rf/subscribe [:user/is-free-license?])
```