Polish repo for public release

- Add MIT LICENSE file
- Add OG image and meta tags for social link previews
- Add meta description for SEO
- Fix package.json: set v1.0.0, add description/author/license/repository
- Fix README: correct React version badge, add license badge, fix clone URL
- Remove leftover public/vite.svg from Vite boilerplate
- Fix TypeScript build errors (unused imports/variables, untyped property access)

Author: jonwiggins

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jon Wiggins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,7 +2,7 @@
 
 An interactive educational webapp that visualizes how [Claude Code](https://github.com/anthropics/claude-code) works internally. Explore the agentic loop algorithm through interactive flowcharts and step-by-step scenario walkthroughs.
 
-![Claude Code Visualizer](https://img.shields.io/badge/React-18-blue) ![TypeScript](https://img.shields.io/badge/TypeScript-5-blue) ![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-blue)
+![Claude Code Visualizer](https://img.shields.io/badge/React-19-blue) ![TypeScript](https://img.shields.io/badge/TypeScript-5-blue) ![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-blue) ![License](https://img.shields.io/badge/License-MIT-green)
 
 ## Features
 
@@ -30,7 +30,7 @@ An interactive educational webapp that visualizes how [Claude Code](https://gith
 
 ## Tech Stack
 
-- **React 18** with TypeScript
+- **React 19** with TypeScript
 - **Vite** for fast development and building
 - **React Flow** (@xyflow/react) for interactive flowcharts
 - **Dagre** for automatic graph layout
@@ -51,7 +51,7 @@ An interactive educational webapp that visualizes how [Claude Code](https://gith
 
 ```bash
 # Clone the repository
-git clone https://github.com/yourusername/claude-code-visualizer.git
+git clone https://github.com/jonwiggins/claude-code-visualizer.git
 cd claude-code-visualizer
 
 # Install dependencies

index.html

@@ -5,6 +5,20 @@
     <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." />
+
+    <!-- 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: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: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">

package-lock.json

@@ -1,7 +1,14 @@
 {
   "name": "claude-code-visualizer",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
+  "description": "Interactive visualization of Claude Code's agentic loop algorithm",
+  "author": "Jon Wiggins",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jonwiggins/claude-code-visualizer.git"
+  },
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -12,7 +12,7 @@ import Dagre from '@dagrejs/dagre';
 import '@xyflow/react/dist/style.css';
 import { useVisualizerStore } from '../store';
 import FlowNode from './FlowNode';
-import { overviewEdges, categoryColors } from '../algorithmOverview';
+import { overviewEdges } from '../algorithmOverview';
 
 const nodeTypes = {
   custom: FlowNode,
@@ -103,7 +103,7 @@ export function FlowCanvas() {
           : 'idle';
 
       // For overview, get category from payload
-      const category = step.payload?.category as string | undefined;
+      const category = (step.payload as Record<string, unknown>)?.category as string | undefined;
 
       // Only add node if not already present (handles duplicate node IDs)
       if (!nodeMap.has(step.nodeId)) {
@@ -116,7 +116,7 @@ export function FlowCanvas() {
             nodeType: category || step.nodeId,
             status,
             description: isOverview
-              ? step.payload?.summary
+              ? (step.payload as Record<string, unknown>)?.summary
               : (step.payload ? Object.keys(step.payload).join(', ') : undefined),
           },
           selected: step.nodeId === selectedNodeId,

public/og-image.png

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import {
   Shield,
   Zap,
-  Plus,
   Trash2,
   ChevronDown,
   ChevronRight,

public/vite.svg

@@ -5,12 +5,9 @@ import { SandboxPanel } from '../components/SandboxPanel';
 import { PlaybackControls } from '../components/PlaybackControls';
 import { ExecutionLog } from '../components/ExecutionLog';
 import { DetailPanel } from '../components/DetailPanel';
-import { useVisualizerStore } from '../store';
 import { GripVertical } from 'lucide-react';
 
 export function VisualizerPage() {
-  const { currentScenario } = useVisualizerStore();
-
   // Sidebar resizing state
   const [leftSidebarWidth, setLeftSidebarWidth] = useState(340);
   const [rightSidebarWidth, setRightSidebarWidth] = useState(320);