∞ forever components

Claude Code

Permission mode

A three-position permission switch. Warm graphite and clay instrument palette.

cssmedium complexitysubtle motiondrag

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Illustrative local developer-tool controls.

When not to

Real Claude commands or persistent storage are needed.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Keep reviewed graphite/clay palette (clean-modern exception), state mutators, dt springs, theme hook, demo-v1 takeover, reduced motion, visibility guards and keyboard/touch controls. Synthetic data only.

Safe to edit

  • theme tokens
  • seed data and demo interval

Keep intact

  • namespace/IIFE and state mutators
  • theme, demo-v1 and motion guards

Known limitations

  • Local simulation; no Claude integration, persistence or physical-device verification.

claude-codedeveloper-toolsinteractiveinstrumentminimal

More Claude Code components

  • Context pressureSee remaining room before another task. Warm graphite and clay ledger; labeled Demo, versioned local host data.
  • Agent tasksFind work that needs attention. Warm graphite and clay ledger; labeled Demo, versioned local host data.
  • Permission reviewReview one pending tool request. Warm graphite and clay ledger; labeled Demo, versioned local host data.
  • Hunk reviewRecord a review without applying a patch. Warm graphite and clay ledger; labeled Demo, versioned local host data.
  • MCP healthInspect observed tool connections. Warm graphite and clay ledger; labeled Demo, versioned local host data.
  • Instruction mapRead project instructions and their scope. Warm graphite and clay ledger; labeled Demo, versioned local host data.