/ Components / AI Agent Workspace

AI Agent Workspace

Bento

Animated bento grid showcasing an AI agent workspace — pipeline visualiser, token monitor with bar chart, stacked activity feed, knowledge-base retrieval log, and tool inspector.

bentogridaianimationagentdashboard

Open preview

Live Preview

AI Generation Prompt

Create a Svelte 5 (runes) animated bento grid called AI Agent Workspace with 5 cards arranged 3-column on desktop (Card4 spans 2 cols). Card 1 — Agent Pipeline: SVG with 5 coloured foreign-object nodes (REQUEST/cyan, AGENT/violet, MEMORY/fuchsia, TOOLS/emerald, Router/amber dot). Paths are drawn with stroke-dashoffset animation triggered by {#key} remount every 2 s as the step cycles through request→router→agent→memory→tools→response. Card 2 — Token Monitor: Two 'slide-up' stat cards with a hatched shadow card behind each, sliding on hover or auto-cycle. Below, a 7-bar chart with per-bar CSS custom-property @keyframes (--bh0..bh3) at different durations. Card 3 — Activity Feed: Stacked carousel of 5 log entries cycling every 2.4 s. Cards translate via getSlot() offset → Y_SLOTS map with a spring cubic-bezier transition. Status icons: Check/Loader2/Clock/Minus with colour badges. Card 4 — Knowledge Base: Left side shows 4 namespace bars (codebase/docs/slack/notion) with animated fill, scan-beam shimmer on the active bar, and a live pulse ring. Right side shows a 4-entry retrieval log with decreasing opacity, cycling every 2 s. Card 5 — Tool Inspector: 2×2 grid of tool cards (web_search/code_exec/file_read/vector_query) with progress bars that animate from 0 to target width on mount via requestAnimationFrame. All intervals are cleaned up in $effect return functions. Keyframe names are prefixed erp-* to avoid collisions. erp-bar-cycle and erp-draw-path are declared :global because they're referenced in inline style attributes.

<script lang="ts">
	import MessageCircleIcon from '@lucide/svelte/icons/message-circle';
	import BrainIcon from '@lucide/svelte/icons/brain';
	import DatabaseIcon from '@lucide/svelte/icons/database';
	import TerminalIcon from '@lucide/svelte/icons/terminal';
	import CodeIcon from '@lucide/svelte/icons/code';
	import FileTextIcon from '@lucide/svelte/icons/file-text';
	import SlackIcon from '@lucide/svelte/icons/slack';
	import BookOpenIcon from '@lucide/svelte/icons/book-open';
	import CheckIcon from '@lucide/svelte/icons/check';
	import Loader2Icon from '@lucide/svelte/icons/loader-2';
	import ClockIcon from '@lucide/svelte/icons/clock';
	import MinusIcon from '@lucide/svelte/icons/minus';
	import GlobeIcon from '@lucide/svelte/icons/globe';

	type Props = { content?: { heading?: string; subtext?: string } };
	let { content = {} }: Props = $props();

	// See full source at src/lib/components/sections/fns_sections/ERPWorkflow.svelte
</script>