import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Terminal, Brain, FileCode, Cpu, Layers, Database, Sparkles, MessageSquare } from 'lucide-react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = '#0f172a'; // Slate 900 const CLAUDE_COLOR = '#D97757'; // Signature Orange/Terra-cotta const LLM_COLOR = '#8B5CF6'; // Violet/Purple const USER_COLOR = '#94A3B8'; // Slate 400 const FILE_COLOR = '#10B981'; // Emerald const NODE_RADIUS = 50; const PARTICLE_SPEED = 0.015; const CYCLE_DURATION = 900; // Frames for one full interaction loop // ----------------------------------------------------------------------------- // Helper: Math & Geometry // ----------------------------------------------------------------------------- const lerp = (a, b, t) => a + (b - a) * t; // Cubic Bezier point calculation const getBezierPoint = (p0, p1, p2, p3, t) => { const cx = 3 * (p1.x - p0.x); const bx = 3 * (p2.x - p1.x) - cx; const ax = p3.x - p0.x - cx - bx; const cy = 3 * (p1.y - p0.y); const by = 3 * (p2.y - p1.y) - cy; const ay = p3.y - p0.y - cy - by; const x = (ax * (t ** 3)) + (bx * (t ** 2)) + (cx * t) + p0.x; const y = (ay * (t ** 3)) + (by * (t ** 2)) + (cy * t) + p0.y; return { x, y }; }; // ----------------------------------------------------------------------------- // Component: Interaction Flow // ----------------------------------------------------------------------------- export default function ClaudeCodeInteraction() { // --------------------------------------------------------------------------- // State & Refs // --------------------------------------------------------------------------- // We use a ref for the frame counter to avoid re-renders on every tick for logic // We use a state 'tick' to force render when needed for smooth animation const frameRef = useRef(0); const [tick, setTick] = useState(0); // Animation Phase State (derived from frame) // 0: Idle/Start // 1: User Input -> Claude Code // 2: Claude Code -> File System (Context Gathering) // 3: File System -> Claude Code (Read) // 4: Claude Code -> LLM (Prompting) // 5: LLM Processing (Thinking) // 6: LLM -> Claude Code (Response) // 7: Claude Code -> File System (Write/Action) & User (Output) const phaseRef = useRef(0); // Particles: { id, path: [p0, p1, p2, p3], t: 0..1, color, type } const particlesRef = useRef([]); // Terminal Text State const [terminalLines, setTerminalLines] = useState(["> Initializing env..."]); // --------------------------------------------------------------------------- // Layout Definitions (Static) // --------------------------------------------------------------------------- const positions = useMemo(() => ({ user: { x: 150, y: 350, label: 'Developer' }, claude: { x: 600, y: 350, label: 'Claude Code (Agent)' }, llm: { x: 1050, y: 350, label: 'LLM API (Model)' }, files: { x: 600, y: 600, label: 'File System' }, }), []); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- useEffect(() => { let animationFrameId; const loop = () => { frameRef.current++; const currentFrame = frameRef.current % CYCLE_DURATION; // --- Phase Logic --- let nextPhase = 0; if (currentFrame < 100) nextPhase = 1; // User input else if (currentFrame < 200) nextPhase = 2; // Scan files else if (currentFrame < 300) nextPhase = 3; // Read files else if (currentFrame < 450) nextPhase = 4; // Send to LLM else if (currentFrame < 600) nextPhase = 5; // Thinking else if (currentFrame < 700) nextPhase = 6; // Response else if (currentFrame < 850) nextPhase = 7; // Execute/Reply else nextPhase = 0; // Reset buffer // Detect Phase Change for "Events" if (phaseRef.current !== nextPhase) { handlePhaseChange(nextPhase, frameRef.current); phaseRef.current = nextPhase; } // --- Particle Spawning --- spawnParticles(nextPhase, currentFrame); // --- Particle Movement --- updateParticles(); // Trigger Render setTick(prev => prev + 1); animationFrameId = requestAnimationFrame(loop); }; animationFrameId = requestAnimationFrame(loop); return () => cancelAnimationFrame(animationFrameId); }, [positions]); // --------------------------------------------------------------------------- // Logic Handlers // --------------------------------------------------------------------------- const handlePhaseChange = (phase, frame) => { // Update Terminal Text based on phase switch (phase) { case 1: setTerminalLines(prev => [...prev.slice(-4), "> git commit -m 'fix'"]); break; case 2: setTerminalLines(prev => [...prev.slice(-4), "Analyzing context..."]); break; case 4: setTerminalLines(prev => [...prev.slice(-4), "Sending prompt..."]); break; case 6: setTerminalLines(prev => [...prev.slice(-4), "Received solution."]); break; case 7: setTerminalLines(prev => [...prev.slice(-4), "> Applying changes..."]); break; default: break; } }; const spawnParticles = (phase, frame) => { // Limit spawn rate if (frame % 5 !== 0) return; const { user, claude, llm, files } = positions; const createParticle = (start, end, color, type) => { // Calculate control points for curve const dx = end.x - start.x; const dy = end.y - start.y; const p1 = { x: start.x + dx * 0.5, y: start.y }; // Horizontal bias const p2 = { x: end.x - dx * 0.5, y: end.y }; // Vertical bias for file system if (type === 'fs') { p1.x = start.x; p1.y = start.y + dy * 0.5; p2.x = end.x; p2.y = end.y - dy * 0.5; } particlesRef.current.push({ id: Math.random(), p0: start, p1, p2, p3: end, t: 0, color, type }); }; // Phase 1: User -> Claude if (phase === 1 && Math.random() > 0.5) { createParticle(user, claude, USER_COLOR, 'req'); } // Phase 2: Claude -> Files (Scan) if (phase === 2 && Math.random() > 0.3) { createParticle(claude, files, CLAUDE_COLOR, 'fs'); } // Phase 3: Files -> Claude (Read) if (phase === 3 && Math.random() > 0.3) { createParticle(files, claude, FILE_COLOR, 'fs'); } // Phase 4: Claude -> LLM (Prompt) if (phase === 4 && Math.random() > 0.2) { createParticle(claude, llm, CLAUDE_COLOR, 'prompt'); } // Phase 6: LLM -> Claude (Response) if (phase === 6 && Math.random() > 0.2) { createParticle(llm, claude, LLM_COLOR, 'response'); } // Phase 7: Claude -> Files (Write) & Claude -> User (Done) if (phase === 7) { if (Math.random() > 0.5) createParticle(claude, files, CLAUDE_COLOR, 'fs'); if (Math.random() > 0.7) createParticle(claude, user, CLAUDE_COLOR, 'req'); } }; const updateParticles = () => { // Move particles particlesRef.current.forEach(p => { p.t += PARTICLE_SPEED; }); // Remove finished particles particlesRef.current = particlesRef.current.filter(p => p.t < 1); }; // --------------------------------------------------------------------------- // Visual Components (Internal) // --------------------------------------------------------------------------- // Calculate Connection Paths const getPathD = (pStart, pEnd, vertical = false) => { const dx = pEnd.x - pStart.x; const dy = pEnd.y - pStart.y; if (vertical) { return `M ${pStart.x} ${pStart.y} C ${pStart.x} ${pStart.y + dy * 0.5}, ${pEnd.x} ${pEnd.y - dy * 0.5}, ${pEnd.x} ${pEnd.y}`; } return `M ${pStart.x} ${pStart.y} C ${pStart.x + dx * 0.5} ${pStart.y}, ${pEnd.x - dx * 0.5} ${pEnd.y}, ${pEnd.x} ${pEnd.y}`; }; // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- return (

{/* Title / Header */}

Agentic Workflow

Claude Code & LLM Orchestration

); }