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
