style: apply prettier formatting

Auto-format all source files with Prettier. Isolated in its own
commit so git blame stays clean.

Author: jonwiggins

README.md

@@ -7,23 +7,27 @@ An interactive educational webapp that visualizes how [Claude Code](https://gith
 ## Features
 
 ### Interactive Visualizer
+
 - **Scenario-based learning**: Walk through real-world scenarios like file reads, multi-tool tasks, permission denials, and subagent delegation
 - **Step-by-step playback**: Use playback controls to step forward/backward through each execution step
 - **Live flowchart**: Watch the algorithm flow animate as you step through scenarios
 - **Detailed inspection**: Click any node to see payload data, tool inputs/outputs, and hook configurations
 
 ### Algorithm Overview
+
 - **Complete reference diagram**: See the entire Claude Code algorithm as an interactive flowchart
 - **20 algorithm nodes** covering session lifecycle, context management, agentic loop, tool execution, hooks, subagents, and output
 - **Click for details**: Each node shows detailed explanations and code examples
 
 ### Comprehensive Documentation
+
 - **Learn tab**: ~15 minute read covering all aspects of the algorithm
 - **ASCII diagrams**: Visual explanations of data flow
 - **Pseudocode**: Understand the logic without implementation details
 - **Real code examples**: JSON configurations and TypeScript snippets
 
 ### Sandbox Configuration
+
 - **Permission modes**: Toggle between default, acceptEdits, plan, and more
 - **Permission rules**: See how deny/ask/allow rules affect execution
 - **Hook configuration**: Understand how hooks intercept and modify behavior

eslint.config.js

@@ -1,10 +1,10 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import eslintConfigPrettier from 'eslint-config-prettier'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import { defineConfig, globalIgnores } from 'eslint/config';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -22,4 +22,4 @@ export default defineConfig([
     },
   },
   eslintConfigPrettier,
-])
+]);

index.html

@@ -5,23 +5,35 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Claude Code Algorithm Visualizer</title>
-    <meta name="description" content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code." />
+    <meta
+      name="description"
+      content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code."
+    />
 
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Claude Code Algorithm Visualizer" />
-    <meta property="og:description" content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code." />
+    <meta
+      property="og:description"
+      content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code."
+    />
     <meta property="og:url" content="https://github.com/jonwiggins/claude-code-visualizer" />
     <meta property="og:image" content="/og-image.png" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Claude Code Algorithm Visualizer" />
-    <meta name="twitter:description" content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code." />
+    <meta
+      name="twitter:description"
+      content="Interactive visualization of how Claude Code's agentic loop works. Explore flowcharts, step through scenarios, and learn the algorithm behind Claude Code."
+    />
     <meta name="twitter:image" content="/og-image.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

src/App.tsx

@@ -25,7 +25,7 @@ function App() {
                     'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
                     isActive
                       ? 'bg-[#1f6feb]/20 text-[#58a6ff]'
-                      : 'text-[#8b949e] hover:text-[#c9d1d9] hover:bg-[#1f2428]'
+                      : 'text-[#8b949e] hover:text-[#c9d1d9] hover:bg-[#1f2428]',
                   )
                 }
               >
@@ -39,7 +39,7 @@ function App() {
                     'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
                     isActive
                       ? 'bg-[#1f6feb]/20 text-[#58a6ff]'
-                      : 'text-[#8b949e] hover:text-[#c9d1d9] hover:bg-[#1f2428]'
+                      : 'text-[#8b949e] hover:text-[#c9d1d9] hover:bg-[#1f2428]',
                   )
                 }
               >

src/components/AlgorithmOverview.tsx

@@ -9,7 +9,12 @@ import {
 } from '@xyflow/react';
 import Dagre from '@dagrejs/dagre';
 import '@xyflow/react/dist/style.css';
-import { overviewNodes, overviewEdges, categoryColors, type OverviewNode } from '../algorithmOverview';
+import {
+  overviewNodes,
+  overviewEdges,
+  categoryColors,
+  type OverviewNode,
+} from '../algorithmOverview';
 import { CodeBlock } from './CodeBlock';
 import { BookOpen, X } from 'lucide-react';
 import clsx from 'clsx';
@@ -19,16 +24,23 @@ const NODE_WIDTH = 160;
 const NODE_HEIGHT = 50;
 
 // Custom node component for overview
-function OverviewFlowNode({ data, selected }: { data: Record<string, unknown>; selected: boolean }) {
-  const colorClass = categoryColors[data.category as OverviewNode['category']] || 'border-gray-500 bg-gray-500/10';
+function OverviewFlowNode({
+  data,
+  selected,
+}: {
+  data: Record<string, unknown>;
+  selected: boolean;
+}) {
+  const colorClass =
+    categoryColors[data.category as OverviewNode['category']] || 'border-gray-500 bg-gray-500/10';
 
   return (
     <div
       className={clsx(
         'px-3 py-2 rounded-lg border-2 text-center transition-all duration-200 cursor-pointer',
         colorClass,
         selected && 'ring-2 ring-[#58a6ff] ring-offset-2 ring-offset-[#0d1117]',
-        !selected && 'hover:ring-1 hover:ring-[#58a6ff]/50'
+        !selected && 'hover:ring-1 hover:ring-[#58a6ff]/50',
       )}
       style={{ minWidth: NODE_WIDTH, maxWidth: NODE_WIDTH }}
     >
@@ -139,12 +151,7 @@ export function AlgorithmOverview() {
           }}
           proOptions={{ hideAttribution: true }}
         >
-          <Background
-            variant={BackgroundVariant.Dots}
-            gap={16}
-            size={1}
-            color="#30363d"
-          />
+          <Background variant={BackgroundVariant.Dots} gap={16} size={1} color="#30363d" />
           <Controls
             showInteractive={false}
             className="!bg-[#161b22] !border-[#30363d] !rounded [&>button]:!bg-[#161b22] [&>button]:!border-[#30363d] [&>button]:!text-[#c9d1d9] [&>button]:!w-6 [&>button]:!h-6 [&>button:hover]:!bg-[#30363d]"
@@ -167,7 +174,7 @@ export function AlgorithmOverview() {
                     selectedNode.category === 'tool' && 'bg-orange-500/20 text-orange-400',
                     selectedNode.category === 'hook' && 'bg-purple-500/20 text-purple-400',
                     selectedNode.category === 'subagent' && 'bg-cyan-500/20 text-cyan-400',
-                    selectedNode.category === 'output' && 'bg-emerald-500/20 text-emerald-400'
+                    selectedNode.category === 'output' && 'bg-emerald-500/20 text-emerald-400',
                   )}
                 >
                   {selectedNode.category}
@@ -199,9 +206,7 @@ export function AlgorithmOverview() {
             )}
           </div>
         ) : (
-          <div className="p-4 text-center text-sm text-[#8b949e]">
-            Click a node to see details
-          </div>
+          <div className="p-4 text-center text-sm text-[#8b949e]">Click a node to see details</div>
         )}
       </div>
 
@@ -219,7 +224,7 @@ export function AlgorithmOverview() {
             <div
               className={clsx(
                 'w-2 h-2 rounded-sm border',
-                categoryColors[category as OverviewNode['category']]
+                categoryColors[category as OverviewNode['category']],
               )}
             />
             <span className="text-[10px] text-[#8b949e]">{label}</span>

src/components/DetailPanel.tsx

@@ -20,9 +20,7 @@ export function DetailPanel() {
   if (!step) {
     return (
       <div className="bg-[#161b22] border border-[#30363d] rounded-lg p-4">
-        <div className="text-center text-sm text-[#8b949e]">
-          Node not yet executed
-        </div>
+        <div className="text-center text-sm text-[#8b949e]">Node not yet executed</div>
       </div>
     );
   }

src/components/ExecutionLog.tsx

@@ -27,7 +27,7 @@ export function ExecutionLog() {
                 onClick={() => selectNode(step.nodeId)}
                 className={clsx(
                   'w-full p-3 text-left hover:bg-[#1f2428] transition-colors',
-                  index === currentStep && 'bg-[#1f2428]'
+                  index === currentStep && 'bg-[#1f2428]',
                 )}
               >
                 <div className="flex items-center gap-2 mb-1">
@@ -37,7 +37,7 @@ export function ExecutionLog() {
                   <span
                     className={clsx(
                       'w-2 h-2 rounded-full',
-                      index === currentStep ? 'bg-green-500' : 'bg-[#30363d]'
+                      index === currentStep ? 'bg-green-500' : 'bg-[#30363d]',
                     )}
                   />
                 </div>

src/components/FlowCanvas.tsx

@@ -34,7 +34,7 @@ interface LayoutOptions {
 function getLayoutedElements(
   nodes: Node[],
   edges: Edge[],
-  options: LayoutOptions = { direction: 'TB', nodesep: 60, ranksep: 80 }
+  options: LayoutOptions = { direction: 'TB', nodesep: 60, ranksep: 80 },
 ) {
   const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
 
@@ -53,7 +53,12 @@ function getLayoutedElements(
   });
 
   // Add edges to the graph (skip loop-back edges for layout calculation to reduce tangles)
-  const loopBackEdges = new Set(['response-user-input', 'hook-stop-model-inference', 'compaction-model-inference', 'context-check-model-inference']);
+  const loopBackEdges = new Set([
+    'response-user-input',
+    'hook-stop-model-inference',
+    'compaction-model-inference',
+    'context-check-model-inference',
+  ]);
 
   edges.forEach((edge) => {
     const edgeId = `${edge.source}-${edge.target}`;
@@ -82,7 +87,8 @@ function getLayoutedElements(
 }
 
 export function FlowCanvas() {
-  const { executionLog, currentStep, selectedNodeId, selectNode, currentScenario } = useVisualizerStore();
+  const { executionLog, currentStep, selectedNodeId, selectNode, currentScenario } =
+    useVisualizerStore();
 
   const isOverview = currentScenario?.id === 'algorithm-overview';
 
@@ -95,12 +101,7 @@ export function FlowCanvas() {
     const nodeMap = new Map<string, Node>();
 
     executionLog.forEach((step, index) => {
-      const status =
-        index < currentStep
-          ? 'completed'
-          : index === currentStep
-          ? 'active'
-          : 'idle';
+      const status = index < currentStep ? 'completed' : index === currentStep ? 'active' : 'idle';
 
       // For overview, get category from payload
       const category = (step.payload as Record<string, unknown>)?.category as string | undefined;
@@ -117,7 +118,9 @@ export function FlowCanvas() {
             status,
             description: isOverview
               ? (step.payload as Record<string, unknown>)?.summary
-              : (step.payload ? Object.keys(step.payload).join(', ') : undefined),
+              : step.payload
+                ? Object.keys(step.payload).join(', ')
+                : undefined,
           },
           selected: step.nodeId === selectedNodeId,
         });
@@ -141,7 +144,7 @@ export function FlowCanvas() {
 
     if (isOverview) {
       // Use the predefined overview edges for proper algorithm flow
-      const nodeIds = new Set(executionLog.map(s => s.nodeId));
+      const nodeIds = new Set(executionLog.map((s) => s.nodeId));
 
       overviewEdges.forEach((edge) => {
         // Only include edges where both nodes exist
@@ -161,7 +164,7 @@ export function FlowCanvas() {
               label: edge.label,
               labelStyle: {
                 fontSize: 9,
-                fill: isLoopBack ? '#484f58' : '#8b949e'
+                fill: isLoopBack ? '#484f58' : '#8b949e',
               },
               labelBgStyle: { fill: '#0d1117', fillOpacity: 0.9 },
               labelBgPadding: [4, 2] as [number, number],
@@ -214,7 +217,7 @@ export function FlowCanvas() {
     (_: React.MouseEvent, node: Node) => {
       selectNode(node.id);
     },
-    [selectNode]
+    [selectNode],
   );
 
   if (executionLog.length === 0) {
@@ -243,15 +246,8 @@ export function FlowCanvas() {
           type: 'smoothstep',
         }}
       >
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={20}
-          size={1}
-          color="#30363d"
-        />
-        <Controls
-          className="!bg-[#161b22] !border-[#30363d] !rounded-lg [&>button]:!bg-[#161b22] [&>button]:!border-[#30363d] [&>button]:!text-[#c9d1d9] [&>button:hover]:!bg-[#30363d]"
-        />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#30363d" />
+        <Controls className="!bg-[#161b22] !border-[#30363d] !rounded-lg [&>button]:!bg-[#161b22] [&>button]:!border-[#30363d] [&>button]:!text-[#c9d1d9] [&>button:hover]:!bg-[#30363d]" />
         <MiniMap
           nodeColor={(node) => {
             const status = (node.data as Record<string, unknown>).status;

src/components/FlowNode.tsx

@@ -47,7 +47,7 @@ const iconMap: Record<string, React.ElementType> = {
   response: MessageSquare,
   'tool-blocked': XCircle,
   'user-approval': Shield,
-  'compaction': FileText,
+  compaction: FileText,
   'context-check': FileText,
 };
 
@@ -71,14 +71,15 @@ const colorMap: Record<string, string> = {
   response: 'border-green-500 bg-green-500/10',
   'tool-blocked': 'border-red-500 bg-red-500/10',
   'user-approval': 'border-yellow-500 bg-yellow-500/10',
-  'compaction': 'border-purple-400 bg-purple-400/10',
+  compaction: 'border-purple-400 bg-purple-400/10',
   'context-check': 'border-yellow-400 bg-yellow-400/10',
 };
 
 function FlowNode({ data, selected }: FlowNodeProps) {
   const nodeType = data.nodeType.split('-').slice(0, 2).join('-');
   const Icon = iconMap[nodeType] || iconMap[data.nodeType.split('-')[0]] || Cog;
-  const colorClass = colorMap[nodeType] || colorMap[data.nodeType.split('-')[0]] || 'border-gray-500 bg-gray-500/10';
+  const colorClass =
+    colorMap[nodeType] || colorMap[data.nodeType.split('-')[0]] || 'border-gray-500 bg-gray-500/10';
 
   const statusClasses = {
     idle: 'opacity-50',
@@ -94,7 +95,7 @@ function FlowNode({ data, selected }: FlowNodeProps) {
         'px-4 py-3 rounded-lg border-2 min-w-[180px] max-w-[240px] transition-all duration-300',
         colorClass,
         statusClasses[data.status],
-        selected && 'ring-2 ring-[#58a6ff] ring-offset-2 ring-offset-[#0d1117]'
+        selected && 'ring-2 ring-[#58a6ff] ring-offset-2 ring-offset-[#0d1117]',
       )}
     >
       <Handle
@@ -108,7 +109,7 @@ function FlowNode({ data, selected }: FlowNodeProps) {
           className={clsx(
             data.status === 'active' && 'text-green-400',
             data.status === 'error' && 'text-red-400',
-            data.status === 'completed' && 'text-[#c9d1d9]'
+            data.status === 'completed' && 'text-[#c9d1d9]',
           )}
         />
         <span className="text-sm font-medium truncate">{data.label}</span>