Components

Agent Tool Access Map

A node map where each agent sits in the center with rays to the tools it can call, plus a left rail of denied tools and drill-ins that open terminal call history with Replay. Worth stealing for the way access, latency and status live on the same graph.

Industries
Colors
Styles
Category

View original

REFERENCE
- Gallery page: https://magpui.com/en/i/agent-tool-access-map-6f3345
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-tool-access-map-6f3345/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-tool-access-map-6f3345/clip.mp4
- Original post: https://x.com/flohoeller/status/2118057282915176655 by @flohoeller
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

BUILD: Build a "Tool access" map component for a multi-agent product. Across the top, tabs switch between agents (Researcher, Coder, Writer, Analyst) with small status dots. The active agent is a rounded card in the center of a canvas, showing model name, a status pill (Running / Needs you / Idle) and a one-line task. Soft bezier edges connect it to tool chips on the right (Web search, Notion, Slack, HubSpot) that show call count and last latency. A left rail lists other tools (GitHub, Terminal, Stripe, Figma, Database) with access states: No access, Failed (red), or N× calls. Clicking a connected tool expands a detail panel: for Terminal, a call list with success/fail icons, JSON INPUT/OUTPUT panes, Edit input and Replay. Support light and dark themes.

DESIGN SYSTEM: 12-column flex layout, ~1200px wide content. Sans UI type: 13–14px body, 16–18px agent title, 11–12px meta. Light: bg #F7F7F5, cards #FFFFFF, ink #111111, muted #6B6B6B, border #E6E6E2, accent blue #2F6BFF, warn orange #E58A2E, fail #E5484D. Dark: bg #0E0F12, cards #17181C, ink #F3F3F1, muted #9A9A96, border #2A2B30. Radii 12–16px on cards, 999px on pills. Soft 0 8px 24px rgba(0,0,0,0.06) shadows. Spacing 8/12/16/24.

MOTION: Tab change crossfades the graph in 220ms cubic-bezier(0.22,1,0.36,1). Agent card status pill color springs 300ms. Edge paths draw with stroke-dashoffset 400ms on mount, staggered 40ms per edge. Tool chip hover lifts 2px / 150ms. Detail panel expands with height + opacity 280ms. Replay button presses scale 0.97 / 100ms.

SECTIONS: (1) Header with back chevron, title Tool access, agent tabs, tools/calls counters. (2) Left access rail. (3) Center agent node + edges. (4) Right connected-tool list. (5) Expanded tool detail (terminal history / empty state "hasn't called it yet").

IMPLEMENTATION: React + Tailwind + Motion for layout/springs; SVG or canvas for the bezier edges (measure node rects, redraw on resize). Keep tool data in a typed model (agentId, tools[{id,access,calls,lastMs}]). prefers-reduced-motion: no edge draw, instant panel swap. Keyboard: tablist for agents, focus rings 2px accent, Escape closes detail. Cap devicePixelRatio at 2; virtualize call history over 50 rows.

ADAPT TO THE PROJECT: Reuse the project's design tokens, buttons and fonts; map colors to the closest tokens; never copy logos, brand names, photos or illustrations from the original — use placeholders for tool icons and agent names.

SUCCESS CHECK:
- Switching agent tabs remaps edges and counters without layout jump
- Terminal detail shows INPUT/OUTPUT and a working Replay control
- Light and dark themes both keep readable contrast on status pills

1
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
animations
```
npx skills add https://github.com/mthines/agent-skills --skill animations
```
emil-design-eng
```
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng
```
2
Paste the prompt in your agent
Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Claude Code

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Paste the prompt in your agent

Compare with the original