Initial commit of hexa.hacktoolkit.com website

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jontsai

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

CNAME

@@ -0,0 +1 @@
+hexa.hacktoolkit.com

DEBUG_CHAT_FLOW.md

@@ -0,0 +1,312 @@
+# Debugging Chat Response Flow
+
+This guide helps you understand what's happening when you send a message and why responses might not appear.
+
+## 🔍 What to Check in Browser Console
+
+### Step 1: Send a Message
+
+When you type a message and hit Send, you should see these logs in order:
+
+```
+📤 [ChatPanel] Sending user message: "your message here"
+📊 [ChatPanel] Messages updated, total count: 2
+  1. [assistant] Hello! I'm Hexa ⟡ — your AI coding companion...
+  2. [user] your message here...
+```
+
+**✅ If you see this:** User message is being added correctly
+
+**❌ If you don't:** Check if the form is submitting (maybe preventDefault failed)
+
+---
+
+### Step 2: AI Processing Begins
+
+Immediately after, you should see:
+
+```
+⏳ [ChatPanel] Waiting for AI response...
+💬 [AI API] Generating response with provider: mock (or transformers)
+📝 [AI API] User message: "your message here"
+```
+
+**✅ If you see this:** Message is being sent to AI provider
+
+**❌ If you don't:** Check if isLoading is preventing submission
+
+---
+
+### Step 3: AI Provider Routing
+
+Depending on your provider, you'll see:
+
+**For Mock Mode:**
+```
+🎭 [AI API] Routing to Mock API...
+✅ [AI API] Mock response received
+```
+
+**For Transformers.js:**
+```
+🤖 [AI API] Routing to Transformers.js...
+🔮 Generating python code for: "your message"
+⏳ Calling model (this may take 5-10 seconds)...
+📝 Raw model output: {...}
+✅ [AI API] Transformers.js response received
+```
+
+**✅ If you see this:** AI is processing your request
+
+**❌ If you don't:** AI call might have failed silently
+
+---
+
+### Step 4: Response Received
+
+After AI processing, you should see:
+
+```
+📥 [ChatPanel] Received AI response: {
+  id: "msg-1234567890",
+  content: "Here's a python solution ⟡",
+  hasCode: true,
+  language: "python",
+  codeLength: 145
+}
+```
+
+**✅ If you see this:** Response was generated successfully
+
+**❌ If you don't:** Check the previous step for errors
+
+---
+
+### Step 5: Adding to State
+
+This is CRITICAL - the response must be added to React state:
+
+```
+💬 [ChatPanel] Adding AI message to state, current count: 2
+💬 [ChatPanel] New message count: 3
+```
+
+**✅ If you see this:** Message is being added to state
+
+**❌ If you don't:** React state update might have failed
+
+---
+
+### Step 6: Messages Re-render
+
+When state updates, messages should re-render:
+
+```
+📊 [ChatPanel] Messages updated, total count: 3
+  1. [assistant] Hello! I'm Hexa ⟡...
+  2. [user] your message here...
+  3. [assistant] Here's a python solution ⟡...
+```
+
+**✅ If you see this:** Messages array has the new message
+
+**❌ If you don't:** React isn't triggering re-render
+
+---
+
+### Step 7: Code Editor Update
+
+If the response has code:
+
+```
+📝 [ChatPanel] Updating code editor with: python
+```
+
+**✅ If you see this:** Code editor should update
+
+**❌ If you don't:** No code in response, or update failed
+
+---
+
+### Step 8: Complete
+
+Finally:
+
+```
+✅ [ChatPanel] Request completed, loading=false
+```
+
+**✅ If you see this:** Everything completed successfully
+
+---
+
+## 🚨 Common Issues & Solutions
+
+### Issue: Response Generated But Not Visible
+
+**Console shows:**
+```
+📥 [ChatPanel] Received AI response: {...}
+💬 [ChatPanel] Adding AI message to state, current count: 2
+💬 [ChatPanel] New message count: 3
+✅ [ChatPanel] Request completed
+```
+
+**BUT:** No new message in chat UI
+
+**Possible causes:**
+1. **React not re-rendering**
+   - Solution: Check React DevTools, force refresh
+2. **Message ID conflict**
+   - Solution: Check if `message.id` is unique
+3. **CSS hiding message**
+   - Solution: Inspect element, check if it's in DOM
+
+**How to verify:**
+- Open React DevTools
+- Find ChatPanel component
+- Check `messages` state - should have 3 items
+- If state is correct but UI isn't showing it → React rendering issue
+
+---
+
+### Issue: Transformers Takes Forever
+
+**Console shows:**
+```
+⏳ Calling model (this may take 5-10 seconds)...
+(nothing else for minutes)
+```
+
+**Possible causes:**
+1. Model is actually processing (wait longer)
+2. Model crashed silently
+3. Browser ran out of memory
+
+**Solution:**
+- Wait up to 30 seconds
+- If nothing, check browser memory usage
+- Try with a shorter prompt
+- Switch back to Mock mode
+
+---
+
+### Issue: No Console Logs at All
+
+**Possible causes:**
+1. Console tab not open
+2. Logs being filtered
+3. JavaScript disabled
+4. Dev server not running
+
+**Solution:**
+- Press F12, click Console tab
+- Clear all filters
+- Refresh page
+- Check `npm run dev` is running
+
+---
+
+## 🔬 Advanced Debugging
+
+### Check React State Directly
+
+Open console and paste:
+
+```javascript
+// Find the ChatPanel component in React DevTools
+// Then in console:
+$r.state  // or props, depending on component structure
+```
+
+### Force Re-render
+
+```javascript
+// In console, while on the page:
+window.location.reload()
+```
+
+### Check Messages Array
+
+Add this temporarily to ChatPanel.tsx:
+
+```typescript
+useEffect(() => {
+  console.log('=== MESSAGES ARRAY ===', JSON.stringify(messages, null, 2))
+}, [messages])
+```
+
+---
+
+## 📊 Expected Full Console Log Flow
+
+Here's what a SUCCESSFUL message should look like from start to finish:
+
+```
+📤 [ChatPanel] Sending user message: "fibonacci"
+📊 [ChatPanel] Messages updated, total count: 2
+  1. [assistant] Hello! I'm Hexa ⟡...
+  2. [user] fibonacci...
+⏳ [ChatPanel] Waiting for AI response...
+💬 [AI API] Generating response with provider: mock
+📝 [AI API] User message: "fibonacci"
+🎭 [AI API] Routing to Mock API...
+✅ [AI API] Mock response received
+📥 [ChatPanel] Received AI response: {
+  id: "msg-1730345678901",
+  content: "Great choice ⟡ Here's an efficient O(n)...",
+  hasCode: true,
+  language: "typescript",
+  codeLength: 245
+}
+💬 [ChatPanel] Adding AI message to state, current count: 2
+💬 [ChatPanel] New message count: 3
+📊 [ChatPanel] Messages updated, total count: 3
+  1. [assistant] Hello! I'm Hexa ⟡...
+  2. [user] fibonacci...
+  3. [assistant] Great choice ⟡ Here's an efficient O(n)...
+📝 [ChatPanel] Updating code editor with: typescript
+✅ [ChatPanel] Request completed, loading=false
+```
+
+If you see all these logs but still no message → **React rendering issue**
+
+If logs stop partway through → **Check where they stopped for the issue**
+
+---
+
+## 🆘 Quick Fixes
+
+### Quick Fix #1: Hard Refresh
+```
+Ctrl+Shift+R (Windows/Linux)
+Cmd+Shift+R (Mac)
+```
+
+### Quick Fix #2: Clear Cache
+```
+F12 → Network tab → Disable cache (checkbox)
+Refresh page
+```
+
+### Quick Fix #3: Switch to Mock Mode
+```
+⌘+K → Click "Mock" → Try again
+```
+
+### Quick Fix #4: Check Provider
+```
+Look at bottom-right status indicator
+Should say: "🎭 Mock Mode" or "🤖 AI Ready"
+```
+
+---
+
+## 📞 Report an Issue
+
+If you're still having problems, include:
+1. Full console log (copy/paste)
+2. Which provider you're using
+3. Your exact message
+4. Screenshot of UI
+5. Browser and version

Makefile

@@ -0,0 +1,33 @@
+## help - Display help about make targets for this Makefile
+help:
+	@cat Makefile | grep '^## ' --color=never | cut -c4- | sed -e "`printf 's/ - /\t- /;'`" | column -s "`printf '\t'`" -t
+
+## install - install dependency packages
+install:
+	npm install
+
+## dev - starts the Next.js development server on port 3000
+dev: install
+	npm run dev
+
+## run - run the Next.js app server
+run: install
+	npm run build && npm run start
+
+## clean - clean previous builds
+clean:
+	rm -rf out/*
+
+## build - build the app for release
+build: clean install
+	npm run build
+	cp CNAME out/
+	touch out/.nojekyll
+
+## deploy - build and deploy the app
+deploy: clean build
+	rm -rf docs/
+	mv out docs
+	git add docs
+	git commit -m "Deploy `git rev-parse --verify HEAD`"
+	git push origin master