react tool use.jsx

import React, { useState, useEffect, useRef } from 'react';
import { 
  Play, 
  RotateCcw,
  Cpu,
  Terminal,
  Globe,
  User,
  Code2,
  ChevronRight
} from 'lucide-react';

const App = () => {
  const [step, setStep] = useState(0);
  const scrollContainerRef = useRef(null);
  const stepRefs = useRef([]);

  const participants = [
    { id: 'human', label: 'Software Engineer', icon: User },
    { id: 'harness', label: 'Software Harness', icon: Terminal },
    { id: 'llm', label: 'Claude 4.6 Opus', icon: Cpu },
    { id: 'env', label: 'External Env', icon: Globe },
  ];

  const steps = [
    {
      actor: 'human',
      target: 'harness',
      label: '1. User Request',
      detail: 'The developer starts the session with an intent.',
      code: '{\n  "role": "user",\n  "content": "Add unit tests for auth.ts and verify they pass."\n}',
      startIdx: 0, endIdx: 1
    },
    {
      actor: 'harness',
      target: 'llm',
      label: '2. Initial Call',
      detail: 'The harness calls Claude with the user prompt and tool definitions.',
      code: '{\n  "model": "claude-4-6-opus",\n  "tools": [...],\n  "messages": [\n    { "role": "user", "content": "Add unit tests for auth.ts..." }\n  ]\n}',
      startIdx: 1, endIdx: 2
    },
    {
      actor: 'llm',
      target: 'harness',
      label: '3. LLM: tool_use (read)',
      detail: 'Claude analyzes the request, thinks, and decides to read the file.',
      code: '{\n  "role": "assistant",\n  "content": [\n    {\n      "type": "thinking",\n      "text": "To add tests for auth.ts, I first need to see the implementation to understand the exported functions and their logic."\n    },\n    {\n      "type": "tool_use",\n      "id": "t1",\n      "name": "read_file",\n      "input": { "path": "auth.ts" }\n    }\n  ]\n}',
      startIdx: 2, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'env',
      label: '4. Execute: Read',
      detail: 'The harness performs the physical disk I/O.',
      code: 'CUSTOM_READ_EXEC',
      startIdx: 1, endIdx: 3
    },
    {
      actor: 'env',
      target: 'harness',
      label: '5. Observation: Read Result',
      detail: 'The external environment returns the file contents.',
      code: '// File content captured:\n"export const auth = (t) => verify(t);"',
      startIdx: 3, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'llm',
      label: '6. Forward Observation',
      detail: 'Harness appends the tool_result and calls Claude again.',
      code: '{\n  "messages": [\n    ...prev,\n    { \n      "role": "user", \n      "content": [\n        { "type": "tool_result", "tool_use_id": "t1", "content": "export const auth..." }\n      ] \n    }\n  ]\n}',
      startIdx: 1, endIdx: 2
    },
    {
      actor: 'llm',
      target: 'harness',
      label: '7. LLM: tool_use (write)',
      detail: 'Claude processes the file content, thinks through the test case, and writes the test.',
      code: '{\n  "role": "assistant",\n  "content": [\n    {\n      "type": "thinking",\n      "text": "The auth function takes a token. I should create a Vitest suite that checks both valid and empty tokens. I will write this to auth.test.ts."\n    },\n    {\n      "type": "tool_use",\n      "id": "t2",\n      "name": "write_file",\n      "input": { "path": "auth.test.ts", "content": "..." }\n    }\n  ]\n}',
      startIdx: 2, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'env',
      label: '8. Execute: Write',
      detail: 'The harness writes the new test file to disk.',
      code: 'CUSTOM_WRITE_EXEC',
      startIdx: 1, endIdx: 3
    },
    {
      actor: 'env',
      target: 'harness',
      label: '9. Observation: Write Result',
      detail: 'Environment confirms the write was successful.',
      code: '{\n  "status": "success",\n  "bytes_written": 452\n}',
      startIdx: 3, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'llm',
      label: '10. Forward Observation',
      detail: 'Harness informs Claude that the file was written.',
      code: '{\n  "messages": [\n    ...prev,\n    { "role": "user", "content": [{ "type": "tool_result", "tool_use_id": "t2", "content": "success" }] }\n  ]\n}',
      startIdx: 1, endIdx: 2
    },
    {
      actor: 'llm',
      target: 'harness',
      label: '11. LLM: tool_use (bash)',
      detail: 'Claude thinks about verification and decides to run the tests.',
      code: '{\n  "role": "assistant",\n  "content": [\n    {\n      "type": "thinking",\n      "text": "Now that the test file is written, I must execute it using npm test to ensure my implementation is correct."\n    },\n    {\n      "type": "tool_use",\n      "id": "t3",\n      "name": "run_bash",\n      "input": { "command": "npm test" }\n    }\n  ]\n}',
      startIdx: 2, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'env',
      label: '12. Execute: Bash',
      detail: 'The harness spawns a shell process.',
      code: 'CUSTOM_BASH_EXEC',
      startIdx: 1, endIdx: 3
    },
    {
      actor: 'env',
      target: 'harness',
      label: '13. Observation: Bash Result',
      detail: 'Terminal output is captured by the harness.',
      code: '"Test Suites: 1 passed, 1 total\\nTests: 5 passed, 5 total"',
      startIdx: 3, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'llm',
      label: '14. Final Call',
      detail: 'Harness provides the test results to Claude.',
      code: '{\n  "messages": [\n    ...prev,\n    { "role": "user", "content": [{ "type": "tool_result", "tool_use_id": "t3", "content": "..." }] }\n  ]\n}',
      startIdx: 1, endIdx: 2
    },
    {
      actor: 'llm',
      target: 'harness',
      label: '15. Final Response',
      detail: 'Claude sees the success, reflects on the journey, and generates a final text summary.',
      code: '{\n  "role": "assistant",\n  "content": [\n    {\n      "type": "thinking",\n      "text": "The tests passed successfully. I can now confirm to the user that auth.ts is fully covered and verified."\n    },\n    {\n      "type": "text",\n      "text": "I have created auth.test.ts and verified it passes with 5/5 tests."\n    }\n  ]\n}',
      startIdx: 2, endIdx: 1, type: 'dashed'
    },
    {
      actor: 'harness',
      target: 'human',
      label: '16. Delivery',
      detail: 'The harness returns the final answer to the user.',
      code: '// HTTP Response:\n{ "status": "done", "message": "..." }',
      startIdx: 1, endIdx: 0, type: 'dashed'
    }
  ];

  useEffect(() => {
    if (stepRefs.current[step]) {
      stepRefs.current[step].scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  }, [step]);

  const CodeHighlighter = ({ code }) => {
    if (code === 'CUSTOM_READ_EXEC') {
      return (
        <pre className="p-8 font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
          <div className="pl-6 -indent-6 mb-0.5" style={{ paddingLeft: '2rem', textIndent: '-1.5rem' }}>
            <span className="text-pink-400 font-bold">const</span> <span className="text-slate-200">content</span> <span className="text-slate-500">=</span> <span className="text-pink-400 font-bold">await</span> <span className="text-slate-200">fs</span><span className="text-slate-500">.</span><span className="text-sky-400">readFile</span><span className="text-slate-500">(</span><span className="text-emerald-400">"auth.ts"</span><span className="text-slate-500">)</span><span className="text-slate-500">;</span>
          </div>
          <div className="pl-6 -indent-6 mb-0.5" style={{ paddingLeft: '2rem', textIndent: '-1.5rem' }}>
            <span className="text-slate-500 italic">// The harness captures the file as a raw string for the next turn.</span>
          </div>
        </pre>
      );
    }
    if (code === 'CUSTOM_WRITE_EXEC') {
      return (
        <pre className="p-8 font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
          <div className="pl-6 -indent-6 mb-0.5" style={{ paddingLeft: '2rem', textIndent: '-1.5rem' }}>
            <span className="text-pink-400 font-bold">const</span> <span className="text-slate-200">res</span> <span className="text-slate-500">=</span> <span className="text-pink-400 font-bold">await</span> <span className="text-slate-200">fs</span><span className="text-slate-500">.</span><span className="text-sky-400">writeFile</span><span className="text-slate-500">(</span><span className="text-emerald-400">"auth.test.ts"</span><span className="text-slate-500">,</span> <span className="text-slate-200">code</span><span className="text-slate-500">)</span><span className="text-slate-500">;</span>
          </div>
        </pre>
      );
    }
    if (code === 'CUSTOM_BASH_EXEC') {
      return (
        <pre className="p-8 font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
          <div className="pl-6 -indent-6 mb-0.5" style={{ paddingLeft: '2rem', textIndent: '-1.5rem' }}>
            <span className="text-pink-400 font-bold">const</span> <span className="text-slate-200">output</span> <span className="text-slate-500">=</span> <span className="text-pink-400 font-bold">await</span> <span className="text-slate-200">exec</span><span className="text-slate-500">(</span><span className="text-emerald-400">"npm test"</span><span className="text-slate-500">)</span><span className="text-slate-500">;</span>
          </div>
        </pre>
      );
    }

    const lines = code.split('\n');
    const keywords = ['const', 'await', 'function', 'return', 'import', 'export', 'from'];
    
    return (
      <pre className="p-8 font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
        {lines.map((line, lineIdx) => {
          const tokens = line.split(/(".*?"|'.*?'|\/\/.*|[\{\}\[\]\(\)\:,]|\d+|true|false|null|\b(?:const|await|function|return|import|export|from)\b)/g);
          
          return (
            <div 
              key={lineIdx} 
              className="pl-6 -indent-6 mb-0.5" 
              style={{ paddingLeft: '2rem', textIndent: '-1.5rem' }}
            >
              {tokens.map((token, i) => {
                if (!token) return null;
                
                if (token.startsWith('//')) {
                  return <span key={i} className="text-slate-500 italic">{token}</span>;
                }
                
                if (keywords.includes(token)) {
                  return <span key={i} className="text-pink-400 font-bold">{token}</span>;
                }

                if (token.startsWith('"') || token.startsWith("'")) {
                  const remainingLine = tokens.slice(i + 1).join('');
                  if (/^\s*:/.test(remainingLine)) {
                    return <span key={i} className="text-sky-400 font-medium">{token}</span>;
                  }
                  return <span key={i} className="text-emerald-400">{token}</span>;
                }
                
                if (/^\d+$/.test(token) || ['true', 'false', 'null'].includes(token)) {
                  return <span key={i} className="text-orange-400">{token}</span>;
                }
                
                if (/[\{\}\[\]\(\)\:,]/.test(token)) {
                  return <span key={i} className="text-slate-500">{token}</span>;
                }
                
                return <span key={i} className="text-slate-200">{token}</span>;
              })}
            </div>
          );
        })}
      </pre>
    );
  };

  const ParticipantHeader = ({ icon: Icon, label }) => (
    <div className="flex flex-col items-center w-1/4 pt-8 pb-6 bg-[#fafaf9]/95 backdrop-blur-sm">
      <div className="w-12 h-12 bg-white border-2 border-slate-900 rounded flex items-center justify-center mb-2 shadow-[3px_3px_0px_0px_rgba(15,23,42,1)]">
        <Icon size={20} className="text-slate-900" />
      </div>
      <span className="font-bold text-slate-900 uppercase tracking-tighter text-[10px] text-center px-1 leading-tight">{label}</span>
    </div>
  );

  const MessageArrow = ({ active, label, startIdx, endIdx, type = 'solid' }) => {
    const x1 = `${(startIdx * 25 + 12.5)}%`;
    const x2 = `${(endIdx * 25 + 12.5)}%`;
    const color = active ? '#22543d' : '#888888';
    
    return (
      <div className={`absolute inset-0 transition-opacity duration-300`}>
        <svg className="w-full h-full overflow-visible">
          <line
            x1={x1}
            y1="56"
            x2={x2}
            y2="56"
            stroke={color}
            strokeWidth="2"
            strokeDasharray={type === 'dashed' ? '8,6' : 'none'}
            markerEnd={`url(#arrowhead-${active ? 'active' : 'inactive'})`}
          />
        </svg>
        <div 
          className="absolute top-[64px] left-0 w-full flex justify-center pointer-events-none"
          style={{ 
            left: x1,
            width: `${Math.abs(endIdx - startIdx) * 25}%`,
            transform: endIdx < startIdx ? 'translateX(-100%)' : 'none'
          }}
        >
          <div className={`text-[9px] font-mono font-bold whitespace-nowrap px-2 py-0.5 transition-all duration-300 ${active ? 'bg-emerald-100 text-[#22543d] rounded-sm ring-1 ring-[#22543d]/10 shadow-sm' : 'text-[#888888]'}`}>
            {label}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="h-screen bg-[#fafaf9] text-[#1a1a1a] flex font-sans overflow-hidden">
      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>

      <svg className="absolute w-0 h-0 pointer-events-none">
        <defs>
          <marker id="arrowhead-active" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" fill="#22543d" />
          </marker>
          <marker id="arrowhead-inactive" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" fill="#888888" />
          </marker>
        </defs>
      </svg>
      
      <div className="flex-[2] relative flex flex-col border-r border-slate-200 h-full overflow-hidden">
        <div className="sticky top-0 w-full flex px-4 z-40 border-b border-slate-200 bg-[#fafaf9]">
          {participants.map(p => (
            <div key={p.id} className="flex flex-col items-center w-1/4 pt-8 pb-6">
              <div className="w-12 h-12 bg-white border-2 border-slate-900 rounded flex items-center justify-center mb-2 shadow-[3px_3px_0px_0px_rgba(15,23,42,1)]">
                <p.icon size={20} className="text-slate-900" />
              </div>
              <span className="font-bold text-slate-900 uppercase tracking-tighter text-[10px] text-center px-1 leading-tight">{p.label}</span>
            </div>
          ))}
        </div>

        <div ref={scrollContainerRef} className="flex-1 overflow-y-auto no-scrollbar scroll-smooth relative z-10">
          <div className="absolute top-0 left-0 w-full h-[3000px] flex px-4 pointer-events-none">
            {[0, 1, 2, 3].map(i => (
              <div key={i} className="w-1/4 flex justify-center h-full">
                <div className="w-px h-full border-l border-dashed border-[#888888]"></div>
              </div>
            ))}
          </div>

          <div className="relative w-full pt-16 pb-[60vh]">
            {steps.map((s, i) => (
              <div key={i} ref={el => stepRefs.current[i] = el} className="relative h-28 w-full">
                <MessageArrow active={step === i} label={s.label} startIdx={s.startIdx} endIdx={s.endIdx} type={s.type} />
              </div>
            ))}
          </div>
        </div>
      </div>

      <aside className="flex-1 flex flex-col bg-white overflow-hidden shadow-[-4px_0_20px_rgba(0,0,0,0.02)]">
        <div className="p-8 border-b border-slate-100 shrink-0">
          <div className="inline-block px-2 py-0.5 bg-emerald-100 text-[#22543d] text-[9px] font-black rounded uppercase tracking-widest mb-3">
            Step {step + 1} / {steps.length}
          </div>
          <h1 className="text-2xl font-black tracking-tighter text-slate-900 uppercase leading-none mb-2 italic">
            {steps[step].label.split('. ')[1]}
          </h1>
          <p className="text-sm text-slate-500 font-medium leading-relaxed">
            {steps[step].detail}
          </p>
        </div>

        <div className="flex-1 flex flex-col min-h-0">
          <div className="px-8 py-4 border-b border-slate-100 flex items-center gap-2 shrink-0">
            <Code2 size={14} className="text-[#22543d]" />
            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Message</span>
          </div>
          <div className="flex-1 bg-slate-900 overflow-auto custom-scrollbar">
            <CodeHighlighter code={steps[step].code} />
          </div>
        </div>

        <div className="p-8 border-t border-slate-100 bg-white shrink-0">
          <div className="flex gap-3">
            <button 
              onClick={() => setStep(s => Math.max(0, s - 1))}
              className="p-3 bg-slate-50 border border-slate-200 hover:bg-slate-100 rounded-lg transition-colors text-slate-500"
              title="Back"
            >
              <RotateCcw size={18} />
            </button>
            <button 
              onClick={() => setStep(s => (s + 1) % steps.length)}
              className="flex-1 flex items-center justify-center gap-2 bg-[#22543d] text-white px-4 py-3 rounded-lg font-black text-xs uppercase tracking-widest shadow-[4px_4px_0_0_rgba(34,84,61,0.2)] hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all"
            >
              {step === steps.length - 1 ? 'End' : 'Next'} <ChevronRight size={14} />
            </button>
          </div>
        </div>
      </aside>
    </div>
  );
};

export default App;